/* =====================================================
   Стрик и награды: живое пламя, неделя-точки, вехи,
   достижения. Анимации мягкие, уважают reduced-motion.
   ===================================================== */

/* -------- Пламя (общее) -------- */
.flame-svg {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 92%;
  animation: flameWobble 1.7s ease-in-out infinite alternate;
}
.flame-svg.dim { animation: none; opacity: 0.75; }

@keyframes flameWobble {
  0%   { transform: scaleY(1)    scaleX(1)    rotate(-1.4deg); }
  35%  { transform: scaleY(1.06) scaleX(0.97) rotate(0.8deg); }
  70%  { transform: scaleY(0.97) scaleX(1.02) rotate(-0.5deg); }
  100% { transform: scaleY(1.04) scaleX(0.98) rotate(1.4deg); }
}

/* -------- Виджет на «Сводке» -------- */
.streak-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur) var(--ease-spring);
}
.streak-card:active { transform: scale(0.98); }

.streak-flame {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}
/* Тёплое свечение позади пламени — «дышит». */
.streak-flame::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 146, 60, 0.35), transparent 70%);
  animation: glowPulse 2.2s ease-in-out infinite;
}
.streak-flame:has(.flame-svg.dim)::before { display: none; }

@keyframes glowPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

.streak-flame-num {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(154, 52, 18, 0.55);
}

.streak-widget-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.streak-widget-title { font-size: 14px; color: var(--text-primary); }
.streak-widget-title b { font-weight: 800; }
.streak-chev { color: var(--text-muted); flex: 0 0 auto; }

/* -------- Неделя-точки -------- */
.streak-week { display: flex; gap: 7px; }
.sw-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sw-label {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}
.sw-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-style: normal;
  font-size: 9px;
  line-height: 1;
  background: var(--fill-track);
  animation: dotPop 0.4s var(--ease-spring) backwards;
  animation-delay: calc(var(--i) * 55ms);
}
.streak-week.labeled { justify-content: space-between; }
.streak-week.labeled .sw-dot { width: 26px; height: 26px; font-size: 12px; }

.sw-dot.logged {
  background: linear-gradient(180deg, #fbbf24, #f97316);
  box-shadow: 0 1px 4px rgba(249, 115, 22, 0.4);
}
.sw-dot.frozen {
  background: linear-gradient(180deg, #7dd3fc, #38bdf8);
  color: #fff;
}
.sw-dot.today {
  background: transparent;
  border: 2px dashed var(--border-strong);
  animation: dotPop 0.4s var(--ease-spring) backwards,
    todayPulse 1.8s ease-in-out infinite 0.5s;
  animation-delay: calc(var(--i) * 55ms), 0.6s;
}
.sw-dot.missed { background: var(--fill-track); opacity: 0.6; }
.sw-dot.future { background: var(--fill-track); opacity: 0.35; }

@keyframes dotPop {
  from { transform: scale(0.2); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes todayPulse {
  0%, 100% { border-color: var(--border-strong); }
  50%      { border-color: var(--color-primary); }
}

/* -------- Экран «Стрик и награды» -------- */
.streak-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 16px 24px;
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-align: center;
  overflow: hidden;
}
/* Горящая серия — тёплый рассвет за пламенем. */
.streak-hero.lit {
  border-color: rgba(249, 115, 22, 0.22);
  background:
    radial-gradient(120% 90% at 50% -20%,
      rgba(251, 191, 36, 0.18), rgba(249, 115, 22, 0.07) 55%, transparent 80%),
    var(--surface);
}
body.tg-dark-theme .streak-hero.lit {
  border-color: rgba(249, 115, 22, 0.3);
  background:
    radial-gradient(120% 90% at 50% -20%,
      rgba(251, 146, 60, 0.2), rgba(249, 115, 22, 0.06) 55%, transparent 80%),
    var(--surface);
}
.streak-hero-flame {
  position: relative;
  width: 96px;
  height: 96px;
  margin-bottom: 4px;
}
.streak-hero.lit .streak-hero-flame::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 146, 60, 0.4), transparent 65%);
  animation: glowPulse 2.2s ease-in-out infinite;
}

