/* css/battlepass.css — страница сезонного Battle Pass. */

.bp-main { padding: 110px 0 60px; min-height: 70vh; }
/* На телефоне шапка ниже, а 110px превращались в треть экрана пустоты до карточки сезона */
@media (max-width: 760px) { .bp-main { padding: 24px 0 40px; } }

.bp-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: 22px 24px;
  border-radius: 20px;
  border: 1px solid rgba(232,197,105,.25);
  background:
    radial-gradient(130% 180% at 0% 0%, rgba(232,197,105,.12), transparent 55%),
    linear-gradient(175deg, rgba(22,19,30,.94), rgba(8,7,12,.96));
  box-shadow: 0 14px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
@media (max-width: 760px) { .bp-hero { flex-direction: column; align-items: stretch; } }
.bp-eyebrow { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(232,197,105,.8); }
.bp-title { font-size: 40px; font-weight: 800; letter-spacing: .02em; margin: 4px 0 6px; }
@media (max-width: 760px) { .bp-title { font-size: 30px; } }
.bp-season { font-size: 14px; color: rgba(246,236,208,.9); }
.bp-days { font-size: 12px; color: rgba(200,203,255,.6); margin-top: 2px; }

.bp-hero-right { text-align: right; min-width: 260px; }
@media (max-width: 760px) { .bp-hero-right { text-align: left; } }
.bp-tier-big { font-size: 15px; color: rgba(245,245,255,.9); }
.bp-tier-big b { color: #f6ecd0; font-size: 20px; }
.bp-tier-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; margin: 8px 0 6px; }
.bp-tier-bar i { display: block; height: 100%; background: linear-gradient(90deg, #9a742c, #e8c569, #f6ecd0); border-radius: 6px; }
.bp-tier-nums { font-size: 11px; color: rgba(200,203,255,.6); margin-bottom: 10px; }
.bp-premium-on { font-size: 13px; color: #e8c569; font-weight: 650; }

.bp-guest {
  margin-top: 18px; padding: 16px 18px; border-radius: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px solid rgba(232,197,105,.25); background: rgba(232,197,105,.05);
  font-size: 13.5px; color: rgba(246,236,208,.9);
}

.bp-track-wrap { margin-top: 20px; }
.bp-track-legend {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  margin-bottom: 10px; font-size: 11.5px; color: rgba(200,203,255,.7);
}
.bp-legend-row { display: flex; align-items: center; gap: 6px; }
.bp-legend-dot { width: 10px; height: 10px; border-radius: 3px; }
.bp-legend-dot--free { background: rgba(255,255,255,.25); }
.bp-legend-dot--prem { background: linear-gradient(135deg, #e8c569, #9a742c); }
.bp-legend-row--ready { margin-left: auto; }
.bp-ready-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 650;
  color: #171224; background: linear-gradient(135deg, #f6ecd0, #e8c569);
  box-shadow: 0 0 14px rgba(232,197,105,.45);
}

/* ===== Дорожка сезона =====
   Это путь, а не таблица: узлы тиров нанизаны на линию, пройденный отрезок золотой,
   предметные тиры — вехи. Раньше здесь был ряд одинаковых серых плиток «+65 / +70 / +75»,
   по которым нельзя было понять ни где ты находишься, ни ради чего идти дальше. */
.bp-track {
  display: flex; gap: 0; overflow-x: auto;
  padding: 4px 2px 16px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.bp-col {
  flex: 0 0 116px;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  gap: 8px;
  padding: 0 4px;
  scroll-snap-align: center;
}

/* Узел на линии: номер тира, слева и справа — отрезки пути */
.bp-node {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 30px;
}
.bp-node::before, .bp-node::after {
  content: ""; position: absolute; top: 50%; height: 2px;
  background: rgba(255,255,255,.10); transform: translateY(-50%);
}
.bp-node::before { left: -8px; right: 50%; }
.bp-node::after  { left: 50%; right: -8px; }
.bp-col:first-child .bp-node::before,
.bp-col:last-child .bp-node::after { display: none; }

.bp-node-num {
  position: relative; z-index: 1;
  min-width: 30px; height: 30px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: rgba(246,236,208,.75);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,10,20,.96);
}

/* Пройденный отрезок пути — золотой: видно, докуда дошёл */
.bp-col.is-reached .bp-node::before,
.bp-col.is-reached .bp-node::after { background: linear-gradient(90deg, #9a742c, #e8c569); }
.bp-col.is-reached .bp-node-num { color: #f6ecd0; border-color: rgba(232,197,105,.55); }

/* Вехи — предметные тиры: крупнее и заметнее, ради них идут дальше */
.bp-col.is-milestone .bp-node-num {
  min-width: 38px; height: 34px; font-size: 13px;
  border-color: rgba(232,197,105,.5);
  background: radial-gradient(120% 140% at 50% 0%, rgba(232,197,105,.18), rgba(10,10,20,.96));
}

/* «Вы здесь» */
.bp-col.is-current .bp-node-num {
  color: #171224;
  background: linear-gradient(135deg, #f6ecd0, #e8c569);
  border-color: #e8c569;
  box-shadow: 0 0 0 4px rgba(232,197,105,.18), 0 0 16px rgba(232,197,105,.6);
}
.bp-col.is-current .bp-node::after { animation: bpPulse 2.4s ease-in-out infinite; }
@keyframes bpPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ===== Ячейки наград ===== */
.bp-cell {
  border-radius: 14px; padding: 10px 8px;
  min-height: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  text-align: center;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bp-cell--premium {
  border-color: rgba(232,197,105,.28);
  background: radial-gradient(120% 140% at 50% 100%, rgba(232,197,105,.08), rgba(255,255,255,.02));
}
.bp-cell.is-item {
  border-style: dashed;
  border-color: rgba(232,197,105,.45);
  background: radial-gradient(120% 140% at 50% 0%, rgba(232,197,105,.12), rgba(255,255,255,.02));
}
.bp-cell.is-ready {
  border-color: rgba(232,197,105,.75); border-style: solid;
  box-shadow: 0 0 18px rgba(232,197,105,.28);
  transform: translateY(-1px);
}
.bp-cell.is-claimed { opacity: .5; }
.bp-cell.is-locked  { opacity: .62; }
.bp-cell.is-future  { opacity: .72; }

.bp-reward { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.15; }
.bp-reward-ico { opacity: .95; }
.bp-reward-main { font-size: 14px; font-weight: 700; color: #f2f3fb; font-variant-numeric: tabular-nums; }
.bp-reward-sub {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(200,203,255,.55);
}
.bp-rarity {
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor;
}
.bp-rarity--common { color: #9aa0b5; }
.bp-rarity--rare   { color: #7fb2ff; }
.bp-rarity--epic   { color: #c48cff; }
.bp-rarity--legendary { color: #e8c569; }
.bp-rarity--mythic { color: #ff8fa3; }

.bp-claim { padding: 6px 12px; font-size: 11px; }
.bp-claimed {
  display: inline-flex; align-items: center; gap: 4px;
  color: #35d49b; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
}
.bp-lock {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(232,197,105,.9);
  border: 1px solid rgba(232,197,105,.35);
  background: rgba(232,197,105,.07);
}
.bp-lock:hover { border-color: rgba(232,197,105,.7); }

/* Кнопка премиума, к которой ведёт клик по замку */
#bpBuyPremium.is-pulled { animation: bpPull 1.4s ease-in-out; }
@keyframes bpPull {
  0%, 100% { box-shadow: 0 0 0 rgba(232,197,105,0); }
  30%, 70% { box-shadow: 0 0 0 6px rgba(232,197,105,.25), 0 0 26px rgba(232,197,105,.7); }
}

@media (max-width: 760px) {
  .bp-col { flex: 0 0 104px; }
  .bp-cell { min-height: 88px; padding: 9px 7px; }
  .bp-track { padding-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-col.is-current .bp-node::after,
  #bpBuyPremium.is-pulled { animation: none; }
}

.bp-note { margin-top: 16px; font-size: 12px; color: rgba(200,203,255,.55); max-width: 640px; }