/* ==========================================================================
   MATCH FX — celebration overlays + match phase chip
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* Overlay host                                                                */
/* -------------------------------------------------------------------------- */

.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
}

.fx-layer * {
  pointer-events: none !important;
}

.fx {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  animation: fxFade var(--fx-life, 1600ms) ease-out forwards;
}

@keyframes fxFade {
  0% { opacity: 0; }
  7% { opacity: 1; }
  76% { opacity: 1; }
  100% { opacity: 0; }
}

/* Per-event palette, resolved from the shared pastel tokens so both themes work. */
.fx-accent-mint { --fx-bg: var(--mint-bg); --fx-ink: var(--mint-ink); }
.fx-accent-peach { --fx-bg: var(--peach-bg); --fx-ink: var(--peach-ink); }
.fx-accent-coral { --fx-bg: var(--coral-bg); --fx-ink: var(--coral-ink); }
.fx-accent-butter { --fx-bg: var(--butter-bg); --fx-ink: var(--butter-ink); }
.fx-accent-sky { --fx-bg: var(--sky-bg); --fx-ink: var(--sky-ink); }

/* Soft wash behind the whole screen. */
/* Dimming veil so the board recedes and the celebration reads as a takeover.
   Light theme veils with paper, dark theme with near-black. */
.fx-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--paper) 58%, transparent);
  backdrop-filter: blur(9px) saturate(0.9);
  -webkit-backdrop-filter: blur(9px) saturate(0.9);
  animation: fxScrim var(--fx-life, 1600ms) ease-out forwards;
}

.fx-scrim-soft {
  background: color-mix(in srgb, var(--paper) 42%, transparent);
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
}

html.theme-dark .fx-scrim-soft {
  background: color-mix(in srgb, #05060a 78%, transparent);
}

html.theme-dark .fx-scrim {
  background: color-mix(in srgb, #0a0b0d 62%, transparent);
}

@keyframes fxScrim {
  0% { opacity: 0; }
  8% { opacity: 1; }
  74% { opacity: 1; }
  100% { opacity: 0; }
}

.fx-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 46% 40% at 50% 46%,
    color-mix(in srgb, var(--fx-bg) 88%, transparent), transparent 68%);
  animation: fxFlash 900ms ease-out forwards;
}

.fx-flash-card {
  background: radial-gradient(ellipse 52% 42% at 50% 48%,
    color-mix(in srgb, var(--fx-bg) 80%, transparent), transparent 72%);
}

.fx-flash-soft {
  background: radial-gradient(ellipse 60% 50% at 50% 50%,
    color-mix(in srgb, var(--fx-bg) 70%, transparent), transparent 72%);
}

@keyframes fxFlash {
  0% { opacity: 0; transform: scale(0.82); }
  26% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}

/* Expanding ring behind the badge. */
.fx-ring {
  position: absolute;
  width: min(62vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: clamp(4px, 0.9vw, 9px) solid var(--fx-ink);
  opacity: 0;
  animation: fxRing 1000ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fx-ring-tight {
  width: min(48vw, 420px);
}

@keyframes fxRing {
  0% { opacity: 0.85; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(2.15); }
}

/* Radiating spokes. */
.fx-rays {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.fx-rays span {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: clamp(3px, 0.5vw, 6px);
  height: min(38vh, 320px);
  margin-left: -2px;
  border-radius: 999px;
  background: linear-gradient(to top, transparent 10%, var(--fx-ink) 94%);
  transform-origin: 50% 100%;
  opacity: 0;
  animation: fxRay 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fxRay {
  0% { opacity: 0; transform: rotate(var(--a)) scaleY(0.12); }
  30% { opacity: 0.75; }
  100% { opacity: 0; transform: rotate(var(--a)) scaleY(1); }
}

/* Confetti shards. */
.fx-particles {
  position: absolute;
  inset: 0;
}

.fx-particles span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(7px, 1.1vw, 12px);
  height: clamp(7px, 1.1vw, 12px);
  border-radius: 3px;
  background: var(--fx-bg);
  border: 1px solid color-mix(in srgb, var(--fx-ink) 35%, transparent);
  opacity: 0;
  animation: fxParticle 1100ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  animation-delay: var(--d, 0ms);
}

@keyframes fxParticle {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35) rotate(0deg); }
  14% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -160px)))
      scale(1) rotate(var(--rot, 180deg));
  }
}

