/* Safe Area Utilities for Mobile PWA / Fullscreen WebView */
.pt-safe {
  padding-top: calc(12px + env(safe-area-inset-top));
}
.pb-safe {
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
}
::-webkit-scrollbar-thumb {
  background: rgba(244, 63, 94, 0.4);
  border-radius: 4px;
}

/* Glitch Overlay Animation when Paralysis Hits High Level */
.glitch-overlay {
  background: radial-gradient(circle, rgba(225, 29, 72, 0.25) 0%, rgba(10, 9, 16, 0.85) 100%);
  animation: glitchFlicker 0.2s infinite alternate;
}

@keyframes glitchFlicker {
  0% {
    opacity: 0.6;
    transform: scale(1) translate(0, 0);
    filter: hue-rotate(0deg);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.02) translate(-2px, 2px);
    filter: hue-rotate(90deg);
  }
  100% {
    opacity: 0.7;
    transform: scale(0.99) translate(2px, -1px);
    filter: hue-rotate(0deg);
  }
}

/* Story Card Pulsing Aura */
.glow-pulse-rose {
  box-shadow: 0 0 25px rgba(225, 29, 72, 0.3);
}

.glow-pulse-amber {
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.3);
}

/* Custom Animations */
@keyframes floatSpin {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(180deg); }
  100% { transform: translateY(0px) rotate(360deg); }
}

.animate-float-spin {
  animation: floatSpin 6s ease-in-out infinite;
}

/* Shake Effect for Mistakes */
.shake-screen {
  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* Divine Holy Shimmer Effect */
.holy-shimmer {
  box-shadow: 0 0 35px rgba(251, 191, 36, 0.6);
  border-color: rgba(251, 191, 36, 0.8) !important;
}