/* 1930s Cartoon Horror Theme Styles */
@keyframes filmFlicker {
  0% { opacity: 0.22; transform: translate(0, 0); }
  25% { opacity: 0.28; transform: translate(-1px, 1px); }
  50% { opacity: 0.19; transform: translate(1px, -1px); }
  75% { opacity: 0.26; transform: translate(-1px, -1px); }
  100% { opacity: 0.23; transform: translate(0, 0); }
}

@keyframes pulseRed {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.85; }
}

#vignette {
  background: radial-gradient(ellipse at center, transparent 40%, rgba(10, 8, 14, 0.95) 90%);
}

#film-grain {
  background-image: radial-gradient(#000 15%, transparent 16%), radial-gradient(#d5c399 15%, transparent 16%);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
  animation: filmFlicker 0.15s infinite;
}

.char-card.active {
  border-color: #ffd452 !important;
  background-color: #3b2b4d !important;
  box-shadow: 0 0 20px rgba(255, 212, 82, 0.4);
}

.glitch-active {
  animation: glitchAnim 0.2s infinite;
}

@keyframes glitchAnim {
  0% { transform: translate(0); filter: hue-rotate(0deg); }
  20% { transform: translate(-3px, 3px); filter: hue-rotate(90deg) saturate(200%); }
  40% { transform: translate(-3px, -3px); }
  60% { transform: translate(3px, 3px); filter: hue-rotate(180deg); }
  80% { transform: translate(3px, -3px); }
  100% { transform: translate(0); filter: hue-rotate(0deg); }
}

/* Custom locker peep gradient */
.locker-slits {
  background: repeating-linear-gradient(
    0deg,
    rgba(10, 8, 12, 0.98),
    rgba(10, 8, 12, 0.98) 40px,
    rgba(30, 20, 25, 0.2) 40px,
    rgba(30, 20, 25, 0.2) 65px
  );
}

/* Touch controls disable browser behaviors */
button, #joystick-zone {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}