/* Искры: всплывают из основания пламени и тают. */
.streak-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.spark {
  position: absolute;
  left: calc(18% + var(--s) * 13%);
  bottom: 26%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fbbf24;
  opacity: 0;
  animation: sparkFloat 2.6s ease-in infinite;
  animation-delay: calc(var(--s) * 0.42s);
}
.spark:nth-child(even) { width: 3px; height: 3px; background: #fb923c; }
@keyframes sparkFloat {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  12%  { opacity: 0.9; }
  100% { transform: translate(calc((var(--s) - 2.5) * 6px), -58px) scale(0.3); opacity: 0; }
}
.streak-hero-num {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1px;
  background: linear-gradient(180deg, #fbbf24, #f97316);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.streak-hero:not(.lit) .streak-hero-num {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text-primary);
}
.streak-hero-label { font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.streak-record {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: rgba(245, 158, 11, 0.14);
  color: var(--color-accent);
  font-size: 11.5px;
  font-weight: 700;
}
.streak-record svg { width: 12px; height: 12px; }
.streak-hero-status { margin-top: 8px; font-size: 13px; color: var(--text-muted); }
.streak-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

/* Плитки: лучшая серия / всего дней / заморозка */
.streak-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: var(--spacing-md);
}
.streak-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.streak-stat b { font-size: 17px; font-weight: 800; }
.streak-stat span { font-size: 11px; color: var(--text-muted); }
.ss-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 3px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--color-accent);
  font-style: normal;
  font-size: 14px;
}
.ss-ico svg { width: 15px; height: 15px; }
.ss-ico.frost { color: #38bdf8; }

/* Карточка недели */
.streak-week-card { margin-bottom: var(--spacing-md); }
.streak-week-card .streak-week { margin-top: 12px; }
.streak-freeze-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: rgba(56, 189, 248, 0.08);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.sfn-ico { flex: 0 0 auto; font-style: normal; color: #38bdf8; }

/* Веха */
.ms-card { margin-bottom: var(--spacing-md); }
.ms-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
}
.ms-head svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }
.ms-left { color: var(--color-accent); font-weight: 700; }
.ms-bar {
  height: 10px;
  margin-top: 10px;
  border-radius: var(--r-pill);
  background: var(--fill-track);
  overflow: hidden;
}
.ms-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, #fbbf24, #f97316);
  transition: width 0.9s var(--ease);
}

/* Дорожка вех: 3 → 7 → 14 → … пройденные тёплые, следующая дышит. */
.ms-path {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: 12px;
}
.ms-chip {
  flex: 1;
  padding: 5px 0;
  border-radius: var(--r-pill);
  background: var(--fill-track);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--text-muted);
}
.ms-chip.done {
  background: linear-gradient(180deg, #fbbf24, #f97316);
  color: #fff;
  box-shadow: 0 1px 4px rgba(249, 115, 22, 0.35);
}
.ms-chip.next {
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1.5px var(--color-accent);
  animation: chipPulse 2s ease-in-out infinite;
}
@keyframes chipPulse {
  0%, 100% { box-shadow: inset 0 0 0 1.5px var(--color-accent); }
  50% { box-shadow: inset 0 0 0 1.5px var(--color-accent),
    0 0 8px rgba(245, 158, 11, 0.35); }
}

/* -------- Достижения -------- */
.ach-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 4px 2px 10px;
  font-size: 14px;
  font-weight: 700;
}
.ach-head svg { width: 16px; height: 16px; color: var(--color-accent); }
.ach-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.ach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-bottom: 8px;
}
.ach-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: center;
  animation: achIn 0.45s var(--ease-spring) backwards;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes achIn {
  from { transform: scale(0.85) translateY(8px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);   opacity: 1; }
}
.ach-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
}
.ach-ico svg { width: 19px; height: 19px; }
.ach-card.unlocked {
  border-color: rgba(249, 115, 22, 0.25);
  background:
    linear-gradient(180deg, rgba(251, 191, 36, 0.08), transparent 60%),
    var(--surface);
  overflow: hidden;
}
.ach-card.unlocked .ach-ico {
  background: linear-gradient(160deg, #fbbf24, #f97316);
  color: #fff;
  box-shadow: 0 3px 10px rgba(249, 115, 22, 0.35);
}
/* Редкий «блик» по открытой карточке — намёк на золото, без назойливости. */
.ach-card.unlocked::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -80%;
  width: 50%;
  height: 220%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent,
    rgba(255, 255, 255, 0.35), transparent);
  animation: achShine 5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.6s);
}
body.tg-dark-theme .ach-card.unlocked::after {
  background: linear-gradient(90deg, transparent,
    rgba(255, 255, 255, 0.12), transparent);
}
@keyframes achShine {
  0%, 78% { left: -80%; }
  92%, 100% { left: 160%; }
}
.ach-title { font-size: 12px; font-weight: 700; }
.ach-desc { font-size: 10px; line-height: 1.35; color: var(--text-muted); }
.ach-card:not(.unlocked) .ach-title { color: var(--text-secondary); }
.ach-done {
  position: absolute;
  top: 7px;
  right: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
}
.ach-done svg { width: 10px; height: 10px; }
.ach-bar {
  width: 100%;
  height: 5px;
  margin-top: 4px;
  border-radius: var(--r-pill);
  background: var(--fill-track);
  overflow: hidden;
}
.ach-bar i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--color-accent);
}
.ach-progress { font-size: 10px; color: var(--text-muted); }

/* -------- Доступность -------- */
@media (prefers-reduced-motion: reduce) {
  .flame-svg,
  .streak-flame::before,
  .streak-hero.lit .streak-hero-flame::before,
  .sw-dot,
  .spark,
  .ms-chip.next,
  .ach-card,
  .ach-card.unlocked::after { animation: none !important; }
  .ms-fill { transition: none; }
}