/* =========================================================
   FIGHTDLE — DAILY STREAKS
   The flame in each game's icon row (Classic's original fire counter,
   moved here so every game shows the same one), and the big animated
   flame on result cards.
   ========================================================= */

.streak-flame {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: default;
}
.streak-flame__gif {
  display: block;
  width: 50px;
  height: 40px;
}
.streak-flame__count {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: bold;
  font-size: 1.5rem;
  pointer-events: none;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* ---------- the big flame on result cards ---------- */
.streak-emblem {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2px auto 4px;
  user-select: none;
}
.streak-emblem[hidden] { display: none; }

.streak-emblem__fire {
  position: relative;
  width: 120px;
  height: 140px;
}
.streak-emblem__glow {
  position: absolute;
  inset: 22% -18% -8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 140, 30, .55), rgba(255, 80, 20, .18) 60%, transparent);
  animation: se-glow 2.4s ease-in-out infinite;
}
.streak-emblem__svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 96%;
  filter: drop-shadow(0 0 8px rgba(255, 110, 20, .45));
}
/* Each layer sways from its base, at its own speed, so the flame never
   visibly loops. */
.streak-emblem__svg path { transform-box: fill-box; transform-origin: 50% 100%; }
.streak-emblem__outer { animation: se-flicker 1.7s ease-in-out infinite alternate; }
.streak-emblem__mid   { animation: se-flicker 1.25s ease-in-out -.4s infinite alternate-reverse; }
.streak-emblem__core  { animation: se-flicker-core .9s ease-in-out -.2s infinite alternate; }

/* The count sits in the widest part of the flame. The window clips the
   numbers as they roll over. */
.streak-emblem__num {
  position: absolute;
  left: 0;
  right: 0;
  top: 47%;
  height: 46%;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}
.streak-emblem__digits {
  grid-area: 1 / 1;
  padding-top: 4px;
  font-family: var(--font-display);
  font-size: 54px;
  line-height: 1;
  color: #fff;
  text-shadow:
    -2px -2px 0 #9a2400, 2px -2px 0 #9a2400, -2px 2px 0 #9a2400, 2px 2px 0 #9a2400,
    0 -2px 0 #9a2400, 0 2px 0 #9a2400, -2px 0 0 #9a2400, 2px 0 0 #9a2400,
    0 3px 6px rgba(80, 10, 0, .6);
}
.streak-emblem[data-digits="3"] .streak-emblem__digits { font-size: 42px; }
.streak-emblem[data-digits="4"] .streak-emblem__digits { font-size: 32px; }

.streak-emblem__label {
  margin: 2px 0 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-bright, #d9b77a);
}

/* Sparks: only seen during the tick-over */
.streak-emblem__sparks i {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 6px;
  height: 6px;
  margin: -3px;
  border-radius: 50%;
  background: #ffd36b;
  box-shadow: 0 0 8px #ff9a1f;
  opacity: 0;
}
.streak-emblem__sparks i:nth-child(1) { --x: -50px; --y: -58px; animation-delay: .12s; }
.streak-emblem__sparks i:nth-child(2) { --x: 48px;  --y: -64px; animation-delay: .16s; }
.streak-emblem__sparks i:nth-child(3) { --x: -26px; --y: -96px; animation-delay: .2s; }
.streak-emblem__sparks i:nth-child(4) { --x: 30px;  --y: -100px; animation-delay: .14s; }
.streak-emblem__sparks i:nth-child(5) { --x: -64px; --y: -20px; animation-delay: .22s; }
.streak-emblem__sparks i:nth-child(6) { --x: 62px;  --y: -26px; animation-delay: .18s; }

/* Waiting to light (a brand-new streak, before the card is in view) */
.streak-emblem.is-unlit .streak-emblem__svg,
.streak-emblem.is-unlit .streak-emblem__glow { opacity: 0; }

/* The tick-over */
.streak-emblem.is-bumping .streak-emblem__fire { animation: se-flare .7s cubic-bezier(.3, 1.6, .5, 1) .1s both; }
.streak-emblem.is-igniting .streak-emblem__svg { animation: se-ignite .8s cubic-bezier(.2, 1.4, .4, 1) both; }
.streak-emblem.is-bumping .streak-emblem__glow,
.streak-emblem.is-igniting .streak-emblem__glow { animation: se-glow-burst 1s ease-out both; }
.streak-emblem.is-bumping .streak-emblem__sparks i,
.streak-emblem.is-igniting .streak-emblem__sparks i { animation-name: se-spark; animation-duration: .9s; animation-timing-function: ease-out; animation-fill-mode: forwards; }
.streak-emblem__digits.is-out { animation: se-out .4s .15s cubic-bezier(.5, 0, .75, 0) forwards; }
.streak-emblem__digits.is-in  { animation: se-in .55s .3s cubic-bezier(.2, 1.5, .4, 1) both; }
.streak-emblem.is-igniting .streak-emblem__digits.is-in { animation-delay: .45s; }

@keyframes se-flicker {
  0%   { transform: scale(1, 1) skewX(0deg); }
  35%  { transform: scale(.97, 1.04) skewX(-2deg); }
  70%  { transform: scale(1.02, .98) skewX(1.5deg); }
  100% { transform: scale(.99, 1.03) skewX(-1deg); }
}
@keyframes se-flicker-core {
  0%   { transform: scale(1, 1); }
  100% { transform: scale(.93, 1.07); }
}
@keyframes se-glow {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
@keyframes se-glow-burst {
  0%   { opacity: .75; transform: scale(1); }
  30%  { opacity: 1;   transform: scale(1.45); }
  100% { opacity: .75; transform: scale(1); }
}
@keyframes se-flare {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
@keyframes se-ignite {
  0%   { opacity: 0; transform: scale(.15); }
  50%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes se-spark {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.3); }
}
@keyframes se-out { to { transform: translateY(-115%); opacity: 0; } }
@keyframes se-in {
  from { transform: translateY(115%) scale(.8); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .streak-emblem *, .streak-emblem *::before { animation: none !important; }
}