.ekfx-confetti-layer {
  contain: layout paint style;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  overflow: hidden;
}
.ekfx-piece {
  position: absolute;
  top: -12px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.95;
  animation: ekfxFall var(--ekfx-d, 2200ms) cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.ekfx-piece.round {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.ekfx-piece.star {
  width: 0;
  height: 0;
  background: transparent !important;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid var(--ekfx-c, #f5c228);
}
@keyframes ekfxFall {
  0% {
    transform: translate3d(0, -30px, 0) rotate(0deg);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--ekfx-x, 0), 100vh, 0) rotate(var(--ekfx-r, 720deg));
    opacity: 0;
  }
}
.ekfx-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9100;
  padding: 10px 18px;
  border-radius: 999px;
  background: #1a1a1a;
  color: #fff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 800;
  animation: ekfxToastIn 0.2s ease;
}
@keyframes ekfxToastIn {
  from {
    opacity: 0;
    transform: translate(-50%, -8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
.ekfx-permcard {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 20px;
  max-width: 420px;
  margin: 0 auto;
  z-index: 9200;
  padding: 14px 16px;
  border-radius: 16px;
  background: #1a1a1a;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  font-family: "Nunito", "DM Sans", sans-serif;
  animation: ekfxToastIn 0.2s ease;
}
.ekfx-permcard-msg {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
}
.ekfx-permcard-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.ekfx-permcard-btn {
  flex: 1;
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  background: #58cc02;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.ekfx-permcard-dismiss {
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.ekfx-pulse {
  animation: ekfxPulse 0.55s ease;
}
@keyframes ekfxPulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}
.ekfx-combo {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: "Nunito", "DM Sans", sans-serif;
  perspective: 900px;
  --bolt-width: 52px;
  --bolt-glow-spread: 18px;
  --bolt-color: #ffd426;
  --bolt-glow: rgba(255, 212, 38, 0.7);
  --bolt-outline: #1a1a1a;
}
.ekfx-combo::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 230, 91, 0.34), transparent 25%),
    radial-gradient(circle at 50% 50%, rgba(91, 200, 112, 0.2), transparent 38%),
    linear-gradient(
      135deg,
      transparent 0 42%,
      rgba(255, 255, 255, 0.16) 43% 45%,
      transparent 46% 100%
    );
  opacity: 0;
  animation: ekfxComboFlash 950ms ease-out forwards;
}
/* ── HIGH-PERFORMANCE COMBO FIREWORKS SYSTEM ── */
.ekfx-fireworks-layer {
  contain: layout paint style;
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
}

