/* Base & Typography */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Tajawal', sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.3);
  border-radius: 9999px;
}

/* Jumpscare Glitch Animation */
@keyframes glitch {
  0% { transform: scale(1.4) translate(0); filter: hue-rotate(0deg) contrast(150%); }
  20% { transform: scale(1.8) translate(-10px, 10px); filter: hue-rotate(90deg) contrast(200%); }
  40% { transform: scale(1.6) translate(15px, -10px); filter: hue-rotate(180deg) invert(30%); }
  60% { transform: scale(2.0) translate(-15px, -5px); filter: hue-rotate(270deg) contrast(300%); }
  80% { transform: scale(1.7) translate(10px, 5px); filter: hue-rotate(360deg); }
  100% { transform: scale(1.5) translate(0); }
}

.jumpscare-active #jumpscare-img-container {
  animation: glitch 0.08s infinite alternate;
}

/* Touch Control Aesthetics */
#joystick-base {
  touch-action: none;
}

.bot-card.active {
  border-color: #f59e0b;
  background-color: rgba(245, 158, 11, 0.15);
  opacity: 1;
}

.mode-btn.active {
  border-color: #f59e0b;
  background-color: rgba(245, 158, 11, 0.2);
}

/* CRT / Backrooms Vignette Overlay */
#game-container::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 45%, rgba(0, 0, 0, 0.75) 100%);
  box-shadow: inset 0 0 100px rgba(0,0,0,0.8);
}