/* Neon Cyberpunk Styles & Custom Pad Animations */

@layer utilities {
  .pt-safe {
    padding-top: env(safe-area-inset-top, 12px);
  }
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 12px);
  }
}

/* Modal Overlay Display System */
.overlay {
  display: flex;
}
.overlay.hidden {
  display: none !important;
}

/* Neon Pad Button Base & Color Variants */
.pad-btn {
  transform: translateZ(0);
  outline: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.5);
}

.pad-shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* Pad 0: Cyan */
.pad-cyan {
  border-color: rgba(0, 243, 255, 0.3);
}
.pad-cyan:hover, .pad-cyan:focus-visible {
  border-color: rgba(0, 243, 255, 0.7);
  box-shadow: 0 0 20px rgba(0, 243, 255, 0.3), inset 0 0 15px rgba(0, 243, 255, 0.2);
}
.pad-cyan.active, .pad-cyan:active {
  background-color: #00f3ff !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 45px #00f3ff, 0 0 90px #00f3ff, inset 0 0 25px #ffffff !important;
  transform: scale(0.95);
}
.pad-cyan.active * {
  color: #0b0c10 !important;
  text-shadow: none !important;
}

/* Pad 1: Magenta */
.pad-magenta {
  border-color: rgba(255, 0, 85, 0.3);
}
.pad-magenta:hover, .pad-magenta:focus-visible {
  border-color: rgba(255, 0, 85, 0.7);
  box-shadow: 0 0 20px rgba(255, 0, 85, 0.3), inset 0 0 15px rgba(255, 0, 85, 0.2);
}
.pad-magenta.active, .pad-magenta:active {
  background-color: #ff0055 !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 45px #ff0055, 0 0 90px #ff0055, inset 0 0 25px #ffffff !important;
  transform: scale(0.95);
}
.pad-magenta.active * {
  color: #0b0c10 !important;
  text-shadow: none !important;
}

/* Pad 2: Yellow */
.pad-yellow {
  border-color: rgba(255, 230, 0, 0.3);
}
.pad-yellow:hover, .pad-yellow:focus-visible {
  border-color: rgba(255, 230, 0, 0.7);
  box-shadow: 0 0 20px rgba(255, 230, 0, 0.3), inset 0 0 15px rgba(255, 230, 0, 0.2);
}
.pad-yellow.active, .pad-yellow:active {
  background-color: #ffe600 !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 45px #ffe600, 0 0 90px #ffe600, inset 0 0 25px #ffffff !important;
  transform: scale(0.95);
}
.pad-yellow.active * {
  color: #0b0c10 !important;
  text-shadow: none !important;
}

/* Pad 3: Green */
.pad-green {
  border-color: rgba(0, 255, 102, 0.3);
}
.pad-green:hover, .pad-green:focus-visible {
  border-color: rgba(0, 255, 102, 0.7);
  box-shadow: 0 0 20px rgba(0, 255, 102, 0.3), inset 0 0 15px rgba(0, 255, 102, 0.2);
}
.pad-green.active, .pad-green:active {
  background-color: #00ff66 !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 45px #00ff66, 0 0 90px #00ff66, inset 0 0 25px #ffffff !important;
  transform: scale(0.95);
}
.pad-green.active * {
  color: #0b0c10 !important;
  text-shadow: none !important;
}

/* Mode Buttons Styling */
.mode-btn.active {
  background: linear-gradient(135deg, rgba(0, 243, 255, 0.2), rgba(255, 0, 85, 0.2));
  border: 1px solid rgba(0, 243, 255, 0.5);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

/* Screen Shake Effect for Wrong Input */
@keyframes screen-shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-8px, 5px) rotate(-1deg); }
  40% { transform: translate(8px, -4px) rotate(1deg); }
  60% { transform: translate(-6px, 3px) rotate(-0.5deg); }
  80% { transform: translate(5px, -2px) rotate(0.5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

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

/* Dynamic Floating Note / Score Indicator */
.score-pop {
  position: absolute;
  pointer-events: none;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  color: #00f3ff;
  text-shadow: 0 0 10px #00f3ff;
  animation: pop-up-fade 0.8s ease-out forwards;
}

@keyframes pop-up-fade {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-35px) scale(1.3); }
}