.fx-boundary-card {
  position: relative;
  display: grid;
  place-items: center;
  min-width: min(62vw, 350px);
  max-width: 94vw;
  padding: clamp(28px, 5vw, 54px) clamp(24px, 5vw, 52px);
  border-radius: 32px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--line-strong) 85%, transparent);
  box-shadow: 0 22px 65px rgba(29, 31, 36, 0.16);
  isolation: isolate;
  overflow: hidden;
}

.fx-boundary-card::before,
.fx-boundary-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fx-boundary-card::before {
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--mint-bg) 48%, transparent),
    transparent 34%,
    transparent 66%,
    color-mix(in srgb, var(--peach-bg) 42%, transparent));
  opacity: 0.65;
}

.fx-boundary-card::after {
  background: radial-gradient(circle at 50% 20%,
    color-mix(in srgb, var(--sky-bg) 42%, transparent),
    transparent 68%);
}

.fx-boundary-six { --card-trail-bg: var(--peach-bg); }
.fx-boundary-four { --card-trail-bg: var(--mint-bg); }

.fx-card-glow,
.fx-card-trail {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fx-card-glow {
  background: radial-gradient(circle at 50% 14%,
    color-mix(in srgb, var(--peach-bg) 70%, transparent),
    transparent 62%);
  opacity: 0;
  transform: scale(.86);
  animation: fxGlow 1000ms ease-out forwards;
}

.fx-card-trail {
  background: linear-gradient(115deg,
    color-mix(in srgb, var(--card-trail-bg) 44%, transparent),
    transparent 34%,
    transparent 84%);
  transform: translateX(-12%);
  rotate: 8deg;
  opacity: 0;
  animation: fxTrail 1300ms cubic-bezier(.22, 1, .36, 1) forwards;
}

.fx-card-top {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  margin-bottom: 0.7em;
}

.fx-card-icon {
  display: grid;
  place-items: center;
  width: clamp(52px, 7.4vw, 78px);
  height: clamp(52px, 7.4vw, 78px);
  border-radius: 24px;
  background: color-mix(in srgb, var(--peach-bg) 78%, var(--card));
  border: 1px solid color-mix(in srgb, var(--peach-ink) 16%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--peach-ink) 18%, transparent);
}

.fx-card-icon svg {
  width: 52%;
  height: 52%;
  stroke: var(--peach-ink);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.fx-card-body {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.14em;
  text-align: center;
  color: var(--ink);
}

.fx-card-num {
  color: #0f1115;
}

.fx-card-num {
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 16vw, 9.8rem);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.052em;
  font-variant-numeric: lining-nums tabular-nums;
}

.fx-card-tag {
  font-family: var(--font-body);
  font-size: clamp(0.82rem, 1.8vw, 1.05rem);
  font-weight: 800;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-left: 0.34em;
}

.fx-boundary-card { animation: fxCardIn 700ms cubic-bezier(.18, 1.25, .4, 1) backwards; }
.fx-boundary-four .fx-card-num { animation: fxNumFour 620ms cubic-bezier(.2, 1.45, .4, 1) backwards; }
.fx-boundary-six .fx-card-num { animation: fxNumSix 640ms cubic-bezier(.16, 1.35, .4, 1) backwards; }
.fx-card-top { animation: fxCardTopIn 520ms cubic-bezier(.2, 1.3, .4, 1) 90ms backwards; }
.fx-card-tag { animation: fxTagIn 340ms var(--ease) 170ms backwards; }

