/* Custom Horror Game Styles */

@keyframes pulseBlood {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.6; }
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-2px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.animate-shake {
  animation: shake 0.2s infinite;
}

@keyframes scaleUp {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-scaleUp {
  animation: scaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Vignette Dark Edges - softened for balanced atmospheric lighting */
#vignette {
  background: radial-gradient(circle, transparent 48%, rgba(0, 0, 0, 0.6) 88%, rgba(0,0,0,0.9) 100%);
}

#sanity-blood {
  background: radial-gradient(circle, transparent 35%, rgba(120, 10, 20, 0.4) 80%, rgba(180, 0, 0, 0.7) 100%);
}

/* Keypad Button */
.key-btn {
  background: #201a16;
  border: 1px solid #4a382c;
  color: #e5d8cc;
  font-family: monospace;
  font-size: 1.25rem;
  font-weight: bold;
  height: 3rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 0 #120e0c;
  transition: all 0.1s ease;
  user-select: none;
}

.key-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #120e0c;
  filter: brightness(1.2);
}

/* Inventory Item Card */
.inv-slot {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.875rem;
  background: #181310;
  border: 1px solid #3d2b21;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s ease;
  cursor: pointer;
}

.inv-slot.active {
  border-color: #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
  background: #251b14;
}

.inv-slot:hover {
  border-color: #78523c;
}

/* Chemical Lab Vials */
.vial {
  width: 3.5rem;
  height: 5.5rem;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 0.5rem 0.5rem 1.25rem 1.25rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.vial:hover {
  transform: translateY(-4px);
}

.vial.selected {
  border-color: #f59e0b;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
}

.vial-liquid {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70%;
  transition: height 0.3s ease;
}