/* FX LAYER */

#fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 900;
}

.fx {
  position: fixed !important;
  transition:
    transform .32s cubic-bezier(.2,.65,.35,1),
    opacity .32s ease-in;
  will-change: transform, opacity;
  box-shadow: 0 6px 16px rgba(0,0,0,.6);
}

/* CHKOBBA */

.chkobba-flash {
  position: fixed;
  top: 42%;
  left: 50%;
  transform: translate(-50%,-50%) scale(0);
  font-size: 3.2rem;
  font-weight: 900;
  letter-spacing: 5px;
  color: var(--gold);
  text-shadow:
    0 0 26px var(--gold),
    0 0 60px rgba(212,175,55,.55);
  pointer-events: none;
  z-index: 1100;
  animation: chkobbaPop 1.15s ease-out forwards;
}

@keyframes chkobbaPop {
  0% {
    transform: translate(-50%,-50%) scale(0);
    opacity: 0;
  }
  35% {
    transform: translate(-50%,-50%) scale(1.25);
    opacity: 1;
  }
  70% {
    transform: translate(-50%,-50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%,-50%) scale(.9);
    opacity: 0;
  }
}

/* SABAA EL HAYYA */

.hayya-flash {
  position: fixed;
  top: 42%;
  left: 50%;
  transform: translate(-50%,-50%) scale(0);
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: 3px;
  color: #ffdf70;
  text-shadow:
    0 0 15px #ffd700,
    0 0 35px #ffae00,
    0 0 65px rgba(255,174,0,.7);
  pointer-events: none;
  z-index: 1100;
  white-space: nowrap;
  animation: hayyaPop 1.4s ease-out forwards;
}

@keyframes hayyaPop {
  0% {
    transform: translate(-50%,-50%) scale(0);
    opacity: 0;
  }
  30% {
    transform: translate(-50%,-50%) scale(1.3);
    opacity: 1;
  }
  65% {
    transform: translate(-50%,-50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%,-50%) scale(.9);
    opacity: 0;
  }
}

/* LAST TURN */

.last-turn-label {
  display: none;
  margin-left: 7px;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .7px;
  color: #ffdf85;
  background: rgba(212,175,55,.13);
  border: 1px solid rgba(212,175,55,.45);
  border-radius: 6px;
  padding: 3px 7px;
  animation: lastTurnPulse 2s ease-in-out infinite;
}

@keyframes lastTurnPulse {
  0%, 100% {
    box-shadow: 0 0 2px rgba(212,175,55,.1);
  }
  50% {
    box-shadow: 0 0 8px rgba(212,175,55,.3);
  }
}