/* ═══════════════════════════════════════════════
   HAND CRICKET — effects.css
   Glassmorphism, glows, shadows, color flashes
   ═══════════════════════════════════════════════ */

/* ═══ Color flash overlays (full-screen, brief) ═══ */
.fx-flash{
  position:fixed;inset:0;pointer-events:none;z-index:9998;
  opacity:0;
}
.fx-flash.fire{
  animation: fxFlashFire .5s var(--ease-smooth);
}
@keyframes fxFlashFire{
  0%{opacity:0;}
  15%{opacity:0.4;}
  100%{opacity:0;}
}
.fx-flash.red{background:radial-gradient(circle,rgba(239,68,68,0.5) 0%,transparent 70%);}
.fx-flash.gold{background:radial-gradient(circle,rgba(251,191,36,0.5) 0%,transparent 70%);}
.fx-flash.green{background:radial-gradient(circle,rgba(34,197,94,0.4) 0%,transparent 70%);}
.fx-flash.blue{background:radial-gradient(circle,rgba(59,130,246,0.4) 0%,transparent 70%);}

/* ═══ Floating score indicator (+N) ═══ */
.fx-score-float{
  position:absolute;
  font-family:'Bebas Neue';
  font-size:2.5rem;
  font-weight:800;
  pointer-events:none;
  z-index:45;
  text-shadow:0 2px 8px rgba(0,0,0,0.4);
  animation: scoreFloat 1.2s var(--ease-decel) forwards;
}
.fx-score-float.runs{color:#22c55e;}
.fx-score-float.six{color:#fbbf24;font-size:3.5rem;}
.fx-score-float.four{color:#f97316;font-size:3rem;}
.fx-score-float.out{color:#ef4444;font-size:2rem;}
@keyframes scoreFloat{
  0%{opacity:0;transform:translateY(0) scale(0.5);}
  20%{opacity:1;transform:translateY(-10px) scale(1.2);}
  40%{transform:translateY(-20px) scale(1);}
  100%{opacity:0;transform:translateY(-80px) scale(0.8);}
}

/* ═══ Glow ring (pulsing border) ═══ */
.fx-glow-ring{
  position:absolute;inset:-4px;border-radius:inherit;
  pointer-events:none;
  animation: glowRing 1.5s var(--ease-smooth) infinite;
}
@keyframes glowRing{
  0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,0.4);}
  50%{box-shadow:0 0 0 6px rgba(249,115,22,0);}
}

/* ═══ Glassmorphism enhancement ═══ */
.glass{
  background:rgba(255,255,255,0.06) !important;
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,0.08);
}
body.dark .glass{
  background:rgba(15,22,35,0.7) !important;
}

/* ═══ Neon text glow ═══ */
.fx-neon-text{
  text-shadow:
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 20px currentColor;
}

/* ═══ Shadow systems ═══ */
.fx-shadow-sm{box-shadow:0 1px 4px rgba(0,0,0,0.06);}
.fx-shadow-md{box-shadow:0 4px 16px rgba(0,0,0,0.08);}
.fx-shadow-lg{box-shadow:0 12px 40px rgba(0,0,0,0.12);}
.fx-shadow-xl{box-shadow:0 24px 64px rgba(0,0,0,0.18);}
body.dark .fx-shadow-sm{box-shadow:0 1px 4px rgba(0,0,0,0.3);}
body.dark .fx-shadow-md{box-shadow:0 4px 16px rgba(0,0,0,0.4);}
body.dark .fx-shadow-lg{box-shadow:0 12px 40px rgba(0,0,0,0.5);}
body.dark .fx-shadow-xl{box-shadow:0 24px 64px rgba(0,0,0,0.6);}

/* ═══ Theme ripple effect ═══ */
.fx-theme-ripple{
  position:fixed;
  border-radius:50%;
  pointer-events:none;
  z-index:9997;
  animation: themeRipple .8s var(--ease-decel) forwards;
}
@keyframes themeRipple{
  0%{transform:scale(0);opacity:0.6;}
  100%{transform:scale(50);opacity:0;}
}

/* ═══ Vignette (subtle dark edges) ═══ */
.fx-vignette{
  position:fixed;inset:0;pointer-events:none;z-index:9996;
  background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,0.15) 100%);
  opacity:0;
  transition:opacity .3s;
}
.fx-vignette.on{opacity:1;}

/* ═══ Number grid impact effect ═══ */
.num-grid.impact{
  animation: gridImpact .3s var(--ease-smooth);
}
@keyframes gridImpact{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.02);}
}

/* ═══ Spotlight effect (for important moments) ═══ */
.fx-spotlight{
  position:fixed;inset:0;pointer-events:none;z-index:9995;
  background:radial-gradient(circle at 50% 50%,transparent 30%,rgba(0,0,0,0.4) 80%);
  animation: spotlightFade .8s var(--ease-smooth);
}
@keyframes spotlightFade{
  0%{opacity:0;}
  30%{opacity:1;}
  100%{opacity:0;}
}