/* Вариант 1 «Классика+»: рулетка в hero, фильтр кейсов, таймер акции */

/* hero: карточка с рулеткой вместо парящих кейсов */
.hero-roll {
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px;
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,180,58,.05);
  position: relative; overflow: hidden;
}
.hero-roll::before {
  content: ''; position: absolute; inset: -40% -20% auto auto; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255,180,58,.16), transparent 70%); pointer-events: none;
}
.hr-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; }
.hr-head img { filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); }
.hr-head b { font-size: 20px; }
.hr-head .tag { margin-left: auto; font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 7px; }

.roll-window {
  position: relative; overflow: hidden; height: 120px; border-radius: 14px;
  background: var(--bg); border: 1px solid var(--line);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.roll-pointer {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%);
  background: var(--gold-grad); z-index: 3; box-shadow: 0 0 14px rgba(255,180,58,.7);
}
.roll-pointer::before, .roll-pointer::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  border: 8px solid transparent;
}
.roll-pointer::before { top: 0; border-top-color: var(--accent); }
.roll-pointer::after { bottom: 0; border-bottom-color: var(--accent); }
.roll-track { display: flex; gap: 10px; padding: 14px; will-change: transform; }
.roll-item {
  flex: 0 0 112px; height: 90px; border-radius: 12px; background: var(--bg-3);
  border: 1px solid var(--line); display: grid; place-items: center; padding: 6px; position: relative;
}
.roll-item::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px; }
.roll-item.r-gold::after   { background: var(--gold-grad); }
.roll-item.r-red::after    { background: #ff4b5c; }
.roll-item.r-pink::after   { background: #e64bd6; }
.roll-item.r-purple::after { background: #8d4bff; }
.roll-item img { max-width: 96px; max-height: 70px; object-fit: contain; }
.roll-item.win { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,180,58,.35); }

.hr-foot { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.hr-result { color: var(--muted); font-size: 14px; }

/* скрытие по фильтру — плавно */
.case-card.is-hidden { display: none; }

/* баннер-таймер */
.promo-timer {
  display: grid; grid-template-columns: 1fr auto auto; gap: 32px; align-items: center;
  padding: 34px 40px; border-radius: var(--r-lg); border: 1px solid rgba(255,180,58,.3);
  background:
    radial-gradient(500px 200px at 0% 50%, rgba(255,180,58,.14), transparent 70%),
    linear-gradient(120deg, var(--panel-2), var(--bg-3));
}
.promo-timer h2 { font-size: 26px; margin: 0 0 6px; }
.promo-timer p { color: var(--muted); margin: 0; }
.pt-clock { display: flex; gap: 10px; }
.pt-clock div {
  min-width: 74px; text-align: center; background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 8px;
}
.pt-clock b { display: block; font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pt-clock span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 1024px) {
  .promo-timer { grid-template-columns: 1fr; gap: 20px; padding: 28px; }
}
@media (max-width: 720px) {
  .roll-item { flex-basis: 92px; height: 78px; }
  .roll-item img { max-width: 80px; max-height: 58px; }
  .roll-window { height: 106px; }
  .pt-clock div { flex: 1; min-width: 0; }
  .promo-timer .btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .hero-roll { padding: 16px; }
  .hr-head { gap: 10px; }
  .hr-head img { width: 54px; height: auto; }
  .hr-head b { font-size: 17px; }
  .hr-head .tag { display: none; }
  .hr-foot .btn { width: 100%; justify-content: center; }
  .pt-clock b { font-size: 24px; }
}