/* ═══════════════════════════════════════════════════════════
   MAYHEM SLOTS — premium dark design system
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Brand palette */
  --gold:        #ffd54a;
  --gold-2:      #ffaa00;
  --gold-soft:   rgba(255,213,74,.15);
  --gold-glow:   rgba(255,170,0,.45);
  --purple:      #a78bfa;
  --purple-2:    #7c3aed;
  --purple-soft: rgba(167,139,250,.18);
  --purple-glow: rgba(124,58,237,.4);
  --cyan:        #22d3ee;
  --green:       #10b981;
  --red:         #ef4444;
  --orange:      #fb923c;

  /* Surfaces */
  --bg:          #07070d;
  --bg-2:        #0d0d1a;
  --bg-3:        #14142a;
  --surface:     rgba(255,255,255,.04);
  --surface-2:   rgba(255,255,255,.07);
  --surface-3:   rgba(255,255,255,.11);
  --border:      rgba(255,255,255,.07);
  --border-2:    rgba(255,255,255,.12);
  --border-3:    rgba(255,255,255,.18);

  /* Text */
  --text:        #ffffff;
  --text-2:      rgba(255,255,255,.74);
  --text-3:      rgba(255,255,255,.5);
  --text-4:      rgba(255,255,255,.28);

  /* Shadows */
  --sh-sm: 0 2px 8px rgba(0,0,0,.4);
  --sh-md: 0 8px 28px rgba(0,0,0,.45);
  --sh-lg: 0 24px 64px rgba(0,0,0,.55);

  /* Radii */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --easing: cubic-bezier(.32, .72, 0, 1);

  /* ─ v=140 EXTENDED TOKENS ─ */
  /* Spacing scale (4px-based) */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;

  /* Border radius scale */
  --r-xs: 6px;
  --r-2xl: 32px;
  --r-full: 999px;

  /* Easing tokens */
  --ease-spring:   cubic-bezier(.36, 1.6, .6, 1);   /* bouncy */
  --ease-elastic:  cubic-bezier(.25, 1.5, .35, 1);  /* gentle bounce */
  --ease-quart:    cubic-bezier(.25, .46, .45, .94);
  --ease-quart-in: cubic-bezier(.55, .055, .68, .19);
  --ease-shake:    cubic-bezier(.36, .07, .19, .97);

  /* Duration tokens */
  --d-instant: 80ms;
  --d-fast:    150ms;
  --d-med:     250ms;
  --d-slow:    400ms;
  --d-lazy:    700ms;

  /* Status colors */
  --c-success:      #6ee7b7;
  --c-success-dim:  rgba(110,231,183,0.15);
  --c-success-border: rgba(110,231,183,0.40);
  --c-warning:      #ffd76a;
  --c-warning-dim:  rgba(255,213,106,0.15);
  --c-warning-border: rgba(255,213,106,0.40);
  --c-danger:       #ff8aa3;
  --c-danger-dim:   rgba(255,90,114,0.15);
  --c-danger-border: rgba(255,90,114,0.40);
  --c-info:         #7dc3ff;
  --c-info-dim:     rgba(125,195,255,0.12);
  --c-info-border:  rgba(125,195,255,0.40);

  /* Glow shadows by tier */
  --glow-gold:   0 0 18px rgba(255,213,106,0.45);
  --glow-green:  0 0 14px rgba(110,231,183,0.45);
  --glow-red:    0 0 16px rgba(255,90,114,0.45);
  --glow-purple: 0 0 16px rgba(199,125,255,0.45);
}

/* ── Base ─────────────────────────────────── */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Inter, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
}
html, body { height: 100%; }
body {
  /* Body — фиксированный контейнер на всю видимую высоту WebView,
     скроллится только внутренний #screens. Так body никогда не меняет
     высоту/позицию при смене таба → flick невозможен. */
  height: var(--vh, 100dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% -4%,  rgba(167,139,250,.18), transparent 42%),
    radial-gradient(circle at 100% 35%, rgba(255,170,0,.10),   transparent 50%),
    radial-gradient(circle at 50% 110%, rgba(34,211,238,.08),  transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

button { font: inherit; color: inherit; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 4px; }

/* Tabular numbers globally for stats */
.num, .stat-v, .b-item span:last-child {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── Top bar ──────────────────────────────── */
.topbar {
  flex: 0 0 auto;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: rgba(7,7,13,.95);
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.brand {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.brand-mark {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  border-radius: 8px;
  font-size: 16px;
  box-shadow: 0 4px 16px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.4);
  flex-shrink: 0;
}
.brand-text {
  font-size: 12px; font-weight: 800;
  letter-spacing: 1.2px;
  background: linear-gradient(180deg, #fff, #d8d8e8);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 380px) {
  .brand-text { display: none; }
  .b-item { font-size: 11px; padding: 4px 7px; }
  .topbar { padding: 8px 10px; gap: 6px; }
}
.balance {
  display: flex; gap: 4px;
  flex: 0 1 auto;
  justify-content: flex-end;
  overflow: visible;          /* glow от M-пилюли не должен обрезаться */
  padding: 6px 4px;            /* запас под shadow */
}
.b-item {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 6px 11px; border-radius: 999px;
  font-weight: 700; font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
  overflow: visible;
  transition: transform .25s var(--easing), background .25s;
}
.b-icon {
  font-size: 15px; opacity: .95;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.b-item.bump { animation: bump .5s var(--easing); }
@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); background: var(--gold-soft); }
  100% { transform: scale(1); }
}
.b-icon { font-size: 13px; opacity: .9; }

/* ── Screens ──────────────────────────────── */
#screens {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
}
.screen { display: none; }
.screen.active { display: block; }

/* ── Prize banner ─────────────────────────── */
.prize-banner {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, rgba(255,213,74,.10), rgba(167,139,250,.10)),
    rgba(255,255,255,.03);
  border: 1px solid var(--border-2);
  box-shadow: var(--sh-md), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
  margin-bottom: 18px;
}
.prize-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shine 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shine {
  0%, 100% { transform: translateX(-100%); }
  50%      { transform: translateX(100%); }
}
.prize-emoji {
  font-size: 44px; line-height: 1;
  filter: drop-shadow(0 6px 12px rgba(255,170,0,.4));
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.prize-info { flex: 1; min-width: 0; }
.prize-title {
  font-size: 11px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 1.4px;
  font-weight: 700;
}
.prize-meta {
  font-size: 14px; font-weight: 600; color: var(--text-2);
  margin-top: 2px;
}
.prize-stat {
  font-size: 22px; font-weight: 800;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* ── Slot machine ─────────────────────────── */
.machine {
  position: relative;
  padding: 18px 14px 16px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 50% -10%, rgba(255,213,74,.12), transparent 60%),
    linear-gradient(180deg, #1a1a30 0%, #0a0a14 100%);
  border: 1px solid var(--border-2);
  box-shadow:
    var(--sh-lg),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -2px 0 rgba(0,0,0,.5);
  margin-bottom: 16px;
  overflow: hidden;
}
.machine::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,213,74,.5), transparent);
}
/* Decorative LED dots around the reels */
.machine-leds {
  position: absolute;
  pointer-events: none;
  inset: 14px 12px;
  border-radius: var(--r-lg);
}
.machine-leds::before, .machine-leds::after {
  content: '';
  position: absolute;
  height: 6px; width: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold-glow);
  animation: ledBlink 1.4s ease-in-out infinite;
}
.machine-leds::before { top: -3px; left: 50%; transform: translateX(-50%); }
.machine-leds::after  { bottom: -3px; left: 50%; transform: translateX(-50%); animation-delay: .7s; }
@keyframes ledBlink {
  0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50% { opacity: .35; transform: translateX(-50%) scale(.85); }
}

.reels {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px;
  height: 168px;
  border-radius: 14px;
  background: #02020a;
  box-shadow:
    inset 0 4px 18px rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(255,213,74,.12);
}
.reel {
  position: relative;
  background: linear-gradient(180deg, #0a0a16 0%, #06060e 100%);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.04);
  box-shadow:
    inset 0 0 28px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.strip {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; flex-direction: column;
  will-change: transform;
}
.symbol {
  height: 152px;
  display: flex; align-items: center; justify-content: center;
  font-size: 78px;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.4));
}
/* Старые .gem/.wild/.scatter переименованы в .sym-gem/.sym-wild/.sym-scatter
   и определяются ниже в блоке Gift panel. */
/* Win-line glow + scanlines */
.window-overlay {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 152px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 18%, transparent 82%, rgba(0,0,0,.55) 100%);
}
.window-overlay::before, .window-overlay::after {
  content: '';
  position: absolute; left: 4px; right: 4px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,213,74,.6), transparent);
  opacity: .6;
}
.window-overlay::before { top: 8px; }
.window-overlay::after  { bottom: 8px; }

/* Active win-line glow */
.reels.win .window-overlay::before,
.reels.win .window-overlay::after {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 14px var(--gold-glow);
  opacity: 1;
  animation: winLine 1.2s ease-in-out infinite;
}
@keyframes winLine {
  0%, 100% { opacity: .8; }
  50% { opacity: 1; }
}

.reels.shake { animation: shake .35s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
}

.result {
  margin-top: 16px;
  text-align: center;
  min-height: 54px;
  padding: 0 8px;
}
.r-title {
  font-size: 18px; font-weight: 800;
  letter-spacing: -.01em;
  transition: color .2s, transform .25s var(--easing);
}
.r-sub {
  font-size: 13px; color: var(--text-3);
  margin-top: 4px; min-height: 18px;
  white-space: pre-line;
}
.r-title.jackpot {
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pulse 1.1s ease-in-out infinite;
  font-size: 22px;
}
.r-title.win   { color: var(--green); }
.r-title.near  { color: var(--orange); }
.r-title.miss  { color: var(--text-3); }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* ── Buttons ──────────────────────────────── */
.btn {
  position: relative;
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 15px; font-weight: 700;
  cursor: pointer; outline: none;
  transition: transform .12s var(--easing), opacity .15s, background .2s, border-color .2s;
  overflow: hidden;
  letter-spacing: -0.005em;
}
.btn:active { transform: scale(.97); }
.btn:disabled {
  opacity: .45; cursor: not-allowed;
  transform: none !important;
}
.btn .icon { font-size: 16px; line-height: 1; }
.btn:not(:disabled):hover { background: var(--surface-3); border-color: var(--border-2); }

.btn.primary {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color: #1a1410;
  border-color: transparent;
  box-shadow:
    0 6px 20px var(--gold-glow),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.15);
  font-weight: 800;
}
.btn.primary:not(:disabled):hover {
  background: linear-gradient(135deg, #ffe27a 0%, #ffba33 100%);
}
.btn.primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform: translateX(-200%);
  pointer-events: none;
  transition: transform .9s var(--easing);
}
.btn.primary:not(:disabled):hover::after { transform: translateX(200%); }

.btn.purple {
  background: linear-gradient(135deg, var(--purple), var(--purple-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 20px var(--purple-glow), inset 0 1px 0 rgba(255,255,255,.2);
  font-weight: 800;
}

.btn.big { padding: 17px; font-size: 16px; border-radius: 14px; }
.btn.small {
  padding: 8px 12px;
  font-size: 12.5px;
  width: auto;
  border-radius: 8px;
  flex: 0 0 auto;
}

/* Ripple */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  transform: scale(0);
  animation: ripple .6s ease-out;
  pointer-events: none;
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

.row { display: flex; gap: 8px; margin-top: 10px; }
.row.two > .btn { flex: 1; }
.hint {
  text-align: center; color: var(--text-3);
  font-size: 12px; margin-top: 14px;
  letter-spacing: .2px;
}

/* ── Profile ──────────────────────────────── */
.profile-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
}
.avatar {
  width: 56px; height: 56px;
  border-radius: 18px;
  display: grid; place-items: center;
  font-size: 26px; font-weight: 800;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  color: #1a1410;
  box-shadow: 0 8px 22px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.3);
  text-transform: uppercase;
  flex-shrink: 0;
}
.who-name {
  font-size: 18px; font-weight: 800;
  letter-spacing: -.01em;
}
.who-id { font-size: 13px; color: var(--text-3); margin-top: 2px; }

/* Stats */
.stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-bottom: 14px;
}
.stat {
  background: var(--surface);
  padding: 14px 8px; border-radius: var(--r-sm);
  text-align: center;
  border: 1px solid var(--border);
  transition: transform .25s var(--easing), border-color .2s;
}
.stat:active { transform: scale(.98); }
.stat-v {
  font-size: 22px; font-weight: 800;
  letter-spacing: -.02em;
}
.stat-l {
  font-size: 10.5px; color: var(--text-3);
  margin-top: 4px; text-transform: uppercase;
  letter-spacing: .8px; font-weight: 600;
}
.stat.hero {
  padding: 16px 8px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-color: var(--border-2);
}
.stat.hero .stat-v {
  font-size: 28px;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 12px;
}
.card-title {
  font-size: 11.5px; font-weight: 700;
  color: var(--text-3); text-transform: uppercase;
  letter-spacing: 1.2px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}

/* Achievements */
.achv { display: flex; flex-wrap: wrap; gap: 6px; }
.achv-item {
  padding: 7px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  background: var(--gold-soft);
  border: 1px solid rgba(255,213,74,.3);
  color: var(--gold);
  transition: transform .2s var(--easing);
}
.achv-item:active { transform: scale(.95); }
.achv-item.locked {
  background: rgba(255,255,255,.025);
  border-color: var(--border);
  color: var(--text-4);
  filter: grayscale(.6);
}

/* History list */
.history { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.h-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 11px;
  font-size: 13.5px;
  transition: background .2s;
}
.h-emoji { font-size: 18px; flex-shrink: 0; }
.h-tier { flex: 1; font-weight: 600; }
.h-time { color: var(--text-3); font-size: 12px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.h-item.win {
  background: linear-gradient(90deg, var(--gold-soft), transparent);
  border-color: rgba(255,213,74,.25);
}
.h-item.win .h-tier {
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Won gifts */
.wins {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.wins .w-item {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 26px;
  background: var(--gold-soft);
  border: 1px solid rgba(255,213,74,.3);
  border-radius: 12px;
  filter: drop-shadow(0 3px 6px rgba(255,170,0,.25));
}

/* Empty state */
.empty {
  color: var(--text-3); font-size: 13px;
  text-align: center; padding: 22px 8px;
}

/* Ref */
.ref-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.ref-stat {
  text-align: center;
  padding: 10px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 11px;
}
.ref-stat-v {
  font-size: 20px; font-weight: 800;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ref-stat:nth-child(2) .ref-stat-v {
  background: linear-gradient(180deg, var(--purple), var(--purple-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ref-stat-l {
  font-size: 10.5px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .8px;
  font-weight: 600; margin-top: 3px;
}
.ref { display: flex; flex-direction: column; gap: 8px; }
.ref code {
  display: block;
  background: var(--bg-3);
  padding: 11px 13px; border-radius: 10px;
  font-size: 12px; word-break: break-all;
  color: var(--purple);
  border: 1px solid var(--border);
  font-family: "SF Mono", "Menlo", monospace;
}
.ref-actions { display: flex; gap: 8px; }
.ref-actions .btn { flex: 1; }

/* ── Session ──────────────────────────────── */
.session-hero {
  text-align: center;
  padding: 24px 16px;
  background:
    radial-gradient(circle at 50% 0%, var(--gold-soft), transparent 65%),
    var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
}
.big-emoji {
  font-size: 72px; line-height: 1;
  filter: drop-shadow(0 8px 18px var(--gold-glow));
  animation: float 4s ease-in-out infinite;
}
.sess-title {
  font-size: 11px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-top: 12px; font-weight: 700;
}
.sess-cost {
  font-size: 26px; font-weight: 800;
  letter-spacing: -.02em;
  margin-top: 4px;
  background: linear-gradient(180deg, #fff, #b8b8d2);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Live feed */
.feed { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.f-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 11px;
  font-size: 13.5px;
  animation: slideIn .35s var(--easing);
}
.f-item.jackpot {
  background: linear-gradient(135deg, var(--gold-soft), rgba(167,139,250,.1));
  border-color: rgba(255,213,74,.4);
  box-shadow: 0 0 0 1px rgba(255,213,74,.2);
}
.f-item.jackpot .h-tier {
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

#liveDot {
  margin-top: 10px;
  font-size: 11px;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
}
#liveDot::before {
  content: '●';
  margin-right: 5px;
  animation: blink 1.5s infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

/* Global stats */
.global-stats .kv {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.global-stats .kv:last-child { border-bottom: none; }
.global-stats .kv span { color: var(--text-2); }
.global-stats .kv b { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── Tab bar (сегментированные пилюли — НАВЕРХУ) ────────── */
/* Никаких transform/scale анимаций на табах — iOS WebKit на них реагирует
   композитингом, что выглядит как «дёрг» панели при тапе. */
.tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 8px 4px 10px;
  background: rgba(7,7,13,.95);
  border-bottom: 1px solid var(--border);
  z-index: 40;
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 7px 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-3);
  font-size: 10px; font-weight: 700;
  cursor: pointer;
  letter-spacing: .1px;
  min-height: 46px;
  min-width: 0;          /* позволяем сжаться внутри grid */
  overflow: hidden;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}
.tab .t-icon {
  font-size: 16px; line-height: 1;
  flex-shrink: 0;
}
.tab .t-label {
  font-size: 9.5px;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.tab.active {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #1a1410;
  border-color: transparent;
  box-shadow: 0 4px 14px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.3);
}
/* На узких экранах — только иконки */
@media (max-width: 420px) {
  .tab .t-label { display: none; }
  .tab { gap: 0; padding: 10px 2px; min-height: 44px; }
  .tab .t-icon { font-size: 18px; }
  .tabs { padding: 8px 6px 10px; }
}
/* Очень узкие (менее 340px) — сжимаем ещё сильнее */
@media (max-width: 340px) {
  .tabs { gap: 2px; padding: 6px 4px 8px; }
  .tab { padding: 8px 1px; min-height: 40px; border-radius: 8px; }
  .tab .t-icon { font-size: 16px; }
}

/* ── Pack sheet ───────────────────────────── */
.sheet {
  position: fixed; inset: 0;
  display: none;
  z-index: 100;
}
.sheet.show { display: block; }
.sheet-bg {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .25s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.sheet-card {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border-2);
  border-radius: 24px 24px 0 0;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  animation: slideUp .35s var(--easing);
  box-shadow: var(--sh-lg);
}
.sheet-handle {
  width: 38px; height: 4px;
  background: var(--surface-3);
  border-radius: 999px;
  margin: -10px auto 14px;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.sheet-title {
  font-size: 18px; font-weight: 800;
  text-align: center; margin-bottom: 14px;
  letter-spacing: -.01em;
}
.sheet-subtitle {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: -8px;
  margin-bottom: 14px;
}

.packs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.pack {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: transform .15s var(--easing), background .2s, border-color .2s;
}
.pack:active { transform: scale(.98); }
.pack:hover { background: var(--surface-2); border-color: var(--border-2); }
.pack.best {
  border-color: rgba(255,213,74,.45);
  background: linear-gradient(135deg, var(--gold-soft), transparent);
}
.pack.best::before {
  content: 'BEST';
  position: absolute; top: -8px; right: 14px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #1a1410;
  font-size: 10px; font-weight: 800;
  padding: 3px 8px; border-radius: 6px;
  letter-spacing: 1px;
  box-shadow: 0 4px 10px var(--gold-glow);
}
.pack-l { font-weight: 700; font-size: 15px; }
.pack-save {
  font-size: 11.5px; color: var(--green);
  margin-top: 2px; font-weight: 600;
}
.pack-r {
  font-weight: 800; font-size: 18px;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}

/* ── Jackpot overlay ──────────────────────── */
.jackpot {
  position: fixed; inset: 0;
  display: none;
  z-index: 200;
  background: radial-gradient(circle at center, rgba(255,170,0,.18), rgba(0,0,0,.92) 60%);
  backdrop-filter: blur(4px);
}
.jackpot.show { display: grid; place-items: center; animation: fadeIn .4s; }
.jackpot canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.jackpot-text {
  position: relative; text-align: center;
  padding: 24px;
  z-index: 1;
}
.jp-emoji {
  font-size: 110px;
  filter: drop-shadow(0 10px 30px var(--gold-glow));
  animation: bounce 1.1s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0) scale(1) rotate(-3deg); }
  50%      { transform: translateY(-14px) scale(1.06) rotate(3deg); }
}
.jp-title {
  font-size: 44px; font-weight: 900;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff8d6, var(--gold), var(--gold-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 6px 30px var(--gold-glow);
  margin: 14px 0 4px;
}
.jp-sub {
  color: rgba(255,255,255,.85);
  font-size: 16px;
  margin-bottom: 24px;
  font-weight: 500;
}
.jp-close { display: block; margin: 0 auto; min-width: 200px; }
.jp-actions {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 280px; margin: 0 auto;
}
.jp-actions .btn { width: 100%; padding: 14px; }

/* ── Toast ────────────────────────────────── */
.toast {
  position: fixed; bottom: 100px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(20, 20, 40, .95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-2);
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s var(--easing);
  z-index: 300;
  max-width: 90vw;
  box-shadow: var(--sh-md);
}
/* В Crash fullscreen — поднимаем toast над sticky CTA + safe-area */
body.scr-crash .toast {
  bottom: calc(100px + env(safe-area-inset-bottom));
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast[data-type="success"] {
  border-color: rgba(16,185,129,.5);
  background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(20,20,40,.95));
}
.toast[data-type="error"] {
  border-color: rgba(239,68,68,.55);
  background: linear-gradient(135deg, rgba(239,68,68,.2), rgba(20,20,40,.95));
}

/* ── Better empty state ─────────────────── */
.empty-rich {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 28px 16px;
  text-align: center;
  color: var(--text-3);
}
.empty-rich .empty-icon {
  font-size: 40px;
  opacity: .5;
  margin-bottom: 10px;
}
.empty-rich .empty-title {
  font-size: 14px; font-weight: 700;
  color: var(--text-2);
  margin-bottom: 4px;
}
.empty-rich .empty-sub {
  font-size: 12px;
  color: var(--text-3);
  max-width: 240px;
  line-height: 1.5;
}

/* ── Skeleton loader ──────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface), var(--surface-2), var(--surface));
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
  border-radius: 8px;
  color: transparent !important;
}
@keyframes skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Setting row + iOS-style switch ──────── */
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  cursor: pointer;
}
.setting-info { flex: 1; min-width: 0; }
.setting-label { font-size: 14px; font-weight: 600; }
.setting-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }

.switch {
  position: relative;
  display: inline-block;
  width: 46px; height: 28px;
  flex-shrink: 0;
}
.switch input {
  opacity: 0; width: 0; height: 0;
}
.switch-slider {
  position: absolute; cursor: pointer;
  inset: 0;
  background: var(--surface-3);
  border-radius: 999px;
  transition: background .2s var(--easing);
}
.switch-slider::before {
  content: '';
  position: absolute;
  height: 22px; width: 22px;
  left: 3px; bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform .25s var(--easing);
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.switch input:checked + .switch-slider {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
}
.switch input:checked + .switch-slider::before {
  transform: translateX(18px);
}

/* ── Onboarding ──────────────────────────── */
.onboarding {
  position: fixed; inset: 0;
  display: none;
  z-index: 250;
  background:
    radial-gradient(circle at 30% 20%,  rgba(167,139,250,.18), transparent 50%),
    radial-gradient(circle at 70% 80%,  rgba(255,170,0,.12),   transparent 55%),
    rgba(7,7,13,.97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.onboarding.show { display: flex; animation: fadeIn .35s ease; }
.onboard-card {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--border-2);
  border-radius: 24px;
  padding: 28px 22px 22px;
  box-shadow: var(--sh-lg), inset 0 1px 0 rgba(255,255,255,.06);
  text-align: center;
}
.onboard-slides { position: relative; min-height: 270px; }
.onboard-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(20px);
  transition: opacity .35s var(--easing), transform .35s var(--easing);
}
.onboard-slide.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.onboard-emoji {
  font-size: 76px;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.5));
  margin-bottom: 14px;
  animation: float 4s ease-in-out infinite;
}
.onboard-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff, #c2c2d8);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}
.onboard-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
  padding: 0 6px;
}
.onboard-text b {
  color: var(--gold);
  font-weight: 800;
}
.onboard-dots {
  display: flex; justify-content: center; gap: 6px;
  margin: 18px 0 18px;
}
.onboard-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--surface-3);
  transition: width .25s var(--easing), background .25s;
}
.onboard-dot.active {
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  width: 22px;
}
.onboard-actions {
  display: flex; gap: 10px;
}
.onboard-actions .btn { flex: 1; }
.onboard-actions .btn.small {
  flex: 0 0 auto;
  padding: 12px 16px;
}

/* ── Top strip: bonus banner + countdown ────────────── */
#topStrip { padding: 0 14px; margin-top: 10px; }
#topStrip:empty { display: none; }

.bonus-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, rgba(255,213,74,.25), rgba(167,139,250,.18));
  border: 1px solid var(--gold);
  border-radius: 14px;
  font-size: 13.5px; font-weight: 800;
  color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 6px 18px var(--gold-glow);
  animation: bonusPulse 1.4s ease-in-out infinite;
}
@keyframes bonusPulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--gold), 0 6px 18px var(--gold-glow); }
  50%      { box-shadow: 0 0 0 2px var(--gold-2), 0 8px 28px rgba(255,170,0,.7); }
}
.bonus-banner .bb-icon { font-size: 18px; }
.bonus-banner .bb-count {
  margin-left: auto;
  background: var(--gold);
  color: #1a1410;
  padding: 2px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.bonus-banner .bb-mult {
  font-size: 11px;
  color: var(--text-2);
  font-weight: 700;
}

.countdown-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  margin-bottom: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-2);
}
.countdown-banner.urgent {
  border-color: var(--orange);
  color: var(--orange);
  animation: cdPulse 1s ease-in-out infinite;
}
@keyframes cdPulse {
  0%, 100% { background: var(--surface-2); }
  50%      { background: rgba(251,146,60,.15); }
}
.countdown-banner .cb-time {
  margin-left: auto;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* Wild + Scatter символы */
/* Старые .symbol.wild и .symbol.scatter переименованы в .sym-wild/.sym-scatter
   (теперь живут в блоке Gift panel выше). */

/* ── Stats Dashboard ─────────────────────── */
.stats-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.sd-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 12px 8px;
  text-align: center;
}
.sd-v {
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.sd-l {
  font-size: 10.5px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .8px;
  font-weight: 700; margin-top: 4px;
}
.sd-tier-row {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.sd-tier-cell {
  flex: 1 0 calc(20% - 6px);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 4px;
  text-align: center;
  font-size: 11px;
}
.sd-tier-cell .sd-tc-icon { font-size: 16px; line-height: 1; }
.sd-tier-cell .sd-tc-num { font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.sd-spark-label {
  font-size: 11px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .6px;
  font-weight: 700; margin-bottom: 6px;
}
.sd-sparkline {
  width: 100%;
  height: 60px;
  background: var(--surface-2);
  border-radius: 8px;
  display: block;
}
.sd-sparkline path {
  fill: rgba(255,213,74,.18);
  stroke: var(--gold);
  stroke-width: 1.5;
}

.speed-select {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 6px 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

/* ── Cascade animation (универсально для legacy 3x3 и нового 5x3) ── */
.gift-panel .symbol.cascade-explode,
.reels-5x3 .symbol.cascade-explode,
.symbol.cascade-explode {
  animation: cascadeExplode .55s ease-in forwards !important;
  z-index: 5;
}
@keyframes cascadeExplode {
  0%   { transform: scale(1) rotate(0deg); opacity: 1; }
  40%  { transform: scale(1.4) rotate(8deg); opacity: 1;
         filter: drop-shadow(0 0 22px rgba(255,213,74,1));
         background: radial-gradient(circle, rgba(255,213,74,.4), transparent 60%); }
  100% { transform: scale(0) rotate(180deg); opacity: 0;
         filter: drop-shadow(0 0 0 rgba(255,213,74,0)); }
}
.gift-panel .symbol.cascade-fall-in,
.reels-5x3 .symbol.cascade-fall-in,
.symbol.cascade-fall-in {
  animation: cascadeFallIn .45s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes cascadeFallIn {
  0%   { transform: translateY(-180%) scale(.6); opacity: 0; }
  60%  { transform: translateY(8%) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.cascade-counter {
  position: absolute;
  top: 8px; right: 12px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #1a1410;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 800;
  box-shadow: 0 4px 14px var(--gold-glow);
  z-index: 10;
  animation: cascadeBadgePop .35s ease-out;
  pointer-events: none;
}
@keyframes cascadeBadgePop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ── Бонус-карты ───────────────────────── */
.cards-active {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
}
.cards-active:empty { display: none; }
.cards-active .effect-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  background: linear-gradient(135deg, var(--purple-soft), transparent);
  border: 1px solid rgba(167,139,250,.45);
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  color: var(--purple);
}
.cards-inventory {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.card-item {
  position: relative;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.card-item:active { background: var(--surface-3); }
.card-item:hover  { border-color: var(--border-3); }
.card-item-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.card-item-icon { font-size: 24px; }
.card-item-name { font-size: 13px; font-weight: 700; flex: 1; }
.card-item-count {
  background: linear-gradient(135deg, var(--purple), var(--purple-2));
  color: #fff; padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.card-item-desc {
  font-size: 11.5px; color: var(--text-3);
  line-height: 1.35;
  min-height: 30px;
}
.card-item-use {
  margin-top: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #1a1410;
  font-size: 12px; font-weight: 800;
  cursor: pointer;
}
.card-item-use:disabled {
  background: var(--surface-3); color: var(--text-3); cursor: not-allowed;
}

/* ── Гайд ─────────────────────────────── */
.guide-intro {
  text-align: center;
  background: linear-gradient(135deg, rgba(255,213,74,.1), rgba(167,139,250,.1));
  border-color: rgba(255,213,74,.3);
}
.guide-title {
  font-size: 22px; font-weight: 900;
  background: linear-gradient(180deg, #fff, #c2c2d8);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.guide-sub { font-size: 13px; color: var(--text-3); margin-top: 4px; }
.guide-card { padding: 14px 16px; }
.guide-h {
  font-size: 15px; font-weight: 800;
  margin-bottom: 8px;
  color: var(--gold);
  letter-spacing: -.01em;
}
.guide-card p {
  font-size: 13.5px; line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 8px;
}
.guide-card p:last-child { margin-bottom: 0; }
.guide-card p.hint {
  font-size: 12px;
  color: var(--text-3);
  background: var(--surface-2);
  padding: 6px 10px;
  border-radius: 8px;
  border-left: 2px solid var(--gold);
}
.guide-card ul {
  font-size: 13.5px; line-height: 1.6;
  color: var(--text-2);
  padding-left: 22px; margin: 0 0 6px;
}
.guide-card ul li { margin-bottom: 3px; }
.guide-card b { color: var(--text); }
.guide-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
  margin: 6px 0;
}
.guide-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-2);
}
.guide-table td:first-child {
  font-size: 18px;
  width: 36px; text-align: center;
  vertical-align: middle;
}
.guide-table tr:last-child td { border-bottom: none; }

/* Notif/sound toggles row */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row .tr-label { font-size: 14px; }

/* ── Gift selector — панелька с выбором приза ────────── */
.gift-selector {
  display: flex; gap: 8px;
  padding: 18px 10px 10px;     /* верх 18px чтобы бейдж "🔥 Ивент" не обрезало */
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gift-selector::-webkit-scrollbar { display: none; }
.gift-selector:empty { display: none; }

.gs-tile {
  position: relative;
  flex: 1 0 86px;
  min-width: 86px;
  padding: 10px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  scroll-snap-align: start;
}
.gs-tile.active {
  background: linear-gradient(180deg, var(--gold-soft), transparent);
  border-color: var(--gold);
  box-shadow: 0 4px 14px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Featured / event tile — золотой обвод + пульсация */
.gs-tile.featured {
  background: linear-gradient(180deg, rgba(255,213,74,.18), rgba(255,170,0,.05));
  border-color: var(--gold);
  animation: featuredPulse 2.2s ease-in-out infinite;
  margin-top: 8px;  /* чуть отступ под бейдж */
}
.gs-tile.featured.active {
  background: linear-gradient(180deg, rgba(255,213,74,.28), rgba(255,170,0,.08));
}
@keyframes featuredPulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--gold), 0 4px 18px var(--gold-glow); }
  50%      { box-shadow: 0 0 0 2px var(--gold-2), 0 8px 26px rgba(255,170,0,.7); }
}
.gs-tile.featured .gs-emoji {
  filter: drop-shadow(0 0 12px var(--gold-glow)) drop-shadow(0 3px 8px rgba(0,0,0,.4));
  animation: gsEmojiBob 2.6s ease-in-out infinite;
}
@keyframes gsEmojiBob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.06); }
}
.gs-event-badge {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff4d4f, #ff7a3c);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .8px;
  border: 2px solid var(--bg-2);
  z-index: 3;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(255,77,79,.5);
}
.gs-tile.sold {
  opacity: .4;
  filter: grayscale(.5);
  cursor: not-allowed;
}
.gs-emoji {
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.4));
}
.gs-cost {
  font-size: 13px;
  font-weight: 800;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gs-meta {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.gs-paid-badge {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--purple), var(--purple-2));
  color: #fff;
  font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  box-shadow: 0 3px 8px var(--purple-glow);
  border: 2px solid var(--bg-2);
  z-index: 2;
}
.gs-lock-badge {
  position: absolute;
  top: -6px; left: -6px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #2a2a3e, #1a1a2a);
  border: 2px solid var(--gold);
  border-radius: 999px;
  font-size: 10px;
  z-index: 2;
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
}

/* ── Активная панель приза (одна на странице) ────────── */
#activePanel { display: block; }

.gift-panel {
  position: relative;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 16px 14px 14px;
  box-shadow: var(--sh-md), inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
}
.gift-panel.sold { opacity: .55; filter: grayscale(.5); }
.gift-panel::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,213,74,.45), transparent);
}

.gp-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.gp-emoji {
  font-size: 44px; line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 5px 12px rgba(255,170,0,.35));
}
.gp-info { flex: 1; min-width: 0; }
.gp-title {
  font-size: 18px; font-weight: 800;
  letter-spacing: -.01em;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.gp-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--text-2);
  margin-top: 2px;
  flex-wrap: wrap;
}
.gp-meta .paid-badge {
  background: linear-gradient(135deg, var(--purple), var(--purple-2));
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11.5px;
}

/* Матричная мини-машина 3×3: 3 колонки × 3 видимые ячейки в каждой */
.gift-panel .reels {
  position: relative;
  /* высота = 3 ячейки × 76px + padding 8 + 8 = 244 */
  height: 244px;
  padding: 8px;
  border-radius: 14px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  overflow: visible;  /* чтобы popups могли вылетать наружу */
}
.gift-panel .reel {
  border-radius: 12px;
  height: 228px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, #0a0a16 0%, #060612 50%, #0a0a16 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 6px 12px rgba(0,0,0,.6),
    inset 0 -6px 12px rgba(0,0,0,.6);
}

/* Чистый «реелсный» стиль — без коробочных тайлов.
   Эмоджи свободно плывут в тёмной колонке, лёгкая drop-shadow добавляет глубину.
   Премиум-символы (gem/wild/scatter) выделяются собственным glow. */
.gift-panel .symbol {
  position: relative;
  height: 76px;
  font-size: 56px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
}

/* Премиум-символы: только filter-glow, без фоновых заливок */
.gift-panel .symbol.sym-gem {
  filter:
    drop-shadow(0 0 14px rgba(34,211,238,.7))
    drop-shadow(0 3px 6px rgba(0,0,0,.5));
  animation: gemSparkle 2.4s ease-in-out infinite;
}
@keyframes gemSparkle {
  0%, 100% {
    filter: drop-shadow(0 0 14px rgba(34,211,238,.7))
            drop-shadow(0 3px 6px rgba(0,0,0,.5));
  }
  50% {
    filter: drop-shadow(0 0 22px rgba(167,139,250,.9))
            drop-shadow(0 3px 6px rgba(0,0,0,.5));
  }
}

.gift-panel .symbol.sym-wild {
  filter:
    drop-shadow(0 0 16px rgba(167,139,250,.8))
    drop-shadow(0 3px 6px rgba(0,0,0,.5));
  animation: wildShimmer 2.5s ease-in-out infinite;
}
@keyframes wildShimmer {
  0%, 100% {
    filter: drop-shadow(0 0 16px rgba(167,139,250,.8))
            drop-shadow(0 3px 6px rgba(0,0,0,.5));
  }
  33% {
    filter: drop-shadow(0 0 18px rgba(255,77,109,.85))
            drop-shadow(0 3px 6px rgba(0,0,0,.5));
  }
  66% {
    filter: drop-shadow(0 0 18px rgba(34,211,238,.85))
            drop-shadow(0 3px 6px rgba(0,0,0,.5));
  }
}

.gift-panel .symbol.sym-scatter {
  filter:
    drop-shadow(0 0 18px rgba(255,213,74,.95))
    drop-shadow(0 3px 6px rgba(0,0,0,.5));
  animation: scatterTwinkle 1.6s ease-in-out infinite;
}
@keyframes scatterTwinkle {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
/* В матричном режиме отдельный оверлей с win-line не нужен — подсвечиваем сами ячейки */
.gift-panel .window-overlay {
  /* Тонкая горизонтальная подсветка центрального ряда (главная линия) */
  position: absolute;
  left: 8px; right: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: 76px;
  pointer-events: none;
  border-top: 1px solid rgba(255,213,74,.18);
  border-bottom: 1px solid rgba(255,213,74,.18);
  background: linear-gradient(180deg, rgba(255,213,74,.04), transparent, rgba(255,213,74,.04));
}

/* Floating "+N🎁" popup от выигрышной линии */
.win-popup {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #1a1410;
  font-weight: 900;
  font-size: 17px;
  border-radius: 999px;
  box-shadow: 0 8px 22px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.55);
  pointer-events: none;
  z-index: 10;
  animation: winPopupRise 3.4s cubic-bezier(.2,.7,.2,1) forwards;
  white-space: nowrap;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 4px;
}
.win-popup .m-coin { width: 1em; height: 1em; }
@keyframes winPopupRise {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
  18%  { transform: translate(-50%, -50%) scale(1); }
  /* Hold для прочтения */
  75%  { opacity: 1; transform: translate(-50%, -90%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -180%) scale(.95); }
}

/* Recent spins strip — последние 5 спинов в шапке панели */
.gp-recent {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
  align-items: center;
}
.gp-recent:empty::before {
  content: '🎰';
  font-size: 16px;
  opacity: .25;
}
.gp-recent-cell {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font-size: 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  animation: recentPop .35s ease-out;
}
.gp-recent-cell:first-child {
  animation: recentPopHi .5s ease-out;
}
@keyframes recentPop {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes recentPopHi {
  0%   { opacity: 0; transform: scale(.5); }
  60%  { opacity: 1; transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Выигрышная ячейка — золотое halo вокруг эмоджи (без коробочного фона) */
.gift-panel .symbol.win-cell {
  z-index: 2;
  animation: winCellPulse .8s ease-in-out infinite;
}
.gift-panel .symbol.win-cell::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,213,74,.55), rgba(255,170,0,.18) 55%, transparent 80%);
  z-index: -1;
  pointer-events: none;
}
@keyframes winCellPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 14px rgba(255,213,74,.8));
  }
  50% {
    transform: scale(1.15);
    filter: drop-shadow(0 0 26px rgba(255,213,74,1));
  }
}

.gift-panel .result {
  margin-top: 6px;
  min-height: 38px;
  text-align: center;
}
.gift-panel .r-title { font-size: 15px; font-weight: 800; }
.gift-panel .r-title.jackpot { font-size: 18px; }
.gift-panel .r-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }

.gp-actions {
  display: flex; gap: 8px;
  margin-top: 10px;
}
.gp-actions .spin-btn {
  flex: 1;
}
.gp-actions .buy-btn,
.gp-actions .auto-btn {
  flex: 0 0 auto;
  width: 64px;
  padding: 14px 0;
  font-size: 13px;
  font-weight: 700;
}
.gp-actions .auto-btn {
  background: linear-gradient(135deg, var(--purple), var(--purple-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px var(--purple-glow);
}

/* ── Channel card (Профиль) ────────────── */
.channel-card.subscribed {
  background: linear-gradient(90deg, var(--gold-soft), transparent);
  border-color: rgba(255,213,74,.35);
}
.channel-row {
  display: flex; align-items: center; gap: 12px;
}
.channel-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 22px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  flex-shrink: 0;
}
.channel-card.subscribed .channel-icon {
  background: var(--gold-soft);
  border-color: rgba(255,213,74,.35);
  box-shadow: 0 0 14px rgba(255,213,74,.25);
}
.channel-info { flex: 1; min-width: 0; }
.channel-status {
  font-size: 11.5px; font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.channel-card.subscribed .channel-status {
  color: var(--gold);
}
.channel-name {
  font-size: 14.5px; font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.channel-actions { flex-shrink: 0; }

/* ── Daily Quests ────────────────────────── */
.quests { display: flex; flex-direction: column; gap: 8px; }
.quest {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: background .2s, border-color .2s, transform .2s var(--easing);
}
.quest.done {
  background: linear-gradient(90deg, var(--gold-soft), transparent);
  border-color: rgba(255,213,74,.35);
}
.quest.claimed {
  opacity: .55;
  filter: grayscale(.4);
}
.quest-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  font-size: 22px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  flex-shrink: 0;
}
.quest.done .quest-icon {
  background: var(--gold-soft);
  box-shadow: 0 0 12px rgba(255,213,74,.25);
}
.quest-body { flex: 1; min-width: 0; }
.quest-title {
  font-size: 13.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.quest-progress-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px;
}
.quest-bar {
  flex: 1;
  height: 6px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.quest-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple), var(--purple-2));
  border-radius: 999px;
  transition: width .5s var(--easing);
}
.quest.done .quest-bar-fill {
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
}
.quest-progress-text {
  font-size: 11.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  font-weight: 600;
}
.quest-claim {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 12.5px; font-weight: 800;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #1a1410;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px var(--gold-glow);
  transition: transform .12s var(--easing);
}
.quest-claim:active { transform: scale(.95); }
.quest-claim {
  animation: claimPulse 1.6s ease-in-out infinite;
}
@keyframes claimPulse {
  0%, 100% { box-shadow: 0 4px 12px var(--gold-glow); }
  50%      { box-shadow: 0 6px 22px rgba(255,170,0,.65), 0 0 0 4px rgba(255,213,74,.18); }
}
.quest-reward-tag {
  flex-shrink: 0;
  font-size: 12px; font-weight: 700;
  color: var(--text-3);
  white-space: nowrap;
}
.quest.claimed .quest-reward-tag {
  color: var(--green);
}

/* ── Leaderboard ─────────────────────────── */
.top-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 14px;
}
.top-tab {
  background: transparent;
  border: none;
  padding: 9px 8px;
  border-radius: 9px;
  color: var(--text-3);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.top-tab.active {
  background: var(--gold-soft);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(255,213,74,.3);
}

.podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 6px;
  align-items: end;
  margin-bottom: 16px;
  height: 200px;
}
.podium-step {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 4px;
}
.podium-medal {
  font-size: 26px;
  margin-bottom: 4px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.4));
}
.podium-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--surface-3), var(--surface-2));
  display: grid; place-items: center;
  font-size: 18px; font-weight: 800;
  color: var(--text);
  border: 2px solid var(--border-2);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.podium-step.first .podium-avatar {
  border-color: var(--gold);
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #1a1410;
  box-shadow: 0 6px 18px var(--gold-glow);
}
.podium-step.second .podium-avatar { border-color: rgba(192,200,220,.6); }
.podium-step.third .podium-avatar  { border-color: rgba(205,127,50,.6); }
.podium-name {
  font-size: 12.5px; font-weight: 700;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.podium-stat {
  font-size: 12px; color: var(--gold);
  font-weight: 700; font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.podium-block {
  width: 100%;
  margin-top: 8px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-bottom: none;
}
.podium-step.first  .podium-block {
  height: 88px;
  background: linear-gradient(180deg, rgba(255,213,74,.18), rgba(255,170,0,.04));
  border-color: rgba(255,213,74,.3);
}
.podium-step.second .podium-block { height: 64px; }
.podium-step.third  .podium-block { height: 48px; }
.podium-step.empty .podium-avatar { opacity: .3; background: var(--surface); }
.podium-step.empty .podium-name,
.podium-step.empty .podium-stat,
.podium-step.empty .podium-medal { opacity: .3; }

.top-list {
  display: flex; flex-direction: column;
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
}
.top-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 11px;
  font-size: 13.5px;
}
.top-row.me {
  background: linear-gradient(90deg, var(--purple-soft), transparent);
  border-color: rgba(167,139,250,.4);
}
.top-row .rank {
  width: 24px;
  font-weight: 800;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.top-row .name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.top-row .v {
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.top-row .v small {
  color: var(--text-3);
  font-weight: 600;
  margin-left: 6px;
}

.my-rank {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--border);
  text-align: center;
  font-size: 13px;
  color: var(--text-2);
}
.my-rank .v {
  color: var(--purple);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ── Reduce motion ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Progressive Jackpot banner (header) ── */
.jackpot-banner {
  display: flex; align-items: center; gap: 6px;
  width: 100%; box-sizing: border-box;
  padding: 8px 14px; margin: 6px 0 0; border-radius: 14px;
  background: linear-gradient(110deg, rgba(255,215,106,0.18), rgba(255,140,200,0.18) 50%, rgba(120,180,255,0.18));
  border: 1px solid rgba(255,215,106,0.35);
  box-shadow: 0 0 16px rgba(255,215,106,0.18);
  font-size: 14px; font-weight: 600;
  animation: jbPulse 2.4s ease-in-out infinite;
}
.jb-icon { font-size: 18px; filter: drop-shadow(0 0 4px rgba(255,215,106,0.6)); }
.jb-label { color: #c9d4e8; font-weight: 500; }
.jb-pool {
  background: linear-gradient(180deg, #ffe8a0, #ffaa3a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800; font-variant-numeric: tabular-nums;
}
.jb-star { font-size: 14px; }
@keyframes jbPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(255,215,106,0.18); }
  50%      { box-shadow: 0 0 28px rgba(255,215,106,0.35); }
}

/* ── Lottery card ── */
.lottery-card {
  margin-top: 14px;
  background: linear-gradient(160deg, rgba(120,90,200,0.12), rgba(90,150,220,0.12));
  border: 1px solid rgba(160,120,255,0.3);
}
.lottery-pool {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 6px;
}
.lp-side {
  text-align: center; padding: 10px; border-radius: 12px;
  background: rgba(255,255,255,0.04);
}
.lp-label { font-size: 11px; color: #9ba6bf; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 4px; }
.lp-value {
  font-size: 26px; font-weight: 800;
  background: linear-gradient(180deg, #ffe8a0, #ffaa3a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.lp-unit { font-size: 16px; margin-left: 2px; }
.lottery-meta { padding: 6px 4px; }
.lm-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.lm-l { color: #9ba6bf; }
.lm-v { color: #e6ecf7; font-weight: 600; }
.lottery-howto {
  margin-top: 8px; padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,0.03); font-size: 12px; color: #a3aec5;
  line-height: 1.4;
}
.lottery-history { margin-top: 10px; }
.lh-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px; margin-top: 4px; border-radius: 8px;
  background: rgba(255,255,255,0.03); font-size: 12px;
}
.lh-id { color: #9ba6bf; }
.lh-winner { font-weight: 600; color: #e6ecf7; }
.lh-pool { color: #ffd76a; font-weight: 700; }

/* ── Jackpot banner: clickable ── */
.jackpot-banner {
  cursor: pointer; appearance: none; -webkit-appearance: none;
  font-family: inherit; color: inherit;
  transition: transform .12s ease, box-shadow .2s ease;
}
.jackpot-banner:active { transform: scale(0.98); }
.jb-info {
  margin-left: auto; padding-left: 8px;
  font-size: 13px; color: #c9d4e8; opacity: 0.7;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
}

/* ── Super Jackpot info sheet ── */
#jackpotInfoSheet .sheet-card { max-height: 88vh; overflow-y: auto; }

.jpi-pool {
  margin: 14px 0 18px; padding: 18px; border-radius: 18px;
  text-align: center;
  background: linear-gradient(135deg, rgba(255,215,106,0.18), rgba(255,140,200,0.14) 50%, rgba(120,180,255,0.18));
  border: 1px solid rgba(255,215,106,0.35);
  box-shadow: 0 0 24px rgba(255,215,106,0.18);
}
.jpi-pool-label {
  font-size: 12px; letter-spacing: 0.7px; text-transform: uppercase;
  color: #c9d4e8; margin-bottom: 6px;
}
.jpi-pool-value {
  font-size: 40px; font-weight: 800;
  background: linear-gradient(180deg, #ffe8a0, #ffaa3a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.jpi-pool-unit { font-size: 24px; margin-left: 4px; }

.jpi-block {
  margin-top: 14px; padding: 14px;
  background: rgba(255,255,255,0.04); border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
}
.jpi-block-title {
  font-size: 13px; font-weight: 700; color: #ffd76a;
  margin-bottom: 10px; letter-spacing: 0.4px;
}
.jpi-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 6px 0; font-size: 13px; color: #d6dcec; line-height: 1.45;
}
.jpi-row b { color: #ffe8a0; font-weight: 700; }
.jpi-step {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #ffd76a, #ff9b3a);
  color: #1a1a2e; font-weight: 800; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}

.jpi-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.jpi-stat {
  text-align: center; padding: 10px;
  background: rgba(255,255,255,0.03); border-radius: 10px;
}
.jpi-stat-v {
  font-size: 22px; font-weight: 800;
  background: linear-gradient(180deg, #ffe8a0, #ffaa3a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.jpi-stat-l { font-size: 11px; color: #9ba6bf; margin-top: 2px; }

.jpi-last {
  margin-top: 10px; padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,0.04);
  display: flex; justify-content: space-between; font-size: 13px;
}
.jpi-last-l { color: #9ba6bf; }
.jpi-last-v { color: #ffd76a; font-weight: 700; }

.jpi-tip {
  margin-top: 14px; padding: 10px 12px; border-radius: 10px;
  background: rgba(120,180,255,0.07);
  border-left: 3px solid rgba(120,180,255,0.5);
  font-size: 12px; color: #b8c2d9; line-height: 1.45;
}

.lot-progress-bar {
  height: 6px; border-radius: 4px; margin: 6px 4px 2px;
  background: rgba(255,255,255,0.06); overflow: hidden;
}
.lot-progress-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #ffd76a, #ff9b3a);
  transition: width .4s ease;
  box-shadow: 0 0 8px rgba(255,215,106,0.4);
}

/* ══════════════════════════════════════════════════════════
   THEME VARIABLES (B4)
   ══════════════════════════════════════════════════════════ */
:root, [data-theme="classic"] {
  --t-accent-1: #ffd76a;
  --t-accent-2: #ff9b3a;
  --t-accent-glow: rgba(255,215,106,0.45);
  --t-accent-text: #ffe8a0;
  --t-purple: #a070ff;
}
[data-theme="neon"] {
  --t-accent-1: #c77dff;
  --t-accent-2: #7b2cbf;
  --t-accent-glow: rgba(199,125,255,0.5);
  --t-accent-text: #e0aaff;
  --t-purple: #ff6ec7;
}
[data-theme="ice"] {
  --t-accent-1: #7dd3fc;
  --t-accent-2: #3b82f6;
  --t-accent-glow: rgba(125,211,252,0.5);
  --t-accent-text: #bae6fd;
  --t-purple: #818cf8;
}

/* ══════════════════════════════════════════════════════════
   BELL ICON + NOTIFICATION DRAWER (V4)
   ══════════════════════════════════════════════════════════ */
.bell-btn {
  position: relative; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 8px; transition: transform .15s, background .2s;
}
.bell-btn:active { transform: scale(0.92); }
.bell-icon { font-size: 17px; }
.bell-dot {
  position: absolute; top: 6px; right: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, #ff5670, #ff2d5b);
  box-shadow: 0 0 10px rgba(255,86,112,0.7);
  animation: bellPulse 1.6s infinite ease-in-out;
}
@keyframes bellPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}

.drawer {
  position: fixed; inset: 0; z-index: 200;
  pointer-events: none; opacity: 0; transition: opacity .25s;
}
.drawer.show { opacity: 1; pointer-events: auto; }
.drawer-bg {
  position: absolute; inset: 0; background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
}
.drawer-card {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(420px, 92vw);
  background: linear-gradient(180deg, #181830, #0f0f1d);
  border-left: 1px solid rgba(255,255,255,0.08);
  box-shadow: -8px 0 32px rgba(0,0,0,0.5);
  transform: translateX(100%); transition: transform .3s ease;
  display: flex; flex-direction: column;
}
.drawer.show .drawer-card { transform: translateX(0); }
.drawer-header {
  padding: 16px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.drawer-title { font-size: 16px; font-weight: 700; }
.drawer-action {
  background: none; border: 1px solid rgba(255,255,255,0.15);
  color: #c9d4e8; padding: 6px 10px; border-radius: 8px;
  font-size: 12px; cursor: pointer;
}
.drawer-body { flex: 1; overflow-y: auto; padding: 8px; }

.notif-item {
  display: flex; gap: 10px; padding: 10px;
  border-radius: 12px; margin-bottom: 6px;
  background: rgba(255,255,255,0.04);
  border-left: 3px solid transparent;
  transition: background .2s;
}
.notif-item.unread { border-left-color: var(--t-accent-1); background: rgba(255,215,106,0.06); }
.notif-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--t-accent-1), var(--t-accent-2));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.notif-content { flex: 1; min-width: 0; }
.notif-title { font-size: 13px; font-weight: 700; color: #e6ecf7; }
.notif-body { font-size: 12px; color: #a3aec5; margin-top: 2px; line-height: 1.4; }
.notif-time { font-size: 10px; color: #6b7591; margin-top: 4px; }

/* ══════════════════════════════════════════════════════════
   LOGIN CALENDAR (V4)
   ══════════════════════════════════════════════════════════ */
.lc-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin: 10px 0; font-size: 13px; color: #c9d4e8;
}
.btn.sm { padding: 6px 12px; font-size: 12px; }
.lc-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  margin: 8px 0;
}
.lc-day {
  aspect-ratio: 1;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 11px; color: #9ba6bf;
  position: relative; transition: all .2s;
}
.lc-day-num { font-size: 13px; font-weight: 700; color: #e6ecf7; }
.lc-day.unlocked { background: rgba(255,215,106,0.06); border-color: rgba(255,215,106,0.2); }
.lc-day.unlocked .lc-day-num { color: var(--t-accent-text); }
.lc-day.claimed {
  background: linear-gradient(135deg, rgba(60,200,140,0.18), rgba(40,160,110,0.1));
  border-color: rgba(60,200,140,0.35);
}
.lc-day.claimed::after {
  content: '✓';
  position: absolute; top: 2px; right: 4px;
  font-size: 10px; color: #6ee7b7; font-weight: 800;
}
.lc-day.today {
  background: linear-gradient(135deg, var(--t-accent-1), var(--t-accent-2));
  border-color: var(--t-accent-1);
  animation: lcTodayPulse 2s infinite ease-in-out;
}
.lc-day.today .lc-day-num { color: #1a1a2e; }
.lc-day.special { box-shadow: inset 0 0 0 1px rgba(255,215,106,0.3); }
.lc-day.special::before {
  content: '★'; position: absolute; top: 2px; left: 4px;
  font-size: 9px; color: var(--t-accent-1);
}
@keyframes lcTodayPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--t-accent-glow); }
  50%      { box-shadow: 0 0 14px 2px var(--t-accent-glow); }
}

/* ══════════════════════════════════════════════════════════
   ACHIEVEMENTS V2 (V4)
   ══════════════════════════════════════════════════════════ */
.achv-tabs {
  display: flex; gap: 6px; margin: 6px 0 10px; overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.achv-tabs::-webkit-scrollbar { display: none; }
.achv-tab {
  padding: 6px 12px; border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #c9d4e8; font-size: 12px; font-weight: 600;
  white-space: nowrap; cursor: pointer; transition: all .15s;
}
.achv-tab.active {
  background: linear-gradient(135deg, var(--t-accent-1), var(--t-accent-2));
  color: #1a1a2e; border-color: var(--t-accent-1);
}
.achv-tab .achv-tab-cnt {
  margin-left: 4px; opacity: 0.7; font-weight: 500;
}
.achv-item-v2 {
  display: flex; gap: 10px; align-items: center;
  padding: 10px; border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 6px;
  transition: all .2s;
}
.achv-item-v2.unlocked { border-color: rgba(255,215,106,0.25); background: rgba(255,215,106,0.04); }
.achv-item-v2.claimable { border-color: var(--t-accent-1); background: rgba(255,215,106,0.1); animation: achvClaimablePulse 1.8s infinite; }
.achv-item-v2.claimed { opacity: 0.7; }
@keyframes achvClaimablePulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--t-accent-glow); }
  50%      { box-shadow: 0 0 18px 2px var(--t-accent-glow); }
}
.achv-emoji { font-size: 22px; flex-shrink: 0; filter: grayscale(0.8); transition: filter .2s; }
.achv-item-v2.unlocked .achv-emoji { filter: none; }
.achv-info { flex: 1; min-width: 0; }
.achv-name { font-size: 13px; font-weight: 700; color: #e6ecf7; }
.achv-item-v2:not(.unlocked) .achv-name { color: #8a93ad; }
.achv-bar {
  height: 6px; border-radius: 4px; margin-top: 5px;
  background: rgba(255,255,255,0.07); overflow: hidden;
}
.achv-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--t-accent-1), var(--t-accent-2));
  transition: width .5s ease;
  box-shadow: 0 0 8px var(--t-accent-glow);
}
.achv-progress { font-size: 11px; color: #9ba6bf; margin-top: 2px; }
.achv-claim-btn {
  background: linear-gradient(135deg, var(--t-accent-1), var(--t-accent-2));
  color: #1a1a2e; border: none;
  padding: 6px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.achv-claim-btn[disabled] {
  opacity: 0.5; cursor: not-allowed;
  background: rgba(255,255,255,0.08); color: #6b7591;
}
.achv-reward {
  font-size: 10px; color: var(--t-accent-text);
  margin-top: 2px; opacity: 0.85;
}

/* ══════════════════════════════════════════════════════════
   NEWS FEED (B2)
   ══════════════════════════════════════════════════════════ */
.news-card { border: 1px solid rgba(160,120,255,0.25); }
.news-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #ff5670; margin-left: 6px; vertical-align: middle;
  animation: bellPulse 1.6s infinite;
}
.news-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.news-item {
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--t-purple);
}
.news-item.pinned { border-left-color: var(--t-accent-1); background: rgba(255,215,106,0.05); }
.news-item-title { font-size: 13px; font-weight: 700; color: #e6ecf7; }
.news-item-body { font-size: 12px; color: #a3aec5; margin-top: 4px; line-height: 1.4; white-space: pre-wrap; }
.news-item-meta { font-size: 10px; color: #6b7591; margin-top: 6px; display: flex; gap: 8px; }

/* ══════════════════════════════════════════════════════════
   SHARE SHEET (B1)
   ══════════════════════════════════════════════════════════ */
.share-preview-wrap {
  margin: 14px auto 0; max-width: 320px;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
#shareCanvas {
  width: 100%; height: auto; display: block;
  background: #0f0f1d;
}

/* ══════════════════════════════════════════════════════════
   SKELETON LOADERS (Polish)
   ══════════════════════════════════════════════════════════ */
.skel {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%; animation: skelShimmer 1.4s infinite;
  border-radius: 8px;
}
@keyframes skelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skel-row { height: 14px; margin: 6px 0; }
.skel-block { height: 60px; }

/* ══════════════════════════════════════════════════════════
   SCREEN TRANSITIONS (Polish)
   ══════════════════════════════════════════════════════════ */
.screen {
  animation: screenFadeIn .3s ease;
}
@keyframes screenFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════
   MS BALANCE + MARKETPLACE
   ══════════════════════════════════════════════════════════ */
.b-item.ms {
  font-size: 17px;
  padding: 10px 18px;
  gap: 9px;
  border-width: 1.5px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,215,106,0.20), transparent 60%),
    linear-gradient(135deg, rgba(160,120,255,0.34), rgba(220,30,30,0.20));
  border-color: rgba(220,30,30,0.55);
  box-shadow:
    0 0 18px rgba(220,30,30,0.35),
    0 0 8px rgba(255,215,106,0.22),
    inset 0 1px 0 rgba(255,255,255,0.10);
  position: relative;
  animation: msIdleGlow 2.8s ease-in-out infinite;
}
.b-item.ms .m-coin { width: 1.7em; height: 1.7em; vertical-align: -0.4em; }
.b-item.ms span:last-child {
  background: linear-gradient(180deg, #fff5cc, #ffd76a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
@keyframes msIdleGlow {
  0%, 100% { box-shadow: 0 0 18px rgba(220,30,30,0.32), 0 0 8px rgba(255,215,106,0.20), inset 0 1px 0 rgba(255,255,255,0.10); }
  50%      { box-shadow: 0 0 28px rgba(220,30,30,0.50), 0 0 14px rgba(255,215,106,0.35), inset 0 1px 0 rgba(255,255,255,0.14); }
}

/* Market header */
.market-header {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; margin-bottom: 14px;
}
.mh-balance {
  padding: 14px 16px; border-radius: 18px;
  background:
    radial-gradient(circle at 80% -20%, rgba(255,215,106,0.18), transparent 55%),
    linear-gradient(135deg, rgba(160,120,255,0.20), rgba(255,140,200,0.14));
  border: 1px solid rgba(160,120,255,0.32);
  display: flex; flex-direction: column; justify-content: center;
  min-height: 92px;
}
.mh-bal-label {
  font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase;
  color: rgba(201,212,232,0.75); font-weight: 600;
}
.mh-bal-value {
  font-size: 28px; font-weight: 800; margin-top: 4px;
  display: inline-flex; align-items: center; gap: 4px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.mh-bal-value > span:first-child {
  background: linear-gradient(180deg, #fff5cc 0%, #ffd76a 50%, #ffaa3a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mh-bal-unit {
  font-size: 14px; color: #c9d4e8; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
}
.mh-bal-unit .m-coin { width: 1.4em; height: 1.4em; vertical-align: -0.3em; }

.mh-tier {
  padding: 12px 10px; border-radius: 18px; text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,215,106,0.10), transparent 70%),
    rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  min-height: 92px;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
}
.mh-tier-label {
  font-size: 10px; color: rgba(201,212,232,0.65);
  letter-spacing: 0.6px; text-transform: uppercase; font-weight: 600;
}
.mh-tier-value { font-size: 15px; font-weight: 800; color: #ffd76a; letter-spacing: 0.3px; }
.mh-tier-discount { font-size: 11px; color: #6ee7b7; font-weight: 700; }

.market-info {
  display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: rgba(120,180,255,0.08); border-left: 3px solid rgba(120,180,255,0.5);
  font-size: 12px; color: #b8c2d9; line-height: 1.4; margin-bottom: 14px;
}
.mi-icon { font-size: 18px; }

/* Market grid */
.market-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.market-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; overflow: hidden;
  transition: transform .15s, border-color .2s;
  cursor: pointer;
}
.market-card:active { transform: scale(0.97); }
.market-card.kind-nft { border-color: rgba(255,215,106,0.25); }
.market-card.limited { border-color: rgba(255,86,112,0.4); }
.mc-image {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, rgba(255,215,106,0.15), transparent 60%);
  font-size: 56px; position: relative;
}
.mc-image img { width: 100%; height: 100%; object-fit: cover; }
.mc-badge {
  position: absolute; top: 6px; left: 6px;
  background: linear-gradient(135deg, #ff5670, #ff2d5b);
  color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 8px;
}
.mc-stock {
  position: absolute; top: 6px; right: 6px;
  background: rgba(0,0,0,0.6); color: #fff;
  font-size: 10px; padding: 2px 8px; border-radius: 8px;
}
.mc-body { padding: 10px 12px 12px; }
.mc-title { font-size: 13px; font-weight: 700; color: #e6ecf7; line-height: 1.2; }
.mc-collection { font-size: 11px; color: #9ba6bf; margin-top: 2px; }
.mc-price-row {
  display: flex; align-items: baseline; gap: 6px; margin-top: 8px;
  justify-content: space-between;
}
.mc-price {
  font-size: 16px; font-weight: 800; color: #ffd76a;
  font-variant-numeric: tabular-nums;
}
.mc-price-old {
  font-size: 11px; color: #6b7591; text-decoration: line-through;
}
.mc-discount { font-size: 10px; color: #6ee7b7; font-weight: 700; }

/* Buy sheet */
.market-buy-content { padding: 4px 0 8px; }
.mbc-image { font-size: 80px; text-align: center; margin: 14px 0; }
.mbc-title { text-align: center; font-size: 18px; font-weight: 800; }
.mbc-desc { text-align: center; font-size: 13px; color: #9ba6bf; margin-top: 4px; padding: 0 12px; line-height: 1.5; }
.mbc-price-block {
  margin: 18px auto; padding: 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,215,106,0.12), rgba(255,140,200,0.08));
  border: 1px solid rgba(255,215,106,0.25);
  text-align: center; max-width: 280px;
}
.mbc-price-l { font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: #a3aec5; }
.mbc-price-v {
  font-size: 32px; font-weight: 800;
  background: linear-gradient(180deg, #ffe8a0, #ffaa3a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-top: 4px;
}
.mbc-price-discount { font-size: 12px; color: #6ee7b7; margin-top: 4px; }

/* Voucher success */
.voucher-success { padding: 8px 0; text-align: center; }
.vs-icon { font-size: 56px; margin: 14px 0 8px; animation: bump .8s ease-out; }
.vs-title { font-size: 22px; font-weight: 800; color: #6ee7b7; }
.vs-subtitle { font-size: 14px; color: #c9d4e8; margin-top: 6px; padding: 0 16px; }
.vs-code-wrap {
  margin: 18px auto; padding: 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,215,106,0.18), rgba(255,140,200,0.12));
  border: 2px dashed rgba(255,215,106,0.5);
  max-width: 320px;
}
.vs-code-label { font-size: 10px; letter-spacing: 1.2px; color: #a3aec5; text-transform: uppercase; }
.vs-code {
  font-family: ui-monospace, SF Mono, Monaco, Consolas, monospace;
  font-size: 22px; font-weight: 800; color: #ffd76a;
  margin: 8px 0;
  letter-spacing: 1px;
}
.vs-instructions {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 16px; text-align: left;
}
.vs-step {
  display: flex; gap: 10px; align-items: center; font-size: 13px; color: #d6dcec;
}
.vs-step-num {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #a070ff, #7b2cbf);
  color: #fff; font-weight: 800; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.vs-warn {
  margin: 14px 16px 0; padding: 10px; border-radius: 10px;
  background: rgba(255,170,50,0.08); border-left: 3px solid rgba(255,170,50,0.5);
  font-size: 11px; color: #ffe8a0; line-height: 1.4;
}

/* Wallet card */
.wallet-card { border: 1px solid rgba(160,120,255,0.25); }
.wallet-balance {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0;
}
.wb-side { padding: 10px; border-radius: 12px; background: rgba(255,255,255,0.04); text-align: center; }
.wb-label { font-size: 10px; letter-spacing: 0.5px; color: #9ba6bf; text-transform: uppercase; }
.wb-value {
  font-size: 20px; font-weight: 800; margin-top: 4px;
  background: linear-gradient(180deg, #ffe8a0, #ffaa3a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.wb-tier-progress { padding: 8px 0; }
.wbtp-text { font-size: 12px; color: #9ba6bf; margin-bottom: 4px; }
.wbtp-bar {
  height: 6px; background: rgba(255,255,255,0.07); border-radius: 4px; overflow: hidden;
}
.wbtp-fill {
  height: 100%; background: linear-gradient(90deg, #a070ff, #ffd76a);
  transition: width .5s ease; box-shadow: 0 0 8px rgba(255,215,106,0.4);
}
.wallet-history { margin-top: 10px; max-height: 240px; overflow-y: auto; }
.wh-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px; margin-top: 4px; border-radius: 8px;
  background: rgba(255,255,255,0.03); font-size: 12px;
}
.wh-reason { color: #c9d4e8; }
.wh-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.wh-delta.plus  { color: #6ee7b7; }
.wh-delta.minus { color: #ff8a9b; }
.wh-time { font-size: 10px; color: #6b7591; }

/* Purchases */
.purchase-item {
  padding: 10px 12px; border-radius: 12px; margin-bottom: 6px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid #6b7591;
}
.purchase-item.pending { border-left-color: #ffd76a; }
.purchase-item.delivered { border-left-color: #6ee7b7; }
.purchase-item.cancelled, .purchase-item.expired { border-left-color: #ff8a9b; opacity: 0.7; }
.pi-row { display: flex; justify-content: space-between; align-items: center; }
.pi-title { font-size: 13px; font-weight: 700; color: #e6ecf7; }
.pi-status { font-size: 10px; padding: 2px 8px; border-radius: 8px; font-weight: 700; }
.pi-status.pending { background: rgba(255,215,106,0.15); color: #ffd76a; }
.pi-status.delivered { background: rgba(110,231,183,0.15); color: #6ee7b7; }
.pi-status.cancelled, .pi-status.expired { background: rgba(255,138,155,0.15); color: #ff8a9b; }
.pi-voucher {
  font-family: ui-monospace, monospace; font-size: 12px; color: #ffd76a;
  margin-top: 4px; letter-spacing: 0.5px;
}
.pi-time { font-size: 10px; color: #6b7591; margin-top: 2px; }

/* ── M-coin icon (pentagram + M) ── */
.m-coin {
  width: 1.1em; height: 1.1em;
  vertical-align: -0.22em;
  display: inline-block;
  flex-shrink: 0;
  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,0.5))
    drop-shadow(0 0 5px rgba(220,30,30,0.35));
}
.m-coin.lg { width: 1.6em; height: 1.6em; vertical-align: -0.35em; }
.m-coin.xl { width: 2.4em; height: 2.4em; vertical-align: -0.5em; }
/* Лёгкий hover-анимация на наведение (на мобиле — на active) */
.m-coin {
  transition: filter .25s ease, transform .25s ease;
}
.b-item:active .m-coin,
.market-card:active .m-coin {
  transform: rotate(15deg) scale(1.08);
}

/* ══════════════════════════════════════════════════════════
   PREMIUM TIER BADGES
   ══════════════════════════════════════════════════════════ */
.tier-badge {
  width: 1.4em; height: 1.4em;
  vertical-align: -0.3em; flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  animation: tierFloat 3s ease-in-out infinite;
}
.tier-badge.lg { width: 2.4em; height: 2.4em; vertical-align: -0.5em; }
.tier-badge.xl { width: 3.4em; height: 3.4em; vertical-align: -0.6em; }

.tier-badge.bronze   { color: #cd7f32; }
.tier-badge.silver   { color: #c0c0c0; }
.tier-badge.gold     { color: #ffd76a; }
.tier-badge.platinum { color: #c77dff; }

.tier-badge.bronze   path:first-of-type { fill: url(#tierBronze) !important; }
.tier-badge.silver   path:first-of-type { fill: url(#tierSilver) !important; }
.tier-badge.gold     path:first-of-type { fill: url(#tierGold) !important; }
.tier-badge.platinum path:first-of-type { fill: url(#tierPlatinum) !important; }

@keyframes tierFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-2px) rotate(1deg); }
}

/* ══════════════════════════════════════════════════════════
   PREMIUM EMPTY STATES
   ══════════════════════════════════════════════════════════ */
.empty-rich.market-empty {
  padding: 40px 20px; text-align: center;
}
.empty-rich.market-empty .empty-icon {
  font-size: 60px;
  filter: drop-shadow(0 4px 12px rgba(255,215,106,0.3));
  animation: emptyFloat 4s ease-in-out infinite;
}
@keyframes emptyFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-6px) rotate(3deg); }
}

/* ══════════════════════════════════════════════════════════
   MARKET HERO BANNER (ABOVE GRID WHEN CATALOG EMPTY OR FEATURED)
   ══════════════════════════════════════════════════════════ */
.market-hero {
  margin-bottom: 14px; padding: 18px 16px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,140,200,0.15), transparent 60%),
    radial-gradient(circle at 0% 100%, rgba(120,180,255,0.12), transparent 60%),
    linear-gradient(135deg, rgba(160,120,255,0.20), rgba(255,215,106,0.10));
  border: 1px solid rgba(160,120,255,0.35);
  display: flex; gap: 14px; align-items: center;
  position: relative; overflow: hidden;
}
.market-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
  transform: translateX(-100%); animation: shine 5s ease-in-out infinite;
  pointer-events: none;
}
.mh-emoji {
  font-size: 44px; flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(255,215,106,0.4));
  animation: float 4s ease-in-out infinite;
}
.mh-text { flex: 1; min-width: 0; }
.mh-title-line {
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(201,212,232,0.7); font-weight: 700;
}
.mh-headline {
  font-size: 17px; font-weight: 800; margin-top: 4px;
  background: linear-gradient(135deg, #fff5cc 0%, #ffd76a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1.25;
}
.mh-tagline {
  font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 4px; line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════
   PREMIUM VOUCHER (БИЛЕТНЫЙ ВИД)
   ══════════════════════════════════════════════════════════ */
.vs-code-wrap {
  position: relative;
  margin: 18px auto;
  padding: 16px 14px 14px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,215,106,0.25), transparent 60%),
    linear-gradient(135deg, rgba(255,215,106,0.18), rgba(255,140,200,0.10));
  border: 2px dashed rgba(255,215,106,0.55);
  max-width: 320px;
  box-shadow:
    0 0 24px rgba(255,215,106,0.15),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
/* «Перфорация» с боков (как у настоящего билета) */
.vs-code-wrap::before, .vs-code-wrap::after {
  content: ''; position: absolute; top: 50%;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg-2, #0d0d1a);
  border: 1px dashed rgba(255,215,106,0.5);
  transform: translateY(-50%);
}
.vs-code-wrap::before { left: -7px; }
.vs-code-wrap::after  { right: -7px; }

.vs-code-label {
  font-size: 10px; letter-spacing: 1.5px; color: rgba(255,232,160,0.7);
  text-transform: uppercase; font-weight: 700;
}
.vs-code {
  font-family: ui-monospace, SF Mono, Monaco, Consolas, monospace;
  font-size: 22px; font-weight: 800;
  background: linear-gradient(180deg, #fff5cc, #ffaa3a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 8px 0; letter-spacing: 1.5px;
  text-shadow: 0 0 18px rgba(255,215,106,0.4);
}

/* ══════════════════════════════════════════════════════════
   BALANCE PULSE (когда меняется)
   ══════════════════════════════════════════════════════════ */
.b-item.ms.changed {
  /* Кратковременная вспышка glow без transform — чтобы не конфликтовало с msIdleGlow */
  animation: msPulseFlash .55s ease-out;
}
@keyframes msPulseFlash {
  0%   { box-shadow: 0 0 18px rgba(220,30,30,0.32), 0 0 8px rgba(255,215,106,0.20); }
  35%  { box-shadow: 0 0 32px rgba(255,215,106,0.75), 0 0 16px rgba(255,215,106,0.55); }
  100% { box-shadow: 0 0 18px rgba(220,30,30,0.32), 0 0 8px rgba(255,215,106,0.20); }
}

/* Tier-up ceremony */
.tier-up-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
  pointer-events: none; opacity: 0;
  transition: opacity .3s ease;
}
.tier-up-overlay.show {
  opacity: 1; pointer-events: auto;
}
.tier-up-card {
  text-align: center; padding: 30px 24px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,215,106,0.25), transparent 60%),
    linear-gradient(180deg, #1a1a30, #0f0f1d);
  border-radius: 24px;
  border: 2px solid rgba(255,215,106,0.4);
  box-shadow:
    0 0 60px rgba(255,215,106,0.4),
    0 24px 64px rgba(0,0,0,0.7);
  max-width: 340px;
  transform: scale(0.5); opacity: 0;
  transition: all .5s cubic-bezier(.16, 1, .3, 1);
}
.tier-up-overlay.show .tier-up-card {
  transform: scale(1); opacity: 1;
}
.tu-icon {
  font-size: 30px; margin-bottom: 6px;
  letter-spacing: 6px;
  animation: tuShake 0.8s ease-in-out;
}
@keyframes tuShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px) rotate(-3deg); }
  75% { transform: translateX(6px) rotate(3deg); }
}
.tu-title {
  font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,232,160,0.7); font-weight: 700;
}
.tu-medal {
  margin: 16px 0;
  filter: drop-shadow(0 0 24px rgba(255,215,106,0.6));
  animation: tuMedalSpin .8s cubic-bezier(.16, 1, .3, 1);
}
@keyframes tuMedalSpin {
  from { transform: rotate(-180deg) scale(0); }
  to   { transform: rotate(0) scale(1); }
}
.tu-tier-name {
  font-size: 32px; font-weight: 900;
  background: linear-gradient(135deg, #fff5cc 0%, #ffd76a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 1px;
}
.tu-perks {
  margin: 14px 0; padding: 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  font-size: 13px; color: #c9d4e8; line-height: 1.5;
}
.tu-perk-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.tu-perk-item::before { content: '✓'; color: #6ee7b7; font-weight: 800; }

/* ══════════════════════════════════════════════════════════
   TIER PROGRESS WITH MILESTONES
   ══════════════════════════════════════════════════════════ */
.wbtp-bar { position: relative; }
.wbtp-milestone {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: rgba(255,255,255,0.3);
  pointer-events: none;
}
.wbtp-milestone.passed { background: rgba(255,215,106,0.7); box-shadow: 0 0 6px rgba(255,215,106,0.5); }

/* ══════════════════════════════════════════════════════════
   MARKET CARD PREMIUM HOVER + LIMITED COUNTDOWN
   ══════════════════════════════════════════════════════════ */
.market-card {
  transform: translateZ(0);  /* GPU */
  transition: transform .2s var(--easing, ease), border-color .2s, box-shadow .2s;
}
.market-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.5);
  border-color: rgba(255,215,106,0.4);
}
.market-card.kind-nft .mc-image {
  background:
    radial-gradient(circle at 50% 30%, rgba(255,215,106,0.25), transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(255,140,200,0.15), transparent 60%);
}
.market-card.kind-card .mc-image {
  background: radial-gradient(circle at 50% 30%, rgba(160,120,255,0.18), transparent 60%);
}
.market-card.kind-tickets .mc-image {
  background: radial-gradient(circle at 50% 30%, rgba(110,231,183,0.18), transparent 60%);
}
.market-card.kind-skin .mc-image {
  background: radial-gradient(circle at 50% 30%, rgba(120,180,255,0.18), transparent 60%);
}

/* Skeleton card while loading */
.market-skel {
  aspect-ratio: 0.85;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  animation: skelShimmer 1.4s infinite;
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 100%);
  background-size: 200% 100%;
}

/* ══════════════════════════════════════════════════════════
   WALLET HISTORY EMPTY STATE
   ══════════════════════════════════════════════════════════ */
.wallet-empty {
  text-align: center; padding: 16px;
  font-size: 12px; color: rgba(201,212,232,0.6);
  font-style: italic;
}

/* Coin spending animation */
@keyframes coinSpend {
  0%   { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
  100% { transform: translateY(-30px) scale(0.4) rotate(180deg); opacity: 0; }
}
.coin-spend-fly {
  position: absolute; pointer-events: none;
  animation: coinSpend .8s ease-out forwards;
}

/* Lottie animation mount */
.lottie-mount {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.lottie-mount svg { width: 100% !important; height: 100% !important; }

/* ══════════════════════════════════════════════════════════
   TWO-SLOT MODE SELECTOR (Farm vs NFT)
   ══════════════════════════════════════════════════════════ */
.slot-modes {
  display: grid;
  /* Авто-fit: если БОНУСКА скрыта (display:none), Ферма занимает всю ширину.
     Когда есть оба режима — две колонки по 1fr. */
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 10px;
  margin-bottom: 14px;
}
.slot-mode-card {
  appearance: none; -webkit-appearance: none;
  font-family: inherit; cursor: pointer;
  padding: 16px 12px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.04), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 2px solid var(--border);
  color: var(--text);
  text-align: center;
  transition: transform .15s, border-color .25s, box-shadow .25s;
  position: relative;
  overflow: hidden;
}
.slot-mode-card:active { transform: scale(0.97); }
.slot-mode-card.active {
  border-color: var(--gold);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,215,106,0.18), transparent 60%),
    linear-gradient(180deg, rgba(255,215,106,0.08), rgba(255,140,200,0.04));
  box-shadow: 0 0 18px rgba(255,215,106,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
}
.slot-mode-card[data-mode="nft"].active {
  border-color: rgba(199,125,255,0.7);
  background:
    radial-gradient(circle at 50% 0%, rgba(199,125,255,0.20), transparent 60%),
    linear-gradient(180deg, rgba(160,120,255,0.10), rgba(220,30,30,0.04));
  box-shadow: 0 0 18px rgba(199,125,255,0.30), inset 0 1px 0 rgba(255,255,255,0.08);
}
.smc-icon {
  font-size: 38px; margin-bottom: 4px;
  filter: drop-shadow(0 4px 10px rgba(255,215,106,0.3));
}
.slot-mode-card[data-mode="nft"] .smc-icon {
  filter: drop-shadow(0 4px 10px rgba(199,125,255,0.4));
}
.smc-title {
  font-size: 15px; font-weight: 800; letter-spacing: 0.3px;
}
.smc-sub {
  font-size: 11px; color: rgba(255,255,255,0.6);
  margin: 3px 0 8px;
}
.smc-cost {
  font-size: 12px; font-weight: 700; color: var(--gold);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,215,106,0.10);
  display: inline-block;
}
.slot-mode-card[data-mode="nft"] .smc-cost {
  color: #c77dff;
  background: rgba(199,125,255,0.10);
}
.smc-pool-badge {
  position: absolute; top: 6px; right: 6px;
  font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 8px;
  background: rgba(220,30,30,0.4);
  color: #fff;
}

/* ── NFT pool preview ── */
.nft-pool-preview {
  margin-bottom: 14px; padding: 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(199,125,255,0.10), rgba(220,30,30,0.05));
  border: 1px solid rgba(199,125,255,0.25);
}
.npp-title {
  font-size: 12px; font-weight: 700; color: #c77dff;
  letter-spacing: 0.3px; text-transform: uppercase;
  margin-bottom: 8px;
}
.npp-list {
  display: flex; gap: 8px; overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.npp-list::-webkit-scrollbar { display: none; }
.npp-item {
  flex-shrink: 0;
  width: 90px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
}
.npp-item-media {
  width: 90px; height: 90px;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
}
.npp-item-media img, .npp-item-media video, .npp-item-media .lottie-mount {
  width: 100%; height: 100%; object-fit: cover;
}
.npp-item-meta {
  padding: 4px 6px;
  font-size: 9.5px; font-weight: 600;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #fff;
}
.npp-item-price {
  font-size: 10px; color: var(--gold);
  text-align: center;
  padding: 0 6px 6px;
}

/* ══════════════════════════════════════════════════════════
   M-PACKS LIST (Buy M Sheet)
   ══════════════════════════════════════════════════════════ */
.m-packs-list {
  display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
}
.m-pack {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  transition: all .15s;
  position: relative;
}
.m-pack:active { transform: scale(0.98); }
.m-pack.best {
  border-color: var(--gold);
  background:
    radial-gradient(circle at 100% 0%, rgba(255,215,106,0.14), transparent 60%),
    rgba(255,215,106,0.06);
  box-shadow: 0 0 14px rgba(255,215,106,0.20);
}
/* (legacy ::before badge удалён — теперь ::after «⭐ ВЫГОДНЕЕ» в одном месте, ниже) */
.mp-left { display: flex; flex-direction: column; gap: 2px; }
.mp-stars {
  font-size: 16px; font-weight: 800;
  display: flex; align-items: center; gap: 4px;
}
.mp-label { font-size: 11px; color: rgba(255,255,255,0.55); }
.mp-bonus {
  font-size: 10px; color: #6ee7b7; font-weight: 700;
  margin-top: 2px;
}
.mp-right { text-align: right; }
.mp-m-amount {
  font-size: 18px; font-weight: 800;
  background: linear-gradient(180deg, #fff5cc, #ffaa3a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mp-rate { font-size: 10px; color: rgba(255,255,255,0.5); }

/* ══════════════════════════════════════════════════════════
   SLOT PANEL — упрощённая версия для нового флоу
   ══════════════════════════════════════════════════════════ */
.slot-panel {
  margin-bottom: 12px;
}
.sp-machine {
  padding: 18px 14px 16px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,213,74,.12), transparent 60%),
    linear-gradient(180deg, #1a1a30 0%, #0a0a14 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 24px 64px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,.08);
  position: relative; overflow: hidden;
}
.sp-result {
  text-align: center; padding: 8px 0 14px;
  min-height: 50px;
}
.sp-result-title {
  font-size: 16px; font-weight: 800; line-height: 1.2;
}
.sp-result-title.win {
  background: linear-gradient(180deg, #fff5cc, #ffaa3a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sp-result-title.jackpot { color: #ffd76a; animation: tuShake 0.6s ease-in-out; }
.sp-result-sub {
  font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 4px;
}
.sp-actions {
  display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
}
.spin-btn-big {
  width: 100%; padding: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #1a1410;
  font-size: 17px; font-weight: 800; letter-spacing: 0.5px;
  border: none; cursor: pointer;
  box-shadow: 0 6px 18px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform .12s;
}
.spin-btn-big:active:not(:disabled) { transform: scale(0.97); }
.spin-btn-big:disabled { opacity: 0.55; cursor: not-allowed; }
.slot-mode-card[data-mode="nft"] ~ #slotPanel .spin-btn-big,
.slot-panel.nft-mode .spin-btn-big {
  background: linear-gradient(135deg, #c77dff, #7b2cbf);
  color: #fff;
  box-shadow: 0 6px 18px rgba(199,125,255,0.45), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* ══════════════════════════════════════════════════════════
   SLOT STATUS BAR (Hot Streak / Diamond Collector)
   ══════════════════════════════════════════════════════════ */
.slot-status {
  margin-bottom: 12px;
}
.ss-farm, .ss-nft {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,165,0,0.10), transparent 60%),
    rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}
.ss-nft {
  background:
    radial-gradient(circle at 100% 0%, rgba(199,125,255,0.12), transparent 60%),
    rgba(160,120,255,0.06);
  border-color: rgba(199,125,255,0.25);
}
.ss-icon {
  font-size: 24px;
  filter: drop-shadow(0 2px 6px rgba(255,165,0,0.4));
}
.ss-nft .ss-icon { filter: drop-shadow(0 2px 6px rgba(199,125,255,0.5)); }
.ss-text { flex: 1; min-width: 0; }
.ss-label {
  font-size: 12px; color: #c9d4e8;
  margin-bottom: 6px;
  line-height: 1.3;
}
.ss-label b { color: #ffe8a0; }
.ss-bar {
  height: 6px; border-radius: 4px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.ss-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #ff9b3a, #ffd76a);
  box-shadow: 0 0 8px rgba(255,170,50,0.4);
  transition: width .5s ease;
}
.ss-fill.active {
  animation: hotPulse 1.4s ease-in-out infinite;
  background: linear-gradient(90deg, #ff5670, #ff9b3a, #ffd76a);
}
.ss-fill.nft {
  background: linear-gradient(90deg, #c77dff, #7b2cbf);
  box-shadow: 0 0 8px rgba(199,125,255,0.5);
}
@keyframes hotPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,170,50,0.4); }
  50%      { box-shadow: 0 0 18px rgba(255,170,50,0.7); }
}

/* ══════════════════════════════════════════════════════════
   CASCADE MULTIPLIER BADGE (Farm)
   ══════════════════════════════════════════════════════════ */
.cascade-mult-badge {
  position: absolute; top: 12px; right: 12px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #ff9b3a, #ffd76a);
  color: #1a1410;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.8px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(255,170,50,0.5);
  z-index: 10;
}
.cascade-mult-badge.animate {
  animation: cascadeBadge .8s cubic-bezier(.16,1,.3,1);
}
@keyframes cascadeBadge {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
   5×3 SLOT MATRIX (10 paylines)
   ══════════════════════════════════════════════════════════ */
.reels-5x3 {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 4px !important;
  height: 192px !important;          /* 60×3 + 12px padding */
  aspect-ratio: unset !important;
  padding: 6px !important;
  border-radius: 14px;
  background: #02020a;
  box-shadow:
    inset 0 4px 18px rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(255,213,74,.15);
  position: relative;
}
.reels-5x3 .reel {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #0c0c1a 0%, #050508 100%);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.04);
  box-shadow: inset 0 0 18px rgba(0,0,0,.65);
}
.reels-5x3 .strip {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; flex-direction: column;
  will-change: transform;
}
.reels-5x3 .symbol {
  height: 60px !important;
  font-size: 34px !important;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
  flex-shrink: 0 !important;
}
.reels-5x3 .window-overlay {
  position: absolute; left: 6px; right: 6px;
  top: 50%; transform: translateY(-50%);
  height: 60px !important;
  pointer-events: none;
  border-top: 1px solid rgba(255,213,74,.18);
  border-bottom: 1px solid rgba(255,213,74,.18);
  background: linear-gradient(180deg, transparent, rgba(255,213,74,.03), transparent);
  border-radius: 4px;
}
@media (min-width: 420px) {
  .reels-5x3 { height: 228px !important; }
  .reels-5x3 .symbol { height: 72px !important; font-size: 42px !important; }
  .reels-5x3 .window-overlay { height: 72px !important; }
}

/* NFT-mode tints */
.slot-panel.nft-mode .reels-5x3 {
  box-shadow:
    inset 0 4px 18px rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(199,125,255,.25);
}
.slot-panel.nft-mode .reels-5x3 .window-overlay {
  border-color: rgba(199,125,255,.3);
  background: linear-gradient(180deg, transparent, rgba(199,125,255,.05), transparent);
}

/* Win-cell glow */
.reels-5x3 .symbol.win-cell {
  background: radial-gradient(circle, rgba(255,213,74,.32), transparent 70%);
  animation: winCellPulse 1.2s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes winCellPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(255,213,74,.4)); }
  50%      { transform: scale(1.14); filter: drop-shadow(0 0 18px rgba(255,213,74,.9)); }
}

/* Payline draw overlay */
.payline-draw {
  position: absolute; pointer-events: none;
  inset: 6px;
  z-index: 5;
}
.payline-draw svg { width: 100%; height: 100%; overflow: visible; }
.payline-stroke {
  stroke: #ffd76a;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(255,215,106,.7));
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: drawLine 700ms ease-out forwards, paylineGlow 1.8s ease-in-out 700ms infinite;
}
.payline-stroke.gem  { stroke: #6ee7b7; filter: drop-shadow(0 0 10px rgba(110,231,183,.85)); }
.payline-stroke.wild { stroke: #c77dff; filter: drop-shadow(0 0 10px rgba(199,125,255,.85)); }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes paylineGlow {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 0.45; }
}

/* PANEL_SYMBOL_HEIGHT для JS — нужно чтобы совпадало */
.slot-5x3 { --reel-symbol-h: 60px; }
@media (min-width: 420px) { .slot-5x3 { --reel-symbol-h: 72px; } }

/* ══════════════════════════════════════════════════════════
   BIG WIN COUNTER (animated number)
   ══════════════════════════════════════════════════════════ */
.big-win-counter {
  /* Сдвинут НИЖЕ центра чтобы не перекрывать popups и mult-badge */
  position: absolute;
  top: 78%; left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  font-size: 38px; font-weight: 900;
  display: flex; align-items: center; gap: 8px;
  z-index: 8;
  pointer-events: none;
  animation: bwcEnter .55s cubic-bezier(.16,1,.3,1) forwards;
  filter: drop-shadow(0 4px 18px rgba(255,213,74,.7));
  white-space: nowrap;
}
.big-win-counter .bwc-num,
.big-win-counter .bwc-prefix {
  background: linear-gradient(180deg, #fff5cc 0%, #ffd76a 50%, #ff9b3a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px rgba(255,213,74,.9);
}
.big-win-counter .m-coin { width: 36px !important; height: 36px !important; }
@keyframes bwcEnter {
  from { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.10); opacity: 1; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.big-win-counter.fade-out {
  animation: bwcFade .6s ease-out forwards;
}
@keyframes bwcFade {
  to { transform: translate(-50%, -130%) scale(0.85); opacity: 0; }
}

/* Spin button — больше M-иконка, лучше ощущение */
.spin-btn-big {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  position: relative;
  overflow: hidden;
}
.spin-btn-big::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shineBtn 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shineBtn {
  0%, 80% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}
.spin-btn-big .m-coin { width: 1.4em !important; height: 1.4em !important; }
.spin-btn-big:disabled::after { display: none; }

/* Quick-spin toggle */
.quick-spin-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  font-size: 11px; color: #9ba6bf;
  cursor: pointer;
  transition: background .15s;
}
.quick-spin-toggle.on {
  background: rgba(255,215,106,.12);
  border-color: rgba(255,215,106,.35);
  color: #ffd76a;
}

/* Last win indicator */
.last-win-info {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding: 6px 12px;
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  font-size: 11px; color: #9ba6bf;
}
.last-win-info b {
  color: #ffd76a;
  display: inline-flex; align-items: center; gap: 3px;
}

/* ══════════════════════════════════════════════════════════
   PREMIUM SLOT SYMBOL SVG ICONS
   ══════════════════════════════════════════════════════════ */
.symbol .sym-svg {
  width: 88%; height: 88%;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
  transition: transform .2s ease;
}
.symbol.win-cell .sym-svg {
  filter: drop-shadow(0 0 14px rgba(255,213,74,0.85));
}
.reels-5x3 .symbol .sym-svg {
  width: 86%; height: 86%;
}
/* Per-symbol mini-effects */
.sym-gem .sym-svg     { filter: drop-shadow(0 2px 8px rgba(58,207,255,.6)); }
.sym-wild .sym-svg    { filter: drop-shadow(0 2px 8px rgba(199,125,255,.55)); }
.sym-scatter .sym-svg { filter: drop-shadow(0 0 12px rgba(255,224,106,.7)); }
.sym-cherry .sym-svg  { filter: drop-shadow(0 2px 6px rgba(220,30,60,.45)); }
.sym-grape .sym-svg   { filter: drop-shadow(0 2px 6px rgba(150,80,180,.45)); }
.sym-lemon .sym-svg   { filter: drop-shadow(0 2px 6px rgba(220,180,30,.45)); }
.sym-bell .sym-svg    { filter: drop-shadow(0 2px 6px rgba(255,195,60,.45)); }

/* Idle — лёгкая «дышащая» анимация для топовых символов */
.sym-gem .sym-svg, .sym-wild .sym-svg, .sym-scatter .sym-svg {
  animation: symBreathe 2.6s ease-in-out infinite;
}
@keyframes symBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* Wild rotation flair */
.sym-wild .sym-svg {
  animation: symBreathe 2.6s ease-in-out infinite, wildShine 4s ease-in-out infinite;
}
@keyframes wildShine {
  0%, 100% { filter: drop-shadow(0 2px 8px rgba(199,125,255,.55)); }
  50%      { filter: drop-shadow(0 0 18px rgba(255,215,106,.8)); }
}

/* ══════════════════════════════════════════════════════════
   WALLET — fullscreen top-up overlay
   ══════════════════════════════════════════════════════════ */
.wallet-overlay {
  position: fixed; inset: 0; z-index: 250;
  pointer-events: none; opacity: 0;
  transition: opacity .3s ease;
}
.wallet-overlay.show { opacity: 1; pointer-events: auto; }
.wallet-bg {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(6px);
}
.wallet-card {
  position: absolute;
  left: 8px; right: 8px; bottom: 0;
  max-height: 92vh;
  background: linear-gradient(180deg, #1a1a30, #0a0a14);
  border-radius: 24px 24px 0 0;
  border-top: 1px solid rgba(255,215,106,0.25);
  box-shadow: 0 -16px 64px rgba(0,0,0,0.55);
  overflow-y: auto;
  padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.wallet-overlay.show .wallet-card { transform: translateY(0); }
.wallet-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.wallet-title { font-size: 18px; font-weight: 800; }
.wallet-close {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff; font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit;
}

/* Current balance card */
.wallet-balance-card {
  padding: 16px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,140,200,0.20), transparent 60%),
    linear-gradient(135deg, rgba(160,120,255,0.30), rgba(220,30,30,0.18));
  border: 1.5px solid rgba(220,30,30,0.45);
  margin-bottom: 14px;
  text-align: center;
  box-shadow: 0 0 18px rgba(220,30,30,0.25);
}
.wbc-label {
  font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase;
  color: rgba(201,212,232,0.75);
}
.wbc-value {
  font-size: 38px; font-weight: 900;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px;
  background: linear-gradient(180deg, #fff5cc 0%, #ffd76a 50%, #ff9b3a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.wbc-value .m-coin {
  width: 36px !important; height: 36px !important;
  vertical-align: middle;
}

/* Method tabs */
.wallet-methods {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; margin-bottom: 12px;
}
.wm-method {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 6px; border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.08);
  color: #c9d4e8; cursor: pointer;
  font-family: inherit; font-size: 11px;
  transition: all .15s;
  position: relative;
}
.wm-method.active {
  border-color: var(--gold);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,215,106,0.18), transparent 60%),
    rgba(255,215,106,0.06);
  box-shadow: 0 0 14px rgba(255,215,106,0.3);
}
.wm-method.active .wm-text { color: #ffd76a; }
.wm-method.disabled {
  opacity: 0.55; cursor: not-allowed;
}
.wm-icon { font-size: 22px; }
.wm-text { font-weight: 700; }
.wm-status {
  position: absolute; top: 6px; right: 6px;
  font-size: 10px; padding: 1px 6px; border-radius: 6px;
  background: rgba(110,231,183,0.2); color: #6ee7b7;
}
.wm-status.soon {
  background: rgba(255,170,50,0.18); color: #ffaa3a;
  font-size: 9px; letter-spacing: 0.3px;
}

/* Method info */
.wm-info {
  font-size: 12px; color: #b8c2d9;
  padding: 10px 12px; margin-bottom: 12px;
  background: rgba(120,180,255,0.08);
  border-left: 3px solid rgba(120,180,255,0.5);
  border-radius: 10px;
  line-height: 1.5;
}
.wm-info b { color: #ffd76a; }

/* Coming soon panel */
.wm-coming-soon {
  text-align: center; padding: 30px 20px;
}
.wmcs-icon {
  font-size: 56px; margin-bottom: 10px;
  filter: drop-shadow(0 6px 14px rgba(255,170,50,0.35));
  animation: emptyFloat 4s ease-in-out infinite;
}
.wmcs-title {
  font-size: 18px; font-weight: 800; color: #ffaa3a;
  margin-bottom: 8px;
}
.wmcs-text {
  font-size: 13px; color: #b8c2d9;
  line-height: 1.5; max-width: 280px;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════
   BONUS-MODE: multiplier preview + flair badge
   ══════════════════════════════════════════════════════════ */
.bonus-mode-preview {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,86,112,0.18), transparent 60%),
    linear-gradient(135deg, rgba(199,125,255,0.12), rgba(220,30,30,0.06));
  border: 1px solid rgba(255,86,112,0.30);
}
.bmp-title {
  font-size: 12px; font-weight: 700; color: #ff8a9b;
  letter-spacing: 0.4px; text-transform: uppercase;
  margin-bottom: 8px; text-align: center;
}
.bmp-list {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.bmp-item {
  text-align: center;
  padding: 8px 4px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.bmp-mult {
  display: block;
  font-size: 16px; font-weight: 900;
  color: rgba(255,255,255,0.65);
  font-variant-numeric: tabular-nums;
}
.bmp-mult.x2  { color: #6ee7b7; }
.bmp-mult.x3  { color: #ffd76a; }
.bmp-mult.x5  { color: #ffaa3a; }
.bmp-mult.x10 {
  background: linear-gradient(135deg, #ff5670, #ffd76a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 12px rgba(255,213,74,0.6);
}
.bmp-pct {
  display: block; font-size: 10px; color: #9ba6bf;
  margin-top: 2px;
}
.bmp-note {
  text-align: center; font-size: 11px; color: #c9d4e8;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.bmp-note b { color: #ff8a9b; }

/* Big random-multiplier badge — позиция СВЕРХУ reels (не перекрывает popups в центре) */
.bonus-mult-badge {
  position: absolute;
  top: 8%; left: 50%;
  transform: translate(-50%, 0) scale(0.4);
  display: flex; flex-direction: column; align-items: center;
  z-index: 15;
  pointer-events: none;
  animation: bmbEnter .55s cubic-bezier(.16,1,.3,1) forwards;
  background: rgba(0,0,0,0.55);
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,86,112,0.35);
  backdrop-filter: blur(4px);
}
.bonus-mult-badge .bmb-mult {
  font-size: 38px; font-weight: 900;
  background: linear-gradient(135deg, #ff5670, #ffd76a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 18px rgba(255,86,112,0.7);
  filter: drop-shadow(0 4px 12px rgba(255,86,112,0.6));
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bonus-mult-badge .bmb-label {
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  color: #ff8a9b; margin-top: 3px;
  text-shadow: 0 2px 8px rgba(255,86,112,0.5);
}
.bonus-mult-badge.mult-5 .bmb-mult,
.bonus-mult-badge.mult-10 .bmb-mult {
  animation: bmbShake .8s ease-in-out;
}
@keyframes bmbEnter {
  from { transform: translate(-50%, -20%) scale(0); opacity: 0; }
  60%  { transform: translate(-50%, 0) scale(1.15); opacity: 1; }
  to   { transform: translate(-50%, 0) scale(1); opacity: 1; }
}
@keyframes bmbShake {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-6deg); }
  75%      { transform: rotate(6deg); }
}

/* ══════════════════════════════════════════════════════════
   BONUS SESSION CARD (idle + active states)
   ══════════════════════════════════════════════════════════ */
.bonus-session-card {
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,140,200,0.18), transparent 60%),
    radial-gradient(circle at 0% 100%, rgba(255,86,112,0.12), transparent 60%),
    linear-gradient(135deg, rgba(199,125,255,0.14), rgba(220,30,30,0.08));
  border: 1.5px solid rgba(255,86,112,0.35);
  box-shadow: 0 0 18px rgba(255,86,112,0.20);
}
.bsc-title {
  font-size: 16px; font-weight: 800; text-align: center;
  color: #ff8a9b;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.bsc-features {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
}
.bsc-feature {
  font-size: 12px; line-height: 1.4;
  color: #d6dcec;
}
.bsc-feature b { color: #ffd76a; }
.btn.big {
  font-size: 14px; padding: 12px;
  font-weight: 800;
}

/* Active session */
.bsc-progress-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.bsc-progress-label {
  font-size: 13px; color: #c9d4e8;
}
.bsc-progress-label b {
  color: #ff8a9b; font-size: 16px;
}
.bsc-mult-pill {
  background: linear-gradient(135deg, #ff5670, #ffd76a);
  color: #1a1410;
  padding: 6px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 800;
  box-shadow: 0 4px 14px rgba(255,86,112,0.5);
  animation: bscMultPulse 2s ease-in-out infinite;
}
.bsc-mult-pill b { font-size: 18px; }
@keyframes bscMultPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.bsc-progress-bar {
  position: relative;
  height: 8px;
  background: rgba(0,0,0,0.4);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}
.bsc-progress-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #ff5670, #ffd76a);
  transition: width .6s ease;
  box-shadow: 0 0 8px rgba(255,213,74,0.5);
}
.bsc-progress-dots {
  display: flex; justify-content: space-between;
  margin-top: 8px;
}
.bsc-dot {
  flex: 1;
  text-align: center;
  font-size: 11px; font-weight: 700;
  color: rgba(201,212,232,0.5);
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  margin: 0 2px;
}
.bsc-dot.done {
  background: rgba(255,213,74,0.10);
  color: #ffd76a;
  border-color: rgba(255,213,74,0.20);
}
.bsc-dot.active {
  background: linear-gradient(135deg, #ff5670, #ffd76a);
  color: #1a1410;
  border-color: transparent;
  box-shadow: 0 0 10px rgba(255,86,112,0.5);
  animation: bscMultPulse 1.4s infinite;
}
.bsc-sticky-info {
  text-align: center;
  font-size: 12px; color: #d6dcec;
  padding: 6px 8px;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
}
.bsc-sticky-info b { color: #ffd76a; }

/* ══════════════════════════════════════════════════════════
   WALLET TAB (full screen)
   ══════════════════════════════════════════════════════════ */
.wallet-tab-balance {
  text-align: center;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,140,200,0.20), transparent 60%),
    linear-gradient(135deg, rgba(160,120,255,0.30), rgba(220,30,30,0.18));
  border: 1.5px solid rgba(220,30,30,0.45);
  box-shadow: 0 0 18px rgba(220,30,30,0.25);
}
.wtb-label {
  font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase;
  color: rgba(201,212,232,0.75); margin-bottom: 4px;
}
.wtb-value {
  font-size: 42px; font-weight: 900;
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #fff5cc 0%, #ffd76a 50%, #ff9b3a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.wtb-value .m-coin {
  width: 40px !important; height: 40px !important;
}
.wtb-tier {
  margin-top: 8px;
  font-size: 14px; font-weight: 700;
  display: inline-block;
  padding: 4px 14px; border-radius: 999px;
  background: rgba(0,0,0,0.25);
  color: #cd7f32;
}

/* На очень узких экранах — ещё компактнее tabs */
@media (max-width: 380px) {
  .tabs { gap: 2px; padding: 6px 3px 8px; }
  .tab { padding: 8px 1px; min-height: 42px; }
  .tab .t-icon { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════
   TOTAL WIN overlay (после БОНУСКИ)
   ══════════════════════════════════════════════════════════ */
.total-win-overlay {
  position: fixed; inset: 0; z-index: 300;
  pointer-events: none; opacity: 0;
  transition: opacity .35s ease;
}
.total-win-overlay.show {
  opacity: 1; pointer-events: auto;
}
.total-win-overlay .tw-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,213,74,0.25), transparent 60%),
    rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
}
.tw-card {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  width: min(360px, 88vw);
  padding: 30px 24px 20px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,213,74,0.25), transparent 70%),
    linear-gradient(180deg, #1a1a30 0%, #0a0a14 100%);
  border: 2px solid rgba(255,213,74,0.55);
  box-shadow:
    0 0 80px rgba(255,213,74,0.45),
    0 24px 64px rgba(0,0,0,0.7);
  text-align: center;
  opacity: 0;
  overflow: hidden;
}
.total-win-overlay.show .tw-card {
  animation: twCardEnter .7s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes twCardEnter {
  0%   { transform: translate(-50%, -50%) scale(0.3) rotate(-8deg); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.1) rotate(2deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
}
.tw-fireworks {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
  border-radius: 24px;
}
.tw-firework {
  position: absolute;
  width: 6px; height: 6px;
  background: linear-gradient(135deg, #ffd76a, #ff5670);
  border-radius: 50%;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255,213,74,0.8));
  animation: twFireworkFly 1.8s ease-out forwards;
}
@keyframes twFireworkFly {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: var(--tw-end, translate(80px, -120px)) scale(0); opacity: 0; }
}
.tw-header {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,232,160,0.85); font-weight: 800;
  margin-bottom: 12px;
}
.tw-label {
  font-size: 14px; letter-spacing: 4px;
  color: #c9d4e8; font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(255,213,74,0.5);
}
.tw-amount-row {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  margin: 8px 0 12px;
}
.tw-amount {
  font-size: 64px; font-weight: 900;
  background: linear-gradient(180deg, #fff5cc 0%, #ffd76a 50%, #ff9b3a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 50px rgba(255,213,74,0.8);
  line-height: 1;
  filter: drop-shadow(0 4px 16px rgba(255,213,74,0.6));
  animation: twAmountPulse 1.4s ease-in-out infinite;
}
@keyframes twAmountPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.tw-amount-row .m-coin {
  width: 56px !important; height: 56px !important;
  animation: twAmountPulse 1.4s ease-in-out infinite;
}
.tw-summary {
  font-size: 13px; color: rgba(201,212,232,0.7);
  margin-bottom: 6px;
}
.tw-profit {
  font-size: 16px; font-weight: 800;
  margin: 8px 0 18px;
  padding: 6px 16px; border-radius: 999px;
  display: inline-block;
}
.tw-profit.positive {
  background: rgba(110,231,183,0.15);
  color: #6ee7b7;
  border: 1px solid rgba(110,231,183,0.4);
  box-shadow: 0 0 14px rgba(110,231,183,0.3);
}
.tw-profit.negative {
  background: rgba(255,138,155,0.15);
  color: #ff8a9b;
  border: 1px solid rgba(255,138,155,0.4);
}
.tw-profit.neutral {
  background: rgba(255,255,255,0.06);
  color: #c9d4e8;
}

/* ══════════════════════════════════════════════════════════
   БОНУСКА play overlay
   ══════════════════════════════════════════════════════════ */
.bonuska-play-overlay {
  position: fixed; inset: 0; z-index: 280;
  pointer-events: none; opacity: 0;
  transition: opacity .35s ease;
}
.bonuska-play-overlay.show {
  opacity: 1; pointer-events: auto;
}
.bpo-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,86,112,0.18), transparent 60%),
    rgba(0,0,0,0.88);
  backdrop-filter: blur(8px);
}
.bpo-card {
  position: absolute;
  left: 8px; right: 8px; top: 50%;
  transform: translateY(-50%) scale(0.9);
  max-height: 96vh; overflow-y: auto;
  padding: 16px 14px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,86,112,0.18), transparent 60%),
    linear-gradient(180deg, #1a1a30 0%, #0a0a14 100%);
  border: 2px solid rgba(255,86,112,0.50);
  box-shadow:
    0 0 60px rgba(255,86,112,0.35),
    0 24px 64px rgba(0,0,0,0.6);
  opacity: 0;
  transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
.bonuska-play-overlay.show .bpo-card {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}
.bpo-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.bpo-title {
  font-size: 18px; font-weight: 800;
  background: linear-gradient(135deg, #ff5670, #ffd76a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 0.5px;
}
.bpo-progress {
  font-size: 13px; font-weight: 700; color: #c9d4e8;
  padding: 4px 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
}
.bpo-status {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.bpo-mult-pill {
  background: linear-gradient(135deg, #ff5670, #ffd76a);
  color: #1a1410;
  padding: 8px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 800;
  box-shadow: 0 4px 14px rgba(255,86,112,0.5);
  animation: bscMultPulse 2s ease-in-out infinite;
}
.bpo-mult-pill b { font-size: 20px; }
.bpo-mult-pill.mult-bump {
  animation: bpoMultBump 0.85s cubic-bezier(.16,1,.3,1);
}
@keyframes bpoMultBump {
  0%   { transform: scale(1); box-shadow: 0 4px 14px rgba(255,86,112,0.5); }
  35%  { transform: scale(1.45) rotate(-3deg); box-shadow: 0 0 38px rgba(255,213,106,1), 0 0 18px rgba(255,86,112,1); filter: brightness(1.5); }
  60%  { transform: scale(0.95) rotate(2deg); }
  100% { transform: scale(1); }
}
.bpo-dots .bsc-dot.active {
  animation: bpoDotActive 1.2s ease-in-out infinite;
}
@keyframes bpoDotActive {
  0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(255,86,112,0.5); }
  50%      { transform: scale(1.08); box-shadow: 0 0 22px rgba(255,213,106,0.85), 0 0 10px rgba(255,86,112,0.6); }
}
.bpo-dots .bsc-dot.done {
  animation: bpoDotDoneFlash 0.6s ease-out;
}
@keyframes bpoDotDoneFlash {
  0%   { background: linear-gradient(135deg, #6ee7b7, #ffd76a); transform: scale(1.15); }
  100% { background: rgba(255,213,74,0.10); transform: scale(1); }
}
.bpo-sticky {
  flex: 1;
  font-size: 12px; color: #d6dcec;
  padding: 6px 12px;
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
}
.bpo-sticky b { color: #ffd76a; }
.bpo-dots {
  display: flex; gap: 4px;
  margin-bottom: 14px;
}
.bpo-dots .bsc-dot { flex: 1; }
.bpo-machine-host {
  margin-bottom: 12px;
}
.bpo-machine-host .slot-panel { margin-bottom: 0; }
.bpo-hint {
  text-align: center;
  font-size: 12px; color: rgba(201,212,232,0.65);
  font-style: italic;
}

/* В nft-mode скрываем основную панель в screenGame (она вынесена в overlay) */
#screenGame.nft-mode-idle #slotPanelHome { display: none; }

/* В overlay БОНУСКИ скрываем spin-button и quick-toggle — overlay автономен.
   Result-text (+N M) оставляем — он показывает выплату каждого спина. */
.bonuska-play-overlay .spin-btn-big,
.bonuska-play-overlay .last-win-info {
  display: none !important;
}
.bonuska-play-overlay .sp-actions {
  margin-top: 0;
  padding: 0;
}
.bonuska-play-overlay .sp-machine {
  margin-bottom: 0;
}
.bonuska-play-overlay .sp-result {
  padding: 12px 0 6px;
}

/* ══════════════════════════════════════════════════════════
   Скрытые legacy-фичи (Hot Boost, Diamond Collector, Лотерея, Tier)
   ══════════════════════════════════════════════════════════ */
.slot-status,
.ss-farm,
.ss-nft,
.lottery-card,
.tier-badge,
.wb-tier-progress,
.mh-tier,
.wtb-tier,
#sdTierRow {
  display: none !important;
}
/* Wallet card в Profile — убираем "статус" колонку, оставляем balance + lifetime */
.wallet-balance .wb-side:nth-child(3) {
  display: none !important;
}
.wallet-balance {
  grid-template-columns: 1fr 1fr !important;
}
/* Mh-tier в маркете убрать — расширяем balance на полную ширину */
.market-header {
  grid-template-columns: 1fr !important;
}

/* ══════════════════════════════════════════════════════════
   GLOBAL CONFETTI (reusable for big wins)
   ══════════════════════════════════════════════════════════ */
.global-confetti {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; overflow: hidden;
}
.gc-piece {
  position: absolute;
  top: -10px;
  width: 10px; height: 14px;
  border-radius: 2px;
  animation: gcFall linear forwards;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
@keyframes gcFall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  10%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0.4; }
}

/* ══════════════════════════════════════════════════════════
   POLISH PASS — visual finesse layer (v=73)
   ══════════════════════════════════════════════════════════ */

/* ── Slot machine: idle ambient breathing glow ─────────────── */
.machine {
  animation: machineBreath 4.8s ease-in-out infinite;
}
@keyframes machineBreath {
  0%, 100% {
    box-shadow:
      var(--sh-lg),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -2px 0 rgba(0,0,0,.5),
      0 0 0 0 rgba(255,213,74,0);
  }
  50% {
    box-shadow:
      var(--sh-lg),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -2px 0 rgba(0,0,0,.5),
      0 0 28px 2px rgba(255,213,74,0.08);
  }
}
.slot-panel.nft-mode .machine {
  animation: machineBreathNFT 3.6s ease-in-out infinite;
}
@keyframes machineBreathNFT {
  0%, 100% { box-shadow: var(--sh-lg), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 0 rgba(255,86,112,0); }
  50%      { box-shadow: var(--sh-lg), inset 0 1px 0 rgba(255,255,255,.08), 0 0 36px 4px rgba(255,86,112,0.18); }
}

/* Reel idle shimmer — едва заметная диагональная блёстка раз в ~7с */
.reel::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,213,106,0.10) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: reelShimmer 7s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
.reel:nth-child(2)::after { animation-delay: 0.9s; }
.reel:nth-child(3)::after { animation-delay: 1.8s; }
.reel:nth-child(4)::after { animation-delay: 2.7s; }
.reel:nth-child(5)::after { animation-delay: 3.6s; }
@keyframes reelShimmer {
  0%, 80% { transform: translateX(-100%); }
  92%     { transform: translateX(120%); }
  100%    { transform: translateX(120%); }
}
/* Во время спина шиммер выключаем — он отвлекает */
.slot-panel.spinning .reel::after,
.machine.spinning .reel::after { animation: none; opacity: 0; }

/* Big-win panel pulse — золотая обводка вспыхивает на крупных выигрышах */
.slot-panel.big-win-pulse .machine {
  animation: bigWinFrame 1.2s ease-out;
}
@keyframes bigWinFrame {
  0%   { box-shadow: var(--sh-lg), 0 0 0 0 rgba(255,213,106,0); }
  40%  { box-shadow: 0 0 60px 8px rgba(255,213,106,0.7), 0 0 28px 2px rgba(255,86,112,0.45); }
  100% { box-shadow: var(--sh-lg), 0 0 0 0 rgba(255,213,106,0); }
}

/* ── Win-tier counter color differentiation ──────────────── */
.big-win-counter.tier-mega .bwc-num,
.big-win-counter.tier-mega .bwc-prefix {
  background: linear-gradient(135deg, #ffd76a 0%, #ff5670 50%, #c77dff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(255,86,112,0.8));
}
.big-win-counter.tier-big .bwc-num,
.big-win-counter.tier-big .bwc-prefix {
  background: linear-gradient(135deg, #ffd76a, #ff9b3a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(255,213,106,0.7));
}

/* ── Tab bar: shimmer sweep on active ─────────────────────── */
.tab.active {
  position: relative;
  overflow: hidden;
}
.tab.active::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  transform: translateX(-110%);
  animation: tabShimmer 2.6s ease-in-out 0.4s infinite;
  pointer-events: none;
}
@keyframes tabShimmer {
  0%, 60% { transform: translateX(-110%); }
  85%     { transform: translateX(110%); }
  100%    { transform: translateX(110%); }
}

/* ── Header M-pill: subtle constant breathing ─────────────── */
.b-item.ms {
  animation: msIdleBreath 3.2s ease-in-out infinite;
}
@keyframes msIdleBreath {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,213,106,0)); }
  50%      { filter: drop-shadow(0 0 6px rgba(255,213,106,0.45)); }
}
/* Когда мерцающий msPulseFlash активен — отключаем idle, чтобы не конкурировали */
.b-item.ms.changed { animation: msPulseFlash .55s ease-out; }

/* ── BONUSKA overlay: drifting stars backdrop ────────────── */
.bpo-bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(2px 2px at 12% 22%, rgba(255,213,106,0.6), transparent 50%),
    radial-gradient(1.5px 1.5px at 28% 78%, rgba(255,86,112,0.5), transparent 50%),
    radial-gradient(2px 2px at 52% 14%, rgba(199,125,255,0.55), transparent 50%),
    radial-gradient(1.5px 1.5px at 71% 64%, rgba(110,231,183,0.5), transparent 50%),
    radial-gradient(2px 2px at 88% 38%, rgba(255,213,106,0.55), transparent 50%),
    radial-gradient(1.5px 1.5px at 38% 50%, rgba(255,255,255,0.3), transparent 50%),
    radial-gradient(2px 2px at 8% 82%, rgba(110,231,183,0.4), transparent 50%),
    radial-gradient(1.5px 1.5px at 92% 88%, rgba(199,125,255,0.5), transparent 50%);
  background-size: 100% 100%;
  animation: bpoStarsDrift 14s linear infinite, bpoStarsTwinkle 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bpoStarsDrift {
  0%   { transform: translateY(0) translateX(0); }
  100% { transform: translateY(-12px) translateX(8px); }
}
@keyframes bpoStarsTwinkle {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}

/* ── Toast: bouncier slide-in + icon support ─────────────── */
.toast {
  transition: opacity .3s, transform .45s cubic-bezier(.16,1,.3,1);
}
.toast.show {
  transform: translateX(-50%) translateY(0) scale(1);
}
.toast {
  transform: translateX(-50%) translateY(28px) scale(0.94);
}
.toast[data-type="success"] {
  box-shadow: 0 8px 28px rgba(16,185,129,0.35), var(--sh-md);
}
.toast[data-type="error"] {
  box-shadow: 0 8px 28px rgba(239,68,68,0.35), var(--sh-md);
}

/* ── Profile cards: hover/glow polish ─────────────────────── */
#screenProfile .card,
#screenWallet .card {
  transition: border-color .3s ease, box-shadow .3s ease, transform .2s ease;
}
#screenProfile .card:active,
#screenWallet .card:active {
  transform: scale(0.997);
}
.wallet-card {
  position: relative;
  overflow: hidden;
}
.wallet-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -10%;
  width: 60%; height: 200%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,213,106,0.08) 50%, transparent 60%);
  transform: rotate(15deg) translateX(-100%);
  animation: walletShimmer 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes walletShimmer {
  0%, 70%  { transform: rotate(15deg) translateX(-100%); }
  90%      { transform: rotate(15deg) translateX(220%); }
  100%     { transform: rotate(15deg) translateX(220%); }
}

/* ── Stats grid number pop ────────────────────────────────── */
.stats-grid .stat-v.num {
  background: linear-gradient(180deg, #fff, #c9d4e8 70%, #8a96b0);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}

/* ── Spin button: idle micro-pulse pulled out so big-win takes precedence */
.spin-btn-big:not(:disabled) {
  animation: spinBtnIdle 2.4s ease-in-out infinite;
}
@keyframes spinBtnIdle {
  0%, 100% { box-shadow: 0 6px 18px rgba(255,213,74,0.35), inset 0 1px 0 rgba(255,255,255,0.35); }
  50%      { box-shadow: 0 8px 26px rgba(255,213,74,0.55), inset 0 1px 0 rgba(255,255,255,0.4); }
}

/* ── Reduce motion: respect accessibility preference ──────── */
@media (prefers-reduced-motion: reduce) {
  .machine,
  .slot-panel.nft-mode .machine,
  .reel::after,
  .tab.active::after,
  .b-item.ms,
  .bpo-bg::before,
  .wallet-card::before,
  .spin-btn-big:not(:disabled) {
    animation: none !important;
  }
}

/* ── Win-cell pulse: stronger glow + scale bump (v=73 polish) ── */
.symbol.win-cell {
  position: relative;
  z-index: 2;
  animation: winCellBump 0.9s ease-out;
}
.symbol.win-cell::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  background: radial-gradient(circle, rgba(255,213,106,0.55), transparent 70%);
  pointer-events: none;
  animation: winCellHalo 0.95s ease-out;
}
@keyframes winCellBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes winCellHalo {
  0%   { opacity: 0; transform: scale(0.6); }
  40%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* ── Slot result title: stronger gradient on jackpot ──────── */
.sp-result-title.jackpot {
  background: linear-gradient(135deg, #ffd76a 0%, #ff5670 50%, #c77dff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(255,86,112,0.5));
  animation: jackpotTitlePulse 1.2s ease-in-out infinite;
}
@keyframes jackpotTitlePulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255,86,112,0.5)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 18px rgba(255,213,106,0.9)); transform: scale(1.04); }
}

/* ── Spin button :hover/:active feel — more responsive ───── */
.spin-btn-big:not(:disabled):hover {
  filter: brightness(1.1);
}
.spin-btn-big:not(:disabled):active {
  transform: scale(0.96);
  filter: brightness(0.95);
  transition: transform .08s ease, filter .08s ease;
}

/* ── Card-title: subtle gradient underline for hierarchy ──── */
.card-title {
  position: relative;
}
.card-title::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 28px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .symbol.win-cell,
  .symbol.win-cell::after,
  .sp-result-title.jackpot {
    animation: none !important;
  }
}

/* ── Hide legacy / cleanup ──
   Profile-tab оставляет: статистика + login-стрик + telegram-канал + настройки + рефералка.
   Всё остальное (квесты/ачивки/история/М-кошелёк/новости/заказы/джекпот/раунд)
   скрывается отсюда. */
.bonus-banner,
#bonusBanner,
#cardsCard,
#loginCalendarCard,
.jackpot-banner,
#jackpotBanner,
.jackpot-info-sheet,
#jackpotInfoSheet,
#sheetJackpot,
#profileWalletCard,
#purchasesCard,
#newsCard,
#profileDailyQuestsCard,
#profileWeeklyQuestsCard,
#profileAchievementsCard,
#profileWinsCard,
#profileHistoryCard,
#screenTop,
.tab[data-screen="screenTop"],
.hub-feature-tile[data-go="screenTop"],
#lotteryCard,
.lottery-card { display: none !important; }

/* ══════════════════════════════════════════════════════════
   HUB / HOME SCREEN — main entry point (v=76)
   ══════════════════════════════════════════════════════════ */
#screenHome { padding: 0 !important; }

/* ── Hero ─────────────────────────────────────────────────── */
.hub-hero {
  position: relative;
  padding: 28px 18px 24px;
  margin: 0 0 18px;
  border-radius: 0 0 28px 28px;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(255,213,106,0.18);
}
.hub-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,86,112,0.42), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(199,125,255,0.32), transparent 55%),
    radial-gradient(circle at 50% 90%, rgba(58,207,255,0.20), transparent 60%),
    linear-gradient(180deg, #1a0d22 0%, #0a0a14 100%);
  z-index: -2;
  animation: hubHeroPulse 8s ease-in-out infinite;
}
@keyframes hubHeroPulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.12); }
}
.hub-hero-stars {
  position: absolute; inset: 0;
  background:
    radial-gradient(2px 2px at 14% 30%, rgba(255,213,106,0.85), transparent 50%),
    radial-gradient(1.5px 1.5px at 32% 70%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(2px 2px at 58% 18%, rgba(255,86,112,0.7), transparent 50%),
    radial-gradient(1px 1px at 78% 56%, rgba(199,125,255,0.7), transparent 50%),
    radial-gradient(2px 2px at 90% 28%, rgba(110,231,183,0.7), transparent 50%),
    radial-gradient(1.5px 1.5px at 22% 88%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1.5px 1.5px at 50% 50%, rgba(255,213,106,0.55), transparent 50%);
  z-index: -1;
  animation: hubStarsTwinkle 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hubStarsTwinkle {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-3px); }
}
.hub-hero-content { text-align: center; }
.hub-hero-greet {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.hub-hero-title {
  display: flex; flex-direction: column;
  align-items: center; gap: 0;
  line-height: 0.92;
  margin-bottom: 8px;
}
.hht-1 {
  font-size: 36px; font-weight: 900; letter-spacing: 2px;
  background: linear-gradient(180deg, #fff8d6 0%, #ffd76a 60%, #c97a1f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(255,213,106,0.4));
}
.hht-2 {
  font-size: 18px; font-weight: 800; letter-spacing: 6px;
  color: rgba(255,255,255,0.85);
  margin-top: 4px;
}
.hub-hero-sub {
  font-size: 13px;
  color: rgba(201,212,232,0.7);
  margin-bottom: 18px;
}
.hub-hero-stats {
  display: flex; align-items: stretch;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,213,106,0.18);
  border-radius: 16px;
  padding: 10px 4px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hhs-item { flex: 1; text-align: center; padding: 0 8px; }
.hhs-v {
  font-size: 18px; font-weight: 800;
  background: linear-gradient(180deg, #fff, #ffd76a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.hhs-l {
  font-size: 10px;
  color: rgba(201,212,232,0.6);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 2px;
}
.hhs-divider { width: 1px; background: rgba(255,255,255,0.08); }

/* ── Section heads ───────────────────────────────────────── */
.hub-section { padding: 0 14px; margin-bottom: 22px; }
.hub-section-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
  padding-left: 4px;
}
.hub-section-head .hs-icon { font-size: 18px; }
.hub-section-head .hs-title {
  font-size: 16px; font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
}
.hub-section-head .hs-count {
  margin-left: auto;
  font-size: 11px; font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,213,106,0.14);
  color: #ffd76a;
  border: 1px solid rgba(255,213,106,0.25);
}

/* ── Games grid ──────────────────────────────────────────── */
.hub-games-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 12px;
}

/* Game tile (large, single column) */
.hub-game-tile {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: linear-gradient(180deg, #1a1a30 0%, #0d0d1a 100%);
  border: 1px solid var(--border-2);
  border-radius: 18px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
  isolation: isolate;
}
.hub-game-tile::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.04) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .9s ease;
  pointer-events: none;
  z-index: 1;
}
.hub-game-tile:active { transform: scale(0.985); }
.hub-game-tile.live {
  border-color: rgba(255,213,106,0.4);
  box-shadow:
    0 8px 22px rgba(255,213,106,0.18),
    inset 0 1px 0 rgba(255,255,255,0.06);
  animation: hubGameLivePulse 3s ease-in-out infinite;
}
.hub-game-tile.live:active::before { transform: translateX(100%); }
@keyframes hubGameLivePulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(255,213,106,0.18), inset 0 1px 0 rgba(255,255,255,0.06); }
  50%      { box-shadow: 0 10px 32px rgba(255,213,106,0.34), inset 0 1px 0 rgba(255,255,255,0.08); }
}

/* Tile art (left thumb) */
.hgt-art {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 14px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  isolation: isolate;
}
.hgt-art-emoji {
  font-size: 50px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
  z-index: 2;
}
.hgt-art-glow {
  position: absolute; inset: -10%;
  background: radial-gradient(circle, rgba(255,213,106,0.5), transparent 65%);
  z-index: 1;
  animation: hubArtGlow 2.6s ease-in-out infinite;
}
@keyframes hubArtGlow {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.15); opacity: 1; }
}
.hgt-art-slots  { background: linear-gradient(135deg, #ff5670, #ffd76a); }
.hgt-art-mines  { background: linear-gradient(135deg, #2d3142, #4a5568); }
.hgt-art-crash  { background: linear-gradient(135deg, #c77dff, #7b2cbf); }
.hgt-art-dice   { background: linear-gradient(135deg, #6ee7b7, #10b981); }
.hgt-art-plinko { background: linear-gradient(135deg, #3acfff, #0099cc); }

.hgt-body { min-width: 0; }
.hgt-title-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.hgt-title {
  font-size: 16px; font-weight: 800;
  color: #fff;
  letter-spacing: 0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hgt-status {
  font-size: 9.5px; font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.8px;
  flex-shrink: 0;
}
.hgt-status.live {
  background: linear-gradient(135deg, #6ee7b7, #10b981);
  color: #052e1a;
  box-shadow: 0 0 0 0 rgba(110,231,183,0.7);
  animation: liveDotPulse 1.6s ease-in-out infinite;
}
@keyframes liveDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(110,231,183,0.7); }
  50%      { box-shadow: 0 0 0 6px rgba(110,231,183,0); }
}
.hgt-status.soon {
  background: rgba(255,255,255,0.07);
  color: rgba(201,212,232,0.7);
  border: 1px solid rgba(255,255,255,0.10);
}
.hgt-sub {
  font-size: 12px;
  color: rgba(201,212,232,0.65);
  margin-bottom: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hgt-meta { display: flex; gap: 5px; flex-wrap: wrap; }
.hgt-tag {
  font-size: 10px; font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  color: rgba(201,212,232,0.75);
  white-space: nowrap;
}
.hgt-cta {
  font-size: 12px; font-weight: 800;
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #1a1410;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Soon tiles — muted + diagonal stamp */
.hub-game-tile.soon {
  opacity: 0.85;
  background: linear-gradient(180deg, #14141f 0%, #08080f 100%);
  cursor: pointer;
}
.hub-game-tile.soon .hgt-art {
  filter: grayscale(0.55) brightness(0.7);
}
.hub-game-tile.soon .hgt-title { color: rgba(255,255,255,0.78); }
.hub-game-tile.soon .hgt-sub   { color: rgba(201,212,232,0.45); }
.hub-game-tile.soon::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 65%, rgba(255,213,106,0.06) 78%, transparent 92%);
  pointer-events: none;
}

/* ── Features grid (3 cols, compact) ─────────────────────── */
.hub-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 360px) {
  .hub-features-grid { grid-template-columns: repeat(2, 1fr); }
}
.hub-feature-tile {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px 12px;
  background: linear-gradient(180deg, #15151f 0%, #0a0a14 100%);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  transition: transform .15s ease, border-color .25s ease, box-shadow .25s ease;
}
.hub-feature-tile:active { transform: scale(0.96); }
.hub-feature-tile:hover { border-color: rgba(255,213,106,0.3); }
.hft-icon-wrap {
  --hft-c1: #ffd76a;
  --hft-c2: #ff9b3a;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--hft-c1), var(--hft-c2));
  box-shadow: 0 4px 14px rgba(0,0,0,0.4),
              inset 0 1px 0 rgba(255,255,255,0.25);
  margin-bottom: 2px;
}
.hft-icon { font-size: 22px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4)); }
.hft-name {
  font-size: 13px; font-weight: 800;
  color: #fff;
  letter-spacing: 0.2px;
}
.hft-desc {
  font-size: 10.5px;
  color: rgba(201,212,232,0.55);
  letter-spacing: 0.2px;
}

/* ── Footer ───────────────────────────────────────────────── */
.hub-footer {
  padding: 16px 14px 22px;
  text-align: center;
}
.hub-footer-text {
  font-size: 10.5px;
  color: rgba(201,212,232,0.35);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ── Hide jackpot/countdown banners on home (cleaner hub) ── */
body.scr-home #jackpotBanner,
body.scr-home #countdownBanner {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hub-hero-bg,
  .hub-hero-stars,
  .hub-game-tile.live,
  .hgt-art-glow,
  .hgt-status.live { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   HUB WIDGETS — daily / wheel / session / quest
   ══════════════════════════════════════════════════════════ */
.hub-widgets {
  padding: 0 14px;
  margin: -8px 0 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.hub-widget {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: linear-gradient(180deg, #15151f 0%, #0a0a14 100%);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
  transition: transform .15s ease, border-color .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}
.hub-widget:active { transform: scale(0.985); }
.hub-widget.hw-session {
  border-color: rgba(255,86,112,0.45);
  box-shadow: 0 6px 18px rgba(255,86,112,0.20);
  animation: hwSessionPulse 2.4s ease-in-out infinite;
}
@keyframes hwSessionPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(255,86,112,0.20); }
  50%      { box-shadow: 0 8px 28px rgba(255,86,112,0.45); }
}
.hub-widget.hw-daily {
  border-color: rgba(255,213,106,0.35);
  box-shadow: 0 6px 18px rgba(255,213,106,0.15);
}
.hub-widget.hw-quest {
  border-color: rgba(110,231,183,0.30);
}
.hw-icon-wrap {
  --hw-c1: #ffd76a; --hw-c2: #ff9b3a;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--hw-c1), var(--hw-c2));
  box-shadow: 0 3px 10px rgba(0,0,0,0.4),
              inset 0 1px 0 rgba(255,255,255,0.25);
}
.hw-icon { font-size: 22px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4)); }
.hw-body { min-width: 0; }
.hw-title {
  font-size: 13px; font-weight: 800;
  color: #fff;
  letter-spacing: 0.2px;
  margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hw-sub {
  font-size: 11px;
  color: rgba(201,212,232,0.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hw-cta {
  font-size: 12px; font-weight: 800;
  padding: 7px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #1a1410;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.hw-cta-hot {
  background: linear-gradient(135deg, #ff5670, #ffd76a);
  color: #1a1410;
}
/* Disabled / cooldown widget look */
.hub-widget.hw-cooldown {
  opacity: 0.7;
}
.hub-widget.hw-cooldown .hw-cta {
  background: rgba(255,255,255,0.06);
  color: rgba(201,212,232,0.6);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ══════════════════════════════════════════════════════════
   HUB TICKER — scrolling recent events
   ══════════════════════════════════════════════════════════ */
.hub-ticker {
  display: flex; align-items: center; gap: 8px;
  margin: 0 14px 18px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,213,106,0.12);
  border-radius: 10px;
  overflow: hidden;
}
.ht-icon {
  font-size: 14px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(255,213,106,0.6));
  animation: htBolt 1.6s ease-in-out infinite;
}
@keyframes htBolt {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.15); opacity: 1; }
}
.ht-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.ht-track {
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap;
  animation: htScroll 36s linear infinite;
  will-change: transform;
  width: max-content;
}
@keyframes htScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ht-item {
  font-size: 12px;
  color: rgba(201,212,232,0.78);
  font-weight: 600;
}
.ht-item b { color: #ffd76a; }
.ht-sep {
  color: rgba(255,213,106,0.4);
  font-size: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .ht-track { animation: none; }
  .hub-widget.hw-session { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   TOP screen polish — podium upgrade
   ══════════════════════════════════════════════════════════ */
.podium-step.first {
  position: relative;
}
.podium-step.first::before {
  content: '👑';
  position: absolute;
  top: -22px; left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(255,213,106,0.7));
  animation: crownFloat 2.4s ease-in-out infinite;
  z-index: 2;
}
@keyframes crownFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}
.podium-step.first .podium-block {
  position: relative;
  overflow: hidden;
}
.podium-step.first .podium-block::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,213,106,0.4) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: podiumShimmer 3s ease-in-out infinite;
}
@keyframes podiumShimmer {
  0%, 70% { transform: translateX(-100%); }
  100%    { transform: translateX(120%); }
}
/* «Это ты» — у любой ступени подиума */
.podium-step.me .podium-avatar {
  box-shadow: 0 0 0 3px rgba(199,125,255,0.6), 0 6px 18px rgba(199,125,255,0.3);
}
.podium-step.me::after {
  content: 'ты';
  position: absolute;
  top: 36px; right: 20%;
  font-size: 9px; font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #c77dff, #7b2cbf);
  color: #fff;
  letter-spacing: 0.4px;
}
/* M-coin внутри podium-stat — более компактный */
.podium-stat .m-coin {
  width: 14px !important; height: 14px !important;
  vertical-align: -2px;
}
/* M-coin внутри top-row */
.top-row .v {
  display: inline-flex; align-items: center; gap: 4px;
}
.top-row .v .m-coin {
  width: 14px !important; height: 14px !important;
}
@media (prefers-reduced-motion: reduce) {
  .podium-step.first::before,
  .podium-step.first .podium-block::after { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   TAB DOT — claimable indicator on tabs
   ══════════════════════════════════════════════════════════ */
.tab { position: relative; }
.tab-dot {
  position: absolute;
  top: 4px; right: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5670, #ffd76a);
  box-shadow: 0 0 8px rgba(255,86,112,0.7);
  animation: tabDotPulse 1.4s ease-in-out infinite;
}
@keyframes tabDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.8; }
}

/* ══════════════════════════════════════════════════════════
   WALLET screen: hero balance card upgrade
   ══════════════════════════════════════════════════════════ */
.wallet-tab-balance {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,213,106,0.22), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(58,207,255,0.18), transparent 60%),
    linear-gradient(180deg, #1c1c2e 0%, #0d0d1a 100%) !important;
  border: 1px solid rgba(255,213,106,0.30) !important;
  position: relative;
  overflow: hidden;
}
.wallet-tab-balance::before {
  content: '';
  position: absolute;
  top: -30%; left: -20%;
  width: 60%; height: 200%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,213,106,0.08) 50%, transparent 60%);
  transform: rotate(15deg) translateX(-100%);
  animation: walletShimmer 7s ease-in-out infinite;
  pointer-events: none;
}
.wtb-label {
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(201,212,232,0.6);
  margin-bottom: 6px;
}
.wtb-value {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 38px; font-weight: 900;
  background: linear-gradient(180deg, #fff8d6 0%, #ffd76a 60%, #c97a1f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.wtb-value .m-coin { width: 36px !important; height: 36px !important;
  -webkit-text-fill-color: initial; filter: drop-shadow(0 2px 6px rgba(255,213,106,0.4)); }
.wtb-tier {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,213,106,0.10);
  color: #ffd76a;
  border: 1px solid rgba(255,213,106,0.25);
}

/* ══════════════════════════════════════════════════════════
   WM methods: visual upgrade (better selected/disabled)
   ══════════════════════════════════════════════════════════ */
.wallet-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.wm-method {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  padding: 12px 8px;
  background: linear-gradient(180deg, #15151f 0%, #0a0a14 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, border-color .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}
.wm-method:active { transform: scale(0.97); }
.wm-method.active {
  border-color: rgba(255,213,106,0.5);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,213,106,0.15), transparent 60%),
    linear-gradient(180deg, #15151f, #0a0a14);
  box-shadow: 0 4px 14px rgba(255,213,106,0.18);
}
.wm-method.disabled { opacity: 0.55; cursor: not-allowed; }
.wm-method.disabled:active { transform: none; }
.wm-icon { font-size: 22px; margin-bottom: 2px; }
.wm-text { font-size: 11.5px; font-weight: 700; color: #fff; }
.wm-status {
  font-size: 9px; font-weight: 800;
  color: #6ee7b7;
  letter-spacing: 0.4px;
}
.wm-status.soon {
  color: rgba(201,212,232,0.55);
  background: rgba(255,255,255,0.06);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 8.5px;
}

/* ══════════════════════════════════════════════════════════
   PULL-TO-REFRESH (subtle hint at top of hub)
   ══════════════════════════════════════════════════════════ */
.ptr-indicator {
  position: absolute;
  top: -40px; left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  opacity: 0;
  transition: top .25s ease, opacity .25s ease;
  pointer-events: none;
  z-index: 5;
}
.ptr-indicator.visible {
  top: 12px;
  opacity: 1;
}
.ptr-indicator.spinning {
  animation: ptrSpin 0.8s linear infinite;
}
@keyframes ptrSpin {
  to { transform: translateX(-50%) rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════
   TOP-UP modal (CryptoBot pending state)
   ══════════════════════════════════════════════════════════ */
.topup-overlay {
  position: fixed; inset: 0;
  z-index: 320;
  pointer-events: none; opacity: 0;
  transition: opacity .3s ease;
}
.topup-overlay.show { pointer-events: auto; opacity: 1; }
.topup-bg {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.topup-card {
  position: absolute;
  left: 14px; right: 14px;
  top: 50%; transform: translateY(-50%) scale(0.95);
  padding: 24px 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(58,207,255,0.20), transparent 60%),
    linear-gradient(180deg, #161628 0%, #0a0a14 100%);
  border: 1px solid rgba(58,207,255,0.4);
  border-radius: 22px;
  box-shadow:
    0 0 50px rgba(58,207,255,0.25),
    0 24px 60px rgba(0,0,0,0.5);
  text-align: center;
  opacity: 0;
  transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .3s ease;
  max-width: 420px;
  margin: 0 auto;
}
.topup-overlay.show .topup-card {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}
.topup-spinner {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  border: 4px solid rgba(58,207,255,0.18);
  border-top-color: #3acfff;
  border-radius: 50%;
  animation: topupSpin 0.85s linear infinite;
}
@keyframes topupSpin { to { transform: rotate(360deg); } }
.topup-title {
  font-size: 18px; font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}
.topup-sub {
  font-size: 13px; color: rgba(201,212,232,0.72);
  margin-bottom: 14px;
}
.topup-meta {
  display: inline-block;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(58,207,255,0.12);
  color: #3acfff;
  border: 1px solid rgba(58,207,255,0.3);
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
.topup-actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 12px;
}
.topup-actions .btn { width: 100%; }
.topup-hint {
  font-size: 11px;
  color: rgba(201,212,232,0.5);
  font-style: italic;
}
.topup-card.success { border-color: rgba(110,231,183,0.5); }
.topup-card.success .topup-spinner {
  border: none; width: 56px; height: 56px;
  background: radial-gradient(circle, #6ee7b7 30%, transparent 70%);
  animation: topupSuccess 0.6s ease-out;
}
.topup-card.success::before {
  content: '✓';
  position: absolute; top: 36px; left: 50%; transform: translateX(-50%);
  font-size: 32px; color: #052e1a;
  z-index: 2;
}
@keyframes topupSuccess {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.topup-card.error {
  border-color: rgba(239,68,68,0.5);
}
.topup-card.error .topup-spinner {
  background: rgba(239,68,68,0.2);
  border-color: rgba(239,68,68,0.4);
  border-top-color: transparent;
  animation: none;
}

/* M-pack tile small variant inside crypto methods */
.m-pack[data-disabled="1"] {
  opacity: 0.45;
  pointer-events: none;
  position: relative;
}
.m-pack[data-disabled="1"]::after {
  content: 'только Stars';
  position: absolute; right: 8px; bottom: 8px;
  font-size: 9px; padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: rgba(201,212,232,0.55);
}
.m-pack .mp-usd-price {
  font-size: 11px;
  color: rgba(58,207,255,0.85);
  margin-top: 2px;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════
   CRASH GAME — screen + animations
   ══════════════════════════════════════════════════════════ */
#screenCrash { padding: 0 !important; }

/* ── Crash stage (background + rocket + multiplier) ─── */
.crash-stage {
  /* --crash-mult — устанавливается из app.js во время flying phase (1.00 → 250+).
     Управляет интерполяцией цвета фона по росту множителя. */
  --crash-mult: 1;
  /* Прогресс роста (0 на ×1 → 1 на ×8+) — основа для интерполяции */
  --crash-t: clamp(0, calc((var(--crash-mult) - 1) / 7), 1);

  /* Палитра — два конца интерполяции:
       cool (×1)    — глубокий ультрафиолет/индиго (спокойствие, выжидание)
       warm (×8+)   — пурпур/малина (нагрев, риск)
     На пиках добавляется огненный акцент. */
  --c-deep:  #0b0420;          /* база — почти чёрный фиолетовый */
  --c-mid:   #1d0a3d;          /* средний фиолет */
  --c-top:   #2b0e55;          /* верх — индиго-фиолет */

  position: relative;
  height: 360px;
  margin: 12px;
  border-radius: 22px;
  overflow: hidden;

  /* Многослойный градиент с тонкой интерполяцией:
     - Низ: cool teal-индиго → горячая малина (главная цветовая дуга)
     - Верх: глубокий cyan-индиго → выгорает в чёрный (создаёт «небо»)
     - Левый/правый акценты — пурпур и розовый, разной силы
     - Виньетка по краям — фокусирует центр и убирает «плоскость»
     - База — почти чёрный индиго
     Все алфа-значения на idle низкие — даёт глубину тёмного, не «плакат». */
  background:
    /* 0. Виньетка — затемняет края, фокус в центр */
    radial-gradient(ellipse 120% 80% at 50% 50%,
      transparent 35%,
      rgba(5, 0, 20, 0.55) 100%),
    /* 1. Нижнее свечение — холодный teal-индиго → горячая малина */
    radial-gradient(ellipse 95% 70% at 50% 110%,
      rgb(
        calc(80  + var(--crash-t) * 175)
        calc(30  + var(--crash-t) * 60)
        calc(170 - var(--crash-t) * 70)
        / calc(0.32 + var(--crash-t) * 0.45)
      ),
      transparent 70%),
    /* 2. Средне-низ — цвет акцента, чтобы не было плоского пятна */
    radial-gradient(ellipse 60% 40% at 50% 85%,
      rgb(
        calc(160 + var(--crash-t) * 90)
        calc(50  + var(--crash-t) * 50)
        calc(200 - var(--crash-t) * 110)
        / calc(0.20 + var(--crash-t) * 0.20)
      ),
      transparent 70%),
    /* 3. Верхнее свечение — индиго/cyan, гаснет с ростом множителя */
    radial-gradient(ellipse 80% 55% at 50% -10%,
      rgba(60, 90, 200, calc(0.32 - var(--crash-t) * 0.22)),
      transparent 70%),
    /* 4. Левый акцент — холодный пурпур */
    radial-gradient(ellipse 55% 90% at -15% 45%,
      rgba(130, 70, 220, calc(0.22 + var(--crash-t) * 0.08)),
      transparent 60%),
    /* 5. Правый акцент — переход розовый → оранж */
    radial-gradient(ellipse 55% 90% at 115% 55%,
      rgb(
        calc(210 + var(--crash-t) * 45)
        calc(80  + var(--crash-t) * 40)
        calc(160 - var(--crash-t) * 90)
        / calc(0.18 + var(--crash-t) * 0.22)
      ),
      transparent 60%),
    /* 6. База */
    linear-gradient(180deg,
      var(--c-top) 0%,
      var(--c-mid) 55%,
      var(--c-deep) 100%);
  background-blend-mode: multiply, screen, screen, screen, screen, screen, normal;

  border: 1px solid rgba(199,125,255,0.35);
  box-shadow: 0 12px 36px rgba(0,0,0,0.5),
              inset 0 1px 0 rgba(255,255,255,0.06),
              /* Inner glow растёт с множителем */
              inset 0 -80px 120px -40px rgba(255, 90, 140, calc(var(--crash-t) * 0.45));
  transition: box-shadow 0.45s ease-out;
}
/* ═══ Многослойный цветовой «движок» сцены ═══
   crash-bg-glow содержит два псевдослоя:
   - main (background) — дышащие radial-пятна (мягкая пульсация)
   - ::before — ауроральные ленты (медленный sweep слева направо)
   - ::after  — мерцающие цветовые блики
*/
.crash-bg-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Главные «дышащие» пятна */
  background:
    radial-gradient(ellipse 70% 55% at 25% 75%, rgba(199,125,255,0.24), transparent 65%),
    radial-gradient(ellipse 60% 45% at 75% 25%, rgba(110,180,255,0.18), transparent 65%),
    radial-gradient(ellipse 50% 40% at 60% 60%, rgba(255,120,180,0.16), transparent 70%);
  mix-blend-mode: screen;
  animation: crashBgBreathe 10s ease-in-out infinite alternate;
}
/* Ауроральная лента — медленный sweep по диагонали */
.crash-bg-glow::before {
  content: '';
  position: absolute; inset: -20% -30%;
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 25%,
    rgba(180, 100, 255, 0.18) 38%,
    rgba(255, 120, 180, 0.22) 50%,
    rgba(120, 180, 255, 0.18) 62%,
    transparent 75%,
    transparent 100%);
  mix-blend-mode: screen;
  filter: blur(28px);
  animation: crashAurora 14s linear infinite;
  opacity: 0.85;
}
/* Цветные блики — медленно «плавают» */
.crash-bg-glow::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle 120px at 20% 30%, rgba(255,180,220,0.20), transparent 70%),
    radial-gradient(circle 100px at 80% 70%, rgba(140,210,255,0.18), transparent 70%),
    radial-gradient(circle 90px  at 50% 50%, rgba(199,125,255,0.16), transparent 70%);
  mix-blend-mode: screen;
  animation: crashBlobsFloat 16s ease-in-out infinite alternate;
  opacity: 0.9;
}
@keyframes crashBgBreathe {
  0%   { opacity: 0.6; transform: translate(0, 0) scale(1); }
  50%  { opacity: 1;   transform: translate(-2%, 2%) scale(1.06); }
  100% { opacity: 0.75; transform: translate(2%, -2%) scale(1.03); }
}
@keyframes crashAurora {
  0%   { transform: translateX(-25%) rotate(0deg); }
  50%  { transform: translateX(25%)  rotate(2deg); }
  100% { transform: translateX(-25%) rotate(0deg); }
}
@keyframes crashBlobsFloat {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(4%, -3%); }
  66%  { transform: translate(-3%, 4%); }
  100% { transform: translate(2%, 2%); }
}

/* ── FLYING phase: цвета набирают температуру и темп ── */
.crash-stage[data-phase="flying"] .crash-bg-glow {
  background:
    radial-gradient(ellipse 85% 60% at 50% 105%, rgba(255,140,80,0.42), transparent 60%),
    radial-gradient(ellipse 55% 40% at 50% -5%, rgba(255,80,130,0.30), transparent 60%),
    radial-gradient(ellipse 40% 30% at 35% 50%, rgba(255,180,100,0.22), transparent 70%);
  animation: crashBgPulse 1.4s ease-in-out infinite;
}
.crash-stage[data-phase="flying"] .crash-bg-glow::before {
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255, 130, 80, 0.28) 35%,
    rgba(255, 200, 120, 0.34) 50%,
    rgba(255, 90, 140, 0.28) 65%,
    transparent 100%);
  animation: crashAurora 4s linear infinite;
  opacity: 1;
}
.crash-stage[data-phase="flying"] .crash-bg-glow::after {
  animation: crashBlobsFloat 5s ease-in-out infinite alternate;
}
@keyframes crashBgPulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

/* ── CRASHED: всё уходит в глубокий красный ── */
.crash-stage[data-phase="crashed"] .crash-bg-glow {
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(255,40,70,0.50), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(140,20,40,0.45), transparent 70%);
  animation: none;
  opacity: 1;
}
.crash-stage[data-phase="crashed"] .crash-bg-glow::before,
.crash-stage[data-phase="crashed"] .crash-bg-glow::after {
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

/* ═══ GODRAYS — conic-лучи из центра, эмулируют свет от ракеты ═══
   На betting — мягкое спокойное излучение, на flying — резкое и быстрое. */
.crash-godrays {
  position: absolute; inset: -30%;
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(from 0deg at 50% 65%,
    transparent          0deg,
    rgba(255,200,140, 0.10) 10deg,
    transparent         28deg,
    transparent         60deg,
    rgba(199,125,255, 0.10) 70deg,
    transparent         88deg,
    transparent        140deg,
    rgba(255,140,180, 0.12) 150deg,
    transparent        170deg,
    transparent        220deg,
    rgba(140,210,255, 0.10) 230deg,
    transparent        250deg,
    transparent        300deg,
    rgba(255,180,120, 0.10) 310deg,
    transparent        330deg,
    transparent        360deg);
  mix-blend-mode: screen;
  filter: blur(18px);
  animation: crashGodraysRotate 28s linear infinite;
  opacity: 0.55;
}
.crash-stage[data-phase="flying"] .crash-godrays {
  background: conic-gradient(from 0deg at 50% 60%,
    transparent       0deg,
    rgba(255,200,120, 0.32) 8deg,
    transparent      22deg,
    transparent      55deg,
    rgba(255,120, 80, 0.28) 65deg,
    transparent      80deg,
    transparent     130deg,
    rgba(255,180,100, 0.30) 140deg,
    transparent     156deg,
    transparent     210deg,
    rgba(255,140, 60, 0.28) 220deg,
    transparent     236deg,
    transparent     290deg,
    rgba(255,200,140, 0.32) 300deg,
    transparent     316deg,
    transparent     360deg);
  animation: crashGodraysRotate 6s linear infinite;
  opacity: 0.9;
  filter: blur(14px);
}
.crash-stage[data-phase="crashed"] .crash-godrays { opacity: 0; transition: opacity 0.3s; }
@keyframes crashGodraysRotate {
  to { transform: rotate(360deg); }
}

/* ═══ CAUSTICS — мерцающий «солнечный зайчик»-эффект ═══
   Имитация света на дне бассейна — медленные плавные пятна с распылителем.
   На betting создают ощущение «живого» эфира. */
.crash-caustics {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 180px 80px at 25% 30%, rgba(255,220,255,0.08), transparent 70%),
    radial-gradient(ellipse 220px 90px at 70% 50%, rgba(220,200,255,0.07), transparent 70%),
    radial-gradient(ellipse 160px 70px at 45% 75%, rgba(255,200,240,0.08), transparent 70%),
    radial-gradient(ellipse 200px 80px at 85% 80%, rgba(180,220,255,0.06), transparent 70%);
  mix-blend-mode: screen;
  filter: blur(6px);
  animation: crashCaustics 22s ease-in-out infinite alternate;
  opacity: 0.7;
}
@keyframes crashCaustics {
  0%   { transform: translate(0, 0)     scale(1);    }
  25%  { transform: translate(-3%, 2%)  scale(1.08); }
  50%  { transform: translate(4%, -3%)  scale(0.95); }
  75%  { transform: translate(-2%, -2%) scale(1.05); }
  100% { transform: translate(3%, 3%)   scale(1);    }
}
.crash-stage[data-phase="flying"] .crash-caustics {
  animation-duration: 6s;
  opacity: 0.5;
  filter: blur(4px);
}
.crash-stage[data-phase="crashed"] .crash-caustics { opacity: 0; transition: opacity 0.4s; }

/* ═══ PULSE RINGS — расходящиеся кольца от центра в flying ═══
   На betting скрыты, на flying — пульсация энергии. */
.crash-pulse-rings {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s;
}
.crash-pulse-rings > span {
  position: absolute;
  top: 50%; left: 50%;
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 200, 140, 0.45);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 24px rgba(255,180,120, 0.30) inset,
              0 0 24px rgba(255,180,120, 0.25);
}
.crash-stage[data-phase="flying"] .crash-pulse-rings { opacity: 1; }
.crash-stage[data-phase="flying"] .crash-pulse-rings > span:nth-child(1) {
  animation: crashPulseRing 2.2s ease-out infinite;
}
.crash-stage[data-phase="flying"] .crash-pulse-rings > span:nth-child(2) {
  animation: crashPulseRing 2.2s ease-out 0.7s infinite;
}
.crash-stage[data-phase="flying"] .crash-pulse-rings > span:nth-child(3) {
  animation: crashPulseRing 2.2s ease-out 1.4s infinite;
}
@keyframes crashPulseRing {
  0%   { width: 60px;  height: 60px;  opacity: 0.8; border-color: rgba(255, 220, 160, 0.65); }
  100% { width: 520px; height: 520px; opacity: 0;   border-color: rgba(255, 120, 80, 0); }
}

/* ═══ FILM GRAIN — едва заметный SVG-нойз поверх сцены ═══
   Премиум-текстура, чтобы фон не выглядел «пластиковым» CSS-градиентом. */
.crash-grain {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  /* SVG turbulence inline — генерируется браузером, никакой картинки не качается */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.10;
  animation: crashGrainShift 1.6s steps(4) infinite;
}
@keyframes crashGrainShift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-4px, 3px); }
  50%  { transform: translate(3px, -2px); }
  75%  { transform: translate(-2px, -3px); }
  100% { transform: translate(0, 0); }
}
.crash-stage[data-phase="flying"] .crash-grain { opacity: 0.14; }
.crash-stage[data-phase="crashed"] .crash-grain { opacity: 0.18; mix-blend-mode: hard-light; }

/* Уважаем prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .crash-bg-glow,
  .crash-bg-glow::before,
  .crash-bg-glow::after,
  .crash-godrays,
  .crash-caustics,
  .crash-pulse-rings > span,
  .crash-grain { animation: none !important; }
}
.crash-bg {
  position: absolute; inset: 0;
  z-index: 0;
}

/* ═══ STARFIELD (3 параллакс-слоя) ═══
   Слой 1 (far)   — мелкие, тусклые, медленные
   Слой 2 (mid)   — средние, цветные, средняя скорость
   Слой 3 (near)  — крупные, яркие, быстрые
   Скорость анимации управляется --star-speed (по умолчанию неторопливо для betting).
   На flying app.js перебивает --star-speed на резкое значение, создавая ощущение разгона. */
.crash-stars {
  position: absolute; inset: -20% 0 -20% 0; /* overscan для бесшовного scroll */
  --star-speed: 60s;
  pointer-events: none;
}
.crash-stars::before,
.crash-stars::after,
.crash-stars > .cs-mid {
  content: '';
  position: absolute; inset: 0;
  background-repeat: repeat;
  will-change: transform, opacity;
}
/* Far layer (background) — мелкие белые точки, медленные */
.crash-stars::before {
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1px 1px at 78% 32%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(1px 1px at 44% 58%, rgba(199,125,255,0.45), transparent 60%),
    radial-gradient(1px 1px at 22% 82%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1px 1px at 88% 72%, rgba(255,213,106,0.4), transparent 60%),
    radial-gradient(1px 1px at 56% 14%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1px 1px at 6% 48%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1px 1px at 96% 90%, rgba(255,255,255,0.35), transparent 60%);
  background-size: 100% 100%;
  animation: cscStarsDrift var(--star-speed) linear infinite;
  opacity: 0.85;
}
/* Mid layer — цветные акценты, средняя скорость */
.crash-stars > .cs-mid {
  background-image:
    radial-gradient(1.5px 1.5px at 16% 12%, rgba(255,213,106,0.85), transparent 55%),
    radial-gradient(1.5px 1.5px at 64% 28%, rgba(199,125,255,0.85), transparent 55%),
    radial-gradient(1.5px 1.5px at 32% 64%, rgba(110,231,183,0.7), transparent 55%),
    radial-gradient(1.5px 1.5px at 82% 78%, rgba(255,86,112,0.75), transparent 55%),
    radial-gradient(1.5px 1.5px at 48% 92%, rgba(255,255,255,0.75), transparent 55%),
    radial-gradient(1.5px 1.5px at 90% 44%, rgba(255,213,106,0.7), transparent 55%);
  background-size: 100% 100%;
  animation: cscStarsDrift calc(var(--star-speed) * 0.55) linear infinite;
  opacity: 0.9;
}
/* Near layer — крупные «спарклы», быстрые */
.crash-stars::after {
  background-image:
    radial-gradient(2px 2px at 24% 36%, rgba(255,255,255,0.95), transparent 55%),
    radial-gradient(2px 2px at 70% 14%, rgba(255,213,106,0.9), transparent 55%),
    radial-gradient(2px 2px at 12% 76%, rgba(199,125,255,0.85), transparent 55%),
    radial-gradient(2px 2px at 86% 56%, rgba(110,231,183,0.8), transparent 55%);
  background-size: 100% 100%;
  animation: cscStarsDrift calc(var(--star-speed) * 0.3) linear infinite,
             crashStarsTwinkle 3s ease-in-out infinite;
  opacity: 0.95;
}
@keyframes cscStarsDrift {
  from { transform: translateY(-20%); }
  to   { transform: translateY(20%); }
}
@keyframes crashStarsTwinkle {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
/* Во время flying phase разгоняем параллакс — звёзды летят вниз быстро */
.crash-stage[data-phase="flying"] .crash-stars {
  --star-speed: 8s;
}
/* На crashed замедляем до остановки */
.crash-stage[data-phase="crashed"] .crash-stars {
  --star-speed: 120s;
  opacity: 0.5;
  transition: opacity 0.6s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .crash-stars::before,
  .crash-stars::after,
  .crash-stars > .cs-mid { animation: none !important; }
  .crash-stage { transition: none !important; }
}
.crash-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.crash-history-strip {
  position: absolute; top: 8px; left: 8px; right: 8px;
  z-index: 5;
  display: flex; gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px 4px;
  /* Fade-out по краям чтобы не было резкого "обрезания" */
  mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
.crash-history-strip::-webkit-scrollbar { display: none; }
/* History pills — стиль reference UI:
 *   - белый pill = текущий live multiplier
 *   - синий pill = прошлые раунды (со светлым/тёмным glow в зависимости от значения)
 *   - "Ожидание" = pill белый, текст серый (во время betting phase)
 *   Размер: 32px высота, ~64px ширина — крупнее ours было */
.chs-pill {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(30, 40, 70, 0.85);
  color: rgba(255,255,255,0.88);
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(255,255,255,0.08);
  letter-spacing: -0.2px;
  min-width: 56px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
  cursor: pointer;
  transition: transform 0.15s ease;
}
/* Первый (current) pill — белый */
.chs-pill.current {
  background: #fff;
  color: #0a0b18;
  border-color: rgba(255,255,255,0.95);
  box-shadow: 0 4px 14px rgba(255,255,255,0.20), 0 0 0 2px rgba(255,255,255,0.10);
}
/* Past rounds — синий */
.chs-pill.lo {
  background: linear-gradient(180deg, #3b66d0 0%, #2b4ba0 100%);
  color: #fff;
  border-color: rgba(123,160,255,0.45);
}
.chs-pill.mid {
  background: linear-gradient(180deg, #3b66d0 0%, #2b4ba0 100%);
  color: #fff;
  border-color: rgba(123,160,255,0.45);
}
.chs-pill.hi {
  background: linear-gradient(180deg, #3b66d0 0%, #2b4ba0 100%);
  color: #fff;
  border-color: rgba(123,160,255,0.45);
}
.chs-pill.mega {
  background: linear-gradient(180deg, #6a44e0 0%, #4a25b8 100%);
  color: #fff;
  border-color: rgba(170,140,255,0.55);
  text-shadow: 0 0 8px rgba(199,125,255,0.45);
}
/* Crashed phase: last pill становится "current" с цветом по краш-точке */
.chs-pill.current.lo  { background: #ff6b80; color: #fff; border-color: rgba(255,86,112,0.85); }
.chs-pill.current.mid { background: #ffd76a; color: #2a1a00; border-color: rgba(255,213,106,0.85); }
.chs-pill.current.hi  { background: #6ee7b7; color: #042c1d; border-color: rgba(110,231,183,0.85); }
.chs-pill.current.mega{ background: #c77dff; color: #fff; border-color: rgba(199,125,255,0.85); }
/* Betting phase: special "Ожидание" pill */
.chs-pill.waiting {
  background: #fff;
  color: #0a0b18;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.1px;
}

/* ── Arena (rocket + multiplier) ─── */
.crash-arena {
  position: absolute; inset: 0;
  z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}

/* ═══ SYNTHWAVE IDLE-СЦЕНА (видна в idle/betting) ═══
   Ретрофутуризм 80-х в палитре Mayhem. Phase-reactive state-machine:
   - idle:           спокойное дыхание сцены
   - betting:        engines warming up, halo появляется
   - betting urgent: тряска, искры, halo пульсирует
   - flying:         liftoff transition + scene fade-out
   - crashed:        scene скрыта (играет основная crash-анимация) */
.csw-scene {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 360px;
  aspect-ratio: 300 / 260;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
/* Lift-off транзишн при переходе в flying/crashed */
.crash-stage[data-phase="flying"] .csw-scene {
  animation: cswLiftoff 0.55s ease-out forwards;
}
.crash-stage[data-phase="crashed"] .csw-scene {
  opacity: 0;
  transform: translateX(-50%) translateY(-40px) scale(0.8);
}
/* Прячем тяжёлую SVG-ракету в idle/betting/waiting */
.crash-stage[data-phase="betting"] .crash-rocket,
.crash-stage[data-phase="waiting"] .crash-rocket,
.crash-stage:not([data-phase]) .crash-rocket {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ─── БАЗОВЫЕ АНИМАЦИИ (idle state) ─── */
.csw-rocket {
  transform-origin: 150px 170px;
  transform-box: fill-box;
  animation: cswRocketBob 3.4s ease-in-out infinite;
}
.csw-flame {
  transform-origin: 150px 200px;
  transform-box: fill-box;
  animation: cswFlamePulse 1.2s ease-in-out infinite;
}
.csw-sun {
  transform-origin: 150px 190px;
  transform-box: fill-box;
  animation: cswSunPulse 6s ease-in-out infinite;
}
.csw-nebula {
  transform-origin: 150px 200px;
  transform-box: fill-box;
  animation: cswNebulaBreathe 7s ease-in-out infinite;
}
/* Сетка-пол: dash-offset flow создаёт ощущение «потока» к горизонту */
.csw-grid line {
  stroke-dasharray: 4 6;
  animation: cswGridFlow 4s linear infinite;
}
.csw-grid line:nth-child(odd)  { animation-direction: normal; }
.csw-grid line:nth-child(even) { animation-direction: reverse; animation-duration: 5s; }
.csw-beam {
  animation: cswBeamFlow 1.8s linear infinite;
}
/* Звёзды twinkle с разной частотой */
.csw-star {
  transform-origin: center;
  transform-box: fill-box;
  animation: cswStarTwinkle 2.6s ease-in-out infinite;
}
.csw-star.csw-st-2 { animation-duration: 3.4s; animation-delay: -0.6s; }
.csw-star.csw-st-3 { animation-duration: 2.0s; animation-delay: -1.2s; }
.csw-star.csw-st-4 { animation-duration: 3.0s; animation-delay: -0.4s; }
.csw-star.csw-st-5 { animation-duration: 2.4s; animation-delay: -1.8s; }
.csw-star.csw-st-6 { animation-duration: 3.6s; animation-delay: -2.4s; }
.csw-star.csw-st-7 { animation-duration: 2.8s; animation-delay: -0.9s; }
.csw-star.csw-st-8 { animation-duration: 2.2s; animation-delay: -1.5s; }
.csw-star.csw-st-9 { animation-duration: 3.2s; animation-delay: -0.3s; }
/* Foreground искры — drift вверх */
.csw-spark {
  transform-origin: center;
  transform-box: fill-box;
  animation: cswSparkFloat 4s ease-in-out infinite;
}
.csw-spark.csw-sp-2 { animation-duration: 4.8s; animation-delay: -1.0s; }
.csw-spark.csw-sp-3 { animation-duration: 3.6s; animation-delay: -2.2s; }
.csw-spark.csw-sp-4 { animation-duration: 5.2s; animation-delay: -0.5s; }
/* Halo — невидимый в idle */
.csw-halo {
  transform-origin: 150px 170px;
  transform-box: fill-box;
}

/* ─── BETTING PHASE: engines warming up ─── */
.crash-stage[data-phase="betting"] .csw-flame {
  animation: cswFlamePulse 0.9s ease-in-out infinite;
}
.crash-stage[data-phase="betting"] .csw-halo {
  opacity: 0.30;
  animation: cswHaloIdle 4s linear infinite;
}
.crash-stage[data-phase="betting"] .csw-beam {
  opacity: 0.55;
  stroke: #ff5a72;
}

/* ─── BETTING URGENT (countdown ≤ 3 sec) ─── */
.crash-stage[data-phase="betting"][data-countdown="urgent"] .csw-scene {
  animation: cswStageShake 0.18s ease-in-out infinite;
}
.crash-stage[data-phase="betting"][data-countdown="urgent"] .csw-rocket {
  animation: cswRocketVibrate 0.12s ease-in-out infinite;
}
.crash-stage[data-phase="betting"][data-countdown="urgent"] .csw-flame {
  animation: cswFlameWild 0.4s ease-in-out infinite;
}
.crash-stage[data-phase="betting"][data-countdown="urgent"] .csw-halo {
  opacity: 0.7;
  animation: cswHaloPulse 0.6s ease-in-out infinite;
}
.crash-stage[data-phase="betting"][data-countdown="urgent"] .csw-grid line {
  animation-duration: 1.8s, 2.2s;
  filter: brightness(1.4);
}
.crash-stage[data-phase="betting"][data-countdown="urgent"] .csw-beam {
  opacity: 0.85;
  stroke: #ffd76a;
  animation-duration: 0.6s;
}

/* ─── LIFTOFF FLASH (момент перехода betting → flying) ─── */
@keyframes cswLiftoff {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  20%  { opacity: 1; transform: translateX(-50%) translateY(-12px) scale(1.05); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-60px) scale(0.7); }
}

/* ─── KEYFRAMES ─── */
@keyframes cswRocketBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(1.5deg); }
}
@keyframes cswRocketVibrate {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(-1px, 0.5px) rotate(-0.5deg); }
  50%      { transform: translate(1px, -1px) rotate(0.5deg); }
  75%      { transform: translate(-0.5px, 0.5px) rotate(-0.3deg); }
}
@keyframes cswFlamePulse {
  0%, 100% { transform: scale(1);   opacity: 0.55; }
  50%      { transform: scale(1.3); opacity: 0.95; }
}
@keyframes cswFlameWild {
  0%, 100% { transform: scale(1.5)  scaleY(1.8);  opacity: 0.9; }
  50%      { transform: scale(1.8)  scaleY(2.4);  opacity: 1.0; }
}
@keyframes cswSunPulse {
  0%, 100% { transform: scale(1);    opacity: 0.95; }
  50%      { transform: scale(1.02); opacity: 1; }
}
@keyframes cswNebulaBreathe {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.06); opacity: 1; }
}
@keyframes cswGridFlow {
  to { stroke-dashoffset: -24; }
}
@keyframes cswBeamFlow {
  to { stroke-dashoffset: -10; }
}
@keyframes cswStarTwinkle {
  0%, 100% { opacity: 0.30; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
@keyframes cswSparkFloat {
  0%   { opacity: 0;   transform: translateY(0) scale(0.7); }
  20%  { opacity: 1;   transform: translateY(-4px) scale(1); }
  80%  { opacity: 0.7; transform: translateY(-14px) scale(1.1); }
  100% { opacity: 0;   transform: translateY(-20px) scale(0.8); }
}
@keyframes cswHaloIdle {
  0%, 100% { transform: scale(1);    opacity: 0.30; }
  50%      { transform: scale(1.08); opacity: 0.45; }
}
@keyframes cswHaloPulse {
  0%, 100% { transform: scale(1);    opacity: 0.55; stroke: #ffd76a; }
  50%      { transform: scale(1.25); opacity: 0.95; stroke: #ff5a72; }
}
@keyframes cswStageShake {
  0%, 100% { transform: translateX(-50%) translate(0, 0); }
  25%      { transform: translateX(-50%) translate(-0.6px, 0.3px); }
  50%      { transform: translateX(-50%) translate(0.6px, -0.5px); }
  75%      { transform: translateX(-50%) translate(-0.3px, 0.3px); }
}

@media (prefers-reduced-motion: reduce) {
  .csw-rocket, .csw-flame, .csw-sun, .csw-nebula, .csw-grid line,
  .csw-beam, .csw-star, .csw-spark, .csw-halo, .csw-scene {
    animation: none !important;
  }
}

.crash-rocket {
  position: absolute;
  font-size: 48px;
  bottom: 30px; left: 50%;
  transform: translate(-50%, 0) rotate(-12deg);
  filter: drop-shadow(0 4px 14px rgba(255,86,112,0.7));
  z-index: 3;
  transition: transform .15s ease-out;
  will-change: transform;
}
.crash-rocket.idle {
  animation: rocketIdle 2.4s ease-in-out infinite;
}
@keyframes rocketIdle {
  0%, 100% { transform: translate(-50%, 0) rotate(-12deg); }
  50%      { transform: translate(-50%, -6px) rotate(-15deg); }
}
.crash-rocket.flying {
  animation: rocketShake 0.18s ease-in-out infinite;
}
@keyframes rocketShake {
  0%, 100% { filter: drop-shadow(0 4px 14px rgba(255,86,112,0.9)); }
  50%      { filter: drop-shadow(0 4px 22px rgba(255,213,106,1)); }
}
.crash-rocket-trail {
  position: absolute;
  bottom: 0; left: 50%;
  width: 8px; height: 0;
  transform: translateX(-50%);
  background: linear-gradient(0deg, rgba(255,213,106,0), rgba(255,86,112,0.55) 30%, rgba(255,213,106,0.85));
  border-radius: 999px;
  filter: blur(2px);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.crash-rocket-trail.active {
  opacity: 1;
  animation: trailFlicker 0.16s linear infinite;
}
@keyframes trailFlicker {
  0%, 100% { filter: blur(2px) brightness(1); }
  50%      { filter: blur(3px) brightness(1.3); }
}

.crash-mult-display {
  display: flex; align-items: center; gap: 4px;
  font-variant-numeric: tabular-nums;
  user-select: none;
  pointer-events: none;
  text-shadow: 0 0 30px rgba(255,213,106,0.4);
  transition: color .25s ease, transform .15s ease;
}
.cmd-x {
  font-size: 32px; font-weight: 900;
  color: rgba(255,255,255,0.85);
  margin-top: 12px;
}
.cmd-num {
  font-size: 72px; font-weight: 900;
  background: linear-gradient(180deg, #fff 0%, #ffd76a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -2px;
  line-height: 0.95;
}
.crash-mult-display.tier-mid .cmd-num {
  background: linear-gradient(180deg, #fff8d6 0%, #ff9b3a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.crash-mult-display.tier-hi .cmd-num {
  background: linear-gradient(180deg, #fff 0%, #ff5670 60%, #c77dff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.crash-mult-display.flash {
  animation: multFlash 0.3s ease-out;
}
@keyframes multFlash {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.crash-mult-display.crashed {
  filter: hue-rotate(-30deg) brightness(1.2);
}
.crash-mult-display.crashed .cmd-num {
  background: linear-gradient(180deg, #ff5670 0%, #7b2cbf 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: crashedShake 0.5s ease-in-out;
}
@keyframes crashedShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

.crash-status {
  position: absolute;
  bottom: 12px; left: 12px; right: 12px;
  text-align: center;
  font-size: 12px;
  color: rgba(201,212,232,0.7);
  z-index: 3;
}
.crash-status.win {
  color: #6ee7b7;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(110,231,183,0.5);
}
.crash-status.loss {
  color: #ff5670;
  font-weight: 700;
}

/* ── Explosion overlay ─── */
.crash-explosion {
  position: absolute; inset: 0;
  z-index: 4;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.crash-explosion .ce-text {
  font-size: 64px; font-weight: 900;
  background: linear-gradient(135deg, #ffd76a 0%, #ff5670 50%, #c77dff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 4px;
  filter: drop-shadow(0 0 20px rgba(255,86,112,0.7));
  animation: explosionText 0.8s cubic-bezier(.16,1,.3,1);
  z-index: 5;
}
@keyframes explosionText {
  0%   { transform: scale(0.3) rotate(-8deg); opacity: 0; }
  35%  { transform: scale(1.18) rotate(2deg); opacity: 1; }
  70%  { transform: scale(0.95) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.crash-explosion .ce-burst {
  position: absolute; left: 50%; top: 50%;
  width: 200px; height: 200px;
  margin-left: -100px; margin-top: -100px;
  background: radial-gradient(circle, rgba(255,213,106,0.85) 0%, rgba(255,86,112,0.4) 30%, transparent 70%);
  border-radius: 50%;
  animation: explosionBurst 0.7s ease-out;
}
@keyframes explosionBurst {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(3); opacity: 0; }
}

/* ── Controls ─── */
.crash-controls {
  padding: 0 12px;
  margin-bottom: 14px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.crash-stake-row {
  background: linear-gradient(180deg, #15151f 0%, #0a0a14 100%);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 12px;
}
.crash-stake-label {
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(201,212,232,0.6);
  margin-bottom: 8px;
}
.crash-stake-controls {
  display: flex; gap: 8px;
  margin-bottom: 10px;
}
.crash-stake-btn {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-2);
  color: #fff;
  font-size: 14px; font-weight: 800;
  -webkit-tap-highlight-color: transparent;
}
.crash-stake-btn:active { background: rgba(255,255,255,0.10); transform: scale(0.95); }
.crash-stake-input {
  flex: 1;
  height: 44px;
  border-radius: 10px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,213,106,0.3);
  color: #fff;
  font-size: 18px; font-weight: 800; text-align: center;
  font-variant-numeric: tabular-nums;
  outline: none;
  -webkit-appearance: none; appearance: none;
}
.crash-stake-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,213,106,0.18); }
.crash-stake-presets {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}
.csp {
  padding: 7px 0;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-2);
  color: rgba(255,255,255,0.85);
  font-size: 11px; font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
.csp:active { transform: scale(0.95); }
.csp.active {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #1a1410;
  border-color: transparent;
}

.crash-auto-row {
  padding: 10px 14px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  font-size: 13px;
}
.crash-auto-toggle {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.crash-auto-toggle input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: #ffd76a;
  flex-shrink: 0;
}
.crash-auto-toggle span {
  flex: 1;
  color: #fff;
}
.crash-auto-mult {
  width: 60px;
  height: 28px;
  margin-left: 4px;
  border-radius: 6px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,213,106,0.3);
  color: #ffd76a;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  outline: none;
  -webkit-appearance: none;
}
.crash-auto-mult:disabled { opacity: 0.4; }

.crash-action-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 16px;
  border-radius: 14px;
  font-size: 16px; font-weight: 900;
  letter-spacing: 0.4px;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .25s ease;
}
.crash-action-btn:active { transform: scale(0.97); }
.crash-action-btn.place-bet {
  background: linear-gradient(135deg, #ff5670 0%, #c77dff 100%);
  color: #fff;
  box-shadow: 0 6px 22px rgba(199,125,255,0.45);
}
.crash-action-btn.place-bet:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
.crash-action-btn.cash-out {
  background: linear-gradient(135deg, #6ee7b7 0%, #10b981 100%);
  color: #052e1a;
  box-shadow: 0 0 0 0 rgba(110,231,183,0.7);
  animation: cashOutPulse 0.9s ease-in-out infinite;
}
/* Pending: мгновенный feedback после клика, до ответа сервера */
.crash-action-btn.cash-out.pending {
  background: linear-gradient(135deg, #46b890 0%, #086a4d 100%) !important;
  animation: cashOutWaiting 0.6s ease-in-out infinite !important;
  cursor: wait;
}
.crash-action-btn.cash-out.pending::before {
  content: "⏳ ";
  margin-right: 4px;
}
@keyframes cashOutWaiting {
  0%, 100% { box-shadow: 0 6px 22px rgba(110,231,183,0.45), 0 0 0 0 rgba(110,231,183,0.50); }
  50%      { box-shadow: 0 8px 28px rgba(110,231,183,0.65), 0 0 0 8px rgba(110,231,183,0); }
}
@keyframes cashOutPulse {
  0%, 100% { box-shadow: 0 6px 22px rgba(110,231,183,0.5), 0 0 0 0 rgba(110,231,183,0.7); }
  50%      { box-shadow: 0 8px 28px rgba(110,231,183,0.7), 0 0 0 12px rgba(110,231,183,0); }
}
.cab-mult {
  font-size: 13px; font-weight: 800;
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,0.18);
  font-variant-numeric: tabular-nums;
}

/* ── History grid + rules ─── */
.crash-info-card { margin: 0 12px 12px; }
.crash-history-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.chg-cell {
  padding: 8px 4px;
  border-radius: 8px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  text-align: center;
  font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.chg-cell.lo  { color: #ff5670; border-color: rgba(255,86,112,0.3); }
.chg-cell.mid { color: #ffd76a; border-color: rgba(255,213,106,0.3); }
.chg-cell.hi  { color: #6ee7b7; border-color: rgba(110,231,183,0.3); }
.chg-cell.mega { color: #c77dff; border-color: rgba(199,125,255,0.4);
  background: rgba(199,125,255,0.10); }
.chg-cell .chg-stake {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: rgba(201,212,232,0.55);
  margin-top: 2px;
  letter-spacing: 0.2px;
}
.chg-cell.win::after {
  content: '✓';
  display: block;
  font-size: 10px;
  color: #6ee7b7;
}

.crash-rules-card { margin: 0 12px 16px; }
.crash-rules {
  margin: 0; padding-left: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(201,212,232,0.78);
}
.crash-rules li::marker {
  color: #ffd76a;
}

@media (prefers-reduced-motion: reduce) {
  .crash-stars,
  .crash-rocket.idle,
  .crash-rocket.flying,
  .crash-rocket-trail.active,
  .crash-action-btn.cash-out { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   CRASH v2 — улучшенная сцена + SVG-ракета + win/loss оверлеи
   ══════════════════════════════════════════════════════════ */

/* ── Stage upgrade: ярче, глубже, с горизонтом ── */
.crash-stage {
  height: 380px !important;
  background:
    radial-gradient(ellipse 90% 50% at 50% 110%, rgba(255,86,112,0.45), transparent 70%),
    radial-gradient(ellipse 60% 40% at 30% 100%, rgba(199,125,255,0.30), transparent 70%),
    linear-gradient(180deg, #02000a 0%, #0a0420 35%, #1a0840 65%, #2d0d50 90%, #3a1060 100%) !important;
}

/* Distant planet horizon */
.crash-horizon {
  position: absolute;
  bottom: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 700px;
  pointer-events: none;
  z-index: 0;
}
.ch-planet {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #ff8aa3 0%, #ff5670 25%, #c77dff 60%, #4a1a6a 100%);
  box-shadow:
    inset -30px -30px 80px rgba(0,0,0,0.5),
    inset 20px 20px 60px rgba(255,255,255,0.18),
    0 0 80px rgba(255,86,112,0.4);
}
.ch-mist {
  position: absolute;
  bottom: 30%;
  left: -100px; right: -100px;
  height: 80px;
  background: linear-gradient(180deg, transparent, rgba(199,125,255,0.25), transparent);
  filter: blur(20px);
  opacity: 0.7;
}

/* Trajectory SVG (кривая под ракетой) */
.crash-trajectory {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.crash-trajectory.active { opacity: 1; }

/* ── SVG rocket ── */
.crash-rocket {
  font-size: 0;  /* убираем emoji-spacing */
  width: 64px; height: 96px;
  display: flex;
  align-items: center; justify-content: center;
}
.rocket-svg {
  width: 64px; height: 96px;
  filter: drop-shadow(0 4px 18px rgba(255,86,112,0.65));
  transition: filter .15s ease;
}
.crash-rocket.flying .rocket-svg {
  filter: drop-shadow(0 4px 26px rgba(255,213,106,0.95));
}
/* Flame inside SVG — animated via CSS */
.rocket-flame-path,
/* Flame-стек: 3 слоя (outer/mid/core) с разными скоростями flicker'а.
   Анимация применяется ВСЕГДА (даже в idle), эффект "ракета прогревается".
   transform-origin = base of flame (y=98 в локальной системе координат). */
.rocket-flame-outer,
.rocket-flame-mid,
.rocket-flame-core {
  transform-origin: 40px 98px;
  transform-box: fill-box;
  will-change: transform, opacity;
}
.rocket-flame-outer {
  animation: flameFlickOuter 0.18s ease-in-out infinite alternate;
}
.rocket-flame-mid {
  animation: flameFlickMid 0.13s ease-in-out infinite alternate-reverse;
}
.rocket-flame-core {
  animation: flameFlickCore 0.09s ease-in-out infinite alternate;
}
@keyframes flameFlickOuter {
  0%   { transform: scaleY(0.85) scaleX(1.00); opacity: 0.75; }
  100% { transform: scaleY(1.15) scaleX(0.95); opacity: 1; }
}
@keyframes flameFlickMid {
  0%   { transform: scaleY(0.90) scaleX(1.05); opacity: 0.80; }
  100% { transform: scaleY(1.10) scaleX(0.92); opacity: 1; }
}
@keyframes flameFlickCore {
  0%   { transform: scaleY(0.80) scaleX(1.10); opacity: 0.85; }
  100% { transform: scaleY(1.20) scaleX(0.90); opacity: 1; }
}
/* Idle = ракета на старте: пламя слабее, но всё равно мерцает */
.crash-rocket.idle .rocket-flame-outer { opacity: 0.4 !important; }
.crash-rocket.idle .rocket-flame-mid   { opacity: 0.55 !important; }
.crash-rocket.idle .rocket-flame-core  { opacity: 0.7 !important; }
/* Crashed = пламя гаснет */
.crash-rocket.exploded .rocket-flame-outer,
.crash-rocket.exploded .rocket-flame-mid,
.crash-rocket.exploded .rocket-flame-core {
  opacity: 0 !important;
  transition: opacity 0.3s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .rocket-flame-outer,
  .rocket-flame-mid,
  .rocket-flame-core { animation: none !important; }
}

/* Glow halo behind rocket (only flying) */
.crash-rocket-glow {
  position: absolute;
  width: 120px; height: 120px;
  bottom: 20px; left: 50%;
  transform: translate(-50%, 0);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,213,106,0.55) 0%, rgba(255,86,112,0.25) 35%, transparent 70%);
  filter: blur(8px);
  z-index: 1;
  opacity: 0;
  transition: opacity .25s ease;
  will-change: transform, opacity;
  pointer-events: none;
}
.crash-rocket-glow.active {
  opacity: 1;
  animation: glowPulse 1.4s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  50%      { transform: translate(-50%, 0) scale(1.18); }
}

/* ── Particles trail ── */
.crash-particles {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
}
.cp-particle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd76a 0%, rgba(255,86,112,0.7) 50%, transparent 100%);
  filter: blur(1px);
  pointer-events: none;
  animation: particleFade 1.2s linear forwards;
  will-change: transform, opacity;
}
@keyframes particleFade {
  0%   { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0.4) translateY(40px); }
}

/* Drop legacy trail (заменили на particles) */
.crash-rocket-trail { display: none !important; }

/* Старая explosion — убираем (заменили full overlay) */
.crash-explosion { display: none !important; }

/* ── Multiplier display: больше, светящийся ── */
.cmd-num {
  font-size: 84px !important;
  text-shadow: 0 0 40px rgba(255,213,106,0.4) !important;
}
.cmd-x {
  font-size: 38px !important;
}
.crash-mult-display {
  z-index: 2;
}

/* Hide rocket immediately on crash */
.crash-rocket.exploded {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity .2s ease, transform .2s ease;
}

/* ── Action button: instant feedback на тапе + pending state ── */
.crash-action-btn {
  touch-action: manipulation !important;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  overflow: hidden;
}
.crash-action-btn:active:not(:disabled) {
  transform: scale(0.96) !important;
  filter: brightness(1.15);
}
.crash-action-btn.pending {
  opacity: 0.7;
  pointer-events: none;
}
.crash-action-btn.pending::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: btnPendingShimmer 0.9s linear infinite;
}
@keyframes btnPendingShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
/* Кратковременный «нажат» feedback при первом тапе */
.crash-action-btn.tapped {
  transform: scale(0.94);
  transition: transform 0.08s ease;
}

/* ══════════════════════════════════════════════════════════
   CRASH RESULT OVERLAYS — win + loss
   ══════════════════════════════════════════════════════════ */
.crash-result-overlay {
  position: fixed; inset: 0;
  z-index: 340;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.crash-result-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.cro-bg {
  position: absolute; inset: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.crash-win-overlay .cro-bg {
  background:
    radial-gradient(circle at 50% 50%, rgba(110,231,183,0.35), transparent 65%),
    rgba(0,0,0,0.78);
}
.crash-loss-overlay .cro-bg {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,86,112,0.35), transparent 65%),
    rgba(0,0,0,0.85);
}
.cro-card {
  position: absolute;
  left: 16px; right: 16px;
  top: 50%;
  transform: translateY(-50%) scale(0.85);
  padding: 32px 22px 24px;
  border-radius: 26px;
  text-align: center;
  opacity: 0;
  transition: transform .55s cubic-bezier(.16,1,.3,1), opacity .35s ease;
  max-width: 420px;
  margin: 0 auto;
  overflow: hidden;
}
.crash-result-overlay.show .cro-card {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}
.cro-win {
  background:
    radial-gradient(circle at 50% 0%, rgba(110,231,183,0.40), transparent 70%),
    linear-gradient(180deg, #0a2418 0%, #061a10 100%);
  border: 2px solid rgba(110,231,183,0.55);
  box-shadow:
    0 0 60px rgba(110,231,183,0.4),
    0 24px 64px rgba(0,0,0,0.55);
}
.cro-loss {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,86,112,0.40), transparent 70%),
    linear-gradient(180deg, #2a0612 0%, #14040a 100%);
  border: 2px solid rgba(255,86,112,0.55);
  box-shadow:
    0 0 60px rgba(255,86,112,0.4),
    0 24px 64px rgba(0,0,0,0.55);
}

.cro-icon {
  font-size: 56px;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.45));
  display: inline-block;
  animation: croIconPop 0.6s cubic-bezier(.16,1,.3,1);
}
@keyframes croIconPop {
  0%   { transform: scale(0) rotate(-10deg); }
  60%  { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}
.cro-title {
  font-size: 28px; font-weight: 900;
  letter-spacing: 3px;
  margin-bottom: 14px;
}
.cro-win .cro-title {
  background: linear-gradient(135deg, #6ee7b7 0%, #fff 50%, #ffd76a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cro-loss .cro-title {
  background: linear-gradient(135deg, #ff5670 0%, #ffd76a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cro-mult-pill {
  display: inline-block;
  font-size: 38px; font-weight: 900;
  padding: 6px 18px;
  border-radius: 16px;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}
.cro-win .cro-mult-pill {
  background: linear-gradient(135deg, #6ee7b7, #10b981);
  color: #052e1a;
  box-shadow: 0 6px 24px rgba(110,231,183,0.4);
  animation: multPillBump 0.6s cubic-bezier(.16,1,.3,1) 0.15s both;
}
.cro-loss .cro-mult-pill {
  background: linear-gradient(135deg, #ff5670, #c77dff);
  color: #fff;
  box-shadow: 0 6px 24px rgba(255,86,112,0.4);
}
@keyframes multPillBump {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}

.cro-amount-row {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  margin-bottom: 14px;
}
.cro-stake, .cro-payout {
  flex: 1;
  text-align: center;
  padding: 10px 8px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
}
.cro-lbl {
  font-size: 10px;
  color: rgba(201,212,232,0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.cro-val {
  font-size: 20px; font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.cro-val.gold {
  background: linear-gradient(180deg, #fff8d6, #ffd76a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cro-arrow {
  font-size: 22px;
  color: #6ee7b7;
  font-weight: 800;
}

.cro-profit {
  font-size: 16px; font-weight: 800;
  margin-bottom: 14px;
  padding: 6px 14px;
  display: inline-block;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.cro-profit.positive {
  background: rgba(110,231,183,0.15);
  color: #6ee7b7;
}

.cro-loss-amount {
  font-size: 36px; font-weight: 900;
  background: linear-gradient(180deg, #ff5670, #c77dff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}

.cro-sub {
  font-size: 13px;
  color: rgba(201,212,232,0.65);
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}

.cro-close-btn {
  width: 100%;
  padding: 14px;
  font-size: 16px; font-weight: 900;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.5px;
  transition: transform .15s ease;
}
.cro-close-btn:active { transform: scale(0.97); }
.cro-win .cro-close-btn {
  background: linear-gradient(135deg, #6ee7b7, #10b981);
  color: #052e1a;
  box-shadow: 0 6px 22px rgba(110,231,183,0.45);
}
.cro-loss .cro-close-btn {
  background: linear-gradient(135deg, #ff5670, #c77dff);
  color: #fff;
  box-shadow: 0 6px 22px rgba(255,86,112,0.45);
}

/* Confetti on win — reuse particles in card */
.cro-confetti {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.cro-confetti .ccp {
  position: absolute;
  top: -10px;
  width: 6px; height: 12px;
  border-radius: 1px;
  animation: ccpFall 2.4s linear forwards;
}
@keyframes ccpFall {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(440px) rotate(720deg); opacity: 0; }
}

/* Shockwave on loss */
.cro-shockwave {
  position: absolute;
  left: 50%; top: 50%;
  width: 200px; height: 200px;
  margin-left: -100px; margin-top: -100px;
  border-radius: 50%;
  border: 3px solid rgba(255,86,112,0.7);
  animation: shockwaveExpand 0.9s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
@keyframes shockwaveExpand {
  0%   { transform: scale(0); opacity: 1; border-width: 8px; }
  100% { transform: scale(3.5); opacity: 0; border-width: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .crash-rocket-glow.active,
  .rocket-flame-path, .rocket-flame-inner,
  .crash-action-btn.pending::after,
  .cro-icon,
  .cro-mult-pill,
  .cro-shockwave,
  .cro-confetti .ccp { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   MINES game — 5×5 grid + tile reveals
   ══════════════════════════════════════════════════════════ */
#screenMines { padding: 0 !important; }

/* Top info row */
.mines-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 12px 12px 8px;
}
.mi-card {
  padding: 10px 8px;
  text-align: center;
  background: linear-gradient(180deg, #15151f 0%, #0a0a14 100%);
  border: 1px solid var(--border-2);
  border-radius: 12px;
}
.mi-lbl {
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(201,212,232,0.55);
  margin-bottom: 4px;
}
.mi-val {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.mi-mult {
  background: linear-gradient(180deg, #fff 0%, #ffd76a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background .25s ease;
}
.mi-mult.tier-mid {
  background: linear-gradient(180deg, #fff 0%, #ff9b3a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mi-mult.tier-hi {
  background: linear-gradient(180deg, #ff5670 0%, #c77dff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mi-next {
  color: #6ee7b7;
  font-size: 14px;
}
.mi-win {
  color: #ffd76a;
}

/* ── Grid 5×5 ─────────────────────────── */
.mines-grid-wrap {
  position: relative;
  margin: 8px 12px 8px;
  padding: 12px;
  background:
    radial-gradient(circle at 50% -10%, rgba(110,231,183,0.10), transparent 60%),
    radial-gradient(circle at 50% 110%, rgba(199,125,255,0.10), transparent 60%),
    linear-gradient(180deg, #14142b 0%, #06061a 100%);
  border: 1px solid rgba(199,125,255,0.30);
  border-radius: 18px;
  box-shadow:
    0 12px 36px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.mines-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  aspect-ratio: 1 / 1;
}

/* Single tile */
.mines-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: linear-gradient(180deg, #2a1a4f 0%, #1a0f30 50%, #100822 100%);
  border: 1px solid rgba(199,125,255,0.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -2px 0 rgba(0,0,0,0.4);
  transform-style: preserve-3d;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  user-select: none;
  overflow: hidden;
}
.mines-tile:not(.disabled):active {
  transform: scale(0.93);
  border-color: rgba(255,213,106,0.5);
}
.mines-tile.disabled {
  cursor: not-allowed;
}
/* Question mark indicator on closed tiles (visible when round active) */
.mines-tile.closed.active::before {
  content: '?';
  font-size: 22px;
  font-weight: 800;
  color: rgba(255,255,255,0.18);
}
.mines-tile.hover-hint:not(.opened) {
  border-color: rgba(110,231,183,0.5);
  box-shadow: 0 0 0 2px rgba(110,231,183,0.18), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Opened — gem */
.mines-tile.gem {
  animation: tileFlipReveal 0.55s cubic-bezier(.16,1,.3,1) both;
  background: linear-gradient(180deg, #1a3a40 0%, #0a2030 100%);
  border-color: rgba(58,207,255,0.55);
  box-shadow:
    0 0 16px rgba(110,231,183,0.5),
    inset 0 1px 0 rgba(255,255,255,0.15);
}
.mines-tile.gem::after {
  content: '💎';
  font-size: 30px;
  filter: drop-shadow(0 2px 8px rgba(58,207,255,0.7));
  animation: gemPop 0.5s cubic-bezier(.16,1,.3,1) 0.2s backwards;
}
@keyframes tileFlipReveal {
  0%   { transform: rotateY(180deg) scale(0.85); }
  60%  { transform: rotateY(-10deg) scale(1.06); }
  100% { transform: rotateY(0deg) scale(1); }
}
@keyframes gemPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); }
}

/* Opened — bomb (clicked one) */
.mines-tile.bomb-clicked {
  background: radial-gradient(circle, #ff5670 0%, #4a0612 80%);
  border-color: rgba(255,86,112,0.85);
  animation: tileBoom 0.6s cubic-bezier(.16,1,.3,1) both;
  box-shadow:
    0 0 28px rgba(255,86,112,0.85),
    0 0 12px rgba(255,213,106,0.6);
}
.mines-tile.bomb-clicked::after {
  content: '💣';
  font-size: 32px;
  filter: drop-shadow(0 2px 10px rgba(255,86,112,0.9));
  animation: gemPop 0.5s cubic-bezier(.16,1,.3,1) 0.15s backwards;
}
@keyframes tileBoom {
  0%   { transform: scale(0.85) rotateZ(-3deg); }
  35%  { transform: scale(1.18) rotateZ(2deg); }
  60%  { transform: scale(0.95) rotateZ(-1deg); }
  100% { transform: scale(1) rotateZ(0); }
}

/* Other bombs revealed (not clicked) — dimmer */
.mines-tile.bomb-revealed {
  background: linear-gradient(180deg, #2a0c10 0%, #150508 100%);
  border-color: rgba(255,86,112,0.35);
  animation: bombFadeIn 0.4s ease-out 0.1s both;
}
.mines-tile.bomb-revealed::after {
  content: '💣';
  font-size: 24px;
  opacity: 0.55;
  filter: grayscale(0.3);
}
@keyframes bombFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Locked overlay during reveal animation (blocks double-clicks) */
.mines-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
}
.mines-overlay.busy { pointer-events: auto; }

/* Status line */
.mines-status {
  text-align: center;
  font-size: 13px;
  color: rgba(201,212,232,0.7);
  margin: 0 12px 12px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
}
.mines-status.win {
  color: #6ee7b7;
  font-weight: 700;
  background: rgba(110,231,183,0.10);
  border: 1px solid rgba(110,231,183,0.25);
}
.mines-status.loss {
  color: #ff5670;
  font-weight: 700;
  background: rgba(255,86,112,0.10);
  border: 1px solid rgba(255,86,112,0.25);
}

/* ── Controls (reuse Crash patterns) ── */
.mines-controls {
  padding: 0 12px;
  margin-bottom: 14px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.mines-bombs-row {
  background: linear-gradient(180deg, #15151f 0%, #0a0a14 100%);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 12px;
}
.mbr-label {
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(201,212,232,0.6);
  margin-bottom: 8px;
}
.mbr-presets {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  margin-bottom: 6px;
}
.mbp {
  padding: 9px 0;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-2);
  color: rgba(255,255,255,0.85);
  font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}
.mbp:active { transform: scale(0.95); }
.mbp.active {
  background: linear-gradient(135deg, #ff5670, #c77dff);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(199,125,255,0.45);
}
.mbr-hint {
  font-size: 11px;
  color: rgba(201,212,232,0.55);
  text-align: center;
  margin-top: 4px;
}

/* History strip */
.mines-history {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.mh-cell {
  padding: 8px 4px;
  border-radius: 8px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  text-align: center;
  font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.mh-cell.win  { color: #6ee7b7; border-color: rgba(110,231,183,0.3); }
.mh-cell.bust { color: #ff5670; border-color: rgba(255,86,112,0.3); }
.mh-cell .mh-stake {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: rgba(201,212,232,0.55);
  margin-top: 2px;
}

/* Confetti reuse for mines win */
.mines-win-overlay .cro-icon { font-size: 64px; }
.mines-bust-overlay .cro-icon { font-size: 64px; animation: bustIconShake 0.5s ease-in-out; }
@keyframes bustIconShake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-15deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mines-tile.gem,
  .mines-tile.gem::after,
  .mines-tile.bomb-clicked,
  .mines-tile.bomb-clicked::after,
  .mines-tile.bomb-revealed { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   Result overlays — typography polish (v=84)
   ══════════════════════════════════════════════════════════ */

/* Все элементы карточки результата теперь над shockwave (на z=2),
   а сам shockwave уходит в z=0 чтобы не перекрывать текст. */
.cro-card { padding: 36px 22px 24px !important; }
.cro-card > * { position: relative; z-index: 2; }
.cro-shockwave {
  z-index: 0 !important;
  width: 280px !important;
  height: 280px !important;
  margin-left: -140px !important;
  margin-top: -140px !important;
}

/* Иконка крупнее, с большей нижней дистанцией */
.cro-icon {
  font-size: 64px !important;
  margin-bottom: 14px !important;
  line-height: 1;
}

/* Заголовок: уменьшим letter-spacing, добавим больше воздуха снизу */
.cro-title {
  font-size: 26px !important;
  letter-spacing: 2.5px !important;
  margin-bottom: 18px !important;
  line-height: 1.1;
}

/* Loss amount: огромный, чёткий, выделенный, с собственным box-ом */
.cro-loss-amount {
  font-size: 48px !important;
  line-height: 1.1 !important;
  margin: 4px 0 18px !important;
  font-weight: 900;
  letter-spacing: -1px;
}

/* Win amount block — больше места между mult-pill и amount-row */
.cro-mult-pill { margin-bottom: 22px !important; }
.cro-amount-row { margin-bottom: 16px !important; }

/* Sub-text: чуть крупнее + лучше контраст для читаемости */
.cro-sub {
  font-size: 13.5px !important;
  color: rgba(201,212,232,0.78) !important;
  margin-bottom: 22px !important;
  line-height: 1.4;
}
.cro-sub b, .cro-sub span {
  color: #fff;
  font-weight: 800;
}

/* Loss-card: более «графичный» взгляд — два уровня обводки + soft glow */
.cro-loss {
  padding: 36px 22px 24px;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,86,112,0.45), transparent 65%),
    linear-gradient(180deg, #2e0814 0%, #14040a 100%) !important;
  border: 2px solid rgba(255,86,112,0.55) !important;
  box-shadow:
    0 0 60px rgba(255,86,112,0.40),
    0 0 0 1px rgba(255,86,112,0.18),
    0 24px 64px rgba(0,0,0,0.6) !important;
}

/* Win-card consistent */
.cro-win {
  padding: 36px 22px 24px;
}

/* Shockwave — мягче и быстрее, чтобы не отвлекало от текста */
.cro-shockwave {
  border: 2px solid rgba(255,86,112,0.55) !important;
  animation: shockwaveExpand 0.7s cubic-bezier(.16,1,.3,1) forwards !important;
}
@keyframes shockwaveExpand {
  0%   { transform: scale(0); opacity: 0.85; border-width: 6px; }
  60%  { opacity: 0.4; }
  100% { transform: scale(2.4); opacity: 0; border-width: 1px; }
}

/* Bomb-shake helper text больше не нужен */
.mines-bust-overlay .cro-sub {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px !important;
}

/* Mobile-узкое: уменьшим типографику */
@media (max-width: 380px) {
  .cro-title { font-size: 22px !important; letter-spacing: 1.8px !important; }
  .cro-loss-amount { font-size: 42px !important; }
  .cro-shockwave { width: 240px !important; height: 240px !important;
    margin-left: -120px !important; margin-top: -120px !important; }
}

/* ══════════════════════════════════════════════════════════
   LIVE WIN FEED — replaces Top
   ══════════════════════════════════════════════════════════ */
#screenFeed { padding: 0 !important; }

/* Hero strip */
.feed-hero {
  position: relative;
  padding: 22px 18px 18px;
  margin: 0 0 14px;
  border-radius: 0 0 22px 22px;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(255,86,112,0.20);
}
.feed-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,86,112,0.40), transparent 60%),
    radial-gradient(circle at 80% 100%, rgba(255,213,106,0.28), transparent 60%),
    linear-gradient(180deg, #1a0a14 0%, #06020a 100%);
  z-index: -1;
}
.feed-hero-content { text-align: center; }
.feed-hero-pulse {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 2px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,86,112,0.18);
  color: #ff8aa3;
  border: 1px solid rgba(255,86,112,0.38);
  margin-bottom: 10px;
}
.fhp-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff5670;
  box-shadow: 0 0 0 0 rgba(255,86,112,0.6);
  animation: fhpDotPulse 1.4s ease-in-out infinite;
}
@keyframes fhpDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,86,112,0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(255,86,112,0); }
}
.feed-hero-title {
  font-size: 28px; font-weight: 900;
  background: linear-gradient(135deg, #ffd76a 0%, #ff5670 50%, #c77dff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.feed-hero-sub {
  font-size: 12px;
  color: rgba(201,212,232,0.70);
}

/* Stats row */
.feed-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 12px 12px;
}
.fs-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #15151f 0%, #0a0a14 100%);
  border: 1px solid var(--border-2);
  border-radius: 12px;
}
.fs-icon { font-size: 22px; flex-shrink: 0; }
.fs-text { min-width: 0; flex: 1; }
.fs-label {
  font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(201,212,232,0.55);
  margin-bottom: 2px;
}
.fs-val {
  font-size: 16px; font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Feed card */
.feed-card {
  margin: 0 12px 14px;
  background: linear-gradient(180deg, #14142a 0%, #08081a 100%);
  border: 1px solid rgba(255,86,112,0.22);
  border-radius: 16px;
  overflow: hidden;
}
.feed-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.fch-title {
  font-size: 13px; font-weight: 800;
  background: linear-gradient(135deg, #ffd76a, #ff5670);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fch-refresh {
  cursor: pointer;
  font-size: 16px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(201,212,232,0.7);
  transition: transform .25s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.fch-refresh:hover { background: rgba(255,213,106,0.10); color: #ffd76a; }
.fch-refresh.spinning { animation: fchSpin .7s linear; }
@keyframes fchSpin { to { transform: rotate(360deg); } }

/* Feed rows */
.feed-list {
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
}
.feed-list::-webkit-scrollbar { width: 4px; }
.feed-list::-webkit-scrollbar-thumb { background: rgba(255,86,112,0.3); border-radius: 2px; }
.feed-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 10px;
  margin: 4px 0;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  transition: background .2s ease;
  position: relative;
  overflow: hidden;
}
.feed-row.tier-mid { border-color: rgba(255,213,106,0.35); }
.feed-row.tier-hi  { border-color: rgba(255,86,112,0.45); background: rgba(255,86,112,0.08); }
.feed-row.tier-mega {
  border-color: rgba(199,125,255,0.6);
  background:
    radial-gradient(circle at 0% 50%, rgba(199,125,255,0.18), transparent 70%),
    rgba(255,255,255,0.02);
  box-shadow: 0 4px 16px rgba(199,125,255,0.18);
}
.feed-row.tier-mega::before {
  content: 'MEGA';
  position: absolute;
  top: 6px; right: 8px;
  font-size: 9px; font-weight: 900;
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #c77dff, #ff5670);
  color: #fff;
  letter-spacing: 1.2px;
  z-index: 2;
}
.feed-row.is-new {
  animation: feedRowFlash 1.6s ease-out;
}
@keyframes feedRowFlash {
  0%   { background: rgba(255,213,106,0.30); transform: translateX(-12px); opacity: 0; }
  20%  { transform: translateX(0); opacity: 1; }
  100% { /* settles to natural state */ }
}

.fr-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: linear-gradient(135deg, #2a1a4f 0%, #1a0f30 100%);
  border: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.fr-icon.crash { background: linear-gradient(135deg, #ff5670, #c77dff); }
.fr-icon.crash-nft {
  background: linear-gradient(135deg, #c77dff, #ff5fb4);
  overflow: hidden;     /* preview-картинка должна обрезаться по rounded corners */
  padding: 0;
}
.fr-icon.crash-nft img { display: block; }
.fr-icon.mines { background: linear-gradient(135deg, #2d3142, #4a5568); }
.fr-icon.slots { background: linear-gradient(135deg, #ffd76a, #ff9b3a); }
.fr-icon.bonuska { background: linear-gradient(135deg, #ff5670, #ffd76a); }
.fr-icon.wheel { background: linear-gradient(135deg, #c77dff, #7b2cbf); }
.fr-icon.lottery { background: linear-gradient(135deg, #6ee7b7, #10b981); }

.fr-body { min-width: 0; }
.fr-line1 {
  font-size: 13px; font-weight: 700;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.fr-line1 b { color: #ffd76a; font-weight: 800; }
.fr-line2 {
  font-size: 10.5px;
  color: rgba(201,212,232,0.55);
}
.fr-line2 .fr-mult {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(255,213,106,0.15);
  color: #ffd76a;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.fr-line2 .fr-mult.hi  { background: rgba(255,86,112,0.20); color: #ff8aa3; }
.fr-line2 .fr-mult.mega { background: rgba(199,125,255,0.25); color: #d6a4ff; }

.fr-amount {
  font-size: 16px; font-weight: 900;
  color: #6ee7b7;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.feed-row.tier-mega .fr-amount {
  background: linear-gradient(180deg, #ffd76a, #ff5670);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .fhp-dot,
  .feed-row.is-new,
  .fch-refresh.spinning { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   DESIGN REFRESH v=91 — top bar / tabs / slots / cards / toasts
   ══════════════════════════════════════════════════════════ */

/* ── 1. TOP BAR — premium feel ──────────────────────────── */
.topbar {
  background:
    radial-gradient(ellipse at top, rgba(255,213,106,0.05), transparent 50%),
    linear-gradient(180deg, rgba(15,12,30,0.98), rgba(7,7,13,0.95)) !important;
  border-bottom: 1px solid rgba(255,213,106,0.18) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.4);
  position: relative;
}
/* Subtle gold underline on top bar */
.topbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,213,106,0.45), transparent);
  pointer-events: none;
}
.brand {
  position: relative;
  z-index: 2;
}
.brand-mark {
  width: 34px !important;
  height: 34px !important;
  font-size: 18px !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 30% 30%, #fff8d6, #ffd76a 50%, #c97a1f 100%) !important;
  box-shadow:
    0 4px 14px rgba(255,213,106,0.55),
    0 0 0 1px rgba(255,255,255,0.12),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 4px rgba(0,0,0,0.3) !important;
  position: relative;
  overflow: hidden;
}
.brand-mark::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(115deg, transparent 45%, rgba(255,255,255,0.45) 50%, transparent 55%);
  transform: translateX(-100%);
  animation: brandShine 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes brandShine {
  0%, 70% { transform: translateX(-100%); }
  85%     { transform: translateX(100%); }
  100%    { transform: translateX(100%); }
}
.brand-text {
  font-size: 13px !important;
  letter-spacing: 1.6px !important;
  background: linear-gradient(180deg, #fff8d6 0%, #ffd76a 60%, #c97a1f 100%) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 0 12px rgba(255,213,106,0.25);
}

/* ── 2. TAB BAR — better active state + tap feedback ──── */
.tab {
  position: relative;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
  isolation: isolate;
  transition: background .2s ease, color .2s ease, transform .12s ease !important;
}
.tab:active:not(.active) {
  transform: scale(0.94) !important;
  background: rgba(255,213,106,0.08) !important;
}
.tab.active {
  background:
    radial-gradient(circle at 50% 100%, rgba(255,213,106,0.45), transparent 70%),
    linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
  box-shadow:
    0 6px 18px rgba(255,213,106,0.55),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}
.tab.active .t-icon {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
/* Ripple on tap */
.tab::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 120%; height: 120%;
  margin-left: -60%; margin-top: -60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,213,106,0.4), transparent 70%);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s ease, opacity 0.45s ease;
}
.tab:active::before {
  transform: scale(1);
  opacity: 0;
  transition: transform 0.0s, opacity 0s;
  animation: tabRipple 0.45s ease-out;
}
@keyframes tabRipple {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Tabs container — subtle inner shadow */
.tabs {
  background:
    linear-gradient(180deg, rgba(15,12,30,0.98), rgba(7,7,13,0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,213,106,0.08) !important;
}

/* ── 3. CARD — unified shadow scale + hover lift ──── */
.card {
  transition: transform .25s ease, box-shadow .3s ease;
}
.card:not(:active) {
  /* Subtle lift on hover (только desktop) */
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(-1px);
  }
}
.card:active {
  transform: scale(0.998);
}

/* ── 4. SLOT MACHINE — refresh bezel ──────────────── */
.machine {
  border: 2px solid rgba(255,213,106,0.32) !important;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,213,74,.20), transparent 60%),
    radial-gradient(circle at 50% 110%, rgba(255,86,112,0.12), transparent 70%),
    linear-gradient(180deg, #1f1d3a 0%, #0a0a14 100%) !important;
}
.machine::before {
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(255,213,74,.85), transparent) !important;
}
/* Add bottom edge highlight */
.machine::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,86,112,0.5), transparent);
  pointer-events: none;
}

/* ── 5. HUB tiles — 3D press feedback ──────────── */
.hub-game-tile,
.hub-feature-tile {
  -webkit-tap-highlight-color: transparent;
  transform-style: preserve-3d;
  transition: transform .15s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.hub-game-tile:active {
  transform: perspective(600px) rotateX(2deg) scale(0.985);
}
.hub-feature-tile:active {
  transform: perspective(400px) rotateX(3deg) scale(0.95);
}
.hub-feature-tile:active .hft-icon-wrap {
  transform: scale(0.92) translateZ(-4px);
}
.hft-icon-wrap {
  transition: transform .15s ease;
}

/* ── 6. TOAST — game-themed variants ────────────── */
.toast {
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 13px 20px !important;
  letter-spacing: 0.2px;
  border-radius: 14px !important;
  background:
    radial-gradient(ellipse at top, rgba(255,255,255,0.06), transparent 60%),
    rgba(20,20,40,.96) !important;
  border-width: 1.5px !important;
  box-shadow:
    0 12px 36px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.05) inset !important;
}
.toast[data-type="success"] {
  background:
    radial-gradient(ellipse at top, rgba(110,231,183,0.20), transparent 60%),
    linear-gradient(135deg, rgba(16,185,129,0.20), rgba(20,20,40,.96)) !important;
  border-color: rgba(110,231,183,0.55) !important;
}
.toast[data-type="error"] {
  background:
    radial-gradient(ellipse at top, rgba(255,86,112,0.22), transparent 60%),
    linear-gradient(135deg, rgba(239,68,68,0.22), rgba(20,20,40,.96)) !important;
  border-color: rgba(255,86,112,0.55) !important;
}

/* ── 7. SETTINGS — premium iOS-style toggles ─────── */
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.setting-row:last-child { border-bottom: none; }
.setting-info { flex: 1; min-width: 0; padding-right: 12px; }
.setting-label {
  font-size: 14px; font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}
.setting-sub {
  font-size: 11.5px;
  color: rgba(201,212,232,0.55);
}
/* iOS toggle */
.toggle-switch {
  position: relative;
  width: 50px; height: 28px;
  background: rgba(255,255,255,0.10);
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s ease;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.toggle-switch input {
  position: absolute; opacity: 0; pointer-events: none;
}
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  background: linear-gradient(180deg, #fff, #e8e8f0);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.toggle-switch.checked {
  background: linear-gradient(135deg, #6ee7b7, #10b981);
}
.toggle-switch.checked::after {
  transform: translateX(22px);
  background: linear-gradient(180deg, #fff, #d8f5e8);
}

/* ── 8. EMPTY STATES — better typography ─────────── */
.empty,
.empty-rich {
  text-align: center;
}
.empty-rich {
  padding: 36px 16px !important;
}
.empty-rich .empty-icon {
  font-size: 56px !important;
  filter: drop-shadow(0 4px 12px rgba(255,213,106,0.15));
  margin-bottom: 14px !important;
  opacity: 0.85 !important;
  animation: emptyIconFloat 3s ease-in-out infinite;
}
@keyframes emptyIconFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.empty-rich .empty-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #fff, #c9d4e8) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent !important;
  margin-bottom: 6px !important;
}
.empty-rich .empty-sub {
  font-size: 13px !important;
  color: rgba(201,212,232,0.55) !important;
  max-width: 280px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ── 9. WALLET tx-list — categorized icons ────────── */
.wh-item {
  display: grid !important;
  grid-template-columns: 36px 1fr auto;
  gap: 12px !important;
  align-items: center;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 6px;
  transition: background .2s ease;
}
.wh-item:hover { background: rgba(255,255,255,0.05); }
.wh-item::before {
  content: '🪙';
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(255,213,106,0.15), rgba(199,125,255,0.10));
  font-size: 18px;
  border: 1px solid rgba(255,213,106,0.20);
  flex-shrink: 0;
}
/* Icon variants by reason — applied via data-reason attribute (если рендер обновим) */
.wh-item[data-reason^="crash"]::before {
  content: '🚀';
  background: linear-gradient(135deg, rgba(255,86,112,0.15), rgba(199,125,255,0.10));
  border-color: rgba(255,86,112,0.30);
}
.wh-item[data-reason^="mines"]::before {
  content: '💣';
  background: linear-gradient(135deg, rgba(45,49,66,0.6), rgba(74,85,104,0.4));
  border-color: rgba(255,255,255,0.10);
}
.wh-item[data-reason^="slot"]::before {
  content: '🎰';
  background: linear-gradient(135deg, rgba(255,213,106,0.15), rgba(255,155,58,0.10));
  border-color: rgba(255,213,106,0.30);
}
.wh-item[data-reason="wheel_of_luck"]::before {
  content: '🎁';
  background: linear-gradient(135deg, rgba(199,125,255,0.18), rgba(123,44,191,0.10));
  border-color: rgba(199,125,255,0.30);
}
.wh-item[data-reason^="topup"]::before {
  content: '💳';
  background: linear-gradient(135deg, rgba(58,207,255,0.18), rgba(0,153,204,0.10));
  border-color: rgba(58,207,255,0.30);
}
.wh-item[data-reason^="admin"]::before {
  content: '👑';
  background: linear-gradient(135deg, rgba(255,213,106,0.20), rgba(255,86,112,0.10));
  border-color: rgba(255,213,106,0.40);
}
.wh-item[data-reason^="daily"]::before,
.wh-item[data-reason^="weekly_quest"]::before,
.wh-item[data-reason="achievement"]::before {
  content: '🎯';
  background: linear-gradient(135deg, rgba(110,231,183,0.18), rgba(16,185,129,0.10));
  border-color: rgba(110,231,183,0.30);
}
.wh-item[data-reason="returning_bonus"]::before {
  content: '👋';
  background: linear-gradient(135deg, rgba(255,213,106,0.20), rgba(110,231,183,0.10));
  border-color: rgba(255,213,106,0.30);
}

/* ── 10. SCROLLBAR на webkit — премиум ────────── */
#screens::-webkit-scrollbar { width: 6px; }
#screens::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255,213,106,0.35), rgba(255,86,112,0.35));
  border-radius: 3px;
}
#screens::-webkit-scrollbar-track {
  background: transparent;
}

/* ── 11. M-COIN — slight 3D tilt-on-hover (icons на m-coin) ── */
.m-coin {
  transition: transform .2s ease, filter .2s ease;
}
.b-item.ms:hover .m-coin {
  transform: rotate(-8deg) scale(1.05);
}

/* ── 12. SCREEN-ENTER animation ─────────────── */
.screen.active {
  animation: screenFadeIn 0.35s ease-out;
}
@keyframes screenFadeIn {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── 13. BUTTON — better :focus-visible (a11y) ── */
.btn:focus-visible,
.crash-action-btn:focus-visible,
.cro-close-btn:focus-visible {
  outline: 2px solid rgba(255,213,106,0.7);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark::before,
  .empty-rich .empty-icon,
  .screen.active,
  .tab:active::before { animation: none !important; }
}

/* ── 14. SWITCH toggle — premium iOS-style override ── */
.switch {
  width: 50px !important;
  height: 30px !important;
}
.switch-slider {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.4),
    inset 0 -1px 0 rgba(255,255,255,0.05) !important;
  transition: background .25s ease, border-color .25s ease !important;
}
.switch-slider::before {
  height: 24px !important;
  width: 24px !important;
  left: 3px !important;
  bottom: 3px !important;
  background: linear-gradient(180deg, #ffffff 0%, #e8e8f0 100%) !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(0,0,0,0.05) !important;
}
.switch input:checked + .switch-slider {
  background: linear-gradient(135deg, #6ee7b7 0%, #10b981 100%) !important;
  border-color: rgba(110,231,183,0.4) !important;
  box-shadow:
    0 0 12px rgba(110,231,183,0.35),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
.switch input:checked + .switch-slider::before {
  transform: translateX(20px) !important;
  background: linear-gradient(180deg, #ffffff 0%, #d8f5e8 100%) !important;
}
.switch:active .switch-slider::before {
  width: 28px !important;
}
.setting-row {
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.setting-row:last-child { border-bottom: none !important; }
.setting-row:hover {
  background: rgba(255,213,106,0.02);
  margin: 0 -14px;
  padding-left: 14px !important;
  padding-right: 14px !important;
  border-radius: 8px;
}
.setting-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.2px;
}
.setting-sub {
  font-size: 11.5px !important;
  color: rgba(201,212,232,0.55) !important;
}
.speed-select {
  background: rgba(0,0,0,0.4) !important;
  border: 1px solid rgba(255,213,106,0.3) !important;
  color: #ffd76a !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath d='M3 4.5l3 3 3-3' stroke='%23ffd76a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 28px !important;
}

/* ── 15. JACKPOT-banner — кроме скрытия — на всякий случай fallback ── */
.bonus-banner, .countdown-banner, .jackpot-banner { display: none !important; }

/* ══════════════════════════════════════════════════════════
   DESIGN REFRESH v=92 — деeper polish wave
   ══════════════════════════════════════════════════════════ */

/* ── 1. SLOT RESULT title — animated, tier-coloured ── */
.sp-result {
  padding: 12px 0 16px !important;
  min-height: 60px !important;
}
.sp-result-title {
  font-size: 20px !important;
  letter-spacing: 0.4px;
  transition: color .3s ease, text-shadow .3s ease;
}
.sp-result-title.win {
  font-size: 22px !important;
  background: linear-gradient(180deg, #fff8d6, #ffd76a 50%, #ff9b3a 100%) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 12px rgba(255,213,106,0.55));
  animation: spWinPulse 0.6s ease-out;
}
.sp-result-title.jackpot {
  font-size: 26px !important;
  background: linear-gradient(135deg, #ffd76a 0%, #ff5670 50%, #c77dff 100%) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: 1.5px !important;
  filter: drop-shadow(0 0 18px rgba(255,86,112,0.65));
  animation: spJackpotPulse 1.2s ease-in-out infinite, tuShake 0.6s ease-in-out;
}
@keyframes spWinPulse {
  0%   { transform: scale(0.85); opacity: 0; }
  50%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes spJackpotPulse {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(255,86,112,0.65)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 28px rgba(255,213,106,0.95)); transform: scale(1.04); }
}
.sp-result-sub {
  font-size: 13px !important;
  color: rgba(255,255,255,0.75) !important;
  margin-top: 6px !important;
  font-variant-numeric: tabular-nums;
}
.sp-result-sub b { color: #ffd76a; }

/* Spin button: more polished */
.spin-btn-big {
  position: relative;
  overflow: hidden;
  font-size: 18px !important;
  letter-spacing: 0.8px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.35), transparent 60%),
    linear-gradient(135deg, #ffd76a 0%, #ff9b3a 100%) !important;
  box-shadow:
    0 6px 22px rgba(255,213,106,0.55),
    0 0 0 1px rgba(255,255,255,0.15),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 4px rgba(0,0,0,0.18) !important;
}
.spin-btn-big::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%);
  transform: translateX(-150%);
  transition: transform .8s ease;
  pointer-events: none;
}
.spin-btn-big:active::before { transform: translateX(150%); }

/* ── 2. PRESETS (csp / mbp) — spring + better active ── */
.csp, .mbp {
  position: relative;
  transition: transform 0.15s cubic-bezier(.16,1.8,.3,1), background 0.2s, box-shadow 0.2s !important;
}
.csp:active:not(.active),
.mbp:active:not(.active) {
  transform: scale(0.88) !important;
  background: rgba(255,213,106,0.12) !important;
}
.csp.active {
  background: linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
  color: #1a1410 !important;
  border-color: transparent !important;
  box-shadow:
    0 4px 12px rgba(255,213,106,0.45),
    inset 0 1px 0 rgba(255,255,255,0.4) !important;
  font-weight: 800 !important;
}
.csp.active::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 11px;
  border: 2px solid rgba(255,213,106,0.4);
  animation: cspActivePulse 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cspActivePulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.06); }
}

/* ── 3. HUB HERO — deeper background animation ── */
.hub-hero-bg {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,86,112,0.45), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(199,125,255,0.40), transparent 55%),
    radial-gradient(circle at 50% 90%, rgba(58,207,255,0.25), transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(255,213,106,0.10), transparent 70%),
    linear-gradient(180deg, #1a0a25 0%, #0a0410 50%, #000 100%) !important;
  animation: hubHeroDrift 12s ease-in-out infinite, hubHeroPulse 8s ease-in-out infinite !important;
}
@keyframes hubHeroDrift {
  0%, 100% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  50%      { background-position: 5% 5%, -5% -5%, 5% -5%, -5% 5%, 0 0; }
}

/* Hero title — extra emphasis */
.hht-1 {
  font-size: 40px !important;
  letter-spacing: 3px !important;
  background:
    linear-gradient(180deg, #fffacd 0%, #ffd76a 40%, #ff9b3a 75%, #c97a1f 100%) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 4px 14px rgba(255,213,106,0.45));
  position: relative;
}
.hht-2 {
  letter-spacing: 8px !important;
  text-shadow: 0 0 14px rgba(255,213,106,0.30);
}
.hub-hero-stats {
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.hhs-v {
  font-size: 20px !important;
}

/* ── 4. GAME TILES LIVE — animated gradient border ── */
.hub-game-tile.live {
  border-color: rgba(255,213,106,0.5) !important;
  position: relative;
}
.hub-game-tile.live::after {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: 18px;
  background: conic-gradient(
    from 0deg,
    rgba(255,213,106,0.1),
    rgba(255,86,112,0.6),
    rgba(199,125,255,0.6),
    rgba(255,213,106,0.6),
    rgba(255,213,106,0.1)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: liveBorderRotate 6s linear infinite;
  pointer-events: none;
}
@keyframes liveBorderRotate {
  to { transform: rotate(360deg); }
}

/* Game-tile art shimmer on hover */
.hub-game-tile .hgt-art-emoji {
  transition: transform .25s ease, filter .25s ease;
}
.hub-game-tile:active .hgt-art-emoji {
  transform: scale(1.1) rotate(-4deg);
}

/* Soon tiles — make them feel "locked" */
.hub-game-tile.soon {
  position: relative;
}
.hub-game-tile.soon::before {
  background: linear-gradient(115deg, transparent 50%, rgba(255,255,255,0.05) 60%, transparent 70%) !important;
}

/* ── 5. NOTIFICATION BELL — shake + pulse-dot ── */
.bell-btn {
  position: relative;
  transition: transform .2s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bell-btn:active { transform: scale(0.9) rotate(-8deg); }
.bell-btn.has-unread .bell-icon {
  display: inline-block;
  transform-origin: 50% 0;
  animation: bellShake 1.6s ease-in-out infinite;
}
@keyframes bellShake {
  0%, 80%, 100% { transform: rotate(0); }
  82% { transform: rotate(10deg); }
  84% { transform: rotate(-8deg); }
  86% { transform: rotate(6deg); }
  88% { transform: rotate(-4deg); }
  90% { transform: rotate(2deg); }
}
.bell-dot {
  background: linear-gradient(135deg, #ff5670, #ff8aa3) !important;
  box-shadow: 0 0 8px rgba(255,86,112,0.7) !important;
  border: 2px solid rgba(7,7,13,0.95) !important;
}
.bell-btn.has-unread .bell-dot {
  animation: bellDotPulse 1.4s ease-in-out infinite;
}
@keyframes bellDotPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(255,86,112,0.7); }
  50%      { transform: scale(1.25); box-shadow: 0 0 14px rgba(255,86,112,0.95); }
}

/* ── 6. AVATARS — gradient by hash ── */
.avatar,
.avatar-lg,
.podium-avatar,
.profile-head .avatar {
  position: relative;
  background: linear-gradient(135deg, #ff5670 0%, #c77dff 100%);
  color: #fff !important;
  font-weight: 900 !important;
  box-shadow:
    0 4px 14px rgba(199,125,255,0.35),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
.avatar::after,
.avatar-lg::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.08));
  pointer-events: none;
}
/* Variant flavors via parent hash — applied in JS via data-avatar-flavor */
[data-avatar-flavor="0"] .avatar,
[data-avatar-flavor="0"] { background: linear-gradient(135deg, #ff5670, #ffd76a); }
[data-avatar-flavor="1"] .avatar,
[data-avatar-flavor="1"] { background: linear-gradient(135deg, #c77dff, #7b2cbf); }
[data-avatar-flavor="2"] .avatar,
[data-avatar-flavor="2"] { background: linear-gradient(135deg, #6ee7b7, #10b981); }
[data-avatar-flavor="3"] .avatar,
[data-avatar-flavor="3"] { background: linear-gradient(135deg, #3acfff, #0089b8); }
[data-avatar-flavor="4"] .avatar,
[data-avatar-flavor="4"] { background: linear-gradient(135deg, #ff9b3a, #ff5670); }
[data-avatar-flavor="5"] .avatar,
[data-avatar-flavor="5"] { background: linear-gradient(135deg, #ffd76a, #ff5670); }

/* ── 7. CARD-TITLE — animated gold underline (override) ── */
.card-title {
  position: relative;
  font-size: 15px !important;
  letter-spacing: 0.3px;
}
.card-title::after {
  width: 36px !important;
  height: 2px !important;
  background: linear-gradient(90deg, #ffd76a 0%, transparent 100%) !important;
  bottom: -8px !important;
  border-radius: 2px;
  animation: cardTitleSlide 5s ease-in-out infinite;
}
@keyframes cardTitleSlide {
  0%, 100% { width: 36px; opacity: 0.7; }
  50%      { width: 64px; opacity: 1; }
}

/* ── 8. MINES tiles — premium closed-state + sheen ── */
.mines-tile.closed {
  background:
    radial-gradient(circle at 30% 30%, rgba(199,125,255,0.18), transparent 60%),
    linear-gradient(180deg, #2a1a4f 0%, #1a0f30 50%, #0a0524 100%) !important;
  border: 1px solid rgba(199,125,255,0.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -2px 0 rgba(0,0,0,0.45),
    0 2px 6px rgba(0,0,0,0.3) !important;
  position: relative;
  overflow: hidden;
}
.mines-tile.closed::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,213,106,0.08) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform .5s ease;
  pointer-events: none;
}
.mines-tile.closed:active:not(.disabled)::after { transform: translateX(100%); }
.mines-tile.closed.active::before {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: rgba(255,213,106,0.20) !important;
  text-shadow: 0 0 8px rgba(255,213,106,0.15);
}
.mines-tile.closed:not(.disabled):hover {
  border-color: rgba(255,213,106,0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 4px 14px rgba(255,213,106,0.20) !important;
}

/* ── 9. CRASH stake controls — better feel ── */
.crash-stake-input {
  background: rgba(0,0,0,0.55) !important;
  border: 1px solid rgba(255,213,106,0.35) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px;
  color: #ffd76a !important;
  text-shadow: 0 0 8px rgba(255,213,106,0.3);
}
.crash-stake-input:focus {
  border-color: #ffd76a !important;
  box-shadow: 0 0 0 3px rgba(255,213,106,0.22) !important;
  background: rgba(255,213,106,0.06) !important;
}
.crash-stake-btn {
  background: linear-gradient(180deg, #1f1d3a, #14122a) !important;
  border-color: rgba(255,213,106,0.20) !important;
  font-size: 14px !important;
  color: #ffd76a !important;
}
.crash-stake-btn:active {
  transform: scale(0.92) !important;
  background: linear-gradient(180deg, #2a2548, #1a172e) !important;
  border-color: rgba(255,213,106,0.5) !important;
}

/* ── 10. DRAWER (notif sidebar) — premium polish ── */
.drawer-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,213,106,0.10), transparent 60%),
    linear-gradient(180deg, #1a1a2f 0%, #0a0a14 100%) !important;
  border-left: 1px solid rgba(255,213,106,0.25) !important;
  box-shadow: -12px 0 36px rgba(0,0,0,0.5) !important;
}
.drawer-header {
  padding: 16px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.drawer-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #fff, #ffd76a) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent !important;
}
.drawer-action {
  font-size: 11px !important;
  color: rgba(201,212,232,0.65) !important;
  border: 1px solid rgba(255,213,106,0.20) !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  background: rgba(255,213,106,0.04) !important;
}

/* ── 11. SKELETON loading ── */
.skel {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,213,106,0.10) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s linear infinite;
  border-radius: 8px;
  display: block;
}
.skel-block { height: 60px; margin: 8px 0; }
.skel-line { height: 14px; margin: 6px 0; }
.skel-circle { border-radius: 50%; aspect-ratio: 1; }
@keyframes skelShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── 12. BIG-WIN counter — more impact + camera shake on screen ── */
.big-win-counter {
  font-variant-numeric: tabular-nums;
  font-weight: 900 !important;
  text-shadow: 0 4px 16px rgba(255,213,106,0.4);
}
.big-win-counter .bwc-num {
  font-size: 56px !important;
}
.big-win-counter.tier-mega .bwc-num {
  animation: bigWinMegaPulse 0.6s cubic-bezier(.16,1,.3,1);
}
@keyframes bigWinMegaPulse {
  0%   { transform: scale(0.6); opacity: 0; }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1); opacity: 1; }
}
/* Screen-shake on mega win */
.slot-panel.big-win-pulse {
  animation: panelShake 0.5s ease-in-out;
}
@keyframes panelShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* ── 13. ONBOARDING slides — animated emojis ── */
.onboard-emoji {
  font-size: 64px !important;
  display: block;
  margin: 0 auto 16px !important;
  filter: drop-shadow(0 6px 18px rgba(255,213,106,0.35));
  animation: onboardEmojiFloat 3s ease-in-out infinite;
}
@keyframes onboardEmojiFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(-3deg); }
}
.onboard-title {
  background: linear-gradient(135deg, #fff, #ffd76a) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent !important;
  font-size: 22px !important;
  margin-bottom: 12px !important;
}

/* ── 14. CRASH ARENA — extra polish ── */
.crash-mult-display {
  z-index: 3 !important;
}
.cmd-num {
  font-variant-numeric: tabular-nums;
}

/* ── 15. WALLET balance hero — extra polish ── */
.wtb-value {
  font-size: 44px !important;
  letter-spacing: -1.5px;
}
.wtb-label {
  font-size: 11.5px !important;
  letter-spacing: 1.5px !important;
}

/* ── 16. M-PACK tiles — premium feel ── */
.m-pack {
  transition: transform .15s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}
.m-pack:active {
  transform: scale(0.985);
}
.m-pack.best {
  border-color: rgba(255,213,106,0.55) !important;
  box-shadow: 0 6px 22px rgba(255,213,106,0.25) !important;
}
/* Best-pack: ВАЖНО — overflow:visible чтобы badge мог торчать сверху,
   и сам badge сидит «под» правильным углом, не пересекаясь с цифрами M. */
.m-pack.best {
  overflow: visible !important;
  margin-top: 16px;
}
.m-pack.best::before {
  /* Отключаем общий shimmer ::before на best-плитке (он использовал
     overflow:hidden parent для клиппинга — у нас visible). */
  display: none !important;
}
.m-pack.best::after {
  content: '⭐ ВЫГОДНЕЕ';
  position: absolute;
  top: -11px;
  left: 14px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd76a, #ff5670);
  color: #1a1410;
  box-shadow: 0 4px 12px rgba(255,213,106,0.55),
              0 0 0 2px rgba(7,7,13,0.96);   /* «врезка» в фон карточки */
  animation: bestBadgePulse 2s ease-in-out infinite;
  z-index: 4;
  white-space: nowrap;
  pointer-events: none;
}
@keyframes bestBadgePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* ── 17. NEWS list — premium ── */
.news-item {
  padding: 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.15)) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  transition: border-color .25s, background .25s;
}
.news-item:hover {
  border-color: rgba(255,213,106,0.3) !important;
  background: linear-gradient(180deg, rgba(255,213,106,0.05), rgba(0,0,0,0.15)) !important;
}

/* ── 18. M-PILL header — even more polished ── */
.b-item.ms .m-coin {
  filter: drop-shadow(0 2px 4px rgba(255,213,106,0.5));
}

/* ── 19. SHEET — better entrance ── */
.sheet-card {
  border-top: 2px solid rgba(255,213,106,0.30) !important;
}

@media (prefers-reduced-motion: reduce) {
  .sp-result-title.win, .sp-result-title.jackpot,
  .csp.active::after,
  .hub-hero-bg,
  .hub-game-tile.live::after,
  .notif-trigger.has-unread::after, .notif-btn.has-unread::after,
  .card-title::after,
  .skel,
  .onboard-emoji,
  .m-pack.best::after,
  .big-win-counter.tier-mega .bwc-num,
  .slot-panel.big-win-pulse {
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   DESIGN REFRESH v=92 — micro-details wave
   ══════════════════════════════════════════════════════════ */

/* ── Crash action btn — icon micro-wobble ── */
.crash-action-btn .cab-icon {
  display: inline-block;
  transition: transform .25s ease;
}
.crash-action-btn:hover .cab-icon { transform: rotate(-5deg) scale(1.1); }
.crash-action-btn.cash-out .cab-icon { animation: cashIconBounce 1.4s ease-in-out infinite; }
@keyframes cashIconBounce {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-3px) rotate(-6deg); }
}

/* ── Crash auto-cashout checkbox — custom style ── */
.crash-auto-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px !important;
  height: 18px !important;
  border-radius: 5px;
  background: rgba(0,0,0,0.4);
  border: 2px solid rgba(255,213,106,0.45);
  cursor: pointer;
  position: relative;
  transition: background .2s, border-color .2s;
}
.crash-auto-toggle input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #ffd76a, #ff9b3a);
  border-color: transparent;
}
.crash-auto-toggle input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 0;
  width: 5px; height: 10px;
  border: solid #1a1410;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* ── Mines history cells — premium look ── */
.mh-cell {
  position: relative;
  padding: 10px 4px !important;
  border-radius: 10px !important;
  overflow: hidden;
  transition: transform .15s ease;
}
.mh-cell:hover { transform: scale(1.04); }
.mh-cell.win {
  background: linear-gradient(180deg, rgba(110,231,183,0.10), rgba(0,0,0,0.3)) !important;
}
.mh-cell.bust {
  background: linear-gradient(180deg, rgba(255,86,112,0.10), rgba(0,0,0,0.3)) !important;
}

/* ── BONUSKA progress dots — premium glow ── */
.bsc-dot {
  position: relative;
  padding: 6px 6px !important;
  font-size: 11px !important;
}
.bsc-dot.done {
  background: linear-gradient(180deg, rgba(110,231,183,0.20), rgba(255,213,74,0.10)) !important;
  border-color: rgba(110,231,183,0.35) !important;
  color: #6ee7b7 !important;
}
.bsc-dot.done::before {
  content: '✓';
  position: absolute;
  top: -3px; right: -3px;
  width: 14px; height: 14px;
  background: #10b981;
  color: #fff;
  border-radius: 50%;
  font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #0a0a14;
}

/* ── Hub-widget — better hover/press ── */
.hub-widget {
  transition: transform .15s ease, border-color .25s ease, box-shadow .25s ease, background .2s ease;
}
.hub-widget:active {
  transform: scale(0.97) !important;
  background: linear-gradient(180deg, #1c1c2e 0%, #14142a 100%) !important;
}
.hub-widget .hw-cta {
  transition: transform .15s ease, filter .15s ease;
}
.hub-widget:active .hw-cta {
  transform: scale(0.92);
  filter: brightness(1.1);
}

/* ── Hub-feature-tile — icon-wrap micro-glow on press ── */
.hub-feature-tile {
  position: relative;
}
.hub-feature-tile::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 0%, rgba(255,213,106,0.20), transparent 70%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 0;
}
.hub-feature-tile:active::before {
  opacity: 1;
}
.hub-feature-tile > * { position: relative; z-index: 1; }

/* ── Stake-input — focus micro-glow improved ── */
.crash-stake-input::placeholder,
.mines-csp::placeholder {
  color: rgba(201,212,232,0.3);
}

/* ── Slot mode card — better active state ── */
.slot-mode-card {
  position: relative;
  transition: transform .15s ease, border-color .25s ease, box-shadow .25s ease;
}
.slot-mode-card:active { transform: scale(0.97); }
.slot-mode-card.active {
  border-color: rgba(255,213,106,0.55) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,213,106,0.18), transparent 65%),
    linear-gradient(180deg, #1c1c30, #0a0a14) !important;
  box-shadow:
    0 6px 22px rgba(255,213,106,0.25),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
.slot-mode-card.active[data-mode="nft"] {
  border-color: rgba(255,86,112,0.55) !important;
  box-shadow:
    0 6px 22px rgba(255,86,112,0.30),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
.slot-mode-card.active[data-mode="nft"] {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,86,112,0.22), transparent 70%),
    linear-gradient(180deg, #1c1c30, #0a0a14) !important;
}

/* ── Top-up card (CryptoBot pending) — better visual ── */
.topup-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(58,207,255,0.30), transparent 60%),
    linear-gradient(180deg, #161628 0%, #08081a 100%) !important;
  border-width: 2px !important;
  box-shadow:
    0 0 60px rgba(58,207,255,0.30),
    0 24px 68px rgba(0,0,0,0.6) !important;
}

/* ── Result-overlay close-btn — hover lift ── */
.cro-close-btn {
  transition: transform .15s ease, filter .15s ease, box-shadow .25s ease !important;
}
.cro-close-btn:hover { filter: brightness(1.08); }

/* ── Reels (slot machine) idle borders ── */
.reels-5x3 {
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,213,106,0.04), transparent 70%),
    #02020a !important;
  box-shadow:
    inset 0 6px 24px rgba(0,0,0,.92),
    inset 0 0 0 1px rgba(255,213,74,.18) !important;
}

/* ── Sym-svg — slight rotate-on-hover ── */
.symbol .sym-svg {
  transition: transform .25s ease, filter .2s ease;
}
.symbol:hover .sym-svg { transform: scale(1.06) rotate(2deg); }

/* ── Toast — exit animation ── */
.toast {
  will-change: transform, opacity;
}
.toast:not(.show) {
  transform: translateX(-50%) translateY(40px) scale(0.85) !important;
}

/* ── Notif drawer items ── */
.notif-item {
  padding: 12px 14px !important;
  margin: 4px 0 !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  transition: background .2s ease;
}
.notif-item:hover {
  background: rgba(255,213,106,0.05);
  border-color: rgba(255,213,106,0.25);
}
.notif-item.unread {
  border-color: rgba(255,86,112,0.35);
  background:
    linear-gradient(90deg, rgba(255,86,112,0.10), transparent 50%);
}
.notif-item.unread::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff5670;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(255,86,112,0.7);
  animation: bellDotPulse 1.4s ease-in-out infinite;
}

/* ── M-pack highlight on best ── */
.m-pack {
  padding: 14px !important;
}

/* ── Confetti tweaking — bigger pieces ── */
.gc-piece {
  width: 9px !important;
  height: 14px !important;
}

@media (prefers-reduced-motion: reduce) {
  .crash-action-btn.cash-out .cab-icon,
  .notif-item.unread::before { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   DESIGN REFRESH v=92 — slot machine deep polish
   ══════════════════════════════════════════════════════════ */

/* ── Slot machine — добавляем декоративные «золотые шурупы» по углам ── */
.machine {
  position: relative;
}
.machine .machine-leds::before,
.machine .machine-leds::after {
  width: 8px !important;
  height: 8px !important;
  background: radial-gradient(circle, #fff8d6 30%, #ffd76a 70%) !important;
  box-shadow:
    0 0 12px rgba(255,213,106,0.85),
    inset 0 -1px 2px rgba(0,0,0,0.4) !important;
}

/* Gold corner accents (4 corners) */
.machine::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,213,74,.2) 10%,
    rgba(255,213,74,.85) 50%,
    rgba(255,213,74,.2) 90%,
    transparent 100%) !important;
  height: 2px !important;
  filter: drop-shadow(0 0 6px rgba(255,213,106,0.5));
}

/* ── Reel cells — sym-cell hover shadow ── */
.reels-5x3 .reel {
  background: linear-gradient(180deg, #0c0c1a 0%, #050511 100%) !important;
  box-shadow:
    inset 0 0 32px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,213,106,0.06),
    inset 0 -1px 0 rgba(255,86,112,0.04) !important;
}

/* ── win-cell halo MORE intense for jackpot ── */
.symbol.win-cell.tier-jackpot::after {
  background: radial-gradient(circle, rgba(255,213,106,0.85), transparent 70%) !important;
  animation-duration: 1.4s;
}

/* ── Slot-panel — overall frame ── */
.slot-panel {
  position: relative;
}

/* ── Spin-button — больше presence ── */
.spin-btn-big {
  font-size: 18px !important;
  text-transform: uppercase;
  font-weight: 900 !important;
}
.spin-btn-big:disabled {
  background: linear-gradient(180deg, #2a2a40, #1a1a2a) !important;
  color: rgba(255,255,255,0.4) !important;
  box-shadow: none !important;
  filter: grayscale(0.5);
}

/* ── Quick-spin toggle (если есть) ── */
.quick-spin-toggle {
  background: rgba(0,0,0,0.3) !important;
  border: 1px solid rgba(255,213,106,0.20) !important;
  border-radius: 8px;
  padding: 6px 10px;
  color: rgba(255,213,106,0.7);
  font-size: 11px;
}

/* ── Last-win info ── */
.last-win-info {
  text-align: center;
  font-size: 12px !important;
  color: rgba(201,212,232,0.55);
  padding: 6px 0;
}
.last-win-info b { color: #ffd76a; }

/* ══════════════════════════════════════════════════════════
   BONUSKA overlay polish
   ══════════════════════════════════════════════════════════ */
.bpo-card {
  border-width: 2px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,86,112,0.30), transparent 60%),
    linear-gradient(180deg, #1f0a18 0%, #0a040a 100%) !important;
  border-color: rgba(255,86,112,0.55) !important;
  box-shadow:
    0 0 60px rgba(255,86,112,0.40),
    0 24px 64px rgba(0,0,0,0.55) !important;
}
.bpo-title {
  font-size: 22px !important;
  letter-spacing: 1.5px !important;
  background: linear-gradient(135deg, #ff5670 0%, #ffd76a 50%, #c77dff 100%) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 12px rgba(255,86,112,0.45));
}
.bpo-progress {
  background: rgba(255,86,112,0.12) !important;
  color: #ff8aa3 !important;
  border: 1px solid rgba(255,86,112,0.30);
  font-size: 12px !important;
}
.bpo-mult-pill {
  font-size: 16px !important;
  letter-spacing: 0.5px !important;
}
.bpo-mult-pill b { font-size: 26px !important; }

/* ══════════════════════════════════════════════════════════
   TOTAL-WIN overlay (БОНУСКА session result) — match Crash style
   ══════════════════════════════════════════════════════════ */
.total-win-overlay .tw-card {
  border-width: 2px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,213,106,0.40), transparent 70%),
    linear-gradient(180deg, #2a1f06 0%, #0e0a02 100%) !important;
  border-color: rgba(255,213,106,0.55) !important;
  box-shadow:
    0 0 80px rgba(255,213,106,0.45),
    0 24px 80px rgba(0,0,0,0.6) !important;
}
.tw-title {
  font-size: 22px !important;
  letter-spacing: 3px !important;
  margin-bottom: 14px;
}
.tw-amount {
  font-size: 64px !important;
  font-weight: 900 !important;
  background: linear-gradient(180deg, #fff8d6 0%, #ffd76a 50%, #ff9b3a 100%) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 20px rgba(255,213,106,0.5));
  font-variant-numeric: tabular-nums;
  letter-spacing: -2px !important;
  line-height: 1.05 !important;
}
.tw-summary {
  font-size: 13px !important;
  color: rgba(201,212,232,0.7);
  margin: 8px 0 12px;
}
.tw-profit {
  display: inline-block;
  font-size: 15px !important;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.tw-profit.positive {
  background: rgba(110,231,183,0.18) !important;
  color: #6ee7b7 !important;
}
.tw-profit.negative {
  background: rgba(255,86,112,0.15) !important;
  color: #ff5670 !important;
}
.tw-profit.neutral {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.7) !important;
}

/* Win-line + hover-hint optional polish */
.win-line { z-index: 1; }

/* Sticky-wild active pulse */
.bpo-sticky b {
  animation: stickyGlow 1.6s ease-in-out infinite;
}
@keyframes stickyGlow {
  0%, 100% { text-shadow: 0 0 4px rgba(255,213,106,0.5); }
  50%      { text-shadow: 0 0 12px rgba(255,213,106,0.95); }
}

@media (prefers-reduced-motion: reduce) {
  .bpo-sticky b { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   FIX (v=95) — Telegram WebView (iOS Safari) bug:
   `filter: drop-shadow(...)` И `text-shadow: ...` оба рушат
   `background-clip: text` → gradient fills всю коробку,
   текст невидим (виден как сплошной gold-прямоугольник).
   Решение: `filter: none` + `text-shadow: none` на ВСЕХ
   gradient-text элементах (полный список из CSS-аудита).
   ══════════════════════════════════════════════════════════ */
.b-item.ms span:last-child,
.big-win-counter .bwc-prefix,
.big-win-counter .bwc-num,
.big-win-counter.tier-big .bwc-prefix,
.big-win-counter.tier-big .bwc-num,
.big-win-counter.tier-mega .bwc-prefix,
.big-win-counter.tier-mega .bwc-num,
.bmp-mult.x10,
.bonus-mult-badge .bmb-mult,
.bpo-title,
.brand-text,
.cmd-num,
.crash-explosion .ce-text,
.crash-mult-display.crashed .cmd-num,
.crash-mult-display.tier-hi .cmd-num,
.crash-mult-display.tier-mid .cmd-num,
.crash-stake-input,
.cro-loss .cro-title,
.cro-loss-amount,
.cro-title,
.cro-val.gold,
.cro-win .cro-title,
.drawer-title,
.empty-rich .empty-title,
.f-item.jackpot .h-tier,
.fch-title,
.feed-hero-title,
.feed-row.tier-mega .fr-amount,
.gp-title,
.gs-cost,
.guide-title,
.h-item.win .h-tier,
.hhs-v,
.hgt-title,
.hht-1,
.hht-2,
.jb-pool,
.jp-title,
.jpi-pool-value,
.jpi-stat-v,
.lp-value,
.mbc-price-v,
.mh-bal-value > span:first-child,
.mh-bal-value,
.mh-headline,
.mi-mult,
.mi-mult.tier-hi,
.mi-mult.tier-mid,
.mi-next,
.mp-m-amount,
.onboard-title,
.pack-r,
.podium-stat,
.prize-stat,
.r-title.jackpot,
.ref-stat-v,
.ref-stat:nth-child(2) .ref-stat-v,
.sd-v,
.sess-cost,
.sp-result-title,
.sp-result-title.jackpot,
.sp-result-title.win,
.stat.hero .stat-v,
.stats-grid .stat-v.num,
.tu-tier-name,
.tw-amount,
.tw-profit,
.tw-title,
.vs-code,
.wb-value,
.wbc-value,
.wtb-value {
  filter: none !important;
  text-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════
   FIX (v=96) — Гарантированный фолбэк: на критичных
   элементах ОТКЛЮЧАЕМ gradient-text-fill полностью и даём
   сплошной gold-color. Это работает всегда, во всех
   браузерах и Telegram-WebView версиях.
   ══════════════════════════════════════════════════════════ */
.brand-text,
.hht-1,
.bpo-title,
.feed-hero-title,
.cro-title,
.cro-loss .cro-title,
.cro-win .cro-title,
.tw-amount,
.tw-title,
.fch-title,
.drawer-title,
.guide-title,
.onboard-title,
.empty-rich .empty-title {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #ffd76a !important;
  color: #ffd76a !important;
}

/* Loss-варианты — красный fallback */
.cro-loss .cro-title,
.cro-loss-amount,
.crash-explosion .ce-text {
  -webkit-text-fill-color: #ff5670 !important;
  color: #ff5670 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

/* HHT-2 (GAMES) — оставляем белым как было */
.hht-2 {
  -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
  color: rgba(255,255,255,0.85) !important;
  background: none !important;
}

/* ══════════════════════════════════════════════════════════
   BOTTOM NAV — minimalist redesign (v=97)
   icon сверху + text снизу, активный — gold-tint, никакой
   огромной gold-плашки, плотно и аккуратно.
   ══════════════════════════════════════════════════════════ */
.tabs {
  flex: 0 0 auto;
  display: flex !important;
  justify-content: space-around;
  align-items: stretch;
  gap: 0 !important;
  padding: 8px 4px calc(10px + env(safe-area-inset-bottom)) !important;
  background: rgba(7,7,13,0.96) !important;
  border-top: 1px solid rgba(255,213,106,0.10);
  border-bottom: none !important;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
}
/* Накладываем гранитный gradient сверху — глубина */
.tabs::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,213,106,0.3), transparent);
  pointer-events: none;
}

/* Кнопка вкладки */
.tab {
  flex: 1 1 0;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 8px 2px !important;
  min-height: 58px !important;
  min-width: 0 !important;

  /* НЕТ фона/обводки/тени на кнопке */
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: rgba(170,180,200,0.55);
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  transition: color .2s ease;
  position: relative;
}

/* Иконка — крупнее и "приглушённая" в неактивном */
.tab .t-icon {
  font-size: 22px !important;
  line-height: 1 !important;
  flex-shrink: 0;
  filter: grayscale(0.55) brightness(0.65) contrast(0.95);
  transition: filter .25s ease, transform .25s cubic-bezier(.16,1.4,.3,1);
}

/* Подпись */
.tab .t-label {
  display: block !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: inherit;
  transition: color .2s ease, font-weight .2s ease;
}

/* Active — gold tint всему таб'у, no big pill */
.tab.active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--gold, #ffd76a) !important;
}
.tab.active .t-icon {
  filter: none !important;
  transform: scale(1.12) translateY(-1px);
  /* Glow только под активной иконкой */
  text-shadow: 0 4px 14px rgba(255,213,106,0.55);
}
.tab.active .t-label {
  color: var(--gold, #ffd76a) !important;
  font-weight: 800 !important;
}

/* Press feedback */
.tab:not(.active):active .t-icon { transform: scale(0.92); }
.tab.active:active .t-icon { transform: scale(1.05); }

/* Subtle gold "active indicator" — короткая черта под текстом */
.tab.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  box-shadow: 0 0 8px rgba(255,213,106,0.65);
  animation: tabIndicator 0.3s ease-out;
}
@keyframes tabIndicator {
  0%   { transform: translateX(-50%) scaleX(0.3); opacity: 0; }
  100% { transform: translateX(-50%) scaleX(1); opacity: 1; }
}

/* Бэдж (dot или number) на иконке — справа сверху */
.tab .tab-dot {
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);  /* выравниваем по правому краю иконки */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5670, #ff8aa3);
  border: 2px solid rgba(7,7,13,0.96);
  box-shadow: 0 0 6px rgba(255,86,112,0.65);
  animation: tabDotPulse 1.4s ease-in-out infinite;
}
.tab .tab-badge {
  position: absolute;
  top: 2px;
  right: calc(50% - 22px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5670, #ff3b5c);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(7,7,13,0.96);
  box-shadow: 0 0 6px rgba(255,86,112,0.55);
  letter-spacing: -0.3px;
}

/* На очень узких экранах — оставляем label всё равно (важно для UX) */
@media (max-width: 360px) {
  .tab { padding: 7px 1px !important; min-height: 54px !important; }
  .tab .t-icon { font-size: 20px !important; }
  .tab .t-label { font-size: 9.5px !important; letter-spacing: 0; }
}
@media (max-width: 320px) {
  .tab .t-label { font-size: 9px !important; }
  .tab .t-icon { font-size: 19px !important; }
}

/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
  .tab .t-icon,
  .tab.active::after,
  .tab .tab-dot { animation: none !important; transition: none !important; }
}

/* ══════════════════════════════════════════════════════════
   BOTTOM NAV — Variant B «Glass Gradient» (v=98)
   Стеклянный backdrop + цветные иконки в контейнерах +
   top-индикатор над активной + SVG-иконки.
   ══════════════════════════════════════════════════════════ */
.tabs.nav-glass {
  position: relative;
  display: flex !important;
  justify-content: space-around;
  align-items: stretch;
  gap: 0;
  padding: 10px 6px calc(12px + env(safe-area-inset-bottom)) !important;
  background: linear-gradient(180deg, rgba(15,10,30,0.65) 0%, rgba(7,5,18,0.92) 100%) !important;
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: none !important;
  z-index: 60;
}
/* Тонкая золотая hairline сверху */
.tabs.nav-glass::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,213,106,0.45), transparent);
  pointer-events: none;
}

/* Скрытые tabs не растягивают flex (важно!) */
.tabs.nav-glass .tab[style*="display:none"],
.tabs.nav-glass .tab[style*="display: none"] {
  flex: 0 0 0;
}

/* ── Кнопка таб — внешний layout ─────────────────────── */
.tabs.nav-glass .tab {
  flex: 1 1 0;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 6px 2px 4px !important;
  min-height: 60px !important;
  min-width: 0 !important;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  position: relative;
  transition: transform .18s ease;
}
.tabs.nav-glass .tab:active { transform: scale(0.94); }

/* ── Цветной контейнер вокруг иконки ─────────────────── */
.tabs.nav-glass .t-iconwrap {
  --nc1: #ffd76a;     /* default gold gradient stops */
  --nc2: #ff9b3a;
  --nc-glow: rgba(255,213,106,0.55);

  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  transition: all .25s cubic-bezier(.16,1.4,.3,1);
  flex-shrink: 0;
}

/* Цветовые варианты (по data-nav-color) */
.tabs.nav-glass .tab[data-nav-color="gold"]   .t-iconwrap { --nc1: #ffd76a; --nc2: #ff9b3a; --nc-glow: rgba(255,213,106,0.55); }
.tabs.nav-glass .tab[data-nav-color="red"]    .t-iconwrap { --nc1: #ff5670; --nc2: #c77dff; --nc-glow: rgba(255,86,112,0.55); }
.tabs.nav-glass .tab[data-nav-color="cyan"]   .t-iconwrap { --nc1: #3acfff; --nc2: #0089b8; --nc-glow: rgba(58,207,255,0.55); }
.tabs.nav-glass .tab[data-nav-color="green"]  .t-iconwrap { --nc1: #6ee7b7; --nc2: #10b981; --nc-glow: rgba(110,231,183,0.55); }
.tabs.nav-glass .tab[data-nav-color="purple"] .t-iconwrap { --nc1: #c77dff; --nc2: #7b2cbf; --nc-glow: rgba(199,125,255,0.55); }

/* SVG-иконка внутри контейнера */
.tabs.nav-glass .t-svg {
  width: 22px;
  height: 22px;
  color: rgba(180,190,210,0.55);  /* inactive — приглушённая */
  transition: color .25s ease, transform .25s cubic-bezier(.16,1.4,.3,1);
}

/* ── Active state ─────────────────────────────────────── */
.tabs.nav-glass .tab.active .t-iconwrap {
  background: linear-gradient(135deg, var(--nc1), var(--nc2));
  border-color: rgba(255,255,255,0.20);
  box-shadow:
    0 6px 18px var(--nc-glow),
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.18);
  transform: translateY(-1px);
}
.tabs.nav-glass .tab.active .t-svg {
  color: #fff;
  transform: scale(1.05);
  /* SVG drop-shadow ОК тут — нет background-clip:text конфликта */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* ── Top-indicator (полоска над активной) ─────────────── */
.tabs.nav-glass .tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, var(--nc1, #ffd76a), var(--nc2, #ff9b3a));
  box-shadow: 0 0 8px var(--nc-glow, rgba(255,213,106,0.6));
  animation: navIndicatorIn 0.35s cubic-bezier(.16,1.4,.3,1);
}
@keyframes navIndicatorIn {
  0%   { transform: translateX(-50%) scaleX(0.2); opacity: 0; }
  100% { transform: translateX(-50%) scaleX(1);   opacity: 1; }
}

/* ── Подпись ──────────────────────────────────────────── */
.tabs.nav-glass .t-label {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: rgba(170,180,200,0.55);
  transition: color .25s ease, font-weight .25s ease;
  display: block !important;
}
.tabs.nav-glass .tab.active .t-label {
  color: #fff !important;
  font-weight: 800 !important;
}

/* ── Бэйдж dot/number — поверх contains ─────────────── */
.tabs.nav-glass .tab .tab-dot {
  position: absolute;
  top: 4px;
  right: calc(50% - 22px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5670, #ff8aa3);
  border: 2px solid rgba(7,5,18,0.95);
  box-shadow: 0 0 8px rgba(255,86,112,0.7);
  animation: tabDotPulse 1.4s ease-in-out infinite;
  z-index: 2;
}
.tabs.nav-glass .tab .tab-badge {
  position: absolute;
  top: 2px;
  right: calc(50% - 26px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5670, #ff3b5c);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(7,5,18,0.95);
  box-shadow: 0 0 8px rgba(255,86,112,0.55);
  letter-spacing: -0.2px;
  z-index: 2;
}

/* ── Адаптация ────────────────────────────────────────── */
@media (max-width: 380px) {
  .tabs.nav-glass .t-iconwrap { width: 36px; height: 36px; }
  .tabs.nav-glass .t-svg { width: 20px; height: 20px; }
  .tabs.nav-glass .t-label { font-size: 10px !important; }
}
@media (max-width: 320px) {
  .tabs.nav-glass .t-iconwrap { width: 34px; height: 34px; border-radius: 10px; }
  .tabs.nav-glass .t-svg { width: 18px; height: 18px; }
  .tabs.nav-glass .t-label { font-size: 9px !important; letter-spacing: 0; }
}

/* ── Reduce motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tabs.nav-glass .tab,
  .tabs.nav-glass .t-iconwrap,
  .tabs.nav-glass .t-svg,
  .tabs.nav-glass .tab.active::before,
  .tabs.nav-glass .tab .tab-dot {
    animation: none !important;
    transition: none !important;
  }
}

/* ── ВАЖНО: переопределяем старые правила .tab ──────── */
.tabs.nav-glass .tab[style*="display:none"] {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════
   LAYOUT FIX (v=102)
   1) Top-bar — компактнее (меньше padding + size элементов)
   2) Bottom-nav — pinned to bottom через position:fixed
   3) #screens — bottom padding чтобы контент не уходил под nav
   ══════════════════════════════════════════════════════════ */

/* ── 1. Top-bar compact ───────────────────────────────── */
.topbar {
  padding: 6px 12px !important;
  padding-top: calc(6px + env(safe-area-inset-top)) !important;
  gap: 6px !important;
  min-height: 0 !important;
}
.brand-mark {
  width: 32px !important;
  height: 32px !important;
  font-size: 18px !important;
  border-radius: 9px !important;
}
.brand-text {
  font-size: 12px !important;
  letter-spacing: 1.2px !important;
}
.b-item.ms {
  padding: 5px 12px !important;
  font-size: 14px !important;
  gap: 6px !important;
}
.b-item.ms .m-coin {
  width: 22px !important;
  height: 22px !important;
}
.bell-btn {
  width: 36px !important;
  height: 36px !important;
}
.bell-btn .bell-icon {
  font-size: 18px !important;
}

/* ── 2. Bottom-nav fixed to bottom ──────────────────── */
.tabs.nav-glass {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 60 !important;

  /* Чуть компактнее */
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) !important;
  min-height: 0 !important;
}
.tabs.nav-glass .tab {
  min-height: 52px !important;
  padding: 4px 2px 2px !important;
  gap: 3px !important;
}
.tabs.nav-glass .t-iconwrap {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}
.tabs.nav-glass .t-svg {
  width: 19px !important;
  height: 19px !important;
}
.tabs.nav-glass .t-label {
  font-size: 10px !important;
}

/* ── 3. #screens compensate for fixed nav ───────────── */
#screens {
  padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
}

/* ── 4. Адаптация на узких ────────────────────────── */
@media (max-width: 380px) {
  .tabs.nav-glass .t-iconwrap { width: 32px !important; height: 32px !important; }
  .tabs.nav-glass .t-svg { width: 18px !important; height: 18px !important; }
  .tabs.nav-glass .tab { min-height: 50px !important; }
  #screens { padding-bottom: calc(66px + env(safe-area-inset-bottom)) !important; }
  .brand-mark { width: 28px !important; height: 28px !important; }
  .b-item.ms { padding: 4px 10px !important; font-size: 13px !important; }
  .b-item.ms .m-coin { width: 20px !important; height: 20px !important; }
}

/* Если old `.tabs` (без nav-glass) — не пинить, оставить как было */
.tabs:not(.nav-glass) {
  position: static !important;
}

/* ══════════════════════════════════════════════════════════
   CRASH ONLINE — premium polish (v=105)
   ══════════════════════════════════════════════════════════ */

/* Stage backdrop changes color per phase */
.crash-stage[data-phase="betting"] {
  background:
    radial-gradient(ellipse 90% 50% at 50% 110%, rgba(199,125,255,0.40), transparent 70%),
    radial-gradient(ellipse 60% 40% at 30% 100%, rgba(58,207,255,0.25), transparent 70%),
    linear-gradient(180deg, #02000a 0%, #0a0420 35%, #14082a 65%, #1a0a3a 100%) !important;
  transition: background 0.5s ease;
}
.crash-stage[data-phase="flying"] {
  background:
    radial-gradient(ellipse 90% 50% at 50% 110%, rgba(255,86,112,0.50), transparent 70%),
    radial-gradient(ellipse 60% 40% at 30% 100%, rgba(255,213,106,0.30), transparent 70%),
    linear-gradient(180deg, #02000a 0%, #1a0820 35%, #2a0d40 65%, #3a1050 100%) !important;
  transition: background 0.5s ease;
  animation: stageFlyingPulse 0.4s ease-in-out infinite alternate;
}
.crash-stage[data-phase="crashed"] {
  background:
    radial-gradient(ellipse 90% 50% at 50% 110%, rgba(255,40,60,0.55), transparent 70%),
    radial-gradient(ellipse 60% 40% at 30% 100%, rgba(199,40,80,0.35), transparent 70%),
    linear-gradient(180deg, #1a0408 0%, #2a0612 35%, #3a081a 65%, #4a0a22 100%) !important;
  transition: background 0.5s ease;
  animation: stageCrashShake 0.4s ease-in-out;
}
@keyframes stageFlyingPulse {
  from { filter: brightness(1) saturate(1); }
  to   { filter: brightness(1.06) saturate(1.1); }
}
@keyframes stageCrashShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* Players-count badge (top-right of stage) */
.crash-players-badge {
  position: absolute;
  top: 38px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(7,5,18,0.75);
  border: 1px solid rgba(255,213,106,0.3);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 700;
  color: #ffd76a;
  z-index: 6;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.cpb-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6ee7b7;
  box-shadow: 0 0 6px rgba(110,231,183,0.7);
  animation: cpbDotPulse 1.6s ease-in-out infinite;
}
@keyframes cpbDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.4); }
}
.cpb-label {
  color: rgba(255,213,106,0.6);
  font-weight: 600;
  font-size: 10px;
}

/* Round-id badge (top-left) */
.crash-round-badge {
  position: absolute;
  top: 38px;
  left: 12px;
  padding: 4px 10px;
  background: rgba(7,5,18,0.75);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 700;
  color: rgba(201,212,232,0.65);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4px;
  z-index: 6;
}

/* Countdown ring around multiplier (visible only in betting phase) */
.crash-countdown-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 240px; height: 240px;
  margin-left: -120px;
  margin-top: -120px;
  transform: rotate(-90deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.crash-stage[data-phase="betting"] .crash-countdown-ring {
  opacity: 1;
}
.cdr-track {
  fill: none;
  stroke: rgba(255,213,106,0.08);
  stroke-width: 4;
}
.cdr-progress {
  fill: none;
  stroke: url(#trajGrad);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 565.5;  /* 2π × 90 ≈ 565.5 */
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px rgba(255,213,106,0.55));
  transition: stroke-dashoffset 0.25s linear;
}

/* Countdown text (replaces multiplier during betting) */
.crash-countdown-text {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,213,106,0.85);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  display: none;
}
.crash-stage[data-phase="betting"] .crash-countdown-text {
  display: block;
}

/* History pills — 3D chip look */
.crash-history-strip .chs-pill {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}
.crash-history-strip .chs-pill::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent);
  pointer-events: none;
}
.crash-history-strip .chs-pill:hover {
  transform: scale(1.08) translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}
.crash-history-strip .chs-pill:active {
  transform: scale(0.96);
}
.crash-history-strip .chs-pill.mega {
  animation: chipMegaGlow 2.6s ease-in-out infinite;
}
@keyframes chipMegaGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199,125,255,0.45); }
  50%      { box-shadow: 0 0 14px 2px rgba(199,125,255,0.65); }
}

/* History grid cells */
.crash-history-grid .chg-cell {
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s;
}
.crash-history-grid .chg-cell:hover {
  transform: scale(1.06);
  border-color: rgba(255,213,106,0.5);
}

/* Multiplier display — extra impact during flying */
.crash-stage[data-phase="flying"] .cmd-num {
  animation: multFlyingTwitch 0.18s ease-in-out infinite alternate;
}
@keyframes multFlyingTwitch {
  from { letter-spacing: -2px; }
  to   { letter-spacing: -1.7px; }
}

/* Stage particle accent — additional twinkle layer for betting */
.crash-stage[data-phase="betting"] .crash-stars {
  animation: crashStarsTwinkle 2.4s ease-in-out infinite;
}

/* Mobile adjustments */
@media (max-width: 380px) {
  .crash-players-badge { top: 32px; right: 8px; padding: 4px 8px; font-size: 10px; }
  .crash-round-badge { top: 32px; left: 8px; padding: 3px 8px; font-size: 9px; }
  .crash-countdown-ring { width: 200px; height: 200px; margin-left: -100px; margin-top: -100px; }
  .crash-countdown-text { font-size: 12px; bottom: -28px; }
}

@media (prefers-reduced-motion: reduce) {
  .crash-stage[data-phase="flying"],
  .crash-stage[data-phase="crashed"],
  .cpb-dot,
  .crash-history-strip .chs-pill.mega,
  .crash-stage[data-phase="flying"] .cmd-num { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   SLOT MACHINE — win-cell entire-reel glow (v=105)
   ══════════════════════════════════════════════════════════ */
.reels-5x3 .reel.has-win {
  animation: reelWinGlow 0.9s ease-out;
}
@keyframes reelWinGlow {
  0%   { box-shadow: inset 0 0 32px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,213,106,0.10); }
  40%  { box-shadow: inset 0 0 0 2px rgba(255,213,106,0.85), inset 0 0 30px rgba(255,213,106,0.55); }
  100% { box-shadow: inset 0 0 32px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,213,106,0.10); }
}

/* ══════════════════════════════════════════════════════════
   BOTTOM-NAV — ripple + bounce on click (v=105)
   ══════════════════════════════════════════════════════════ */
.tabs.nav-glass .tab.active .t-iconwrap {
  animation: navIconBounce 0.4s cubic-bezier(.16,1.4,.3,1);
}
@keyframes navIconBounce {
  0%   { transform: translateY(-1px) scale(1); }
  40%  { transform: translateY(-3px) scale(1.12); }
  100% { transform: translateY(-1px) scale(1); }
}

/* Click ripple on tab */
.tabs.nav-glass .tab .t-iconwrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255,213,106,0.45), transparent 70%);
  opacity: 0;
  pointer-events: none;
}
.tabs.nav-glass .tab:active .t-iconwrap::after {
  animation: navTabRipple 0.4s ease-out;
}
@keyframes navTabRipple {
  0%   { opacity: 0.7; transform: scale(0.6); }
  100% { opacity: 0;   transform: scale(1.4); }
}

/* ══════════════════════════════════════════════════════════
   M-PILL — coin spins on balance change (v=105)
   ══════════════════════════════════════════════════════════ */
.b-item.ms.changed .m-coin {
  animation: mCoinSpin 0.6s cubic-bezier(.16,1,.3,1);
}
@keyframes mCoinSpin {
  0%   { transform: rotateY(0); }
  100% { transform: rotateY(360deg); }
}
.b-item.ms .m-coin {
  transition: filter .25s ease;
  transform-style: preserve-3d;
}

/* ══════════════════════════════════════════════════════════
   HUB HERO — shine sweep + animated layers (v=105)
   ══════════════════════════════════════════════════════════ */
.hub-hero {
  position: relative;
}
.hub-hero::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,213,106,0.10) 45%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,213,106,0.10) 55%,
    transparent 70%);
  animation: heroShine 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes heroShine {
  0%, 60%  { transform: translateX(0); opacity: 0; }
  70%      { opacity: 1; }
  100%     { transform: translateX(400%); opacity: 0; }
}

/* Hero stars — gentle drift + twinkle */
.hub-hero-stars {
  animation: hubStarsTwinkle 3.4s ease-in-out infinite,
             hubStarsDrift 24s linear infinite !important;
}
@keyframes hubStarsDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 100px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-hero::after,
  .hub-hero-stars,
  .b-item.ms.changed .m-coin,
  .tabs.nav-glass .tab.active .t-iconwrap,
  .tabs.nav-glass .tab:active .t-iconwrap::after,
  .reels-5x3 .reel.has-win { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   FEED ROW — small enhancements
   ══════════════════════════════════════════════════════════ */
.feed-row {
  cursor: default;
  transition: transform 0.15s ease;
}
.feed-row:hover { transform: translateX(3px); }
.feed-row.tier-mega { animation: feedMegaPulse 2.4s ease-in-out infinite; }
@keyframes feedMegaPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(199,125,255,0.18); }
  50%      { box-shadow: 0 4px 22px rgba(199,125,255,0.40); }
}

/* ══════════════════════════════════════════════════════════
   POLISH WAVE v=106 — глубокая работа над всеми экранами
   ══════════════════════════════════════════════════════════ */

/* ── 1. WALLET hero — премиум-карта баланса ─────────────── */
.wallet-tab-balance {
  position: relative;
  overflow: hidden;
  padding: 26px 18px !important;
  background:
    radial-gradient(circle at 25% 0%, rgba(255,213,106,0.30), transparent 55%),
    radial-gradient(circle at 80% 110%, rgba(255,86,112,0.18), transparent 60%),
    linear-gradient(180deg, #1c1c2e 0%, #0d0d1a 100%) !important;
  border: 1px solid rgba(255,213,106,0.40) !important;
  box-shadow:
    0 12px 40px rgba(255,213,106,0.18),
    0 0 0 1px rgba(255,213,106,0.10),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.wallet-tab-balance::before {
  /* Existing shimmer — усиливаем */
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.12) 50%, transparent 65%) !important;
  width: 80% !important;
  animation-duration: 6s !important;
}
/* Декоративные «частицы» в углах */
.wallet-tab-balance::after {
  content: '';
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,213,106,0.65), transparent 60%);
  border-radius: 50%;
  filter: blur(8px);
  pointer-events: none;
}
.wtb-label {
  font-size: 10.5px !important;
  letter-spacing: 2px !important;
  color: rgba(255,213,106,0.65) !important;
}
.wtb-value {
  font-size: 48px !important;
  font-weight: 900 !important;
  letter-spacing: -2px !important;
  line-height: 1.05 !important;
  margin-bottom: 10px !important;
}
.wtb-value .m-coin {
  width: 40px !important;
  height: 40px !important;
  filter: drop-shadow(0 4px 14px rgba(255,213,106,0.55)) !important;
  animation: wtbCoinFloat 3.4s ease-in-out infinite;
}
@keyframes wtbCoinFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-3px) rotate(-4deg); }
}
.wtb-tier {
  background: linear-gradient(135deg, rgba(255,213,106,0.20), rgba(255,86,112,0.10)) !important;
  border: 1px solid rgba(255,213,106,0.40) !important;
  padding: 5px 14px !important;
  font-size: 11px !important;
  letter-spacing: 1px;
  font-weight: 800 !important;
}

/* ── 2. M-PACK tiles — premium 3D + hover ────────────── */
.m-pack {
  padding: 16px !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, #1a1a2c 0%, #0a0a14 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  transition: transform 0.18s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
  position: relative;
  overflow: hidden;
}
.m-pack::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255,255,255,0.10) 50%,
    transparent 65%);
  transition: left 0.5s ease;
  pointer-events: none;
}
.m-pack:hover::before { left: 200%; }
.m-pack:hover {
  border-color: rgba(255,213,106,0.40) !important;
  box-shadow: 0 8px 24px rgba(255,213,106,0.20) !important;
  transform: translateY(-2px);
}
.m-pack:active {
  transform: scale(0.985) translateY(0) !important;
}
.m-pack.best {
  border-color: rgba(255,213,106,0.55) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,213,106,0.18), transparent 60%),
    linear-gradient(180deg, #1f1d2c 0%, #0d0d1a 100%) !important;
  box-shadow:
    0 8px 28px rgba(255,213,106,0.30),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.mp-stars {
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px;
}
.mp-m-amount {
  font-weight: 900 !important;
  font-size: 24px !important;
  letter-spacing: -0.5px;
}
.mp-rate {
  font-size: 10.5px !important;
  color: rgba(255,213,106,0.65) !important;
  font-weight: 600;
}
.mp-bonus {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #6ee7b7 !important;
  background: rgba(110,231,183,0.10);
  padding: 2px 7px;
  border-radius: 999px;
  display: inline-block;
  margin-top: 4px;
  border: 1px solid rgba(110,231,183,0.25);
}

/* ── 3. WM payment methods — premium ─────────────────── */
.wm-method {
  padding: 14px 8px !important;
  transition: transform 0.15s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
  position: relative;
}
.wm-method.active {
  border-width: 2px !important;
  transform: translateY(-2px);
  box-shadow:
    0 10px 26px rgba(255,213,106,0.30),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
.wm-method.active::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  width: 24px; height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  box-shadow: 0 0 8px rgba(255,213,106,0.65);
  transform: translateX(-50%);
}
.wm-icon {
  font-size: 24px !important;
  margin-bottom: 4px !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.wm-text {
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* ── 4. PROFILE stats hero (header + grid) ─────────────── */
.profile-head {
  padding: 18px 4px 14px !important;
  position: relative;
}
.profile-head .avatar {
  width: 64px !important;
  height: 64px !important;
  font-size: 28px !important;
  border-radius: 18px !important;
  border: 2px solid rgba(255,213,106,0.30) !important;
}
.who-name {
  font-size: 18px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #fff, #ffd76a);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.who-id {
  font-size: 11px !important;
  color: rgba(201,212,232,0.55) !important;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

/* ── 5. STATS GRID — premium tiles ─────────────────── */
.stats-grid {
  gap: 8px !important;
  margin-bottom: 12px;
}
.stats-grid .stat {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.15)) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 12px !important;
  padding: 10px 6px !important;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.stats-grid .stat:hover {
  border-color: rgba(255,213,106,0.30) !important;
  transform: translateY(-1px);
}
.stats-grid .stat-v {
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -0.3px;
}
.stats-grid .stat-l {
  font-size: 10px !important;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(201,212,232,0.55);
  margin-top: 2px;
}

/* ── 6. STATS DETAIL grid ───────────────────────────── */
.stats-detail-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}
.sd-item {
  padding: 10px 8px !important;
  background: rgba(0,0,0,0.25) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.05);
  text-align: center;
}
.sd-v {
  font-size: 18px !important;
  font-weight: 800 !important;
}
.sd-l {
  font-size: 10px !important;
  color: rgba(201,212,232,0.55) !important;
  margin-top: 2px;
}

/* ── 8. CHANNEL CARD — premium ──────────────────── */
.channel-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(58,207,255,0.12), transparent 65%),
    linear-gradient(180deg, #0e1626 0%, #050a14 100%) !important;
  border: 1px solid rgba(58,207,255,0.30) !important;
}
.channel-card.subscribed {
  border-color: rgba(110,231,183,0.40) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(110,231,183,0.12), transparent 65%),
    linear-gradient(180deg, #0e1a18 0%, #050a08 100%) !important;
}
.channel-icon {
  font-size: 28px !important;
  filter: drop-shadow(0 2px 6px rgba(58,207,255,0.5));
}
.channel-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px;
}

/* ── 9. SECTION HEADS — premium accent ──────────── */
.hub-section-head {
  position: relative;
  padding-bottom: 2px;
}
.hub-section-head .hs-icon {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, rgba(255,213,106,0.18), rgba(255,86,112,0.10));
  border: 1px solid rgba(255,213,106,0.30);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px !important;
}
.hub-section-head .hs-title {
  font-size: 17px !important;
  letter-spacing: 0.4px;
}
.hub-section-head .hs-count {
  background: linear-gradient(135deg, rgba(255,213,106,0.18), rgba(255,86,112,0.08)) !important;
  border-color: rgba(255,213,106,0.35) !important;
  font-size: 10px !important;
  letter-spacing: 0.5px;
  padding: 4px 10px !important;
}

/* ── 10. HUB FEATURE TILES — press halo ────────── */
.hub-feature-tile {
  transition: transform 0.18s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.hub-feature-tile:hover .hft-icon-wrap {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5),
              0 0 0 2px rgba(255,255,255,0.10),
              inset 0 1px 0 rgba(255,255,255,0.30);
}
.hft-icon-wrap {
  transition: transform 0.18s ease, box-shadow 0.25s ease;
}
.hub-feature-tile:active .hft-icon-wrap {
  transform: scale(0.92);
}

/* ── 11. EMPTY STATES — animated ─────────────── */
.empty-rich .empty-icon {
  animation: emptyIconBounce 3s ease-in-out infinite;
  display: inline-block;
}
@keyframes emptyIconBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(-4deg); }
}
.empty-rich .empty-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  margin-bottom: 4px;
}
.empty-rich .empty-sub {
  font-size: 12.5px !important;
  color: rgba(201,212,232,0.55);
  line-height: 1.5;
  max-width: 280px;
  margin: 0 auto;
}

/* ── 12. BONUSKA overlay — ambient particles + glow ── */
.bpo-card::before {
  content: '';
  position: absolute;
  inset: -20px;
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255,213,106,0.65), transparent),
    radial-gradient(1.5px 1.5px at 28% 65%, rgba(255,86,112,0.55), transparent),
    radial-gradient(2px 2px at 52% 11%, rgba(199,125,255,0.65), transparent),
    radial-gradient(1.5px 1.5px at 71% 48%, rgba(255,213,106,0.55), transparent),
    radial-gradient(2px 2px at 88% 28%, rgba(110,231,183,0.55), transparent),
    radial-gradient(1.5px 1.5px at 38% 36%, rgba(255,86,112,0.55), transparent);
  pointer-events: none;
  opacity: 0.7;
  z-index: 0;
  animation: bpoStarsTwinkle 4s ease-in-out infinite;
  border-radius: inherit;
}
@keyframes bpoStarsTwinkle {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.85; }
}
.bpo-card > * { position: relative; z-index: 1; }

/* ── 13. MODALS — refined entrance ────────────── */
.cro-card,
.topup-card,
.tw-card {
  transition: transform 0.5s cubic-bezier(.16,1.4,.3,1), opacity 0.35s ease !important;
}
.crash-result-overlay.show .cro-card {
  transform: translateY(-50%) scale(1) !important;
}

/* Sheet — bottom-up slide */
.sheet-card {
  transition: transform 0.45s cubic-bezier(.16,1.2,.3,1) !important;
}

/* ── 14. SETTINGS toggle switch — smoother ──── */
.switch {
  width: 52px !important;
  height: 30px !important;
  position: relative;
  flex-shrink: 0;
}
.switch input { display: none; }
.switch-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.switch-slider::before {
  content: '';
  position: absolute;
  width: 24px; height: 24px;
  background: linear-gradient(135deg, #fff, #d8d8e8);
  border-radius: 50%;
  top: 2px; left: 2px;
  transition: transform 0.3s cubic-bezier(.16,1.2,.3,1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.switch input:checked + .switch-slider {
  background: linear-gradient(135deg, #6ee7b7, #10b981);
  border-color: rgba(110,231,183,0.50);
  box-shadow: 0 0 12px rgba(110,231,183,0.45);
}
.switch input:checked + .switch-slider::before {
  transform: translateX(22px);
}

/* ── 15. SETTING ROW polish ──────────────────── */
.setting-row {
  padding: 14px 4px !important;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.2s ease;
}
.setting-row:hover {
  background: rgba(255,213,106,0.03);
}
.setting-row:last-of-type { border-bottom: none; }
.setting-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff;
  margin-bottom: 2px;
}
.setting-sub {
  font-size: 11.5px !important;
  color: rgba(201,212,232,0.55) !important;
  line-height: 1.5;
}
.speed-select {
  background: rgba(0,0,0,0.4) !important;
  border: 1px solid rgba(255,213,106,0.30) !important;
  color: #ffd76a !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  cursor: pointer;
}
.speed-select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255,213,106,0.18);
}

/* ── 16. BUTTONS — unified hover/active ─────── */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.12s ease, filter 0.18s ease, box-shadow 0.25s ease !important;
}
.btn:not(:disabled):hover {
  filter: brightness(1.08);
}
.btn:not(:disabled):active {
  transform: scale(0.97);
  filter: brightness(0.95);
}
.btn.primary {
  box-shadow: 0 6px 20px var(--gold-glow),
              inset 0 1px 0 rgba(255,255,255,0.30);
}
.btn.purple {
  box-shadow: 0 6px 20px rgba(199,125,255,0.45),
              inset 0 1px 0 rgba(255,255,255,0.20);
}

/* ── 17. CARD-TITLE — accent line refined ──── */
.card-title {
  letter-spacing: 0.4px !important;
  font-size: 14.5px !important;
}

/* ── 18. SCROLLBAR полировка ─────────────────── */
.feed-list::-webkit-scrollbar,
#screens::-webkit-scrollbar,
.top-list::-webkit-scrollbar {
  width: 4px !important;
}
.feed-list::-webkit-scrollbar-thumb,
#screens::-webkit-scrollbar-thumb,
.top-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255,213,106,0.4), rgba(255,86,112,0.3)) !important;
  border-radius: 999px !important;
}
.feed-list::-webkit-scrollbar-track,
#screens::-webkit-scrollbar-track,
.top-list::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.2) !important;
}

/* ── 19. MINES info-row tier flashes ──────── */
.mi-card {
  transition: border-color 0.3s ease, background 0.3s ease;
  position: relative;
  overflow: hidden;
}
.mi-card.flash {
  animation: miCardFlash 0.6s ease-out;
}
@keyframes miCardFlash {
  0%   { border-color: rgba(110,231,183,0.7); background: rgba(110,231,183,0.10); }
  100% { /* settles */ }
}
.mi-mult {
  transition: background 0.3s ease;
}
.mi-mult.tier-mid,
.mi-mult.tier-hi { animation: miMultPop 0.4s cubic-bezier(.16,1.4,.3,1); }
@keyframes miMultPop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ── 20. CRASH STAKE inputs — premium glow ─── */
.crash-stake-input,
.mines-stake-input,
input[type="number"].crash-stake-input,
input.crash-grant-row[type="number"] {
  background: rgba(0,0,0,0.55) !important;
  text-shadow: 0 0 8px rgba(255,213,106,0.30) !important;
}

/* ── 21. NAV-glass — добавим subtle bottom-shine ── */
.tabs.nav-glass::after {
  content: '';
  position: absolute;
  bottom: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  pointer-events: none;
}

/* ── 23. CRASH ROCKET — better idle micro-animation ── */
.crash-rocket.idle {
  animation: rocketIdle 3.8s ease-in-out infinite !important;
}
@keyframes rocketIdle {
  0%, 100% { transform: translate(-50%, 0) rotate(-12deg); filter: drop-shadow(0 4px 14px rgba(255,86,112,0.5)); }
  50%      { transform: translate(-50%, -8px) rotate(-15deg); filter: drop-shadow(0 4px 22px rgba(255,86,112,0.7)); }
}

/* ── 24. CRASH STATUS line — better look ── */
.crash-status {
  font-size: 12.5px !important;
  letter-spacing: 0.3px;
  padding: 8px 14px !important;
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px !important;
  bottom: 14px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 28px);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ── 25. Profile: avatar pulse on update ── */
.avatar { transition: transform 0.2s ease; }
.avatar:active { transform: scale(0.95); }

/* ── 26. Skeleton variations ──────────────── */
.skel-text-lg { height: 22px; }
.skel-text-sm { height: 12px; }
.skel-card-lg { height: 120px; }
.skel-card { height: 80px; }

/* ── 27. NEWS items premium ───────────────── */
.news-item {
  position: relative;
  overflow: hidden;
}
.news-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(255,213,106,0.50), rgba(255,86,112,0.30));
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transition: opacity 0.25s;
}
.news-item:hover::before { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   REDUCE-MOTION respect
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .wtb-value .m-coin,
  .empty-rich .empty-icon,
  .bpo-card::before,
  .crash-rocket.idle,
  .mi-card.flash,
  .mi-mult.tier-mid,
  .mi-mult.tier-hi { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   POLISH WAVE v=106 part 2 — top-bar + slots + interactions
   ══════════════════════════════════════════════════════════ */

/* ── 28. TOP-BAR — deeper polish ────────────────────────── */
.topbar {
  position: relative;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255,213,106,0.05), transparent 70%),
    linear-gradient(180deg, rgba(15,12,30,0.98), rgba(7,7,13,0.96)) !important;
  border-bottom: 1px solid rgba(255,213,106,0.10) !important;
}
.topbar::before {
  content: '';
  position: absolute;
  bottom: -1px; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,213,106,0.45), transparent);
  pointer-events: none;
}

/* ── 29. M-PILL (header) — premium ─────────────────────── */
.b-item.ms {
  background:
    radial-gradient(circle at 0% 50%, rgba(255,213,106,0.16), transparent 60%),
    linear-gradient(135deg, rgba(20,15,30,0.9), rgba(10,8,20,0.95)) !important;
  border: 1.5px solid rgba(255,213,106,0.45) !important;
  box-shadow:
    0 4px 16px rgba(255,213,106,0.18),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.18s ease !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.b-item.ms:hover {
  border-color: rgba(255,213,106,0.65) !important;
  box-shadow:
    0 6px 22px rgba(255,213,106,0.30),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
.b-item.ms:active {
  transform: scale(0.97);
}

/* ── 30. BRAND-MARK — premium 3D ────────────────────────── */
.brand-mark {
  background: linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
  box-shadow:
    0 4px 16px var(--gold-glow),
    inset 0 1px 0 rgba(255,255,255,0.50),
    inset 0 -2px 4px rgba(0,0,0,0.20) !important;
  position: relative;
  overflow: hidden;
}
.brand-mark::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.55) 50%, transparent 65%);
  animation: brandMarkShine 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes brandMarkShine {
  0%, 70% { left: -100%; }
  85%     { left: 200%; }
  100%    { left: 200%; }
}

/* ── 31. SLOT MACHINE — final polish ─────────────────── */
.slot-mode-card {
  position: relative;
  overflow: hidden;
}
.slot-mode-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.04) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.slot-mode-card:hover::before { transform: translateX(100%); }
.slot-mode-card.active[data-mode="farm"] {
  border-color: rgba(110,231,183,0.50) !important;
  box-shadow:
    0 8px 24px rgba(110,231,183,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.smc-icon {
  font-size: 28px !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}
.smc-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.smc-sub {
  font-size: 11px !important;
  color: rgba(201,212,232,0.55);
  margin-bottom: 6px;
}
.smc-cost {
  font-size: 13px !important;
  font-weight: 800;
  color: #ffd76a;
}

/* ── 32. SP-result title (slot) — subtle accent ─────── */
.sp-result-sub {
  font-size: 13px !important;
  font-weight: 600;
  color: rgba(255,255,255,0.78) !important;
}
.sp-result-sub b {
  color: #ffd76a;
  font-weight: 800;
}

/* ── 33. CRASH PARTICLES — polish ────────────────── */
.cp-particle {
  filter: blur(0.5px);
  opacity: 0.85;
}

/* ── 34. CRASH TRAJECTORY path — pulse glow ─────── */
.crash-trajectory.active path {
  filter: drop-shadow(0 0 4px rgba(255,213,106,0.55));
}

/* ── 35. HUB GAME TILES — subtle improvements ──── */
.hub-game-tile {
  isolation: isolate;
}
.hub-game-tile.live {
  border-width: 1.5px !important;
}
.hgt-art {
  position: relative;
  overflow: hidden;
}
.hgt-art::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent);
  pointer-events: none;
  z-index: 2;
  border-radius: 14px 14px 0 0;
}
.hgt-cta {
  transition: filter 0.18s ease, transform 0.15s ease;
}
.hub-game-tile:hover .hgt-cta {
  filter: brightness(1.08);
  transform: translateX(2px);
}

/* ── 36. HUB WIDGETS — interactive feedback ───── */
.hub-widget {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hub-widget:hover {
  border-color: rgba(255,213,106,0.40) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.4) !important;
}
.hub-widget:hover .hw-cta {
  filter: brightness(1.08);
  transform: scale(1.04);
}
.hw-cta {
  transition: filter 0.18s ease, transform 0.15s ease;
}

/* ── 37. CRASH ACTION BTN — final touches ─────── */
.crash-action-btn {
  border-radius: 16px !important;
  letter-spacing: 0.5px;
  font-weight: 900 !important;
  text-transform: uppercase;
  font-size: 14px !important;
  padding: 18px !important;
}
.crash-action-btn.cash-out .cab-mult {
  font-size: 12px !important;
  background: rgba(0,0,0,0.20) !important;
  padding: 4px 10px !important;
}

/* ── 38. CRASH stake/auto-row — tweaks ─────── */
.crash-stake-row {
  background: linear-gradient(180deg, #15151f, #0a0a14) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 14px !important;
  padding: 14px !important;
}
.crash-stake-label {
  font-size: 10.5px !important;
  letter-spacing: 1.2px !important;
  color: rgba(201,212,232,0.55) !important;
}
.crash-auto-row {
  background: linear-gradient(180deg, rgba(255,213,106,0.04), rgba(0,0,0,0.20)) !important;
  border: 1px solid rgba(255,213,106,0.18) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
}

/* ── 39. MINES bomb-row presets — enhanced ─── */
.mines-bombs-row {
  background: linear-gradient(180deg, #15151f, #0a0a14) !important;
  border: 1px solid rgba(199,125,255,0.20) !important;
  border-radius: 14px !important;
}
.mbp.active {
  background: linear-gradient(135deg, #ff5670, #c77dff) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(255,86,112,0.45),
              inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* ── 40. CSP presets ───────────────────────── */
.csp.active {
  background: linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
  color: #1a1410 !important;
  box-shadow: 0 4px 14px var(--gold-glow),
              inset 0 1px 0 rgba(255,255,255,0.30) !important;
}

/* ══════════════════════════════════════════════════════════
   SCROLL FADE on top of #screens — subtle gradient overlay
   ══════════════════════════════════════════════════════════ */
#screens {
  position: relative;
}

/* ══════════════════════════════════════════════════════════
   GLOBAL TYPOGRAPHY refine
   ══════════════════════════════════════════════════════════ */
body {
  font-feature-settings: 'cv11', 'ss01', 'kern';
  text-rendering: optimizeLegibility;
}
.num, [class*="num-"] {
  font-feature-settings: 'tnum';
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark::after,
  .slot-mode-card::before,
  .hub-game-tile.live::after { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   POLISH WAVE v=107 part 3 — final touches
   ══════════════════════════════════════════════════════════ */

/* ── 41. SLOT WIN POPUPS — enhanced ─────────────────── */
.win-popup {
  font-weight: 900 !important;
  letter-spacing: 0.4px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
.bonus-mult-badge {
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,213,106,0.28), transparent 60%),
    linear-gradient(135deg, rgba(255,86,112,0.40), rgba(199,125,255,0.30)) !important;
  border: 1.5px solid rgba(255,213,106,0.55) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 8px 28px rgba(255,86,112,0.40),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}
.bmb-mult {
  font-weight: 900 !important;
  letter-spacing: -1px;
}
.bmb-label {
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  font-size: 10px !important;
}

/* ── 42. CASCADE MULT BADGE — refined ─────────────── */
.cascade-mult-badge {
  background: linear-gradient(135deg, #6ee7b7, #10b981) !important;
  color: #052e1a !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 18px rgba(110,231,183,0.45),
              inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* ── 43. SHEET-handle — visual hint to drag ──── */
.sheet-handle {
  width: 44px !important;
  height: 5px !important;
  background: rgba(255,255,255,0.18) !important;
  border-radius: 999px !important;
  margin: 0 auto 12px !important;
  transition: background 0.2s ease;
}
.sheet:hover .sheet-handle {
  background: rgba(255,213,106,0.40) !important;
}

/* ── 44. NOTIF DRAWER — premium slide ─────── */
.drawer-card {
  width: 360px !important;
  max-width: 92vw !important;
}
.drawer-body {
  padding: 6px 10px 16px !important;
}
.notif-item {
  cursor: pointer;
  position: relative;
  padding-left: 14px !important;
}
.notif-item.unread {
  border-color: rgba(255,86,112,0.40) !important;
}

/* ── 45. AVATAR — shimmer ─────────────────── */
.profile-head .avatar {
  position: relative;
  overflow: hidden;
}
.profile-head .avatar::before {
  content: '';
  position: absolute;
  top: -100%; left: -100%;
  width: 50%; height: 200%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.30) 50%, transparent 65%);
  animation: avatarShine 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes avatarShine {
  0%, 65% { top: -100%; left: -100%; }
  80%     { top: 100%; left: 200%; }
  100%    { top: 100%; left: 200%; }
}

/* ── 46. INPUT focus states унифицированные ── */
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  outline: none !important;
}

/* ── 47. CRASH HISTORY-STRIP scroll fade ──── */
.crash-history-strip {
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* ── 48. CRASH-ROCKET-glow — больше депса ── */
.crash-rocket-glow {
  filter: blur(12px) !important;
}
.crash-rocket-glow.active {
  background: radial-gradient(circle, rgba(255,213,106,0.75) 0%, rgba(255,86,112,0.35) 35%, transparent 70%) !important;
}

/* ── 49. FEED HERO — refined ─────────────── */
.feed-hero {
  position: relative;
  overflow: hidden;
}
.feed-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 60%; height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,86,112,0.45), transparent);
  pointer-events: none;
}

/* ── 50. CRO close button — focus polish ── */
.cro-close-btn {
  border-radius: 16px !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 14px !important;
  padding: 16px !important;
}

/* ── 51. M-COIN (header pill) — premium feel ── */
.b-item.ms .m-coin {
  filter: drop-shadow(0 2px 6px rgba(255,213,106,0.55)) !important;
}

/* ── 52. PROFILE WALLET-card (если показывается) ── */
.wallet-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,213,106,0.10), transparent 60%),
    linear-gradient(180deg, #15151f, #0a0a14) !important;
}

/* ── 53. EMPTY-rich (большие empty-states) ─ */
.empty-rich {
  padding: 36px 16px !important;
}
.empty-rich .empty-icon {
  font-size: 56px !important;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4));
}

/* ── 54. CRASH-RULES-card / CRASH-INFO-card refined ── */
.crash-rules {
  font-size: 13.5px !important;
}
.crash-rules li {
  margin-bottom: 6px;
  padding-left: 4px;
}

/* ── 55. WHEEL-spin-btn enhanced ─────────── */
#wheelSpinBtn {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.30), transparent 60%),
    linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
  box-shadow:
    0 8px 24px var(--gold-glow),
    inset 0 1px 0 rgba(255,255,255,0.50) !important;
  font-weight: 900 !important;
  letter-spacing: 0.6px;
  font-size: 16px !important;
  padding: 16px !important;
}

/* ── 56. WALLET HISTORY items polish ─── */
.wh-item {
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.1)) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  margin-bottom: 6px;
  border: 1px solid rgba(255,255,255,0.04);
  transition: border-color 0.2s, background 0.2s;
}
.wh-item:hover {
  border-color: rgba(255,213,106,0.20);
  background: linear-gradient(180deg, rgba(255,213,106,0.04), rgba(0,0,0,0.1));
}
.wh-reason {
  font-size: 13px !important;
  font-weight: 700 !important;
}
.wh-time {
  font-size: 10.5px !important;
  color: rgba(201,212,232,0.50) !important;
}
.wh-delta {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px;
}
.wh-delta.plus { color: #6ee7b7 !important; }
.wh-delta.minus { color: #ff5670 !important; }

/* ── 57. SCROLLBAR глобально (не только feed) ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255,213,106,0.35), rgba(255,86,112,0.25));
  border-radius: 999px;
}

/* ── 58. CRASH-PARTICLES — explosion shapes ── */
.cp-particle {
  border-radius: 50%;
}

/* ── 59. CRASH STAGE depth — vignette ── */
.crash-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0,0,0,0.45));
  pointer-events: none;
  z-index: 4;
}

/* ── 60. SCREEN HEADERS animation на enter ── */
.screen.active .feed-hero,
.screen.active .hub-hero,
.screen.active .wallet-tab-balance {
  animation: screenHeaderIn 0.5s ease-out;
}
@keyframes screenHeaderIn {
  0%   { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .profile-head .avatar::before,
  .screen.active .feed-hero,
  .screen.active .hub-hero,
  .screen.active .wallet-tab-balance { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   FIX (v=108) — Game-tile rotating conic-gradient → clean pulse
   Старый conic-gradient rotation создавал диагональные
   pink/purple полоски через тайл — заменяем на чистую
   gold-обводку с пульсацией shadow.
   ══════════════════════════════════════════════════════════ */
.hub-game-tile.live::after {
  display: none !important;       /* убираем conic ring */
}
.hub-game-tile.live {
  border: 1.5px solid rgba(255,213,106,0.45) !important;
  box-shadow:
    0 8px 22px rgba(255,213,106,0.18),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
  animation: liveBorderPulse 2.8s ease-in-out infinite !important;
}
@keyframes liveBorderPulse {
  0%, 100% {
    border-color: rgba(255,213,106,0.40);
    box-shadow:
      0 8px 22px rgba(255,213,106,0.16),
      inset 0 1px 0 rgba(255,255,255,0.06);
  }
  50% {
    border-color: rgba(255,213,106,0.70);
    box-shadow:
      0 12px 30px rgba(255,213,106,0.36),
      0 0 0 1px rgba(255,213,106,0.20),
      inset 0 1px 0 rgba(255,255,255,0.10);
  }
}

/* SOON-tiles — убираем диагональный sheen overlay */
.hub-game-tile.soon::after {
  display: none !important;
}
.hub-game-tile.soon::before {
  display: none !important;       /* убираем sweep на soon тоже */
}

/* LIVE-tile shimmer triggers — only on press, чище */
.hub-game-tile::before {
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255,213,106,0.10) 50%,
    transparent 65%) !important;
}

/* HGT-art top gloss — только на active LIVE tile, чтобы не было лишних линий */
.hub-game-tile.soon .hgt-art::after {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hub-game-tile.live { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   Drawer close button + actions wrapper (v=110)
   ══════════════════════════════════════════════════════════ */
.drawer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.drawer-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,86,112,0.08);
  border: 1px solid rgba(255,86,112,0.20);
  color: #ff8aa3;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.drawer-close:hover {
  background: rgba(255,86,112,0.18);
  color: #ff5670;
}
.drawer-close:active {
  transform: scale(0.92);
}

/* ── Support card (Profile) ─────────────────────────── */
.support-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,213,106,0.08), transparent 60%),
    linear-gradient(180deg, #15151f 0%, #0a0a14 100%) !important;
  border: 1px solid rgba(255,213,106,0.20) !important;
}
.support-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0 4px;
}
.support-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(255,213,106,0.30),
              inset 0 1px 0 rgba(255,255,255,0.30);
}
.support-text { flex: 1; min-width: 0; }
.support-label {
  font-size: 11px;
  color: rgba(201,212,232,0.55);
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}
.support-link {
  font-size: 15px;
  font-weight: 800;
  color: #ffd76a;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: filter 0.18s;
}
.support-link:hover { filter: brightness(1.15); }
.support-row .btn {
  flex-shrink: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* Wallet — 2 метода (Stars + CryptoBot) занимают равный grid */
.wallet-methods {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* ══════════════════════════════════════════════════════════
   🎲 DICE ROYALE styles (v=113)
   ══════════════════════════════════════════════════════════ */
#screenDice { padding: 0 !important; }

.dice-stage {
  position: relative;
  height: 320px;
  margin: 12px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(110,231,183,0.30), transparent 65%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(58,207,255,0.25), transparent 70%),
    linear-gradient(180deg, #02100a 0%, #04201a 50%, #062818 100%);
  border: 1px solid rgba(110,231,183,0.30);
  box-shadow: 0 12px 36px rgba(0,0,0,0.5),
              inset 0 1px 0 rgba(255,255,255,0.05);
}
.dice-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255,213,106,0.55), transparent),
    radial-gradient(1.5px 1.5px at 28% 65%, rgba(110,231,183,0.45), transparent),
    radial-gradient(2px 2px at 52% 11%, rgba(58,207,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 78% 56%, rgba(199,125,255,0.45), transparent),
    radial-gradient(2px 2px at 88% 28%, rgba(255,213,106,0.45), transparent);
  animation: crashStarsTwinkle 4s ease-in-out infinite;
}
.dice-history-strip {
  position: absolute; top: 8px; left: 8px; right: 8px;
  display: flex; gap: 4px;
  overflow-x: auto; scrollbar-width: none;
  z-index: 5;
  padding: 4px 2px;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.dice-history-strip::-webkit-scrollbar { display: none; }
.dhs-pill {
  flex-shrink: 0;
  font-size: 10px; font-weight: 800;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.75);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}
.dhs-pill.win { color: #6ee7b7; border-color: rgba(110,231,183,0.45); background: rgba(110,231,183,0.10); }
.dhs-pill.loss { color: #ff5670; border-color: rgba(255,86,112,0.30); background: rgba(255,86,112,0.06); }

/* ── Arena с кубиком ── */
.dice-arena {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 2;
}

.dice-cube {
  width: 110px; height: 110px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(20deg);
  transition: transform 0.3s ease-out;
  margin-bottom: 24px;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.5));
}
.dice-cube.rolling {
  animation: diceRoll 1.2s cubic-bezier(.16,1,.3,1);
}
@keyframes diceRoll {
  0%   { transform: rotateX(0) rotateY(0) translateY(-30px); }
  20%  { transform: rotateX(720deg) rotateY(540deg); }
  40%  { transform: rotateX(1080deg) rotateY(360deg); }
  60%  { transform: rotateX(1440deg) rotateY(720deg); }
  80%  { transform: rotateX(1800deg) rotateY(1080deg) translateY(8px); }
  100% { transform: rotateX(-20deg) rotateY(20deg) translateY(0); }
}
.dc-face {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 88px;
  background: linear-gradient(135deg, #fff 0%, #d8d8e8 100%);
  border-radius: 18px;
  border: 2px solid rgba(0,0,0,0.15);
  color: #1a1410;
  box-shadow:
    inset 0 -6px 12px rgba(0,0,0,0.18),
    inset 0 4px 8px rgba(255,255,255,0.4);
}
/* 6 faces in 3D — though we mostly show 1 face at end */
.dc-1 { transform: translateZ(55px); }
.dc-2 { transform: rotateY(180deg) translateZ(55px); }
.dc-3 { transform: rotateY( 90deg) translateZ(55px); }
.dc-4 { transform: rotateY(-90deg) translateZ(55px); }
.dc-5 { transform: rotateX( 90deg) translateZ(55px); }
.dc-6 { transform: rotateX(-90deg) translateZ(55px); }

.dice-result {
  text-align: center;
  z-index: 3;
}
.dr-num {
  font-size: 48px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #fff;
  letter-spacing: -1px;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.dr-num.win { color: #6ee7b7; }
.dr-num.loss { color: #ff5670; }
.dr-status {
  font-size: 13px;
  color: rgba(201,212,232,0.75);
  margin-top: 6px;
  padding: 6px 14px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  display: inline-block;
}
.dr-status.win {
  color: #6ee7b7;
  border-color: rgba(110,231,183,0.40);
  background: rgba(110,231,183,0.10);
  font-weight: 700;
}
.dr-status.loss {
  color: #ff5670;
  border-color: rgba(255,86,112,0.40);
  background: rgba(255,86,112,0.10);
}

/* ── Controls ── */
.dice-controls {
  padding: 0 12px;
  margin-bottom: 14px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.dice-direction {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: linear-gradient(180deg, #15151f, #0a0a14);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 5px;
}
.dd-btn {
  padding: 11px 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(201,212,232,0.65);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.2s;
}
.dd-btn.active {
  background: linear-gradient(135deg, #6ee7b7, #10b981);
  color: #052e1a;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(110,231,183,0.40);
}

.dice-slider-row {
  background: linear-gradient(180deg, #15151f, #0a0a14);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 14px;
}
.dsr-label {
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(201,212,232,0.55);
  margin-bottom: 10px;
  text-align: center;
}
.dsr-target {
  font-size: 22px;
  font-weight: 900;
  color: #6ee7b7;
  letter-spacing: 0.5px;
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}
.dice-slider {
  width: 100%;
  height: 6px;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(90deg, #6ee7b7, #ffd76a, #ff5670);
  border-radius: 999px;
  outline: none;
  margin: 12px 0 14px;
}
.dice-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff, #d8d8e8);
  border: 3px solid #6ee7b7;
  box-shadow: 0 4px 12px rgba(110,231,183,0.45);
  cursor: pointer;
  transition: transform 0.15s;
}
.dice-slider::-webkit-slider-thumb:active {
  transform: scale(1.15);
}
.dice-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff, #d8d8e8);
  border: 3px solid #6ee7b7;
  box-shadow: 0 4px 12px rgba(110,231,183,0.45);
  cursor: pointer;
}

.dsr-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.dsr-info-cell {
  text-align: center;
  padding: 8px 4px;
  background: rgba(0,0,0,0.3);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.05);
}
.dsr-info-l {
  font-size: 9px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(201,212,232,0.55);
  margin-bottom: 2px;
}
.dsr-info-v {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.dsr-info-v.gold {
  color: #ffd76a;
}

/* History grid */
.dice-history-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.dhg-cell {
  padding: 8px 4px;
  border-radius: 8px;
  text-align: center;
  font-size: 13px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.3);
}
.dhg-cell.win {
  color: #6ee7b7;
  border-color: rgba(110,231,183,0.30);
  background: rgba(110,231,183,0.08);
}
.dhg-cell.loss {
  color: #ff5670;
  border-color: rgba(255,86,112,0.25);
}

@media (prefers-reduced-motion: reduce) {
  .dice-cube.rolling, .dice-bg { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   🎯 PLINKO styles (v=113)
   ══════════════════════════════════════════════════════════ */
#screenPlinko { padding: 0 !important; }

.plinko-stage {
  position: relative;
  margin: 12px;
  padding: 14px;
  border-radius: 22px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(199,125,255,0.30), transparent 65%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(58,207,255,0.20), transparent 70%),
    linear-gradient(180deg, #0a0420 0%, #14082a 50%, #1a0a3a 100%);
  border: 1px solid rgba(199,125,255,0.30);
  box-shadow: 0 12px 36px rgba(0,0,0,0.5);
  overflow: hidden;
}
.plinko-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255,213,106,0.55), transparent),
    radial-gradient(1.5px 1.5px at 28% 65%, rgba(199,125,255,0.45), transparent),
    radial-gradient(2px 2px at 52% 11%, rgba(58,207,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 78% 56%, rgba(255,86,112,0.45), transparent),
    radial-gradient(2px 2px at 88% 28%, rgba(110,231,183,0.45), transparent);
  animation: crashStarsTwinkle 4s ease-in-out infinite;
  pointer-events: none;
}

/* Board with pegs (renderer fills it) */
.plinko-board {
  position: relative;
  margin: 0 auto;
  height: 360px;
  z-index: 2;
}
.pb-pegs {
  position: relative;
  width: 100%;
  height: 100%;
}
.pb-peg {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8d6, #ffd76a 60%, #c97a1f 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4),
              0 0 6px rgba(255,213,106,0.45);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.pb-ball {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #ffd76a 60%, #ff5670 100%);
  box-shadow: 0 4px 12px rgba(255,86,112,0.55),
              inset 0 1px 0 rgba(255,255,255,0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 5;
  transition: transform 0.18s cubic-bezier(.55,0.06,.68,.19);
}
.pb-ball-glow {
  position: absolute; inset: -8px;
  background: radial-gradient(circle, rgba(255,213,106,0.55), transparent 70%);
  border-radius: 50%;
  filter: blur(6px);
  z-index: -1;
}

/* Multiplier slots row */
.plinko-slots {
  position: relative;
  display: flex;
  gap: 3px;
  padding: 0 4px;
  margin: -8px 0 8px;
  z-index: 2;
}
.ps-slot {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 2px;
  border-radius: 8px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  background: linear-gradient(180deg, #1a1a2c, #0a0a14);
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.65);
  transition: transform 0.25s, box-shadow 0.3s;
}
/* Tier coloring for multiplier slots */
.ps-slot.t-mega { background: linear-gradient(180deg, #c77dff, #7b2cbf); color: #fff; border-color: rgba(199,125,255,0.55); }
.ps-slot.t-hi   { background: linear-gradient(180deg, #ff5670, #c77dff); color: #fff; border-color: rgba(255,86,112,0.45); }
.ps-slot.t-mid  { background: linear-gradient(180deg, #ffd76a, #ff9b3a); color: #1a1410; border-color: rgba(255,213,106,0.45); }
.ps-slot.t-lo   { background: linear-gradient(180deg, #2a2a3a, #14141a); color: rgba(255,255,255,0.55); }
.ps-slot.hit {
  animation: psSlotHit 0.6s cubic-bezier(.16,1.4,.3,1);
  z-index: 3;
}
@keyframes psSlotHit {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,213,106,0.60); }
  40%  { transform: scale(1.18); box-shadow: 0 0 0 8px rgba(255,213,106,0.30); }
  100% { transform: scale(1.05); box-shadow: 0 0 0 0 rgba(255,213,106,0); }
}

.plinko-status {
  position: relative;
  text-align: center;
  font-size: 13px;
  color: rgba(201,212,232,0.7);
  padding: 8px 14px;
  background: rgba(0,0,0,0.45);
  border-radius: 999px;
  width: max-content;
  max-width: calc(100% - 28px);
  margin: 0 auto;
  z-index: 2;
}
.plinko-status.win {
  color: #6ee7b7;
  background: rgba(110,231,183,0.12);
  border: 1px solid rgba(110,231,183,0.40);
  font-weight: 700;
}

.plinko-controls {
  padding: 0 12px;
  margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.plinko-risk-row {
  background: linear-gradient(180deg, #15151f, #0a0a14);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
}
.prr-label {
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(201,212,232,0.55);
  flex-shrink: 0;
  width: 76px;
}
.prr-options {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  flex: 1;
}
.prr-opt {
  padding: 8px 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: rgba(201,212,232,0.75);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, background 0.2s, border-color 0.25s;
}
.prr-opt:active { transform: scale(0.95); }
.prr-opt.active {
  background: linear-gradient(135deg, #c77dff, #7b2cbf);
  color: #fff;
  border-color: transparent;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(199,125,255,0.40);
}

/* Plinko history */
.plinko-history-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.phg-cell {
  padding: 8px 4px;
  border-radius: 8px;
  text-align: center;
  font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.85);
}
.phg-cell.win { color: #6ee7b7; border-color: rgba(110,231,183,0.30); background: rgba(110,231,183,0.08); }
.phg-cell.mega { color: #c77dff; border-color: rgba(199,125,255,0.35); background: rgba(199,125,255,0.08); }
.phg-cell.loss { color: rgba(255,255,255,0.45); }

@media (prefers-reduced-motion: reduce) {
  .plinko-bg, .ps-slot.hit { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   UX POLISH v=114 — game-feel improvements
   ══════════════════════════════════════════════════════════ */

/* Plinko peg flash on ball-collision */
.pb-peg.hit {
  animation: pegHit 0.35s ease-out;
}
@keyframes pegHit {
  0%   { transform: translate(-50%, -50%) scale(1);
         box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 0 6px rgba(255,213,106,0.45); }
  40%  { transform: translate(-50%, -50%) scale(1.7);
         box-shadow: 0 0 0 4px rgba(255,213,106,0.30), 0 0 14px rgba(255,213,106,0.85); }
  100% { transform: translate(-50%, -50%) scale(1);
         box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 0 6px rgba(255,213,106,0.45); }
}

/* Loading skeleton helpers (для empty-list плейсхолдеров) */
.skel-block.skel-game {
  height: 80px;
  margin-bottom: 8px;
  border-radius: 12px;
}

/* Repeat-last-bet button (если используешь) */
.csp.repeat-last {
  background: linear-gradient(135deg, rgba(110,231,183,0.20), rgba(58,207,255,0.15)) !important;
  border-color: rgba(110,231,183,0.40) !important;
  color: #6ee7b7 !important;
}

/* Empty states более живые */
.empty-rich .empty-icon {
  display: inline-block;
  /* Уже было animation в polish wave — гарантируем bigger */
  font-size: 56px !important;
}

/* Stake-input — focus highlight активнее */
.crash-stake-input:focus {
  border-color: #ffd76a !important;
  box-shadow: 0 0 0 3px rgba(255,213,106,0.25),
              inset 0 1px 0 rgba(255,255,255,0.10) !important;
  background: rgba(255,213,106,0.04) !important;
}

/* Highlight active screen during transitions */
.screen.active {
  animation: screenIn 0.3s ease-out;
}
@keyframes screenIn {
  from { opacity: 0.7; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* On-press tactile feedback for any clickable */
button:active:not(:disabled),
.btn:active:not(:disabled) {
  filter: brightness(0.95);
}

/* Better disabled state */
.crash-action-btn:disabled,
button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Smooth bottom-nav indicator transitions */
.tabs.nav-glass .tab.active::before {
  transition: transform 0.25s cubic-bezier(.16,1.4,.3,1), opacity 0.2s;
}

/* Card-stagger fade-in for game lists */
.dice-history-grid > .dhg-cell,
.plinko-history-grid > .phg-cell,
.mines-history > .mh-cell,
.crash-history-grid > .chg-cell {
  animation: cellFadeIn 0.35s ease-out backwards;
}
.dice-history-grid > .dhg-cell:nth-child(1)  { animation-delay: 0.00s; }
.dice-history-grid > .dhg-cell:nth-child(2)  { animation-delay: 0.04s; }
.dice-history-grid > .dhg-cell:nth-child(3)  { animation-delay: 0.08s; }
.dice-history-grid > .dhg-cell:nth-child(4)  { animation-delay: 0.12s; }
.dice-history-grid > .dhg-cell:nth-child(5)  { animation-delay: 0.16s; }
.dice-history-grid > .dhg-cell:nth-child(6)  { animation-delay: 0.20s; }
.dice-history-grid > .dhg-cell:nth-child(7)  { animation-delay: 0.24s; }
.dice-history-grid > .dhg-cell:nth-child(8)  { animation-delay: 0.28s; }
.dice-history-grid > .dhg-cell:nth-child(9)  { animation-delay: 0.32s; }
.dice-history-grid > .dhg-cell:nth-child(10) { animation-delay: 0.36s; }
@keyframes cellFadeIn {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pb-peg.hit,
  .screen.active,
  .dice-history-grid > .dhg-cell,
  .plinko-history-grid > .phg-cell,
  .mines-history > .mh-cell,
  .crash-history-grid > .chg-cell { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   PLINKO slots — fix overflow + adaptive sizing (v=115)
   ══════════════════════════════════════════════════════════ */

/* Slots row: тонкий gap, padding убран чтобы все умещались */
.plinko-slots {
  gap: 2px !important;
  padding: 0 !important;
  margin: 4px 8px 8px !important;
}

.ps-slot {
  /* Уменьшаем base размеры */
  padding: 7px 1px !important;
  font-size: 10px !important;
  letter-spacing: -0.3px !important;
  border-radius: 6px !important;
  /* min-width: 0 уже есть; перестрахуемся flex-basis: 0 */
  flex-basis: 0 !important;
}

/* На 16 рядах слотов 17 — нужен ещё компактнее */
.ps-slot[data-rows="16"] {
  font-size: 8.5px !important;
  padding: 6px 0 !important;
  letter-spacing: -0.5px !important;
  border-radius: 5px !important;
}

/* На 8 рядах (9 слотов) — можем дать побольше */
.ps-slot[data-rows="8"] {
  font-size: 12px !important;
  padding: 9px 4px !important;
  border-radius: 8px !important;
}

/* Узкие экраны: ещё компактнее */
@media (max-width: 380px) {
  .ps-slot { font-size: 9px !important; padding: 6px 0 !important; }
  .ps-slot[data-rows="16"] { font-size: 8px !important; }
  .ps-slot[data-rows="8"] { font-size: 11px !important; padding: 8px 2px !important; }
  .plinko-slots { gap: 1.5px !important; }
}

/* На очень узких — все слоты могут стать чуть длиннее по вертикали */
@media (max-width: 340px) {
  .ps-slot { font-size: 8.5px !important; }
  .ps-slot[data-rows="16"] { font-size: 7.5px !important; }
}

/* ══════════════════════════════════════════════════════════
   CRASH ONLINE — live players list (v=116)
   ══════════════════════════════════════════════════════════ */
.crash-players-card {
  margin: 0 12px 12px;
  background: linear-gradient(180deg, #14142a 0%, #08081a 100%);
  border: 1px solid rgba(255,86,112,0.20);
  border-radius: 14px;
  overflow: hidden;
}
.crash-players-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: rgba(255,86,112,0.04);
}
.cph-icon { font-size: 15px; }
.cph-title {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,213,106,0.85);
}
.cph-count {
  margin-left: auto;
  font-size: 11px; font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(110,231,183,0.12);
  color: #6ee7b7;
  border: 1px solid rgba(110,231,183,0.30);
  font-variant-numeric: tabular-nums;
}
.crash-players-list {
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
}
.crash-players-list::-webkit-scrollbar { width: 3px; }
.crash-players-list::-webkit-scrollbar-thumb {
  background: rgba(255,213,106,0.25);
  border-radius: 999px;
}
/* Header row: "Ставка" / "Возможн. приз" — лёгкие капсюли над списком игроков */
.crash-players-thead {
  display: grid;
  grid-template-columns: 44px 1fr 64px;
  gap: 12px;
  align-items: center;
  padding: 0 12px 4px;
  margin: 6px 0 2px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.40);
  letter-spacing: 0.4px;
}
.crash-players-thead .cpt-label-stake {
  grid-column: 2;
}
.crash-players-thead .cpt-label-prize {
  grid-column: 3;
  text-align: center;
  white-space: nowrap;
}

/* === ИГРОК В РАУНДЕ — 3-колоночный layout: [avatar] [info] [prize 64px] === */
.crash-player-row {
  display: grid;
  grid-template-columns: 44px 1fr 64px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  margin: 4px 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20,12,42,0.55), rgba(10,6,25,0.55));
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  transition: background 0.25s ease, border-color 0.25s ease;
  animation: cprFadeIn 0.32s ease-out;
}
@keyframes cprFadeIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.crash-player-row:hover { background: linear-gradient(180deg, rgba(28,18,55,0.65), rgba(15,9,30,0.65)); }
.crash-player-row.me {
  border-color: rgba(199,125,255,0.45);
  background: linear-gradient(90deg, rgba(199,125,255,0.15) 0%, rgba(28,18,55,0.55) 50%);
  box-shadow: inset 0 0 0 1px rgba(199,125,255,0.18);
}

/* Avatar */
.cpr-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 17px; font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #ff5670, #c77dff);
  border: 2px solid rgba(255,255,255,0.10);
  text-transform: uppercase;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.30);
}
.cpr-avatar[data-avatar-flavor="0"] { background: linear-gradient(135deg, #ff5670, #ffd76a); }
.cpr-avatar[data-avatar-flavor="1"] { background: linear-gradient(135deg, #c77dff, #7b2cbf); }
.cpr-avatar[data-avatar-flavor="2"] { background: linear-gradient(135deg, #6ee7b7, #10b981); }
.cpr-avatar[data-avatar-flavor="3"] { background: linear-gradient(135deg, #3acfff, #0089b8); }
.cpr-avatar[data-avatar-flavor="4"] { background: linear-gradient(135deg, #ff9b3a, #ff5670); }
.cpr-avatar[data-avatar-flavor="5"] { background: linear-gradient(135deg, #ffd76a, #ff5670); }

/* Middle column: 2 stacked rows */
.cpr-mid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}
.cpr-name-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.cpr-name {
  color: rgba(255,255,255,0.95);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  letter-spacing: -0.1px;
}
.cpr-me {
  display: inline-block;
  font-size: 10px;
  color: #c77dff;
  font-weight: 800;
  text-transform: lowercase;
  letter-spacing: 0.3px;
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: rgba(199,125,255,0.18);
  white-space: nowrap;
  flex-shrink: 0;
}
.cpr-stake-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.cpr-stake {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ffd76a;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cpr-stake .cpr-star {
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(255,213,106,0.45));
}

/* Multiplier label (правее ⭐stake внутри средней колонки) */
.cpr-mult {
  font-size: 12px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}
.cpr-mult.active {
  color: rgba(255,255,255,0.55);
  background: transparent;
  padding: 0;
  font-weight: 700;
  font-size: 11px;
}
.cpr-mult.auto {
  color: rgba(255,213,106,0.85);
  background: rgba(255,213,106,0.08);
  font-size: 11px;
}
.cpr-mult.win {
  color: #6ee7b7;
  background: rgba(110,231,183,0.18);
  border: 1px solid rgba(110,231,183,0.30);
}
.cpr-mult.loss {
  color: #ff8aa3;
  background: rgba(255,86,112,0.14);
  border: 1px solid rgba(255,86,112,0.28);
}

/* Backward-compat: старый .cpr-status (если где-то остался) */
.cpr-status {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.cpr-status.win  { color: #6ee7b7; background: rgba(110,231,183,0.18); border: 1px solid rgba(110,231,183,0.30); }
.cpr-status.loss { color: #ff8aa3; background: rgba(255,86,112,0.14); border: 1px solid rgba(255,86,112,0.28); }
.cpr-status.active { color: rgba(255,255,255,0.55); background: transparent; }

@media (max-width: 380px) {
  .crash-player-row { grid-template-columns: 40px 1fr 56px; gap: 9px; padding: 8px 10px; }
  .cpr-avatar { width: 40px; height: 40px; font-size: 15px; }
  .cpr-name { font-size: 13px; }
  .cpr-stake-row { gap: 8px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .crash-player-row { animation: none !important; }
}

/* ── Hide Dice + Plinko (removed by user request, v=116) ── */
#screenDice,
#screenPlinko {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════
   MARKET TABS + PURCHASES HISTORY (v=117)
   ══════════════════════════════════════════════════════════ */
.market-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  margin: 0 12px 12px;
  background: linear-gradient(180deg, #15151f, #0a0a14);
  border: 1px solid var(--border-2);
  border-radius: 14px;
}
.market-tab {
  padding: 11px 6px;
  border: none;
  background: transparent;
  color: rgba(201,212,232,0.65);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.market-tab:active { transform: scale(0.97); }
.market-tab.active {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #1a1410;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(255,213,106,0.35),
              inset 0 1px 0 rgba(255,255,255,0.30);
}

/* ── Purchases-list (новый список истории на маркете) ─── */
.market-history-view .purchases-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.purchase-item {
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.15));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 0.2s, transform 0.15s;
}
.purchase-item:hover {
  border-color: rgba(255,213,106,0.30);
  transform: translateY(-1px);
}
.purchase-item.delivered {
  border-left: 3px solid #6ee7b7;
}
.purchase-item.pending {
  border-left: 3px solid #ffd76a;
}
.purchase-item.cancelled,
.purchase-item.expired {
  border-left: 3px solid rgba(255,86,112,0.50);
  opacity: 0.75;
}
.purchase-item .pi-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.purchase-item .pi-row:last-child { margin-bottom: 0; }
.purchase-item .pi-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.purchase-item .pi-status {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.purchase-item .pi-status.delivered {
  background: rgba(110,231,183,0.15);
  color: #6ee7b7;
  border: 1px solid rgba(110,231,183,0.30);
}
.purchase-item .pi-status.pending {
  background: rgba(255,213,106,0.10);
  color: #ffd76a;
  border: 1px solid rgba(255,213,106,0.30);
}
.purchase-item .pi-status.cancelled,
.purchase-item .pi-status.expired {
  background: rgba(255,86,112,0.10);
  color: #ff8aa3;
  border: 1px solid rgba(255,86,112,0.25);
}
.purchase-item .pi-meta {
  font-size: 11px;
  color: rgba(201,212,232,0.55);
}
.purchase-item .pi-voucher b {
  color: #ffd76a;
  font-family: ui-monospace, SF Mono, Monaco, Consolas, monospace;
  letter-spacing: 0.5px;
}
.purchase-item .pi-date {
  font-variant-numeric: tabular-nums;
}
.purchase-item .pi-price {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,86,112,0.85);
}

/* ══════════════════════════════════════════════════════════
   FIX (v=118) — убираем резкую анимацию на poll-renders
   Crash players list + history-grids перерисовываются каждые
   350мс из-за полинга — каждое cellFadeIn / cprFadeIn
   срабатывало заново и резало глаз. Отключаем эти анимации.
   ══════════════════════════════════════════════════════════ */

/* Players list — без fade-in на каждый poll */
.crash-player-row {
  animation: none !important;
}

/* History-cells (Dice/Plinko/Mines/Crash) — без stagger на каждый refresh */
.dice-history-grid > .dhg-cell,
.plinko-history-grid > .phg-cell,
.mines-history > .mh-cell,
.crash-history-grid > .chg-cell {
  animation: none !important;
}

/* Smooth transitions при изменении data — без harsh fade-in */
.crash-player-row,
.crash-history-strip .chs-pill,
.crash-history-grid > .chg-cell {
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ══════════════════════════════════════════════════════════
   FIX (v=119) — big-win-counter gradient-text bug
   `text-shadow` рушит `background-clip: text` → gradient
   fills всю box → видна сплошная gold-полоска вместо «+N M».
   Заменяем на сплошной золотой fill.
   ══════════════════════════════════════════════════════════ */
.big-win-counter .bwc-num,
.big-win-counter .bwc-prefix,
.big-win-counter.tier-mega .bwc-num,
.big-win-counter.tier-mega .bwc-prefix,
.big-win-counter.tier-big .bwc-num,
.big-win-counter.tier-big .bwc-prefix {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #ffd76a !important;
  color: #ffd76a !important;
  text-shadow: none !important;
  filter: none !important;
}

/* ══════════════════════════════════════════════════════════
   FIX (v=120) — ИТОГОВЫЙ FIX gradient-text проблемы
   На Telegram WebView (iOS Safari) сочетание
   background-clip:text + text-shadow / filter / backdrop-filter
   ломает text-clipping → видна сплошная gold-плашка вместо текста.
   Полный список ВСЕХ селекторов с этой проблемой — отключаем
   gradient-fill и переходим на solid color.
   ══════════════════════════════════════════════════════════ */
.b-item.ms span:last-child,
.big-win-counter .bwc-prefix,
.big-win-counter .bwc-num,
.big-win-counter.tier-mega .bwc-prefix,
.big-win-counter.tier-mega .bwc-num,
.big-win-counter.tier-big .bwc-prefix,
.big-win-counter.tier-big .bwc-num,
.bmp-mult.x10,
.bonus-mult-badge .bmb-mult,
.bpo-title,
.brand-text,
.cmd-num,
.crash-explosion .ce-text,
.crash-mult-display.crashed .cmd-num,
.crash-mult-display.tier-hi .cmd-num,
.crash-mult-display.tier-mid .cmd-num,
.cro-loss .cro-title,
.cro-loss-amount,
.cro-val.gold,
.cro-win .cro-title,
.drawer-title,
.empty-rich .empty-title,
.f-item.jackpot .h-tier,
.fch-title,
.feed-hero-title,
.feed-row.tier-mega .fr-amount,
.gp-title,
.gs-cost,
.guide-title,
.h-item.win .h-tier,
.hhs-v,
.hht-1,
.hht-2,
.jb-pool,
.jp-title,
.jpi-pool-value,
.jpi-stat-v,
.lp-value,
.mbc-price-v,
.mh-bal-value > span:first-child,
.mh-bal-value,
.mh-headline,
.mi-mult,
.mi-mult.tier-hi,
.mi-mult.tier-mid,
.mp-m-amount,
.onboard-title,
.pack-r,
.podium-stat,
.prize-stat,
.r-title.jackpot,
.ref-stat-v,
.ref-stat:nth-child(2) .ref-stat-v,
.sd-v,
.sess-cost,
.sp-result-title,
.sp-result-title.win,
.sp-result-title.jackpot,
.stat.hero .stat-v,
.stats-grid .stat-v.num,
.tu-tier-name,
.tw-amount,
.tw-profit,
.tw-title,
.vs-code,
.wb-value,
.wbc-value,
.wtb-value,
.who-name {
  /* Полностью отключаем gradient-text-fill */
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #ffd76a !important;
  color: #ffd76a !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Loss-варианты — красный fallback */
.cro-loss .cro-title,
.cro-loss-amount,
.crash-explosion .ce-text,
.crash-mult-display.crashed .cmd-num {
  -webkit-text-fill-color: #ff5670 !important;
  color: #ff5670 !important;
}

/* HHT-2 (CASINO) — белый */
.hht-2 {
  -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
  color: rgba(255,255,255,0.85) !important;
}

/* Profit/won-special — зелёный */
.cro-val.gold {
  -webkit-text-fill-color: #ffd76a !important;
  color: #ffd76a !important;
}
.tw-profit.positive {
  -webkit-text-fill-color: #6ee7b7 !important;
  color: #6ee7b7 !important;
}
.tw-profit.negative {
  -webkit-text-fill-color: #ff5670 !important;
  color: #ff5670 !important;
}
.feed-row.tier-mega .fr-amount {
  -webkit-text-fill-color: #ffd76a !important;
  color: #ffd76a !important;
}

/* Восстанавливаем backdrop-filter на ELEMENTS, не на TEXT */
.bonus-mult-badge {
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
}

/* ══════════════════════════════════════════════════════════
   FREE-BONUSES CLEANUP (v=121)
   Оставляем ТОЛЬКО login-стрик и channel-visit.
   Убираем: Колесо удачи, weekly-quests, daily-bonus, returning bonus,
   квест-виджет на главной, M-награды ачивок.
   ══════════════════════════════════════════════════════════ */

/* Weekly quests card (если показывается) */
#weeklyBox,
#profileWeeklyQuestsCard,
.card:has(> #weeklyBox) { display: none !important; }

/* Daily quests card (legacy) — оставим только если channel_visit. Просто скроем. */
#questsBox,
#profileDailyQuestsCard,
.card:has(> #questsBox) { display: none !important; }

/* Achievements card — оставляем для badges, но без M-наград (см. backend) */

/* ══════════════════════════════════════════════════════════
   CRASH ONLINE redesign — navy/stars style (v=122)
   Inspired by референс — глубокий navy фон + звёздное небо +
   синие pill'ы истории + чистый список игроков с аватарами.
   ══════════════════════════════════════════════════════════ */

/* Stage backdrop: deep navy/space instead of purple-red */
.crash-stage,
.crash-stage[data-phase="betting"],
.crash-stage[data-phase="flying"],
.crash-stage[data-phase="crashed"] {
  background:
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(58,80,180,0.20), transparent 70%),
    linear-gradient(180deg, #050818 0%, #0a1230 50%, #0e1840 100%) !important;
  border: 1px solid rgba(58,120,255,0.15) !important;
}
.crash-stage[data-phase="flying"] {
  background:
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(58,120,255,0.25), transparent 70%),
    linear-gradient(180deg, #050818 0%, #0a1438 50%, #0f1d50 100%) !important;
  animation: none !important;
}
.crash-stage[data-phase="crashed"] {
  background:
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(255,60,80,0.30), transparent 70%),
    linear-gradient(180deg, #1a0810 0%, #2a0a18 50%, #381020 100%) !important;
}

/* Dense star field (denser, smaller stars like in референс) */
.crash-stars {
  background:
    radial-gradient(1px 1px at 4% 14%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 16% 28%, rgba(255,255,255,0.7) 50%, transparent 50%),
    radial-gradient(1px 1px at 28% 8%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 38% 42%, rgba(255,255,255,0.5) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 52% 22%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 64% 56%, rgba(255,255,255,0.8) 50%, transparent 50%),
    radial-gradient(1px 1px at 76% 12%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 88% 38%, rgba(255,255,255,0.7) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 6% 72%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 22% 84%, rgba(255,255,255,0.6) 50%, transparent 50%),
    radial-gradient(1px 1px at 42% 66%, #fff 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 58% 88%, rgba(255,255,255,0.8) 50%, transparent 50%),
    radial-gradient(1px 1px at 74% 78%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 92% 92%, rgba(255,255,255,0.7) 50%, transparent 50%) !important;
}

/* Trajectory: blue gradient instead of red */
.crash-trajectory path {
  stroke: url(#trajGradBlue) !important;
}
.crash-trajectory defs linearGradient stop:first-child {
  stop-color: rgba(58,120,255,0.0) !important;
}
.crash-trajectory defs linearGradient stop:nth-child(2) {
  stop-color: rgba(120,160,255,0.55) !important;
}
.crash-trajectory defs linearGradient stop:last-child {
  stop-color: rgba(220,240,255,0.85) !important;
}

/* Rocket glow → blue tint */
.crash-rocket-glow.active {
  background: radial-gradient(circle, rgba(80,140,255,0.65) 0%, rgba(120,180,255,0.30) 35%, transparent 70%) !important;
}
.crash-rocket.flying .rocket-svg {
  filter: drop-shadow(0 4px 20px rgba(120,180,255,0.65)) !important;
}

/* Players-count badge — blue style */
.crash-players-badge {
  background: rgba(20,30,60,0.85) !important;
  border-color: rgba(58,120,255,0.40) !important;
  color: #7dc3ff !important;
}
.cpb-label { color: rgba(125,195,255,0.55) !important; }
.cpb-dot { background: #6ee7b7 !important; }

.crash-round-badge {
  background: rgba(20,30,60,0.85) !important;
  border-color: rgba(58,120,255,0.25) !important;
  color: rgba(150,200,255,0.65) !important;
}

/* Countdown ring → blue/white */
.cdr-track { stroke: rgba(120,180,255,0.10) !important; }
.cdr-progress {
  stroke: url(#cdrGrad) !important;
  filter: drop-shadow(0 0 6px rgba(120,180,255,0.65)) !important;
}
.crash-countdown-text {
  color: rgba(150,210,255,0.95) !important;
}

/* Multiplier display in flying phase → white/blue glow */
.crash-stage[data-phase="flying"] .cmd-num,
.crash-stage[data-phase="flying"] .cmd-x {
  color: #fff !important;
  text-shadow: 0 0 20px rgba(120,180,255,0.65) !important;
  -webkit-text-fill-color: #fff !important;
}
.crash-mult-display.tier-mid .cmd-num {
  color: #ffe680 !important;
  -webkit-text-fill-color: #ffe680 !important;
}
.crash-mult-display.tier-hi .cmd-num {
  color: #ff8aa3 !important;
  -webkit-text-fill-color: #ff8aa3 !important;
}

/* ══════════════════════════════════════════════════════════
   HISTORY pills — blue rounded style
   ══════════════════════════════════════════════════════════ */
.crash-history-strip {
  top: 14px !important;
}
.crash-history-strip .chs-pill {
  background: linear-gradient(180deg, #2a5cdb, #1e4ab0) !important;
  border: none !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 6px 11px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3),
              inset 0 1px 0 rgba(255,255,255,0.20);
  letter-spacing: 0;
}
.crash-history-strip .chs-pill.lo {
  background: linear-gradient(180deg, #2a3050, #1a1f3a) !important;
  color: rgba(220,230,255,0.85) !important;
}
.crash-history-strip .chs-pill.mid {
  background: linear-gradient(180deg, #2a5cdb, #1e4ab0) !important;
}
.crash-history-strip .chs-pill.hi {
  background: linear-gradient(180deg, #c77dff, #7b4cdf) !important;
}
.crash-history-strip .chs-pill.mega {
  background: linear-gradient(180deg, #ffc94d, #e09020) !important;
  color: #1a1410 !important;
  animation: none !important;
}
.crash-history-strip .chs-pill::before { display: none !important; }
.crash-history-strip .chs-pill:hover {
  transform: scale(1.06) translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.45),
              inset 0 1px 0 rgba(255,255,255,0.25);
}

/* ══════════════════════════════════════════════════════════
   PLAYERS CARD — redesign под референс (round avatars + star/stake + mult/check)
   ══════════════════════════════════════════════════════════ */
.crash-players-card {
  background: linear-gradient(180deg, #0e1530 0%, #050818 100%) !important;
  border-color: rgba(58,120,255,0.20) !important;
  border-radius: 16px !important;
  overflow: hidden;
}
.crash-players-head {
  background: rgba(20,30,60,0.55) !important;
  border-bottom: 1px solid rgba(58,120,255,0.10) !important;
  padding: 12px 16px !important;
}
.cph-icon { display: none !important; }  /* в референсе нет иконки в шапке */
.cph-title {
  color: rgba(180,200,240,0.75) !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
}
/* В референсе шапка двухколоночная: «Ставка» слева, «Возможн. приз» справа */
.crash-players-head::before {
  content: 'Ставка';
  display: inline-block;
  margin-left: 50px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(180,200,240,0.65);
  letter-spacing: 0.4px;
}
.crash-players-head .cph-count {
  margin-left: auto;
  background: rgba(110,231,183,0.10) !important;
  color: #6ee7b7 !important;
  border-color: rgba(110,231,183,0.30) !important;
}

/* Player row redesigned */
.crash-player-row {
  grid-template-columns: 44px 1fr auto !important;
  padding: 10px 14px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(58,120,255,0.08) !important;
  border-radius: 0 !important;
  gap: 12px !important;
}
.crash-player-row:last-child { border-bottom: none !important; }
.crash-player-row.me {
  background: linear-gradient(90deg,
              rgba(58,120,255,0.20) 0%,
              rgba(58,120,255,0.10) 60%,
              rgba(58,120,255,0.04) 100%) !important;
  border-left: 3px solid #7eb8ff !important;
  padding-left: 11px !important;
  box-shadow: 0 2px 10px rgba(58,120,255,0.18) !important;
}
.crash-player-row.me .cpr-name {
  color: #fff !important;
  font-weight: 900 !important;
}
.crash-player-row.me .cpr-me {
  background: rgba(126,184,255,0.22) !important;
  color: #cde3ff !important;
  border: 1px solid rgba(126,184,255,0.45) !important;
  padding: 1px 6px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  margin-left: 4px !important;
}
.crash-player-row:hover {
  background: rgba(58,120,255,0.05) !important;
}
.crash-player-row.me:hover {
  background: linear-gradient(90deg,
              rgba(58,120,255,0.25) 0%,
              rgba(58,120,255,0.12) 60%,
              rgba(58,120,255,0.05) 100%) !important;
}

/* Avatar: круглый, крупный 44px */
.cpr-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  font-size: 17px !important;
  border: 2px solid rgba(255,255,255,0.10) !important;
  flex-shrink: 0 !important;
}

/* Body: имя сверху, под ним star+stake → mult+check */
.cpr-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 3px;
}
.cpr-me {
  color: #7dc3ff !important;
  font-size: 10px !important;
}

/* Stake + status в одной строке внизу */
.crash-player-row > .cpr-stake,
.crash-player-row > .cpr-status {
  position: static !important;
}

/* Делаем сложный layout через grid-template + container queries */
.crash-player-row > .cpr-avatar { grid-row: 1 / span 2; align-self: center; }
.crash-player-row > .cpr-name { grid-row: 1; grid-column: 2 / span 2; }
.crash-player-row > .cpr-stake {
  grid-row: 2; grid-column: 2;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffd76a !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* Star prefix перед stake */
.crash-player-row > .cpr-stake::before {
  content: '⭐';
  font-size: 12px;
  margin-right: 3px;
}
.crash-player-row > .cpr-status {
  grid-row: 2; grid-column: 3;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
}
.crash-player-row > .cpr-status.win {
  color: #6ee7b7 !important;
}
.crash-player-row > .cpr-status.win::after {
  content: ' ✓';
  margin-left: 2px;
}
.crash-player-row > .cpr-status.active {
  color: rgba(180,200,240,0.55) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}
.crash-player-row > .cpr-status.loss {
  color: #ff7a90 !important;
}

/* «И ещё ставок: N» */
.crash-players-list::after {
  content: attr(data-extra-count);
  display: block;
  text-align: center;
  padding: 10px;
  font-size: 12px;
  color: rgba(180,200,240,0.55);
  font-weight: 600;
}
.crash-players-list:not([data-extra-count])::after,
.crash-players-list[data-extra-count="0"]::after { display: none; }

/* На мобильных — оставляем такой же лайаут */
@media (max-width: 380px) {
  .crash-player-row { padding: 9px 12px !important; gap: 10px !important; }
  .cpr-avatar { width: 40px !important; height: 40px !important; font-size: 15px !important; }
  .cpr-name { font-size: 13px !important; }
}

/* ══════════════════════════════════════════════════════════
   CRASH PREMIUM OVERHAUL — v=123
   Полностью переработанный интерфейс: премиальная ракета,
   многослойное пламя, параллакс-космос, нёбула, speed-lines,
   улучшенное табло множителя, премиальный stake-блок,
   драматичный взрыв.
   ══════════════════════════════════════════════════════════ */

/* ── Stage: deeper, more atmospheric backdrop with nebula glow ── */
.crash-stage,
.crash-stage[data-phase="betting"],
.crash-stage[data-phase="flying"],
.crash-stage[data-phase="crashed"] {
  background:
    radial-gradient(ellipse 45% 35% at 18% 28%, rgba(110,80,200,0.18), transparent 70%),
    radial-gradient(ellipse 40% 30% at 82% 22%, rgba(60,140,255,0.16), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 88%, rgba(58,120,255,0.22), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(58,80,180,0.20), transparent 70%),
    linear-gradient(180deg, #04081a 0%, #080f2a 35%, #0c1640 70%, #112050 100%) !important;
  border: 1px solid rgba(80,140,255,0.18) !important;
  min-height: 360px !important;
  overflow: hidden !important;
  position: relative;
}
.crash-stage[data-phase="flying"] {
  background:
    radial-gradient(ellipse 50% 40% at 18% 25%, rgba(120,90,220,0.22), transparent 70%),
    radial-gradient(ellipse 45% 35% at 82% 20%, rgba(80,160,255,0.20), transparent 70%),
    radial-gradient(ellipse 65% 45% at 50% 92%, rgba(80,150,255,0.30), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(58,120,255,0.28), transparent 70%),
    linear-gradient(180deg, #04081a 0%, #081032 40%, #0e1a48 75%, #14245c 100%) !important;
}
.crash-stage[data-phase="crashed"] {
  background:
    radial-gradient(ellipse 60% 45% at 50% 50%, rgba(255,90,110,0.32), transparent 65%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(255,60,80,0.28), transparent 70%),
    linear-gradient(180deg, #1a0612 0%, #2a0a1a 50%, #3a1024 100%) !important;
  animation: stageCrashShake 0.55s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes stageCrashShake {
  0%   { transform: translate(0,0); }
  15%  { transform: translate(-4px, 2px); }
  30%  { transform: translate(4px, -2px); }
  45%  { transform: translate(-3px, 3px); }
  60%  { transform: translate(3px, -1px); }
  75%  { transform: translate(-2px, 1px); }
  100% { transform: translate(0,0); }
}

/* ── Star field: 3 parallax layers ── */
.crash-stars {
  z-index: 0 !important;
  opacity: 0.85;
}
.crash-stage::before,
.crash-stage::after {
  content: '';
  position: absolute;
  inset: -10% -10% -10% -10%;
  pointer-events: none;
  z-index: 0;
}
/* Far parallax: tiny dim stars, slow drift */
.crash-stage::before {
  background:
    radial-gradient(1px 1px at 7% 12%, rgba(255,255,255,0.55) 50%, transparent 50%),
    radial-gradient(1px 1px at 23% 38%, rgba(180,200,255,0.45) 50%, transparent 50%),
    radial-gradient(1px 1px at 45% 18%, rgba(255,255,255,0.50) 50%, transparent 50%),
    radial-gradient(1px 1px at 67% 62%, rgba(200,210,255,0.55) 50%, transparent 50%),
    radial-gradient(1px 1px at 81% 28%, rgba(255,255,255,0.50) 50%, transparent 50%),
    radial-gradient(1px 1px at 92% 76%, rgba(180,210,255,0.45) 50%, transparent 50%),
    radial-gradient(1px 1px at 12% 82%, rgba(255,255,255,0.55) 50%, transparent 50%),
    radial-gradient(1px 1px at 38% 94%, rgba(200,220,255,0.45) 50%, transparent 50%);
  background-size: 100% 100%;
  animation: parallaxFar 80s linear infinite;
  opacity: 0.6;
}
/* Mid parallax: small bright stars with subtle twinkle */
.crash-stage::after {
  background:
    radial-gradient(1.5px 1.5px at 14% 26%, #fff 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 36% 12%, rgba(230,240,255,0.95) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 58% 44%, #fff 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 74% 18%, rgba(255,255,255,0.9) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 88% 56%, #fff 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 8% 64%, rgba(220,235,255,0.85) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 28% 72%, #fff 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 52% 88%, rgba(255,255,255,0.9) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 76% 84%, #fff 50%, transparent 50%);
  background-size: 100% 100%;
  animation: parallaxMid 50s linear infinite, twinkle 4s ease-in-out infinite;
  opacity: 0.85;
  z-index: 0;
}
@keyframes parallaxFar {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-40px); }
}
@keyframes parallaxMid {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-80px); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.55; }
}

/* Speed up parallax during flying */
.crash-stage[data-phase="flying"]::before { animation-duration: 25s; }
.crash-stage[data-phase="flying"]::after  { animation-duration: 12s, 4s; }

/* ── Cosmic dust particles (spawned by JS during flight) ── */
.crash-cosmic-dust {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.ccd-particle {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(220,235,255,0.85);
  box-shadow: 0 0 4px rgba(180,210,255,0.6);
  will-change: transform, opacity;
  animation: cosmicDustFly linear forwards;
}
.ccd-particle.big {
  width: 3px; height: 3px;
  background: #fff;
  box-shadow: 0 0 6px rgba(200,220,255,0.85);
}
.ccd-particle.streak {
  width: 1.5px; height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, rgba(220,240,255,0.95));
}
@keyframes cosmicDustFly {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(var(--ccd-dy, 480px)); opacity: 0; }
}

/* ── Speed lines (high-multiplier vertical streaks) ── */
.crash-speed-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.crash-stage[data-phase="flying"] .crash-speed-lines.active {
  opacity: 1;
}
.csl-line {
  position: absolute;
  top: -20%;
  width: 1.5px;
  height: 60px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.85), transparent);
  border-radius: 2px;
  will-change: transform, opacity;
  animation: speedLineFall linear forwards;
}
@keyframes speedLineFall {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(140vh); opacity: 0; }
}

/* ── Premium rocket: bigger, dropshadow, smooth wobble ── */
.crash-rocket {
  width: 84px !important;
  height: 148px !important;
  z-index: 4 !important;
}
.crash-rocket .rocket-svg {
  width: 84px !important;
  height: 148px !important;
  filter: drop-shadow(0 6px 22px rgba(120,180,255,0.55)) !important;
  transition: filter .25s ease, transform .25s ease;
}
.crash-rocket.flying .rocket-svg {
  filter: drop-shadow(0 8px 30px rgba(140,200,255,0.85))
          drop-shadow(0 0 12px rgba(255,180,100,0.50)) !important;
  animation: rocketWobble 2.4s ease-in-out infinite;
}
@keyframes rocketWobble {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-1.5px) rotate(-0.6deg); }
  50%      { transform: translateY(0) rotate(0deg); }
  75%      { transform: translateY(1.5px) rotate(0.6deg); }
}

/* New multi-layer flame animations */
.rocket-flames {
  transform-origin: 40px 98px;
  transform-box: fill-box;
}
.crash-rocket.idle .rocket-flames { opacity: 0.20; transform: scaleY(0.45); }
.crash-rocket.flying .rocket-flames {
  animation: flameStackPulse 0.5s ease-in-out infinite alternate;
}
@keyframes flameStackPulse {
  0%   { transform: scaleY(0.95) scaleX(0.98); }
  100% { transform: scaleY(1.12) scaleX(1.04); }
}
.rocket-flame-outer {
  transform-origin: 40px 98px;
  transform-box: fill-box;
  animation: flameOuterFlick 0.14s ease-in-out infinite alternate;
}
.rocket-flame-mid {
  transform-origin: 40px 98px;
  transform-box: fill-box;
  animation: flameMidFlick 0.10s ease-in-out infinite alternate-reverse;
}
.rocket-flame-core {
  transform-origin: 40px 98px;
  transform-box: fill-box;
  animation: flameCoreFlick 0.07s ease-in-out infinite alternate;
}
@keyframes flameOuterFlick {
  0%   { transform: scaleY(0.88) scaleX(0.96); opacity: 0.80; }
  100% { transform: scaleY(1.18) scaleX(1.10); opacity: 1.00; }
}
@keyframes flameMidFlick {
  0%   { transform: scaleY(0.90) scaleX(0.94); opacity: 0.85; }
  100% { transform: scaleY(1.20) scaleX(1.08); opacity: 1.00; }
}
@keyframes flameCoreFlick {
  0%   { transform: scaleY(0.86) scaleX(0.90); opacity: 0.90; }
  100% { transform: scaleY(1.16) scaleX(1.06); opacity: 1.00; }
}
.crash-rocket.idle .rocket-flame-outer,
.crash-rocket.idle .rocket-flame-mid,
.crash-rocket.idle .rocket-flame-core { animation: none; opacity: 0.25; }

/* ── Premium glow halo ── */
.crash-rocket-glow {
  width: 160px !important;
  height: 160px !important;
}
.crash-rocket-glow.active {
  background: radial-gradient(circle,
    rgba(255,210,140,0.65) 0%,
    rgba(255,140,90,0.45) 25%,
    rgba(120,180,255,0.35) 55%,
    transparent 75%) !important;
  filter: blur(10px) !important;
}

/* Tier-specific glow intensity */
.crash-stage[data-tier="mid"] .crash-rocket-glow.active {
  background: radial-gradient(circle,
    rgba(255,230,150,0.70) 0%,
    rgba(255,180,100,0.50) 30%,
    rgba(180,180,255,0.30) 60%,
    transparent 78%) !important;
}
.crash-stage[data-tier="hi"] .crash-rocket-glow.active {
  background: radial-gradient(circle,
    rgba(255,180,220,0.80) 0%,
    rgba(255,120,180,0.55) 30%,
    rgba(200,140,255,0.35) 60%,
    transparent 78%) !important;
  filter: blur(12px) !important;
}

/* ── Premium multiplier display ── */
.crash-mult-display {
  z-index: 3 !important;
}
.cmd-num {
  font-size: 92px !important;
  font-weight: 900 !important;
  letter-spacing: -2px !important;
  font-variant-numeric: tabular-nums !important;
  transition: text-shadow .3s ease, color .3s ease;
}
.cmd-x {
  font-size: 40px !important;
  font-weight: 700 !important;
  opacity: 0.85;
}

/* Tier glow on multiplier */
.crash-stage[data-phase="flying"] .crash-mult-display .cmd-num {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow:
    0 0 24px rgba(140,200,255,0.75),
    0 0 48px rgba(80,140,255,0.45) !important;
}
.crash-stage[data-phase="flying"] .crash-mult-display.tier-mid .cmd-num {
  color: #ffe680 !important;
  -webkit-text-fill-color: #ffe680 !important;
  text-shadow:
    0 0 24px rgba(255,220,120,0.85),
    0 0 60px rgba(255,180,80,0.50) !important;
  animation: multPulseMid 1.2s ease-in-out infinite;
}
.crash-stage[data-phase="flying"] .crash-mult-display.tier-hi .cmd-num {
  color: #ff9ab8 !important;
  -webkit-text-fill-color: #ff9ab8 !important;
  text-shadow:
    0 0 30px rgba(255,140,180,0.90),
    0 0 70px rgba(255,100,160,0.55) !important;
  animation: multPulseHi 0.7s ease-in-out infinite;
}
@keyframes multPulseMid {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes multPulseHi {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.07); filter: brightness(1.15); }
}

/* Crashed mult: red shake + pulse */
.crash-stage[data-phase="crashed"] .crash-mult-display .cmd-num,
.crash-stage[data-phase="crashed"] .crash-mult-display .cmd-x {
  color: #ff5a72 !important;
  -webkit-text-fill-color: #ff5a72 !important;
  text-shadow:
    0 0 30px rgba(255,90,114,0.90),
    0 0 60px rgba(255,60,90,0.50) !important;
  animation: multCrashFlash 0.45s ease-out;
}
@keyframes multCrashFlash {
  0%   { transform: scale(1.35); filter: brightness(1.5); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* ── Trajectory: thicker glowing curve ── */
.crash-trajectory {
  z-index: 2 !important;
}
.crash-trajectory path {
  stroke-width: 1.4 !important;
  filter: drop-shadow(0 0 4px rgba(120,180,255,0.65));
}

/* ── Crash explosion: bigger smoke ring + flash ── */
.crash-rocket.exploded {
  opacity: 0 !important;
  transform: scale(0.4) !important;
  transition: opacity .25s ease, transform .25s ease;
}
.crash-arena::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,200,80,0.95) 0%,
    rgba(255,90,80,0.65) 25%,
    rgba(255,60,80,0.30) 55%,
    transparent 78%);
  filter: blur(2px);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.crash-stage[data-phase="crashed"] .crash-arena::after {
  animation: crashBoom 0.85s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes crashBoom {
  0%   { width: 20px; height: 20px; opacity: 0; }
  20%  { opacity: 1; }
  100% { width: 380px; height: 380px; opacity: 0; }
}

/* Smoke ring */
.crash-smoke-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  border: 3px solid rgba(255,180,120,0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  z-index: 4;
}
.crash-stage[data-phase="crashed"] .crash-smoke-ring {
  animation: smokeRing 0.95s cubic-bezier(.1,.7,.3,1) forwards;
}
@keyframes smokeRing {
  0%   { width: 30px; height: 30px; border-width: 6px; opacity: 1; }
  100% { width: 320px; height: 320px; border-width: 0.5px; opacity: 0; }
}

/* ── Premium stake controls ── */
.crash-controls {
  margin-top: 14px !important;
  gap: 12px !important;
}
.crash-stake-row {
  background: linear-gradient(180deg, rgba(20,30,55,0.95), rgba(10,18,42,0.95)) !important;
  border: 1px solid rgba(80,140,255,0.22) !important;
  border-radius: 18px !important;
  padding: 14px 14px 12px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35),
              inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.crash-stake-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: rgba(180,210,255,0.65) !important;
  margin-bottom: 8px !important;
}
.crash-stake-controls {
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}
.crash-stake-btn {
  min-width: 52px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(40,55,90,0.95), rgba(25,35,65,0.95)) !important;
  border: 1px solid rgba(80,140,255,0.30) !important;
  color: #cfe2ff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  transition: all .15s ease !important;
  cursor: pointer !important;
}
.crash-stake-btn:hover {
  background: linear-gradient(180deg, rgba(50,70,115,0.95), rgba(35,50,90,0.95)) !important;
  border-color: rgba(120,180,255,0.45) !important;
}
.crash-stake-btn:active {
  transform: scale(0.94) !important;
}
.crash-stake-input {
  flex: 1 !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: rgba(5,10,25,0.85) !important;
  border: 1px solid rgba(80,140,255,0.25) !important;
  color: #ffd76a !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.5px !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.crash-stake-input:focus {
  outline: none !important;
  border-color: rgba(140,200,255,0.65) !important;
  box-shadow: 0 0 0 3px rgba(120,180,255,0.15) !important;
}
.crash-stake-presets {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 6px !important;
}
.crash-stake-presets .csp {
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(30,45,80,0.65) !important;
  border: 1px solid rgba(80,140,255,0.20) !important;
  color: rgba(200,220,255,0.85) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  transition: all .15s ease !important;
  cursor: pointer !important;
}
.crash-stake-presets .csp:hover {
  background: rgba(45,65,110,0.85) !important;
  color: #fff !important;
  border-color: rgba(140,200,255,0.45) !important;
}
.crash-stake-presets .csp.active {
  background: linear-gradient(180deg, #2a5cdb, #1e4ab0) !important;
  color: #fff !important;
  border-color: rgba(140,200,255,0.65) !important;
  box-shadow: 0 0 12px rgba(80,140,255,0.40);
}
.crash-stake-presets .csp[data-stake-max] {
  background: linear-gradient(180deg, rgba(255,170,100,0.85), rgba(220,120,60,0.85)) !important;
  border-color: rgba(255,190,120,0.55) !important;
  color: #fff !important;
}

/* Auto-cashout row */
.crash-auto-row {
  background: linear-gradient(180deg, rgba(20,30,55,0.75), rgba(10,18,42,0.75)) !important;
  border: 1px solid rgba(80,140,255,0.15) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
}
.crash-auto-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: rgba(200,220,255,0.85) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.crash-auto-mult {
  width: 64px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(5,10,25,0.85) !important;
  border: 1px solid rgba(80,140,255,0.30) !important;
  color: #ffd76a !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-align: center !important;
  margin: 0 4px !important;
  font-variant-numeric: tabular-nums !important;
}

/* ── Premium action buttons ── */
.crash-action-btn {
  height: 60px !important;
  border-radius: 16px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45),
              inset 0 1px 0 rgba(255,255,255,0.18) !important;
  transition: transform .12s ease, filter .12s ease, box-shadow .15s ease !important;
}
.crash-action-btn.place-bet {
  background: linear-gradient(180deg, #4a8aff 0%, #2a5cdb 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(140,200,255,0.45) !important;
}
.crash-action-btn.place-bet:hover:not(:disabled) {
  box-shadow: 0 8px 24px rgba(80,140,255,0.55),
              inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
.crash-action-btn.cash-out {
  background: linear-gradient(180deg, #5ce0a0 0%, #1ea470 100%) !important;
  color: #06241a !important;
  border: 1px solid rgba(170,250,210,0.55) !important;
  animation: cashOutPulse 1.4s ease-in-out infinite;
}
@keyframes cashOutPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.45),
                          inset 0 1px 0 rgba(255,255,255,0.22),
                          0 0 0 0 rgba(110,231,183,0.55); }
  60%      { box-shadow: 0 6px 18px rgba(0,0,0,0.45),
                          inset 0 1px 0 rgba(255,255,255,0.22),
                          0 0 0 8px rgba(110,231,183,0); }
}
.crash-action-btn .cab-icon {
  font-size: 22px;
  margin-right: 4px;
  vertical-align: -2px;
}
.crash-action-btn .cab-mult {
  margin-left: 8px;
  padding: 4px 10px;
  background: rgba(0,0,0,0.20);
  border-radius: 8px;
  font-size: 14px;
}

/* ── Status text ── */
.crash-status {
  z-index: 2 !important;
  font-size: 13px !important;
  color: rgba(200,220,255,0.85) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.crash-status.loss {
  color: #ff9ab0 !important;
  text-shadow: 0 0 12px rgba(255,90,114,0.45);
}

/* ── Reduce motion override ── */
@media (prefers-reduced-motion: reduce) {
  .crash-rocket.flying .rocket-svg,
  .rocket-flames,
  .rocket-flame-outer, .rocket-flame-mid, .rocket-flame-core,
  .crash-stage::before, .crash-stage::after,
  .ccd-particle, .csl-line,
  .crash-action-btn.cash-out {
    animation: none !important;
  }
}

/* ── Mobile tweaks ── */
@media (max-width: 380px) {
  .crash-stake-controls { gap: 6px !important; }
  .crash-stake-btn { min-width: 46px !important; height: 44px !important; font-size: 15px !important; }
  .crash-stake-input { height: 44px !important; font-size: 19px !important; }
  .crash-stake-presets .csp { height: 32px !important; font-size: 11px !important; }
  .crash-action-btn { height: 54px !important; font-size: 15px !important; }
  .crash-rocket { width: 72px !important; height: 128px !important; }
  .crash-rocket .rocket-svg { width: 72px !important; height: 128px !important; }
  .cmd-num { font-size: 76px !important; }
  .cmd-x   { font-size: 32px !important; }
}

/* ══════════════════════════════════════════════════════════
   v=124 — Fix top badges overlap
   History-pills (~28px high) живут сверху, поэтому
   round-id и players-count бэйджи опускаем ниже на 56px.
   Также делаем history-strip с правым отступом, чтобы он
   не упирался в правый край.
   ══════════════════════════════════════════════════════════ */
.crash-history-strip {
  top: 10px !important;
  left: 10px !important;
  right: 10px !important;
  padding: 2px 4px !important;
  z-index: 5 !important;
}
.crash-history-strip .chs-pill {
  font-size: 10px !important;
  padding: 5px 9px !important;
}
.crash-round-badge,
.crash-players-badge {
  top: 54px !important;
  z-index: 6 !important;
}
@media (max-width: 380px) {
  .crash-round-badge,
  .crash-players-badge { top: 50px !important; font-size: 10px !important; padding: 4px 8px !important; }
  .crash-history-strip .chs-pill { font-size: 9px !important; padding: 4px 7px !important; }
}

/* ══════════════════════════════════════════════════════════
   v=125 — Home hero freeze fix
   Telegram WebView лениво паинтит экран после switchScreen,
   из-за чего hero «зависает» до первого тача. Принудительно
   создаём composited layer + 3d-transform → compositor сразу
   начинает рисовать анимации.
   ══════════════════════════════════════════════════════════ */
.hub-hero,
.feed-hero,
.wallet-tab-balance {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.screen.active .hub-hero,
.screen.active .feed-hero,
.screen.active .wallet-tab-balance {
  /* Меняем animation-fill-mode чтобы конечное состояние сохранилось,
     даже если paint пропустился */
  animation-fill-mode: both !important;
}
/* Hero stars + shine — promote */
.hub-hero-stars,
.hub-hero::after {
  transform: translateZ(0);
  will-change: background-position, transform, opacity;
}

/* МЕГА-БОНУСКА удалена — variant-selector CSS вычищен */

/* ════════════════════════════════════════════════════════════
   ╔══════════════════════════════════════════════════════════╗
   ║  v=127 — HOME (HUB) PREMIUM REDESIGN                      ║
   ║  Полная переработка стартового экрана: персональный hero, ║
   ║  анимированный баланс, live Crash ticker (изюминка),      ║
   ║  activity rail, премиум game-tiles с декорациями.         ║
   ╚══════════════════════════════════════════════════════════╝
   ════════════════════════════════════════════════════════════ */

/* ── HERO: premium variant ─────────────────────────────────── */
.hub-hero.hub-hero-premium {
  position: relative;
  margin: 14px 12px 18px;
  padding: 18px 18px 16px;
  border-radius: 24px;
  background:
    radial-gradient(ellipse 60% 80% at 30% 0%, rgba(199,125,255,0.18), transparent 60%),
    radial-gradient(ellipse 70% 90% at 80% 30%, rgba(255,86,112,0.16), transparent 65%),
    radial-gradient(ellipse 80% 70% at 50% 110%, rgba(255,213,106,0.12), transparent 60%),
    linear-gradient(180deg, #1c0f30 0%, #15082a 50%, #0a0418 100%);
  border: 1px solid rgba(255,213,106,0.18);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
  isolation: isolate;
}

/* Glowing orbs — soft blurred colored circles behind content */
.hub-hero-glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
  will-change: transform;
}
.hho-1 {
  width: 180px; height: 180px;
  background: radial-gradient(circle, #ff5670 0%, transparent 70%);
  top: -50px; left: -40px;
  animation: hhOrb1 14s ease-in-out infinite;
}
.hho-2 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, #c77dff 0%, transparent 70%);
  top: 30%; right: -70px;
  animation: hhOrb2 18s ease-in-out infinite;
}
.hho-3 {
  width: 160px; height: 160px;
  background: radial-gradient(circle, #ffd76a 0%, transparent 70%);
  bottom: -60px; left: 30%;
  animation: hhOrb3 16s ease-in-out infinite;
}
@keyframes hhOrb1 {
  0%, 100% { transform: translate(0, 0); opacity: 0.55; }
  50%      { transform: translate(20px, 30px); opacity: 0.75; }
}
@keyframes hhOrb2 {
  0%, 100% { transform: translate(0, 0); opacity: 0.55; }
  50%      { transform: translate(-25px, 20px); opacity: 0.75; }
}
@keyframes hhOrb3 {
  0%, 100% { transform: translate(0, 0); opacity: 0.45; }
  50%      { transform: translate(30px, -25px); opacity: 0.65; }
}
.hub-hero-premium .hub-hero-content { position: relative; z-index: 2; }

/* Top row: greeting (left) + brand stamp (right) */
.hhp-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.hhp-greeting { flex: 1; min-width: 0; }
.hhp-greet-time {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255,213,106,0.75);
  margin-bottom: 2px;
}
.hhp-greet-name {
  font-size: 19px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hhp-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  line-height: 1;
}
.hhp-brand-1 {
  font-size: 15px;
  font-weight: 900;
  color: #ffd76a;
  letter-spacing: 1.2px;
  text-shadow: 0 0 12px rgba(255,213,106,0.45);
}
.hhp-brand-2 {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 3px;
  color: rgba(220,200,255,0.55);
  margin-top: 2px;
}

/* Animated balance display */
.hhp-balance {
  margin: 4px 0 16px;
  text-align: center;
  padding: 14px 12px 12px;
  background: linear-gradient(180deg, rgba(255,213,106,0.06), rgba(255,213,106,0.02));
  border: 1px solid rgba(255,213,106,0.15);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
.hhp-balance::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,213,106,0.08) 45%,
    rgba(255,255,255,0.14) 50%,
    rgba(255,213,106,0.08) 55%,
    transparent 70%);
  animation: hhpBalShine 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hhpBalShine {
  0%, 70% { transform: translateX(0); }
  100%    { transform: translateX(400%); }
}
.hhp-balance-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,213,106,0.65);
  margin-bottom: 6px;
}
.hhp-balance-label .m-coin {
  width: 12px;
  height: 12px;
}
.hhp-balance-value {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.hhp-bv-num {
  font-size: 44px;
  font-weight: 900;
  color: #ffd76a;
  letter-spacing: -1px;
  text-shadow:
    0 0 22px rgba(255,213,106,0.45),
    0 2px 6px rgba(0,0,0,0.45);
  line-height: 1;
}
.hhp-bv-suffix {
  font-size: 18px;
  font-weight: 800;
  color: rgba(255,213,106,0.65);
  letter-spacing: 1px;
}
.hhp-balance-delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 3px 10px;
  background: rgba(110,231,183,0.12);
  border: 1px solid rgba(110,231,183,0.30);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #6ee7b7;
  transition: all .25s ease;
}
.hhp-balance-delta.negative {
  background: rgba(255,90,114,0.12);
  border-color: rgba(255,90,114,0.30);
  color: #ff8aa3;
}
.hhp-balance-delta.zero {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.55);
}
.hhp-balance-delta.flash {
  animation: hhpDeltaPop 0.6s cubic-bezier(.36,1.6,.6,1);
}
@keyframes hhpDeltaPop {
  0%   { transform: scale(0.85); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Mini stats row — 4 равноширокие плашки которые ВСЕГДА влезают */
.hhp-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));    /* minmax(0,1fr) = жёсткое равенство */
  gap: 5px;
  margin-bottom: 14px;
}
.hhp-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  transition: background .15s ease, border-color .15s ease;
  min-width: 0;          /* критично — иначе flex children выпирают */
  overflow: hidden;
}
.hhp-stat:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,213,106,0.25);
}
.hhp-stat-icon {
  font-size: 15px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.hhp-stat-body {
  min-width: 0;
  line-height: 1.1;
  flex: 0 1 auto;        /* можем шринкаться, не расти */
  overflow: hidden;
}
.hhp-stat-v {
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.hhp-stat-l {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 🌟 LIVE CRASH TICKER (изюминка!) ─────────────────────── */
.hhp-live-crash {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(135deg, #0a1130 0%, #1a0e3a 50%, #2a0f30 100%);
  border: 1.5px solid rgba(140,180,255,0.30);
  border-radius: 18px;
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s ease, border-color .25s ease, box-shadow .25s ease;
  text-align: left;
  font: inherit;
  color: inherit;
  isolation: isolate;
}
.hhp-live-crash:hover {
  border-color: rgba(180,210,255,0.55);
  box-shadow: 0 8px 24px rgba(80,140,255,0.30);
  transform: translateY(-1px);
}
.hhp-live-crash:active { transform: scale(0.98); }
.hhp-live-crash .hlc-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 30%, rgba(255,86,112,0.12), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(80,140,255,0.18), transparent 50%);
  z-index: 0;
  pointer-events: none;
}
.hhp-live-crash .hlc-stars {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 28% 60%, rgba(255,255,255,0.7) 50%, transparent 50%),
    radial-gradient(1px 1px at 52% 26%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 70% 76%, rgba(255,255,255,0.5) 50%, transparent 50%),
    radial-gradient(1px 1px at 86% 38%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 92% 84%, rgba(255,255,255,0.7) 50%, transparent 50%);
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
  animation: hlcStarsDrift 18s linear infinite;
}
@keyframes hlcStarsDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 60px 0; }
}
.hhp-live-crash .hlc-shine {
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,0.10) 45%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.10) 55%,
    transparent 70%);
  animation: hlcShine 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes hlcShine {
  0%, 65% { transform: translateX(0); }
  100%    { transform: translateX(400%); }
}
.hhp-live-crash .hlc-rocket {
  position: relative;
  z-index: 2;
  font-size: 30px;
  filter: drop-shadow(0 4px 8px rgba(255,213,106,0.45));
  transition: transform .25s cubic-bezier(.36,1.6,.6,1);
}
.hhp-live-crash[data-phase="flying"] .hlc-rocket {
  animation: hlcRocketLift 1.4s ease-in-out infinite alternate;
}
@keyframes hlcRocketLift {
  0%   { transform: translateY(0) rotate(-8deg); }
  100% { transform: translateY(-3px) rotate(-12deg); }
}
.hhp-live-crash .hlc-content {
  position: relative;
  z-index: 2;
  min-width: 0;
}
.hlc-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
}
.hlc-pulse {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #6ee7b7;
  box-shadow: 0 0 8px rgba(110,231,183,0.85);
  animation: hlcPulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes hlcPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.25); }
}
.hlc-label {
  color: rgba(180,210,255,0.85);
  text-transform: uppercase;
}
/* NFT-badge — золотая плашка рядом с "CRASH · LIVE" */
.hlc-nft-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #ffd76a;
  background: linear-gradient(135deg, rgba(255,213,106,0.22), rgba(255,155,58,0.18));
  border: 1px solid rgba(255,213,106,0.55);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  text-shadow: 0 0 6px rgba(255,213,106,0.35);
  box-shadow: 0 0 8px rgba(255,213,106,0.18);
  animation: hlcNftGlow 2.4s ease-in-out infinite;
}
@keyframes hlcNftGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(255,213,106,0.18); }
  50%      { box-shadow: 0 0 14px rgba(255,213,106,0.40); }
}
@media (prefers-reduced-motion: reduce) {
  .hlc-nft-badge { animation: none !important; }
}
.hlc-phase {
  margin-left: auto;
  padding: 2px 9px;
  background: rgba(110,231,183,0.15);
  border: 1px solid rgba(110,231,183,0.35);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #6ee7b7;
  white-space: nowrap;       /* никаких переносов */
  line-height: 1.4;
  flex-shrink: 0;
}
.hhp-live-crash[data-phase="flying"] .hlc-phase {
  background: rgba(255,213,106,0.15);
  border-color: rgba(255,213,106,0.45);
  color: #ffd76a;
}
.hhp-live-crash[data-phase="crashed"] .hlc-phase {
  background: rgba(255,90,114,0.15);
  border-color: rgba(255,90,114,0.45);
  color: #ff8aa3;
}
.hhp-live-crash[data-phase="crashed"] .hlc-pulse {
  background: #ff5a72;
  box-shadow: 0 0 8px rgba(255,90,114,0.85);
}
.hlc-mult-row {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.hlc-x {
  font-size: 18px;
  font-weight: 800;
  color: rgba(255,255,255,0.7);
  letter-spacing: -0.5px;
}
.hlc-mult {
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
  text-shadow: 0 0 16px rgba(180,220,255,0.55);
  transition: color .25s ease, text-shadow .25s ease;
}
.hhp-live-crash[data-phase="flying"][data-tier="mid"] .hlc-mult {
  color: #ffe680;
  text-shadow: 0 0 18px rgba(255,220,120,0.70);
}
.hhp-live-crash[data-phase="flying"][data-tier="hi"] .hlc-mult {
  color: #ff9ab8;
  text-shadow: 0 0 20px rgba(255,140,180,0.75);
  animation: hlcMultPulse 0.7s ease-in-out infinite;
}
.hhp-live-crash[data-phase="crashed"] .hlc-mult {
  color: #ff5a72;
  text-shadow: 0 0 18px rgba(255,90,114,0.85);
  animation: hlcMultCrash 0.35s ease-out;
}
@keyframes hlcMultPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes hlcMultCrash {
  0%   { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.hlc-sub {
  font-size: 11px;
  color: rgba(220,230,255,0.65);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hlc-cta {
  position: relative;
  z-index: 2;
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffd76a, #e09020);
  color: #1a1410;
  font-size: 19px;
  font-weight: 900;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(255,213,106,0.45);
  flex-shrink: 0;
}
.hhp-live-crash:hover .hlc-cta {
  animation: hlcCtaJiggle 0.5s ease-in-out;
}
@keyframes hlcCtaJiggle {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}

/* ── ACTIVITY RAIL: horizontal scroll of recent wins ──────── */
.hub-activity-rail {
  margin: 18px 0 14px;
  padding: 0 12px;
}
.har-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 4px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.har-icon {
  font-size: 14px;
  filter: drop-shadow(0 0 6px rgba(255,213,106,0.45));
}
.har-title {
  color: rgba(255,213,106,0.85);
}
.har-live-dot {
  margin-left: auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #6ee7b7;
  box-shadow: 0 0 6px rgba(110,231,183,0.85);
  animation: hlcPulse 1.6s ease-in-out infinite;
}
.har-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.har-track {
  display: flex;
  gap: 8px;
  padding: 4px 8px;
  animation: harScroll 60s linear infinite;
  width: max-content;
  will-change: transform, opacity;
  /* Preserve animation timeline across content replacement — CSS animations are
     bound to the element, не к children. Меняя innerHTML мы НЕ ресетаем
     translateX-таймлайн, что и нужно для незаметного обновления. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.har-track:hover { animation-play-state: paused; }
@keyframes harScroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
.har-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: linear-gradient(180deg, rgba(255,213,106,0.10), rgba(255,213,106,0.04));
  border: 1px solid rgba(255,213,106,0.22);
  border-radius: 999px;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  font-weight: 600;
  flex-shrink: 0;
  /* Gentle fade-in для свеже-вставленных chip'ов */
  animation: harChipFadeIn 0.5s ease-out backwards;
}
@keyframes harChipFadeIn {
  0%   { opacity: 0; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}
.har-chip.big {
  background: linear-gradient(180deg, rgba(255,213,106,0.20), rgba(255,90,114,0.10));
  border-color: rgba(255,213,106,0.55);
  color: #ffd76a;
}
.har-chip.mega {
  background: linear-gradient(180deg, rgba(199,125,255,0.22), rgba(123,44,191,0.10));
  border-color: rgba(199,125,255,0.55);
  color: #e8c5ff;
}
/* NFT-победы Crash — отдельный фиолетово-розовый акцент */
.har-chip.nft {
  background: linear-gradient(180deg, rgba(199,125,255,0.18), rgba(255,90,180,0.10));
  border-color: rgba(199,125,255,0.50);
  color: #ffd6f5;
}
.har-chip.nft .har-chip-amount { color: #ffd6f5; }
/* ── «Моя победа» — золотой акцент + flash-glow при появлении ── */
.har-chip.mine {
  background: linear-gradient(180deg, rgba(255,213,106,0.28), rgba(180,120,0,0.12));
  border-color: rgba(255,213,106,0.70);
  box-shadow: 0 0 18px rgba(255,213,106,0.45),
              inset 0 0 8px rgba(255,213,106,0.20);
  color: #fff7d6;
  position: relative;
  animation: harMineFlash 1.8s ease-out;
}
.har-chip.mine .har-chip-amount { color: #ffd76a; }
.har-chip.mine::before {
  content: '⭐';
  position: absolute;
  top: -3px; right: -3px;
  font-size: 9px;
  background: #ffd76a;
  color: #1a0f30;
  border-radius: 50%;
  width: 12px; height: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 6px rgba(255,213,106,0.85);
}
@keyframes harMineFlash {
  0%   { transform: scale(1);    filter: brightness(1.8) saturate(1.5); }
  18%  { transform: scale(1.06); filter: brightness(1.6) saturate(1.4); }
  100% { transform: scale(1);    filter: brightness(1)   saturate(1);   }
}
/* Preview-картинка NFT в чипе — круглая, 16x16 */
.har-chip.nft .har-chip-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(199,125,255,0.20);
  flex-shrink: 0;
}
.har-chip-icon { font-size: 13px; }
.har-chip-amount {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #ffd76a;
}
.har-chip.big .har-chip-amount { color: #fff; }
.har-chip.mega .har-chip-amount { color: #fff; }
.har-chip-name {
  color: rgba(255,255,255,0.65);
  font-weight: 500;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.har-skeleton {
  width: 140px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: harSkeleton 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes harSkeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── PREMIUM GAME TILES ───────────────────────────────────── */
.hub-games-grid-premium {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.hub-game-tile.hgt-premium {
  position: relative;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(28,18,50,0.85), rgba(15,8,28,0.85));
  border: 1px solid rgba(255,213,106,0.18);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
  isolation: isolate;
}
.hub-game-tile.hgt-premium::after { display: none !important; }
.hub-game-tile.hgt-premium:hover {
  border-color: rgba(255,213,106,0.50);
  box-shadow: 0 10px 26px rgba(255,213,106,0.18);
  transform: translateY(-2px);
}
.hub-game-tile.hgt-premium:active {
  transform: scale(0.98);
}

/* Art block (110×110) */
.hub-game-tile.hgt-premium .hgt-art {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hgt-art-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hgt-art-slots .hgt-art-bg {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,213,106,0.35), transparent 60%),
    linear-gradient(135deg, #5a2010 0%, #2a0a04 100%);
}
.hgt-art-crash .hgt-art-bg {
  background:
    radial-gradient(circle at 70% 90%, rgba(140,200,255,0.30), transparent 60%),
    radial-gradient(circle at 30% 10%, rgba(255,150,90,0.20), transparent 50%),
    linear-gradient(135deg, #06102a 0%, #0a0420 100%);
}
.hgt-art-mines .hgt-art-bg {
  background:
    radial-gradient(circle at 50% 50%, rgba(80,180,255,0.30), transparent 60%),
    linear-gradient(135deg, #0a3050 0%, #06182a 100%);
}
.hgt-art-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18), transparent 55%);
  z-index: 0;
  pointer-events: none;
  animation: hgtGlowPulse 3.5s ease-in-out infinite;
}
@keyframes hgtGlowPulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.12); }
}
.hgt-art-rays {
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 0deg,
    transparent 0%, rgba(255,213,106,0.10) 10%,
    transparent 20%, transparent 50%,
    rgba(255,213,106,0.08) 60%, transparent 70%);
  animation: hgtRaysSpin 20s linear infinite;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
}
@keyframes hgtRaysSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.hgt-art-emoji {
  position: relative;
  z-index: 2;
  font-size: 50px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.55));
}
.hgt-art-emoji-rocket {
  transform: rotate(-12deg);
  animation: hgtRocketFloat 3.5s ease-in-out infinite alternate;
}
@keyframes hgtRocketFloat {
  0%   { transform: rotate(-12deg) translateY(0); }
  100% { transform: rotate(-16deg) translateY(-6px); }
}

/* Slots — 777 decoration chips */
.hgt-art-deco-7s {
  position: absolute;
  z-index: 2;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
}
.hgt-art-deco-7s .hgt-deco-chip {
  width: 18px;
  height: 22px;
  background: linear-gradient(180deg, #ffe680, #ff5670);
  color: #2a0810;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-shadow: 0 2px 4px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.45);
  animation: hgt7sBlink 2s ease-in-out infinite;
}
.hgt-art-deco-7s .hgt-deco-chip:nth-child(2) { animation-delay: 0.2s; }
.hgt-art-deco-7s .hgt-deco-chip:nth-child(3) { animation-delay: 0.4s; }
@keyframes hgt7sBlink {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.25); }
}

/* Crash — trajectory line + mini stars */
.hgt-art-trajectory {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
}
.hgt-art-stars {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(0.8px 0.8px at 18% 22%, #fff 50%, transparent 50%),
    radial-gradient(0.8px 0.8px at 38% 65%, rgba(255,255,255,0.7) 50%, transparent 50%),
    radial-gradient(0.8px 0.8px at 65% 35%, #fff 50%, transparent 50%),
    radial-gradient(0.8px 0.8px at 82% 75%, rgba(255,255,255,0.6) 50%, transparent 50%);
  z-index: 1;
  opacity: 0.8;
  pointer-events: none;
}

/* Mines — mini grid */
.hgt-art-deco-grid {
  position: absolute;
  z-index: 2;
  inset: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  pointer-events: none;
  opacity: 0;
}
.hgt-art-deco-grid .hgt-deco-cell {
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border: 1px solid rgba(255,255,255,0.10);
}
.hgt-art-deco-grid .hgt-deco-cell.gem {
  background: rgba(110,231,183,0.20);
  border-color: rgba(110,231,183,0.55);
}
.hgt-art-deco-grid .hgt-deco-cell.bomb {
  background: rgba(255,90,114,0.20);
  border-color: rgba(255,90,114,0.55);
}
.hub-game-tile.hgt-premium:hover .hgt-art-deco-grid {
  opacity: 1;
  transition: opacity .25s ease;
}
.hub-game-tile.hgt-premium:hover .hgt-art-emoji {
  transform: scale(0.85);
  opacity: 0.5;
  transition: all .25s ease;
}

/* Body (right side) */
.hub-game-tile.hgt-premium .hgt-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.hub-game-tile.hgt-premium .hgt-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
}
.hub-game-tile.hgt-premium .hgt-title {
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.2px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-game-tile.hgt-premium .hgt-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: rgba(110,231,183,0.12);
  border: 1px solid rgba(110,231,183,0.40);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #6ee7b7;
  flex-shrink: 0;
}
.hgts-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #6ee7b7;
  box-shadow: 0 0 5px rgba(110,231,183,0.85);
  animation: hlcPulse 1.4s ease-in-out infinite;
}
.hub-game-tile.hgt-premium .hgt-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-game-tile.hgt-premium .hgt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  /* Резерв под абсолютно-позиционированный hgt-cta (right:14px bottom:14px) —
     теги переносятся перед ним, никаких overlap. */
  padding-right: 84px;
  min-height: 24px;
}
.hub-game-tile.hgt-premium .hgt-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  color: rgba(255,255,255,0.75);
}
.hub-game-tile.hgt-premium .hgt-tag.hot {
  background: rgba(255,86,112,0.15);
  border-color: rgba(255,86,112,0.40);
  color: #ff8aa3;
}
.hub-game-tile.hgt-premium .hgt-tag.mega {
  background: linear-gradient(180deg, rgba(255,213,106,0.20), rgba(255,86,112,0.10));
  border-color: rgba(255,213,106,0.55);
  color: #ffd76a;
  font-weight: 900;
}
.hub-game-tile.hgt-premium .hgt-cta {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,213,106,0.85);
  padding: 4px 10px;
  background: rgba(255,213,106,0.10);
  border: 1px solid rgba(255,213,106,0.35);
  border-radius: 999px;
  transition: all .15s ease;
}
.hub-game-tile.hgt-premium:hover .hgt-cta {
  background: rgba(255,213,106,0.18);
  border-color: rgba(255,213,106,0.65);
  color: #ffd76a;
}
.hgt-cta-arrow {
  display: inline-block;
  transition: transform .2s ease;
}
.hub-game-tile.hgt-premium:hover .hgt-cta-arrow {
  transform: translateX(2px);
}

/* ── Mobile tweaks ── */
@media (max-width: 380px) {
  .hub-hero.hub-hero-premium {
    padding: 14px 12px 12px;
    margin: 10px 8px 14px;
    border-radius: 20px;
  }
  .hhp-greet-name { font-size: 17px; }
  .hhp-bv-num { font-size: 38px; }
  .hhp-stats { gap: 4px; }
  .hhp-stat { padding: 6px 3px; gap: 3px; }
  .hhp-stat-icon { font-size: 13px; }
  .hhp-stat-v { font-size: 11px; }
  .hhp-stat-l { font-size: 8px; }
  .hhp-live-crash { padding: 12px 14px; gap: 10px; }
  .hhp-live-crash .hlc-rocket { font-size: 26px; }
  .hlc-mult { font-size: 26px; }
  .hlc-cta { width: 34px; height: 34px; font-size: 17px; }
  .hub-game-tile.hgt-premium { padding: 12px; gap: 12px; grid-template-columns: 90px 1fr; }
  .hub-game-tile.hgt-premium .hgt-art { width: 90px; height: 90px; }
  .hub-game-tile.hgt-premium .hgt-art-emoji { font-size: 42px; }
  .hub-game-tile.hgt-premium .hgt-title { font-size: 15px; }
  .hub-game-tile.hgt-premium .hgt-cta { right: 12px; bottom: 12px; font-size: 10px; padding: 3px 8px; }
  .hub-game-tile.hgt-premium .hgt-meta { padding-right: 76px; }
}

/* ══════════════════════════════════════════════════════════
   v=133 — Legal links card (Documents & policies в Profile)
   ══════════════════════════════════════════════════════════ */
.legal-card .legal-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.legal-link-row {
  display: grid;
  grid-template-columns: 32px 1fr 20px;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.legal-link-row:hover {
  background: rgba(255,213,106,0.08);
  border-color: rgba(255,213,106,0.25);
}
.legal-link-row:active {
  transform: scale(0.98);
}
.legal-link-row .ll-icon {
  font-size: 22px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}
.legal-link-row .ll-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.legal-link-row .ll-name {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.legal-link-row .ll-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.legal-link-row .ll-arrow {
  font-size: 16px;
  color: rgba(255,213,106,0.60);
  font-weight: 800;
  transition: transform .15s ease, color .15s ease;
}
.legal-link-row:hover .ll-arrow {
  color: #ffd76a;
  transform: translateX(3px);
}
.legal-link-row.legal-all {
  background: linear-gradient(180deg, rgba(255,213,106,0.10), rgba(255,213,106,0.04));
  border-color: rgba(255,213,106,0.30);
}
.legal-link-row.legal-all .ll-name {
  color: #ffd76a;
}

/* ══════════════════════════════════════════════════════════
   v=134 — Crash: compact mode after bet placed
   Когда ставка размещена — скрываем неактивные stake-controls
   и auto-row. CASHOUT-кнопка поднимается к ракете, оба влезают
   на один экран.
   ══════════════════════════════════════════════════════════ */
.crash-controls .crash-stake-row,
.crash-controls .crash-auto-row {
  transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.25s ease, padding 0.25s ease;
  overflow: hidden;
  max-height: 220px;
}
.crash-controls.bet-locked .crash-stake-row,
.crash-controls.bet-locked .crash-auto-row {
  max-height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  pointer-events: none;
}

/* Compact "Твоя ставка" мини-чип — показывается вместо stake-row когда заблокировано */
.crash-bet-summary {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(255,213,106,0.08), rgba(255,213,106,0.03));
  border: 1px solid rgba(255,213,106,0.22);
  border-radius: 14px;
  font-size: 12px;
  color: rgba(255,235,180,0.85);
}
.crash-controls.bet-locked .crash-bet-summary {
  display: flex;
}
.crash-bet-summary-label {
  color: rgba(255,213,106,0.55);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.crash-bet-summary-stake {
  font-weight: 800;
  color: #ffd76a;
  font-variant-numeric: tabular-nums;
}
.crash-bet-summary-auto {
  margin-left: auto;
  color: rgba(180,210,255,0.65);
  font-size: 11px;
}

/* Уменьшаем минимальную высоту stage чтобы было больше места для кнопок */
.crash-stage,
.crash-stage[data-phase="betting"],
.crash-stage[data-phase="flying"],
.crash-stage[data-phase="crashed"] {
  min-height: 320px !important;
}
@media (max-height: 700px) {
  .crash-stage,
  .crash-stage[data-phase="betting"],
  .crash-stage[data-phase="flying"],
  .crash-stage[data-phase="crashed"] { min-height: 280px !important; }
}

/* ══════════════════════════════════════════════════════════
   v=134 — First-time disclaimer / Age-gate modal
   Показывается при первом входе; блокирует app пока не принять.
   ══════════════════════════════════════════════════════════ */
.disclaimer-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.disclaimer-overlay.show {
  display: flex;
  animation: disclaimerFadeIn 0.35s ease-out;
}
@keyframes disclaimerFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.disclaimer-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(199,125,255,0.20), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(255,86,112,0.18), transparent 60%),
    rgba(4, 2, 12, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.disclaimer-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: linear-gradient(180deg, #1c0f30 0%, #15082a 60%, #0a0418 100%);
  border: 1.5px solid rgba(255,213,106,0.30);
  border-radius: 22px;
  padding: 22px 22px 18px;
  box-shadow:
    0 22px 60px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,213,106,0.10),
    inset 0 1px 0 rgba(255,255,255,0.08);
  isolation: isolate;
  animation: disclaimerSlideUp 0.45s cubic-bezier(.36,1.4,.6,1);
  -webkit-overflow-scrolling: touch;
}
@keyframes disclaimerSlideUp {
  0%   { transform: translateY(40px) scale(0.95); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.disclaimer-stars {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 8% 12%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 24% 38%, rgba(255,213,106,0.6) 50%, transparent 50%),
    radial-gradient(1px 1px at 52% 18%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 74% 48%, rgba(255,255,255,0.5) 50%, transparent 50%),
    radial-gradient(1px 1px at 88% 22%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 14% 76%, rgba(255,213,106,0.7) 50%, transparent 50%),
    radial-gradient(1px 1px at 64% 88%, #fff 50%, transparent 50%);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
.disclaimer-glow {
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,213,106,0.20), transparent 65%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

.disclaimer-header {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 18px;
}
.disclaimer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  margin-bottom: 10px;
  background: linear-gradient(180deg, rgba(255,90,114,0.20), rgba(199,125,255,0.10));
  border: 1.5px solid rgba(255,90,114,0.45);
  border-radius: 50%;
  font-size: 30px;
  box-shadow: 0 6px 18px rgba(255,90,114,0.25);
}
.disclaimer-title {
  margin: 4px 0 6px;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.3px;
  line-height: 1.25;
}
.disclaimer-title span {
  color: #ffd76a;
  text-shadow: 0 0 18px rgba(255,213,106,0.45);
}
.disclaimer-sub {
  font-size: 13px;
  color: rgba(200,220,255,0.60);
}

.disclaimer-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.disclaimer-row {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 11px;
  align-items: flex-start;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.dr-icon {
  font-size: 22px;
  text-align: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45));
}
.dr-text { min-width: 0; }
.dr-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}
.dr-desc {
  font-size: 11.5px;
  color: rgba(220,225,240,0.72);
  line-height: 1.45;
}
.dr-desc b { color: #ffd76a; }

/* ─ Consent checkbox ─ */
.disclaimer-consent {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(255,213,106,0.08), rgba(255,213,106,0.02));
  border: 1px solid rgba(255,213,106,0.25);
  border-radius: 12px;
}
.dc-check {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}
.dc-check input { position: absolute; opacity: 0; pointer-events: none; }
.dc-box {
  width: 22px; height: 22px;
  border: 2px solid rgba(255,213,106,0.45);
  border-radius: 6px;
  background: rgba(0,0,0,0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
  flex-shrink: 0;
}
.dc-box::after {
  content: '';
  width: 12px; height: 7px;
  border-left: 2.5px solid #1a1410;
  border-bottom: 2.5px solid #1a1410;
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform .2s cubic-bezier(.36,1.6,.6,1);
}
.dc-check input:checked ~ .dc-box {
  background: linear-gradient(180deg, #ffd76a, #e09020);
  border-color: rgba(255,213,106,0.85);
  box-shadow: 0 0 12px rgba(255,213,106,0.45);
}
.dc-check input:checked ~ .dc-box::after {
  transform: rotate(-45deg) translate(1px, -1px) scale(1);
}
.dc-text {
  font-size: 12.5px;
  color: rgba(220,225,240,0.90);
  line-height: 1.45;
  padding-top: 2px;
}
.dc-text a {
  color: #ffd76a;
  text-decoration: underline;
  text-decoration-color: rgba(255,213,106,0.40);
}

/* ─ Actions ─ */
.disclaimer-actions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.btn-disclaimer-secondary {
  padding: 13px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  color: rgba(220,225,240,0.85);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: all .15s ease;
}
.btn-disclaimer-secondary:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,213,106,0.30);
  color: #fff;
}
.btn-disclaimer-primary {
  padding: 14px 16px;
  background: linear-gradient(180deg, #ffd76a 0%, #e09020 100%);
  border: 1px solid rgba(255,235,180,0.55);
  border-radius: 14px;
  color: #1a1410;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow:
    0 6px 18px rgba(255,213,106,0.45),
    inset 0 1px 0 rgba(255,255,255,0.40);
  transition: transform .12s ease, filter .12s ease, box-shadow .15s ease;
}
.btn-disclaimer-primary:not(:disabled):hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 22px rgba(255,213,106,0.60), inset 0 1px 0 rgba(255,255,255,0.50);
}
.btn-disclaimer-primary:not(:disabled):active {
  transform: scale(0.97);
}
.btn-disclaimer-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.bdp-arrow {
  transition: transform .2s ease;
  font-size: 16px;
}
.btn-disclaimer-primary:not(:disabled):hover .bdp-arrow {
  transform: translateX(3px);
}

.disclaimer-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 10px;
  color: rgba(200,220,255,0.40);
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* ─ Mobile ─ */
@media (max-width: 380px) {
  .disclaimer-card {
    padding: 18px 16px 14px;
    border-radius: 18px;
  }
  .disclaimer-badge { width: 52px; height: 52px; font-size: 26px; }
  .disclaimer-title { font-size: 18px; }
  .disclaimer-sub { font-size: 12px; }
  .disclaimer-row { padding: 9px 11px; gap: 10px; grid-template-columns: 34px 1fr; }
  .dr-icon { font-size: 20px; }
  .dr-title { font-size: 12.5px; }
  .dr-desc { font-size: 11px; }
  .disclaimer-actions { grid-template-columns: 1fr; }
  .btn-disclaimer-secondary, .btn-disclaimer-primary {
    padding: 12px 14px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .disclaimer-overlay.show,
  .disclaimer-card,
  .dc-box::after { animation: none !important; transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hho-1, .hho-2, .hho-3,
  .hub-hero-premium .hhp-balance::before,
  .hub-hero-premium .hhp-live-crash .hlc-shine,
  .hub-hero-premium .hhp-live-crash .hlc-stars,
  .har-track,
  .hgt-art-glow, .hgt-art-rays,
  .hgt-art-emoji-rocket,
  .hgt-art-deco-7s .hgt-deco-chip,
  .hlc-pulse, .har-live-dot,
  .hgts-dot { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════
   ╔══════════════════════════════════════════════════════════╗
   ║  v=136 — DESIGN POLISH PASS                               ║
   ║  Комплексный апгрейд деталей через всё приложение:        ║
   ║  toast'ы, top-bar, bottom-nav, profile, wallet,           ║
   ║  empty-states, transitions, micro-interactions.           ║
   ╚══════════════════════════════════════════════════════════╝
   ════════════════════════════════════════════════════════════ */

/* ── 1. TOP-BAR balance — pulse on change ─────────────────── */
.balance .b-item.ms {
  position: relative;
  transition: transform .25s cubic-bezier(.36,1.6,.6,1), filter .25s ease;
}
.balance .b-item.ms.changed {
  animation: balanceFlash 0.7s cubic-bezier(.36,1.6,.6,1);
}
@keyframes balanceFlash {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.12); filter: brightness(1.2) drop-shadow(0 0 12px rgba(255,213,106,0.55)); }
  100% { transform: scale(1); filter: brightness(1); }
}
.balance .b-item.ms.up #msBalance {
  color: #6ee7b7 !important;
  transition: color .35s ease;
}
.balance .b-item.ms.down #msBalance {
  color: #ff8aa3 !important;
  transition: color .35s ease;
}

/* Bell button — modern micro-interaction */
.bell-btn {
  position: relative;
  transition: transform .15s ease, background .2s ease !important;
}
.bell-btn:hover { background: rgba(255,213,106,0.08) !important; }
.bell-btn .bell-icon {
  display: inline-block;
  transition: transform .2s ease;
}
.bell-btn:active .bell-icon {
  animation: bellShake 0.5s ease;
}
@keyframes bellShake {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(-15deg); }
  40%      { transform: rotate(12deg); }
  60%      { transform: rotate(-8deg); }
  80%      { transform: rotate(5deg); }
}
.bell-dot {
  animation: bellDotPulse 1.8s ease-in-out infinite;
}
@keyframes bellDotPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,86,112,0.65); }
  50%      { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(255,86,112,0); }
}

/* ── 2. BOTTOM NAV — active indicator polish ─────────────── */
.tabs.nav-glass .tab {
  position: relative;
  isolation: isolate;
}
.tabs.nav-glass .tab .t-iconwrap {
  position: relative;
  z-index: 1;
  transition: transform .25s cubic-bezier(.36,1.6,.6,1);
}
.tabs.nav-glass .tab.active .t-iconwrap {
  transform: translateY(-3px) scale(1.05);
}
.tabs.nav-glass .tab.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 24px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ffd76a, transparent);
  border-radius: 99px;
  transform: translateX(-50%);
  animation: navActiveIndicator 0.35s cubic-bezier(.36,1.6,.6,1);
  box-shadow: 0 0 8px rgba(255,213,106,0.65);
}
@keyframes navActiveIndicator {
  0%   { width: 0; opacity: 0; }
  100% { width: 24px; opacity: 1; }
}
.tabs.nav-glass .tab .t-label {
  transition: opacity .2s ease, transform .2s ease;
}
.tab-dot {
  animation: tabDotPulse 1.8s ease-in-out infinite;
}
@keyframes tabDotPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); box-shadow: 0 0 0 4px rgba(255,86,112,0); }
}

/* ── 3. TOAST — premium glass slide-in ────────────────────── */
.toast {
  bottom: 92px !important;
  transform: translateX(-50%) translateY(20px) !important;
  opacity: 0;
  transition: opacity .3s ease, transform .35s cubic-bezier(.36,1.6,.6,1) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  max-width: 92vw;
  text-align: center;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto;
}
.toast::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), transparent 50%);
  pointer-events: none;
}
.toast[data-type="success"]::after {
  content: '✓';
  display: inline-block;
  margin-right: 7px;
  color: #6ee7b7;
  font-weight: 900;
}
.toast[data-type="error"]::after {
  content: '⚠';
  display: inline-block;
  margin-right: 7px;
  color: #ff8aa3;
  font-weight: 900;
}

/* ── 4. UNIFIED EMPTY STATES ─────────────────────────────── */
.empty,
.empty-rich {
  position: relative;
  text-align: center;
  padding: 32px 16px !important;
  color: rgba(220,225,240,0.50) !important;
  font-size: 13px;
}
.empty::before {
  content: '';
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,213,106,0.18), transparent 60%),
    rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
/* Skip pseudo-circle for richer empty states (they have custom icons) */
.empty-rich::before { display: none; }
.empty-rich .empty-icon {
  font-size: 44px;
  margin-bottom: 10px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
  opacity: 0.85;
}
.empty-rich .empty-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}
.empty-rich .empty-sub {
  font-size: 12.5px;
  color: rgba(220,225,240,0.55);
  line-height: 1.5;
  max-width: 280px;
  margin: 0 auto;
}

/* ── 5. SCREEN TRANSITIONS — softer enter ────────────────── */
.screen.active {
  animation: screenSlideIn 0.32s cubic-bezier(.25,.46,.45,.94);
}
@keyframes screenSlideIn {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── 6. UNIVERSAL CARD HOVER LIFT ────────────────────────── */
.card {
  transition: transform .15s ease, border-color .15s ease, box-shadow .2s ease;
}
.card:not(.no-hover):hover {
  transform: translateY(-1px);
}
.card.is-clickable:hover {
  border-color: rgba(255,213,106,0.30) !important;
  box-shadow: 0 6px 20px rgba(255,213,106,0.12);
}

/* ── 7. BUTTON polish — universal active feedback ────────── */
.btn.primary,
.btn.purple,
.btn.green {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn.primary::before,
.btn.purple::before,
.btn.green::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,0.18) 50%,
    transparent 70%);
  transition: left 0.5s ease;
  pointer-events: none;
}
.btn.primary:hover::before,
.btn.purple:hover::before,
.btn.green:hover::before {
  left: 100%;
}
.btn:active:not(:disabled) {
  transform: scale(0.96) !important;
}

/* ── 8. SECTION DIVIDERS — elegant gradient lines ────────── */
.hub-section,
.hub-section + .hub-section {
  position: relative;
}
.hub-section + .hub-section::before {
  content: '';
  display: block;
  height: 1px;
  margin: 16px 14px;
  background: linear-gradient(90deg, transparent, rgba(255,213,106,0.18), transparent);
}

/* ── 9. PROFILE — premium card upgrades ──────────────────── */
.profile-head {
  position: relative;
  padding: 22px 18px 18px !important;
  background:
    radial-gradient(ellipse 60% 80% at 20% 0%, rgba(199,125,255,0.18), transparent 60%),
    radial-gradient(ellipse 70% 70% at 90% 100%, rgba(255,86,112,0.15), transparent 60%),
    linear-gradient(180deg, rgba(28,18,50,0.85), rgba(15,8,28,0.85)) !important;
  border: 1px solid rgba(255,213,106,0.18) !important;
  border-radius: 22px !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
}
.profile-head::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(255,213,106,0.15), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.profile-head .avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  font-size: 28px !important;
  background: linear-gradient(135deg, #ff5670, #c77dff, #ffd76a) !important;
  background-size: 200% 200% !important;
  animation: avatarShift 6s ease-in-out infinite !important;
  box-shadow:
    0 8px 22px rgba(199,125,255,0.45),
    inset 0 2px 0 rgba(255,255,255,0.30),
    inset 0 -2px 0 rgba(0,0,0,0.25) !important;
  position: relative;
  z-index: 1;
}
@keyframes avatarShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.profile-head .who-name {
  font-size: 19px !important;
  font-weight: 900 !important;
  letter-spacing: -0.2px;
  color: #fff !important;
}
.profile-head .who-id {
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: rgba(255,213,106,0.65) !important;
}

/* Stats grid on profile/sub-screens — premium */
.stats-grid .stat,
.stats-grid .stat.hero {
  position: relative;
  background: linear-gradient(180deg, rgba(28,18,50,0.65), rgba(15,8,28,0.65)) !important;
  border: 1px solid rgba(255,213,106,0.10) !important;
  border-radius: 14px !important;
  padding: 12px 10px !important;
  overflow: hidden;
  transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.stats-grid .stat::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,213,106,0.05), transparent 60%);
}
.stats-grid .stat:hover {
  border-color: rgba(255,213,106,0.30) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(255,213,106,0.10);
}
.stats-grid .stat-v {
  font-size: 22px !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums;
  color: #ffd76a !important;
  letter-spacing: -0.5px;
}
.stats-grid .stat.hero .stat-v {
  font-size: 28px !important;
  text-shadow: 0 0 14px rgba(255,213,106,0.40);
}
.stats-grid .stat-l {
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45) !important;
}

/* ── 10. WALLET — premium balance display ────────────────── */
.wallet-tab-balance {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.wallet-tab-balance::before {
  content: '';
  position: absolute;
  top: -50%; right: -30%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,213,106,0.20), transparent 70%);
  filter: blur(35px);
  pointer-events: none;
  z-index: 0;
  animation: walletGlowDrift 8s ease-in-out infinite;
}
@keyframes walletGlowDrift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-20px, 30px); }
}

/* Deposit option cards — premium */
.deposit-method,
.dep-method {
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.deposit-method:hover,
.dep-method:hover {
  transform: translateY(-2px);
  border-color: rgba(255,213,106,0.45);
  box-shadow: 0 8px 22px rgba(255,213,106,0.15);
}

/* ── 11. PILL/TAG hover glow ─────────────────────────────── */
.hgt-tag:hover,
.csp:hover,
.chs-pill:hover {
  filter: brightness(1.15);
}

/* ── 12. PREMIUM SKELETON shimmer (unified) ──────────────── */
.sk-shimmer,
.har-skeleton,
[data-loading="true"] {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,213,106,0.10) 50%,
    rgba(255,255,255,0.04) 75%) !important;
  background-size: 200% 100% !important;
  animation: skShimmer 1.4s ease-in-out infinite !important;
  border-radius: 8px;
}
@keyframes skShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 13. SUPPORT/CONTACT card polish ─────────────────────── */
.support-card .support-row {
  padding: 14px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 6px;
  transition: background .15s ease, border-color .15s ease;
}
.support-card .support-row:hover {
  background: rgba(255,213,106,0.06);
  border-color: rgba(255,213,106,0.25);
}
.support-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #ffd76a, #c97a1f) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 18px !important;
  box-shadow: 0 4px 10px rgba(255,213,106,0.35), inset 0 1px 0 rgba(255,255,255,0.40) !important;
  flex-shrink: 0;
}

/* ── 14. SCROLLBARS — premium dark theme ─────────────────── */
#screens::-webkit-scrollbar,
.modal-body::-webkit-scrollbar {
  width: 8px;
}
#screens::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track {
  background: transparent;
}
#screens::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
  background: rgba(255,213,106,0.25);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
#screens::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255,213,106,0.55);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* ── 15. SELECTION highlight (gold) ──────────────────────── */
::selection {
  background: rgba(255,213,106,0.35);
  color: #fff;
}
::-moz-selection {
  background: rgba(255,213,106,0.35);
  color: #fff;
}

/* ── 16. FOCUS RING (a11y + style) ───────────────────────── */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid rgba(255,213,106,0.65);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ── 17. CARD-TITLE elegant treatment ────────────────────── */
.card-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,213,106,0.20), transparent);
  margin-left: 6px;
}

/* ── 18. CHANNEL CARD micro-polish ───────────────────────── */
.channel-card {
  transition: transform .15s ease, border-color .15s ease;
}
.channel-card:hover {
  border-color: rgba(255,213,106,0.35);
  transform: translateY(-1px);
}
.channel-icon {
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
  transition: transform .25s cubic-bezier(.36,1.6,.6,1);
}
.channel-card:hover .channel-icon {
  transform: scale(1.08) rotate(-5deg);
}

/* ── 20. NAV BADGES + chip animations on update ──────────── */
.hs-count {
  animation: hsCountPulse 2.4s ease-in-out infinite;
  transition: transform .2s ease;
}
@keyframes hsCountPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,213,106,0.30); }
  50%      { box-shadow: 0 0 0 4px rgba(255,213,106,0); }
}

/* ── 21. MOTION SAFETY ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .balance .b-item.ms.changed,
  .bell-btn:active .bell-icon,
  .bell-dot,
  .tabs.nav-glass .tab.active::after,
  .tabs.nav-glass .tab.active .t-iconwrap,
  .tab-dot,
  .profile-head .avatar,
  .channel-card:hover .channel-icon,
  .hs-count,
  .stats-grid .stat,
  .sk-shimmer,
  .har-skeleton,
  .toast,
  .screen.active,
  .wallet-tab-balance::before,
  .deposit-method, .dep-method {
    animation: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   ╔══════════════════════════════════════════════════════════╗
   ║  v=138 — COMPREHENSIVE DESIGN POLISH PASS                 ║
   ║  25 секций улучшений: overlays, forms, tiers, modals,     ║
   ║  achievements, onboarding, mines, slots, wallet, market.  ║
   ╚══════════════════════════════════════════════════════════╝
   ════════════════════════════════════════════════════════════ */

/* ── 1. CRASH WIN OVERLAY — premium celebration ─────────── */
.crash-win-overlay .cro-card {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(110,231,183,0.20), transparent 65%),
    radial-gradient(ellipse 90% 80% at 50% 100%, rgba(255,213,106,0.18), transparent 70%),
    linear-gradient(180deg, #0a1a14 0%, #0a1620 60%, #050a14 100%) !important;
  border: 1.5px solid rgba(110,231,183,0.55) !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,0.55),
    0 0 0 3px rgba(110,231,183,0.08),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
  animation: croCardWin 0.55s cubic-bezier(.36,1.4,.6,1) !important;
}
@keyframes croCardWin {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.crash-win-overlay .cro-icon {
  font-size: 60px !important;
  filter: drop-shadow(0 0 24px rgba(110,231,183,0.65)) drop-shadow(0 4px 12px rgba(0,0,0,0.45));
  animation: croIconBounce 1s cubic-bezier(.36,1.6,.6,1);
}
@keyframes croIconBounce {
  0%   { transform: scale(0) rotate(-90deg); }
  60%  { transform: scale(1.2) rotate(10deg); }
  100% { transform: scale(1) rotate(0); }
}
.crash-win-overlay .cro-title {
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  background: linear-gradient(180deg, #6ee7b7, #1ea470);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #6ee7b7;
  text-shadow: 0 0 30px rgba(110,231,183,0.65);
  filter: none;
}
.crash-win-overlay .cro-mult-pill {
  background: linear-gradient(180deg, #6ee7b7, #10b981) !important;
  color: #06241a !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  padding: 8px 22px !important;
  border-radius: 99px !important;
  box-shadow:
    0 8px 24px rgba(110,231,183,0.55),
    inset 0 2px 0 rgba(255,255,255,0.40) !important;
  animation: croMultPulse 1.6s ease-in-out infinite;
}
@keyframes croMultPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 24px rgba(110,231,183,0.55), inset 0 2px 0 rgba(255,255,255,0.40); }
  50%      { transform: scale(1.04); box-shadow: 0 8px 28px rgba(110,231,183,0.75), inset 0 2px 0 rgba(255,255,255,0.40); }
}
.crash-win-overlay .cro-amount-row {
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(110,231,183,0.25);
  border-radius: 14px;
  padding: 14px;
  margin: 14px 0;
}
.crash-win-overlay .cro-val.gold {
  color: #ffd76a !important;
  text-shadow: 0 0 14px rgba(255,213,106,0.55);
  font-size: 22px !important;
  font-weight: 900;
}
.crash-win-overlay .cro-arrow {
  color: rgba(110,231,183,0.65);
  font-size: 22px;
  animation: croArrowFlow 1.4s ease-in-out infinite;
}
@keyframes croArrowFlow {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
.crash-win-overlay .cro-profit {
  background: rgba(110,231,183,0.15);
  border: 1px solid rgba(110,231,183,0.40);
  border-radius: 99px;
  padding: 5px 16px;
  font-size: 13px;
  font-weight: 800;
  color: #6ee7b7;
  display: inline-block;
}
.crash-win-overlay .cro-close-btn {
  background: linear-gradient(180deg, #6ee7b7, #10b981) !important;
  color: #06241a !important;
  font-weight: 900 !important;
  box-shadow: 0 6px 18px rgba(110,231,183,0.45), inset 0 1px 0 rgba(255,255,255,0.40) !important;
}

/* ── 2. CRASH LOSS OVERLAY — dramatic crash ─────────────── */
.crash-loss-overlay .cro-card {
  background:
    radial-gradient(ellipse 90% 60% at 50% 50%, rgba(255,86,112,0.20), transparent 65%),
    linear-gradient(180deg, #1a0612 0%, #2a0a18 60%, #050a14 100%) !important;
  border: 1.5px solid rgba(255,86,112,0.55) !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,0.55),
    0 0 0 3px rgba(255,86,112,0.08) !important;
  animation: croCardLoss 0.7s cubic-bezier(.36,.07,.19,.97) !important;
}
@keyframes croCardLoss {
  0%   { transform: scale(0.85) translate(0, 0); opacity: 0; }
  15%  { transform: scale(1.02) translate(-5px, 2px); opacity: 1; }
  30%  { transform: scale(1) translate(5px, -2px); }
  45%  { transform: scale(1) translate(-3px, 3px); }
  60%  { transform: scale(1) translate(3px, -1px); }
  100% { transform: scale(1) translate(0, 0); opacity: 1; }
}
.crash-loss-overlay .cro-icon {
  font-size: 64px !important;
  filter: drop-shadow(0 0 24px rgba(255,86,112,0.65));
  animation: croLossExplode 0.6s cubic-bezier(.36,1.6,.6,1);
}
@keyframes croLossExplode {
  0%   { transform: scale(0); }
  50%  { transform: scale(1.3) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}
.crash-loss-overlay .cro-title {
  color: #ff5a72 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: 2px;
  text-shadow: 0 0 24px rgba(255,86,112,0.65);
}
.crash-loss-overlay .cro-mult-pill.loss {
  background: rgba(255,86,112,0.15) !important;
  border: 1.5px solid rgba(255,86,112,0.55);
  color: #ff8aa3 !important;
  font-size: 26px !important;
  padding: 6px 18px !important;
}
.crash-loss-overlay .cro-loss-amount {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #ff5a72 !important;
  text-shadow: 0 0 18px rgba(255,86,112,0.55);
  margin: 12px 0;
}

/* ── 3. WALLET HERO — premium balance card ──────────────── */
.wallet-tab-balance {
  background:
    radial-gradient(ellipse 70% 80% at 30% 0%, rgba(255,213,106,0.18), transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 100%, rgba(199,125,255,0.14), transparent 60%),
    linear-gradient(180deg, #1c0f30 0%, #15082a 60%, #0a0418 100%) !important;
  border: 1px solid rgba(255,213,106,0.30) !important;
  border-radius: 22px !important;
  padding: 24px 20px 20px !important;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.wtb-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255,213,106,0.65);
  margin-bottom: 8px;
}
.wtb-value {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 44px;
  font-weight: 900;
  color: #ffd76a;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(255,213,106,0.45);
  line-height: 1;
}
.wtb-value .m-coin.xl {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 4px 12px rgba(255,213,106,0.55));
  animation: wtbCoinSpin 6s linear infinite;
}
@keyframes wtbCoinSpin {
  0%, 92% { transform: rotateY(0); }
  100%    { transform: rotateY(360deg); }
}
.wtb-tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 14px;
  background: rgba(255,213,106,0.10);
  border: 1px solid rgba(255,213,106,0.30);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 800;
  color: #ffd76a;
}

/* ── 4. TIER BADGE SYSTEM ────────────────────────────────── */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border: 1px solid currentColor;
  background: rgba(255,255,255,0.04);
}
.tier-badge.bronze {
  color: #cd7f32;
  background: linear-gradient(135deg, rgba(205,127,50,0.15), rgba(180,90,30,0.08));
  border-color: rgba(205,127,50,0.55);
}
.tier-badge.silver {
  color: #c0c8d8;
  background: linear-gradient(135deg, rgba(192,200,216,0.15), rgba(140,150,170,0.08));
  border-color: rgba(192,200,216,0.55);
}
.tier-badge.gold {
  color: #ffd76a;
  background: linear-gradient(135deg, rgba(255,213,106,0.20), rgba(220,150,50,0.10));
  border-color: rgba(255,213,106,0.65);
  box-shadow: 0 0 12px rgba(255,213,106,0.30);
}
.tier-badge.platinum {
  color: #c8e8ff;
  background: linear-gradient(135deg, rgba(200,232,255,0.18), rgba(150,200,255,0.08));
  border-color: rgba(200,232,255,0.65);
  box-shadow: 0 0 14px rgba(200,232,255,0.40);
}
.tier-badge.diamond {
  color: #b8eaff;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(135deg, rgba(180,234,255,0.22), rgba(199,125,255,0.15));
  border-color: rgba(180,234,255,0.85);
  box-shadow: 0 0 18px rgba(180,234,255,0.55);
  animation: tierDiamondShimmer 3s ease-in-out infinite;
}
@keyframes tierDiamondShimmer {
  0%, 100% { box-shadow: 0 0 18px rgba(180,234,255,0.55); }
  50%      { box-shadow: 0 0 24px rgba(199,125,255,0.65); }
}

/* ── 5. UNIFIED FORM INPUTS ─────────────────────────────── */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="search"],
textarea,
select {
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input[type="text"]:focus-visible,
input[type="number"]:focus-visible,
input[type="email"]:focus-visible,
input[type="search"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: rgba(255,213,106,0.65) !important;
  box-shadow: 0 0 0 3px rgba(255,213,106,0.15) !important;
}
/* Hide spinner buttons on number inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* ── 6. MODAL/SHEET shared design language ───────────────── */
.sheet .sheet-card,
.drawer .drawer-card,
.topup-overlay .topup-card {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,213,106,0.08), transparent 60%),
    linear-gradient(180deg, #15082a 0%, #0a0418 100%) !important;
  border: 1px solid rgba(255,213,106,0.20) !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.sheet-handle {
  width: 38px !important;
  height: 4px !important;
  background: rgba(255,213,106,0.30) !important;
  border-radius: 99px;
  margin: 8px auto 14px;
}

/* ── 7. NOTIFICATIONS DRAWER polish ────────────────────── */
.drawer-card {
  border-radius: 22px 22px 0 0 !important;
}
.drawer-header {
  padding: 16px 18px 14px !important;
  border-bottom: 1px solid rgba(255,213,106,0.12) !important;
}
.drawer-title {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #ffd76a !important;
}
.drawer-action {
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(255,213,106,0.65) !important;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255,213,106,0.08);
  border: 1px solid rgba(255,213,106,0.20);
  transition: all .15s ease;
}
.drawer-action:hover {
  background: rgba(255,213,106,0.15);
  color: #ffd76a !important;
}
.drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  font-size: 14px;
  transition: background .15s ease, transform .15s ease;
}
.drawer-close:hover {
  background: rgba(255,86,112,0.12) !important;
  border-color: rgba(255,86,112,0.40) !important;
  transform: rotate(90deg);
}

/* ── 8. ACHIEVEMENT cards with rarity ────────────────────── */
.achv-card,
.achievement-tile {
  position: relative;
  background: linear-gradient(180deg, rgba(28,18,50,0.65), rgba(15,8,28,0.65));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
  transition: all .18s ease;
  overflow: hidden;
  isolation: isolate;
}
.achv-card.unlocked,
.achievement-tile.unlocked {
  border-color: rgba(255,213,106,0.45);
  background: linear-gradient(180deg, rgba(255,213,106,0.10), rgba(255,213,106,0.04));
}
.achv-card.unlocked::after,
.achievement-tile.unlocked::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,213,106,0.18) 50%, transparent 70%);
  animation: achvShine 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes achvShine {
  0%, 75% { transform: translateX(0); }
  90%     { transform: translateX(400%); }
}
.achv-card .achv-icon,
.achievement-tile .at-emoji {
  font-size: 32px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
  margin-bottom: 6px;
}
.achv-card.locked .achv-icon,
.achievement-tile.locked .at-emoji {
  filter: grayscale(0.85) brightness(0.5);
  opacity: 0.5;
}

/* ── 9. ONBOARDING premium refresh ────────────────────── */
.onboarding .onboard-card {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(199,125,255,0.18), transparent 65%),
    radial-gradient(ellipse 60% 60% at 80% 100%, rgba(255,213,106,0.15), transparent 65%),
    linear-gradient(180deg, #1c0f30 0%, #15082a 50%, #0a0418 100%) !important;
  border: 1px solid rgba(255,213,106,0.25) !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
  border-radius: 22px !important;
}
.onboarding .onboard-slide.active {
  animation: onboardSlideIn 0.45s cubic-bezier(.36,1.4,.6,1);
}
@keyframes onboardSlideIn {
  0%   { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0); }
}
.onboard-emoji {
  font-size: 64px !important;
  filter: drop-shadow(0 6px 20px rgba(255,213,106,0.45));
  animation: onboardEmojiFloat 3s ease-in-out infinite;
}
@keyframes onboardEmojiFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.onboard-title {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #ffd76a !important;
  letter-spacing: -0.3px;
  text-shadow: 0 0 14px rgba(255,213,106,0.35);
  margin-bottom: 8px;
}
.onboard-text {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: rgba(220,225,240,0.85) !important;
}
.onboard-text b { color: #ffd76a; }
.onboard-dot {
  width: 7px !important;
  height: 7px !important;
  background: rgba(255,213,106,0.25) !important;
  transition: all .25s ease;
}
.onboard-dot.active {
  background: #ffd76a !important;
  width: 22px !important;
  border-radius: 99px !important;
  box-shadow: 0 0 8px rgba(255,213,106,0.55);
}

/* ── 10. MINES cell premium ─────────────────────────────── */
.mines-cell {
  position: relative;
  transition: transform .12s ease, border-color .15s ease, background .2s ease;
  overflow: hidden;
}
.mines-cell:not(.revealed):not(.disabled):hover {
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(255,213,106,0.55) !important;
  box-shadow: 0 6px 16px rgba(255,213,106,0.20);
}
.mines-cell.revealed.gem {
  animation: mineCellGemReveal 0.5s cubic-bezier(.36,1.6,.6,1);
}
@keyframes mineCellGemReveal {
  0%   { transform: scale(0.6) rotate(-20deg); opacity: 0; }
  50%  { transform: scale(1.15) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.mines-cell.revealed.bomb {
  animation: mineCellBombExplode 0.6s cubic-bezier(.36,.07,.19,.97);
}
@keyframes mineCellBombExplode {
  0%   { transform: scale(0.6); }
  30%  { transform: scale(1.25); filter: brightness(1.5); }
  100% { transform: scale(1); filter: brightness(1); }
}
.mines-cell.revealed.gem::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(110,231,183,0.30), transparent 60%);
  pointer-events: none;
  animation: mineGemGlow 1.5s ease-in-out infinite alternate;
}
@keyframes mineGemGlow {
  0%   { opacity: 0.45; }
  100% { opacity: 0.85; }
}

/* ── 11. SLOTS reel polish ───────────────────────────────── */
.reels-5x3 .reel {
  position: relative;
  isolation: isolate;
}
.reels-5x3 .reel.has-win::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent, rgba(255,213,106,0.45), transparent);
  pointer-events: none;
  animation: reelWinGlow 0.6s ease-in-out infinite alternate;
  z-index: -1;
}
@keyframes reelWinGlow {
  0%   { opacity: 0.55; }
  100% { opacity: 1; }
}

/* ── 12. MARKET ITEM CARDS — premium showcase ───────────── */
.market-item,
.mi-card,
.market-card {
  position: relative;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
  overflow: hidden;
  isolation: isolate;
}
.market-item:hover,
.mi-card:hover,
.market-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,213,106,0.55) !important;
  box-shadow: 0 12px 28px rgba(255,213,106,0.18) !important;
}
.market-item::before,
.mi-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg,
    transparent 0%, rgba(255,213,106,0.05) 25%,
    transparent 50%, transparent 75%,
    rgba(255,213,106,0.05) 100%);
  animation: marketCardSpin 18s linear infinite;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
}
@keyframes marketCardSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ── 13. CARDS animation enter ──────────────────────────── */
.card {
  animation: cardEnter 0.4s ease-out backwards;
}
@keyframes cardEnter {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.screen.active .card:nth-child(1) { animation-delay: 0s; }
.screen.active .card:nth-child(2) { animation-delay: 0.05s; }
.screen.active .card:nth-child(3) { animation-delay: 0.10s; }
.screen.active .card:nth-child(4) { animation-delay: 0.15s; }
.screen.active .card:nth-child(5) { animation-delay: 0.20s; }
.screen.active .card:nth-child(6) { animation-delay: 0.25s; }

/* ── 14. COIN m-coin micro-spin on hover ─────────────────── */
.m-coin {
  transition: transform .25s cubic-bezier(.36,1.6,.6,1), filter .2s ease;
}
.b-item.ms:hover .m-coin,
.wtb-value:hover .m-coin,
.btn:hover .m-coin {
  transform: rotateY(180deg);
  filter: brightness(1.15);
}

/* ── 15. TICKER blink update animation ───────────────────── */
.num.bump,
[id^="hub"][class*="num"].changed,
.bal-num.bump {
  animation: numBump 0.4s cubic-bezier(.36,1.6,.6,1);
}
@keyframes numBump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); color: #ffd76a; }
  100% { transform: scale(1); }
}

/* ── 16. CHIP/PILL universal hover lift ─────────────────── */
.chip,
.pill,
.csp,
.chs-pill {
  transition: transform .12s ease, filter .15s ease;
}
.chip:hover,
.pill:hover,
.csp:hover,
.chs-pill:hover {
  transform: translateY(-1px);
}

/* ── 17. CARD CLICKABLE feedback ────────────────────────── */
.card-clickable:active,
button.card:active,
.hub-game-tile:active,
.hub-feature-tile:active {
  transform: scale(0.97) !important;
}

/* ── 18. PROFILE TIER row polish ────────────────────────── */
.sd-tier-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,213,106,0.06), transparent);
  border-radius: 12px;
  border: 1px solid rgba(255,213,106,0.10);
}

/* ── 19. SPARK LINE polish ───────────────────────────────── */
.sd-sparkline {
  filter: drop-shadow(0 4px 10px rgba(255,213,106,0.18));
  margin-top: 6px;
}
.sd-spark-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(255,213,106,0.55);
  margin-top: 12px;
}

/* ── 20. SLOT MODES card polish ──────────────────────────── */
.slot-mode-card {
  position: relative;
  transition: all .15s ease;
  overflow: hidden;
  isolation: isolate;
}
.slot-mode-card.active {
  box-shadow:
    0 8px 22px rgba(255,213,106,0.30),
    inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
.slot-mode-card.active::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.10) 50%, transparent 70%);
  animation: slotModeShine 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes slotModeShine {
  0%, 75% { transform: translateX(0); }
  90%     { transform: translateX(400%); }
}

/* ── 21. WIN celebration confetti polish ─────────────────── */
.ccp,
.confetti-piece {
  border-radius: 1px;
  width: 8px !important;
  height: 14px !important;
  animation: ccpFall 1.8s cubic-bezier(.25,.46,.45,.94) forwards;
}
@keyframes ccpFall {
  0%   { transform: translateY(-100px) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(400px) rotate(720deg); opacity: 0; }
}

/* ── 22. SETTINGS row polish ──────────────────────────────── */
.setting-row {
  transition: background .15s ease;
  padding: 14px 12px !important;
  margin: 0 -12px;
  border-radius: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.setting-row:hover {
  background: rgba(255,213,106,0.04);
}

/* ── 23. INFO BANNER style ─────────────────────────────── */
.info-banner,
.hint.info {
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(80,140,255,0.08), rgba(80,140,255,0.03));
  border-left: 3px solid rgba(120,180,255,0.65);
  border-radius: 0 10px 10px 0;
  font-size: 12.5px;
  color: rgba(210,225,255,0.85);
  margin: 10px 0;
}
.info-banner.warning,
.hint.warning {
  background: linear-gradient(180deg, rgba(255,213,106,0.08), rgba(255,213,106,0.03));
  border-left-color: rgba(255,213,106,0.65);
  color: rgba(255,235,180,0.90);
}
.info-banner.error,
.hint.error {
  background: linear-gradient(180deg, rgba(255,86,112,0.08), rgba(255,86,112,0.03));
  border-left-color: rgba(255,86,112,0.65);
  color: rgba(255,200,210,0.90);
}

/* ── 24. PROGRESS BARS unified ─────────────────────────── */
.progress-bar,
.bsc-progress-bar {
  position: relative;
  overflow: hidden;
}
.progress-bar::before,
.bsc-progress-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: progressShimmer 2s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes progressShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 25. REDUCED MOTION cleanup ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .crash-win-overlay .cro-card,
  .crash-win-overlay .cro-icon,
  .crash-win-overlay .cro-mult-pill,
  .crash-win-overlay .cro-arrow,
  .crash-loss-overlay .cro-card,
  .crash-loss-overlay .cro-icon,
  .wtb-value .m-coin.xl,
  .tier-badge.diamond,
  .achv-card.unlocked::after,
  .achievement-tile.unlocked::after,
  .onboarding .onboard-slide.active,
  .onboard-emoji,
  .mines-cell.revealed.gem,
  .mines-cell.revealed.bomb,
  .mines-cell.revealed.gem::after,
  .reels-5x3 .reel.has-win::before,
  .market-item::before,
  .mi-card::before,
  .card,
  .slot-mode-card.active::after,
  .ccp,
  .confetti-piece,
  .progress-bar::before,
  .bsc-progress-bar::before,
  .num.bump,
  .bal-num.bump {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   ╔══════════════════════════════════════════════════════════╗
   ║  v=140 — HARMONY POLISH PASS                              ║
   ║  Финальная шлифовка: единый язык дизайна по всем          ║
   ║  мелким деталям. Tokens-based, no breaking changes.       ║
   ╚══════════════════════════════════════════════════════════╝
   ════════════════════════════════════════════════════════════ */

/* ── 1. CARD TITLE harmonization (универсальный) ─────────── */
.card-title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.1px;
  margin-bottom: var(--s-3);
  color: #fff;
}
.card-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255,213,106,0.20) 0%,
    rgba(255,213,106,0.05) 60%,
    transparent 100%);
  margin-left: var(--s-1);
}
/* Title can have inline icon emoji — give it proper size */
.card-title > .icon,
.card-title > svg {
  font-size: 16px;
  flex-shrink: 0;
}

/* ── 2. SECTION HEADERS unified ─────────────────────────── */
.hub-section-head,
.section-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-4) var(--s-3) var(--s-3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.hs-icon { font-size: 13px; filter: drop-shadow(0 0 6px rgba(255,213,106,0.40)); }
.hs-title { color: #fff; letter-spacing: 0.2px; font-size: 14px; text-transform: none; font-weight: 900; }
.hs-count {
  margin-left: auto;
  padding: 3px var(--s-2);
  background: rgba(255,213,106,0.10);
  border: 1px solid rgba(255,213,106,0.30);
  border-radius: var(--r-full);
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

/* ── 3. HUB WIDGETS unification ─────────────────────────── */
.hub-widget {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  cursor: pointer;
  transition: transform var(--d-fast) ease,
              border-color var(--d-fast) ease,
              box-shadow var(--d-med) ease;
  text-align: left;
  font: inherit;
  color: inherit;
}
.hub-widget:hover {
  transform: translateY(-1px);
  border-color: rgba(255,213,106,0.35);
  box-shadow: 0 8px 20px rgba(255,213,106,0.10);
}
.hub-widget:active { transform: scale(0.985); }
.hw-icon-wrap {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--hw-c1, #ffd76a), var(--hw-c2, #c97a1f));
  box-shadow: 0 4px 12px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.30);
  flex-shrink: 0;
}
.hw-icon { font-size: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45)); }
.hw-body { min-width: 0; }
.hw-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hw-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hw-cta {
  font-size: 13px;
  font-weight: 800;
  color: var(--gold);
  padding: 6px var(--s-3);
  background: rgba(255,213,106,0.10);
  border: 1px solid rgba(255,213,106,0.30);
  border-radius: var(--r-full);
  transition: all var(--d-fast) ease;
  flex-shrink: 0;
}
.hub-widget:hover .hw-cta {
  background: rgba(255,213,106,0.18);
  border-color: rgba(255,213,106,0.55);
}
.hw-cta.hw-cta-hot {
  background: linear-gradient(135deg, rgba(255,86,112,0.20), rgba(199,125,255,0.18));
  border-color: rgba(255,86,112,0.50);
  color: #fff;
}

/* ── 4. BUTTONS — primary/secondary/ghost harmony ─────── */
.btn {
  font-family: inherit;
  font-weight: 800;
  letter-spacing: 0.1px;
  border-radius: var(--r-sm);
  transition: transform var(--d-instant) ease,
              filter var(--d-fast) ease,
              box-shadow var(--d-fast) ease,
              background var(--d-fast) ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.3);
  pointer-events: none;
}
.btn.primary {
  background: linear-gradient(180deg, var(--gold), var(--gold-2)) !important;
  color: #1a1410 !important;
  border-color: rgba(255,235,180,0.55);
  box-shadow: 0 4px 14px rgba(255,213,106,0.40), inset 0 1px 0 rgba(255,255,255,0.40);
}
.btn.primary:hover:not(:disabled) {
  box-shadow: 0 6px 18px rgba(255,213,106,0.55), inset 0 1px 0 rgba(255,255,255,0.50);
  filter: brightness(1.05);
}
.btn.green {
  background: linear-gradient(180deg, #5ce0a0, #1ea470) !important;
  color: #06241a !important;
  border-color: rgba(170,250,210,0.55);
  box-shadow: 0 4px 14px rgba(110,231,183,0.40), inset 0 1px 0 rgba(255,255,255,0.40);
}
.btn.purple {
  background: linear-gradient(180deg, var(--purple), var(--purple-2)) !important;
  color: #fff !important;
  border-color: rgba(199,170,255,0.55);
  box-shadow: 0 4px 14px rgba(167,139,250,0.40), inset 0 1px 0 rgba(255,255,255,0.30);
}
.btn.ghost {
  background: var(--surface) !important;
  border-color: var(--border-2) !important;
  color: var(--text-2) !important;
}
.btn.ghost:hover:not(:disabled) {
  background: var(--surface-2) !important;
  border-color: rgba(255,213,106,0.35) !important;
  color: #fff !important;
}
.btn.small {
  font-size: 12px;
  padding: 7px var(--s-3);
}
.btn.big {
  font-size: 16px;
  padding: 14px var(--s-5);
  border-radius: var(--r);
}

/* Btn pending (loading) — uniform */
.btn.pending {
  position: relative;
  pointer-events: none;
  opacity: 0.75;
  overflow: hidden;
}
.btn.pending::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: btnLoading 1s linear infinite;
}
@keyframes btnLoading {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── 5. FORM LABELS unified ─────────────────────────────── */
label.form-label,
.form-label,
.field-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--s-2);
}

/* ── 6. M-COIN icon contexts ───────────────────────────── */
.m-coin {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  flex-shrink: 0;
}
.m-coin.sm { width: 14px; height: 14px; vertical-align: -2px; }
.m-coin.md { width: 18px; height: 18px; }
.m-coin.lg { width: 24px; height: 24px; vertical-align: -4px; }
.m-coin.xl { width: 36px; height: 36px; vertical-align: -6px; }
.m-coin.xxl { width: 56px; height: 56px; }

/* ── 7. TIER badge in profile/wallet ─────────────────────── */
.wtb-tier,
.profile-tier {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  background: rgba(255,213,106,0.10);
  border: 1px solid rgba(255,213,106,0.30);
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.3px;
}

/* ── 8. DISABLED states unified ─────────────────────────── */
.disabled,
[aria-disabled="true"],
input:disabled,
textarea:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

/* ── 9. SKELETON loader unified pattern ────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,213,106,0.10) 50%,
    rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: shimmerSkeleton 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmerSkeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-line {
  height: 14px;
  margin-bottom: var(--s-2);
}
.skeleton-line:last-child { margin-bottom: 0; width: 70%; }
.skeleton-circle {
  border-radius: 50%;
  width: 40px; height: 40px;
}
.skeleton-card {
  height: 80px;
  margin-bottom: var(--s-2);
}

/* ── 10. PILL/BADGE size system ──────────────────────────── */
.pill,
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--text-2);
}
.pill.lg, .chip.lg {
  padding: var(--s-2) var(--s-3);
  font-size: 12px;
}
.pill.success, .chip.success {
  background: var(--c-success-dim);
  border-color: var(--c-success-border);
  color: var(--c-success);
}
.pill.warning, .chip.warning {
  background: var(--c-warning-dim);
  border-color: var(--c-warning-border);
  color: var(--c-warning);
}
.pill.danger, .chip.danger {
  background: var(--c-danger-dim);
  border-color: var(--c-danger-border);
  color: var(--c-danger);
}
.pill.info, .chip.info {
  background: var(--c-info-dim);
  border-color: var(--c-info-border);
  color: var(--c-info);
}

/* ── 11. DECORATIVE CORNER highlights on premium cards ── */
.hub-hero-premium,
.profile-head,
.wallet-tab-balance,
.disclaimer-card {
  position: relative;
}
.hub-hero-premium::before,
.profile-head::before,
.wallet-tab-balance::after {
  /* Corner subtle highlight on top-right */
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 60px; height: 60px;
  background: radial-gradient(circle at top right,
    rgba(255,255,255,0.04),
    transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ── 12. DIVIDER decorations ─────────────────────────────── */
.divider,
hr.divider {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,213,106,0.30) 50%,
    transparent 100%);
  margin: var(--s-4) 0;
}
.divider-thick {
  height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--gold), transparent);
  opacity: 0.40;
  border-radius: 99px;
}

/* ── 13. SPINNER unified ────────────────────────────────── */
.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255,213,106,0.20);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spinnerRotate 0.75s linear infinite;
  display: inline-block;
}
.spinner.sm { width: 16px; height: 16px; border-width: 1.5px; }
.spinner.lg { width: 40px; height: 40px; border-width: 3px; }
@keyframes spinnerRotate {
  to { transform: rotate(360deg); }
}

/* ── 14. STATUS dot system ─────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-success);
  box-shadow: 0 0 6px currentColor;
}
.status-dot.danger { background: var(--c-danger); }
.status-dot.warning { background: var(--c-warning); }
.status-dot.info { background: var(--c-info); }
.status-dot.pulse {
  animation: statusDotPulse 1.6s ease-in-out infinite;
}
@keyframes statusDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.55; }
}

/* ── 15. LIST ITEM hover lift (generic) ────────────────── */
.list-item,
.history-row,
.fr-row,
.kv,
.feed-row {
  transition: background var(--d-fast) ease,
              border-color var(--d-fast) ease,
              transform var(--d-fast) ease;
}
.list-item:hover,
.history-row:hover,
.fr-row:hover {
  background: rgba(255,213,106,0.04);
}

/* ── 16. KV (key-value) row polish ─────────────────────── */
.kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  font-size: 13px;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.kv:last-child { border-bottom: none; }
.kv > span:first-child {
  color: var(--text-3);
  font-weight: 600;
}
.kv > b {
  color: var(--text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ── 17. TOOLTIP minimal ───────────────────────────────── */
[data-tooltip] {
  position: relative;
}
[data-tooltip]:hover::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: rgba(20,12,40,0.95);
  border: 1px solid rgba(255,213,106,0.30);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--r-xs);
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.55);
}

/* ── 18. TAP feedback universal ────────────────────────── */
button:active:not(:disabled),
.csp:active:not(.active),
.tab:active,
[role="button"]:active {
  transform: scale(0.97);
  transition: transform var(--d-instant) var(--ease-quart);
}

/* ── 19. FOCUS RING harmonization ──────────────────────── */
:focus-visible {
  outline: 2px solid rgba(255,213,106,0.55);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
input:focus-visible,
textarea:focus-visible {
  outline-offset: 0;
}

/* ── 20. TOUCH TARGETS minimum 44px (a11y) ───────────── */
.tab,
.btn:not(.btn.small),
.bell-btn {
  min-height: 44px;
}

/* ── 21. SUB-TABS (wallet, profile inner tabs) ────────── */
.subtabs,
.tabs-inner {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: var(--s-3);
  overflow-x: auto;
  scrollbar-width: none;
}
.subtabs::-webkit-scrollbar,
.tabs-inner::-webkit-scrollbar { display: none; }
.subtab,
.tab-inner {
  flex: 1;
  padding: var(--s-2) var(--s-3);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
  background: transparent;
  border: 0;
  border-radius: var(--r-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--d-fast) ease;
}
.subtab.active,
.tab-inner.active {
  background: linear-gradient(180deg, rgba(255,213,106,0.18), rgba(255,213,106,0.10));
  color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.subtab:hover:not(.active),
.tab-inner:hover:not(.active) {
  color: var(--text-2);
  background: rgba(255,255,255,0.03);
}

/* ── 22. HINT text consistency ─────────────────────────── */
.hint {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}
.hint b { color: var(--text); }
.hint.small {
  font-size: 11px;
  opacity: 0.85;
}

/* ── 23. EMPTY state icon harmonization ──────────────── */
.empty-rich,
.empty {
  padding: var(--s-6) var(--s-4) !important;
}
.empty-icon {
  width: 64px; height: 64px;
  margin: 0 auto var(--s-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,213,106,0.18), transparent 60%),
    rgba(255,255,255,0.03);
  border: 1px solid rgba(255,213,106,0.18);
  border-radius: 50%;
}

/* ── 24. NUMBER counter — золотой shimmer на изменении ─── */
.num.flash-gold {
  animation: numFlashGold 0.7s ease-out;
}
@keyframes numFlashGold {
  0%   { color: #ffd76a; text-shadow: 0 0 14px rgba(255,213,106,0.65); }
  100% { color: inherit; text-shadow: none; }
}

/* ── 25. PROFILE TIER big visualizer ───────────────────── */
.profile-tier-big {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(135deg, rgba(255,213,106,0.10), rgba(199,125,255,0.05));
  border: 1px solid rgba(255,213,106,0.25);
  border-radius: var(--r);
  margin-top: var(--s-3);
}
.ptb-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  box-shadow: 0 4px 12px rgba(255,213,106,0.40), inset 0 1px 0 rgba(255,255,255,0.40);
}
.ptb-info { flex: 1; min-width: 0; }
.ptb-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,213,106,0.55);
  margin-bottom: 2px;
}
.ptb-name {
  font-size: 16px;
  font-weight: 900;
  color: var(--gold);
}

/* ── 26. MICRO icon backdrop ──────────────────────────── */
.icon-backdrop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg,
    var(--icon-c1, rgba(255,213,106,0.20)),
    var(--icon-c2, rgba(255,213,106,0.05)));
  border: 1px solid var(--border-2);
  font-size: 18px;
  flex-shrink: 0;
}

/* ── 27. MOBILE breakpoint fine-tuning ─────────────────── */
@media (max-width: 380px) {
  :root {
    --s-3:  10px;
    --s-4:  14px;
    --s-5:  16px;
  }
  .card-title { font-size: 13px; margin-bottom: 10px; }
  .hub-section-head { margin: var(--s-3) 10px var(--s-2); }
  .hub-widget { grid-template-columns: 44px 1fr auto; padding: 10px 12px; }
  .hw-icon-wrap { width: 44px; height: 44px; }
  .hw-icon { font-size: 20px; }
  .hw-title { font-size: 13px; }
  .hw-sub { font-size: 11px; }
  .btn.big { padding: 12px var(--s-4); font-size: 15px; }
}

/* ── 28. REDUCED MOTION fallback ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .spinner,
  .status-dot.pulse,
  .btn.pending::after,
  .num.flash-gold {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   v=141 — Manual deposit form (replaces preset packs)
   ════════════════════════════════════════════════════════════ */
.topup-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.topup-input {
  height: 56px;
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  background: rgba(5,10,25,0.85);
  border: 1.5px solid rgba(255,213,106,0.30);
  border-radius: var(--r);
  color: #ffd76a;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  padding: 0 var(--s-3);
  transition: border-color var(--d-fast) ease, box-shadow var(--d-fast) ease;
}
.topup-input:focus {
  outline: none;
  border-color: rgba(255,213,106,0.85);
  box-shadow: 0 0 0 3px rgba(255,213,106,0.15);
}
.topup-presets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: var(--s-1);
}
.topup-preset {
  padding: var(--s-2) var(--s-1);
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xs);
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--d-fast) ease;
}
.topup-preset:hover {
  background: rgba(255,213,106,0.08);
  border-color: rgba(255,213,106,0.35);
  color: var(--gold);
}
.topup-quote {
  padding: var(--s-2) var(--s-3);
  background: rgba(110,231,183,0.08);
  border: 1px solid rgba(110,231,183,0.30);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: rgba(220,255,235,0.85);
  text-align: center;
}
.topup-quote b { color: #6ee7b7; font-variant-numeric: tabular-nums; }
.topup-form .btn.big { margin-top: var(--s-2); }

@media (max-width: 380px) {
  .topup-input { height: 50px; font-size: 20px; }
  .topup-presets { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════════════════════
   v=144 — NFT INVENTORY + SHEET + REVEAL OVERLAY
   ════════════════════════════════════════════════════════════ */

/* ── NFT Inventory card in Profile ─────────────────────── */
.nft-inventory-card {
  position: relative;
  overflow: hidden;
}
.nft-inventory-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(199,125,255,0.18), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}
.nfti-badge {
  margin-left: auto;
  padding: 2px 10px;
  background: rgba(255,213,106,0.12);
  border: 1px solid rgba(255,213,106,0.30);
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.3px;
}
.nfti-summary {
  margin: var(--s-2) 0 var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(180deg, rgba(255,213,106,0.08), rgba(255,213,106,0.02));
  border: 1px solid rgba(255,213,106,0.20);
  border-radius: var(--r-sm);
}
.nfti-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.nfti-summary-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(255,213,106,0.60);
}
.nfti-summary-val {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 22px;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(255,213,106,0.40);
  font-variant-numeric: tabular-nums;
}
.nfti-suffix {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,213,106,0.55);
}
.nfti-grid {
  display: grid;
  /* Auto-fill: на мобильнике 3 колонки по ~110px, на десктопе 4-6 колонок.
     Cap по max-width грида чтобы тайлы не растягивались на широких экранах. */
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--s-2);
  max-width: 720px;
  margin: 0 auto;
}
@media (max-width: 380px) {
  /* Узкие телефоны: 2 колонки чуть шире */
  .nfti-grid { grid-template-columns: repeat(2, 1fr); }
}
.nfti-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--s-6) var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
}
.nfti-empty-art {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nfti-empty-art-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(199,125,255,0.20), transparent 70%),
    radial-gradient(circle at 30% 30%, rgba(255,213,106,0.18), transparent 60%);
  border-radius: 50%;
  filter: blur(8px);
  animation: nftiEmptyPulse 3s ease-in-out infinite;
}
@keyframes nftiEmptyPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.12); opacity: 1; }
}
.nfti-empty-art-emoji {
  position: relative;
  font-size: 64px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.50));
  animation: nftiEmptyFloat 3.5s ease-in-out infinite;
}
@keyframes nftiEmptyFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-6px) rotate(3deg); }
}
.nfti-empty-title {
  font-size: 16px;
  font-weight: 800;
  color: rgba(255,255,255,0.85);
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}
.nfti-empty-sub {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,0.50);
  max-width: 280px;
  margin-bottom: var(--s-4);
}
.nfti-empty-cta {
  min-width: 200px;
  padding: 10px 22px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px;
}
@media (prefers-reduced-motion: reduce) {
  .nfti-empty-art-bg, .nfti-empty-art-emoji { animation: none !important; }
}

/* Error-state — отличается от пустого инвентаря красноватым тоном */
.nfti-empty.nfti-error .nfti-empty-art-bg {
  background:
    radial-gradient(circle at center, rgba(255,90,90,0.22), transparent 70%),
    radial-gradient(circle at 30% 30%, rgba(255,179,0,0.18), transparent 60%);
}
.nfti-empty.nfti-error .nfti-empty-title { color: #ffd5d5; }

/* ── Фильтр-чипы для inventory ────────────────────────── */
.nfti-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--s-3) 0;
  padding-bottom: var(--s-1);
}
.nfti-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15px;
  color: rgba(255,255,255,0.70);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: transform 0.14s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s;
  user-select: none;
  -webkit-user-select: none;
}
.nfti-chip:hover { background: rgba(255,255,255,0.08); }
.nfti-chip:active { transform: scale(0.95); }
.nfti-chip.active {
  background: linear-gradient(135deg, rgba(255,213,106,0.22), rgba(199,125,255,0.22));
  border-color: rgba(255,213,106,0.55);
  color: #fff;
  box-shadow: 0 0 14px rgba(255,213,106,0.20);
}
.nfti-chip[data-rarity="rare"].active      { box-shadow: 0 0 14px rgba(125,195,255,0.30); border-color: rgba(125,195,255,0.55); }
.nfti-chip[data-rarity="epic"].active      { box-shadow: 0 0 16px rgba(199,125,255,0.40); border-color: rgba(199,125,255,0.60); }
.nfti-chip[data-rarity="legendary"].active { box-shadow: 0 0 18px rgba(255,213,106,0.40); border-color: rgba(255,213,106,0.70); }
.nfti-chip-count {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 800;
  border-radius: var(--r-full);
  background: rgba(0,0,0,0.30);
  color: rgba(255,255,255,0.70);
  min-width: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nfti-chip.active .nfti-chip-count {
  background: rgba(255,255,255,0.18);
  color: #fff;
}
.nfti-chip:disabled,
.nfti-chip[data-empty="1"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sort row */
.nfti-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--s-3);
  flex-wrap: wrap;
  font-size: 11px;
}
.nfti-sort-label {
  color: rgba(255,255,255,0.45);
  font-weight: 600;
  margin-right: 2px;
}
.nfti-sort-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--r-full);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.60);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  font-variant-numeric: tabular-nums;
}
.nfti-sort-btn:hover { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.20); }
.nfti-sort-btn.active {
  color: var(--gold);
  border-color: rgba(255,213,106,0.55);
  background: rgba(255,213,106,0.10);
}

/* Tile in inventory grid */
.nfti-tile {
  position: relative;
  background: linear-gradient(180deg, rgba(28,18,50,0.85), rgba(15,8,28,0.85));
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-2) var(--s-2);
  cursor: pointer;
  transition: transform var(--d-fast) ease,
              border-color var(--d-fast) ease,
              box-shadow var(--d-med) ease;
  text-align: center;
  overflow: hidden;
  /* Aspect-ratio убран — на десктопе с широкими колонками превращал тайлы
     в гигантские пустые прямоугольники. Высота теперь от контента. */
}
.nfti-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.40);
}
.nfti-tile:active { transform: scale(0.97); }
/* Rarity color coding */
.nfti-tile[data-rarity="common"]    { border-color: rgba(192,200,216,0.40); }
.nfti-tile[data-rarity="rare"]      {
  border-color: rgba(125,195,255,0.55);
  box-shadow: inset 0 0 0 1px rgba(125,195,255,0.10);
}
.nfti-tile[data-rarity="epic"]      {
  border-color: rgba(199,125,255,0.65);
  box-shadow: inset 0 0 0 1px rgba(199,125,255,0.15),
              0 4px 14px rgba(199,125,255,0.18);
}
.nfti-tile[data-rarity="legendary"] {
  border-color: rgba(255,213,106,0.75);
  box-shadow: inset 0 0 0 1px rgba(255,213,106,0.18),
              0 6px 20px rgba(255,213,106,0.25);
  background: linear-gradient(180deg, rgba(55,30,10,0.85), rgba(15,8,28,0.85));
}
.nfti-tile[data-rarity="legendary"]::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,213,106,0.15) 50%, transparent 70%);
  animation: nftiLegendaryShine 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes nftiLegendaryShine {
  0%, 75% { transform: translateX(0); }
  90%     { transform: translateX(400%); }
}

/* Status badges on tile */
.nfti-tile[data-status="withdraw_pending"] {
  border-color: rgba(255,170,100,0.55) !important;
  opacity: 0.85;
}
.nfti-tile[data-status="sold"],
.nfti-tile[data-status="withdrawn"] {
  opacity: 0.55;
  filter: grayscale(0.4);
}
.nfti-tile-status-badge {
  position: absolute;
  top: 4px; left: 4px;
  padding: 2px 6px;
  background: rgba(0,0,0,0.65);
  border-radius: var(--r-full);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  z-index: 2;
}
.nfti-tile-status-badge[data-status="withdraw_pending"] {
  background: rgba(255,170,100,0.85);
  color: #2a1500;
}
.nfti-tile-status-badge[data-status="sold"] { background: rgba(110,231,183,0.65); color: #06241a; }
.nfti-tile-status-badge[data-status="withdrawn"] { background: rgba(199,125,255,0.65); color: #fff; }

.nfti-tile-art {
  font-size: 38px;
  margin-bottom: 6px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
  line-height: 1;
}
.nfti-tile-art img {
  width: 64px; height: 64px;
  object-fit: cover;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
  /* Маска: только центр (модель), фон Fragment скрыт */
  -webkit-mask-image: radial-gradient(circle at center, #000 40%, transparent 68%);
          mask-image: radial-gradient(circle at center, #000 40%, transparent 68%);
  transform: scale(1.45);
  transform-origin: center;
}
.nfti-tile-name {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nfti-tile-floor {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 12px;
  font-weight: 900;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.nfti-tile-floor-suffix {
  font-size: 10px;
  color: rgba(255,213,106,0.55);
}
/* Cooldown-chip — теперь inline под именем, заменяет floor когда залочено.
   Раньше absolute bottom-4 right-4 перекрывал floor-цену. */
.nfti-tile-cooldown {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.70);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Когда cooldown активен — скрываем floor (через явный класс на родителе) */
.nfti-tile.has-cooldown .nfti-tile-floor {
  display: none;
}

/* ── NFT Bottom-sheet ─────────────────────────────────── */
.nft-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.nft-sheet-overlay.show {
  display: flex;
  pointer-events: auto;
  animation: nftSheetFadeIn 0.25s ease-out;
}
@keyframes nftSheetFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
.nft-sheet-bg {
  position: absolute;
  inset: 0;
  background: rgba(5, 2, 12, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.nft-sheet-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #1c1230 0%, #0e0820 100%);
  border-top: 1.5px solid rgba(255,213,106,0.30);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--s-3) var(--s-4) var(--s-5);
  box-shadow: 0 -8px 28px rgba(0,0,0,0.55);
  animation: nftSheetSlideUp 0.32s cubic-bezier(.36, 1.4, .6, 1);
}
@keyframes nftSheetSlideUp {
  0%   { transform: translateY(100%); }
  100% { transform: translateY(0); }
}
.nft-sheet-handle {
  width: 40px;
  height: 4px;
  margin: 0 auto var(--s-3);
  background: rgba(255,213,106,0.30);
  border-radius: var(--r-full);
}
.nft-sheet-close {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  cursor: pointer;
  z-index: 2;
}
.nft-sheet-art-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  margin: var(--s-2) auto var(--s-3);
  background: radial-gradient(circle at 30% 30%, rgba(255,213,106,0.20), transparent 60%);
  border-radius: 50%;
  position: relative;
}
.nft-sheet-art-wrap::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,213,106,0.25);
  animation: nftArtPulse 2.5s ease-in-out infinite;
}
@keyframes nftArtPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.06); }
}
.nft-sheet-art {
  font-size: 72px;
  line-height: 1;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5));
}
.nft-sheet-art img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  /* Маска убирает Fragment-фон */
  -webkit-mask-image: radial-gradient(circle at center, #000 40%, transparent 68%);
          mask-image: radial-gradient(circle at center, #000 40%, transparent 68%);
  transform: scale(1.45);
  transform-origin: center;
}
.nft-sheet-name {
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.2px;
  margin-bottom: 4px;
}
.nft-sheet-rarity-row {
  text-align: center;
  margin-bottom: var(--s-3);
}
.nft-sheet-rarity {
  display: inline-block;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.65);
}
.nft-sheet-rarity[data-rarity="rare"]      { color: #7dc3ff; border-color: rgba(125,195,255,0.50); background: rgba(125,195,255,0.10); }
.nft-sheet-rarity[data-rarity="epic"]      { color: #c77dff; border-color: rgba(199,125,255,0.55); background: rgba(199,125,255,0.12); }
.nft-sheet-rarity[data-rarity="legendary"] {
  color: #ffd76a; border-color: rgba(255,213,106,0.65);
  background: rgba(255,213,106,0.12);
  box-shadow: 0 0 14px rgba(255,213,106,0.30);
}
.nft-sheet-floor {
  text-align: center;
  padding: var(--s-3);
  margin-bottom: var(--s-3);
  background: rgba(255,213,106,0.08);
  border: 1px solid rgba(255,213,106,0.25);
  border-radius: var(--r-sm);
}
.nft-sheet-floor-l {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,213,106,0.55);
  margin-bottom: 4px;
}
.nft-sheet-floor b {
  font-size: 28px;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(255,213,106,0.45);
  font-variant-numeric: tabular-nums;
}
.nft-sheet-suffix {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,213,106,0.65);
  margin-left: 4px;
}
.nft-sheet-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--s-3);
  text-align: center;
  min-height: 16px;
}
.nft-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.nft-sheet-actions .btn {
  width: 100%;
}
/* Share-CTA в NFT reveal — белая primary как в reference */
.btn.share-cta {
  background: #fff !important;
  color: #0a0b18 !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  border: none;
}
.btn.share-cta:hover { background: #f1f3f7 !important; }
.btn.share-cta:active { transform: scale(0.98); }
.btn.share-cta .share-bonus {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, #3b66d0, #5e8aff);
  color: #fff;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* Withdraw "armed" state — после первого клика, ждёт подтверждения */
.nft-sheet-actions .btn.confirm-arm {
  background: linear-gradient(135deg, #ff5670 0%, #c2185b 100%) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(255,86,112,0.45), 0 6px 18px rgba(255,86,112,0.40);
  animation: btnConfirmPulse 0.6s ease-in-out infinite;
}
@keyframes btnConfirmPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,86,112,0.45), 0 6px 18px rgba(255,86,112,0.40); }
  50%      { box-shadow: 0 0 0 6px rgba(255,86,112,0.20), 0 8px 24px rgba(255,86,112,0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .nft-sheet-actions .btn.confirm-arm { animation: none !important; }
}
.nft-sheet-hint {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: rgba(125,195,255,0.06);
  border: 1px solid rgba(125,195,255,0.18);
  border-left: 3px solid rgba(125,195,255,0.55);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
}
.nft-sheet-hint-icon { font-size: 14px; }
.nft-sheet-hint-text {
  flex: 1;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(200,220,255,0.85);
}

/* ── NFT Reveal overlay (premium after-cashout celebration) ──── */
.nft-reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
}
.nft-reveal-overlay.show {
  display: flex;
  animation: nftRevealFadeIn 0.32s ease-out;
}
@keyframes nftRevealFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
.nft-reveal-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(199,125,255,0.18), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(255,213,106,0.20), transparent 60%),
    rgba(4, 2, 12, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nft-reveal-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, #1c0f30 0%, #0e0820 100%);
  border: 1.5px solid rgba(255,255,255,0.20);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5) var(--s-5);
  text-align: center;
  box-shadow: 0 22px 60px rgba(0,0,0,0.55);
  isolation: isolate;
  animation: nftRevealSlide 0.55s cubic-bezier(.36, 1.6, .6, 1);
  transition: border-color 0.25s, box-shadow 0.25s;
}
/* Tier-specific border + glow на саму карточку */
.nft-reveal-card[data-rarity="common"] {
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 22px 60px rgba(0,0,0,0.55), 0 0 30px rgba(255,255,255,0.08);
}
.nft-reveal-card[data-rarity="rare"] {
  border-color: rgba(125,195,255,0.55);
  box-shadow: 0 22px 60px rgba(0,0,0,0.55), 0 0 50px rgba(125,195,255,0.30);
}
.nft-reveal-card[data-rarity="epic"] {
  border-color: rgba(199,125,255,0.65);
  box-shadow: 0 22px 60px rgba(0,0,0,0.55), 0 0 70px rgba(199,125,255,0.42);
}
.nft-reveal-card[data-rarity="legendary"] {
  border-color: rgba(255,213,106,0.80);
  box-shadow:
    0 22px 60px rgba(0,0,0,0.55),
    0 0 90px rgba(255,213,106,0.50),
    inset 0 0 30px rgba(255,213,106,0.08);
  animation:
    nftRevealSlide 0.55s cubic-bezier(.36, 1.6, .6, 1),
    nftLegendaryCardPulse 2.5s ease-in-out 0.6s infinite;
}
@keyframes nftLegendaryCardPulse {
  0%, 100% { box-shadow:
    0 22px 60px rgba(0,0,0,0.55),
    0 0 90px rgba(255,213,106,0.50),
    inset 0 0 30px rgba(255,213,106,0.08); }
  50%      { box-shadow:
    0 22px 60px rgba(0,0,0,0.55),
    0 0 120px rgba(255,213,106,0.70),
    inset 0 0 40px rgba(255,213,106,0.18); }
}
@keyframes nftRevealSlide {
  0%   { transform: scale(0.6) translateY(40px); opacity: 0; }
  60%  { transform: scale(1.04) translateY(0); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.nft-reveal-burst {
  position: absolute;
  inset: -20px;
  background:
    conic-gradient(from 0deg,
      transparent 0%, rgba(255,213,106,0.12) 8%,
      transparent 16%, transparent 24%, rgba(255,213,106,0.10) 32%,
      transparent 40%, transparent 48%, rgba(199,125,255,0.10) 56%,
      transparent 64%, transparent 72%, rgba(110,231,183,0.10) 80%,
      transparent 88%);
  animation: nftBurstSpin 12s linear infinite;
  z-index: -1;
  pointer-events: none;
  filter: blur(8px);
}
@keyframes nftBurstSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.nft-reveal-stars {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 18% 22%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 36% 12%, rgba(255,213,106,0.85) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 78% 35%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 88% 65%, rgba(199,125,255,0.85) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 24% 85%, rgba(110,231,183,0.85) 50%, transparent 50%),
    radial-gradient(1px 1px at 64% 78%, #fff 50%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  animation: nftStarsTwinkle 3s ease-in-out infinite;
}
@keyframes nftStarsTwinkle {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1.0; }
}
.nft-reveal-title {
  position: relative;
  z-index: 1;
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.4px;
  text-shadow: 0 0 20px rgba(255,213,106,0.50);
  margin-bottom: var(--s-3);
}
.nft-reveal-title .nft-reveal-x {
  color: rgba(255,213,106,0.65);
  font-weight: 800;
}
.nft-reveal-art-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  margin: var(--s-2) auto var(--s-4);
  z-index: 1;
}
.nft-reveal-art {
  font-size: 92px;
  line-height: 1;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,0.55));
  animation: nftArtFloat 2.5s ease-in-out infinite;
  z-index: 2;
}
.nft-reveal-art img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  /* Убираем фоновый узор Fragment: радиальная маска оставляет только центр.
     Картинка увеличивается чтобы модель заняла видимую область, корни обрезаны. */
  -webkit-mask-image: radial-gradient(circle at center, #000 40%, transparent 68%);
          mask-image: radial-gradient(circle at center, #000 40%, transparent 68%);
  transform: scale(1.45);
  transform-origin: center;
}
@keyframes nftArtFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-8px) rotate(3deg); }
}
.nft-reveal-glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,213,106,0.40), transparent 65%);
  filter: blur(20px);
  z-index: 0;
  animation: nftGlowPulse 2s ease-in-out infinite;
}
@keyframes nftGlowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.15); }
}
.nft-reveal-name {
  position: relative;
  z-index: 1;
  font-size: 22px;
  font-weight: 900;
  color: #ffd76a;
  text-shadow: 0 0 18px rgba(255,213,106,0.55);
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}
.nft-reveal-rarity {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: var(--s-3);
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.70);
}
.nft-reveal-rarity[data-rarity="rare"]      { color: #7dc3ff; border-color: rgba(125,195,255,0.55); background: rgba(125,195,255,0.12); }
.nft-reveal-rarity[data-rarity="epic"]      { color: #c77dff; border-color: rgba(199,125,255,0.60); background: rgba(199,125,255,0.14); }
.nft-reveal-rarity[data-rarity="legendary"] {
  color: #ffd76a; border-color: rgba(255,213,106,0.70);
  background: rgba(255,213,106,0.14);
  box-shadow: 0 0 18px rgba(255,213,106,0.40);
}
.nft-reveal-floor {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: var(--s-5);
  padding: var(--s-2) var(--s-4);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255,213,106,0.30);
  border-radius: var(--r-full);
}
.nft-reveal-floor-l {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,213,106,0.55);
}
.nft-reveal-floor b {
  font-size: 22px;
  font-weight: 900;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.nft-reveal-suffix {
  font-size: 14px;
  color: rgba(255,213,106,0.70);
  font-weight: 700;
}
.nft-reveal-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.nft-reveal-actions .btn {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .nft-reveal-card,
  .nft-reveal-card[data-rarity="legendary"],
  .nft-reveal-burst,
  .nft-reveal-stars,
  .nft-reveal-art,
  .nft-reveal-glow,
  .nfti-tile[data-rarity="legendary"]::after,
  .nft-sheet-card,
  .nft-sheet-art-wrap::after {
    animation: none !important;
  }
}

/* ── Crash players list — BIG NFT prize cell (как в reference UI) ─────── */
.cpr-prize {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 40px;
  line-height: 1;
  flex-shrink: 0;
  overflow: hidden;
  isolation: isolate;
}
.cpr-prize.empty {
  background: transparent;
  border-color: transparent;
}
.cpr-prize img {
  width: 64px; height: 64px;
  object-fit: cover;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.50));
  /* Радиальная маска: оставляем только центральную модель, фон обрезаем */
  -webkit-mask-image: radial-gradient(circle at center, #000 42%, transparent 72%);
          mask-image: radial-gradient(circle at center, #000 42%, transparent 72%);
  transform: scale(1.4);
  transform-origin: center;
}
@media (max-width: 380px) {
  .cpr-prize { width: 56px; height: 56px; font-size: 34px; border-radius: 12px; }
  .cpr-prize img { width: 56px; height: 56px; }
}
.cpr-prize[data-rarity="rare"] {
  border-color: rgba(125,195,255,0.60);
  background: linear-gradient(180deg, rgba(125,195,255,0.18), rgba(20,40,80,0.40));
  box-shadow: 0 0 12px rgba(125,195,255,0.25), inset 0 0 16px rgba(125,195,255,0.12);
}
.cpr-prize[data-rarity="epic"] {
  border-color: rgba(199,125,255,0.65);
  background: linear-gradient(180deg, rgba(199,125,255,0.20), rgba(40,15,75,0.45));
  box-shadow: 0 0 14px rgba(199,125,255,0.32), inset 0 0 18px rgba(199,125,255,0.14);
}
.cpr-prize[data-rarity="legendary"] {
  border-color: rgba(255,213,106,0.80);
  background: linear-gradient(180deg, rgba(255,213,106,0.20), rgba(75,45,8,0.45));
  box-shadow: 0 0 18px rgba(255,213,106,0.40), inset 0 0 20px rgba(255,213,106,0.16);
}
/* Hint-style (legacy ×N.NN до NFT) — теперь не используется,
   заменено на star-placeholder. Оставляем для backward-compat. */
.cpr-prize.hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,213,106,0.75);
  background: rgba(255,213,106,0.05);
  border: 1px dashed rgba(255,213,106,0.30);
}
/* Star-placeholder: жёлтая звезда когда NFT не подбирается (target < min floor)
   или показывается универсально как "возможный приз" */
.cpr-prize.star-placeholder {
  font-size: 40px;
  line-height: 1;
  color: #ffd76a;
  text-shadow: 0 0 10px rgba(255,213,106,0.55),
               0 0 22px rgba(255,213,106,0.30),
               0 3px 6px rgba(0,0,0,0.40);
  background: transparent;
  border-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(255,153,0,0.25));
  animation: cprStarPlaceholder 3s ease-in-out infinite;
}
@keyframes cprStarPlaceholder {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50%      { transform: scale(1.07) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cpr-prize.star-placeholder { animation: none !important; }
}
/* NFT-картинка — простой inline img.
   Width/height/object-fit задаются в .cpr-prize img, .nft-reveal-art img,
   .nfti-tile-art img, .nft-sheet-art img (каждый со своими размерами + маска). */
img[data-nft-img] {
  display: block;
}

/* Плавный crossfade при смене NFT-приза во время полёта — диффер
   только сваповает prize-cell, новая получает класс cpr-prize-swap-in.
   Картинка плавно появляется + лёгкий scale-pop, фон тоже мигает в начале. */
.cpr-prize {
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.cpr-prize-swap-in {
  animation: cprPrizeSwap 0.32s ease-out;
}
@keyframes cprPrizeSwap {
  0%   { opacity: 0; transform: scale(0.78); filter: brightness(1.5); }
  50%  { opacity: 0.6; transform: scale(1.08); filter: brightness(1.2); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cpr-prize-swap-in { animation: none !important; }
}
/* WON: один раз яркая вспышка + последующее лёгкое дыхание */
.cpr-prize.won {
  animation: cprPrizeWonInitial 0.8s ease-out;
}
@keyframes cprPrizeWonInitial {
  0%   { transform: scale(0.85); filter: brightness(1.8); }
  40%  { transform: scale(1.10); filter: brightness(1.4); }
  100% { transform: scale(1);    filter: brightness(1); }
}
.cpr-prize.preview {
  /* Лёгкое дыхание для preview-NFT в полёте (не отвлекает) */
  animation: cprPreviewBreathe 3.5s ease-in-out infinite;
}
@keyframes cprPreviewBreathe {
  0%, 100% { opacity: 0.92; transform: scale(1); }
  50%      { opacity: 1.00; transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .cpr-prize.won,
  .cpr-prize.preview { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * FULLSCREEN CRASH MODE (body.scr-crash)
 * — Скрываем нижнюю tab-навигацию
 * — Sticky-CTA внизу экрана (Сделать ставку / Забрать)
 * — Убираем дублирующиеся карточки (history-grid уже в strip наверху)
 * — Заголовок страницы упрощён (только balance pill + back)
 * — Reference: Gorilla Case / Hamster Crash
 * ═══════════════════════════════════════════════════════════════════════════ */
body.scr-crash {
  /* Резервируем место под sticky CTA снизу (button ~50px + padding 10+10) */
  --crash-cta-h: 70px;
}
body.scr-crash .tabs.nav-glass,
body.scr-crash > header.topbar,
body.scr-crash #topStrip {
  display: none !important;
}
/* Auto-cashout marker — горизонтальный target-маркер на trajectory.
   Показывается во время flight когда у myBet задан auto_cashout.
   Анимируется: по мере роста мульта линия "приближается" — когда rocket
   достиг target мульта, маркер становится зелёным и срабатывает. */
.crash-auto-marker {
  position: absolute;
  left: 12px;
  right: 12px;
  z-index: 4;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,213,106,0.20) 10%,
    rgba(255,213,106,0.85) 50%,
    rgba(255,213,106,0.20) 90%,
    transparent 100%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  transition: top 0.35s cubic-bezier(.4,0,.2,1),
              background 0.25s ease,
              opacity 0.25s ease;
  opacity: 0.85;
}
.crash-auto-marker .cam-label {
  position: absolute;
  right: 80px;
  top: -8px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: rgba(255,213,106,0.15);
  border: 1px solid rgba(255,213,106,0.40);
  border-radius: 4px;
  color: rgba(255,213,106,0.90);
}
.crash-auto-marker .cam-val {
  position: absolute;
  right: 0;
  top: -10px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,213,106,0.95);
  background: rgba(28,18,55,0.95);
  border: 1px solid rgba(255,213,106,0.40);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
/* Когда auto-cashout уже сработал (мульт >= target) → зелёный */
.crash-auto-marker.triggered {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(110,231,183,0.20) 10%,
    rgba(110,231,183,0.85) 50%,
    rgba(110,231,183,0.20) 90%,
    transparent 100%);
  opacity: 0.45;
}
.crash-auto-marker.triggered .cam-label,
.crash-auto-marker.triggered .cam-val {
  background: rgba(110,231,183,0.18);
  border-color: rgba(110,231,183,0.55);
  color: #6ee7b7;
}

/* Crash-specific minimal header (только в fullscreen) */
.crash-header {
  display: none;
}
body.scr-crash .crash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  /* FIXED — гарантированно вверху viewport, не зависит от scroll-родителя */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* Solid background чтобы ничего за header'ом не светилось */
  background: #08041a;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* Тень снизу header'а — мягкий переход к контенту, без видимого "обрезания" */
body.scr-crash .crash-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -10px;
  height: 10px;
  background: linear-gradient(180deg, rgba(8,4,22,0.85), rgba(8,4,22,0));
  pointer-events: none;
}
/* Резервируем место под fixed-header чтобы первый контент не был под ним.
   64px высота header'а + safe-area сверху (для iOS notch) */
body.scr-crash #screenCrash {
  padding-top: calc(64px + env(safe-area-inset-top)) !important;
}
/* Скролл-container в scr-crash не должен сам добавлять верхний padding */
body.scr-crash #screens {
  padding-top: 0 !important;
}
/* Прозрачный placeholder слева — балансирует header после удаления back-кнопки */
.crash-header-spacer {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  visibility: hidden;
}

.crash-header-back,
.crash-header-menu {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.crash-header-back svg { display: block; }
.crash-header-back:hover,
.crash-header-menu:hover { background: rgba(255,255,255,0.16); }
.crash-header-balance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 8px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,213,106,0.30);
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.15s;
}
.crash-header-balance:hover { background: rgba(255,213,106,0.08); }
.crash-header-balance .chb-icon { color: var(--gold); }
.crash-header-balance b { color: var(--gold); }
.crash-header-balance .chb-plus {
  margin-left: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4d7eff, #2752dc);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(39,82,220,0.35);
}
.crash-header-balance .chb-plus svg {
  display: block;
}
/* Скрываем нижние карточки (history-grid + rules) — они дублируют strip наверху */
body.scr-crash .crash-info-card {
  display: none !important;
}
/* Crash-stage в fullscreen — edge-to-edge без margin и round-corners */
body.scr-crash .crash-stage {
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  height: 340px !important;
}
/* History-strip — теперь position:static (отдельным блоком над stage), не absolute */
body.scr-crash .crash-history-strip {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 4px 12px 0;
  padding: 8px 0 4px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
/* Screen занимает всю высоту, без bottom padding для nav.
   ВАЖНО: убираем screenFadeIn animation (с transform) на screenCrash,
   потому что transform создаёт containing block — fixed-элементы внутри
   (header, CTA) начинают анкориться к screen вместо viewport. */
body.scr-crash #screenCrash {
  padding-bottom: calc(var(--crash-cta-h) + env(safe-area-inset-bottom));
  min-height: 100vh;
  min-height: 100dvh;
  animation: none !important;
  transform: none !important;
}
/* Sticky CTA-блок — solid background, прижат к самому низу viewport.
   Минимум padding-bottom — кнопка вплотную к нижней кромке.
   Также overhang -40px ниже viewport — чтобы Telegram chat-preview под WebApp'ом
   не был виден если Telegram не в fullscreen-режиме. */
body.scr-crash .crash-controls {
  position: fixed;
  bottom: -40px; left: 0; right: 0;
  z-index: 100;
  padding: 10px 12px calc(40px + max(10px, env(safe-area-inset-bottom)));
  background: #08041a;
  border-top: 1px solid rgba(255,255,255,0.06);
}
/* Тень сверху CTA — мягкий переход к списку игроков, без резкого среза */
body.scr-crash .crash-controls::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -14px;
  height: 14px;
  background: linear-gradient(180deg, rgba(8,4,22,0), rgba(8,4,22,0.85));
  pointer-events: none;
}
/* Inline stake-row + auto-row полностью скрыты в fullscreen — настройка через модалку */
body.scr-crash .crash-stake-row,
body.scr-crash .crash-auto-row {
  display: none !important;
}
/* Bet-summary в locked-режиме (после размещения) */
body.scr-crash .crash-bet-summary {
  display: none;
}
body.scr-crash .crash-controls.bet-locked .crash-bet-summary {
  display: flex;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 8px;
  font-weight: 700;
}
body.scr-crash .crash-bet-summary-stake b { color: var(--gold); }
/* Action-button: full-width, чистый blue gradient как в gorilla */
body.scr-crash .crash-action-btn {
  margin: 0;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 17px;
}
body.scr-crash .crash-action-btn .cab-icon {
  display: none; /* убираем emoji иконки — в reference их тоже нет */
}
body.scr-crash .crash-action-btn.place-bet {
  background: linear-gradient(180deg, #4d7eff 0%, #2752dc 100%);
  color: #fff;
  box-shadow: 0 6px 20px rgba(77,126,255,0.35);
}
body.scr-crash .crash-action-btn.place-bet:disabled {
  background: linear-gradient(180deg, rgba(77,126,255,0.45), rgba(39,82,220,0.45)) !important;
  cursor: not-allowed;
  opacity: 0.7;
}
body.scr-crash .crash-action-btn.cash-out {
  background: linear-gradient(180deg, #10b981 0%, #058560 100%);
  color: #fff;
  animation: none; /* убираем тяжелый pulse в fullscreen */
}
body.scr-crash .crash-action-btn.cash-out.pending {
  background: linear-gradient(180deg, #25a085 0%, #056048 100%) !important;
}
/* Header: balance pill в стиле reference */
body.scr-crash #screenCrash::before {
  /* Skip — используем существующий header */
}
/* Players card — выделенная секция с тонким контейнером */
body.scr-crash .crash-players-card {
  background: linear-gradient(180deg, rgba(15,9,30,0.55), rgba(8,4,22,0.55)) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 16px !important;
  padding: 6px 8px !important;
  margin: 8px 12px 0;
}
/* Компактные ряды игроков (вместо больших 64px-карточек) */
body.scr-crash .crash-player-row {
  grid-template-columns: 32px 1fr 44px !important;
  gap: 10px !important;
  padding: 6px 8px !important;
  margin: 2px 0 !important;
  border-radius: 10px !important;
  font-size: 12px !important;
}
body.scr-crash .cpr-avatar {
  width: 32px !important;
  height: 32px !important;
  font-size: 13px !important;
  border-width: 1.5px !important;
}
body.scr-crash .cpr-name {
  font-size: 13px !important;
}
body.scr-crash .cpr-stake-row {
  font-size: 11px !important;
  gap: 6px !important;
}
body.scr-crash .cpr-stake .cpr-star {
  font-size: 12px !important;
}
body.scr-crash .cpr-prize {
  width: 44px !important;
  height: 44px !important;
  font-size: 28px !important;
  border-radius: 10px !important;
}
body.scr-crash .cpr-prize img {
  width: 44px !important;
  height: 44px !important;
}
body.scr-crash .cpr-prize.star-placeholder {
  font-size: 28px !important;
}
body.scr-crash .cpr-mid {
  gap: 2px !important;
}
body.scr-crash .cpr-name-row {
  gap: 4px !important;
}
body.scr-crash .cpr-me {
  font-size: 9px !important;
  padding: 0 5px !important;
}
/* Empty-state — когда ни одна ставка не сделана в раунде */
.crash-players-empty {
  text-align: center;
  padding: 28px 16px;
  color: rgba(255,255,255,0.38);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.06);
  border-radius: 12px;
  margin: 8px 0;
}

/* ═══ ⋯ MENU SHEET (bottom-sheet с опциями) ═══ */
.crash-menu-sheet {
  position: fixed;
  inset: 0;
  z-index: 9620;
  display: none;
}
.crash-menu-sheet.show { display: block; }
.cms-bg {
  position: absolute; inset: 0;
  background: rgba(4,2,12,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cms-card {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #1c1238 0%, #0c0822 100%);
  border-radius: 22px 22px 0 0;
  padding: 12px 14px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,0.10);
  animation: cmsSlideUp 0.28s cubic-bezier(.36, 1.4, .6, 1);
}
@keyframes cmsSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.cms-handle {
  width: 38px;
  height: 4px;
  background: rgba(255,255,255,0.20);
  border-radius: 2px;
  margin: 0 auto 14px;
}
.cms-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 8px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.cms-item:hover, .cms-item:active { background: rgba(255,255,255,0.04); }
.cms-item:last-child { border-bottom: none; }
.cms-emoji {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  flex-shrink: 0;
}
.cms-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cms-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.cms-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.50);
}
.cms-arrow {
  font-size: 18px;
  color: rgba(255,255,255,0.30);
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .cms-card { animation: none !important; }
}

/* ═══ NFT CATALOG BROWSER (доступен из меню ⋯) ═══ */
.crash-catalog-modal {
  position: fixed;
  inset: 0;
  z-index: 9650;
  display: none;
}
.crash-catalog-modal.show { display: block; }
.ccm-bg {
  position: absolute; inset: 0;
  background: rgba(4, 2, 12, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ccm-card {
  position: absolute;
  inset: 6vh 0 0 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #1c1238 0%, #0c0822 100%);
  border-radius: 22px 22px 0 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  padding: 16px 14px 0;
  animation: ccmSlideUp 0.32s cubic-bezier(.36, 1.4, .6, 1);
}
@keyframes ccmSlideUp {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.ccm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.ccm-title {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}
.ccm-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.ccm-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ccm-chip {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  cursor: pointer;
}
.ccm-chip.active {
  background: rgba(255,213,106,0.18);
  border-color: rgba(255,213,106,0.55);
  color: #fff;
}
.ccm-chip[data-rarity="rare"].active      { background: rgba(125,195,255,0.20); border-color: rgba(125,195,255,0.55); }
.ccm-chip[data-rarity="epic"].active      { background: rgba(199,125,255,0.22); border-color: rgba(199,125,255,0.60); }
.ccm-chip[data-rarity="legendary"].active { background: rgba(255,213,106,0.22); border-color: rgba(255,213,106,0.70); }
.ccm-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.ccm-loading,
.ccm-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: rgba(255,255,255,0.45);
  font-size: 13px;
}
/* Skeleton-tile во время загрузки каталога */
.ccm-skel {
  background: linear-gradient(180deg, rgba(28,18,55,0.55), rgba(15,9,28,0.55));
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 10px 6px 8px;
  position: relative;
  overflow: hidden;
}
.ccm-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.06) 50%,
    transparent 100%);
  animation: ccmShimmer 1.4s ease-in-out infinite;
}
.ccm-skel-art {
  height: 78px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  margin-bottom: 6px;
}
.ccm-skel-name {
  height: 11px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  margin-bottom: 4px;
}
.ccm-skel-floor {
  height: 9px;
  width: 60%;
  margin: 0 auto;
  background: rgba(255,213,106,0.10);
  border-radius: 4px;
}
@keyframes ccmShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .ccm-skel::after { animation: none !important; }
}
.ccm-tile {
  position: relative;
  background: linear-gradient(180deg, rgba(28,18,55,0.85), rgba(15,9,28,0.85));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 10px 6px 8px;
  text-align: center;
  overflow: hidden;
}
.ccm-tile[data-rarity="rare"]      { border-color: rgba(125,195,255,0.35); }
.ccm-tile[data-rarity="epic"]      {
  border-color: rgba(199,125,255,0.45);
  box-shadow: 0 0 10px rgba(199,125,255,0.16);
}
.ccm-tile[data-rarity="legendary"] {
  border-color: rgba(255,213,106,0.55);
  box-shadow: 0 0 14px rgba(255,213,106,0.22);
}
.ccm-tile-art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 78px;
  font-size: 50px;
  margin-bottom: 6px;
}
.ccm-tile-art img {
  width: 78px;
  height: 78px;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(circle at center, #000 42%, transparent 70%);
          mask-image: radial-gradient(circle at center, #000 42%, transparent 70%);
  transform: scale(1.4);
}
.ccm-tile-name {
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.ccm-tile-floor {
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* ═══ BET-PLACEMENT MODAL (Gorilla-style fullscreen sheet) ═══ */
.crash-bet-modal {
  position: fixed;
  inset: 0;
  z-index: 9700;
  display: none;
  align-items: center;
  justify-content: center;
}
.crash-bet-modal.show {
  display: flex;
  animation: cbmFadeIn 0.22s ease-out;
}
@keyframes cbmFadeIn { from { opacity: 0; } to { opacity: 1; } }
.cbm-bg {
  position: absolute; inset: 0;
  background: rgba(4, 2, 12, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.cbm-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 12px;
  background: linear-gradient(180deg, #1c1238 0%, #0c0822 100%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 22px 20px 20px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  animation: cbmSlide 0.32s cubic-bezier(.36, 1.4, .6, 1);
}
@keyframes cbmSlide {
  from { transform: translateY(40px) scale(0.95); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.cbm-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cbm-close:hover { background: rgba(255,255,255,0.14); }
.cbm-title {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
}
.cbm-balance-row {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.cbm-bal-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,213,106,0.30);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,0.80);
  font-variant-numeric: tabular-nums;
}
.cbm-bal-pill b { color: var(--gold); }
.cbm-amount-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
}
.cbm-amount-val {
  font-size: 54px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  min-width: 80px;
  max-width: 220px;
  outline: none;
  background: transparent;
  border: none;
  text-align: right;
  caret-color: var(--gold);
  /* iOS — отключить auto-correct/zoom на focus */
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.cbm-amount-val:focus { color: var(--gold); }
.cbm-amount-val::-webkit-outer-spin-button,
.cbm-amount-val::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cbm-amount-suffix {
  font-size: 22px;
  font-weight: 800;
  color: rgba(255,255,255,0.40);
  letter-spacing: 0.3px;
}
.cbm-presets {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 14px;
}
.cbm-preset {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.80);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  font-variant-numeric: tabular-nums;
}
.cbm-preset:hover { background: rgba(255,255,255,0.12); }
.cbm-preset:active { transform: scale(0.95); }
.cbm-adjust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 0 0 12px;
}
.cbm-adj {
  padding: 8px 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.75);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, color 0.15s;
  text-transform: uppercase;
}
.cbm-adj:hover { background: rgba(255,255,255,0.10); color: #fff; }
.cbm-adj:active { transform: scale(0.95); }
.cbm-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.42);
  margin-bottom: 22px;
  font-variant-numeric: tabular-nums;
}
.cbm-auto-row {
  margin-bottom: 18px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  text-align: left;
}
.cbm-auto-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
.cbm-auto-toggle input[type=checkbox] {
  width: 18px; height: 18px;
  cursor: pointer;
  accent-color: #4d7eff;
}
.cbm-auto-label {
  font-weight: 700;
}
.cbm-auto-mult {
  width: 64px;
  margin-left: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.30);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cbm-auto-mult:disabled { opacity: 0.5; }
.cbm-submit {
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(180deg, #4d7eff 0%, #2752dc 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(77,126,255,0.42);
  transition: transform 0.1s;
}
.cbm-submit:hover { transform: translateY(-1px); }
.cbm-submit:active { transform: scale(0.98); }
.cbm-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.cbm-submit.pending::before { content: '⏳ '; }
@media (prefers-reduced-motion: reduce) {
  .crash-bet-modal.show, .cbm-card { animation: none !important; }
}

/* ── 📥 NFT Deposit (inventory → balance) ──────────────────── */
.nfti-actions {
  margin: var(--s-3) 0 var(--s-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nfti-actions .btn { width: 100%; }
.nfti-actions-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  text-align: center;
  line-height: 1.4;
}

.nft-deposit-overlay {
  position: fixed; inset: 0; z-index: 9100;
  display: none;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.nft-deposit-overlay.show {
  display: flex;
  pointer-events: auto;
  animation: nftSheetFadeIn 0.22s ease-out;
}
.nft-deposit-bg {
  position: absolute; inset: 0;
  background: rgba(5,2,12,0.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.nft-deposit-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #1c1230 0%, #0e0820 100%);
  border-top: 1.5px solid rgba(120, 200, 255, 0.30);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--s-3) var(--s-4) var(--s-5);
  box-shadow: 0 -8px 28px rgba(0,0,0,0.55);
  animation: nftSheetSlideUp 0.30s cubic-bezier(.36, 1.4, .6, 1);
}
.nft-deposit-handle {
  width: 40px; height: 4px;
  margin: 0 auto var(--s-3);
  background: rgba(120, 200, 255, 0.30);
  border-radius: var(--r-full);
}
.nft-deposit-close {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  cursor: pointer;
  z-index: 2;
}
.nft-deposit-title {
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 6px;
}
.nft-deposit-sub {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.62);
  line-height: 1.45;
  margin-bottom: var(--s-3);
}
.nft-deposit-search { margin-bottom: var(--s-2); }
.nft-deposit-search input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  font-size: 14px;
  outline: none;
}
.nft-deposit-search input:focus {
  border-color: rgba(120, 200, 255, 0.45);
}
.nft-deposit-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 56vh;
  overflow-y: auto;
  padding: 2px;
}
.nft-deposit-loading, .nft-deposit-empty {
  text-align: center;
  color: rgba(255,255,255,0.5);
  padding: 24px 8px;
  font-size: 13px;
}
.ndp-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
  text-align: left;
  color: #fff;
}
.ndp-row:hover {
  background: rgba(120, 200, 255, 0.08);
  border-color: rgba(120, 200, 255, 0.30);
}
.ndp-row:active { transform: scale(0.99); }
.ndp-row-art {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: radial-gradient(circle at 30% 30%, rgba(255,213,106,0.16), transparent 60%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ndp-row-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.4);
  transform-origin: center;
}
.ndp-row-art .ndp-emoji { font-size: 22px; }
.ndp-row-meta { min-width: 0; }
.ndp-row-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ndp-row-floor {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}
.ndp-row-credit {
  font-size: 13px;
  font-weight: 800;
  color: #7eedb1;
  white-space: nowrap;
}

/* Voucher step */
.nft-deposit-success-icon {
  text-align: center;
  font-size: 44px;
  margin: 6px 0 4px;
  filter: drop-shadow(0 6px 14px rgba(120, 200, 255, 0.30));
}
.nft-deposit-vch-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--s-3);
}
.nft-deposit-vch {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 800;
  color: #fff;
  background: rgba(120, 200, 255, 0.10);
  border: 1px solid rgba(120, 200, 255, 0.30);
  padding: 6px 10px;
  border-radius: 8px;
}
.nft-deposit-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: var(--s-3);
}
.nft-deposit-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  padding: 8px 6px;
  text-align: center;
}
.nft-deposit-stat-l {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.nft-deposit-stat b { font-size: 16px; font-weight: 800; color: #fff; }
.nft-deposit-stat-credit {
  background: linear-gradient(180deg, rgba(126,237,177,0.10), rgba(126,237,177,0.04));
  border-color: rgba(126,237,177,0.30);
}
.nft-deposit-stat-credit b { color: #7eedb1; }
.nft-deposit-steps-list {
  margin: 0 0 var(--s-3);
  padding-left: 22px;
  color: rgba(255,255,255,0.78);
  font-size: 13px;
  line-height: 1.55;
}
.nft-deposit-steps-list li { margin-bottom: 4px; }
.nft-deposit-steps-list a { color: #7ec8ff; text-decoration: underline; }
.nft-deposit-warn {
  background: rgba(255,179,0,0.08);
  border: 1px solid rgba(255,179,0,0.25);
  color: rgba(255,220,140,0.88);
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 10px;
  border-radius: var(--r-md);
  margin-bottom: var(--s-3);
}
.nft-deposit-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nft-deposit-actions .btn { width: 100%; }

.nft-deposit-manual {
  margin-top: 10px;
  font-size: 12px;
}
.nft-deposit-manual details {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  padding: 8px 10px;
}
.nft-deposit-manual summary {
  cursor: pointer;
  color: rgba(120, 200, 255, 0.85);
  font-weight: 600;
  user-select: none;
  list-style: none;
}
.nft-deposit-manual summary::before { content: "↳ "; opacity: 0.6; }
.nft-deposit-manual[open] summary::before, .nft-deposit-manual details[open] summary::before { content: "↓ "; }
.ndp-manual-body {
  margin-top: 8px;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
}
.ndp-manual-body code {
  background: rgba(255,255,255,0.08);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}
.ndp-manual-input-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.ndp-manual-input-row input {
  flex: 1;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  font-size: 13px;
  outline: none;
  min-width: 0;
}
.ndp-manual-input-row input:focus {
  border-color: rgba(120, 200, 255, 0.45);
}
.ndp-manual-input-row .btn {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12px;
  padding: 8px 12px;
}

@media (prefers-reduced-motion: reduce) {
  .nft-deposit-overlay.show, .nft-deposit-card { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   🎁 DAILY CASES — отдельный экран (deposit-only game)
   ══════════════════════════════════════════════════════════ */

/* Page-level ambient: фиолетово-золотой gradient за всем экраном */
body.scr-cases #screenCases {
  background:
    radial-gradient(ellipse at 50% 8%, rgba(155,108,238,0.22), transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(255,213,106,0.08), transparent 60%);
}

/* ── HERO: премиум-баннер с SVG-кейсом ─────────────────────────── */
.cases-hero {
  position: relative;
  margin: 0 calc(-1 * var(--s-3)) var(--s-3);
  padding: 28px 16px 24px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(155,108,238,0.35), transparent 60%),
    linear-gradient(180deg, #2a1456 0%, #160933 50%, #0a0518 100%);
  border-bottom: 1px solid rgba(255,213,106,0.35);
  overflow: hidden;
  text-align: center;
}
.ch-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.ch-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent 50%),
    radial-gradient(1.5px 1.5px at 70% 50%, #ffd76a, transparent 50%),
    radial-gradient(2px 2px at 90% 20%, #c77dff, transparent 50%),
    radial-gradient(1px 1px at 35% 80%, #fff, transparent 50%),
    radial-gradient(2px 2px at 50% 15%, #ffd76a, transparent 50%),
    radial-gradient(1.5px 1.5px at 80% 75%, #fff, transparent 50%),
    radial-gradient(1px 1px at 15% 60%, #c77dff, transparent 50%);
  opacity: 0.65;
  animation: chStarsDrift 22s linear infinite;
}
@keyframes chStarsDrift {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-12px); }
}
.ch-rays {
  position: absolute;
  top: 50%; left: 50%;
  width: 480px; height: 480px;
  margin-top: -240px;
  margin-left: -240px;
  background:
    conic-gradient(from 0deg,
      transparent 0deg, rgba(255,213,106,0.10) 8deg, transparent 16deg,
      transparent 30deg, rgba(255,213,106,0.10) 38deg, transparent 46deg,
      transparent 60deg, rgba(255,213,106,0.10) 68deg, transparent 76deg,
      transparent 90deg, rgba(255,213,106,0.10) 98deg, transparent 106deg,
      transparent 120deg, rgba(255,213,106,0.10) 128deg, transparent 136deg,
      transparent 150deg, rgba(255,213,106,0.10) 158deg, transparent 166deg,
      transparent 180deg, rgba(255,213,106,0.10) 188deg, transparent 196deg,
      transparent 210deg, rgba(255,213,106,0.10) 218deg, transparent 226deg,
      transparent 240deg, rgba(255,213,106,0.10) 248deg, transparent 256deg,
      transparent 270deg, rgba(255,213,106,0.10) 278deg, transparent 286deg,
      transparent 300deg, rgba(255,213,106,0.10) 308deg, transparent 316deg,
      transparent 330deg, rgba(255,213,106,0.10) 338deg, transparent 346deg);
  /* Маска: лучи плавно растворяются от центра к краям — нет жёсткого среза */
  -webkit-mask-image: radial-gradient(circle, #000 25%, rgba(0,0,0,0.6) 55%, transparent 85%);
          mask-image: radial-gradient(circle, #000 25%, rgba(0,0,0,0.6) 55%, transparent 85%);
  animation: chRaysSpin 30s linear infinite;
  opacity: 0.85;
  filter: blur(1px);
}
@keyframes chRaysSpin {
  to { transform: rotate(360deg); }
}
.ch-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
}
.ch-orb-1 {
  width: 200px; height: 200px;
  top: -40px; left: -40px;
  background: #c77dff;
  animation: chOrbFloat1 8s ease-in-out infinite;
}
.ch-orb-2 {
  width: 180px; height: 180px;
  bottom: -50px; right: -40px;
  background: #ffd76a;
  animation: chOrbFloat2 10s ease-in-out infinite;
}
@keyframes chOrbFloat1 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(20px, 20px); }
}
@keyframes chOrbFloat2 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-25px, -15px); }
}
.ch-content {
  position: relative;
  z-index: 1;
}
.ch-case {
  display: inline-block;
  filter: drop-shadow(0 12px 36px rgba(155,108,238,0.55));
  animation: chCaseFloat 4s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(.16,1.2,.32,1), filter 0.3s;
  transform-style: preserve-3d;
  cursor: pointer;
}
.ch-case:hover {
  transform: scale(1.06) rotateY(8deg) rotateX(-4deg);
  filter: drop-shadow(0 18px 48px rgba(255,213,106,0.65));
}
.ch-case:active {
  transform: scale(0.96) rotateY(0deg);
}

/* Lock overlay — затемняет кейс и показывает замочек когда не eligible */
.ch-lock {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(0,0,0,0.65) 30%, rgba(0,0,0,0.10) 70%);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}
.ch-lock svg {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.65));
  animation: chLockShake 4s ease-in-out infinite;
}
@keyframes chLockShake {
  0%, 92%, 100% { transform: rotate(0deg); }
  94%           { transform: rotate(-8deg); }
  96%           { transform: rotate(8deg); }
  98%           { transform: rotate(-4deg); }
}
.ch-case.locked { animation-play-state: paused; cursor: not-allowed; }
.ch-case.locked .ch-lock { display: flex; }
.ch-case.locked .ch-gem,
.ch-case.locked .ch-gem-glow { animation-play-state: paused; }
.ch-case.locked .ch-pulse { animation: none; opacity: 0.15; }
.ch-case.locked > svg { filter: grayscale(0.5) brightness(0.7); }
@keyframes chCaseFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}
.ch-lid {
  transform-origin: 100px 104px;
  animation: chLidWiggle 5.5s ease-in-out infinite;
}
@keyframes chLidWiggle {
  0%, 92%, 100% { transform: rotate(0deg); }
  94%           { transform: rotate(-2deg); }
  96%           { transform: rotate(1deg); }
}
.ch-pulse {
  transform-origin: 100px 100px;
  animation: chPulseGlow 2.4s ease-in-out infinite;
}
@keyframes chPulseGlow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.08); }
}
/* Gem на крышке — циклит tier-цвета (визуальная подсказка что внутри NFT всех тиров) */
.ch-gem {
  animation: chGemCycle 6s ease-in-out infinite;
  transform-origin: 100px 87px;
}
.ch-gem-glow {
  animation: chGemGlow 6s ease-in-out infinite;
  transform-origin: 100px 87px;
}
@keyframes chGemCycle {
  0%, 100% { fill: #ffd76a; }
  25%      { fill: #ff9b3a; }
  50%      { fill: #c77dff; }
  75%      { fill: #6ee7b7; }
}
@keyframes chGemGlow {
  0%, 100% { opacity: 0.20; fill: rgba(255,213,106,0.65); transform: scale(1); }
  10%      { opacity: 0.85; transform: scale(1.4); }
  25%      { opacity: 0.20; fill: rgba(255,154,86,0.65); transform: scale(1); }
  35%      { opacity: 0.85; transform: scale(1.4); }
  50%      { opacity: 0.20; fill: rgba(199,125,255,0.65); transform: scale(1); }
  60%      { opacity: 0.85; transform: scale(1.4); }
  75%      { opacity: 0.20; fill: rgba(110,231,183,0.65); transform: scale(1); }
  85%      { opacity: 0.85; transform: scale(1.4); }
}

.ch-sparkle {
  transform-origin: center;
  animation: chSparkle 2.2s ease-in-out infinite;
}
.ch-sp-1 { animation-delay: 0s;   }
.ch-sp-2 { animation-delay: 0.4s; }
.ch-sp-3 { animation-delay: 0.8s; }
.ch-sp-4 { animation-delay: 1.2s; }
.ch-sp-5 { animation-delay: 1.6s; }
@keyframes chSparkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50%      { opacity: 1; transform: scale(1.2); }
}
.ch-title {
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(180deg, #fff5cc 0%, #ffd76a 60%, #c97a1f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.4px;
  margin-top: 8px;
  text-shadow: 0 4px 20px rgba(255,213,106,0.30);
}
.ch-sub-rotator {
  position: relative;
  margin-top: 4px;
  min-height: 18px;
}
.ch-sub {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  line-height: 1.4;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .45s ease-out, transform .45s ease-out;
}
.ch-sub-rotator .ch-sub {
  position: absolute;
  inset: 0;
  text-align: center;
}
.ch-sub-in {
  opacity: 0;
  transform: translateY(10px);
}
.ch-sub-out {
  opacity: 0;
  transform: translateY(-10px);
}
.ch-max-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(255,213,106,0.20), rgba(255,213,106,0.05));
  border: 1px solid rgba(255,213,106,0.45);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(255,213,106,0.20);
}
.cmp-label {
  font-size: 10px;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
}
.cmp-val {
  font-size: 16px;
  font-weight: 900;
  color: #ffd76a;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(255,213,106,0.45);
}
.cmp-star { font-size: 14px; }

/* ─── 🎁 Бесплатный кейс — home banner (под live-crash) ─── */
.hhp-free-case {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  margin-top: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #2a1456 0%, #4a1e6a 45%, #7a2a4a 100%);
  border: 1.5px solid rgba(255,213,106,0.35);
  border-radius: 18px;
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s ease, border-color .25s ease, box-shadow .25s ease;
  text-align: left;
  font: inherit;
  color: inherit;
  isolation: isolate;
}
.hhp-free-case:hover {
  border-color: rgba(255,213,106,0.65);
  box-shadow: 0 8px 26px rgba(255,213,106,0.35);
  transform: translateY(-1px);
}
.hhp-free-case:active { transform: scale(0.98); }
.hfc-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 50%, rgba(255,213,106,0.25), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(199,125,255,0.25), transparent 55%);
  z-index: -1;
  pointer-events: none;
}
.hfc-sparkles {
  position: absolute; inset: 0;
  pointer-events: none;
}
.hfc-sp {
  position: absolute;
  font-size: 12px;
  opacity: 0;
  animation: hfcSparkle 2.4s ease-in-out infinite;
}
.hfc-sp-1 { top: 20%; left: 12%; animation-delay: 0s;   }
.hfc-sp-2 { top: 60%; left: 75%; animation-delay: 0.8s; }
.hfc-sp-3 { top: 35%; left: 45%; animation-delay: 1.6s; }
@keyframes hfcSparkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50%      { opacity: 0.85; transform: scale(1.2); }
}
.hfc-case {
  position: relative;
  font-size: 38px;
  filter: drop-shadow(0 4px 14px rgba(255,213,106,0.55));
  animation: hfcCaseFloat 3.2s ease-in-out infinite;
}
@keyframes hfcCaseFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-4px) rotate(4deg); }
}
.hfc-content { min-width: 0; }
.hfc-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.hfc-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ffd76a;
  box-shadow: 0 0 0 0 rgba(255,213,106,0.7);
  animation: hfcPulse 1.4s ease-in-out infinite;
}
@keyframes hfcPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,213,106,0.7); }
  50%      { box-shadow: 0 0 0 6px rgba(255,213,106,0); }
}
.hfc-label {
  font-size: 10px;
  font-weight: 900;
  color: #ffd76a;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.hfc-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: linear-gradient(135deg, #ff5670, #ff9b3a);
  color: #1a0a14;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.4px;
  border-radius: 99px;
  margin-left: 4px;
  animation: hfcBadgePop 1.6s ease-in-out infinite;
}
@keyframes hfcBadgePop {
  0%, 100% { box-shadow: 0 0 8px rgba(255,86,112,0.50); }
  50%      { box-shadow: 0 0 14px rgba(255,213,106,0.85); }
}
.hfc-title {
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.2px;
}
.hfc-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,0.75);
  margin-top: 1px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hfc-cta {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  color: #1a0a14;
  background: linear-gradient(135deg, #fff5cc, #ffd76a);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(255,213,106,0.55);
  flex-shrink: 0;
}
.hhp-free-case.state-ready {
  border-color: rgba(255,213,106,0.75);
  box-shadow: 0 8px 28px rgba(255,213,106,0.45);
  animation: hfcReadyPulse 2.4s ease-in-out infinite;
}
@keyframes hfcReadyPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(255,213,106,0.35); }
  50%      { box-shadow: 0 14px 36px rgba(255,213,106,0.70); }
}
.hhp-free-case.state-claimed {
  border-color: rgba(110,231,183,0.35);
  opacity: 0.85;
}
.hhp-free-case.state-claimed .hfc-case {
  filter: grayscale(0.35) brightness(0.85);
}
.hfc-shine {
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.10) 50%, transparent 65%);
  animation: hfcShine 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hfcShine {
  0%, 75%, 100% { left: -100%; }
  35%           { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hfc-case, .hfc-sp, .hfc-pulse, .hfc-badge, .hhp-free-case.state-ready, .hfc-shine {
    animation: none !important;
  }
}

/* Welcome-bonus badge — только для первого открытия */
.ch-welcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px auto 10px;
  padding: 8px 18px;
  background: linear-gradient(135deg, #ff5670 0%, #ff9b3a 50%, #ffd76a 100%);
  color: #1a0a14;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
  box-shadow:
    0 6px 24px rgba(255,86,112,0.45),
    inset 0 1px 0 rgba(255,255,255,0.50),
    inset 0 -2px 0 rgba(0,0,0,0.18);
  animation: cwbPulse 2s ease-in-out infinite;
}
.ch-welcome-badge b { font-weight: 900; }
.cwb-spark {
  font-size: 16px;
  animation: cwbSpin 1.6s ease-in-out infinite;
}
.cwb-spark:last-child { animation-delay: 0.4s; }
@keyframes cwbPulse {
  0%, 100% { box-shadow: 0 6px 22px rgba(255,86,112,0.40); }
  50%      { box-shadow: 0 10px 36px rgba(255,213,106,0.70); }
}
@keyframes cwbSpin {
  0%, 100% { transform: scale(1) rotate(0); }
  50%      { transform: scale(1.25) rotate(20deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ch-welcome-badge, .cwb-spark { animation: none !important; }
}

/* Live stats-strip под max-prize pill */
.ch-stats-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 12px;
  padding: 8px 14px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 99px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.chs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 0 10px;
  min-width: 70px;
}
.chs-val {
  font-size: 14px;
  font-weight: 900;
  color: #ffd76a;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
}
.chs-lab {
  font-size: 9px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.chs-sep {
  width: 1px;
  height: 20px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.18), transparent);
}

/* Sparkle-эмиттер: частицы вылетают из кейса когда state-ready */
.ch-emitter {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 2;
}
.ch-sparkle-particle {
  position: absolute;
  top: 0; left: 0;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
  opacity: 0;
  animation: chSparkleFly 1.4s ease-out forwards;
}
@keyframes chSparkleFly {
  0%   { transform: translate(0, 0) scale(0); opacity: 0; }
  15%  { opacity: 1; transform: translate(calc(var(--sp-tx) * 0.15), calc(var(--sp-ty) * 0.15)) scale(1.2); }
  100% { transform: translate(var(--sp-tx), var(--sp-ty)) scale(0.3); opacity: 0; }
}

/* Orbital halo — 3 частицы крутятся вокруг кейса */
.ch-orbital {
  position: absolute;
  top: 50%; left: 50%;
  width: 220px; height: 220px;
  margin: -110px 0 0 -110px;
  pointer-events: none;
  z-index: 0;
}
.ch-orb-particle {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
}
.ch-op-1 {
  background: #ffd76a;
  color: #ffd76a;
  animation: chOrbital1 8s linear infinite;
}
.ch-op-2 {
  background: #c77dff;
  color: #c77dff;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  animation: chOrbital2 11s linear infinite;
}
.ch-op-3 {
  background: #ff9b3a;
  color: #ff9b3a;
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  animation: chOrbital3 14s linear infinite;
}
@keyframes chOrbital1 {
  from { transform: rotate(0deg)   translateX(105px) rotate(0deg);   }
  to   { transform: rotate(360deg) translateX(105px) rotate(-360deg); }
}
@keyframes chOrbital2 {
  from { transform: rotate(120deg) translateX(95px) rotate(-120deg);  }
  to   { transform: rotate(480deg) translateX(95px) rotate(-480deg);  }
}
@keyframes chOrbital3 {
  from { transform: rotate(240deg) translateX(85px) rotate(-240deg);  }
  to   { transform: rotate(600deg) translateX(85px) rotate(-600deg);  }
}

/* ── Last winners ticker (social proof) ─────────────── */
.cases-ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(90deg, rgba(255,86,112,0.12), rgba(28,18,55,0.55), rgba(255,213,106,0.10));
  border: 1px solid rgba(255,86,112,0.25);
  border-radius: var(--r-md);
  margin-bottom: var(--s-3);
  overflow: hidden;
}
.ct-icon {
  font-size: 18px;
  flex-shrink: 0;
  animation: ctIconPulse 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255,86,112,0.55));
}
@keyframes ctIconPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
.ct-track {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  height: 22px;
  position: relative;
}
.ct-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-fade-in {
  animation: ctFadeIn 0.5s ease-out;
}
@keyframes ctFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ct-user {
  font-weight: 800;
  color: #cde3ff;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
}
.ct-arrow { color: rgba(255,255,255,0.40); }
.ct-reward { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ct-prize {
  font-weight: 900;
}
.ct-prize.ct-stars     { color: #ffd76a; }
.ct-prize.ct-common    { color: #cde3ff; }
.ct-prize.ct-rare,
.ct-prize.ct-mid       { color: #c77dff; }
.ct-prize.ct-epic      { color: #ff9b3a; }
.ct-prize.ct-legendary { color: #ffd76a; text-shadow: 0 0 8px rgba(255,213,106,0.45); }
.ct-empty {
  color: rgba(255,255,255,0.45);
  font-style: italic;
  justify-content: center;
}

/* ── Condition bar (компактная) ─────────────────────── */
.cases-cond {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(15,9,30,0.85), rgba(15,9,30,0.55));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  margin-bottom: var(--s-3);
}
.cc-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: rgba(255,213,106,0.10);
  border-radius: 50%;
  border: 1px solid rgba(255,213,106,0.30);
}
.cc-body { min-width: 0; }
.cc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.cc-text {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}
.cc-state {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.cases-pbar {
  height: 6px;
  background: rgba(0,0,0,0.50);
  border-radius: 99px;
  overflow: hidden;
}
.cases-pbar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #6ee7b7, #ffd76a);
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(.25,.46,.45,.94);
  box-shadow: 0 0 8px rgba(255,213,106,0.45);
}
.cc-cta {
  width: 36px; height: 36px;
  border: 1px solid rgba(126,184,255,0.45);
  background: rgba(126,184,255,0.15);
  color: #fff;
  border-radius: 50%;
  font-size: 17px;
  cursor: pointer;
  transition: background .12s, transform .08s;
}
.cc-cta:hover  { background: rgba(126,184,255,0.25); }
.cc-cta:active { transform: scale(0.92); }

/* Checkmark когда условие выполнено */
.cc-checkmark {
  position: absolute;
  top: 50%; right: 14px;
  transform: translateY(-50%);
  display: none;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(110,231,183,0.65));
}
.cases-cond.condition-met {
  border-color: rgba(110,231,183,0.45) !important;
  background: linear-gradient(180deg, rgba(20,55,40,0.85), rgba(15,40,30,0.55)) !important;
  position: relative;
}
.cases-cond.condition-met .cc-cta { display: none; }
.cases-cond.condition-met .cc-checkmark { display: block; }
.cccm-circle {
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: cccmCircle 0.6s ease-out forwards;
  transform-origin: center;
  transform: rotate(-90deg);
}
.cccm-tick {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: cccmTick 0.4s ease-out 0.45s forwards;
}
@keyframes cccmCircle {
  to { stroke-dashoffset: 0; }
}
@keyframes cccmTick {
  to { stroke-dashoffset: 0; }
}
/* Pulse-glow на progress bar когда заполнен полностью */
.cases-cond.condition-met .cases-pbar-fill {
  box-shadow: 0 0 14px rgba(110,231,183,0.85);
  animation: pbarComplete 1.6s ease-in-out infinite;
}
@keyframes pbarComplete {
  0%, 100% { box-shadow: 0 0 10px rgba(110,231,183,0.55); }
  50%      { box-shadow: 0 0 18px rgba(110,231,183,1.0); }
}

/* ── Premium CTA — открыть кейс ──────────────────── */
.cases-cta-wrap {
  margin-bottom: var(--s-3);
}
.cases-open-btn {
  position: relative;
  width: 100%;
  padding: 22px 16px;
  border: none;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(40,28,82,0.85), rgba(20,12,48,0.85));
  color: rgba(255,255,255,0.4);
  font-size: 15px;
  font-weight: 800;
  cursor: not-allowed;
  overflow: hidden;
  transition: transform .14s, box-shadow .14s;
  border: 1px solid rgba(255,255,255,0.06);
}
.cob-content {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
}
.cob-icon { font-size: 28px; }
.cob-label { font-size: 15px; }
.cob-arrows {
  display: inline-block;
  margin-left: 4px;
  font-weight: 900;
  letter-spacing: -1px;
  animation: cobArrowsSlide 1.4s ease-in-out infinite;
}
@keyframes cobArrowsSlide {
  0%, 100% { opacity: 0.55; transform: translateX(0); }
  50%      { opacity: 1;    transform: translateX(4px); }
}
.cob-shimmer {
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.18) 50%, transparent 65%);
  pointer-events: none;
  z-index: 1;
}
.cob-glow {
  position: absolute;
  inset: -50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,213,106,0.40) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(199,125,255,0.30) 0%, transparent 50%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.cases-open-btn.ready {
  background: linear-gradient(135deg, #ffd76a 0%, #ff9b3a 50%, #c97a1f 100%);
  color: #1a1410;
  cursor: pointer;
  border-color: rgba(255,213,106,0.55);
  box-shadow:
    0 8px 24px rgba(255,213,106,0.40),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -2px 0 rgba(0,0,0,0.18);
  animation: casesOpenPulse 2.4s ease-in-out infinite;
}
.cases-open-btn.ready .cob-shimmer {
  animation: cobShimmer 2.6s ease-in-out infinite;
}
.cases-open-btn.ready .cob-glow { opacity: 1; animation: cobGlowSpin 6s linear infinite; }
.cases-open-btn.ready:hover  { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(255,213,106,0.60), inset 0 1px 0 rgba(255,255,255,0.50); }
.cases-open-btn.ready:active { transform: scale(0.98); }
.cases-open-btn.done {
  background: linear-gradient(135deg, rgba(110,231,183,0.20), rgba(110,231,183,0.05));
  color: #6ee7b7;
  cursor: not-allowed;
  border-color: rgba(110,231,183,0.30);
}
@keyframes casesOpenPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(255,213,106,0.35), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -2px 0 rgba(0,0,0,0.18); }
  50%      { box-shadow: 0 14px 40px rgba(255,213,106,0.70), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(0,0,0,0.18); }
}
@keyframes cobShimmer {
  0%, 80%, 100% { left: -100%; }
  20%, 60%      { left: 100%; }
}
@keyframes cobGlowSpin {
  to { transform: rotate(360deg); }
}
.cases-cta-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}
.ccm-ev b { color: #ffd76a; font-variant-numeric: tabular-nums; }
.ccm-dot { opacity: 0.4; }

/* ── Pool: rarity-табы + grid ─────────────────────── */
.cases-pool-card {
  background: linear-gradient(180deg, rgba(15,9,30,0.85), rgba(15,9,30,0.55)) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.cases-pool-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.cpool-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.cpool-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(0,0,0,0.40);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.06);
}
.cpool-tab {
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 99px;
  cursor: pointer;
  transition: background .12s, color .12s;
  min-width: 28px;
}
.cpool-tab:hover { color: #fff; }
.cpool-tab.active {
  background: rgba(255,213,106,0.20);
  color: #ffd76a;
  box-shadow: inset 0 0 0 1px rgba(255,213,106,0.35);
}
.cpool-cnt {
  display: inline-block;
  min-width: 16px;
  padding: 0 4px;
  margin-left: 2px;
  font-size: 10px;
  font-weight: 800;
  color: rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.40);
  border-radius: 99px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 14px;
}
.cpool-tab.active .cpool-cnt {
  color: #ffd76a;
  background: rgba(255,213,106,0.18);
}
.cases-pool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  transition: opacity .14s ease, transform .14s ease;
}
.cases-pool-grid.pool-fade-out {
  opacity: 0;
  transform: translateY(-6px);
}
.cases-pool-grid.pool-fade-in {
  animation: poolFadeIn 0.28s cubic-bezier(.16,1,.32,1);
}
@keyframes poolFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (min-width: 480px) {
  .cases-pool-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── History card ─────────────────────────── */
.cases-history-card {
  background: linear-gradient(180deg, rgba(15,9,30,0.85), rgba(15,9,30,0.55)) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.cases-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
.cases-history-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
}
.cases-history-row.tier-stars     { background: linear-gradient(90deg, rgba(126,184,255,0.10), rgba(126,184,255,0.02)); border-color: rgba(126,184,255,0.20); }
.cases-history-row.tier-cheap     { background: linear-gradient(90deg, rgba(110,231,183,0.10), rgba(110,231,183,0.02)); border-color: rgba(110,231,183,0.25); }
.cases-history-row.tier-mid,
.cases-history-row.tier-rare      { background: linear-gradient(90deg, rgba(199,125,255,0.12), rgba(199,125,255,0.03)); border-color: rgba(199,125,255,0.30); }
.cases-history-row.tier-epic      { background: linear-gradient(90deg, rgba(255,154,86,0.14), rgba(255,154,86,0.03)); border-color: rgba(255,154,86,0.35); }
.cases-history-row.tier-legendary,
.cases-history-row.tier-common    { background: linear-gradient(90deg, rgba(255,213,106,0.16), rgba(255,213,106,0.03)); border-color: rgba(255,213,106,0.40); }
.chr-art {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.30);
  border-radius: 8px;
  overflow: hidden;
}
.chr-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.35);
}
.chr-emoji { font-size: 22px; }
.chr-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chr-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chr-date { font-size: 10px; color: rgba(255,255,255,0.50); }
.chr-val {
  font-size: 13px;
  font-weight: 800;
  color: #ffd76a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chr-val b { color: #ffd76a; }

@media (prefers-reduced-motion: reduce) {
  .ch-stars, .ch-rays, .ch-orb-1, .ch-orb-2, .ch-case, .ch-lid, .ch-pulse, .ch-sparkle,
  .cases-open-btn.ready, .cob-shimmer, .cob-glow { animation: none !important; }
}

/* ── Case OPENING animation — pre-intro + roulette + confetti ────── */

/* Pre-intro: shaking case + lid pop */
.case-pre-intro {
  position: relative;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.cpi-case {
  filter: drop-shadow(0 12px 32px rgba(155,108,238,0.55));
}
.case-pre-intro.animate-in .cpi-case {
  animation: cpiShake 0.7s cubic-bezier(.36, .07, .19, .97) both;
}
.case-pre-intro.animate-in .cpi-lid {
  transform-origin: 100px 104px;
  animation: cpiLidPop 0.7s ease-out 0.5s both;
}
.cpi-shockwave {
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 3px solid rgba(255,213,106,0.85);
  opacity: 0;
  pointer-events: none;
}
.case-pre-intro.animate-in .cpi-shockwave {
  animation: cpiShockwave 0.7s ease-out 0.5s;
}
.case-pre-intro.animate-out .cpi-case {
  animation: cpiFadeOut 0.3s ease-in forwards;
}
@keyframes cpiShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  10%      { transform: translateX(-6px) rotate(-3deg); }
  20%      { transform: translateX(6px) rotate(3deg); }
  30%      { transform: translateX(-8px) rotate(-4deg); }
  40%      { transform: translateX(8px) rotate(4deg); }
  50%      { transform: translateX(-6px) rotate(-3deg); }
  60%      { transform: translateX(6px) rotate(3deg); }
  70%      { transform: translateX(-4px) rotate(-2deg); }
}
@keyframes cpiLidPop {
  0%   { transform: translateY(0) rotate(0deg); }
  40%  { transform: translateY(-30px) rotate(-25deg); }
  100% { transform: translateY(-12px) rotate(-15deg); }
}
@keyframes cpiShockwave {
  0%   { width: 40px; height: 40px; margin: -20px 0 0 -20px; opacity: 1; }
  100% { width: 280px; height: 280px; margin: -140px 0 0 -140px; opacity: 0; border-width: 1px; }
}
@keyframes cpiFadeOut {
  to { opacity: 0; transform: scale(0.85); }
}

/* Roulette spin-in */
.roulette-spin-in {
  animation: rouletteSpinIn 0.35s ease-out;
}
@keyframes rouletteSpinIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Tier-label на result */
.case-result-tier {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 8px;
  padding: 4px 10px;
  display: inline-block;
  border-radius: 99px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.10);
}
.case-result.tier-legendary .case-result-tier {
  background: linear-gradient(135deg, rgba(255,213,106,0.30), rgba(255,154,86,0.18));
  border-color: rgba(255,213,106,0.65);
  color: #ffd76a;
  text-shadow: 0 0 12px rgba(255,213,106,0.55);
}
.case-result.tier-epic .case-result-tier {
  background: rgba(255,154,86,0.20);
  border-color: rgba(255,154,86,0.55);
  color: #ff9b3a;
}
.case-result.tier-mid .case-result-tier {
  background: rgba(199,125,255,0.20);
  border-color: rgba(199,125,255,0.45);
  color: #c77dff;
}
.case-result.tier-cheap .case-result-tier {
  background: rgba(110,231,183,0.18);
  border-color: rgba(110,231,183,0.45);
  color: #6ee7b7;
}
.case-result.tier-stars .case-result-tier {
  background: rgba(126,184,255,0.18);
  border-color: rgba(126,184,255,0.45);
  color: #7eb8ff;
}

/* Концентрические ring'и под result (для legendary/epic — дополнительная wow-ка) */
.case-result-rings {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
}
.crr {
  position: absolute;
  top: 50%; left: 50%;
  width: 80px; height: 80px;
  margin: -40px 0 0 -40px;
  border-radius: 50%;
  border: 2px solid rgba(255,213,106,0.55);
  opacity: 0;
}
.case-result.tier-legendary .crr,
.case-result.tier-epic .crr {
  animation: crrPulse 1.6s ease-out forwards;
}
.case-result.tier-legendary .crr-1 { animation-delay: 0s; }
.case-result.tier-legendary .crr-2 { animation-delay: 0.25s; border-color: rgba(255,154,86,0.6); }
.case-result.tier-legendary .crr-3 { animation-delay: 0.5s; border-color: rgba(199,125,255,0.6); }
.case-result.tier-epic .crr-1 { animation-delay: 0s; border-color: rgba(255,154,86,0.65); }
.case-result.tier-epic .crr-2 { animation-delay: 0.3s; border-color: rgba(255,154,86,0.45); }
.case-result.tier-epic .crr-3 { display: none; }
@keyframes crrPulse {
  0%   { width: 80px; height: 80px; margin: -40px 0 0 -40px; opacity: 0.85; border-width: 3px; }
  100% { width: 380px; height: 380px; margin: -190px 0 0 -190px; opacity: 0; border-width: 1px; }
}

/* Confetti — DOM-based */
.case-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
.ccf-piece {
  position: absolute;
  top: -20px;
  width: 8px; height: 14px;
  border-radius: 1px;
  animation: ccfFall linear forwards;
  opacity: 0.92;
  box-shadow: 0 0 6px rgba(255,255,255,0.20);
}
.ccf-piece.ccf-round { border-radius: 50%; width: 8px; height: 8px; }
.ccf-piece.ccf-strip { width: 4px; height: 18px; border-radius: 2px; }
@keyframes ccfFall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  20%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(var(--ccf-rot, 360deg)); opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .case-pre-intro.animate-in .cpi-case,
  .case-pre-intro.animate-in .cpi-lid,
  .case-pre-intro.animate-in .cpi-shockwave,
  .ccf-piece, .crr { animation: none !important; }
}

/* ── Case OPENING animation (CSGO-style roulette) ───────────────── */
.case-open-overlay {
  position: fixed; inset: 0; z-index: 9300;
  display: none;
  background: rgba(5,2,12,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.case-open-overlay.show {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: caseOpenFade 0.25s ease-out;
}
@keyframes caseOpenFade { from { opacity: 0; } to { opacity: 1; } }
.case-open-card {
  width: 100%;
  max-width: 600px;
  padding: 20px 0;
}
.case-open-title {
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 20px;
}
.case-roulette {
  position: relative;
  width: 100%;
  height: 110px;
  overflow: hidden;
  background: linear-gradient(180deg, #110826 0%, #060312 100%);
  border-top: 1px solid rgba(255,213,106,0.35);
  border-bottom: 1px solid rgba(255,213,106,0.35);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.case-roulette-track {
  display: flex;
  gap: 8px;
  padding: 9px 0;
  will-change: transform;
}
.case-roulette-pointer {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  background: linear-gradient(180deg, #ffd76a, #ff5670);
  box-shadow: 0 0 16px rgba(255,213,106,0.65);
  z-index: 2;
  animation: rouletteCenterPulse 1.2s ease-in-out infinite;
}
@keyframes rouletteCenterPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255,213,106,0.50); }
  50%      { box-shadow: 0 0 24px rgba(255,213,106,1.0), 0 0 38px rgba(255,154,86,0.55); }
}
/* Spotlight за pointer'ом — мягкое световое пятно в центре */
.case-roulette::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 130px;
  margin-left: -65px;
  background:
    radial-gradient(ellipse at center, rgba(255,213,106,0.20) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
}
/* Item-flash при проходе сквозь pointer — анимация на самом track'е через
   ::after с position на центре viewport; будет светиться когда track замедляется */
.case-roulette-track {
  position: relative;
}
.case-roulette-pointer::before,
.case-roulette-pointer::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  transform: translateX(-50%);
}
.case-roulette-pointer::before {
  top: -1px;
  border-top: 8px solid #ffd76a;
}
.case-roulette-pointer::after {
  bottom: -1px;
  border-bottom: 8px solid #ffd76a;
}
.cr-item {
  flex: 0 0 96px;
  height: 92px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.cr-item.tier-stars     { background: linear-gradient(180deg, rgba(126,184,255,0.18), rgba(126,184,255,0.05)); border-color: rgba(126,184,255,0.35); }
.cr-item.tier-cheap     { background: linear-gradient(180deg, rgba(110,231,183,0.16), rgba(110,231,183,0.05)); border-color: rgba(110,231,183,0.35); }
.cr-item.tier-mid       { background: linear-gradient(180deg, rgba(199,125,255,0.18), rgba(199,125,255,0.05)); border-color: rgba(199,125,255,0.40); }
.cr-item.tier-epic      { background: linear-gradient(180deg, rgba(255,154,86,0.20), rgba(255,154,86,0.05)); border-color: rgba(255,154,86,0.45); box-shadow: 0 0 12px rgba(255,154,86,0.20); }
.cr-item.tier-legendary { background: linear-gradient(180deg, rgba(255,213,106,0.30), rgba(255,213,106,0.08)); border-color: rgba(255,213,106,0.65); box-shadow: 0 0 18px rgba(255,213,106,0.40); }
.cr-art {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  overflow: hidden;
  border-radius: 8px;
}
.cr-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.35);
}
.cr-emoji { font-size: 28px; }
.cr-star  { font-size: 32px; }
.cr-label {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Result reveal */
.case-result {
  margin-top: 30px;
  text-align: center;
  padding: 24px;
  border-radius: var(--r-lg);
  background: rgba(28,18,55,0.78);
  border: 2px solid rgba(255,213,106,0.45);
  animation: caseResultPop 0.45s cubic-bezier(.36,1.4,.6,1);
}
.case-result.tier-cheap     { border-color: rgba(110,231,183,0.55); box-shadow: 0 0 32px rgba(110,231,183,0.30); }
.case-result.tier-mid       { border-color: rgba(199,125,255,0.55); box-shadow: 0 0 32px rgba(199,125,255,0.35); }
.case-result.tier-epic      { border-color: rgba(255,154,86,0.65);  box-shadow: 0 0 38px rgba(255,154,86,0.45); }
.case-result.tier-legendary { border-color: rgba(255,213,106,0.85); box-shadow: 0 0 48px rgba(255,213,106,0.65); }
.case-result.tier-stars     { border-color: rgba(126,184,255,0.55); box-shadow: 0 0 28px rgba(126,184,255,0.30); }
@keyframes caseResultPop {
  0%   { opacity: 0; transform: scale(0.6) rotate(-5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.case-result-art {
  position: relative;
  width: 140px; height: 140px;
  margin: 0 auto 12px;
  font-size: 84px;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
/* Tier-backlight glow за артом */
.case-result-art::before {
  content: '';
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.55;
  filter: blur(16px);
}
.case-result.tier-cheap     .case-result-art::before { background: radial-gradient(circle, rgba(110,231,183,0.85), transparent 65%); }
.case-result.tier-mid       .case-result-art::before { background: radial-gradient(circle, rgba(199,125,255,0.85), transparent 65%); }
.case-result.tier-epic      .case-result-art::before { background: radial-gradient(circle, rgba(255,154,86,0.95),  transparent 65%); }
.case-result.tier-legendary .case-result-art::before { background: radial-gradient(circle, rgba(255,213,106,1.0),   transparent 60%); animation: caseArtLegendPulse 1.8s ease-in-out infinite; }
.case-result.tier-stars     .case-result-art::before { background: radial-gradient(circle, rgba(126,184,255,0.85), transparent 65%); }
@keyframes caseArtLegendPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.18); }
}
.case-result-art img {
  width: 140px; height: 140px;
  object-fit: cover;
  transform: scale(1.35);
  border-radius: 16px;
  animation: caseArtWobble 3.6s ease-in-out infinite;
}
/* Только NFT-арт качается; ⭐ остаётся статичной */
.case-result.tier-stars .case-result-art img { animation: none; }
@keyframes caseArtWobble {
  0%, 100% { transform: scale(1.35) rotate(-4deg); }
  50%      { transform: scale(1.35) rotate(4deg);  }
}
.cr-star-big { font-size: 92px; filter: drop-shadow(0 6px 20px rgba(255,213,106,0.55)); }
.case-result-title {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 4px;
}
.case-result-stars {
  font-size: 16px;
  color: rgba(255,213,106,0.95);
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
.case-result-stars b { color: #ffd76a; font-size: 22px; }
.case-result .btn { width: 100%; }

/* Premium close-CTA на result-screen */
.case-result-cta {
  position: relative;
  width: 100%;
  padding: 14px 22px;
  border: none;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, #ffd76a 0%, #ff9b3a 100%);
  color: #1a1410;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  transition: transform .14s, box-shadow .14s;
  box-shadow:
    0 6px 20px rgba(255,213,106,0.35),
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -2px 0 rgba(0,0,0,0.18);
}
.case-result-cta::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.32) 50%, transparent 65%);
  animation: crcShimmer 2.4s ease-in-out infinite;
  pointer-events: none;
}
.case-result-cta:hover  { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(255,213,106,0.55), inset 0 1px 0 rgba(255,255,255,0.45); }
.case-result-cta:active { transform: scale(0.98); }
.crc-arrow {
  font-size: 18px;
  font-weight: 900;
  display: inline-block;
  animation: crcArrowMove 1.4s ease-in-out infinite;
}
@keyframes crcShimmer {
  0%, 80%, 100% { left: -100%; }
  20%, 60%      { left: 100%; }
}
@keyframes crcArrowMove {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
/* Tier-specific варианты */
.case-result.tier-legendary .case-result-cta {
  background: linear-gradient(135deg, #fff5cc, #ffd76a, #c97a1f);
  box-shadow: 0 8px 28px rgba(255,213,106,0.55), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(0,0,0,0.20);
}
.case-result.tier-epic .case-result-cta {
  background: linear-gradient(135deg, #ffd76a 0%, #ff5670 100%);
  box-shadow: 0 8px 24px rgba(255,86,112,0.45), inset 0 1px 0 rgba(255,255,255,0.40);
}
.case-result.tier-stars .case-result-cta {
  background: linear-gradient(135deg, #7eb8ff, #5499ff);
  color: #fff;
}
.case-result.tier-mid .case-result-cta {
  background: linear-gradient(135deg, #c77dff, #7b2cbf);
  color: #fff;
}
.case-result.tier-cheap .case-result-cta {
  background: linear-gradient(135deg, #6ee7b7, #10b981);
  color: #042818;
}

/* Pool sections с rarity-headers (в "all" view) */
.csg-section {
  /* Section растягивается на всю ширину pool-grid'а (1fr 1fr 1fr) */
  grid-column: 1 / -1;
  margin-bottom: 14px;
}
.csg-section:last-child { margin-bottom: 0; }
.csg-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  border-left: 3px solid currentColor;
}
.csg-section.tier-legendary .csg-section-head { background: linear-gradient(90deg, rgba(255,213,106,0.18), transparent); color: #ffd76a; }
.csg-section.tier-epic      .csg-section-head { background: linear-gradient(90deg, rgba(255,154,86,0.18), transparent);  color: #ff9b3a; }
.csg-section.tier-mid       .csg-section-head { background: linear-gradient(90deg, rgba(199,125,255,0.18), transparent); color: #c77dff; }
.csg-section.tier-cheap     .csg-section-head { background: linear-gradient(90deg, rgba(110,231,183,0.18), transparent); color: #6ee7b7; }
.csg-section.tier-stars     .csg-section-head { background: linear-gradient(90deg, rgba(126,184,255,0.18), transparent); color: #7eb8ff; }
.csg-section-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.csg-section-cnt {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  background: rgba(0,0,0,0.45);
  border-radius: 99px;
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.csg-section-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (min-width: 480px) {
  .csg-section-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ch-orb-particle, .case-result-cta::before, .crc-arrow { animation: none !important; }
}

/* ── Prize detail modal (click on pool tile) ─────────────── */
.prize-detail-overlay {
  position: fixed; inset: 0; z-index: 9250;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.prize-detail-overlay.show {
  display: flex;
  pointer-events: auto;
  animation: nftSheetFadeIn 0.22s ease-out;
}
.pd-bg {
  position: absolute; inset: 0;
  background: rgba(5,2,12,0.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pd-card {
  position: relative;
  width: calc(100% - 32px);
  max-width: 360px;
  padding: 28px 20px 22px;
  background: linear-gradient(180deg, #1c1230 0%, #0e0820 100%);
  border: 2px solid rgba(255,213,106,0.40);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  text-align: center;
  animation: pdPop 0.4s cubic-bezier(.36,1.4,.6,1);
}
.pd-card.tier-cheap     { border-color: rgba(110,231,183,0.55); box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 36px rgba(110,231,183,0.30); }
.pd-card.tier-mid       { border-color: rgba(199,125,255,0.55); box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 36px rgba(199,125,255,0.35); }
.pd-card.tier-epic      { border-color: rgba(255,154,86,0.65);  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 42px rgba(255,154,86,0.45); }
.pd-card.tier-legendary { border-color: rgba(255,213,106,0.85); box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 56px rgba(255,213,106,0.55); }
.pd-card.tier-stars     { border-color: rgba(126,184,255,0.55); box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 36px rgba(126,184,255,0.30); }
@keyframes pdPop {
  0%   { opacity: 0; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1); }
}
.pd-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  cursor: pointer;
}
.pd-art {
  position: relative;
  width: 120px; height: 120px;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 72px;
  border-radius: 16px;
  overflow: hidden;
  z-index: 2;
}
.pd-art::before {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(14px);
  opacity: 0.5;
}
.pd-card.tier-cheap     .pd-art::before { background: radial-gradient(circle, rgba(110,231,183,0.85), transparent 65%); }
.pd-card.tier-mid       .pd-art::before { background: radial-gradient(circle, rgba(199,125,255,0.85), transparent 65%); }
.pd-card.tier-epic      .pd-art::before { background: radial-gradient(circle, rgba(255,154,86,0.95),  transparent 65%); }
.pd-card.tier-legendary .pd-art::before { background: radial-gradient(circle, rgba(255,213,106,1.0),   transparent 60%); animation: caseArtLegendPulse 1.8s ease-in-out infinite; }
.pd-card.tier-stars     .pd-art::before { background: radial-gradient(circle, rgba(126,184,255,0.85), transparent 65%); }
.pd-art img {
  width: 120px; height: 120px;
  object-fit: cover;
  transform: scale(1.35);
}
.pd-art-stars { font-size: 92px; filter: drop-shadow(0 6px 20px rgba(255,213,106,0.55)); }
.pd-tier {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  margin-bottom: 10px;
}
.pd-card.tier-legendary .pd-tier { background: rgba(255,213,106,0.20); color: #ffd76a; border-color: rgba(255,213,106,0.55); }
.pd-card.tier-epic .pd-tier      { background: rgba(255,154,86,0.20); color: #ff9b3a; border-color: rgba(255,154,86,0.55); }
.pd-card.tier-mid .pd-tier       { background: rgba(199,125,255,0.20); color: #c77dff; border-color: rgba(199,125,255,0.45); }
.pd-card.tier-cheap .pd-tier     { background: rgba(110,231,183,0.18); color: #6ee7b7; border-color: rgba(110,231,183,0.45); }
.pd-card.tier-stars .pd-tier     { background: rgba(126,184,255,0.18); color: #7eb8ff; border-color: rgba(126,184,255,0.45); }
.pd-name {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 16px;
  letter-spacing: -0.3px;
}
.pd-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.pd-cell {
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  text-align: center;
}
.pd-cell-l {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 2px;
  font-weight: 700;
}
.pd-cell-v {
  font-size: 22px;
  font-weight: 900;
  color: #ffd76a;
  font-variant-numeric: tabular-nums;
}
.pd-cell-s {
  font-size: 12px;
  color: rgba(255,213,106,0.65);
  font-weight: 700;
}
.pd-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  padding: 0 6px;
}

/* ── Hub-tile state (ready/claimed/locked) ─────────────── */
.hub-game-tile.state-ready {
  border-color: rgba(255,213,106,0.55) !important;
  box-shadow: 0 8px 28px rgba(255,213,106,0.35) !important;
  animation: hubTileReadyPulse 2.4s ease-in-out infinite;
}
@keyframes hubTileReadyPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(255,213,106,0.32); }
  50%      { box-shadow: 0 12px 36px rgba(255,213,106,0.60); }
}
.hub-game-tile.state-claimed {
  border-color: rgba(110,231,183,0.35) !important;
  opacity: 0.85;
}
.hub-game-tile.state-claimed .hgt-art {
  filter: grayscale(0.4) brightness(0.85);
}
.hub-game-tile.state-locked { /* default look — без подсветки */ }

/* Live "ГОТОВ!" badge */
.hgt-live-badge {
  position: absolute;
  top: 8px; right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: linear-gradient(135deg, #ff5670, #ff9b3a);
  border-radius: 99px;
  box-shadow: 0 4px 12px rgba(255,86,112,0.55);
  z-index: 3;
  animation: hubBadgePop 0.4s cubic-bezier(.36,1.4,.6,1);
}
.hclb-pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255,255,255,0.9);
  animation: hubBadgePulse 1s ease-in-out infinite;
}
.hclb-text {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
@keyframes hubBadgePop {
  0%   { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes hubBadgePulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255,255,255,0.85); }
  50%      { box-shadow: 0 0 12px rgba(255,255,255,1), 0 0 18px rgba(255,213,106,0.65); }
}

/* ── History empty state ─────────────── */
.ch-empty {
  padding: 28px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.che-art {
  font-size: 56px;
  filter: drop-shadow(0 4px 14px rgba(199,125,255,0.45));
  animation: cheArtFloat 3.2s ease-in-out infinite;
}
@keyframes cheArtFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-4px) rotate(4deg); }
}
.che-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.che-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
  max-width: 280px;
}

/* ── Pool skeleton loaders ─────────────── */
.csg-skel {
  aspect-ratio: 1 / 1.1;
  border-radius: 10px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.04) 0%,
      rgba(255,255,255,0.10) 50%,
      rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  border: 1px solid rgba(255,255,255,0.06);
  animation: csgSkelShimmer 1.4s ease-in-out infinite;
}
@keyframes csgSkelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Showcase modal ───────────────────────────────────── */
.case-show-overlay {
  position: fixed; inset: 0; z-index: 9200;
  display: none;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.case-show-overlay.show {
  display: flex;
  pointer-events: auto;
  animation: nftSheetFadeIn 0.22s ease-out;
}
.case-show-bg {
  position: absolute; inset: 0;
  background: rgba(5,2,12,0.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.case-show-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #1c1230 0%, #0e0820 100%);
  border-top: 1.5px solid rgba(255,213,106,0.40);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--s-3) var(--s-3) var(--s-5);
  box-shadow: 0 -8px 28px rgba(0,0,0,0.55);
  animation: nftSheetSlideUp 0.30s cubic-bezier(.36, 1.4, .6, 1);
}
.case-show-handle {
  width: 40px; height: 4px;
  margin: 0 auto var(--s-2);
  background: rgba(255,213,106,0.30);
  border-radius: var(--r-full);
}
.case-show-close {
  position: absolute;
  top: var(--s-2); right: var(--s-2);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  cursor: pointer;
}
.case-show-title {
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 4px;
}
.case-show-sub {
  text-align: center;
  font-size: 11px;
  color: rgba(255,213,106,0.75);
  margin-bottom: var(--s-3);
  font-variant-numeric: tabular-nums;
}
.case-show-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.case-show-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px;
  color: rgba(255,255,255,0.45);
  font-size: 12px;
}
.csg-item {
  position: relative;
  aspect-ratio: 1 / 1.1;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: transform .18s cubic-bezier(.16,1.2,.32,1), box-shadow .18s, border-color .18s;
  overflow: hidden;
}
.csg-item::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.10) 50%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.csg-item:hover {
  transform: translateY(-2px) scale(1.04);
}
.csg-item:hover::before { opacity: 1; }
.csg-item:active { transform: scale(0.98); }
.csg-item.tier-stars     { background: linear-gradient(180deg, rgba(126,184,255,0.18), rgba(126,184,255,0.05)); border-color: rgba(126,184,255,0.35); }
.csg-item.tier-stars:hover     { box-shadow: 0 6px 18px rgba(126,184,255,0.30); border-color: rgba(126,184,255,0.60); }
.csg-item.tier-cheap     { background: linear-gradient(180deg, rgba(110,231,183,0.16), rgba(110,231,183,0.05)); border-color: rgba(110,231,183,0.35); }
.csg-item.tier-cheap:hover     { box-shadow: 0 6px 18px rgba(110,231,183,0.32); border-color: rgba(110,231,183,0.60); }
.csg-item.tier-mid       { background: linear-gradient(180deg, rgba(199,125,255,0.18), rgba(199,125,255,0.05)); border-color: rgba(199,125,255,0.40); }
.csg-item.tier-mid:hover       { box-shadow: 0 6px 22px rgba(199,125,255,0.40); border-color: rgba(199,125,255,0.70); }
.csg-item.tier-epic      { background: linear-gradient(180deg, rgba(255,154,86,0.20), rgba(255,154,86,0.05)); border-color: rgba(255,154,86,0.45); }
.csg-item.tier-epic      { box-shadow: 0 0 10px rgba(255,154,86,0.18); }
.csg-item.tier-epic:hover      { box-shadow: 0 8px 26px rgba(255,154,86,0.55); border-color: rgba(255,154,86,0.85); }
.csg-item.tier-legendary { background: linear-gradient(180deg, rgba(255,213,106,0.30), rgba(255,213,106,0.08)); border-color: rgba(255,213,106,0.65); }
.csg-item.tier-legendary { box-shadow: 0 0 18px rgba(255,213,106,0.30); animation: csgLegendShine 3.5s ease-in-out infinite; }
.csg-item.tier-legendary:hover { box-shadow: 0 10px 32px rgba(255,213,106,0.65); border-color: rgba(255,213,106,1.0); transform: translateY(-3px) scale(1.06); }
@keyframes csgLegendShine {
  0%, 100% { box-shadow: 0 0 16px rgba(255,213,106,0.25); }
  50%      { box-shadow: 0 0 26px rgba(255,213,106,0.55); }
}
.csg-art {
  width: 60%;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-radius: 8px;
}
.csg-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.35);
}
.csg-label {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.csg-dot {
  position: absolute;
  top: 6px; left: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}
.csg-item.tier-stars     .csg-dot { background: #7eb8ff; color: #7eb8ff; }
.csg-item.tier-cheap     .csg-dot { background: #6ee7b7; color: #6ee7b7; }
.csg-item.tier-mid       .csg-dot { background: #c77dff; color: #c77dff; }
.csg-item.tier-epic      .csg-dot { background: #ff9b3a; color: #ff9b3a; }
.csg-item.tier-legendary .csg-dot { background: #ffd76a; color: #ffd76a; animation: csgDotPulse 1.4s ease-in-out infinite; }
@keyframes csgDotPulse {
  0%, 100% { box-shadow: 0 0 6px #ffd76a; }
  50%      { box-shadow: 0 0 14px #ffd76a, 0 0 22px rgba(255,213,106,0.55); }
}

.csg-pct {
  position: absolute;
  top: 4px; right: 4px;
  font-size: 9px;
  color: rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.45);
  padding: 1px 4px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .case-open-overlay.show, .case-result, .dc-open-btn.ready {
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   📋 NFT REQUESTS MODAL — active deposit/withdraw view
   ══════════════════════════════════════════════════════════ */
.nft-requests-overlay {
  position: fixed; inset: 0; z-index: 9100;
  display: none;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.nft-requests-overlay.show {
  display: flex;
  pointer-events: auto;
  animation: nftSheetFadeIn 0.22s ease-out;
}
.nft-requests-bg {
  position: absolute; inset: 0;
  background: rgba(5,2,12,0.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.nft-requests-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #1c1230 0%, #0e0820 100%);
  border-top: 1.5px solid rgba(126,184,255,0.30);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--s-3) var(--s-4) var(--s-5);
  box-shadow: 0 -8px 28px rgba(0,0,0,0.55);
  animation: nftSheetSlideUp 0.30s cubic-bezier(.36, 1.4, .6, 1);
}
.nft-requests-handle {
  width: 40px; height: 4px;
  margin: 0 auto var(--s-3);
  background: rgba(126,184,255,0.30);
  border-radius: var(--r-full);
}
.nft-requests-close {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  cursor: pointer;
  z-index: 2;
}
.nft-requests-title {
  text-align: center;
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 4px;
}
.nft-requests-sub {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--s-3);
}
.nft-requests-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: var(--s-2);
  padding: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
}
.nrq-tab {
  flex: 1;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.nrq-tab:hover { color: #fff; }
.nrq-tab.active {
  background: rgba(126,184,255,0.18);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(126,184,255,0.30);
}
.nrq-tab span {
  display: inline-block;
  margin-left: 4px;
  background: rgba(126,184,255,0.18);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 10px;
}
.nft-requests-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
}
.nrq-loading, .nrq-empty {
  padding: 20px;
  text-align: center;
  color: rgba(255,255,255,0.45);
  font-size: 12px;
}
.nrq-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nrq-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.nrq-voucher {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #cde3ff;
  background: rgba(126,184,255,0.10);
  border: 1px solid rgba(126,184,255,0.25);
  padding: 2px 6px;
  border-radius: 4px;
  /* Анти-overflow на узких экранах: усекаем длинные voucher-коды */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nrq-ttl {
  font-size: 10px;
  color: rgba(255,213,106,0.85);
  font-weight: 700;
}
.nrq-status {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 4px;
}
.nrq-status-pending {
  background: rgba(255,179,0,0.15);
  color: #ffd86a;
  border: 1px solid rgba(255,179,0,0.30);
}
.nrq-item-name {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.nrq-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.62);
}
.nrq-item-meta b { color: #fff; }
.nrq-credit { color: #7eedb1 !important; }
.nrq-item-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.nrq-item-actions .btn { padding: 6px 10px; font-size: 11px; }
.nrq-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .nft-requests-overlay.show, .nft-requests-card { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   🛠️ ADMIN AUDIT PANEL
   ══════════════════════════════════════════════════════════ */
.admin-entry-btn {
  display: block;
  width: 100%;
  margin: var(--s-3) 0;
  background: linear-gradient(135deg, #5a3aa8, #c77dff) !important;
  color: #fff !important;
  font-weight: 800 !important;
  border: 1px solid rgba(199,125,255,0.45) !important;
  box-shadow: 0 4px 14px rgba(122,82,225,0.32);
}
.admin-entry-btn:hover { transform: translateY(-1px); }

.admin-intro {
  background: linear-gradient(135deg, rgba(122,82,225,0.18), rgba(199,125,255,0.08)) !important;
  border: 1px solid rgba(199,125,255,0.30) !important;
}
.admin-title {
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 4px;
}
.admin-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.62);
}

.admin-tabs {
  display: flex;
  gap: 6px;
  margin: var(--s-2) 0;
  padding: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
}
.admin-tab {
  flex: 1;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.admin-tab:hover { color: #fff; }
.admin-tab.active {
  background: rgba(199,125,255,0.18);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(199,125,255,0.30);
}

.admin-card {
  background: rgba(15,9,30,0.55) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.admin-h {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,0.85);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}
@media (min-width: 480px) {
  .admin-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.admin-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  padding: 10px 12px;
  min-height: 56px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-md);
  overflow: hidden;
}
.admin-stat .as-l {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-stat b {
  font-size: 14px;
  color: #fff;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-stat-skel {
  padding: 16px;
  text-align: center;
  color: rgba(255,255,255,0.4);
  font-size: 12px;
}
.admin-empty {
  padding: 14px;
  text-align: center;
  color: rgba(255,255,255,0.42);
  font-size: 12px;
}

.admin-list { display: flex; flex-direction: column; gap: 4px; }
.admin-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  font-size: 12px;
}
.admin-row code {
  background: rgba(199,125,255,0.12);
  color: #d8b8ff;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}
.admin-row-cnt {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}
.delta-pos { color: #6ee7b7 !important; }
.delta-neg { color: #ff8a9a !important; }

.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.admin-filters input,
.admin-filters select {
  flex: 1 1 100px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  font-size: 12px;
  outline: none;
}
.admin-filters input:focus, .admin-filters select:focus {
  border-color: rgba(199,125,255,0.45);
}
.admin-filters .btn { flex: 0 0 auto; }

/* Scrollable wrapper для таблиц на узких экранах */
.admin-ops-table, .admin-users-table {
  font-size: 11px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-md);
}
.admin-ops-head, .admin-ops-row,
.admin-users-head, .admin-users-row {
  display: grid;
  gap: 10px;
  padding: 8px 10px;
  align-items: center;
  min-width: 540px;       /* фикс. ширина → горизонтальный скролл */
}
.admin-ops-head, .admin-ops-row {
  grid-template-columns: 100px 130px minmax(0,1fr) 80px 90px;
}
.admin-users-head, .admin-users-row {
  grid-template-columns: minmax(0,1fr) 100px 100px 110px 70px;
}
.admin-ops-head, .admin-users-head {
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.3px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  position: sticky;
  top: 0;
  z-index: 1;
}
.admin-ops-row, .admin-users-row {
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.admin-ops-row:last-child, .admin-users-row:last-child { border-bottom: none; }
.admin-ops-row:hover { background: rgba(199,125,255,0.06); }
.admin-users-row {
  cursor: pointer;
  transition: background .12s;
}
.admin-users-row:hover { background: rgba(199,125,255,0.08); }
.admin-ops-row .r, .admin-ops-head .r,
.admin-users-row .r, .admin-users-head .r { text-align: right; font-variant-numeric: tabular-nums; }
.admin-ops-row > *, .admin-users-row > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-ops-ts { color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; font-size: 10px; }
.admin-ops-user { color: #cde3ff; }
.admin-ops-reason { display: flex; align-items: center; gap: 4px; min-width: 0; }
.admin-ops-reason code {
  background: rgba(199,125,255,0.12);
  color: #d8b8ff;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  flex-shrink: 0;
}
.admin-ops-ref {
  color: rgba(255,255,255,0.4);
  font-size: 10px;
  font-family: ui-monospace, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.admin-pagination .btn:disabled { opacity: 0.35; cursor: not-allowed; }
.admin-page-info {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  font-variant-numeric: tabular-nums;
}

.admin-users-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.admin-users-name b {
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-users-id {
  font-size: 10px;
  color: rgba(255,255,255,0.42);
  font-family: ui-monospace, monospace;
}

/* ── Sparkline charts ─────────────────────────── */
.admin-chart {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-spark {
  width: 100%;
  height: 60px;
  display: block;
}
.admin-spark-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  font-variant-numeric: tabular-nums;
}
.admin-spark-meta b {
  color: #fff;
  font-weight: 700;
}

/* ── Reconciliation card ─────────────────────────── */
.admin-recon-head {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid;
}
.admin-recon-head.recon-ok {
  background: rgba(110,231,183,0.10);
  border-color: rgba(110,231,183,0.35);
}
.admin-recon-head.recon-mismatch {
  background: rgba(255,138,154,0.12);
  border-color: rgba(255,138,154,0.40);
}
.admin-recon-head .ar-icon { font-size: 22px; }
.admin-recon-head .ar-status {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.admin-recon-head .ar-diff {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.admin-recon-head.recon-ok .ar-diff b { color: #6ee7b7; }
.admin-recon-head.recon-mismatch .ar-diff b { color: #ff8aa3; }

.admin-recon-anomalies {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  font-size: 11px;
}
.admin-recon-row {
  display: grid;
  grid-template-columns: 1fr 90px 90px 80px;
  gap: 8px;
  padding: 6px 10px;
  align-items: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.admin-recon-row:hover {
  background: rgba(199,125,255,0.10);
  border-color: rgba(199,125,255,0.30);
}
.admin-recon-row .r {
  text-align: right;
  color: rgba(255,255,255,0.65);
  font-variant-numeric: tabular-nums;
}
.admin-recon-row b { color: #fff; }

/* ═══════════════════════════════════════════════════════════
 *  ⬆️ NFT UPGRADE — рисковый обмен NFT-to-NFT
 * ═══════════════════════════════════════════════════════════ */

/* Upgrade button (используется в sheet и в самом модале) */
.btn.upgrade {
  background: linear-gradient(135deg, #ff5a72 0%, #c77dff 50%, #ffd76a 100%);
  background-size: 200% 200%;
  color: #1a0f30;
  border: none;
  font-weight: 800;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 16px rgba(199,125,255,0.25), inset 0 1px 0 rgba(255,255,255,0.30);
  animation: nfupBtnShimmer 4s ease-in-out infinite;
}
.btn.upgrade:hover:not(:disabled) { filter: brightness(1.1); }
.btn.upgrade:disabled {
  opacity: 0.45;
  animation: none;
  cursor: not-allowed;
}
@keyframes nfupBtnShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Overlay */
.nft-upgrade-overlay {
  position: fixed; inset: 0;
  z-index: 9500;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.nft-upgrade-overlay.show {
  display: flex;
  pointer-events: auto;
  animation: nftSheetFadeIn 0.25s ease-out;
}
.nft-upgrade-bg {
  position: absolute; inset: 0;
  background: rgba(5, 2, 12, 0.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nft-upgrade-card {
  position: relative;
  width: 92%;
  max-width: 440px;
  max-height: 92vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #1a0f30 0%, #0a0a14 100%);
  border: 1px solid rgba(199,125,255,0.40);
  border-radius: 24px;
  padding: 22px 20px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
}
.nft-upgrade-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border: none;
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  z-index: 2;
}
.nft-upgrade-title {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}
.nft-upgrade-sub {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 16px;
}

/* Source NFT card */
.nft-upgrade-source {
  background: rgba(255,213,106,0.06);
  border: 1px solid rgba(255,213,106,0.25);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 16px;
}
.nfup-src-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255,213,106,0.75);
  margin-bottom: 6px;
}
.nfup-src-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nfup-src-art {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,213,106,0.18), rgba(255,86,114,0.10));
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  overflow: hidden;
  flex-shrink: 0;
}
.nfup-src-art img { width: 100%; height: 100%; object-fit: cover; }
.nfup-src-info { min-width: 0; flex: 1; }
.nfup-src-name {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nfup-src-floor {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
}
.nfup-src-floor b {
  color: #ffd76a;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* Dial (радиальная шкала шансов — полный круг) */
.nfup-dial-wrap {
  position: relative;
  margin: 12px auto 20px;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  /* «Плавающая» тень — диск парит в пространстве */
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 18px rgba(199, 125, 255, 0.18));
  animation: nfupDialFloat 5s ease-in-out infinite alternate;
  transition: filter 0.3s ease-out;
}
@keyframes nfupDialFloat {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}
/* Тряска «камеры» в момент результата */
.nfup-dial-wrap[data-state="result-win"],
.nfup-dial-wrap[data-state="result-fail"] {
  animation: nfupDialShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes nfupDialShake {
  10%, 90% { transform: translate(-1px, 0); }
  20%, 80% { transform: translate(2px, 0); }
  30%, 50%, 70% { transform: translate(-3px, 0); }
  40%, 60% { transform: translate(3px, 0); }
}
/* Усиление glow на результате */
.nfup-dial-wrap[data-state="result-win"] {
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 28px rgba(110, 231, 183, 0.55));
}
.nfup-dial-wrap[data-state="result-fail"] {
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 28px rgba(255, 90, 114, 0.55));
}
.nfup-dial {
  width: 100%;
  height: auto;
  display: block;
}
.nfup-pointer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  /* КРИТИЧНО: SVG transform-origin по умолчанию = 0 0 (top-left),
     а не 50% 50% как у HTML. Без явного override стрелка вращается
     вокруг угла → уходит за viewport → "колесо не крутится".
     transform-box: view-box фиксирует точку отсчёта на viewBox центре. */
  transform-origin: 50% 50%;
  transform-box: view-box;
  -webkit-transform-origin: 50% 50%;
  transition: transform 1.2s cubic-bezier(0.22, 0.7, 0.18, 1);
  filter: drop-shadow(0 0 4px rgba(255, 213, 106, 0.85))
          drop-shadow(0 0 10px rgba(255, 213, 106, 0.35));
}
.nfup-pointer.spinning {
  /* Класс .spinning теперь ТОЛЬКО для motion-blur фильтра.
     Никаких transition/animation overrides — иначе перебивает inline-стиль
     с CSS-transition (та самая причина почему стрелка не крутилась).
     Базовый .nfup-pointer transition уже подходит как fallback. */
  filter: drop-shadow(0 0 6px rgba(255, 213, 106, 0.45))
          url(#nfupPointerBlur);
}
/* @media (prefers-reduced-motion: reduce):
   Раньше пытались возвращать transition-duration: 4s для CSS-transition подхода,
   но теперь spin() использует MANUAL rAF (каждый кадр пишет transform).
   CSS transition-duration !important ВРАЖДЕБНА rAF — она интерпретирует каждый
   frame-change как новую 4s-анимацию, и колесо visually стоит на месте.
   Решение: при reduce-motion полностью отрубаем CSS transition на pointer'е,
   rAF справится сам. */
@media (prefers-reduced-motion: reduce) {
  .nfup-pointer {
    transition: none !important;
    transition-duration: 0s !important;
  }
}
/* Hub-pulse удалён — у нового pointer'а нет центральной втулки (он на ободе) */

/* Win/Fail арки — лёгкое «дыхание» свечения, чтоб не выглядели как мёртвая SVG */
.nfup-arc-win {
  filter: drop-shadow(0 0 6px rgba(110, 231, 183, 0.55));
  animation: nfupArcBreathe 3.5s ease-in-out infinite;
}
.nfup-arc-fail {
  filter: drop-shadow(0 0 5px rgba(255, 90, 114, 0.40));
  animation: nfupArcBreathe 3.5s ease-in-out infinite 0.5s; /* фаза смещена */
}
@keyframes nfupArcBreathe {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* Внешний декоративный обод — медленно вращается в idle, ускоряется в spin.
   Цвет обода меняется по уровню риска через data-risk. */
.nfup-outer-ring {
  transform-origin: 100px 100px;
  transform-box: view-box;
  animation: nfupOuterRingRotate 30s linear infinite;
  transition: opacity 0.4s ease-out;
}
.nfup-dial-wrap[data-state="spinning"] .nfup-outer-ring {
  animation: nfupOuterRingRotate 4s linear infinite;
}
/* Зона риска тематизирует обод и dial-wrap glow */
.nfup-dial-wrap[data-risk="high"] .nfup-outer-ring circle {
  stroke: rgba(110, 231, 183, 0.45);  /* зелёный — высокий шанс */
}
.nfup-dial-wrap[data-risk="mid"] .nfup-outer-ring circle {
  stroke: rgba(255, 213, 106, 0.45);  /* золотой — средний */
}
.nfup-dial-wrap[data-risk="low"] .nfup-outer-ring circle {
  stroke: rgba(255, 120, 140, 0.45);  /* красный — рискованно */
}
@keyframes nfupOuterRingRotate {
  to { transform: rotate(360deg); }
}

/* Armed-индикатор — мягкий пульс вокруг dial когда target выбран,
   но spin ещё не запущен. Показывает «готов к запуску». */
.nfup-dial-wrap[data-armed] {
  animation: nfupArmedPulse 2.4s ease-in-out infinite;
}
@keyframes nfupArmedPulse {
  0%, 100% {
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55))
            drop-shadow(0 0 18px rgba(199, 125, 255, 0.18));
  }
  50% {
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 30px rgba(255, 213, 106, 0.45));
  }
}
.nfup-dial-wrap[data-armed][data-risk="high"] {
  animation: nfupArmedPulseHigh 2.4s ease-in-out infinite;
}
@keyframes nfupArmedPulseHigh {
  0%, 100% {
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55))
            drop-shadow(0 0 18px rgba(110, 231, 183, 0.25));
  }
  50% {
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 32px rgba(110, 231, 183, 0.55));
  }
}
.nfup-dial-wrap[data-armed][data-risk="low"] {
  animation: nfupArmedPulseLow 1.8s ease-in-out infinite;
}
@keyframes nfupArmedPulseLow {
  0%, 100% {
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55))
            drop-shadow(0 0 18px rgba(255, 120, 140, 0.25));
  }
  50% {
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 32px rgba(255, 120, 140, 0.65));
  }
}

/* Spark trail — точка на ободе с длинным «хвостом» через box-shadow stack.
   8 теней разной интенсивности и offset создают «комету»-след за стрелкой. */
.nfup-dial-wrap[data-state="spinning"]::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255, 240, 180, 0.95);
  /* Лестница теней с уменьшающейся opacity и углом — формирует трейл */
  box-shadow:
    /* Главное «остриё» — впереди по часовой (на ободе r=80) */
    0 -82px 0 0 rgba(255, 240, 180, 0.95),
    /* Хвост убегает назад против часовой стрелки */
    -8px -80px 0 -0.5px rgba(255, 220, 140, 0.75),
    -16px -76px 0 -0.5px rgba(255, 200, 120, 0.55),
    -24px -70px 0 -1px   rgba(255, 180, 100, 0.40),
    -32px -62px 0 -1.5px rgba(255, 160, 90, 0.28),
    -38px -52px 0 -2px   rgba(255, 140, 80, 0.18),
    /* Лёгкий мегасвет вокруг главной искры */
    0 -82px 8px 0 rgba(255, 240, 180, 0.55);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: nfupSparkRotate 0.7s linear infinite;
  z-index: 4;
  opacity: 0.95;
  filter: blur(0.3px);
}
@keyframes nfupSparkRotate {
  from { transform: translate(-50%, -50%) rotate(0deg);   }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Плавная анимация дуг при изменении chance — арки «дорастают» к новой длине.
   stroke-dasharray-стиль через transition на ‘d’ не работает, но смена opacity
   при перерисовке даёт ощущение «обновления». */
.nfup-arc-win,
.nfup-arc-fail {
  transition: stroke-width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* На смене таргета арки кратко «толще» — визуальный фидбек */
.nfup-readout.target-changed ~ * .nfup-arc-win,
.nfup-readout.target-changed ~ * .nfup-arc-fail {
  stroke-width: 17;
}

/* Центральный glow — пульсирует, синхронно с дыханием диска */
.nfup-dial-wrap[data-state="spinning"] #nfupCenterGlow,
.nfup-dial-wrap[data-state="result-win"] #nfupCenterGlow {
  /* SVG gradient stops анимировать не можем напрямую, но фильтр на родителе работает */
}

/* Тикмарки — major всегда ярче, minor мерцают в противофазе */
.nfup-tick-major line {
  animation: nfupTickMajorGlow 3s ease-in-out infinite;
}
.nfup-tick-minor line {
  animation: nfupTickMinorGlow 2.5s ease-in-out infinite;
}
.nfup-tick-minor line:nth-child(odd)  { animation-delay: 0s; }
.nfup-tick-minor line:nth-child(even) { animation-delay: 1.25s; }
@keyframes nfupTickMajorGlow {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
@keyframes nfupTickMinorGlow {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.75; }
}

/* Highlight-arc — белая вспышка на выпавшей зоне после остановки.
   Активируется JS через data-state="result-win|result-fail" на .nfup-dial-wrap */
#nfupHighlightArc {
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}
.nfup-dial-wrap[data-state="result-win"]  #nfupHighlightArc {
  stroke: #6ee7b7;
  filter: drop-shadow(0 0 14px rgba(110, 231, 183, 0.95));
  animation: nfupHighlightFlash 0.6s ease-out 3;
}
.nfup-dial-wrap[data-state="result-fail"] #nfupHighlightArc {
  stroke: #ff5a72;
  filter: drop-shadow(0 0 14px rgba(255, 90, 114, 0.95));
  animation: nfupHighlightFlash 0.6s ease-out 3;
}
@keyframes nfupHighlightFlash {
  0%   { opacity: 0;    stroke-width: 14; }
  40%  { opacity: 0.95; stroke-width: 22; }
  100% { opacity: 0;    stroke-width: 14; }
}

/* Лёгкое «качание» всей dial-сцены во время спина — добавляет физики */
.nfup-dial-wrap[data-state="spinning"] .nfup-dial {
  animation: nfupDialNudge 0.7s ease-in-out infinite;
}
@keyframes nfupDialNudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.5px); }
}

/* Центральная вспышка при остановке на выигрыше */
.nfup-dial-wrap[data-state="result-win"]::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 231, 183, 0.85) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: nfupCenterBurst 1.2s ease-out;
  opacity: 0;
}
.nfup-dial-wrap[data-state="result-fail"]::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 90, 114, 0.75) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: nfupCenterBurst 1.2s ease-out;
  opacity: 0;
}
@keyframes nfupCenterBurst {
  0%   { width: 30px;  height: 30px;  opacity: 0; }
  30%  { opacity: 1; }
  100% { width: 220px; height: 220px; opacity: 0; }
}

/* ═══ Радужное кольцо — крутится поверх арок во время спина ═══ */
#nfupRainbowRing {
  transform-origin: 100px 100px;
  transform-box: view-box;
  pointer-events: none;
  transition: opacity 0.4s ease-out;
}
.nfup-dial-wrap[data-state="spinning"] #nfupRainbowRing {
  opacity: 0.7;
  animation: nfupRainbowSpin 1.4s linear infinite;
}
@keyframes nfupRainbowSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ═══ Конфетти-частицы ═══
   8 цветных точек, разлетающихся из центра при выигрыше.
   Используют CSS var --ang (задан inline в SVG) — направление разлёта. */
.nfup-confetti { pointer-events: none; }
.nfc-p {
  transform-origin: 100px 100px;
  transform-box: view-box;
  opacity: 0;
}
.nfup-dial-wrap[data-state="result-win"] .nfc-p {
  animation: nfupConfettiBurst 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes nfupConfettiBurst {
  0% {
    opacity: 0;
    transform: rotate(var(--ang)) translateY(0) scale(0.3);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(var(--ang)) translateY(-110px) scale(1.4);
  }
}
.nfup-readout {
  position: absolute;
  top: 50%;                  /* идеально по центру круга */
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  z-index: 2;                /* поверх стрелки и арок */
  transition: color 0.3s ease-out, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Pulse цифры во время спина — слабая ритмичная пульсация в такт тикам */
.nfup-dial-wrap[data-state="spinning"] .nfup-readout {
  animation: nfupReadoutPulse 0.12s ease-in-out infinite alternate;
}
@keyframes nfupReadoutPulse {
  from { transform: translate(-50%, -50%) scale(1);    }
  to   { transform: translate(-50%, -50%) scale(1.04); }
}
/* На результате — цифра «прыгает» и меняет цвет */
.nfup-dial-wrap[data-state="result-win"] .nfup-chance-val,
.nfup-dial-wrap[data-state="result-win"] .nfup-chance-suf,
.nfup-dial-wrap[data-state="result-win"] .nfup-mult b {
  color: #6ee7b7 !important;
  text-shadow: 0 0 12px rgba(110, 231, 183, 0.75);
}
.nfup-dial-wrap[data-state="result-fail"] .nfup-chance-val,
.nfup-dial-wrap[data-state="result-fail"] .nfup-chance-suf,
.nfup-dial-wrap[data-state="result-fail"] .nfup-mult b {
  color: #ff8b9a !important;
  text-shadow: 0 0 10px rgba(255, 90, 114, 0.60);
}
.nfup-dial-wrap[data-state="result-win"] .nfup-readout,
.nfup-dial-wrap[data-state="result-fail"] .nfup-readout {
  animation: nfupReadoutPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes nfupReadoutPop {
  0%   { transform: translate(-50%, -50%) scale(1);    }
  50%  { transform: translate(-50%, -50%) scale(1.18); }
  100% { transform: translate(-50%, -50%) scale(1);    }
}

/* ═══ Glassy reflection — стеклянный блик в верхней части диска ═══
   Делается через CSS-псевдоэлемент на .nfup-dial-wrap ::before */
.nfup-dial-wrap::before {
  content: '';
  position: absolute;
  top: 6%; left: 18%;
  width: 64%; height: 28%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.06) 40%,
    transparent 70%);
  pointer-events: none;
  z-index: 3;
}
.nfup-chance {
  font-size: 44px;                  /* было 36 — крупнее, центральная цифра доминирует */
  font-weight: 900;
  background: linear-gradient(180deg, #fff 0%, #ffe89a 60%, #ffd76a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1.5px;
  filter: drop-shadow(0 2px 6px rgba(255, 213, 106, 0.35));
  transition: filter 0.3s ease-out;
}
/* Flash при смене таргета — добавляется через JS .target-changed на 0.5с */
.nfup-readout.target-changed .nfup-chance {
  animation: nfupChanceFlash 0.5s ease-out;
}
@keyframes nfupChanceFlash {
  0%   { filter: drop-shadow(0 0 0 transparent) brightness(1); }
  40%  { filter: drop-shadow(0 0 12px rgba(255, 213, 106, 0.85)) brightness(1.3); }
  100% { filter: drop-shadow(0 2px 6px rgba(255, 213, 106, 0.35)) brightness(1); }
}
.nfup-chance-suf {
  font-size: 20px;
  color: rgba(255,213,106,0.85);
  margin-left: 3px;
  font-weight: 800;
}
.nfup-mult {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  margin-top: 5px;
  letter-spacing: 0.5px;
}
.nfup-mult b {
  color: #c77dff;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px rgba(199, 125, 255, 0.45);
}

/* Targets list */
.nfup-targets-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.50);
  margin: 8px 0;
}
.nfup-targets-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
  margin-bottom: 14px;
  -webkit-overflow-scrolling: touch;
}
.nfup-targets-list::-webkit-scrollbar { width: 4px; }
.nfup-targets-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.nfup-targets-loading {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  padding: 24px 0;
}
.nfup-target {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.nfup-target:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(199,125,255,0.30);
}
.nfup-target.selected {
  background: rgba(199,125,255,0.12);
  border-color: rgba(199,125,255,0.55);
  box-shadow: 0 0 0 1px rgba(199,125,255,0.30), 0 4px 16px rgba(199,125,255,0.20);
}
.nfup-target-art {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  overflow: hidden;
  flex-shrink: 0;
}
.nfup-target-art img { width: 100%; height: 100%; object-fit: cover; }
.nfup-target-info { min-width: 0; flex: 1; }
.nfup-target-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nfup-target-stats {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.nfup-target-floor { color: #ffd76a; font-weight: 800; }
.nfup-target-mult { color: #c77dff; font-weight: 700; }
.nfup-target-chance {
  margin-left: auto;
  font-size: 12px;
  font-weight: 900;
  color: #6ee7b7;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  padding: 4px 8px;
  background: rgba(110,231,183,0.10);
  border-radius: 6px;
}
.nfup-target.high-risk .nfup-target-chance { color: #ff5a72; background: rgba(255,90,114,0.10); }
.nfup-target.med-risk  .nfup-target-chance { color: #ffd76a; background: rgba(255,213,106,0.10); }

/* Spin button */
.nfup-spin {
  width: 100%;
  font-size: 15px;
  padding: 14px;
}
.nfup-warn {
  text-align: center;
  font-size: 11px;
  color: rgba(255,90,114,0.75);
  margin-top: 10px;
  line-height: 1.4;
}
.nfup-warn b { color: #ff5a72; }

/* Result screens (win/burn) */
.nfup-result-burst {
  width: 110px; height: 110px;
  margin: 8px auto 12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110,231,183,0.30) 0%, transparent 70%);
  display: flex; align-items: center; justify-content: center;
  animation: nfupBurstPulse 2s ease-in-out infinite;
}
.nfup-result-burst.nfup-burn {
  background: radial-gradient(circle, rgba(255,90,114,0.30) 0%, transparent 70%);
}
@keyframes nfupBurstPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.nfup-result-icon {
  font-size: 56px;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4));
  animation: nfupIconBob 1.8s ease-in-out infinite;
}
@keyframes nfupIconBob {
  0%, 100% { transform: translateY(0)    rotate(-3deg); }
  50%      { transform: translateY(-4px) rotate(3deg); }
}
.nfup-result-title {
  text-align: center;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.nfup-result-title.win  { color: #6ee7b7; }
.nfup-result-title.burn { color: #ff5a72; }
.nfup-result-sub {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 16px;
}
.nfup-result-sub b { color: #fff; font-variant-numeric: tabular-nums; }
.nfup-result-nft {
  text-align: center;
  padding: 16px;
  background: rgba(110,231,183,0.06);
  border: 1px solid rgba(110,231,183,0.30);
  border-radius: 14px;
  margin-bottom: 16px;
}
.nfup-result-art {
  width: 88px; height: 88px;
  margin: 0 auto 8px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,213,106,0.18), rgba(255,86,114,0.10));
  display: flex; align-items: center; justify-content: center;
  font-size: 44px;
  overflow: hidden;
}
.nfup-result-art img { width: 100%; height: 100%; object-fit: cover; }
.nfup-result-name {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}
.nfup-result-floor {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
}
.nfup-result-floor b {
  color: #ffd76a;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .btn.upgrade, .nfup-result-burst, .nfup-result-icon, .nfup-pointer.spinning {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════
   📱 CRASH STAGE — НА МОБИЛЕ ВЫГЛЯДИТ КАК НА ДЕСКТОПЕ
   ═══════════════════════════════════════════════
   По требованию пользователя: на телефоне сцена сохраняет ВСЁ что на десктопе —
   высота 360px, крупный множитель, полные градиенты, ракета, эффекты.
   Никаких компрессий. Только защита от очень узких экранов (≤340px),
   где geometric overflow невозможен без обрезов. */
@media (max-width: 340px) {
  /* На совсем мелких устройствах слегка снижаем высоту чтобы не сжимать
     горизонтальный layout. Множитель и градиенты остаются такими же. */
  .crash-stage { height: 320px; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  💎  PREMIUM VISUAL POLISH — Mines / Dice / Plinko / Slot / Hub  ║
   ║  Все правки additive, через выше-специфичные селекторы.          ║
   ║  Палитра: единая с Crash (фиолет/розовый/золото).                ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════
   💣 MINES — gem glow + bomb effects
   ═══════════════════════════════ */
.mines-grid-wrap {
  position: relative;
}
.mines-grid-wrap::before {
  content: '';
  position: absolute; inset: -20px;
  background: radial-gradient(circle at 50% 50%,
    rgba(199,125,255,0.12), transparent 70%);
  pointer-events: none;
  z-index: -1;
  border-radius: 28px;
}
.mines-tile {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
.mines-tile.closed:hover:not(.disabled) {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 16px rgba(199,125,255,0.35),
              inset 0 0 0 1px rgba(255,213,106,0.4);
}
.mines-tile.gem {
  animation: minesGemReveal 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 24px rgba(110,231,183,0.55),
              inset 0 0 12px rgba(110,231,183,0.25);
}
.mines-tile.gem::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%,
    rgba(255,255,255,0.5) 0%,
    rgba(110,231,183,0.3) 30%,
    transparent 70%);
  pointer-events: none;
  animation: minesGemShimmer 2.2s ease-in-out infinite;
}
@keyframes minesGemReveal {
  0%   { transform: scale(0.6) rotateY(180deg); opacity: 0; }
  60%  { transform: scale(1.12) rotateY(0deg);  opacity: 1; }
  100% { transform: scale(1);    rotateY(0deg);  opacity: 1; }
}
@keyframes minesGemShimmer {
  0%, 100% { opacity: 0.5; transform: translate(0, 0); }
  50%      { opacity: 0.95; transform: translate(1px, -1px); }
}
.mines-tile.bomb-clicked {
  animation: minesBombExplode 0.6s cubic-bezier(0.5, 0, 0.5, 1);
  box-shadow: 0 0 32px rgba(255,90,114,0.7),
              0 0 60px rgba(255,90,114,0.45),
              inset 0 0 14px rgba(255,90,114,0.3);
}
@keyframes minesBombExplode {
  0%   { transform: scale(1);     filter: brightness(1); }
  15%  { transform: scale(1.25);  filter: brightness(2.5) saturate(1.8); }
  40%  { transform: scale(0.92);  filter: brightness(1.4) saturate(1.4); }
  70%  { transform: scale(1.06);  filter: brightness(1.2); }
  100% { transform: scale(1);     filter: brightness(1); }
}

/* ═══════════════════════════════
   🎲 DICE — 3D cube with depth + result color-shift
   ═══════════════════════════════ */
.dice-cube,
#diceCube {
  filter: drop-shadow(0 12px 24px rgba(199,125,255,0.3))
          drop-shadow(0 0 16px rgba(255,213,106,0.25));
  transition: filter 0.4s ease-out;
}
#diceCube.rolling {
  filter: drop-shadow(0 8px 18px rgba(255,213,106,0.55))
          drop-shadow(0 0 24px rgba(255,213,106,0.45));
}
.dr-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -2px;
  transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dr-num.win {
  color: #6ee7b7 !important;
  text-shadow: 0 0 20px rgba(110,231,183,0.85),
               0 0 40px rgba(110,231,183,0.45);
  animation: drNumPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dr-num.loss {
  color: #ff8b9a !important;
  text-shadow: 0 0 16px rgba(255,90,114,0.65),
               0 0 32px rgba(255,90,114,0.35);
  animation: drNumShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes drNumPop {
  0%   { transform: scale(0.7);  opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes drNumShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60%     { transform: translateX(4px); }
}
.dr-status.win {
  color: #6ee7b7;
  text-shadow: 0 0 10px rgba(110,231,183,0.6);
}
.dr-status.loss {
  color: #ff8b9a;
  opacity: 0.85;
}

/* ═══════════════════════════════
   ⚪ PLINKO — ball glow + peg pulse + slot highlight
   ═══════════════════════════════ */
.plinko-board {
  position: relative;
}
.plinko-board::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 40% at 50% 95%,
    rgba(255,213,106,0.20), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.plinko-peg,
.plinko-board .peg {
  filter: drop-shadow(0 0 4px rgba(255,213,106,0.5));
  transition: filter 0.2s ease;
}
.plinko-peg.hit,
.plinko-board .peg.hit {
  animation: plinkoPegPulse 0.4s ease-out;
  filter: drop-shadow(0 0 12px rgba(255,213,106,0.95))
          drop-shadow(0 0 20px rgba(255,255,255,0.6));
}
@keyframes plinkoPegPulse {
  0%   { transform: scale(1);    }
  35%  { transform: scale(1.6);  }
  100% { transform: scale(1);    }
}
.plinko-ball,
#plinkoBall {
  filter: drop-shadow(0 4px 10px rgba(255,213,106,0.7))
          drop-shadow(0 0 14px rgba(255,255,255,0.5));
}
.plinko-slot.winner,
.plinko-bin.winner,
.plinko-board .slot.winner {
  animation: plinkoSlotBurst 1.4s ease-out;
  position: relative;
}
.plinko-slot.winner::after,
.plinko-bin.winner::after,
.plinko-board .slot.winner::after {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 12px;
  background: radial-gradient(circle, rgba(255,213,106,0.6), transparent 70%);
  animation: plinkoSlotRing 1.2s ease-out;
  pointer-events: none;
}
@keyframes plinkoSlotBurst {
  0%   { transform: scale(1);    filter: brightness(1); }
  18%  { transform: scale(1.15); filter: brightness(2) saturate(1.6); }
  100% { transform: scale(1);    filter: brightness(1); }
}
@keyframes plinkoSlotRing {
  0%   { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ═══════════════════════════════
   🎰 SLOT — backdrop + reel polish + win pulse
   ═══════════════════════════════ */
.slot-panel {
  position: relative;
}
.slot-panel::before {
  content: '';
  position: absolute; inset: -10px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,
      rgba(125,195,255,0.10), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%,
      rgba(199,125,255,0.16), transparent 65%);
  pointer-events: none;
  z-index: -1;
  border-radius: 24px;
}
.slot-panel.spinning .machine {
  animation: slotMachineHum 0.15s ease-in-out infinite alternate;
}
@keyframes slotMachineHum {
  from { transform: translateY(0); }
  to   { transform: translateY(-0.4px); }
}
.slot-panel.big-win-pulse .machine {
  animation: slotBigWinPulse 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 2;
  filter: drop-shadow(0 0 28px rgba(255,213,106,0.7));
}
@keyframes slotBigWinPulse {
  0%   { transform: scale(1);    }
  40%  { transform: scale(1.04); }
  100% { transform: scale(1);    }
}
/* Win-cell highlight на каскадах */
.symbol.win-cell {
  animation: slotWinCellGlow 0.7s ease-in-out 2;
  z-index: 2;
}
@keyframes slotWinCellGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255,213,106,0);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 18px 4px rgba(255,213,106,0.65),
                0 0 32px 8px rgba(255,213,106,0.30);
    transform: scale(1.06);
  }
}
/* Stake-row слота — единый стиль с Mines/Dice */
#slotStakeRow {
  margin: 12px 12px 8px;
}
#slotStakeRow .crash-stake-label {
  color: rgba(255,213,106,0.75);
}

/* ═══════════════════════════════
   🏠 HUB — applied Crash palette на основной фон
   ═══════════════════════════════ */
.scr-home #screenHome::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%,
      rgba(125,80,200,0.18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 30%,
      rgba(199,125,255,0.10), transparent 60%),
    radial-gradient(ellipse 70% 40% at 50% 100%,
      rgba(255,90,140,0.12), transparent 65%);
  pointer-events: none;
  z-index: 0;
  animation: hubBgBreathe 12s ease-in-out infinite alternate;
}
@keyframes hubBgBreathe {
  0%   { opacity: 0.7; transform: translateY(0); }
  100% { opacity: 1;   transform: translateY(-4px); }
}
.scr-home #screenHome > * {
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════
   ✨ ОБЩИЕ: smooth toast + button feedback
   ═══════════════════════════════ */
.toast.show {
  animation: toastSlideIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes toastSlideIn {
  from { transform: translateY(-18px) scale(0.92); opacity: 0; }
  to   { transform: translateY(0)     scale(1);    opacity: 1; }
}
/* Тактильный отклик на кнопках действий — мини-скейл при нажатии */
.btn.primary:active:not(:disabled),
.crash-action-btn:active:not(:disabled),
.mines-action-btn:active:not(:disabled) {
  transform: scale(0.97) translateY(1px);
  transition: transform 0.06s ease-out;
}

/* prefers-reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  .mines-tile,
  .mines-tile.gem,
  .mines-tile.gem::before,
  .mines-tile.bomb-clicked,
  .dr-num,
  .dr-num.win,
  .dr-num.loss,
  .plinko-peg.hit,
  .plinko-slot.winner,
  .plinko-slot.winner::after,
  .slot-panel.spinning .machine,
  .slot-panel.big-win-pulse .machine,
  .symbol.win-cell,
  .scr-home #screenHome::before,
  .toast.show {
    animation: none !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  💎  PREMIUM POLISH — PHASE 2                                     ║
   ║  Bottom nav · Balance pill · Modals · Hub tiles · Skel · Empty   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════
   📱 BOTTOM NAV — glassmorphism + active glow
   ═══════════════════════════════ */
.tab {
  position: relative;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.2s ease;
}
.tab:active:not(.active) {
  transform: scale(0.92) translateY(1px);
}
.tab.active {
  position: relative;
}
.tab.active::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 28px; height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg,
    transparent 0%,
    #ffd76a 30%,
    #c77dff 70%,
    transparent 100%);
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(255, 213, 106, 0.65);
  animation: navActivePulse 2.4s ease-in-out infinite;
}
@keyframes navActivePulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1;    }
}
.tab.active .t-icon,
.tab.active .t-svg {
  filter: drop-shadow(0 0 8px rgba(255, 213, 106, 0.55));
  animation: navIconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes navIconPop {
  0%   { transform: scale(1);    }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1.05); }
}

/* ═══════════════════════════════
   💰 BALANCE PILL — premium gold sheen
   ═══════════════════════════════ */
.balance {
  position: relative;
}
.b-item {
  position: relative;
  transition: transform 0.16s ease, box-shadow 0.25s ease;
}
.b-item:active {
  transform: scale(0.96);
}
.b-item.ms {
  background: linear-gradient(135deg,
    rgba(255, 213, 106, 0.16) 0%,
    rgba(199, 125, 255, 0.10) 100%);
  border-color: rgba(255, 213, 106, 0.45);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.b-item.ms::before {
  content: '';
  position: absolute;
  top: 0; left: -50%;
  width: 50%; height: 100%;
  /* Заметно мягче: opacity 0.10 (было 0.35), шире 50% (было 30%) →
     более «дыхательный», менее режущий глаз блик. */
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.10) 50%,
    transparent 100%);
  filter: blur(3px);
  pointer-events: none;
  animation: balanceSheen 9s ease-in-out infinite;
  animation-delay: 3s;
  border-radius: inherit;
  overflow: hidden;
}
@keyframes balanceSheen {
  0%, 80% { left: -50%; opacity: 0; }
  82%     { opacity: 0.65; }
  100%    { left: 150%; opacity: 0; }
}
.b-item.bump {
  animation: balanceBumpPremium 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes balanceBumpPremium {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(110, 231, 183, 0); }
  35%  { transform: scale(1.10); box-shadow: 0 0 22px 6px rgba(110, 231, 183, 0.45); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(110, 231, 183, 0); }
}

/* ═══════════════════════════════
   🪟 MODALS / OVERLAYS — backdrop blur + smooth entrance
   ═══════════════════════════════ */
.nft-upgrade-overlay,
.nft-deposit-overlay,
.nft-withdraw-overlay,
.nft-sell-overlay,
.nft-reveal-overlay,
.win-overlay,
.modal-overlay {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.nft-upgrade-overlay.show .nft-upgrade-modal,
.nft-deposit-overlay.show .nft-deposit-modal,
.win-overlay.show .win-overlay-content {
  animation: modalEnterSpring 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalEnterSpring {
  0%   { transform: translateY(40px) scale(0.85); opacity: 0; }
  60%  { transform: translateY(-6px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* ═══════════════════════════════
   🎮 HUB GAME TILES — cinematic hover + active state
   ═══════════════════════════════ */
.hub-game-tile {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}
.hub-game-tile:active {
  transform: scale(0.96) translateY(2px);
}
.hub-game-tile:hover:not(:active) {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(199, 125, 255, 0.30),
              0 4px 12px rgba(0, 0, 0, 0.35);
}
.hub-game-tile.live::after {
  content: '';
  position: absolute;
  top: 8px; right: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff5a72;
  box-shadow: 0 0 8px rgba(255, 90, 114, 0.85),
              0 0 16px rgba(255, 90, 114, 0.45);
  animation: liveDotPulse 1.5s ease-in-out infinite;
}
@keyframes liveDotPulse {
  0%, 100% { transform: scale(1);    opacity: 0.95; }
  50%      { transform: scale(1.25); opacity: 1;    }
}

/* ═══════════════════════════════
   ⏳ SKELETONS — premium shimmer
   ═══════════════════════════════ */
.skel,
.skel-row,
.skel-block {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 213, 106, 0.10) 40%,
    rgba(199, 125, 255, 0.10) 50%,
    rgba(255, 213, 106, 0.10) 60%,
    rgba(255, 255, 255, 0.04) 100%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: skelShimmer 1.6s ease-in-out infinite;
}
@keyframes skelShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ═══════════════════════════════
   📭 EMPTY STATES — subtle pulse to grab attention
   ═══════════════════════════════ */
.empty-rich .empty-icon {
  animation: emptyIconFloat 3.5s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(199, 125, 255, 0.25));
}
@keyframes emptyIconFloat {
  0%, 100% { transform: translateY(0)   rotate(0deg);  }
  50%      { transform: translateY(-5px) rotate(2deg); }
}
.empty-rich .empty-title {
  background: linear-gradient(135deg, #fff 0%, #ffd76a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ═══════════════════════════════
   🎁 NFT INVENTORY CARDS — rarity glow + tilt
   ═══════════════════════════════ */
.nfti-tile {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}
.nfti-tile:active {
  transform: scale(0.95);
}
.nfti-tile:hover {
  transform: translateY(-2px);
}
.nfti-tile[data-rarity="legendary"] {
  box-shadow: 0 6px 20px rgba(255, 213, 106, 0.32),
              inset 0 0 0 1px rgba(255, 213, 106, 0.5);
}
.nfti-tile[data-rarity="legendary"]::before {
  content: '';
  position: absolute;
  top: 0; left: -30%;
  width: 30%; height: 100%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 213, 106, 0.45) 50%,
    transparent 100%);
  pointer-events: none;
  animation: legendarySheen 3.5s ease-in-out infinite;
  z-index: 1;
}
@keyframes legendarySheen {
  0%, 60%  { left: -30%; opacity: 0; }
  65%      { opacity: 1; }
  100%     { left: 130%; opacity: 0; }
}
.nfti-tile[data-rarity="epic"] {
  box-shadow: 0 6px 18px rgba(199, 125, 255, 0.32),
              inset 0 0 0 1px rgba(199, 125, 255, 0.5);
}
.nfti-tile[data-rarity="rare"] {
  box-shadow: 0 4px 14px rgba(125, 195, 255, 0.28),
              inset 0 0 0 1px rgba(125, 195, 255, 0.45);
}

/* ═══════════════════════════════
   🎯 WIN OVERLAY — explosive entrance + sparkles
   ═══════════════════════════════ */
.win-overlay-content {
  position: relative;
}
.win-overlay-content::after {
  content: '✨';
  position: absolute;
  top: -10px; right: -10px;
  font-size: 24px;
  animation: winSparkle 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes winSparkle {
  0%, 100% { transform: scale(1) rotate(0deg);  opacity: 0.7; }
  50%      { transform: scale(1.3) rotate(20deg); opacity: 1;   }
}

/* ═══════════════════════════════
   📊 LEADERBOARD ROWS — rank glow
   ═══════════════════════════════ */
.lb-row[data-rank="1"],
.leaderboard-row[data-rank="1"] {
  box-shadow: inset 4px 0 0 0 #ffd76a,
              0 4px 12px rgba(255, 213, 106, 0.20);
  background: linear-gradient(90deg,
    rgba(255, 213, 106, 0.10) 0%,
    transparent 60%);
}
.lb-row[data-rank="2"],
.leaderboard-row[data-rank="2"] {
  box-shadow: inset 4px 0 0 0 #c0c0c0;
}
.lb-row[data-rank="3"],
.leaderboard-row[data-rank="3"] {
  box-shadow: inset 4px 0 0 0 #cd7f32;
}

/* ═══════════════════════════════
   🎰 SCREEN TRANSITIONS — smooth fade-in on screen change
   ═══════════════════════════════ */
.screen.active {
  animation: screenEnter 0.32s ease-out;
}
@keyframes screenEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* prefers-reduced-motion respect for Phase 2 */
@media (prefers-reduced-motion: reduce) {
  .tab,
  .tab.active::before,
  .tab.active .t-icon,
  .tab.active .t-svg,
  .b-item.ms::before,
  .b-item.bump,
  .nft-upgrade-overlay.show .nft-upgrade-modal,
  .nft-deposit-overlay.show .nft-deposit-modal,
  .win-overlay.show .win-overlay-content,
  .hub-game-tile,
  .hub-game-tile.live::after,
  .skel,
  .empty-rich .empty-icon,
  .nfti-tile,
  .nfti-tile[data-rarity="legendary"]::before,
  .win-overlay-content::after,
  .screen.active {
    animation: none !important;
    transition: none !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  💎  PREMIUM POLISH — PHASE 3                                     ║
   ║  Crash history pills · Wallet · Profile · Cards · Inputs · Cases ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════
   🚀 CRASH HISTORY PILLS — gradient, shadow, hover effect
   ═══════════════════════════════ */
.chs-pill {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease;
}
.chs-pill:active {
  transform: scale(0.92);
}
.chs-pill.current {
  box-shadow: 0 4px 14px rgba(255,255,255,0.25),
              0 0 0 2px rgba(255,255,255,0.12),
              inset 0 1px 0 rgba(255,255,255,0.4);
  animation: pillCurrentPulse 2.4s ease-in-out infinite;
}
@keyframes pillCurrentPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(255,255,255,0.25),
                          0 0 0 2px rgba(255,255,255,0.12),
                          inset 0 1px 0 rgba(255,255,255,0.4); }
  50%      { box-shadow: 0 4px 18px rgba(255,255,255,0.42),
                          0 0 0 3px rgba(255,255,255,0.20),
                          inset 0 1px 0 rgba(255,255,255,0.5); }
}
.chs-pill.mega {
  position: relative;
  overflow: hidden;
}
.chs-pill.mega::before {
  content: '';
  position: absolute;
  top: 0; left: -50%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255,255,255,0.20) 50%,
    transparent 100%);
  filter: blur(2px);
  animation: pillMegaSheen 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pillMegaSheen {
  0%, 70% { left: -50%; opacity: 0; }
  75%     { opacity: 1; }
  100%    { left: 150%; opacity: 0; }
}

/* ═══════════════════════════════
   💳 WALLET METHODS — premium cards
   ═══════════════════════════════ */
.wallet-method-content {
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.wallet-method-content:not([style*="display:none"]) {
  animation: walletMethodFade 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes walletMethodFade {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
/* Топап preset кнопки — мини-выделение и spring */
.topup-preset {
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease,
              background 0.22s ease;
}
.topup-preset:active {
  transform: scale(0.94);
}
.topup-preset:hover:not(:disabled) {
  background: rgba(255,213,106,0.15);
  box-shadow: 0 2px 8px rgba(255,213,106,0.25);
}
/* Cryptobot quote — мягко появляется на изменении */
.topup-quote {
  transition: color 0.2s ease;
}
.topup-quote b {
  background: linear-gradient(135deg, #ffd76a, #ffa040);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

/* ═══════════════════════════════
   📝 INPUTS — focus glow
   ═══════════════════════════════ */
input[type="number"]:focus,
.topup-input:focus,
.crash-stake-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,213,106,0.45),
              0 4px 12px rgba(0,0,0,0.30);
  background: rgba(255,213,106,0.04);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
input[type="number"],
.topup-input,
.crash-stake-input {
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

/* ═══════════════════════════════
   👤 PROFILE — stat cards animated counter glow
   ═══════════════════════════════ */
.profile-stat,
.profile-stat-card,
.ps-card,
.profile-stats-grid > *,
[id^="stats"] .stat-card {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}
.profile-stat:hover,
.profile-stat-card:hover,
.ps-card:hover,
[id^="stats"] .stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(199,125,255,0.25);
}
/* Tier-бейдж в профиле — золотистая аура */
.tier-badge,
.profile-tier-badge {
  position: relative;
}
.tier-badge::after,
.profile-tier-badge::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: inherit;
  background: radial-gradient(circle,
    rgba(255,213,106,0.35) 0%,
    transparent 70%);
  z-index: -1;
  animation: tierBadgePulse 2.8s ease-in-out infinite;
}
@keyframes tierBadgePulse {
  0%, 100% { opacity: 0.5; transform: scale(0.95); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* ═══════════════════════════════
   📦 CASES — open animation + reveal sparkle
   ═══════════════════════════════ */
.case-tile,
[id^="case"] [class*="tile"] {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.3s ease;
}
.case-tile:hover {
  transform: translateY(-3px) rotate(-1deg);
  filter: drop-shadow(0 8px 18px rgba(255,213,106,0.4))
          drop-shadow(0 0 24px rgba(199,125,255,0.25));
}
.case-tile:active {
  transform: scale(0.95);
}

/* ═══════════════════════════════
   🔔 NOTIFICATION ITEMS — slide-in stagger
   ═══════════════════════════════ */
.notification-item,
[id^="notif"] [class*="item"] {
  animation: notifSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-fill-mode: backwards;
}
.notification-item:nth-child(1) { animation-delay: 0.04s; }
.notification-item:nth-child(2) { animation-delay: 0.08s; }
.notification-item:nth-child(3) { animation-delay: 0.12s; }
.notification-item:nth-child(4) { animation-delay: 0.16s; }
.notification-item:nth-child(5) { animation-delay: 0.20s; }
.notification-item:nth-child(n+6) { animation-delay: 0.24s; }
@keyframes notifSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.notification-item.unread,
.notification-item:not(.read) {
  position: relative;
}
.notification-item.unread::before,
.notification-item:not(.read)::before {
  content: '';
  position: absolute;
  left: 4px; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ffd76a;
  box-shadow: 0 0 8px rgba(255,213,106,0.85);
  transform: translateY(-50%);
  animation: notifUnreadDot 1.8s ease-in-out infinite;
}
@keyframes notifUnreadDot {
  0%, 100% { transform: translateY(-50%) scale(1);    }
  50%      { transform: translateY(-50%) scale(1.4); opacity: 0.7; }
}

/* ═══════════════════════════════
   🎯 ACTION BUTTONS — gold gradient на primary, hover glow
   ═══════════════════════════════ */
.btn.primary {
  position: relative;
  overflow: hidden;
  transition: transform 0.16s ease,
              box-shadow 0.25s ease,
              filter 0.25s ease;
}
.btn.primary:not(:disabled):hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 18px rgba(255,213,106,0.4),
              0 0 0 1px rgba(255,213,106,0.5);
}
.btn.primary:not(:disabled):active {
  transform: scale(0.97);
  filter: brightness(0.92);
}
/* «Большие» CTA кнопки получают subtle pulse */
.btn.primary.big:not(:disabled):not(.pending) {
  animation: btnBigBreath 3.5s ease-in-out infinite;
}
@keyframes btnBigBreath {
  0%, 100% { box-shadow: 0 4px 14px rgba(199,125,255,0.30); }
  50%      { box-shadow: 0 6px 22px rgba(199,125,255,0.55),
                          0 0 0 1px rgba(199,125,255,0.35); }
}

/* ═══════════════════════════════
   📋 CARDS — universal subtle lift on hover
   ═══════════════════════════════ */
.card {
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.card:hover {
  box-shadow: 0 8px 22px rgba(0,0,0,0.35),
              0 0 0 1px rgba(199,125,255,0.15);
}
.card-title {
  transition: color 0.2s ease;
}

/* ═══════════════════════════════
   🎨 ACTIVITY RAIL — chip stagger entrance
   ═══════════════════════════════ */
.har-chip {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.har-chip:active {
  transform: scale(0.94);
}

/* ═══════════════════════════════
   🎊 LIVE-DOT (har head) — стильный пульс
   ═══════════════════════════════ */
.har-live-dot {
  position: relative;
}
.har-live-dot::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(255,90,114,0.6);
  animation: harLiveRing 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes harLiveRing {
  0%   { transform: scale(0.6); opacity: 1;   }
  100% { transform: scale(2.5); opacity: 0;   }
}

/* prefers-reduced-motion Phase 3 */
@media (prefers-reduced-motion: reduce) {
  .chs-pill,
  .chs-pill.current,
  .chs-pill.mega::before,
  .wallet-method-content,
  .topup-preset,
  .topup-input,
  .crash-stake-input,
  .profile-stat,
  .profile-stat-card,
  .tier-badge::after,
  .profile-tier-badge::after,
  .case-tile,
  .notification-item,
  .notification-item.unread::before,
  .notification-item:not(.read)::before,
  .btn.primary,
  .btn.primary.big,
  .card,
  .har-chip,
  .har-live-dot::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  💎  PREMIUM POLISH — PHASE 4 (final)                             ║
   ║  Daily Challenge CTA · Toasts · Coin icon · Scroll · Headers     ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════
   🔥 DAILY CHALLENGE CTA — flame gradient + pulse
   ═══════════════════════════════ */
.daily-challenge-cta,
#btnDailyChallenge {
  background: linear-gradient(135deg, #ff5a72 0%, #ffd76a 100%) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 800;
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(255, 90, 114, 0.40),
              0 0 0 1px rgba(255, 213, 106, 0.4),
              inset 0 1px 0 rgba(255,255,255,0.25);
  animation: dailyChallengeBreath 2.5s ease-in-out infinite !important;
}
.daily-challenge-cta .icon,
#btnDailyChallenge .icon {
  filter: drop-shadow(0 0 6px rgba(255, 200, 100, 0.85));
  animation: dailyChallengeFlame 1.4s ease-in-out infinite alternate;
  display: inline-block;
}
@keyframes dailyChallengeBreath {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(255, 90, 114, 0.40),
                0 0 0 1px rgba(255, 213, 106, 0.4),
                inset 0 1px 0 rgba(255,255,255,0.25);
  }
  50% {
    box-shadow: 0 6px 24px rgba(255, 90, 114, 0.65),
                0 0 0 2px rgba(255, 213, 106, 0.6),
                0 0 32px rgba(255, 213, 106, 0.35),
                inset 0 1px 0 rgba(255,255,255,0.35);
  }
}
@keyframes dailyChallengeFlame {
  from { transform: scale(1)    rotate(-3deg); }
  to   { transform: scale(1.12) rotate(3deg);  }
}
.daily-challenge-cta::after,
#btnDailyChallenge::after {
  content: '';
  position: absolute;
  top: 0; left: -50%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255,255,255,0.25) 50%,
    transparent 100%);
  filter: blur(3px);
  animation: dailyChallengeSheen 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes dailyChallengeSheen {
  0%, 65% { left: -50%; opacity: 0; }
  68%     { opacity: 1; }
  100%    { left: 150%; opacity: 0; }
}

/* ═══════════════════════════════
   📢 TOASTS — premium glassmorphism + side accent
   ═══════════════════════════════ */
.toast {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.10);
  position: relative;
  overflow: hidden;
  font-weight: 700;
}
.toast::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #ffd76a, #c77dff);
  box-shadow: 0 0 8px rgba(255, 213, 106, 0.45);
}
.toast[data-type="success"]::before {
  background: linear-gradient(180deg, #6ee7b7, #10b981);
  box-shadow: 0 0 8px rgba(110, 231, 183, 0.55);
}
.toast[data-type="error"]::before {
  background: linear-gradient(180deg, #ff5a72, #c11d3a);
  box-shadow: 0 0 8px rgba(255, 90, 114, 0.55);
}

/* ═══════════════════════════════
   ⭐ COIN ICONS (m-coin) — subtle rotation glow
   ═══════════════════════════════ */
.m-coin {
  filter: drop-shadow(0 0 3px rgba(255, 213, 106, 0.35));
  transition: filter 0.25s ease, transform 0.25s ease;
}
.b-item.bump .m-coin,
.b-item.ms.bump .m-coin {
  animation: coinSpin 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes coinSpin {
  0%   { transform: rotateY(0deg)   scale(1);    }
  50%  { transform: rotateY(180deg) scale(1.25); filter: drop-shadow(0 0 12px rgba(255, 213, 106, 0.95)); }
  100% { transform: rotateY(360deg) scale(1);    }
}

/* ═══════════════════════════════
   📜 SCROLL POLISH — slim gold-purple thumb
   ═══════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    rgba(255, 213, 106, 0.45),
    rgba(199, 125, 255, 0.35));
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    rgba(255, 213, 106, 0.70),
    rgba(199, 125, 255, 0.55));
}

/* ═══════════════════════════════
   🎨 SCREEN HEADERS — gradient titles
   ═══════════════════════════════ */
h1, h2, .screen-title, .page-title, .section-title {
  background: linear-gradient(135deg, #fff 0%, #ffe89a 60%, #ffd76a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.3px;
}
/* Card titles — нежный gradient на акцент */
.card-title {
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,213,106,0.85) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ═══════════════════════════════
   🌌 GLOBAL BODY — subtle starfield over base bg
   ═══════════════════════════════ */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(2px 2px at 8% 12%, rgba(255,255,255,0.35), transparent 50%),
    radial-gradient(1.5px 1.5px at 23% 67%, rgba(199,125,255,0.40), transparent 50%),
    radial-gradient(2px 2px at 45% 25%, rgba(255,213,106,0.30), transparent 50%),
    radial-gradient(1.5px 1.5px at 71% 78%, rgba(255,255,255,0.30), transparent 50%),
    radial-gradient(2px 2px at 92% 35%, rgba(125,195,255,0.35), transparent 50%),
    radial-gradient(1.5px 1.5px at 14% 88%, rgba(255,255,255,0.25), transparent 50%);
  opacity: 0.55;
  animation: bodyStarfield 18s ease-in-out infinite alternate;
}
@keyframes bodyStarfield {
  0%   { transform: translate(0, 0);     opacity: 0.4; }
  100% { transform: translate(-8px, 4px); opacity: 0.7; }
}
/* Не показывать starfield на экранах с тяжёлым контентом (Crash, Mines) — экономия GPU */
body.scr-crash::before,
body.scr-mines::before,
body.scr-plinko::before {
  display: none;
}

/* ═══════════════════════════════
   🎯 TAB BAR — subtle bottom glassmorphism
   ═══════════════════════════════ */
.tabbar,
nav.tabbar,
#tabbar {
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

/* ═══════════════════════════════
   💎 BADGE COUNTERS (на табах, на иконках) — глоу для активных
   ═══════════════════════════════ */
.badge-count,
.notif-badge,
[class*="badge"][data-count]:not([data-count="0"]) {
  animation: badgePulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(255, 90, 114, 0.55);
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 90, 114, 0.55); }
  50%      { box-shadow: 0 0 16px rgba(255, 90, 114, 0.95),
                          0 0 24px rgba(255, 90, 114, 0.45); }
}

/* ═══════════════════════════════
   ⌨ LONG-PRESS feedback на интерактивах
   ═══════════════════════════════ */
.btn,
.hub-game-tile,
.mines-tile,
.case-tile,
.har-chip,
.nfti-tile,
.topup-preset {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* prefers-reduced-motion Phase 4 */
@media (prefers-reduced-motion: reduce) {
  .daily-challenge-cta,
  #btnDailyChallenge,
  .daily-challenge-cta .icon,
  #btnDailyChallenge .icon,
  .daily-challenge-cta::after,
  #btnDailyChallenge::after,
  .b-item.bump .m-coin,
  body::before,
  .badge-count,
  .notif-badge {
    animation: none !important;
  }
}

/* ═══════════════════════════════
   🎓 ONBOARDING TOUR — Story-style 5-slide intro
   ═══════════════════════════════ */
.onb-overlay {
  position: fixed; inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.onb-overlay.show {
  display: flex;
  animation: onbOverlayFade 0.4s ease-out;
}
@keyframes onbOverlayFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.onb-bg {
  position: absolute; inset: 0;
  background: rgba(8, 4, 24, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.onb-modal {
  position: relative;
  width: 100%;
  max-width: 380px;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%,
      rgba(199, 125, 255, 0.20), transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 100%,
      rgba(255, 90, 140, 0.18), transparent 60%),
    linear-gradient(180deg, #1a0f30 0%, #0c0620 100%);
  border: 1px solid rgba(199, 125, 255, 0.35);
  border-radius: 24px;
  padding: 24px 22px 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7),
              0 0 32px rgba(199, 125, 255, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: onbModalEnter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
@keyframes onbModalEnter {
  0%   { transform: translateY(40px) scale(0.85); opacity: 0; }
  60%  { transform: translateY(-6px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0)    scale(1);    opacity: 1; }
}
.onb-skip {
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 12px;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease, color 0.2s ease;
}
.onb-skip:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
.onb-skip:active { transform: scale(0.94); }

/* Слайды — горизонтальная карусель */
.onb-slides {
  position: relative;
  width: 100%;
  height: 380px;
  margin-top: 8px;
}
.onb-slide {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
  pointer-events: none;
}
.onb-slide.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.onb-slide.exited {
  transform: translateX(-30px);
}
/* Art-блок с большим emoji и radial glow */
.onb-art {
  position: relative;
  width: 120px; height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0 20px;
}
.onb-emoji {
  font-size: 72px;
  filter: drop-shadow(0 8px 18px rgba(255, 213, 106, 0.4));
  animation: onbEmojiFloat 3.5s ease-in-out infinite;
  z-index: 2;
}
@keyframes onbEmojiFloat {
  0%, 100% { transform: translateY(0)   rotate(-2deg); }
  50%      { transform: translateY(-8px) rotate(2deg);  }
}
.onb-glow {
  position: absolute; inset: -10px;
  background: radial-gradient(circle,
    rgba(199, 125, 255, 0.4) 0%,
    rgba(255, 213, 106, 0.2) 40%,
    transparent 70%);
  border-radius: 50%;
  animation: onbGlowPulse 3s ease-in-out infinite;
  z-index: 1;
}
@keyframes onbGlowPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.95); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
.onb-title {
  background: linear-gradient(135deg, #fff 0%, #ffe89a 60%, #ffd76a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.3px;
  margin: 0 0 14px;
  line-height: 1.2;
}
.onb-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 12px;
  font-weight: 500;
}
.onb-text b {
  color: #ffd76a;
  font-weight: 800;
}
.onb-hint {
  margin-top: 8px;
  padding: 9px 13px;
  background: linear-gradient(135deg,
    rgba(110, 231, 183, 0.15) 0%,
    rgba(125, 195, 255, 0.12) 100%);
  border: 1px solid rgba(110, 231, 183, 0.35);
  border-radius: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}
.onb-hint b { color: #6ee7b7; }
/* Dots indicator */
.onb-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 18px;
}
.onb-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.onb-dot.active {
  background: linear-gradient(135deg, #ffd76a, #c77dff);
  box-shadow: 0 0 8px rgba(255, 213, 106, 0.6);
  width: 24px;
  border-radius: 4px;
}
/* Action buttons */
.onb-actions {
  display: flex;
  gap: 10px;
}
.onb-btn {
  flex: 1;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.25s ease, filter 0.2s ease;
  border: none;
}
.onb-btn:active:not(:disabled) { transform: scale(0.96); }
.onb-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
}
.onb-btn-secondary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.onb-btn-primary {
  background: linear-gradient(135deg, #c77dff 0%, #ff5a72 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(199, 125, 255, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.onb-btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 22px rgba(199, 125, 255, 0.7),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* На последнем слайде primary становится "Начать играть" — золотой */
.onb-overlay[data-step="4"] .onb-btn-primary {
  background: linear-gradient(135deg, #ffd76a 0%, #ff9b3a 100%);
  color: #2a1a00;
  box-shadow: 0 4px 18px rgba(255, 213, 106, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .onb-overlay.show,
  .onb-modal,
  .onb-slide,
  .onb-emoji,
  .onb-glow,
  .onb-dot {
    animation: none !important;
    transition: opacity 0.2s ease !important;
  }
}

/* ═══════════════════════════════
   🔄 SLOT AUTO-SPIN — button + bottom-sheet
   ═══════════════════════════════ */
.slot-auto-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  width: 100%;
}
.slot-auto-row .last-win-info {
  flex: 1;
  min-width: 0;
}
.slot-auto-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: linear-gradient(135deg,
    rgba(199, 125, 255, 0.22) 0%,
    rgba(125, 80, 200, 0.16) 100%);
  border: 1px solid rgba(199, 125, 255, 0.5);
  border-radius: 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.16s ease, box-shadow 0.25s ease, filter 0.2s ease;
  box-shadow: 0 2px 8px rgba(199, 125, 255, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.slot-auto-btn:hover { filter: brightness(1.15); }
.slot-auto-btn:active { transform: scale(0.94); }
.slot-auto-btn.running {
  background: linear-gradient(135deg, #ff5a72 0%, #ffd76a 100%);
  border-color: rgba(255, 213, 106, 0.7);
  box-shadow: 0 4px 16px rgba(255, 90, 114, 0.55);
  animation: slotAutoRunningPulse 1.4s ease-in-out infinite;
}
.slot-auto-btn.running .sab-icon {
  animation: slotAutoIconSpin 0.9s linear infinite;
  display: inline-block;
}
@keyframes slotAutoIconSpin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
@keyframes slotAutoRunningPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(255, 90, 114, 0.55); }
  50%      { box-shadow: 0 6px 22px rgba(255, 90, 114, 0.85),
                          0 0 28px rgba(255, 213, 106, 0.45); }
}

/* Bottom-sheet overlay */
.slot-auto-sheet-overlay {
  position: fixed; inset: 0;
  z-index: 9000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.slot-auto-sheet-overlay.show {
  display: flex;
  pointer-events: auto;
  animation: sasFadeIn 0.25s ease-out;
}
@keyframes sasFadeIn { from { opacity: 0; } to { opacity: 1; } }
.slot-auto-sheet-bg {
  position: absolute; inset: 0;
  background: rgba(8, 4, 24, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.slot-auto-sheet-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: linear-gradient(180deg, #1a0f30 0%, #0c0620 100%);
  border-top: 1px solid rgba(199, 125, 255, 0.4);
  border-radius: 24px 24px 0 0;
  padding: 20px 18px 28px;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: sasCardSlide 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes sasCardSlide {
  from { transform: translateY(100%); }
  to   { transform: translateY(0);    }
}
.sas-handle {
  width: 40px; height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  margin: 0 auto 14px;
}
.sas-title {
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #fff 0%, #ffd76a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sas-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
  margin-bottom: 18px;
}
.sas-counts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.sas-count {
  padding: 16px 8px;
  background: linear-gradient(180deg,
    rgba(199, 125, 255, 0.18),
    rgba(125, 80, 200, 0.10));
  border: 1px solid rgba(199, 125, 255, 0.40);
  border-radius: 14px;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.25s ease, filter 0.2s ease;
}
.sas-count:hover {
  filter: brightness(1.15);
  box-shadow: 0 4px 12px rgba(199, 125, 255, 0.4);
}
.sas-count:active { transform: scale(0.94); }
.sas-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
}
.sas-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  user-select: none;
}
.sas-opt input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: #c77dff;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .slot-auto-btn.running,
  .slot-auto-btn.running .sab-icon,
  .slot-auto-sheet-overlay.show,
  .slot-auto-sheet-card {
    animation: none !important;
  }
}

/* ═══════════════════════════════
   🏆 PERSONAL BEST CHIP — motivational record display
   ═══════════════════════════════ */
.pb-chip {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg,
    rgba(255, 213, 106, 0.18) 0%,
    rgba(199, 125, 255, 0.12) 100%);
  border: 1px solid rgba(255, 213, 106, 0.45);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
  user-select: none;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}
.pb-chip .pb-icon {
  font-size: 14px;
  filter: drop-shadow(0 0 4px rgba(255, 213, 106, 0.7));
}
.pb-chip .pb-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 600;
}
.pb-chip .pb-value {
  color: #ffd76a;
  font-weight: 900;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
}
/* На больших экранах prepend чип к шапке игры */
@media (min-width: 480px) {
  .pb-chip {
    top: 12px; right: 12px;
    padding: 8px 14px;
    font-size: 13px;
  }
}
/* Когда юзер бьёт рекорд — chip пульсирует 3с золотом */
.pb-chip.new-record {
  animation: pbNewRecord 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) 3;
}
@keyframes pbNewRecord {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  35% {
    transform: scale(1.12);
    box-shadow: 0 6px 28px rgba(255, 213, 106, 0.85),
                0 0 38px rgba(255, 213, 106, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
}

/* На некоторых экранах относительный родитель отсутствует — добавим */
#screenCrash, #screenMines, #screenDice, #screenPlinko, #screenGame {
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .pb-chip,
  .pb-chip.new-record {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════
   🔥 HUB TILE — HOT INDICATOR
   ═══════════════════════════════ */
.hub-game-tile.hot {
  position: relative;
}
.hub-game-tile.hot::before {
  content: '🔥 HOT';
  position: absolute;
  top: 6px; left: 6px;
  z-index: 5;
  padding: 3px 7px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #ff5a72 0%, #ffd76a 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  box-shadow: 0 2px 8px rgba(255, 90, 114, 0.55),
              0 0 14px rgba(255, 213, 106, 0.45);
  animation: hotBadgePulse 1.6s ease-in-out infinite;
}
@keyframes hotBadgePulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(255, 90, 114, 0.55),
                0 0 14px rgba(255, 213, 106, 0.45);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 3px 14px rgba(255, 90, 114, 0.85),
                0 0 22px rgba(255, 213, 106, 0.75);
    transform: scale(1.06);
  }
}
.hub-game-tile.hot {
  box-shadow: 0 8px 24px rgba(255, 90, 114, 0.25),
              0 0 0 1px rgba(255, 213, 106, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .hub-game-tile.hot::before { animation: none !important; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  💎  PREMIUM POLISH — PHASE 5 (FINAL VISUAL UPGRADE)              ║
   ║  Hub hero · Animated titles · NFT reveal · Coin flyout · Divider ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════
   🏠 HUB HERO — animated mesh gradient backdrop
   ═══════════════════════════════ */
#screenHome > .card:first-of-type,
.hub-hero,
#screenHome .hub-hero-bg {
  position: relative;
}
#screenHome::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 240px;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 25% 20%,
      rgba(199, 125, 255, 0.32) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 75% 30%,
      rgba(255, 90, 140, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 50% 60%,
      rgba(125, 195, 255, 0.20) 0%, transparent 60%);
  filter: blur(40px);
  animation: hubHeroMesh 14s ease-in-out infinite alternate;
  opacity: 0.85;
}
@keyframes hubHeroMesh {
  0%   { transform: translate(0, 0)    rotate(0deg);  }
  50%  { transform: translate(-4%, 2%) rotate(2deg);  }
  100% { transform: translate(3%, -2%) rotate(-1deg); }
}

/* ═══════════════════════════════
   ✨ SHIMMER TITLES — animated gradient text
   ═══════════════════════════════ */
h1, .screen-title, .page-title, .hub-hero-title {
  background: linear-gradient(
    100deg,
    #fff 0%,
    #ffe89a 30%,
    #ffd76a 50%,
    #ffe89a 70%,
    #fff 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titleShimmer 6s ease-in-out infinite;
}
@keyframes titleShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

/* ═══════════════════════════════
   🎁 NFT REVEAL OVERLAY — dramatic slot-machine reveal
   ═══════════════════════════════ */
.nft-reveal-overlay,
[id*="NFTReveal"][class*="overlay"] {
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.nft-reveal-overlay.show .nft-reveal-content,
[id*="NFTReveal"] .reveal-content {
  animation: nftRevealEnter 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}
@keyframes nftRevealEnter {
  0%   { transform: scale(0.3) rotate(-180deg); opacity: 0; filter: blur(8px); }
  60%  { transform: scale(1.08) rotate(8deg);   opacity: 1; filter: blur(0); }
  100% { transform: scale(1) rotate(0deg);      opacity: 1; filter: blur(0); }
}
/* Sparkle particles вокруг NFT-арта при reveal */
.nft-reveal-content::before,
.nft-reveal-content::after,
.reveal-content::before,
.reveal-content::after {
  content: '✨';
  position: absolute;
  font-size: 28px;
  animation: nftRevealSparkle 2s ease-out infinite;
  pointer-events: none;
  z-index: 5;
}
.nft-reveal-content::before,
.reveal-content::before {
  top: -10px; left: -10px;
  animation-delay: 0s;
}
.nft-reveal-content::after,
.reveal-content::after {
  bottom: -10px; right: -10px;
  animation-delay: 1s;
}
@keyframes nftRevealSparkle {
  0%, 100% { transform: scale(0.7) rotate(0deg);   opacity: 0.4; }
  50%      { transform: scale(1.3) rotate(180deg); opacity: 1;   }
}

/* ═══════════════════════════════
   🪙 COIN FLYOUT — premium gold trail
   ═══════════════════════════════ */
.coin-flyout,
.coin-burst,
[class*="coin-flyout"] {
  filter: drop-shadow(0 0 8px rgba(255, 213, 106, 0.9))
          drop-shadow(0 0 16px rgba(255, 213, 106, 0.4));
  animation: coinFlyoutSpin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes coinFlyoutSpin {
  from { transform: rotateY(0deg)   scale(1);    }
  to   { transform: rotateY(360deg) scale(1.15); }
}

/* ═══════════════════════════════
   ➖ SECTION DIVIDERS — gradient lines instead of solid
   ═══════════════════════════════ */
hr,
.divider,
.section-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(199, 125, 255, 0.4) 20%,
    rgba(255, 213, 106, 0.5) 50%,
    rgba(199, 125, 255, 0.4) 80%,
    transparent 100%);
  margin: 18px 0;
  box-shadow: 0 1px 8px rgba(255, 213, 106, 0.15);
}

/* ═══════════════════════════════
   💰 BALANCE BUMP — pulse при увеличении значения
   ═══════════════════════════════ */
.b-item.ms[data-trend="up"]::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: inherit;
  border: 1.5px solid #6ee7b7;
  box-shadow: 0 0 16px rgba(110, 231, 183, 0.65);
  animation: balanceTrendUp 0.8s ease-out;
  pointer-events: none;
}
@keyframes balanceTrendUp {
  0%   { opacity: 0;   transform: scale(0.92); }
  35%  { opacity: 1;   transform: scale(1.05); }
  100% { opacity: 0;   transform: scale(1.1);  }
}

/* ═══════════════════════════════
   🎊 CONFETTI POLISH — varied sizes, brighter colors
   ═══════════════════════════════ */
.confetti-piece,
[class*="confetti"] {
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
}

/* ═══════════════════════════════
   🌌 EMPTY-RICH STATES — glowing cosmic backdrop
   ═══════════════════════════════ */
.empty-rich {
  position: relative;
  overflow: hidden;
}
.empty-rich::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 40%,
      rgba(199, 125, 255, 0.10) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%,
      rgba(255, 213, 106, 0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.empty-rich > * { position: relative; z-index: 1; }

/* ═══════════════════════════════
   🎯 CTA BUTTONS — gold-purple gradient on big primary
   ═══════════════════════════════ */
.btn.primary.big,
button.btn.primary.big {
  background: linear-gradient(135deg,
    #c77dff 0%,
    #ff5a72 50%,
    #ffd76a 100%) !important;
  background-size: 200% 100%;
  animation: btnBigGradient 4s ease-in-out infinite alternate,
             btnBigBreath 3.5s ease-in-out infinite;
}
@keyframes btnBigGradient {
  0%   { background-position: 0% 50%;   }
  100% { background-position: 100% 50%; }
}
/* Override breath чтоб не конфликтовать */
.btn.primary.big:not(:disabled):not(.pending) {
  box-shadow: 0 6px 20px rgba(199, 125, 255, 0.45);
}

/* ═══════════════════════════════
   📦 CARD HOVER GLOW INTENSIFIED
   ═══════════════════════════════ */
.card {
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 213, 106, 0.4) 50%,
    transparent 100%);
  opacity: 0.7;
  pointer-events: none;
}

/* ═══════════════════════════════
   🌟 ANIMATIONS: prefers-reduced-motion safety net
   ═══════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #screenHome::after,
  h1, .screen-title, .page-title, .hub-hero-title,
  .nft-reveal-overlay.show .nft-reveal-content,
  .nft-reveal-content::before,
  .nft-reveal-content::after,
  .coin-flyout,
  .coin-burst,
  .b-item.ms[data-trend="up"]::after,
  .btn.primary.big,
  button.btn.primary.big {
    animation: none !important;
  }
}

/* ═══════════════════════════════
   📤 SHARE WIN button + count-up animation
   ═══════════════════════════════ */
.cro-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.cro-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 16px;
  background: linear-gradient(135deg,
    #5da6ff 0%, #c77dff 50%, #ff5a72 100%);
  background-size: 200% 100%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.16s ease, filter 0.2s ease;
  box-shadow: 0 4px 14px rgba(125, 80, 200, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
  animation: shareBtnGradient 4s ease-in-out infinite alternate;
}
.cro-share-btn:active { transform: scale(0.96); }
.cro-share-btn:hover  { filter: brightness(1.1); }
.cro-share-btn .csb-icon {
  font-size: 16px;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}
@keyframes shareBtnGradient {
  0%   { background-position: 0% 50%;   }
  100% { background-position: 100% 50%; }
}

/* Count-up: золотое сияние во время анимации выигрыша */
.cro-val.counting,
.mi-val.counting {
  animation: countUpGlow 0.45s ease-out;
}
@keyframes countUpGlow {
  0%   { text-shadow: 0 0 0 transparent;               transform: scale(1);    }
  50%  { text-shadow: 0 0 12px rgba(255,213,106,0.75); transform: scale(1.06); }
  100% { text-shadow: 0 0 0 transparent;               transform: scale(1);    }
}

@media (prefers-reduced-motion: reduce) {
  .cro-share-btn,
  .cro-val.counting,
  .mi-val.counting {
    animation: none !important;
  }
}

/* ═══════════════════════════════
   🪙 COIN RAIN — золотой дождь при огромных победах
   ═══════════════════════════════ */
.coin-rain-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  overflow: hidden;
}
.coin-rain-piece {
  position: absolute;
  top: -40px;
  font-size: 28px;
  user-select: none;
  filter: drop-shadow(0 0 6px rgba(255, 213, 106, 0.85))
          drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  animation:
    coinRainFall var(--fall-dur, 3s) cubic-bezier(0.22, 0.6, 0.36, 1) var(--fall-delay, 0s) forwards,
    coinRainSpin var(--spin-dur, 0.9s) linear infinite;
  will-change: transform;
  transform-origin: center;
}
@keyframes coinRainFall {
  0%   { transform: translate(0, 0) rotate(0deg);    opacity: 0;   }
  10%  { opacity: 1;                                                 }
  90%  { opacity: 1;                                                 }
  100% { transform: translate(var(--drift, 0px), 110vh) rotate(0deg); opacity: 0; }
}
@keyframes coinRainSpin {
  from { transform: rotateY(0deg);   }
  to   { transform: rotateY(360deg); }
}
/* Уменьшенный размер на мобильных — экран занять полностью без overflow */
@media (max-width: 480px) {
  .coin-rain-piece {
    font-size: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .coin-rain-layer { display: none !important; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  💎  PHASE 6 — Cinematic Crash + Shooting Stars + Card Flip       ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════
   🌠 SHOOTING STARS — random cinematic streaks across hub
   ═══════════════════════════════ */
#screenHome::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    /* 3 случайные позиции «звёзд» через radial-gradient */
    radial-gradient(2px 2px at 15% 25%, rgba(255,255,255,0.9), transparent 50%),
    radial-gradient(1.5px 1.5px at 80% 45%, rgba(199,125,255,0.85), transparent 50%),
    radial-gradient(2px 2px at 50% 70%, rgba(255,213,106,0.9), transparent 50%);
  opacity: 0;
  animation: shootingStarOrigin 11s ease-in-out infinite;
}
@keyframes shootingStarOrigin {
  0%, 100% { opacity: 0; }
  3%       { opacity: 0.95; transform: translate(0, 0); }
  20%      { opacity: 0;    transform: translate(60vw, 40vh); }
  21%      { opacity: 0; }
  100%     { opacity: 0; }
}
/* Перекрывающаяся вторая волна звёзд */
#screenHome > *:first-child::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(2px 2px at 85% 18%, rgba(255,255,255,0.9), transparent 50%),
    radial-gradient(1.5px 1.5px at 22% 78%, rgba(125,195,255,0.85), transparent 50%);
  opacity: 0;
  animation: shootingStarOrigin 14s ease-in-out 6s infinite;
}

/* ═══════════════════════════════
   🚀 CRASH MULTIPLIER — cinematic tier-based color shift
   ═══════════════════════════════ */
.crash-mult-display .cmd-num {
  transition: color 0.4s ease, text-shadow 0.4s ease, transform 0.3s ease;
}
.crash-stage[data-tier="hi"] .crash-mult-display .cmd-num {
  color: #ff9b3a;
  text-shadow: 0 0 28px rgba(255, 155, 58, 0.65),
               0 0 56px rgba(255, 90, 114, 0.4);
  animation: crashNumPulseHi 0.8s ease-in-out infinite alternate;
}
.crash-stage[data-tier="mega"] .crash-mult-display .cmd-num {
  background: linear-gradient(135deg, #ffd76a 0%, #ff5a72 50%, #c77dff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(255, 213, 106, 0.8))
          drop-shadow(0 0 48px rgba(199, 125, 255, 0.5));
  animation: crashNumPulseMega 0.5s ease-in-out infinite alternate;
}
@keyframes crashNumPulseHi {
  from { transform: scale(1);    }
  to   { transform: scale(1.04); }
}
@keyframes crashNumPulseMega {
  from { transform: scale(1)    rotate(-0.5deg); }
  to   { transform: scale(1.06) rotate(0.5deg);  }
}

/* ═══════════════════════════════
   🚀 ROCKET TRAIL — golden particles behind rocket during flight
   ═══════════════════════════════ */
.crash-rocket.flying::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -8px;
  width: 8px; height: 24px;
  background: linear-gradient(180deg,
    rgba(255, 213, 106, 0.95) 0%,
    rgba(255, 155, 58, 0.7) 40%,
    rgba(255, 90, 114, 0.3) 80%,
    transparent 100%);
  border-radius: 50% 50% 0 0;
  transform: translateX(-50%);
  filter: blur(2px);
  animation: rocketTrailFlame 0.18s ease-in-out infinite alternate;
}
@keyframes rocketTrailFlame {
  from { height: 24px; opacity: 0.85; }
  to   { height: 32px; opacity: 1;    }
}

/* ═══════════════════════════════
   🎁 NFT INVENTORY — 3D flip preview on tap
   ═══════════════════════════════ */
.nfti-tile {
  perspective: 800px;
  transform-style: preserve-3d;
}
.nfti-tile-art {
  transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.nfti-tile:active .nfti-tile-art {
  transform: rotateY(15deg);
}

/* ═══════════════════════════════
   🎰 SLOT REELS — improved motion blur during spin
   ═══════════════════════════════ */
.reel.spinning,
.slot-panel.spinning .reel {
  filter: blur(1.5px) saturate(1.1);
  transition: filter 0.3s ease;
}
.slot-panel:not(.spinning) .reel {
  filter: none;
}
/* Win-cell во время каскада — двойной gold-glow */
.symbol.win-cell {
  filter: drop-shadow(0 0 8px rgba(255, 213, 106, 0.9))
          drop-shadow(0 0 16px rgba(255, 213, 106, 0.4));
}

/* ═══════════════════════════════
   🎯 BUTTON RIPPLE — material-style on click
   ═══════════════════════════════ */
.btn,
.crash-action-btn,
.mines-action-btn {
  position: relative;
  overflow: hidden;
}
.btn::after,
.crash-action-btn::after,
.mines-action-btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  opacity: 0;
}
.btn:active::after,
.crash-action-btn:active::after,
.mines-action-btn:active::after {
  animation: btnRipple 0.6s ease-out;
}
@keyframes btnRipple {
  0%   { transform: translate(-50%, -50%) scale(0);  opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(80); opacity: 0;   }
}

/* ═══════════════════════════════
   💎 RARITY BADGE — shimmer for legendary
   ═══════════════════════════════ */
[data-rarity="legendary"] .nfti-tile-name,
[data-rarity="legendary"] .nfup-target-name {
  background: linear-gradient(100deg,
    #ffd76a 0%,
    #fff 35%,
    #ffd76a 50%,
    #fff 65%,
    #ffd76a 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: legendaryTextShimmer 3s linear infinite;
}
@keyframes legendaryTextShimmer {
  0%   { background-position: 250% 0; }
  100% { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  #screenHome::before,
  #screenHome > *:first-child::before,
  .crash-stage[data-tier="hi"] .crash-mult-display .cmd-num,
  .crash-stage[data-tier="mega"] .crash-mult-display .cmd-num,
  .crash-rocket.flying::after,
  .reel.spinning,
  .btn:active::after,
  .crash-action-btn:active::after,
  .mines-action-btn:active::after,
  [data-rarity="legendary"] .nfti-tile-name,
  [data-rarity="legendary"] .nfup-target-name {
    animation: none !important;
    transition: none !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  💎  PHASE 7 — Hub Tile Cinema · Crash Urgency · Profile · Cards ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════
   🎮 HUB GAME TILE — emoji float + parallax glow
   ═══════════════════════════════ */
.hub-game-tile .hgt-art-emoji {
  animation: hgtEmojiFloat 4s ease-in-out infinite;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
  filter: drop-shadow(0 4px 14px rgba(255, 213, 106, 0.45));
}
.hub-game-tile:active .hgt-art-emoji {
  transform: scale(1.18) translateY(-4px);
}
@keyframes hgtEmojiFloat {
  0%, 100% { transform: translateY(0)   rotate(-2deg); }
  50%      { transform: translateY(-5px) rotate(2deg);  }
}
/* Glow расходится при hover */
.hub-game-tile .hgt-art-glow {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hub-game-tile:hover .hgt-art-glow {
  opacity: 1 !important;
  transform: scale(1.2);
}
/* Rays — медленное вращение для cinematic-эффекта */
.hub-game-tile .hgt-art-rays {
  animation: hgtArtRays 24s linear infinite;
}
@keyframes hgtArtRays {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════
   ⏰ CRASH BETTING URGENCY — последние 3 секунды драматично
   ═══════════════════════════════ */
.crash-stage[data-phase="betting"][data-countdown="urgent"] .crash-countdown-text {
  color: #ff5a72 !important;
  text-shadow: 0 0 16px rgba(255, 90, 114, 0.85),
               0 0 32px rgba(255, 90, 114, 0.45);
  animation: crashCountdownUrgent 0.35s ease-in-out infinite alternate;
}
@keyframes crashCountdownUrgent {
  from { transform: translateX(-50%) scale(1);    opacity: 0.95; }
  to   { transform: translateX(-50%) scale(1.08); opacity: 1;    }
}
.crash-stage[data-phase="betting"][data-countdown="urgent"] .crash-countdown-ring {
  filter: drop-shadow(0 0 12px rgba(255, 90, 114, 0.75));
  animation: crashCountdownRingPulse 0.4s ease-in-out infinite alternate;
}
@keyframes crashCountdownRingPulse {
  from { filter: drop-shadow(0 0 8px  rgba(255, 90, 114, 0.5));   }
  to   { filter: drop-shadow(0 0 20px rgba(255, 90, 114, 0.95));  }
}

/* ═══════════════════════════════
   👤 PROFILE — tier badge mega-glow + stat number polish
   ═══════════════════════════════ */
.profile-tier-badge,
.tier-badge {
  background: linear-gradient(135deg, #c77dff 0%, #ffd76a 100%);
  box-shadow: 0 4px 18px rgba(199, 125, 255, 0.55),
              0 0 28px rgba(255, 213, 106, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
  position: relative;
  overflow: hidden;
}
.profile-tier-badge::before,
.tier-badge::before {
  content: '';
  position: absolute;
  top: 0; left: -50%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%);
  filter: blur(2px);
  animation: tierBadgeShimmer 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tierBadgeShimmer {
  0%, 70% { left: -50%; opacity: 0; }
  73%     { opacity: 1; }
  100%    { left: 150%; opacity: 0; }
}

/* Stat-numbers — золотой gradient + tabular-nums */
[id^="st"][id$="Value"],
[id^="stTotal"],
[id^="stWins"],
[id^="stStreak"],
[id^="stBest"] {
  background: linear-gradient(180deg, #fff 0%, #ffd76a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

/* ═══════════════════════════════
   📋 CARD DECORATIVE BORDER — animated dotted gold accent
   ═══════════════════════════════ */
.card {
  position: relative;
}
.card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(199, 125, 255, 0.3) 30%,
    rgba(255, 213, 106, 0.35) 50%,
    rgba(199, 125, 255, 0.3) 70%,
    transparent 100%);
  pointer-events: none;
  opacity: 0.7;
}

/* ═══════════════════════════════
   🎯 BALANCE PILL — pulse в crash flying режиме
   ═══════════════════════════════ */
body.scr-crash .b-item.ms {
  animation: balancePillCrashPulse 2.4s ease-in-out infinite;
}
@keyframes balancePillCrashPulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25),
                          inset 0 1px 0 rgba(255, 255, 255, 0.10); }
  50%      { box-shadow: 0 4px 16px rgba(255, 213, 106, 0.45),
                          0 0 22px rgba(199, 125, 255, 0.30),
                          inset 0 1px 0 rgba(255, 255, 255, 0.18); }
}

/* ═══════════════════════════════
   🌈 NFT PREVIEW IMAGES — soft hover-zoom in inventory
   ═══════════════════════════════ */
.nfti-tile-art img,
.nfup-src-art img,
.nfup-target-art img {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.3s ease;
}
.nfti-tile:hover .nfti-tile-art img,
.nfti-tile:active .nfti-tile-art img {
  transform: scale(1.08);
  filter: brightness(1.1) saturate(1.15);
}

/* ═══════════════════════════════
   🔔 STREAK FIRE — на больших стриках добавляем огненный glow
   ═══════════════════════════════ */
.profile-streak[data-streak-tier="3"],
[data-streak-tier="3"] {
  text-shadow: 0 0 12px rgba(255, 155, 58, 0.7);
  animation: streakFire 1.6s ease-in-out infinite alternate;
}
@keyframes streakFire {
  from { text-shadow: 0 0 12px rgba(255, 155, 58, 0.7); }
  to   { text-shadow: 0 0 20px rgba(255, 90, 114, 0.95),
                       0 0 32px rgba(255, 213, 106, 0.55); }
}

/* ═══════════════════════════════
   🎲 DICE PRESET BUTTONS — gold accent на selected
   ═══════════════════════════════ */
.csp.active,
.crash-stake-presets .csp.active,
.mines-csp.active,
.slot-csp.active {
  background: linear-gradient(135deg,
    rgba(255, 213, 106, 0.30) 0%,
    rgba(199, 125, 255, 0.20) 100%) !important;
  border-color: rgba(255, 213, 106, 0.6) !important;
  color: #ffe89a !important;
  box-shadow: 0 2px 10px rgba(255, 213, 106, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .hub-game-tile .hgt-art-emoji,
  .hub-game-tile .hgt-art-glow,
  .hub-game-tile .hgt-art-rays,
  .crash-stage[data-phase="betting"][data-countdown="urgent"] .crash-countdown-text,
  .crash-stage[data-phase="betting"][data-countdown="urgent"] .crash-countdown-ring,
  .profile-tier-badge::before,
  .tier-badge::before,
  body.scr-crash .b-item.ms,
  .nfti-tile-art img,
  .nfup-src-art img,
  .nfup-target-art img,
  .profile-streak[data-streak-tier="3"],
  [data-streak-tier="3"] {
    animation: none !important;
    transition: none !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  💎  PHASE 8 — Floating Balance Ping + QoL micro-polish           ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════
   💰 FLOATING BALANCE PING — +X⭐ всплывает над пилл при росте
   ═══════════════════════════════ */
.balance-ping {
  position: fixed;
  pointer-events: none;
  z-index: 9997;
  font-size: 18px;
  font-weight: 900;
  color: #6ee7b7;
  text-shadow: 0 0 10px rgba(110, 231, 183, 0.9),
               0 2px 8px rgba(0, 0, 0, 0.5);
  animation: balancePingFloat 1.4s cubic-bezier(0.22, 0.7, 0.36, 1) forwards;
  white-space: nowrap;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}
.balance-ping.negative {
  color: #ff8b9a;
  text-shadow: 0 0 10px rgba(255, 90, 114, 0.9),
               0 2px 8px rgba(0, 0, 0, 0.5);
}
@keyframes balancePingFloat {
  0%   { opacity: 0; transform: translate(-50%, 0)    scale(0.8); }
  15%  { opacity: 1; transform: translate(-50%, -8px) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -48px) scale(1);  }
}

/* ═══════════════════════════════
   🎯 BALANCE PILL — clickable hover hint (открыть Wallet)
   ═══════════════════════════════ */
.b-item.ms {
  cursor: pointer;
}
.b-item.ms:active {
  transform: scale(0.96);
  transition: transform 0.08s ease;
}

/* ═══════════════════════════════
   📱 SMOOTH SCROLL — глобально для якорей и навигации
   ═══════════════════════════════ */
html {
  scroll-behavior: smooth;
}

/* ═══════════════════════════════
   🌟 SELECTION COLOR — gold вместо системного синего
   ═══════════════════════════════ */
::selection {
  background: rgba(255, 213, 106, 0.45);
  color: #fff;
}

/* ═══════════════════════════════
   🎨 SCROLLBAR в Telegram WebView — minimal
   ═══════════════════════════════ */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(199, 125, 255, 0.4) transparent;
}

/* ═══════════════════════════════
   🔘 INPUT FOCUS — единый стиль golden ring
   ═══════════════════════════════ */
input:focus-visible,
button:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(255, 213, 106, 0.65);
  outline-offset: 2px;
}

/* ═══════════════════════════════
   🎀 PILL CHIPS — универсальный hover + active feedback
   ═══════════════════════════════ */
.chip, .pill, [class*="-chip"]:not(.har-chip):not(.balance-ping) {
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chip:active, .pill:active, [class*="-chip"]:not(.har-chip):not(.balance-ping):active {
  transform: scale(0.94);
}

/* ═══════════════════════════════
   💫 CTA BUTTON GLINT — короткий gold sheen при hover
   ═══════════════════════════════ */
.btn.primary:hover:not(:disabled)::before {
  content: '';
  position: absolute;
  top: 0; left: -40%;
  width: 40%; height: 100%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.30) 50%,
    transparent 100%);
  pointer-events: none;
  animation: btnGlint 0.6s ease-out;
}
@keyframes btnGlint {
  from { left: -40%; }
  to   { left: 110%; }
}

/* ═══════════════════════════════
   ⏳ LOADING DOTS — для button и pending states
   ═══════════════════════════════ */
.btn.pending::after,
button.pending::after,
[data-loading="true"]::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  margin-left: 6px;
  background: currentColor;
  animation: loadingDots 1.2s ease-in-out infinite;
}
@keyframes loadingDots {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.7); }
  40%           { opacity: 1;   transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .balance-ping,
  .btn.primary:hover:not(:disabled)::before,
  .btn.pending::after,
  button.pending::after,
  [data-loading="true"]::after {
    animation: none !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  💎  PHASE 9 — Cinematic Micro-Moments                            ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════
   🚀 CRASH PHASE TRANSITIONS — flash при переходе betting → flying
   ═══════════════════════════════ */
.crash-stage[data-phase="flying"]::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 65%,
    rgba(255, 213, 106, 0.55) 0%,
    rgba(255, 90, 114, 0.30) 30%,
    transparent 70%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  animation: crashLaunchFlash 1s ease-out;
}
@keyframes crashLaunchFlash {
  0%   { opacity: 0;   transform: scale(0.5); }
  20%  { opacity: 1;   transform: scale(1.2); }
  100% { opacity: 0;   transform: scale(2);   }
}
/* Crashed phase — vignette на короткое время */
.crash-stage[data-phase="crashed"]::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%,
    transparent 40%,
    rgba(255, 50, 70, 0.45) 100%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  animation: crashedVignette 1.2s ease-out;
}
@keyframes crashedVignette {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ═══════════════════════════════
   🎰 SLOT REEL — light beam через barabany во время spin
   ═══════════════════════════════ */
.slot-panel.spinning .machine::before {
  content: '';
  position: absolute;
  top: 0; left: -30%;
  width: 30%; height: 100%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 213, 106, 0.18) 50%,
    transparent 100%);
  filter: blur(8px);
  pointer-events: none;
  animation: slotLightBeam 1.8s ease-in-out infinite;
  z-index: 3;
}
@keyframes slotLightBeam {
  0%, 80% { left: -30%; opacity: 0; }
  85%     { opacity: 1; }
  100%    { left: 130%; opacity: 0; }
}

/* ═══════════════════════════════
   💎 NFT EDGE GLOW — outline glow по rarity для inventory & reveal
   ═══════════════════════════════ */
.nfti-tile[data-rarity="legendary"]::after,
.nft-reveal-card[data-rarity="legendary"]::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    #ffd76a, #ff5a72, #c77dff, #ffd76a);
  background-size: 300% 300%;
  filter: blur(8px);
  opacity: 0.6;
  pointer-events: none;
  z-index: -1;
  animation: nftEdgeGlowRotate 6s linear infinite;
}
.nfti-tile[data-rarity="epic"]::after,
.nft-reveal-card[data-rarity="epic"]::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, #c77dff, #ff5a72, #c77dff);
  background-size: 200% 200%;
  filter: blur(6px);
  opacity: 0.45;
  pointer-events: none;
  z-index: -1;
  animation: nftEdgeGlowRotate 8s linear infinite;
}
@keyframes nftEdgeGlowRotate {
  from { background-position: 0% 50%;   }
  to   { background-position: 200% 50%; }
}

/* ═══════════════════════════════
   🎯 SCREEN TRANSITIONS — direction-aware slide
   ═══════════════════════════════ */
.screen.active.slide-from-right {
  animation: screenSlideFromRight 0.32s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.screen.active.slide-from-left {
  animation: screenSlideFromLeft 0.32s cubic-bezier(0.34, 1.2, 0.64, 1);
}
@keyframes screenSlideFromRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes screenSlideFromLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0);     }
}

/* ═══════════════════════════════
   ✨ AMBIENT PARTICLES — slow drifting на главной (subtle)
   ═══════════════════════════════ */
.scr-home #screens::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1px 1px at 12% 35%, rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(1px 1px at 73% 18%, rgba(199,125,255,0.35), transparent 50%),
    radial-gradient(1px 1px at 45% 78%, rgba(255,213,106,0.4), transparent 50%),
    radial-gradient(1px 1px at 88% 62%, rgba(125,195,255,0.35), transparent 50%),
    radial-gradient(1px 1px at 22% 55%, rgba(255,255,255,0.3), transparent 50%);
  animation: ambientParticles 35s linear infinite;
}
@keyframes ambientParticles {
  from { transform: translateY(0); }
  to   { transform: translateY(-15vh); }
}

/* ═══════════════════════════════
   🎁 NFT REVEAL — corner sparkles + halo
   ═══════════════════════════════ */
.nft-reveal-card {
  position: relative;
}
.nft-reveal-card[data-rarity="legendary"] .nft-reveal-glow {
  background: radial-gradient(circle,
    rgba(255, 213, 106, 0.85) 0%,
    rgba(255, 90, 114, 0.5) 30%,
    transparent 70%);
  animation: revealGlowMega 2.4s ease-in-out infinite;
}
@keyframes revealGlowMega {
  0%, 100% { opacity: 0.55; transform: scale(0.95); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* ═══════════════════════════════
   🪙 COIN BALANCE — отблеск при tap
   ═══════════════════════════════ */
.b-item.ms:active::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.45) 0%,
    transparent 70%);
  pointer-events: none;
  animation: balanceTapBurst 0.4s ease-out;
}
@keyframes balanceTapBurst {
  0%   { opacity: 0;   transform: scale(0.5); }
  40%  { opacity: 1;   transform: scale(1);   }
  100% { opacity: 0;   transform: scale(1.4); }
}

/* ═══════════════════════════════
   🌟 BOTTOM NAV — ambient breath на бэкграунде
   ═══════════════════════════════ */
.tabbar,
nav.tabbar,
#tabbar {
  position: relative;
}
.tabbar::after,
nav.tabbar::after,
#tabbar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(199, 125, 255, 0.4) 30%,
    rgba(255, 213, 106, 0.45) 50%,
    rgba(199, 125, 255, 0.4) 70%,
    transparent 100%);
  pointer-events: none;
  animation: navTopAccentBreathe 4s ease-in-out infinite alternate;
}
@keyframes navTopAccentBreathe {
  from { opacity: 0.5; }
  to   { opacity: 1;   }
}

/* ═══════════════════════════════
   🎨 INPUT FIELDS — premium frame on focus
   ═══════════════════════════════ */
.crash-stake-input:focus,
.topup-input:focus,
.dice-target-input:focus,
input[type="number"]:focus {
  background: rgba(255, 213, 106, 0.08);
  border-color: rgba(255, 213, 106, 0.7) !important;
  box-shadow:
    0 0 0 3px rgba(255, 213, 106, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.35),
    inset 0 0 8px rgba(255, 213, 106, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .crash-stage[data-phase="flying"]::before,
  .crash-stage[data-phase="crashed"]::after,
  .slot-panel.spinning .machine::before,
  .nfti-tile[data-rarity="legendary"]::after,
  .nfti-tile[data-rarity="epic"]::after,
  .nft-reveal-card[data-rarity="legendary"]::after,
  .nft-reveal-card[data-rarity="epic"]::after,
  .screen.active.slide-from-right,
  .screen.active.slide-from-left,
  .scr-home #screens::before,
  .nft-reveal-card[data-rarity="legendary"] .nft-reveal-glow,
  .b-item.ms:active::before,
  .tabbar::after {
    animation: none !important;
  }
}

/* ═══════════════════════════════
   🎬 LOTTIE LAYER — rocket+explosion поверх Crash сцены
   ═══════════════════════════════ */
.crash-lottie-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}
.crash-lottie-rocket,
.crash-lottie-explode {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
.crash-lottie-rocket svg,
.crash-lottie-explode svg {
  max-width: 80%;
  max-height: 80%;
  filter: drop-shadow(0 0 24px rgba(255, 213, 106, 0.45));
}
.crash-stage[data-phase="flying"] .crash-lottie-rocket {
  opacity: 1;
}
.crash-stage[data-phase="crashed"] .crash-lottie-explode {
  opacity: 1;
  animation: lottieExplodeFade 1.6s ease-out forwards;
}
@keyframes lottieExplodeFade {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.85); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1);  }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); }
}

/* Скрываем старую SVG-ракету когда Lottie работает */
.crash-stage.lottie-on .crash-rocket,
.crash-stage.lottie-on .crash-rocket-glow {
  opacity: 0;
  transition: opacity 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .crash-lottie-rocket,
  .crash-lottie-explode { display: none; }
  .crash-stage.lottie-on .crash-rocket,
  .crash-stage.lottie-on .crash-rocket-glow { opacity: 1; }
}

/* Betting phase: ракета — статичный первый кадр Lottie (без CSS-эффектов). */
.crash-stage[data-phase="betting"] .crash-lottie-rocket { opacity: 1; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  🚀  PHASE 10 — Crash Stage Cinematic Upgrade                     ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══ 1. Глубинный атмосферный градиент снизу — "земля далеко внизу" ═══ */
.crash-stage::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 35%;
  background: linear-gradient(to top,
    rgba(20, 0, 30, 0.55) 0%,
    rgba(60, 0, 60, 0.18) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* ═══ 2. Boundary-glow rim — рамка сцены реагирует на полёт ═══ */
.crash-stage {
  position: relative;
  isolation: isolate;
}
.crash-stage[data-phase="flying"] {
  box-shadow:
    inset 0 0 60px rgba(255, 213, 106, 0.12),
    inset 0 0 120px rgba(199, 125, 255, 0.06);
  animation: stageRimGlow 4s ease-in-out infinite;
}
.crash-stage[data-tier="med"] {
  box-shadow:
    inset 0 0 80px rgba(255, 213, 106, 0.18),
    inset 0 0 160px rgba(255, 90, 114, 0.08) !important;
}
.crash-stage[data-tier="high"] {
  box-shadow:
    inset 0 0 100px rgba(255, 90, 114, 0.30),
    inset 0 0 200px rgba(199, 125, 255, 0.15) !important;
}
.crash-stage[data-tier="elite"] {
  box-shadow:
    inset 0 0 140px rgba(255, 90, 114, 0.45),
    inset 0 0 240px rgba(255, 213, 106, 0.25) !important;
  animation: stageRimGlowElite 1.2s ease-in-out infinite !important;
}
@keyframes stageRimGlow {
  0%, 100% { filter: brightness(1);    }
  50%      { filter: brightness(1.05); }
}
@keyframes stageRimGlowElite {
  0%, 100% { filter: brightness(1) saturate(1);     }
  50%      { filter: brightness(1.15) saturate(1.3); }
}

/* ═══ 3. Reflection-glow под центральной зоной (launch pad ощущение) ═══ */
.crash-stage[data-phase="betting"]::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 10%;
  width: 60%; height: 18%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(255, 213, 106, 0.30) 0%,
    rgba(199, 125, 255, 0.12) 40%,
    transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 1;
  animation: padReflectionPulse 2.4s ease-in-out infinite;
}
@keyframes padReflectionPulse {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scaleX(0.92); }
  50%      { opacity: 1;   transform: translateX(-50%) scaleX(1.08); }
}

/* ═══ 4. Сетка горизонта — едва видимая, "сцена в пространстве" ═══ */
.crash-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(transparent 95%, rgba(199, 125, 255, 0.06) 100%) 0 0/100% 16px,
    linear-gradient(90deg, transparent 95%, rgba(255, 213, 106, 0.04) 100%) 0 0/16px 100%;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
  opacity: 0.4;
  z-index: 0;
}

/* ═══ 5. Tier-checkpoint flash — рамка-вспышка при пересечении порогов ═══ */
.crash-stage.tier-cross-flash::before {
  background: linear-gradient(to top,
    rgba(255, 213, 106, 0.55) 0%,
    rgba(255, 90, 114, 0.35) 50%,
    transparent 100%);
  animation: tierCrossFlash 0.45s ease-out;
}
@keyframes tierCrossFlash {
  0%   { opacity: 0;   }
  30%  { opacity: 1;   }
  100% { opacity: 0.55;}
}

/* ═══ 6. Parallax meteor — редкий метеор пролетает по диагонали ═══ */
.crash-stage[data-phase="flying"] .crash-lottie-layer::before {
  content: '';
  position: absolute;
  top: 15%; left: -10%;
  width: 60px; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 213, 106, 0.9) 50%,
    transparent 100%);
  filter: blur(0.5px) drop-shadow(0 0 6px rgba(255, 213, 106, 0.7));
  transform: rotate(20deg);
  animation: meteorFly 7s linear infinite;
  opacity: 0;
}
@keyframes meteorFly {
  0%   { opacity: 0; left: -10%; top: 15%; }
  5%   { opacity: 1;                       }
  20%  { opacity: 1; left: 110%; top: 55%; }
  21%, 100% { opacity: 0;                  }
}

/* ═══ 7. Multiplier display — premium лайт по rarity-тиру ═══ */
.crash-stage[data-tier="high"] .cmd-num,
.crash-stage[data-tier="elite"] .cmd-num {
  text-shadow:
    0 0 16px rgba(255, 213, 106, 0.7),
    0 0 32px rgba(255, 90, 114, 0.55),
    0 0 48px rgba(199, 125, 255, 0.4);
  animation: multTextPulse 0.8s ease-in-out infinite alternate;
}
@keyframes multTextPulse {
  from { filter: brightness(1);    }
  to   { filter: brightness(1.25); }
}

/* ═══ 8. Vignette corners — углы темнее, центр ярче (фокус на ракете) ═══ */
.crash-stage > .crash-mult-display {
  position: relative;
  z-index: 5;
}

/* ═══ 9. Status text glow — мягкое свечение под текстом статуса ═══ */
.crash-status {
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 6;
}

@media (prefers-reduced-motion: reduce) {
  .crash-stage[data-phase="flying"],
  .crash-stage[data-tier="elite"],
  .crash-stage[data-phase="betting"]::after,
  .crash-stage.tier-cross-flash::before,
  .crash-stage[data-phase="flying"] .crash-lottie-layer::before,
  .crash-stage[data-tier="high"] .cmd-num,
  .crash-stage[data-tier="elite"] .cmd-num {
    animation: none !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  ✨  PHASE 11 — Refined Crash Scene (less noise, more focus)      ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Гасим сетку горизонта — слишком шумит вокруг ракеты */
.crash-stage::after {
  background: none !important;
  opacity: 0 !important;
}

/* Гасим метеор — конкурирует с ракетой как движущийся объект */
.crash-stage[data-phase="flying"] .crash-lottie-layer::before {
  display: none !important;
}

/* ─── Центральная виньетка — мягкий фокус на ракете ─── */
.crash-stage > .crash-svg-wrap::after,
.crash-stage::before {
  /* Используем уже существующий ::before атм. градиент — добавляем второй слой viewbox */
}

/* Premium виньетка через box-shadow inset, мягкая */
.crash-stage {
  box-shadow: inset 0 0 180px 40px rgba(0, 0, 0, 0.45);
}
.crash-stage[data-phase="flying"] {
  box-shadow:
    inset 0 0 180px 40px rgba(0, 0, 0, 0.4),
    inset 0 0 80px rgba(255, 213, 106, 0.10);
}

/* ─── Multiplier number — премиальный gradient + depth ─── */
.cmd-num {
  background: linear-gradient(180deg, #fff5d6 0%, #ffd76a 45%, #ff9d4d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(255, 213, 106, 0.55))
          drop-shadow(0 0 24px rgba(255, 90, 114, 0.25));
  font-weight: 900;
  letter-spacing: -0.02em;
}
.crash-stage[data-tier="med"] .cmd-num {
  background: linear-gradient(180deg, #fff 0%, #ffd76a 30%, #ff5a72 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.crash-stage[data-tier="high"] .cmd-num,
.crash-stage[data-tier="elite"] .cmd-num {
  background: linear-gradient(180deg, #fff 0%, #ff5a72 40%, #c77dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 14px rgba(255, 90, 114, 0.85))
          drop-shadow(0 0 36px rgba(199, 125, 255, 0.55));
}
.cmd-x {
  color: rgba(255, 213, 106, 0.7);
  text-shadow: 0 0 12px rgba(255, 213, 106, 0.4);
  font-weight: 500;
}

/* ─── Engine plume — золотой подсвет под Lottie-ракетой в полёте ─── */
.crash-stage[data-phase="flying"] .crash-lottie-rocket::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 38%; height: 22%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center top,
    rgba(255, 213, 106, 0.65) 0%,
    rgba(255, 90, 114, 0.4) 30%,
    rgba(199, 125, 255, 0.18) 60%,
    transparent 85%);
  filter: blur(16px);
  pointer-events: none;
  z-index: -1;
  animation: enginePlumeFlicker 0.35s ease-in-out infinite alternate;
}
@keyframes enginePlumeFlicker {
  from { opacity: 0.75; transform: translateX(-50%) scaleY(0.9);  }
  to   { opacity: 1;    transform: translateX(-50%) scaleY(1.15); }
}

/* ─── Status text — premium подача ─── */
.crash-status {
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow:
    0 0 18px rgba(0, 0, 0, 0.7),
    0 1px 3px rgba(0, 0, 0, 0.6);
}
.crash-stage[data-phase="betting"] .crash-status {
  /* Solid цвет вместо gradient text-clip (тот ломался в Telegram WebView
     и текст становился чёрным на тёмном фоне — нечитаемо). */
  color: #ffd76a;
  text-shadow:
    0 0 12px rgba(0, 0, 0, 0.85),
    0 1px 3px rgba(0, 0, 0, 0.7);
}

/* ─── Players badge — живой "пульс" вокруг точки ─── */
.crash-players-badge .cpb-dot {
  position: relative;
}
.crash-players-badge .cpb-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(126, 217, 87, 0.45);
  animation: cpbDotPulse 2s ease-out infinite;
  z-index: -1;
}
@keyframes cpbDotPulse {
  0%   { opacity: 0.7; transform: scale(1);   }
  100% { opacity: 0;   transform: scale(2.2); }
}

/* ─── Round-id badge — тонкий металлический акцент ─── */
.crash-round-badge {
  background: linear-gradient(135deg,
    rgba(20, 8, 30, 0.78) 0%,
    rgba(40, 15, 55, 0.78) 100%) !important;
  border: 1px solid rgba(255, 213, 106, 0.18) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ─── Мягкое смещение фона сцены под мультипликатор (был hard tint) ─── */
.crash-stage[data-phase="flying"] {
  --crash-mult: 1;
  transition: filter 0.3s ease-out;
  filter: hue-rotate(calc((var(--crash-mult, 1) - 1) * 2deg))
          saturate(calc(1 + (var(--crash-mult, 1) - 1) * 0.04));
}

@media (prefers-reduced-motion: reduce) {
  .crash-stage[data-phase="flying"] .crash-lottie-rocket::after,
  .crash-players-badge .cpb-dot::after {
    animation: none !important;
  }
  .crash-stage[data-phase="flying"] { filter: none !important; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  💠  PHASE 12 — Action Buttons & History Polish                   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ─── Cashout button: премиальный live state ─── */
.crash-action-btn.cash-out {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, #ffd76a 0%, #ff9d4d 45%, #ff5a72 100%) !important;
  color: #1a0820 !important;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow:
    0 8px 24px rgba(255, 90, 114, 0.35),
    0 4px 12px rgba(255, 213, 106, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 6px rgba(0, 0, 0, 0.18);
}
/* Sheen sweep по кнопке */
.crash-action-btn.cash-out::after {
  content: '';
  position: absolute;
  top: 0; left: -40%;
  width: 30%; height: 100%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%);
  filter: blur(6px);
  animation: cashoutSheen 2.4s linear infinite;
  pointer-events: none;
}
@keyframes cashoutSheen {
  0%, 85% { left: -40%; }
  100%    { left: 140%; }
}
/* Cashout-кнопка на high-tier — пульсация выше */
.crash-stage[data-tier="high"] ~ .crash-controls .crash-action-btn.cash-out,
.crash-stage[data-tier="elite"] ~ .crash-controls .crash-action-btn.cash-out {
  animation: cashoutUrgentPulse 0.6s ease-in-out infinite alternate;
}
@keyframes cashoutUrgentPulse {
  from { box-shadow:
    0 8px 24px rgba(255, 90, 114, 0.35),
    0 4px 12px rgba(255, 213, 106, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4); }
  to   { box-shadow:
    0 10px 36px rgba(255, 90, 114, 0.65),
    0 6px 20px rgba(199, 125, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.55); }
}

/* ─── Place-bet button: тонкий gradient + tactile depth ─── */
.crash-action-btn.place-bet {
  background: linear-gradient(135deg, #c77dff 0%, #7b3cf0 100%) !important;
  color: #fff !important;
  font-weight: 800;
  box-shadow:
    0 6px 18px rgba(123, 60, 240, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.crash-action-btn.place-bet:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 10px 26px rgba(199, 125, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.crash-action-btn.place-bet:disabled {
  background: linear-gradient(135deg, rgba(80, 50, 110, 0.5), rgba(50, 30, 80, 0.5)) !important;
  color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ─── History strip chips — premium ─── */
.crash-history-strip > * {
  position: relative;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}
.crash-history-strip > [data-tier="low"]   {
  background: rgba(255, 90, 114, 0.18) !important;
  color: #ffb1b1 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 90, 114, 0.35);
}
.crash-history-strip > [data-tier="mid"]   {
  background: rgba(255, 213, 106, 0.18) !important;
  color: #ffd76a !important;
  box-shadow: inset 0 0 0 1px rgba(255, 213, 106, 0.4);
}
.crash-history-strip > [data-tier="high"]  {
  background: linear-gradient(135deg, rgba(199, 125, 255, 0.3), rgba(255, 213, 106, 0.25)) !important;
  color: #fff !important;
  box-shadow:
    inset 0 0 0 1px rgba(199, 125, 255, 0.5),
    0 0 12px rgba(199, 125, 255, 0.25);
}
.crash-history-strip > [data-tier="elite"] {
  background: linear-gradient(135deg, #ff5a72, #c77dff, #ffd76a) !important;
  background-size: 200% 200% !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    0 0 16px rgba(255, 90, 114, 0.4);
  animation: histEliteShine 4s linear infinite;
}
@keyframes histEliteShine {
  from { background-position: 0% 50%;   }
  to   { background-position: 200% 50%; }
}
.crash-history-strip > *:hover {
  transform: translateY(-1px) scale(1.04);
}

/* ─── History grid (карточка "Последние раунды") — отполировать чипы ─── */
.crash-history-grid > * {
  border-radius: 10px !important;
  font-weight: 800 !important;
  padding: 8px 6px !important;
  transition: transform 0.15s ease;
}
.crash-history-grid > *:active { transform: scale(0.95); }

/* ─── Bet-summary chip (compact mode после place bet) ─── */
.crash-bet-summary {
  background: linear-gradient(135deg,
    rgba(255, 213, 106, 0.14) 0%,
    rgba(199, 125, 255, 0.12) 100%) !important;
  border: 1px solid rgba(255, 213, 106, 0.32) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.crash-bet-summary .crash-bet-summary-stake { color: #ffd76a; font-weight: 800; }
.crash-bet-summary .crash-bet-summary-auto  { color: rgba(255, 255, 255, 0.7); }

/* ─── Auto-cashout input — премиальный фрейм ─── */
.crash-auto-mult {
  background: rgba(20, 8, 30, 0.5) !important;
  border: 1px solid rgba(199, 125, 255, 0.3) !important;
  border-radius: 8px;
  padding: 4px 8px;
  color: #ffd76a !important;
  font-weight: 700;
  transition: all 0.2s;
}
.crash-auto-mult:focus:not(:disabled) {
  border-color: rgba(255, 213, 106, 0.65) !important;
  background: rgba(255, 213, 106, 0.06) !important;
  box-shadow: 0 0 0 3px rgba(255, 213, 106, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .crash-action-btn.cash-out::after,
  .crash-stage[data-tier="high"] ~ .crash-controls .crash-action-btn.cash-out,
  .crash-stage[data-tier="elite"] ~ .crash-controls .crash-action-btn.cash-out,
  .crash-history-strip > [data-tier="elite"] {
    animation: none !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  🎛  PHASE 13 — Stake Controls + Countdown Ring + Auto-marker     ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ─── Stake row контейнер: premium фрейм ─── */
.crash-stake-row {
  background: linear-gradient(135deg,
    rgba(28, 12, 40, 0.6) 0%,
    rgba(40, 18, 55, 0.5) 100%);
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.crash-stake-label {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* ─── +/- кнопки: чище, с feedback ─── */
.crash-stake-btn {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.04)) !important;
  border: 1px solid rgba(255, 213, 106, 0.18) !important;
  color: #ffd76a !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  transition: all 0.15s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.crash-stake-btn:hover:not(:disabled) {
  background: linear-gradient(135deg,
    rgba(255, 213, 106, 0.15),
    rgba(255, 213, 106, 0.06)) !important;
  border-color: rgba(255, 213, 106, 0.4) !important;
  transform: translateY(-1px);
}
.crash-stake-btn:active:not(:disabled) {
  transform: scale(0.94);
  background: rgba(255, 213, 106, 0.12) !important;
}

/* ─── Главный input ставки ─── */
.crash-stake-input {
  background: rgba(10, 4, 18, 0.6) !important;
  border: 1px solid rgba(255, 213, 106, 0.22) !important;
  border-radius: 10px !important;
  color: #ffd76a !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  text-align: center;
  transition: all 0.2s ease;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.35),
    0 0 0 0 rgba(255, 213, 106, 0);
}
.crash-stake-input:focus {
  border-color: rgba(255, 213, 106, 0.7) !important;
  background: rgba(255, 213, 106, 0.06) !important;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.35),
    0 0 0 3px rgba(255, 213, 106, 0.18) !important;
}

/* ─── Preset-чипы: tier-метки (10/50/100/MAX) ─── */
.crash-stake-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.crash-stake-presets > * {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  transition: all 0.15s ease;
  cursor: pointer;
}
.crash-stake-presets > *:hover {
  background: rgba(255, 213, 106, 0.12) !important;
  border-color: rgba(255, 213, 106, 0.35) !important;
  color: #ffd76a !important;
  transform: translateY(-1px);
}
.crash-stake-presets > *:active { transform: scale(0.94); }
.crash-stake-presets > *.active {
  background: linear-gradient(135deg,
    rgba(255, 213, 106, 0.22),
    rgba(255, 90, 114, 0.15)) !important;
  border-color: rgba(255, 213, 106, 0.55) !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(255, 213, 106, 0.25);
}

/* ─── Countdown ring: gradient stroke + urgency ─── */
.cdr-track {
  stroke: rgba(255, 255, 255, 0.08) !important;
  stroke-width: 4 !important;
  fill: none;
}
.cdr-progress {
  stroke: url(#cdrGrad, var(--gold, #ffd76a)) !important;
  stroke-width: 4 !important;
  stroke-linecap: round;
  fill: none;
  filter: drop-shadow(0 0 6px rgba(255, 213, 106, 0.55));
  transition: stroke 0.3s ease;
}
.crash-stage[data-countdown="urgent"] .cdr-progress {
  stroke: #ff5a72 !important;
  filter: drop-shadow(0 0 10px rgba(255, 90, 114, 0.75));
  animation: cdrUrgent 0.65s ease-in-out infinite alternate;
}
@keyframes cdrUrgent {
  from { filter: drop-shadow(0 0 8px  rgba(255, 90, 114, 0.5));  }
  to   { filter: drop-shadow(0 0 16px rgba(255, 90, 114, 0.95)); }
}
/* Countdown text — компактный (был 38px → перекрывал мульт). */
.crash-countdown-text {
  background: linear-gradient(180deg, #fff 0%, #ffd76a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 1.5px;
}
.crash-stage[data-countdown="urgent"] .crash-countdown-text {
  background: linear-gradient(180deg, #fff 0%, #ff5a72 100%);
  -webkit-background-clip: text;
  background-clip: text;
  animation: cdrTextPulse 0.65s ease-in-out infinite alternate;
}
@keyframes cdrTextPulse {
  from { transform: translateX(-50%) scale(1);    }
  to   { transform: translateX(-50%) scale(1.12); }
}

/* ─── Auto-cashout marker on stage ─── */
.crash-auto-marker, [id*="autoMarker"], [id*="AutoMarker"] {
  background: linear-gradient(135deg, rgba(199, 125, 255, 0.22), rgba(255, 90, 114, 0.18));
  border: 1px solid rgba(199, 125, 255, 0.5);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.02em;
  box-shadow:
    0 4px 12px rgba(123, 60, 240, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ─── crash-controls общая обёртка: чуть тоньше gap ─── */
.crash-controls.bet-locked .crash-stake-row {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .crash-stage[data-countdown="urgent"] .cdr-progress,
  .crash-stage[data-countdown="urgent"] .crash-countdown-text { animation: none !important; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  🌌  PHASE 14 — Crash Stage Full Rebuild (single scene, Lottie)   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ─── Mover: обёртка, которой управляет JS (translate + rotate + scale).
       Lottie-rocket внутри неё заполняет всё пространство. ─── */
.crash-lottie-rocket-mover {
  position: absolute;
  left: 50%; top: 50%;
  width: 62%;
  aspect-ratio: 1 / 1;
  max-width: 320px;
  max-height: 60%;
  transform: translate(-50%, -50%);
  transition: transform 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
  will-change: transform;
  z-index: 4;
  pointer-events: none;
}
.crash-lottie-rocket-mover .crash-lottie-rocket {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  left: auto; top: auto;
  transform: none;
  opacity: 1;
}
.crash-lottie-rocket-mover .crash-lottie-rocket svg {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  filter: drop-shadow(0 0 28px rgba(255, 213, 106, 0.45))
          drop-shadow(0 0 14px rgba(255, 90, 114, 0.25));
}

/* На crashed-фазе ракета "застывает" — JS не двигает её, фокус на explosion */
.crash-stage[data-phase="crashed"] .crash-lottie-rocket-mover {
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

/* ─── Тонкая, чистая атмосфера (без старого SVG) ─── */
.crash-stage {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 55% at 50% 95%,
      rgba(255, 90, 114, 0.18) 0%,
      rgba(199, 125, 255, 0.10) 35%,
      transparent 70%),
    radial-gradient(ellipse 100% 80% at 50% 30%,
      rgba(30, 12, 55, 0.45) 0%,
      transparent 70%),
    linear-gradient(180deg, #0a0414 0%, #14081e 50%, #1a0a26 100%);
}

/* Slow drifting ambient stars поверх фона */
.crash-stage > .crash-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.crash-stage > .crash-bg .crash-bg-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 200px at 30% 30%, rgba(255, 213, 106, 0.10), transparent 70%),
    radial-gradient(circle 240px at 70% 70%, rgba(199, 125, 255, 0.08), transparent 70%);
  filter: blur(40px);
}
.crash-stage > .crash-bg .crash-stars {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 8% 18%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 24% 70%, rgba(255,213,106,0.6), transparent 60%),
    radial-gradient(1px 1px at 42% 12%, rgba(199,125,255,0.65), transparent 60%),
    radial-gradient(1px 1px at 58% 45%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1px 1px at 72% 88%, rgba(255,90,114,0.6), transparent 60%),
    radial-gradient(1px 1px at 88% 22%, rgba(255,213,106,0.7), transparent 60%),
    radial-gradient(1px 1px at 14% 92%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1px 1px at 64% 6%, rgba(199,125,255,0.5), transparent 60%);
  animation: starsDrift 60s linear infinite;
}
@keyframes starsDrift {
  from { transform: translateY(0); }
  to   { transform: translateY(-30px); }
}
.crash-stage > .crash-bg .crash-stars .cs-mid {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(0.6px 0.6px at 19% 38%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(0.6px 0.6px at 51% 78%, rgba(255,213,106,0.4), transparent 60%),
    radial-gradient(0.6px 0.6px at 81% 52%, rgba(199,125,255,0.45), transparent 60%);
  animation: starsDrift 90s linear infinite reverse;
  opacity: 0.7;
}

/* HUD-элементы поверх всего */
.crash-mult-display,
.crash-players-badge,
.crash-round-badge,
.crash-status,
.crash-auto-marker {
  z-index: 8;
}

/* Mult display: чуть выше центра, чтобы не перекрывать ракету в её движении */
.crash-mult-display {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}

/* Status text — снизу, отступ безопасный */
.crash-status {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  text-align: center;
  font-size: 13px;
  padding: 0 16px;
  max-width: 92%;
}

/* Auto-marker — справа снизу, не мешает */
.crash-auto-marker {
  position: absolute;
  right: 12px; bottom: 14px;
  z-index: 8;
}

/* Engine plume — теперь привязан к mover, движется вместе с ракетой */
.crash-stage[data-phase="flying"] .crash-lottie-rocket-mover::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 50%; height: 50%;
  transform: translate(-50%, 30%);
  /* Circular gradient + border-radius — нет хард-rect-границ.
     center at 50% 30% — свечение под соплом, мягкое во все стороны. */
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%,
    rgba(255, 213, 106, 0.55) 0%,
    rgba(255, 90, 114, 0.32) 25%,
    rgba(199, 125, 255, 0.14) 55%,
    transparent 85%);
  filter: blur(18px);
  pointer-events: none;
  z-index: -1;
}

/* Скрыть, если оставались legacy-элементы */
.csw-scene, .crash-rocket, .crash-rocket-glow,
.crash-godrays, .crash-caustics, .crash-pulse-rings,
.crash-grid, .crash-grain, .crash-horizon, .crash-smoke-ring,
.crash-trajectory {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .crash-lottie-rocket-mover { transition: none !important; }
  .crash-stage > .crash-bg .crash-stars,
  .crash-stage > .crash-bg .crash-stars .cs-mid,
  .crash-stage[data-phase="flying"] .crash-lottie-rocket-mover::after { animation: none !important; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  🎁  PHASE 15 — Potential-win + Liftoff + Cashout bursts          ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ─── Potential-win chip: сразу под мультипликатором ─── */
.crash-potential-win {
  position: absolute;
  left: 50%; top: calc(100% + 12px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  background: linear-gradient(135deg,
    rgba(255, 213, 106, 0.18) 0%,
    rgba(255, 90, 114, 0.12) 100%);
  border: 1px solid rgba(255, 213, 106, 0.42);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 6px 18px rgba(255, 90, 114, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  z-index: 9;
  animation: cpwBreathe 2.4s ease-in-out infinite;
}
.cpw-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.cpw-val {
  font-size: 18px;
  font-weight: 900;
  background: linear-gradient(180deg, #fff 0%, #ffd76a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 4px rgba(255, 213, 106, 0.4));
}
@keyframes cpwBreathe {
  0%, 100% { box-shadow:
    0 6px 18px rgba(255, 90, 114, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12); }
  50%      { box-shadow:
    0 8px 26px rgba(255, 213, 106, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.18); }
}

/* ─── Liftoff burst: золотая вспышка снизу-вверх при старте полёта ─── */
.crash-liftoff-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
}
.crash-liftoff-burst.fire {
  animation: liftoffBurst 1.1s ease-out forwards;
}
.crash-liftoff-burst.fire::before {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 60%; height: 100%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 213, 106, 0.5) 18%,
    rgba(255, 90, 114, 0.3) 40%,
    rgba(199, 125, 255, 0.18) 65%,
    transparent 85%);
  filter: blur(8px);
  animation: liftoffBurstShape 1.1s ease-out forwards;
}
.crash-liftoff-burst.fire::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 8%;
  width: 8px; height: 8px;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 0 24px 8px rgba(255, 255, 255, 0.9),
    0 0 48px 16px rgba(255, 213, 106, 0.7),
    0 0 80px 32px rgba(255, 90, 114, 0.45);
  animation: liftoffSpark 1.1s ease-out forwards;
}
@keyframes liftoffBurst {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes liftoffBurstShape {
  0%   { transform: translateX(-50%) scaleY(0.15); opacity: 1; }
  35%  { transform: translateX(-50%) scaleY(1.1);  opacity: 1; }
  100% { transform: translateX(-50%) scaleY(1.4);  opacity: 0; }
}
@keyframes liftoffSpark {
  0%   { transform: translate(-50%, 0)      scale(0.4); opacity: 1; }
  30%  { transform: translate(-50%, -20%)   scale(2.5); opacity: 1; }
  100% { transform: translate(-50%, -110%)  scale(0.3); opacity: 0; }
}

/* ─── Cashout success burst: золотой flash + radial waves ─── */
.crash-cashout-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  opacity: 0;
}
.crash-cashout-burst.fire {
  animation: cashoutBurstFade 0.9s ease-out forwards;
}
.crash-cashout-burst.fire::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 213, 106, 0.35) 20%,
    rgba(255, 90, 114, 0.18) 50%,
    transparent 80%);
  animation: cashoutBurstFlash 0.9s ease-out forwards;
}
.crash-cashout-burst.fire::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 20px;
  margin-left: -10px; margin-top: -10px;
  border-radius: 50%;
  border: 3px solid rgba(255, 213, 106, 0.9);
  animation: cashoutBurstRing 0.9s ease-out forwards;
}
@keyframes cashoutBurstFade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes cashoutBurstFlash {
  0%   { opacity: 0;   transform: scale(0.6); }
  20%  { opacity: 1;   transform: scale(1.1); }
  100% { opacity: 0;   transform: scale(1.6); }
}
@keyframes cashoutBurstRing {
  0%   { transform: scale(0.4); opacity: 1;   border-width: 4px; }
  100% { transform: scale(12);  opacity: 0;   border-width: 1px; }
}

/* ─── Status text — phase-specific подача (solid colors, не gradient-clip) ─── */
.crash-status.loss {
  color: #ff8aa8;
  text-shadow:
    0 0 12px rgba(0, 0, 0, 0.85),
    0 1px 3px rgba(0, 0, 0, 0.7);
}
.crash-stage[data-phase="flying"] .crash-status {
  color: #ffd76a;
  text-shadow:
    0 0 18px rgba(255, 213, 106, 0.45),
    0 1px 3px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .crash-potential-win,
  .crash-liftoff-burst.fire,
  .crash-liftoff-burst.fire::before,
  .crash-liftoff-burst.fire::after,
  .crash-cashout-burst.fire,
  .crash-cashout-burst.fire::before,
  .crash-cashout-burst.fire::after { animation: none !important; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  👻  PHASE 16 — Rocket opacity choreography                       ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Плавный transition при изменении opacity (JS пишет частоту 60Hz, CSS сглаживает) */
.crash-lottie-rocket-mover {
  transition:
    transform 0.25s cubic-bezier(0.34, 1.2, 0.64, 1),
    opacity 0.18s ease-out;
}

/* Betting: ракета полностью скрыта, JS уже выставляет opacity 0 — CSS подстраховывает */
.crash-stage[data-phase="betting"] .crash-lottie-rocket-mover {
  opacity: 0 !important;
}

/* Crashed: плавный fade-out (ускоренный) */
.crash-stage[data-phase="crashed"] .crash-lottie-rocket-mover {
  opacity: 0 !important;
  transition: opacity 0.35s ease-out, transform 0.4s ease-in;
}

/* На high/elite — ракета чуть "светится" поверх opacity (живая, не выгоревшая) */
.crash-stage[data-tier="high"] .crash-lottie-rocket-mover,
.crash-stage[data-tier="elite"] .crash-lottie-rocket-mover {
  animation: rocketHighGhost 1.6s ease-in-out infinite alternate;
}
@keyframes rocketHighGhost {
  from { filter: brightness(1)    saturate(1)   drop-shadow(0 0 16px rgba(255, 213, 106, 0.25)); }
  to   { filter: brightness(1.18) saturate(1.3) drop-shadow(0 0 28px rgba(255, 90, 114, 0.6))
                                                drop-shadow(0 0 14px rgba(199, 125, 255, 0.4)); }
}

/* Engine plume следует opacity ракеты через CSS inheritance —
   делаем плюм дочерним эффектом mover'а, opacity автоматически тянется */
.crash-lottie-rocket-mover::after {
  /* opacity inherited через стэкинг-контекст mover'а — становится 0 когда ракета скрыта */
  transition: opacity 0.2s ease-out;
}

/* Edge sharpening — при низкой opacity ракета "призрачная", при высокой — резкая */
.crash-lottie-rocket-mover .crash-lottie-rocket svg {
  transition: filter 0.3s ease-out;
}
.crash-stage[data-tier="elite"] .crash-lottie-rocket svg {
  filter: drop-shadow(0 0 32px rgba(255, 213, 106, 0.55))
          drop-shadow(0 0 18px rgba(255, 90, 114, 0.35))
          contrast(1.08) saturate(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .crash-lottie-rocket-mover { transition: opacity 0.2s linear !important; }
  .crash-stage[data-tier="high"] .crash-lottie-rocket-mover,
  .crash-stage[data-tier="elite"] .crash-lottie-rocket-mover { animation: none !important; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  🎨  PHASE 17 — Rocket cinematic upgrade: trail + tint + tremor   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ─── 1. Engine plume → trail-streak: вытягивается с ростом мульта ─── */
.crash-stage[data-phase="flying"] .crash-lottie-rocket-mover::after {
  /* Базовый размер из Phase 14: w 42%, h 26%. Дополняем тиром: */
  transition:
    height 0.4s ease-out,
    width 0.4s ease-out,
    filter 0.4s ease-out,
    opacity 0.2s ease-out;
}
.crash-stage[data-tier="low"] .crash-lottie-rocket-mover::after {
  height: 30%;
  filter: blur(14px);
}
.crash-stage[data-tier="med"] .crash-lottie-rocket-mover::after {
  height: 48%;
  width: 50%;
  filter: blur(18px) saturate(1.15);
}
.crash-stage[data-tier="high"] .crash-lottie-rocket-mover::after {
  height: 75%;
  width: 58%;
  filter: blur(22px) saturate(1.35) brightness(1.12);
}
.crash-stage[data-tier="elite"] .crash-lottie-rocket-mover::after {
  height: 110%;
  width: 68%;
  filter: blur(26px) saturate(1.55) brightness(1.25);
  background: radial-gradient(ellipse at center top,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 213, 106, 0.7) 18%,
    rgba(255, 90, 114, 0.5) 40%,
    rgba(199, 125, 255, 0.3) 65%,
    transparent 88%) !important;
}

/* ─── 2. Tier hue/saturation shift: ракета "греется" с мультом ─── */
.crash-lottie-rocket-mover .crash-lottie-rocket {
  transition: filter 0.5s ease-out;
}
.crash-stage[data-tier="med"] .crash-lottie-rocket {
  filter: hue-rotate(-8deg) saturate(1.1) brightness(1.05);
}
.crash-stage[data-tier="high"] .crash-lottie-rocket {
  filter: hue-rotate(-16deg) saturate(1.2) brightness(1.12);
}
.crash-stage[data-tier="elite"] .crash-lottie-rocket {
  filter: hue-rotate(-24deg) saturate(1.35) brightness(1.2)
          drop-shadow(0 0 12px rgba(255, 213, 106, 0.6));
}

/* ─── 3. Turbulence tremor на elite — лёгкая вибрация ─── */
.crash-stage[data-tier="elite"] .crash-lottie-rocket {
  animation: rocketEliteTremor 0.12s steps(2) infinite;
}
@keyframes rocketEliteTremor {
  0%   { transform: translate(0, 0)   rotate(0deg); }
  25%  { transform: translate(0.4px, -0.3px) rotate(0.3deg); }
  50%  { transform: translate(-0.3px, 0.4px) rotate(-0.4deg); }
  75%  { transform: translate(0.3px, 0.3px) rotate(0.2deg); }
}

/* ─── 4. Aura ring вокруг mover на high-tier — "поле энергии" ─── */
.crash-stage[data-tier="high"] .crash-lottie-rocket-mover::before,
.crash-stage[data-tier="elite"] .crash-lottie-rocket-mover::before {
  content: '';
  position: absolute;
  inset: -15%;
  border-radius: 50%;
  background: radial-gradient(circle,
    transparent 50%,
    rgba(255, 213, 106, 0.18) 65%,
    rgba(255, 90, 114, 0.12) 80%,
    transparent 100%);
  filter: blur(12px);
  pointer-events: none;
  z-index: -2;
  animation: rocketAura 2.4s ease-in-out infinite;
}
.crash-stage[data-tier="elite"] .crash-lottie-rocket-mover::before {
  background: radial-gradient(circle,
    transparent 45%,
    rgba(255, 90, 114, 0.32) 62%,
    rgba(199, 125, 255, 0.22) 80%,
    transparent 100%);
  animation: rocketAura 1.4s ease-in-out infinite;
}
@keyframes rocketAura {
  0%, 100% { opacity: 0.6; transform: scale(0.92); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

/* ─── 5. Spark particles trail (псевдо-эмиттер CSS) ─── */
.crash-stage[data-phase="flying"] .crash-lottie-rocket-mover {
  --spark-color: rgba(255, 213, 106, 0.65);
}
.crash-stage[data-tier="high"] .crash-lottie-rocket-mover { --spark-color: rgba(255, 90, 114, 0.75); }
.crash-stage[data-tier="elite"] .crash-lottie-rocket-mover { --spark-color: rgba(255, 255, 255, 0.85); }

@media (prefers-reduced-motion: reduce) {
  .crash-stage[data-tier="elite"] .crash-lottie-rocket,
  .crash-stage[data-tier="high"] .crash-lottie-rocket-mover::before,
  .crash-stage[data-tier="elite"] .crash-lottie-rocket-mover::before { animation: none !important; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  🤫  PHASE 18 — Subdue rocket during flight (focus on text)       ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Снимаем все tier-amplifications с Phase 17 — ракета не должна
   конкурировать с mult и status text во время полёта. */
.crash-stage[data-tier="med"]  .crash-lottie-rocket,
.crash-stage[data-tier="high"] .crash-lottie-rocket,
.crash-stage[data-tier="elite"] .crash-lottie-rocket {
  filter: none !important;
  animation: none !important;
}
.crash-stage[data-tier="high"]  .crash-lottie-rocket-mover,
.crash-stage[data-tier="elite"] .crash-lottie-rocket-mover {
  animation: none !important;
}
.crash-stage[data-tier="high"]  .crash-lottie-rocket-mover::before,
.crash-stage[data-tier="elite"] .crash-lottie-rocket-mover::before {
  display: none !important;
}

/* Engine plume оставляем, но тоже приглушаем размер на high-tier */
.crash-stage[data-tier="high"]  .crash-lottie-rocket-mover::after,
.crash-stage[data-tier="elite"] .crash-lottie-rocket-mover::after {
  height: 42% !important;
  width: 46% !important;
  filter: blur(16px) saturate(1.1) !important;
}

/* Лёгкий drop-shadow вместо filter-усиления — чтобы ракета не была плоской */
.crash-lottie-rocket svg {
  filter: drop-shadow(0 0 16px rgba(255, 213, 106, 0.25)) !important;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  ⚡  PHASE 19 — Performance optimization (нагрев → охлаждение)    ║
   ║                                                                    ║
   ║  Снижаем GPU-нагрузку:                                             ║
   ║  • backdrop-filter blur → solid alpha (blur очень дорогой)         ║
   ║  • filter: drop-shadow в keyframes → static                        ║
   ║  • Замедляем/убираем infinite-animations на blur-элементах         ║
   ║  • Stage containment: paint + layout                               ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* CSS containment — изолируем repaint/reflow внутри ключевых контейнеров */
.crash-stage {
  contain: layout paint;
}
.crash-lottie-layer { contain: strict; will-change: contents; }
.crash-history-strip { contain: layout paint; }

/* ─── 1. Снимаем backdrop-filter с не-критичных элементов ─── */
.crash-potential-win,
.crash-bet-summary,
.crash-round-badge,
.crash-auto-marker,
.crash-players-badge {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Компенсируем потерю стекла — увеличиваем непрозрачность bg */
.crash-potential-win { background: rgba(28, 12, 40, 0.85) !important; }
.crash-bet-summary   { background: rgba(28, 12, 40, 0.85) !important; }
.crash-round-badge   { background: rgba(20, 8, 30, 0.88) !important; }

/* ─── 2. Engine plume: убираем infinite flicker (0.35s было ОЧЕНЬ часто) ─── */
.crash-stage[data-phase="flying"] .crash-lottie-rocket-mover::after {
  animation: none !important;
  opacity: 0.92;
  /* Уменьшаем blur — это главный жор GPU */
  filter: blur(8px) !important;
  transition: none !important;
}

/* ─── 3. Простой статичный bg-glow вместо blur(40px)-слоёв ─── */
.crash-stage > .crash-bg .crash-bg-glow {
  filter: none !important;
  background:
    radial-gradient(circle 200px at 30% 30%, rgba(255, 213, 106, 0.07), transparent 70%),
    radial-gradient(circle 240px at 70% 70%, rgba(199, 125, 255, 0.05), transparent 70%) !important;
}

/* ─── 4. Stars drift — медленнее и без второго слоя (cs-mid) ─── */
.crash-stage > .crash-bg .crash-stars { animation: starsDrift 180s linear infinite !important; }
.crash-stage > .crash-bg .crash-stars .cs-mid { display: none !important; }

/* ─── 5. Ambient particles на home — отключаем (тяжёлая большая radial-gradient анимация) ─── */
.scr-home #screens::before { display: none !important; }

/* ─── 6. Cashout button sheen — реже играем (раз в 4s вместо 2.4s) ─── */
.crash-action-btn.cash-out::after {
  animation-duration: 4s !important;
}
.crash-action-btn.cash-out {
  /* На high/elite-tier убираем infinite-pulse — слишком интенсивно */
  animation: none !important;
}
.crash-stage[data-tier="high"] ~ .crash-controls .crash-action-btn.cash-out,
.crash-stage[data-tier="elite"] ~ .crash-controls .crash-action-btn.cash-out {
  animation: none !important;
}

/* ─── 7. Tabbar accent breathe — убираем (всегда видим, infinite) ─── */
.tabbar::after, nav.tabbar::after, #tabbar::after {
  animation: none !important;
  opacity: 0.7;
}

/* ─── 8. Players dot pulse — реже (2s → 4s) ─── */
.crash-players-badge .cpb-dot::after {
  animation-duration: 4s !important;
}

/* ─── 9. Potential-win breathe → static (не критично, читаемость не теряется) ─── */
.crash-potential-win { animation: none !important; }

/* ─── 10. History strip elite shine — реже (4s → 12s) ─── */
.crash-history-strip > [data-tier="elite"] {
  animation-duration: 12s !important;
}

/* ─── 11. NFT edge glow rotate — реже (6/8s → 16s) ─── */
.nfti-tile[data-rarity="legendary"]::after,
.nft-reveal-card[data-rarity="legendary"]::after { animation-duration: 16s !important; }
.nfti-tile[data-rarity="epic"]::after,
.nft-reveal-card[data-rarity="epic"]::after { animation-duration: 20s !important; }

/* ─── 12. Slot light beam — реже (1.8s → 4s) ─── */
.slot-panel.spinning .machine::before {
  animation-duration: 4s !important;
  filter: blur(4px) !important;
}

/* ─── 13. Multiplier text — статичный glow, без infinite brightness pulse ─── */
.crash-stage[data-tier="high"] .cmd-num,
.crash-stage[data-tier="elite"] .cmd-num {
  animation: none !important;
}

/* ─── 14. Высоко-частотный hue-rotate фона убираем (filter на крупном элементе) ─── */
.crash-stage[data-phase="flying"] { filter: none !important; }

/* ─── 15. Stage rim glow keyframes — статичный shadow (Phase 10) ─── */
.crash-stage[data-phase="flying"],
.crash-stage[data-tier="elite"] {
  animation: none !important;
}

/* ─── 16. Энерго-aura и tremor (Phase 17) уже выключены, но contain'им rocket ─── */
.crash-lottie-rocket-mover { contain: layout paint; }

/* ─── 17. Tier-cross flash — оставляем (one-shot), но без brightness keyframe ─── */
/* Уже one-shot, OK */

/* ─── 18. Phase 9 ambient (home, market, etc.) — отключаем тяжёлые ─── */
.scr-home #screens::before,
.crash-stage > .crash-bg .crash-stars .cs-mid { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  /* В режиме reduce — отключаем ВСЁ что осталось */
  .crash-stage > .crash-bg .crash-stars,
  .crash-history-strip > [data-tier="elite"],
  .crash-action-btn.cash-out::after,
  .crash-players-badge .cpb-dot::after,
  .nfti-tile[data-rarity="legendary"]::after,
  .nfti-tile[data-rarity="epic"]::after,
  .nft-reveal-card[data-rarity="legendary"]::after,
  .nft-reveal-card[data-rarity="epic"]::after,
  .slot-panel.spinning .machine::before {
    animation: none !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  🎰  PHASE 20 — Slot machine premium polish                       ║
   ║  Perf-aware: без blur-keyframes, всё на transform/opacity.        ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ─── Machine frame: премиум 3D-обводка + dark glass body ─── */
.sp-machine.machine.slot-5x3 {
  position: relative;
  background:
    linear-gradient(180deg,
      rgba(40, 18, 55, 0.95) 0%,
      rgba(20, 8, 30, 0.95) 100%);
  border-radius: 22px;
  padding: 16px 14px 12px;
  border: 1px solid rgba(255, 213, 106, 0.18);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 213, 106, 0.06),
    inset 0 -2px 8px rgba(0, 0, 0, 0.4);
  contain: layout paint;
}

/* Премиум-обводка корпуса (золотая нить по краю) */
.sp-machine.machine.slot-5x3::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 18px;
  border: 1px solid rgba(255, 213, 106, 0.12);
  pointer-events: none;
}

/* ─── LED bar сверху — статичный gold accent ─── */
.sp-machine .machine-leds {
  position: relative;
  height: 6px;
  margin: -8px -4px 12px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 213, 106, 0.55) 20%,
    rgba(255, 90, 114, 0.65) 50%,
    rgba(255, 213, 106, 0.55) 80%,
    transparent 100%);
  border-radius: 3px;
  filter: drop-shadow(0 0 6px rgba(255, 213, 106, 0.35));
}

/* ─── Reels well: deeper, glassy ─── */
.sp-machine .reels.reels-5x3 {
  position: relative;
  background:
    linear-gradient(180deg,
      rgba(8, 3, 16, 0.95) 0%,
      rgba(14, 6, 25, 0.95) 100%);
  border-radius: 14px;
  padding: 8px;
  gap: 6px;
  box-shadow:
    inset 0 3px 12px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 213, 106, 0.1),
    inset 0 -1px 3px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

/* Тонкие scan-lines на барабанах (decorative depth) */
.sp-machine .reels.reels-5x3::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent 3px,
    rgba(255, 255, 255, 0.012) 3px,
    rgba(255, 255, 255, 0.012) 4px
  );
  pointer-events: none;
  z-index: 2;
}

/* Window overlay: премиум vignette frame */
.sp-machine .window-overlay {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.45) 0%,
      transparent 18%,
      transparent 82%,
      rgba(0, 0, 0, 0.45) 100%),
    radial-gradient(ellipse 100% 60% at 50% 50%,
      transparent 60%,
      rgba(0, 0, 0, 0.35) 100%);
  border-radius: 14px;
  z-index: 3;
}

/* ─── Отдельные барабаны: shadow между ─── */
.sp-machine .reel {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    inset 0 2px 6px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  position: relative;
}

/* Motion blur при spin (без filter — через box-shadow trick) */
.slot-panel.spinning .reel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.25) 0%,
    transparent 12%,
    transparent 88%,
    rgba(0, 0, 0, 0.25) 100%);
  pointer-events: none;
  z-index: 4;
}

/* ─── Symbols: tier-based glow + крутой подача ─── */
.sp-machine .symbol {
  transition: transform 0.18s ease, filter 0.2s ease;
}
.sp-machine .symbol .sym-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Gem/Bell — средний тир, золотой подсвет */
.sp-machine .symbol.sym-gem .sym-svg,
.sp-machine .symbol.sym-bell .sym-svg {
  filter:
    drop-shadow(0 0 4px rgba(255, 213, 106, 0.45))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Wild/Scatter — высокий тир, насыщенный */
.sp-machine .symbol.sym-wild .sym-svg {
  filter:
    drop-shadow(0 0 6px rgba(199, 125, 255, 0.6))
    drop-shadow(0 0 12px rgba(255, 90, 114, 0.35));
}
.sp-machine .symbol.sym-scatter .sym-svg {
  filter:
    drop-shadow(0 0 6px rgba(255, 213, 106, 0.7))
    drop-shadow(0 0 16px rgba(255, 90, 114, 0.4));
}

/* Win-highlight: ячейка-победитель пульсирует scale (НЕ filter — perf) */
.sp-machine .symbol.win,
.sp-machine .symbol.is-win {
  animation: slotSymbolWin 0.55s ease-out 2 alternate;
  z-index: 4;
}
@keyframes slotSymbolWin {
  from { transform: scale(1)    translateZ(0); }
  to   { transform: scale(1.18) translateZ(0); }
}

/* ─── Cascade mult badge: премиум pill ─── */
.cascade-mult-badge {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 10;
  padding: 6px 14px;
  background: linear-gradient(135deg, #ffd76a 0%, #ff5a72 100%);
  color: #1a0820;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.02em;
  border-radius: 999px;
  box-shadow:
    0 6px 18px rgba(255, 90, 114, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 4px rgba(0, 0, 0, 0.15);
}

/* ─── sp-result (Готов к прокруту / win text) ─── */
.sp-result {
  text-align: center;
  margin: 12px 0 10px;
  position: relative;
  z-index: 5;
}
.sp-result-title {
  font-weight: 900;
  font-size: 16px;
  background: linear-gradient(180deg, #fff 0%, #ffd76a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sp-result-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.03em;
  margin-top: 4px;
}
/* WIN state title — gold→coral */
.sp-result.win .sp-result-title {
  background: linear-gradient(180deg, #fff5d6 0%, #ffd76a 50%, #ff5a72 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ─── Spin button: премиум gold (cf cashout style) ─── */
.spin-btn-big {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 14px 18px;
  background: linear-gradient(135deg, #ffd76a 0%, #ff9d4d 45%, #ff5a72 100%) !important;
  color: #1a0820 !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  letter-spacing: 0.02em;
  border: none !important;
  border-radius: 14px !important;
  box-shadow:
    0 8px 20px rgba(255, 90, 114, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 6px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.12s ease;
}
.spin-btn-big:hover:not(:disabled) {
  transform: translateY(-1px);
}
.spin-btn-big:active:not(:disabled) {
  transform: scale(0.97);
}
.spin-btn-big:disabled {
  background: linear-gradient(135deg, rgba(80, 50, 110, 0.55), rgba(50, 30, 80, 0.55)) !important;
  color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* ─── Last-win info chip + Quick toggle ─── */
.last-win-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.last-win-info b {
  color: #ffd76a;
  font-weight: 800;
}
.quick-spin-toggle {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.quick-spin-toggle:hover {
  background: rgba(255, 213, 106, 0.12);
  border-color: rgba(255, 213, 106, 0.35);
  color: #ffd76a;
}
.quick-spin-toggle.on {
  background: linear-gradient(135deg, rgba(255, 213, 106, 0.25), rgba(255, 90, 114, 0.18));
  border-color: rgba(255, 213, 106, 0.55);
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 213, 106, 0.25);
}

/* ─── Auto-spin button ─── */
.slot-auto-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.slot-auto-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(199, 125, 255, 0.22), rgba(123, 60, 240, 0.18));
  border: 1px solid rgba(199, 125, 255, 0.42);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border-radius: 999px;
  transition: all 0.15s ease;
}
.slot-auto-btn:hover {
  background: linear-gradient(135deg, rgba(199, 125, 255, 0.35), rgba(123, 60, 240, 0.28));
  transform: translateY(-1px);
}
.slot-auto-btn:active { transform: scale(0.96); }
.slot-auto-btn.active {
  background: linear-gradient(135deg, #c77dff, #7b3cf0);
  box-shadow: 0 6px 14px rgba(199, 125, 255, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .sp-machine .symbol.win,
  .sp-machine .symbol.is-win { animation: none !important; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  🩹  PHASE 21 — Bug fixes (status text, rocket clip, perf-keep)   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Soft mask на lottie-layer — ракета и плюм фейдятся к краям, не режутся жёстко */
/* Маска на lottie-layer убрана: она создавала резкий диагональный артефакт
   когда engine-plume пересекал границу gradient'а. Сцена уже имеет
   overflow:hidden, этого достаточно. */
.crash-lottie-layer {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Эталонная безопасность: countdown text всегда центрирован, без скачков */
.crash-countdown-text {
  white-space: nowrap;
  text-align: center;
  display: none;
}
.crash-stage[data-phase="betting"] .crash-countdown-text {
  display: block;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  💠  PHASE 22 — NFT Upgrader visual polish (Crash-level)          ║
   ║  Perf-aware: без infinite-keyframes на blur, всё на transform.   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ─── Source-card: премиум glass-фрейм ─── */
.nfup-src-row {
  background: linear-gradient(135deg,
    rgba(28, 12, 40, 0.85) 0%,
    rgba(40, 18, 55, 0.85) 100%);
  border: 1px solid rgba(255, 213, 106, 0.25);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 12px;
}
.nfup-src-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}
.nfup-src-art {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 213, 106, 0.18), rgba(255, 90, 114, 0.12));
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  box-shadow:
    0 4px 10px rgba(255, 90, 114, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.nfup-src-art img {
  width: 100%; height: 100%; object-fit: contain;
  border-radius: inherit;
}
.nfup-src-name {
  font-weight: 800;
  font-size: 14px;
  color: #fff;
}
.nfup-src-floor {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
}
.nfup-src-floor b { color: #ffd76a; font-weight: 800; }

/* ─── Dial wrap: премиальный фрейм ─── */
.nfup-dial-wrap {
  position: relative;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 213, 106, 0.06) 0%,
    rgba(28, 12, 40, 0.4) 50%,
    transparent 90%);
  border-radius: 50%;
  padding: 12px;
  margin: 16px auto;
}

/* Subtle outer ring */
.nfup-dial-wrap::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid rgba(255, 213, 106, 0.12);
  pointer-events: none;
}

/* ─── Readout chip (chance + mult) ─── */
.nfup-readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 6px auto 12px;
}
.nfup-chance {
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #fff 0%, #ffd76a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* fallback цвет если background-clip не работает в WebView */
  color: #ffd76a;
}
.nfup-chance-suf {
  font-size: 22px;
  color: rgba(255, 213, 106, 0.7);
  font-weight: 700;
}
.nfup-mult {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
}
.nfup-mult b {
  color: #ff5a72;
  font-weight: 800;
  font-size: 14px;
}

/* ─── Targets label ─── */
.nfup-targets-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 14px 0 8px;
}

/* ─── Target tiles: премиум подача с chance-tier ─── */
.nfup-targets-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 2px;
}
.nfup-target {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(28, 12, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.nfup-target:hover {
  background: rgba(40, 18, 55, 0.75);
  border-color: rgba(255, 213, 106, 0.25);
  transform: translateX(2px);
}
.nfup-target.active {
  background: linear-gradient(135deg,
    rgba(255, 213, 106, 0.18),
    rgba(255, 90, 114, 0.12));
  border-color: rgba(255, 213, 106, 0.55);
  box-shadow: 0 4px 14px rgba(255, 213, 106, 0.18);
}
.nfup-target-art {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.nfup-target-art img {
  width: 100%; height: 100%; object-fit: contain; border-radius: inherit;
}
.nfup-target-info { flex: 1; min-width: 0; }
.nfup-target-name {
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nfup-target-floor {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
}
.nfup-target-chance {
  font-weight: 900;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
/* Chance-tier цвета */
.nfup-target-chance[data-tier="high"]   {
  background: rgba(106, 217, 87, 0.18);
  color: #6ed987;
  border: 1px solid rgba(106, 217, 87, 0.4);
}
.nfup-target-chance[data-tier="mid"]    {
  background: rgba(255, 213, 106, 0.18);
  color: #ffd76a;
  border: 1px solid rgba(255, 213, 106, 0.4);
}
.nfup-target-chance[data-tier="low"]    {
  background: rgba(255, 157, 77, 0.18);
  color: #ff9d4d;
  border: 1px solid rgba(255, 157, 77, 0.4);
}
.nfup-target-chance[data-tier="risky"]  {
  background: rgba(255, 90, 114, 0.2);
  color: #ff5a72;
  border: 1px solid rgba(255, 90, 114, 0.45);
}

/* ─── Spin button (премиум gold, как Crash cashout) ─── */
.btn.upgrade.nfup-spin,
.btn.nfup-spin {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 14px 18px;
  background: linear-gradient(135deg, #ffd76a 0%, #ff9d4d 45%, #ff5a72 100%) !important;
  color: #1a0820 !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  letter-spacing: 0.02em;
  border: none !important;
  border-radius: 14px !important;
  box-shadow:
    0 8px 22px rgba(255, 90, 114, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 6px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.12s ease;
  margin-top: 12px;
}
.btn.upgrade.nfup-spin:hover:not(:disabled),
.btn.nfup-spin:hover:not(:disabled) { transform: translateY(-1px); }
.btn.upgrade.nfup-spin:active:not(:disabled),
.btn.nfup-spin:active:not(:disabled) { transform: scale(0.97); }
.btn.upgrade.nfup-spin:disabled,
.btn.nfup-spin:disabled {
  background: linear-gradient(135deg, rgba(80, 50, 110, 0.55), rgba(50, 30, 80, 0.55)) !important;
  color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* ─── Warn-text: премиум pill ─── */
.nfup-warn {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(255, 90, 114, 0.10);
  border: 1px solid rgba(255, 90, 114, 0.3);
  border-radius: 10px;
  font-size: 12px;
  text-align: center;
  color: rgba(255, 200, 200, 0.85);
}
.nfup-warn b { color: #ff5a72; font-weight: 800; }

/* ─── Result steps: cinematic ─── */
.nft-upgrade-step {
  padding: 16px 14px 14px;
}
.nfup-result-burst {
  position: relative;
  width: 100%;
  text-align: center;
  padding: 20px 0;
}
.nfup-result-burst::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 180px; height: 180px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 213, 106, 0.4) 0%,
    rgba(255, 90, 114, 0.25) 35%,
    transparent 70%);
  z-index: -1;
}
.nfup-result-burst.nfup-burn::before {
  background: radial-gradient(circle,
    rgba(255, 90, 114, 0.4) 0%,
    rgba(123, 60, 240, 0.25) 35%,
    transparent 70%);
}
.nfup-result-icon {
  font-size: 64px;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
}
.nfup-result-title {
  text-align: center;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 8px 0 4px;
}
.nfup-result-title.win {
  color: #ffd76a;
  text-shadow: 0 0 18px rgba(255, 213, 106, 0.55);
}
.nfup-result-title.burn {
  color: #ff5a72;
  text-shadow: 0 0 18px rgba(255, 90, 114, 0.5);
}
.nfup-result-sub {
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  margin-bottom: 16px;
}
.nfup-result-sub b { color: #ff8aa8; font-weight: 800; }

/* Win NFT-карта */
.nfup-result-nft {
  background: linear-gradient(135deg,
    rgba(255, 213, 106, 0.15) 0%,
    rgba(255, 90, 114, 0.10) 100%);
  border: 1px solid rgba(255, 213, 106, 0.4);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  box-shadow:
    0 6px 18px rgba(255, 90, 114, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.nfup-result-art {
  width: 96px; height: 96px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 56px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.nfup-result-art img {
  width: 100%; height: 100%; object-fit: contain; border-radius: inherit;
}
.nfup-result-name {
  font-weight: 900;
  font-size: 16px;
  color: #fff;
  text-align: center;
}
.nfup-result-floor {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}
.nfup-result-floor b { color: #ffd76a; font-weight: 800; font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .nfup-target,
  .btn.upgrade.nfup-spin,
  .btn.nfup-spin { transition: none !important; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  🖥  PHASE 23 — Upgrader desktop layout fix                       ║
   ║  Кнопка "Запустить" sticky внизу + компактные пропорции           ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Card: фиксированная высота + flexbox для footer-area */
.nft-upgrade-card {
  display: flex;
  flex-direction: column;
  max-height: 88vh !important;
  padding: 20px 18px 0 !important;  /* bottom 0, footer добавит свой */
}

/* Шаги — gridable scrollable region */
.nft-upgrade-step {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;  /* для корректного scroll внутри flex */
  overflow-y: auto;
  padding: 0 0 14px !important;
}

/* Dial — компактнее (240 → 200px) */
.nfup-dial-wrap {
  max-width: 200px !important;
  margin: 10px auto 14px !important;
}

/* Source card — компактнее padding */
.nfup-src-row {
  padding: 10px 12px !important;
}
.nfup-src-art {
  width: 48px !important; height: 48px !important;
  font-size: 24px !important;
}

/* Target list — макс высота, чтобы dial+targets всегда влезали */
.nfup-targets-list {
  max-height: 200px !important;
  overflow-y: auto;
}

/* Sticky-footer: spin button + warn всегда видимы */
.nft-upgrade-step .btn.upgrade.nfup-spin,
.nft-upgrade-step .btn.nfup-spin,
.nft-upgrade-step .nfup-warn {
  flex-shrink: 0;
}
.nft-upgrade-step .nfup-warn {
  margin-top: 8px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
}

/* Скроллбар внутри targets-list — тонкий */
.nfup-targets-list::-webkit-scrollbar { width: 4px; }
.nfup-targets-list::-webkit-scrollbar-thumb {
  background: rgba(199, 125, 255, 0.4); border-radius: 2px;
}

/* На широких экранах (desktop) — даём карте больше height */
@media (min-width: 768px) {
  .nft-upgrade-card {
    max-height: 90vh !important;
    max-width: 460px !important;
  }
  .nfup-dial-wrap {
    max-width: 220px !important;
  }
  .nfup-targets-list {
    max-height: 220px !important;
  }
}

/* Mobile — ещё компактнее dial если viewport низкий */
@media (max-height: 700px) {
  .nfup-dial-wrap { max-width: 170px !important; margin: 6px auto 10px !important; }
  .nfup-targets-list { max-height: 160px !important; }
  .nfup-chance { font-size: 26px !important; }
  .nfup-chance-suf { font-size: 18px !important; }
}