/*
 * FactFall FX styles — combo popups + full-screen flash overlay.
 * The particle layer is pure <canvas> (see fx.js); these rules only cover the
 * DOM-based juice. All elements are aria-hidden, fixed, and never capture input.
 */

.fx-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483646;
}

/* ---- full-screen tint pulse ------------------------------------------- */
.fx-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483645;
  opacity: 0;
  background: transparent;
  transition: opacity 260ms ease-out;
  will-change: opacity;
}

.fx-flash.fx-flash--good {
  background: radial-gradient(circle at 50% 60%, rgba(57, 217, 138, 0.35), rgba(57, 217, 138, 0) 62%);
}

.fx-flash.fx-flash--bad {
  background: radial-gradient(circle at 50% 60%, rgba(255, 107, 88, 0.4), rgba(255, 107, 88, 0) 62%);
}

.fx-flash.is-on {
  opacity: 1;
  transition: opacity 70ms ease-out;
}

/* ---- combo milestone popup -------------------------------------------- */
.fx-combo {
  position: fixed;
  z-index: 2147483647;
  margin: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  color: var(--mint, #39d98a);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.7rem;
  font-weight: 950;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.45),
    0 0 16px rgba(57, 217, 138, 0.55);
  animation: fx-combo-rise 900ms cubic-bezier(0.16, 0.84, 0.3, 1) forwards;
  will-change: transform, opacity;
}

.fx-combo--hot {
  color: var(--amber, #f4b740);
  font-size: 1.95rem;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.45),
    0 0 18px rgba(244, 183, 64, 0.6);
}

.fx-combo--fire {
  color: var(--amber, #f4b740);
  font-size: 2.25rem;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.5),
    0 0 22px rgba(255, 107, 88, 0.7),
    0 0 38px rgba(244, 183, 64, 0.5);
  animation-name: fx-combo-rise-big;
}

@keyframes fx-combo-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, -36%) scale(0.6);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -52%) scale(1.12);
  }
  40% {
    transform: translate(-50%, -60%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -128%) scale(0.94);
  }
}

@keyframes fx-combo-rise-big {
  0% {
    opacity: 0;
    transform: translate(-50%, -36%) scale(0.55) rotate(-4deg);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -54%) scale(1.25) rotate(2deg);
  }
  44% {
    transform: translate(-50%, -64%) scale(1.05) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -150%) scale(1) rotate(0deg);
  }
}

/* ---- reduced motion: hard-mute the DOM juice -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fx-flash,
  .fx-flash.is-on {
    transition: none;
    opacity: 0;
    background: transparent;
  }

  .fx-combo {
    animation: none;
    opacity: 0;
    display: none;
  }
}