.ekfx-fw-group {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 30%);
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Rocket launching up to peak height */
.ekfx-fw-rocket {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 4px;
  height: 22px;
  background: linear-gradient(to top, transparent, var(--c, #ffaa00));
  border-radius: 4px;
  opacity: 0;
  transform: translate3d(0, 100vh, 0);
  animation: ekfxFwRocketLaunch var(--dur, 550ms) cubic-bezier(0.1, 0.7, 0.2, 1) var(--delay, 0ms)
    forwards;
}

@keyframes ekfxFwRocketLaunch {
  0% {
    opacity: 1;
    transform: translate3d(0, 70vh, 0) scaleY(1.4);
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scaleY(0.4);
  }
}

/* Burst explosion container */
.ekfx-fw-burst {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  animation: ekfxFwBurstShow 1ms linear calc(var(--delay, 0ms) + var(--dur, 550ms)) forwards;
}

@keyframes ekfxFwBurstShow {
  to {
    opacity: 1;
  }
}

/* Radial light flash at peak */
.ekfx-fw-flash {
  position: absolute;
  left: -25px;
  top: -25px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, var(--c, #ffea00) 40%, transparent 70%);
  opacity: 0;
  transform: scale(0.2);
  animation: ekfxFwFlashPulse 400ms ease-out calc(var(--delay, 0ms) + var(--dur, 550ms)) forwards;
}

@keyframes ekfxFwFlashPulse {
  0% {
    opacity: 1;
    transform: scale(0.3);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.6);
  }
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

/* Fireworks radial particles */
.ekfx-fw-p {
  position: absolute;
  left: -4px;
  top: -4px;
  width: var(--sz, 6px);
  height: var(--sz, 6px);
  border-radius: 50%;
  /* Glow drawn by the gradient itself: an animated double box-shadow on
     ~100 particles was expensive to composite. */
  background: radial-gradient(circle, #ffffff 0 22%, var(--c, #ffaa00) 46%, transparent 74%);
  transform: scale(1.6);
  opacity: 0;
  animation: ekfxFwParticleBurst 900ms cubic-bezier(0.12, 0.8, 0.25, 1)
    calc(var(--delay, 0ms) + var(--dur, 550ms)) forwards;
}

@keyframes ekfxFwParticleBurst {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.3);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(var(--a, 0deg)) translateX(var(--dist, 70px)) translateY(35px) scale(0.2);
  }
}

/* Sparkling stars */
.ekfx-fw-star {
  position: absolute;
  left: -8px;
  top: -8px;
  font-size: 14px;
  color: #fff2a8;
  text-shadow: 0 0 8px #ffaa00;
  opacity: 0;
  animation: ekfxFwStarTwinkle 1100ms ease-out calc(var(--delay, 0ms) + var(--dur, 550ms)) forwards;
}

@keyframes ekfxFwStarTwinkle {
  0% {
    opacity: 1;
    transform: rotate(var(--a, 0deg)) translateX(0) scale(0.4);
  }
  40% {
    opacity: 1;
    transform: rotate(var(--a, 0deg)) translateX(calc(var(--dist, 60px) * 0.7)) scale(1.4);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--a, 0deg)) translateX(var(--dist, 60px)) translateY(40px) scale(0.3);
  }
}
.ekfx-combo-aura {
  position: absolute;
  z-index: 1;
  width: min(84vw, 520px);
  aspect-ratio: 1;
  border: 3px solid rgba(255, 255, 255, 0.58);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 216, 92, 0.28), transparent 58%),
    conic-gradient(
      from 90deg,
      rgba(245, 194, 40, 0.08),
      rgba(255, 93, 71, 0.24),
      rgba(91, 200, 112, 0.14),
      rgba(245, 194, 40, 0.08)
    );
  opacity: 0;
  transform: scale(0.45) rotate(0deg);
  animation: ekfxAura 1250ms cubic-bezier(0.16, 0.94, 0.22, 1) forwards;
}
.ekfx-combo-card {
  position: relative;
  display: grid;
  justify-items: center;
  z-index: 20;
  min-width: min(86vw, 310px);
  padding: 24px 16px 19px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #1a1a1a;
  box-shadow: none;
  transform-origin: center;
  animation: ekfxComboPop 1050ms cubic-bezier(0.18, 1.24, 0.22, 1) forwards;
}
.ekfx-combo-wordmark {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 80;
  color: #fff;
  font-family: "Bricolage Grotesque", "Nunito", sans-serif;
  font-size: clamp(50px, 15vw, 98px);
  font-weight: 1000;
  line-height: 0.82;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke: 4px #ff9400;
  paint-order: stroke fill;
  text-shadow:
    0 6px 0 #ff9400,
    0 10px 0 #1a1a1a,
    0 0 22px rgba(255, 230, 91, 0.95),
    0 0 42px rgba(26, 26, 26, 0.82);
  transform: translate(-50%, -50%) rotate(-1deg) scale(0.72);
  opacity: 0;
  animation: ekfxComboWordmark 1450ms cubic-bezier(0.16, 1, 0.3, 1) forwards 80ms;
}
.ekfx-combo-wordmark::before {
  position: absolute;
  inset: -24px -24px -20px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(26, 26, 26, 0.8),
    rgba(26, 26, 26, 0.34) 48%,
    transparent 78%
  );
  content: "";
}
.ekfx-combo-wordmark span {
  display: inline-block;
  margin-left: 0.05em;
  font-size: 0.84em;
}
.ekfx-combo-card::before,
.ekfx-combo-card::after {
  display: none;
  position: absolute;
  inset: -10px;
  z-index: -1;
  border: 2px solid rgba(26, 26, 26, 0.22);
  border-radius: 34px;
  content: "";
  opacity: 0;
  transform: rotate(-4deg) scale(0.94);
  animation: ekfxCardEcho 900ms ease-out forwards;
}
.ekfx-combo-card::before {
  display: block;
  inset: 20px -18px 22px;
  z-index: -1;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(26, 26, 26, 0.78),
    rgba(26, 26, 26, 0.28) 45%,
    transparent 78%
  );
  transform: none;
  animation: none;
}
.ekfx-combo-card::after {
  inset: -18px;
  border-color: rgba(255, 255, 255, 0.45);
  animation-delay: 90ms;
  transform: rotate(5deg) scale(0.88);
}
.ekfx-combo-ring {
  position: absolute;
  inset: 8px 18px;
  z-index: -2;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 245, 166, 0.52), transparent 66%);
  opacity: 0;
  animation: ekfxRingBlast 1050ms ease-out forwards;
}
.ekfx-combo-kicker,
.ekfx-combo-reward {
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ekfx-combo-kicker {
  margin-bottom: 3px;
  color: #fff7b0;
  text-shadow:
    2px 2px 0 #1a1a1a,
    0 0 18px rgba(255, 237, 95, 0.82);
}
.ekfx-combo-card strong {
  position: relative;
  z-index: 2;
  max-width: min(76vw, 360px);
  font-family: "Bricolage Grotesque", "Nunito", sans-serif;
  font-size: clamp(44px, 14vw, 82px);
  line-height: 0.82;
  font-weight: 1000;
  letter-spacing: 0;
  margin: 4px 0 7px;
  text-align: center;
  color: #fff;
  -webkit-text-stroke: 4px #ff9400;
  paint-order: stroke fill;
  text-shadow:
    0 6px 0 #ff9400,
    0 10px 0 #1a1a1a,
    0 0 22px rgba(255, 230, 91, 0.95),
    0 0 42px rgba(26, 26, 26, 0.82);
  transform: rotate(-1deg);
  white-space: nowrap;
}
.ekfx-combo-x {
  display: inline-block;
  margin-left: 0.06em;
  font-size: 0.84em;
}
.ekfx-combo-card em {
  margin: 0 0 8px;
  color: #fffdf3;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-shadow: 2px 2px 0 #1a1a1a;
}
.ekfx-combo-reward {
  border: 2px solid #1a1a1a;
  border-radius: 999px;
  background: #fffdf3;
  padding: 5px 10px;
  box-shadow: 2px 2px 0 #1a1a1a;
}
.ekfx-combo-meter {
  width: min(66vw, 260px);
  height: 7px;
  margin-top: 12px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(26, 26, 26, 0.44);
  box-shadow: 0 0 16px rgba(255, 232, 91, 0.62);
}
.ekfx-combo-meter::before {
  display: block;
  width: var(--p, 50%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5bc870, #f5c228, #ff5d47);
  box-shadow: 0 0 14px rgba(255, 93, 71, 0.5);
  content: "";
  animation: ekfxMeterHit 820ms cubic-bezier(0.16, 0.94, 0.22, 1) forwards;
}
.ekfx-combo-t2 .ekfx-combo-card {
  color: #1a1a1a;
}
.ekfx-combo-t2 {
  --bolt-width: 56px;
  --bolt-glow-spread: 22px;
}
.ekfx-combo-t3 .ekfx-combo-card,
.ekfx-combo-t4 .ekfx-combo-card {
  color: #15110d;
  animation-duration: 1050ms;
}
.ekfx-combo-t3 {
  --bolt-width: 62px;
  --bolt-glow-spread: 28px;
}
.ekfx-combo-t4 {
  --bolt-width: 72px;
  --bolt-glow-spread: 34px;
}
.ekfx-combo-t3 .ekfx-combo-card strong,
.ekfx-combo-t4 .ekfx-combo-card strong,
.ekfx-combo-t5 .ekfx-combo-card strong {
  font-size: clamp(48px, 14.5vw, 90px);
}
.ekfx-combo-t4 .ekfx-combo-card {
  box-shadow: none;
  animation-name: ekfxComboMegaPop;
}
.ekfx-combo-t5 .ekfx-combo-card {
  border-width: 4px;
  box-shadow: none;
  animation-name: ekfxComboUltraPop;
}
.ekfx-combo-t5 {
  --bolt-width: 82px;
  --bolt-glow-spread: 42px;
}
.ekfx-combo-t6 .ekfx-combo-card {
  min-width: min(90vw, 390px);
  border-width: 4px;
  box-shadow: none;
  animation-name: ekfxComboGodPop;
}
.ekfx-combo-t6 {
  --bolt-width: 96px;
  --bolt-glow-spread: 52px;
}
.ekfx-combo-t6 .ekfx-combo-card strong {
  font-size: clamp(52px, 15vw, 96px);
}
.ekfx-combo-t3 .ekfx-combo-wordmark,
.ekfx-combo-t4 .ekfx-combo-wordmark,
.ekfx-combo-t5 .ekfx-combo-wordmark {
  font-size: clamp(52px, 15vw, 102px);
}
.ekfx-combo-t6 .ekfx-combo-wordmark {
  font-size: clamp(56px, 15.5vw, 110px);
}
.ekfx-combo-bolts,
.ekfx-combo-sparks,
.ekfx-combo-lanes,
.ekfx-combo-waves {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.ekfx-combo-takeover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 244, 176, 0.44), transparent 22%),
    radial-gradient(circle at 50% 50%, rgba(255, 93, 71, 0.2), transparent 48%),
    linear-gradient(rgba(26, 26, 26, 0.16), rgba(26, 26, 26, 0.02));
  opacity: 0;
  animation: ekfxTakeoverWash 1350ms ease-out forwards;
}
.ekfx-lightning-lane {
  position: absolute;
  left: var(--x);
  top: -18vh;
  width: 18px;
  height: 132vh;
  opacity: 0;
  transform: rotate(var(--r)) scaleY(0.8);
  animation: ekfxLightningLane 780ms ease-out forwards;
  animation-delay: var(--d);
}
.ekfx-lightning-lane::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent,
    #fff9bf 12%,
    #f5c228 28%,
    #ff5d47 52%,
    transparent 74%
  );
  clip-path: polygon(
    44% 0,
    100% 0,
    58% 18%,
    96% 18%,
    38% 47%,
    78% 47%,
    10% 100%,
    38% 60%,
    0 60%,
    42% 32%,
    8% 32%
  );
  filter: drop-shadow(0 0 12px rgba(255, 245, 169, 0.95))
    drop-shadow(0 0 24px rgba(255, 93, 71, 0.55));
}
.ekfx-shockwave {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(64vw, 330px);
  aspect-ratio: 1;
  border: 5px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  box-shadow:
    0 0 0 4px rgba(26, 26, 26, 0.18),
    0 0 38px rgba(245, 194, 40, 0.48);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.24);
  animation: ekfxShockwave 1150ms cubic-bezier(0.12, 0.78, 0.22, 1) forwards;
  animation-delay: var(--d);
}
.ekfx-combo-shout {
  position: absolute;
  left: 50%;
  bottom: max(42px, 10vh);
  z-index: 25;
  width: min(88vw, 560px);
  padding: 13px 18px;
  border: 3px solid #1a1a1a;
  border-radius: 999px;
  background: #fffdf3;
  color: #1a1a1a;
  box-shadow:
    0 7px 0 rgba(26, 26, 26, 0.2),
    0 16px 34px rgba(245, 194, 40, 0.3);
  font-size: clamp(17px, 4.7vw, 34px);
  font-weight: 1000;
  letter-spacing: -0.035em;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%) translateY(26px) scale(0.74);
  opacity: 0;
  animation: ekfxComboShout 1700ms cubic-bezier(0.16, 0.94, 0.22, 1) forwards 190ms;
}
.ekfx-combo-god .ekfx-combo-shout {
  background: #1a1a1a;
  color: #fffdf3;
  text-shadow: 0 0 14px rgba(245, 194, 40, 0.76);
}
.ekfx-bolt {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 22px;
  height: 46px;
  opacity: 0;
  transform: rotate(var(--r)) scale(0.75);
  animation: ekfxBolt 700ms ease-out forwards;
  animation-delay: var(--d);
}
.ekfx-bolt::before {
  display: block;
  width: 100%;
  height: 100%;
  background: #ffe85b;
  clip-path: polygon(48% 0, 100% 0, 62% 38%, 92% 38%, 28% 100%, 44% 52%, 10% 52%);
  filter: drop-shadow(0 0 8px rgba(255, 232, 91, 0.9)) drop-shadow(2px 2px 0 #1a1a1a);
  content: "";
}
.ekfx-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid #1a1a1a;
  border-radius: 3px;
  background: #fff;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(0) scale(0.6);
  animation: ekfxSpark 860ms cubic-bezier(0.16, 0.94, 0.22, 1) forwards;
  animation-delay: var(--d);
}
@keyframes ekfxComboPop {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.68) rotate(-3deg);
  }
  18% {
    opacity: 1;
    transform: translateY(0) scale(1.1) rotate(2deg);
  }
  62% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-22px) scale(0.94) rotate(1deg);
  }
}
@keyframes ekfxComboMegaPop {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.54) rotate(-8deg);
  }
  14% {
    opacity: 1;
    transform: translateY(0) scale(1.18) rotate(4deg);
  }
  27% {
    transform: translateX(-6px) scale(1.03) rotate(-2deg);
  }
  39% {
    transform: translateX(5px) scale(1.06) rotate(2deg);
  }
  70% {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px) scale(1.02) rotate(1deg);
  }
}
@keyframes ekfxComboUltraPop {
  0% {
    opacity: 0;
    transform: translateY(32px) rotateX(18deg) scale(0.45);
  }
  12% {
    opacity: 1;
    transform: translateY(0) rotateX(0) scale(1.22);
  }
  21% {
    transform: translateX(-10px) rotate(-3deg) scale(1.03);
  }
  30% {
    transform: translateX(8px) rotate(3deg) scale(1.08);
  }
  43% {
    transform: translateX(-4px) rotate(-1deg) scale(1.02);
  }
  72% {
    opacity: 1;
    transform: translateX(0) rotate(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-36px) rotateX(-8deg) scale(1.08);
  }
}
@keyframes ekfxComboGodPop {
  0% {
    opacity: 0;
    transform: translateY(36px) rotateX(22deg) scale(0.38);
  }
  10% {
    opacity: 1;
    transform: translateY(0) rotateX(0) scale(1.28);
  }
  18% {
    transform: translateX(-14px) rotate(-4deg) scale(1.06);
  }
  26% {
    transform: translateX(12px) rotate(4deg) scale(1.12);
  }
  36% {
    transform: translateX(-7px) rotate(-2deg) scale(1.04);
  }
  54% {
    transform: translateX(4px) rotate(1deg) scale(1.02);
  }
  78% {
    opacity: 1;
    transform: translateX(0) rotate(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-44px) rotateX(-12deg) scale(1.1);
  }
}
@keyframes ekfxComboFlash {
  0% {
    opacity: 0;
    transform: scale(0.88);
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}
@keyframes ekfxTakeoverWash {
  0% {
    opacity: 0;
  }
  12%,
  32% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ekfxLightningLane {
  0%,
  100% {
    opacity: 0;
    transform: rotate(var(--r)) translateY(-20px) scaleY(0.72);
  }
  13%,
  23%,
  38% {
    opacity: 1;
  }
  18%,
  30% {
    opacity: 0.35;
  }
  54% {
    opacity: 0.82;
    transform: rotate(calc(var(--r) - 18deg)) translateY(18px) scaleY(1.06);
  }
}
@keyframes ekfxShockwave {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.24);
  }
  16% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.55);
  }
}
@keyframes ekfxComboShout {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(26px) scale(0.74) rotate(-2deg);
  }
  18% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.08) rotate(1deg);
  }
  58% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-18px) scale(1.04) rotate(1deg);
  }
}
@keyframes ekfxAura {
  0% {
    opacity: 0;
    transform: scale(0.42) rotate(0deg);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.26) rotate(95deg);
  }
}
html.ekfx-screen-hit body {
  animation: ekfxScreenHit 560ms ease-out;
}
/* Transform only: animating a filter on body repainted the whole page on
   every frame of the shake, the main source of combo lag on phones. */
