/* Streak: ngọn lửa trên đầu linh vật, thanh đếm trong menu tài khoản (js/streak.js) */

/* ---------- ngọn lửa ----------
   Thuần CSS, gốc dev/assets/flame (tách từ TheDuc). Cỡ gốc 32×36px.
   Luôn cháy; --x3 (chuỗi từ 10 ngày) cháy nhanh gấp 3. */
.streak-flame{position:relative;display:inline-block;vertical-align:middle;flex:none;width:32px;height:36px;pointer-events:none;overflow:visible;transform-origin:50% 90%;animation:streak-flame-sway 1.35s ease-in-out infinite}
.streak-flame__body{position:absolute;left:6px;bottom:3px;width:21px;height:25px;background:linear-gradient(0deg,#ef4e25 8%,#ff862b 60%,#ffbb43);border-radius:65% 35% 52% 48% / 70% 65% 35% 30%;transform:rotate(4deg)}
.streak-flame__tongue{position:absolute;bottom:8px;left:var(--left);width:var(--width);height:var(--height);background:linear-gradient(0deg,#ff7429,#ffb13b);border-radius:85% 15% 65% 35% / 75% 35% 65% 25%;transform-origin:50% 100%;animation:streak-flame-rise var(--duration) var(--delay) ease-in-out infinite alternate}
.streak-flame__core{position:absolute;left:11px;bottom:4px;width:12px;height:17px;background:linear-gradient(0deg,#fff3b0,#ffd364 80%);border-radius:75% 25% 55% 45% / 75% 50% 50% 25%;transform-origin:50% 100%;animation:streak-flame-core 1.1s ease-in-out infinite alternate}
.streak-flame--x3{animation-duration:.45s}
.streak-flame--x3 .streak-flame__tongue{animation-duration:calc(var(--duration) / 3)}
.streak-flame--x3 .streak-flame__core{animation-duration:.37s}
@keyframes streak-flame-rise{from{transform:rotate(-10deg) scale(.9,.85)}to{transform:rotate(10deg) scale(1,1.06)}}
@keyframes streak-flame-core{from{transform:rotate(-5deg) scaleY(.88)}to{transform:rotate(7deg) scaleY(1.03)}}
@keyframes streak-flame-sway{0%,100%{transform:rotate(-6deg) scale(.96)}50%{transform:rotate(6deg) scale(1.04)}}
@media (prefers-reduced-motion:reduce){.streak-flame,.streak-flame *{animation:none!important}}

/* ---------- lửa trên đầu linh vật ----------
   Figma: Streak collectable — lửa 32px ngay trên đầu linh vật. Nút 44px
   (vùng chạm), lửa nằm ở đáy nút; tâm nút trùng tâm linh vật (.mascot:
   left 16, rộng 56). Linh vật đang lặn / chưa có ảnh thì lửa cũng ẩn. */
.streak-pick{
  position:absolute; left:calc(var(--spacing-16) + 28px - 22px); bottom:calc(100% + 58px);
  width:44px; height:44px; padding:0 0 var(--spacing-4); border:0; background:none;
  display:flex; align-items:flex-end; justify-content:center;
  cursor:pointer; z-index:2; -webkit-tap-highlight-color:transparent;
  animation:streak-pop .32s cubic-bezier(.2,.9,.25,1.25) both;
}
.streak-pick[hidden], .mascot.asleep ~ .streak-pick{display:none}
.streak-pick:focus-visible{outline:2px solid var(--color-border-focus); outline-offset:2px; border-radius:var(--radius-pill)}
@keyframes streak-pop{from{opacity:0; transform:translateY(8px) scale(.4)}}
@media (prefers-reduced-motion:reduce){.streak-pick{animation:none}}

/* lửa đang bay vào avatar: nằm trên header (header z 20, đang mở menu 45) */
.streak-fly{position:absolute; left:0; top:0; z-index:50; pointer-events:none; will-change:transform}

/* ---------- Figma: Collect Item bar (Dropdown menu/Account) ----------
   Nền yellow/50, bo 12, cao 48; Streak Item = lửa 32px + số Lilita One
   20/22, orange/400, viền chữ đỏ sẫm (đo trên Figma). */
.streak-bar{
  display:flex; align-items:center; justify-content:center; gap:var(--spacing-2);
  height:48px; padding:0 var(--spacing-16) 0 var(--spacing-12);
  border-radius:var(--radius-12); background:var(--yellow-50);
}
/* lửa trong thanh nhỏ hơn 4px (28×31.5, giữ tỉ lệ 32×36). zoom thu cả khung
   chiếm chỗ — transform của .streak-flame đang dùng cho animation */
.streak-bar__item{display:flex; align-items:center; gap:var(--spacing-8)}
.streak-bar__flame{display:inline-flex; zoom:.875}
.streak-bar__n{
  font:400 20px/22px "Lilita One", var(--font-sans); letter-spacing:1px;
  color:var(--orange-400); font-variant-numeric:tabular-nums;
  --stroke:#741510;
  text-shadow:
    -1.5px -1.5px 0 var(--stroke), 0 -1.5px 0 var(--stroke), 1.5px -1.5px 0 var(--stroke),
    -1.5px 0 0 var(--stroke), 1.5px 0 0 var(--stroke),
    -1.5px 1.5px 0 var(--stroke), 0 1.5px 0 var(--stroke), 1.5px 1.5px 0 var(--stroke);
}