@keyframes fxCardIn {
  0% { opacity: 0; transform: scale(.9) translateY(2vh); }
  44% { opacity: 1; transform: scale(1.02) translateY(-.4vh); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes fxNumFour {
  0% { opacity: 0; transform: translateX(-0.14em) scale(.8) rotate(-7deg); }
  56% { opacity: 1; transform: translateX(0) scale(1.07) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes fxNumSix {
  0% { opacity: 0; transform: translateY(1.3vh) scale(.72) rotate(-4deg); }
  52% { opacity: 1; transform: translateY(-.5vh) scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes fxCardTopIn {
  0% { opacity: 0; transform: scale(.68) rotate(-6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes fxTagIn {
  0% { opacity: 0; transform: translateY(7px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fxGlow {
  0% { opacity: 0; transform: scale(.82); }
  35% { opacity: .65; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.1); }
}

@keyframes fxTrail {
  0% { opacity: 0; transform: translateX(-18%) scale(1.03); }
  38% { opacity: .95; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(12%) scale(1.07); }
}

html.theme-dark .fx-boundary-card {
  background: #0a0b0d;
  color: var(--ink);
  border-color: #23262b;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.52);
}

html.theme-dark .fx-card-num { color: #f4f6fb; }
}

/* -------------------------------------------------------------------------- */
/* Badge                                                                       */
/* -------------------------------------------------------------------------- */

.fx-badge {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0;
  transform: translateY(-1.5vh);
  text-align: center;
  padding: 0 5vw;
  animation: fxBadgeIn 640ms cubic-bezier(0.2, 1.5, 0.4, 1) backwards;
}

@keyframes fxBadgeIn {
  0% { opacity: 0; transform: translateY(-1.5vh) scale(0.32) rotate(-9deg); }
  40% { opacity: 1; transform: translateY(-1.5vh) scale(1.12) rotate(2.5deg); }
  58% { transform: translateY(-1.5vh) scale(0.97) rotate(-1deg); }
  74% { transform: translateY(-1.5vh) scale(1.03) rotate(0.5deg); }
  100% { transform: translateY(-1.5vh) scale(1) rotate(0deg); }
}

.fx-emoji {
  display: grid;
  place-items: center;
  width: clamp(54px, 8vw, 82px);
  height: clamp(54px, 8vw, 82px);
  border-radius: 50%;
  background: var(--fx-bg);
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--fx-ink) 22%, transparent),
    0 12px 34px color-mix(in srgb, var(--fx-ink) 30%, transparent);
  animation: fxEmojiPop 620ms cubic-bezier(0.2, 1.6, 0.4, 1) 90ms backwards;
}

@keyframes fxEmojiPop {
  0% { opacity: 0; transform: scale(0.2) rotate(-25deg); }
  60% { opacity: 1; transform: scale(1.16) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.fx-num {
  font-family: var(--font-display);
  font-size: clamp(6.5rem, 24vw, 13rem);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.055em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--fx-ink);
  text-shadow: 0 18px 60px color-mix(in srgb, var(--fx-ink) 34%, transparent);
}

.fx-num-md {
  font-size: clamp(6rem, 22vw, 12rem);
}

.fx-tag {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 2.4vw, 1.6rem);
  font-weight: 800;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--fx-ink);
  padding-left: 0.34em;
  margin-top: 0.05em;
}

.fx-tag-lg {
  font-size: clamp(1.2rem, 3.4vw, 2.2rem);
}

.fx-tag-out {
  font-size: clamp(1.3rem, 3.8vw, 2.4rem);
}

.fx-sub {
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 1.7vw, 1.05rem);
  font-weight: 600;
  color: var(--ink-2);
  margin-top: 0.5em;
  max-width: 34ch;
}

/* -------------------------------------------------------------------------- */
/* Wickets — three bold stumps that hammer in and lose their bails              */
/* -------------------------------------------------------------------------- */

.fx-wicket .fx-badge {
  gap: 0.55em;
  transform: translateY(1vh);
  animation: fxBadgeInSoft 520ms ease-out backwards;
}

@keyframes fxBadgeInSoft {
  0% { opacity: 0; transform: translateY(1vh) scale(0.9); }
  100% { opacity: 1; transform: translateY(1vh) scale(1); }
}

.fx-stumps {
  width: min(44vw, 300px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 16px 40px color-mix(in srgb, var(--fx-ink) 40%, transparent));
}

.fx-stump {
  fill: var(--fx-ink);
  transform-origin: 50% 100%;
  animation:
    fxStumpUp 520ms cubic-bezier(0.2, 1.35, 0.4, 1) backwards,
    fxStumpRing 520ms ease-in-out 2;
  animation-delay: var(--sd, 0ms), calc(var(--sd, 0ms) + 560ms);
}

@keyframes fxStumpUp {
  0% { opacity: 0; transform: translateY(34px) scaleY(0.5); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}

@keyframes fxStumpRing {
  0%, 100% { transform: translateX(0); }
  32% { transform: translateX(-3.5px); }
  72% { transform: translateX(3.5px); }
}

.fx-bail {
  fill: var(--fx-ink);
  animation: fxBailFly 900ms cubic-bezier(0.3, 0.7, 0.4, 1) 620ms forwards;
}

@keyframes fxBailFly {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--bx, 40px), -52px) rotate(var(--br, 240deg)); }
}

/* -------------------------------------------------------------------------- */
/* Break / interval announcement                                               */
/* -------------------------------------------------------------------------- */

.fx-break .fx-badge {
  gap: 0.45em;
  animation: fxBadgeInSoft 520ms ease-out backwards;
}

.fx-icon {
  display: grid;
  place-items: center;
  width: clamp(64px, 9vw, 96px);
  height: clamp(64px, 9vw, 96px);
  border-radius: 28px;
  background: var(--fx-bg);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--fx-ink) 20%, transparent),
    0 14px 40px color-mix(in srgb, var(--fx-ink) 26%, transparent);
}

.fx-icon svg {
  width: 52%;
  height: 52%;
  stroke: var(--fx-ink);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* -------------------------------------------------------------------------- */
/* Reduced motion — keep the meaning, drop the movement                        */
/* -------------------------------------------------------------------------- */

.fx-static .fx-flash,
.fx-static .fx-ring,
.fx-static .fx-rays,
.fx-static .fx-particles {
  display: none;
}

.fx-static .fx-badge,
.fx-static .fx-emoji,
.fx-static .fx-stump,
.fx-static .fx-bail {
  animation: none !important;
}

.fx-static .fx-bail { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .fx-badge,
  .fx-emoji,
  .fx-stump,
  .fx-bail,
  .fx-rays span,
  .fx-particles span {
    animation: none !important;
  }

  .fx-flash,
  .fx-ring,
  .fx-rays,
  .fx-particles { display: none; }
}

/* -------------------------------------------------------------------------- */
/* Front-board match phase chip                                                */
/* -------------------------------------------------------------------------- */

.kiosk-phase {
  --chip-bg: var(--sky-bg);
  --chip-ink: var(--sky-ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 0.85em;
  padding: 7px 18px 7px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip-bg) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip-ink) 26%, transparent);
  color: var(--chip-ink);
  animation: kioskPhaseIn 420ms var(--ease) backwards;
}

.kiosk-phase[hidden] { display: none; }

.kiosk-phase.tone-break { --chip-bg: var(--sky-bg); --chip-ink: var(--sky-ink); }
.kiosk-phase.tone-delay { --chip-bg: var(--lav-bg); --chip-ink: var(--lav-ink); }
.kiosk-phase.tone-result { --chip-bg: var(--butter-bg); --chip-ink: var(--butter-ink); }
.kiosk-phase.tone-scheduled { --chip-bg: var(--lav-bg); --chip-ink: var(--lav-ink); }

@keyframes kioskPhaseIn {
  0% { opacity: 0; transform: translateY(8px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.kiosk-phase-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--chip-ink) 16%, transparent);
  flex-shrink: 0;
}

.kiosk-phase-icon svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.kiosk-phase-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
  min-width: 0;
  text-align: left;
}

.kiosk-phase-label {
  font-family: var(--kiosk-font);
  font-size: clamp(0.86rem, 1.7vw, 1.05rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.kiosk-phase-detail {
  font-family: var(--kiosk-font);
  font-size: clamp(0.72rem, 1.35vw, 0.86rem);
  font-weight: 600;
  opacity: 0.82;
}

.kiosk-phase-detail:empty { display: none; }

/* Chase line — only rendered when a target exists. */
.kiosk-chase {
  margin-top: 0.5em;
  font-family: var(--kiosk-font-score);
  font-size: clamp(0.9rem, 1.9vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--kiosk-ink);
  font-variant-numeric: tabular-nums;
}

.kiosk-chase[hidden] { display: none; }

.kiosk-chase strong { color: var(--kiosk-live); }

@media (max-width: 720px) {
  .fx-badge { padding: 0 8vw; }
  .kiosk-phase { margin-top: 0.7em; padding: 6px 14px 6px 7px; }
}