@keyframes ekfxScreenHit {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  12% {
    transform: translate3d(-2px, 1px, 0);
  }
  22% {
    transform: translate3d(3px, -1px, 0);
  }
  34% {
    transform: translate3d(-1px, -1px, 0);
  }
}
@keyframes ekfxCardEcho {
  0% {
    opacity: 0;
    transform: rotate(-4deg) scale(0.88);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(5deg) scale(1.15);
  }
}
@keyframes ekfxRingBlast {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.22);
  }
}
@keyframes ekfxMeterHit {
  0% {
    width: 16%;
  }
  100% {
    width: var(--p, 50%);
  }
}
@keyframes ekfxBolt {
  0% {
    opacity: 0;
    transform: translateY(-14px) rotate(var(--r)) scale(0.55);
  }
  18%,
  42% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(18px) rotate(calc(var(--r) + 9deg)) scale(1.05);
  }
}
@keyframes ekfxSpark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--a)) translateX(0) scale(0.4);
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--m)) scale(1);
  }
}
@keyframes ekfxComboWordmark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-5deg) scale(0.62);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(2deg) scale(1.08);
  }
  26% {
    transform: translate(calc(-50% - 4px), -50%) rotate(-1deg) scale(1);
  }
  40% {
    transform: translate(calc(-50% + 3px), -50%) rotate(1deg) scale(1.03);
  }
  76% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-1deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 20px)) rotate(1deg) scale(1.04);
  }
}

