@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');

* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  /* Background warna Midnight Wine / Black Rose */
  background: radial-gradient(circle at 50% 30%, #200b14 0%, #0d0408 100%);
  background-color: #0d0408;
  touch-action: manipulation;
}

.font-mono-tech {
  font-family: 'Share Tech Mono', monospace;
}

/* ================= MUSIC FLOATING BUTTON ================= */
.music-disc-btn {
  background-color: #2a0e1b;
  border: 1px solid rgba(244, 63, 94, 0.3);
  cursor: pointer;
}

.music-disc-btn.playing {
  background-color: #3f1227;
  box-shadow: 0 0 18px rgba(244, 63, 94, 0.45);
  border-color: rgba(251, 113, 133, 0.6);
}

.bar {
  display: inline-block;
  width: 2.5px;
  background-color: #fda4af;
  border-radius: 9999px;
  transform-origin: bottom;
}

@media (min-width: 640px) {
  .bar {
    width: 3px;
  }
}

.music-disc-btn.playing .bar-1 {
  animation: equalize 0.8s ease-in-out infinite alternate;
}
.music-disc-btn.playing .bar-2 {
  animation: equalize 0.6s ease-in-out infinite alternate 0.15s;
}
.music-disc-btn.playing .bar-3 {
  animation: equalize 1s ease-in-out infinite alternate 0.3s;
}
.music-disc-btn.playing .bar-4 {
  animation: equalize 0.7s ease-in-out infinite alternate 0.1s;
}

@keyframes equalize {
  0% { height: 3px; }
  100% { height: 14px; }
}

@media (min-width: 640px) {
  @keyframes equalize {
    0% { height: 4px; }
    100% { height: 16px; }
  }
}

/* ================= KEYPAD & BUTTONS ================= */
.vault-btn {
  transition: all 0.12s ease;
  background: linear-gradient(145deg, #240f1a, #15070e);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.08);
  user-select: none;
  cursor: pointer;
}

.vault-btn:active {
  transform: scale(0.92);
  background: #3b1429;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.5);
}

/* Glowing container effects (Romantic Rose Glow) */
.glow-romantic {
  box-shadow: 0 0 35px rgba(225, 29, 72, 0.2), 0 0 80px rgba(136, 19, 55, 0.15);
}

.glow-gold {
  box-shadow: 0 0 35px rgba(244, 63, 94, 0.25), 0 0 70px rgba(251, 113, 133, 0.15);
}

/* Shake Animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

.shake {
  animation: shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
}

/* Custom Minimal Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(20, 5, 12, 0.6);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(244, 63, 94, 0.4);
  border-radius: 9999px;
}