@font-face {
  font-family: 'Anhork';
  src: url('../assets/fonts/anhork.otf') format('opentype'),
       url('../assets/fonts/anhork.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');

html, body {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  height: 100%;
}

body, button, input, select, textarea, a, p, span, div {
  font-family: 'Anhork', serif !important;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

h1, h2, h3, .font-horror {
  font-family: 'Anhork', serif !important;
  line-height: 1.2;
  letter-spacing: 0.1em;
}

.glitch-overlay {
  background: radial-gradient(circle, transparent 40%, rgba(150, 0, 0, 0.4) 100%);
  animation: pulse-red 2s infinite alternate;
}

@keyframes pulse-red {
  0% {
    box-shadow: inset 0 0 50px rgba(200, 0, 0, 0.2);
  }

  100% {
    box-shadow: inset 0 0 120px rgba(200, 0, 0, 0.6);
  }
}

.noise-bg {
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
  animation: static-noise 0.2s steps(5) infinite;
}

@keyframes static-noise {
  0% { background-position: 0% 0%; }
  20% { background-position: 25% 10%; }
  40% { background-position: -15% -20%; }
  60% { background-position: 10% 25%; }
  80% { background-position: -25% -10%; }
  100% { background-position: 0% 0%; }
}

.pulse-ring {
  box-shadow: 0 0 0 rgba(220, 38, 38, 0.7);
  animation: ripple 1.5s infinite;
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7), 0 0 0 10px rgba(220, 38, 38, 0.5);
  }

  100% {
    box-shadow: 0 0 0 20px rgba(220, 38, 38, 0), 0 0 0 40px rgba(220, 38, 38, 0);
  }
}

.glitch-flicker {
  animation: glitch-flicker 3s infinite;
}

@keyframes glitch-flicker {

  0%,
  9.99%,
  12%,
  39.99%,
  42%,
  44.99%,
  47%,
  79.99%,
  82%,
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) skewX(0);
    filter: drop-shadow(0 0 15px rgba(220, 38, 38, 0.5));
  }

  10%,
  11.99% {
    opacity: 0.5;
    transform: translate(-5px, 3px) scale(1.05) skewX(-15deg);
    filter: drop-shadow(0 0 30px rgba(255, 0, 0, 1)) hue-rotate(-40deg);
  }

  40%,
  41.99% {
    opacity: 0.2;
    transform: translate(6px, -4px) scale(1.1) skewX(20deg);
    filter: drop-shadow(0 0 40px rgba(255, 0, 0, 1)) hue-rotate(40deg);
  }

  45%,
  46.99% {
    opacity: 0.8;
    transform: translate(-3px, 5px) scale(0.95) skewX(-5deg);
    filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.8));
  }

  80%,
  81.99% {
    opacity: 0.4;
    transform: translate(4px, 4px) scale(1.08) skewX(10deg);
    filter: drop-shadow(0 0 35px rgba(200, 0, 0, 1)) invert(20%);
  }
}

/* Fix for English "Unstable Connection" text */
.lang-en [data-i18n="unstable"] {
  letter-spacing: 0.25em !important;
  font-size: 1rem !important; /* Slightly smaller to fit one line */
  white-space: nowrap;
}

@media (min-width: 768px) {
  .lang-en [data-i18n="unstable"] {
    font-size: 1.25rem !important;
  }
}

/* Fix for English "Ritual Awaits" text in portal screen */
.lang-en [data-i18n="ritual_awaits"] {
  font-size: 1.75rem !important; /* Reduced from text-4xl (2.25rem) */
  line-height: 1.2;
  max-width: 24rem !important; /* Increased from max-w-xs (20rem) */
}

@media (min-width: 768px) {
  .lang-en [data-i18n="ritual_awaits"] {
    font-size: 2.25rem !important; /* Reduced from md:text-5xl (3rem) */
  }
}