/* ═══════════════════════════════════════════════
   HAND CRICKET — animations.css
   Scoped cinematic overlays + feed z-index fix
   (The base keyframes are already in main.css.
    This file adds SCOPED versions of the overlay
    classes so they don't cover the feed —
    fixes the 1-bowl-lag bug where the OUT message
    was hidden behind the fullscreen overlay.)
   ═══════════════════════════════════════════════ */

/* ═══ Feed stays ABOVE cinematic overlays ═══ */
/* The .gm container holds: numGrid, feed, statusBox, verifyBox.
   Cinematic overlays (.gm-show-flash, .gm-out-text, .gm-six-text,
   .gm-particle-burst) are scoped to .gm at z-index 30-35.
   The feed is at z-index 40 so it's ALWAYS visible. */
.feed{
  position:relative;
  z-index:40;
}

/* ═══ "SHOW!" flash — scoped to .gm (not gameScreen) ═══ */
.gm-show-flash{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue';font-size:4.5rem;letter-spacing:8px;color:#fff;
  background:radial-gradient(circle,rgba(249,115,22,.35) 0%,transparent 65%);
  pointer-events:none;z-index:30;text-shadow:0 0 30px rgba(249,115,22,.6);
  animation:showFlash .55s cubic-bezier(.34,1.56,.64,1);
}

/* ═══ Particle burst — scoped to .gm ═══ */
.gm-particle-burst{
  position:absolute;left:50%;top:55%;width:9px;height:9px;border-radius:50%;
  background:#fbbf24;pointer-events:none;z-index:32;
  transform:translate(-50%,-50%);
  animation:burst .75s cubic-bezier(.34,1.56,.64,1) forwards;
}
.gm-particle-burst.out{background:#ef4444;width:11px;height:11px;}

/* ═══ "SIX!" celebration — scoped to .gm ═══ */
.gm-six-text{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue';font-size:5.5rem;letter-spacing:8px;color:#fbbf24;
  text-shadow:0 0 50px rgba(251,191,36,.9),0 4px 16px rgba(0,0,0,.5);
  pointer-events:none;z-index:35;
  animation:sixText 1s cubic-bezier(.34,1.56,.64,1);
}

/* ═══ "OUT!" text — scoped to .gm ═══ */
.gm-out-text{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue';font-size:5rem;letter-spacing:10px;color:#ef4444;
  text-shadow:0 0 50px rgba(239,68,68,.9),0 4px 16px rgba(0,0,0,.5);
  pointer-events:none;z-index:35;
  animation:outText .9s cubic-bezier(.34,1.56,.64,1);
}

/* ═══ Confetti piece (for win screen) ═══ */
.confetti-piece{
  position:absolute;width:8px;height:8px;border-radius:2px;
  animation:confettiFall 2s linear forwards;
  pointer-events:none;z-index:10;
}

/* ═══ Mobile overrides for cinematic text ═══ */
@media(max-width:500px){
  .gm-show-flash{font-size:3.2rem;}
  .gm-six-text{font-size:4rem;}
  .gm-out-text{font-size:3.5rem;}
}