body {
  transition: opacity 0.18s ease-out;
}
body.ekfx-fading {
  opacity: 0;
}
body.ekfx-fade-in {
  animation: ekfxFadeIn 0.22s ease;
}
@keyframes ekfxFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   DUOLINGO STREAK FLAME SYSTEM (Multi-Tier Color & Animation System)
   ───────────────────────────────────────────────────────────────────────── */

.ek-flame-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.ek-flame-wrap.sz-sm {
  width: 32px;
  height: 36px;
}
.ek-flame-wrap.sz-md {
  width: 48px;
  height: 54px;
}
.ek-flame-wrap.sz-lg {
  width: 80px;
  height: 92px;
}
.ek-flame-wrap.sz-xl {
  width: 110px;
  height: 126px;
}

.ek-flame-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 4px 14px var(--flame-glow-color, rgba(255, 140, 0, 0.45)));
}

/* Outer flame flickering body */
.ek-flame-svg .flame-body {
  transform-origin: 50% 90%;
  animation: duolingoFlameFlicker 2.1s ease-in-out infinite;
}

/* Inner flame pulse */
.ek-flame-svg .flame-core {
  transform-origin: 50% 85%;
  animation: duolingoFlamePulse 1.6s ease-in-out infinite;
}

/* Teardrop highlight */
.ek-flame-svg .flame-highlight {
  transform-origin: 50% 80%;
  animation: duolingoFlamePulse 1.2s ease-in-out infinite alternate;
}

/* Flame Aura Glow */
.ek-flame-wrap .flame-aura {
  position: absolute;
  inset: -15%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--flame-aura-color, rgba(255, 140, 0, 0.35)),
    transparent 70%
  );
  filter: blur(8px);
  opacity: 0.85;
  animation: flameAuraBreathe 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

/* Floating Embers */
.ek-flame-wrap .flame-ember {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--flame-ember-color, #ffd700);
  opacity: 0;
  pointer-events: none;
  animation: flameEmberRise 1.8s ease-out infinite;
}
.ek-flame-wrap .flame-ember.e1 {
  left: 25%;
  bottom: 20%;
  animation-delay: 0.2s;
}
.ek-flame-wrap .flame-ember.e2 {
  left: 65%;
  bottom: 25%;
  animation-delay: 0.8s;
}
.ek-flame-wrap .flame-ember.e3 {
  left: 45%;
  bottom: 15%;
  animation-delay: 1.4s;
}

/* ── COLOR TIERS ── */

/* GREY (Inactive / Cold / 0 days) */
.flame-grey {
  --flame-glow-color: rgba(140, 150, 165, 0.2);
  --flame-aura-color: rgba(140, 150, 165, 0.15);
  --flame-ember-color: #94a3b8;
}
.flame-grey .flame-body {
  fill: url(#flameGrad_grey);
  animation: flameGreyBreathe 3s ease-in-out infinite;
}
.flame-grey .flame-core {
  fill: #94a3b8;
  animation: none;
}
.flame-grey .flame-highlight {
  fill: #cbd5e1;
  animation: none;
}
.flame-grey .flame-aura {
  opacity: 0.2;
}
.flame-grey .flame-ember {
  display: none;
}

/* ORANGE (1-6 Days) */
.flame-orange {
  --flame-glow-color: rgba(255, 110, 0, 0.55);
  --flame-aura-color: rgba(255, 130, 0, 0.4);
  --flame-ember-color: #ffe066;
}
.flame-orange .flame-body {
  fill: url(#flameGrad_orange);
}
.flame-orange .flame-core {
  fill: #ffbe00;
}
.flame-orange .flame-highlight {
  fill: #fff4b8;
}

/* BLUE (7-13 Days - Sapphire Freeze) */
.flame-blue {
  --flame-glow-color: rgba(0, 191, 255, 0.65);
  --flame-aura-color: rgba(0, 162, 255, 0.45);
  --flame-ember-color: #80e5ff;
}
.flame-blue .flame-body {
  fill: url(#flameGrad_blue);
}
.flame-blue .flame-core {
  fill: #00f0ff;
}
.flame-blue .flame-highlight {
  fill: #e0f7ff;
}

/* PURPLE (14-29 Days - Mystic Cosmic) */
.flame-purple {
  --flame-glow-color: rgba(224, 86, 253, 0.7);
  --flame-aura-color: rgba(181, 23, 158, 0.5);
  --flame-ember-color: #ffb7ff;
}
.flame-purple .flame-body {
  fill: url(#flameGrad_purple);
}
.flame-purple .flame-core {
  fill: #ff79c6;
}
.flame-purple .flame-highlight {
  fill: #ffdbf0;
}

/* GOLD / RAINBOW (30+ Days - Super Saiyan Cosmic) */
.flame-gold {
  --flame-glow-color: rgba(255, 215, 0, 0.85);
  --flame-aura-color: rgba(255, 180, 0, 0.6);
  --flame-ember-color: #ffffff;
}
.flame-gold .flame-body {
  fill: url(#flameGrad_gold);
  animation: duolingoFlameFlicker 1.4s ease-in-out infinite;
}
.flame-gold .flame-core {
  fill: #fff566;
  animation: duolingoFlamePulse 1.1s ease-in-out infinite;
}
.flame-gold .flame-highlight {
  fill: #ffffff;
}

/* Keyframe Animations */
@keyframes duolingoFlameFlicker {
  0%,
  100% {
    transform: scale(1) rotate(0deg) translateY(0);
  }
  20% {
    transform: scale(1.07, 0.94) rotate(-3.5deg) translateY(-2px);
  }
  40% {
    transform: scale(0.95, 1.06) rotate(2.5deg) translateY(1px);
  }
  60% {
    transform: scale(1.04, 0.97) rotate(-2deg) translateY(-1px);
  }
  80% {
    transform: scale(0.98, 1.03) rotate(3deg) translateY(0);
  }
}

@keyframes duolingoFlamePulse {
  0%,
  100% {
    transform: scale(1) translateY(0);
    opacity: 0.95;
  }
  50% {
    transform: scale(1.16) translateY(-4px);
    opacity: 1;
  }
}

@keyframes flameAuraBreathe {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.9;
  }
}

@keyframes flameEmberRise {
  0% {
    transform: translate(0, 0) scale(0.6);
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(calc((var(--ember-x, 1) - 0.5) * 24px), -36px) scale(0.2);
    opacity: 0;
  }
}

@keyframes flameGreyBreathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

@keyframes streakIgnitePop {
  0% {
    transform: scale(0.2) rotate(-18deg);
    opacity: 0;
  }
  45% {
    transform: scale(1.38) rotate(6deg);
    opacity: 1;
  }
  70% {
    transform: scale(0.92) rotate(-2deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ek-flame-svg .flame-body,
  .ek-flame-svg .flame-core,
  .ek-flame-svg .flame-highlight,
  .ek-flame-wrap .flame-aura,
  .ek-flame-wrap .flame-ember {
    animation: none !important;
  }
  .ekfx-piece {
    display: none;
    animation-duration: 1ms !important;
  }
  .ekfx-pulse {
    animation: none;
  }
  .ekfx-combo,
  .ekfx-combo::before,
  .ekfx-combo-card,
  .ekfx-combo-shout,
  .ekfx-combo-bolt-wrap,
  .ekfx-bolt-zigzag,
  .ekfx-lightning-lane,
  .ekfx-shockwave {
    animation-duration: 1ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   LEADERBOARD OVERTAKE ANIMATIONS ("On your left" & "Who decided that?")
   ───────────────────────────────────────────────────────────────────────── */

.ekfx-rank-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(17, 24, 39, 0.88);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ekfxRankOverlayIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes ekfxRankOverlayIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}



.ekfx-rank-card {
  width: 100%;
  max-width: 360px;
  background: #ffffff;
  border: 3px solid #1a1a1a;
  border-radius: 24px;
  padding: 24px 20px;
  box-shadow: 6px 6px 0 #1a1a1a;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Overtaken Warning (Negative) */
.ekfx-rank-card.warning-mode {
  background: #fff5f5;
  border-color: #1a1a1a;
}
.ekfx-rank-card.warning-mode .rank-header-badge {
  background: #e84848;
  color: #fff;
}

/* Overtake Triumph (Victory) */
.ekfx-rank-card.victory-mode {
  background: #fffdf0;
  border-color: #1a1a1a;
}
.ekfx-rank-card.victory-mode .rank-header-badge {
  background: #f5c228;
  color: #1a1a1a;
}

.rank-header-badge {
  display: inline-block;
  padding: 6px 16px;
  border: 2px solid #1a1a1a;
  border-radius: 999px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  box-shadow: 2px 2px 0 #1a1a1a;
  margin-bottom: 16px;
}

/* Track Stage */
.rank-track-stage {
  position: relative;
  height: 180px;
  background: #f1f5f9;
  border: 2px solid #1a1a1a;
  border-radius: 18px;
  margin: 14px 0 20px;
  overflow: hidden;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.rank-runner-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  padding: 8px 12px;
  box-shadow: 2px 2px 0 #1a1a1a;
  position: relative;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
}

.runner-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #1a1a1a;
  background: #f5c228;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  flex-shrink: 0;
}
.runner-name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 14px;
  font-weight: 800;
  flex: 1;
  text-align: left;
  margin-left: 10px;
}
.runner-pos {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 16px;
  font-weight: 900;
  color: #1a1a1a;
}

/* Chat Speech Bubble */
.chat-bubble-pop {
  position: absolute;
  top: -34px;
  right: 10px;
  background: #1a1a1a;
  color: #fff;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 12px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 12px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.4) translateY(10px);
  animation: chatBubbleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  z-index: 10;
}
.chat-bubble-pop::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: 14px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #1a1a1a;
}
.chat-bubble-pop.gold-bubble {
  background: #f5c228;
  color: #1a1a1a;
  border: 1.5px solid #1a1a1a;
}
.chat-bubble-pop.gold-bubble::after {
  border-top-color: #1a1a1a;
}

@keyframes chatBubbleIn {
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Overtaken Animations */
.rank-track-stage.overtaken-anim .user-slot {
  animation: userDropAnimation 1.2s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}
.rank-track-stage.overtaken-anim .rival-slot {
  animation: rivalRiseAnimation 1.2s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

@keyframes userDropAnimation {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(0);
  }
  70% {
    transform: translateY(58px) scale(0.96);
  }
  100% {
    transform: translateY(58px) scale(1);
  }
}

@keyframes rivalRiseAnimation {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(0);
  }
  70% {
    transform: translateY(-58px) scale(1.05);
  }
  100% {
    transform: translateY(-58px) scale(1);
  }
}

/* Overtake Victory Animations */
.rank-track-stage.overpass-anim .user-slot {
  animation: userPassUpAnimation 1.4s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}
.rank-track-stage.overpass-anim .rival-slot {
  animation: rivalPassDownAnimation 1.4s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

@keyframes userPassUpAnimation {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(0);
  }
  65% {
    transform: translateY(-58px) scale(1.08);
  }
  100% {
    transform: translateY(-58px) scale(1);
  }
}

@keyframes rivalPassDownAnimation {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(0);
  }
  65% {
    transform: translateY(58px) scale(0.95);
  }
  100% {
    transform: translateY(58px) scale(1);
  }
}

.rank-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px;
  border: 2.5px solid #1a1a1a;
  border-radius: 999px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 4px 4px 0 #1a1a1a;
  cursor: pointer;
  transition: transform 0.1s;
}
.rank-cta-btn.yellow {
  background: #f5c228;
  color: #1a1a1a;
}
.rank-cta-btn.red {
  background: #e84848;
  color: #fff;
}
.rank-cta-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #1a1a1a;
}

/* Low-end phones (see isLowEndDevice in lesson-fx.js): the big conic-gradient aura
   and the per-burst rings are the costliest fills, and the card, sound and a
   smaller confetti burst carry the moment without them. Also, no per-element
   will-change anywhere above: it gave every confetti piece and firework particle
   its own GPU layer, hundreds at once. */
.ekfx-combo-lite .ekfx-combo-aura,
.ekfx-combo-lite .ekfx-fw-ring,
.ekfx-combo-lite .ekfx-fw-flash {
  display: none;
}