/* CUSTOM STYLING & ANIMATIONS FOR PIANO PAPA */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

.pt-safe {
  padding-top: max(0.75rem, var(--safe-top));
}
.pb-safe {
  padding-bottom: max(0.5rem, var(--safe-bottom));
}

body {
  font-family: 'Outfit', sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.font-display {
  font-family: 'Fredoka', cursive, sans-serif;
}

/* WALNUT WOOD TOY PIANO CHASSIS */
.piano-chassis {
  background: linear-gradient(145deg, #4a2814 0%, #2c160a 60%, #1a0b04 100%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.15), inset 0 -4px 8px rgba(0, 0, 0, 0.6);
  position: relative;
}

.piano-chassis::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  background-image: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), transparent 70%);
  pointer-events: none;
}

/* WHITE KEYS */
.piano-key-white {
  background: linear-gradient(to bottom, #ffffff 0%, #f7f5ed 75%, #e8e3d3 100%);
  border-radius: 0 0 10px 10px;
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.15), inset -2px 0 3px rgba(0, 0, 0, 0.08), inset 2px 0 3px rgba(255, 255, 255, 0.9), 0 6px 10px rgba(0, 0, 0, 0.4);
  transition: transform 0.08s ease, background 0.1s ease, box-shadow 0.08s ease;
  cursor: pointer;
  position: relative;
  touch-action: none;
}

.piano-key-white:active, .piano-key-white.pressed {
  transform: translateY(4px) scaleY(0.98);
  background: linear-gradient(to bottom, #eee8d5 0%, #e0d8c0 100%);
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 0 12px rgba(0, 0, 0, 0.15);
}

/* BLACK KEYS */
.piano-key-black {
  background: linear-gradient(to bottom, #333336 0%, #1c1c1e 65%, #0a0a0c 100%);
  border-radius: 0 0 7px 7px;
  box-shadow: inset 0 -2px 3px rgba(255, 255, 255, 0.2), inset -1px 0 2px rgba(255, 255, 255, 0.1), 0 8px 14px rgba(0, 0, 0, 0.7);
  transition: transform 0.08s ease, background 0.1s ease, box-shadow 0.08s ease;
  cursor: pointer;
  position: absolute;
  pointer-events: auto;
  z-index: 25;
  touch-action: none;
}

.piano-key-black:active, .piano-key-black.pressed {
  transform: translateY(3px) scaleY(0.97);
  background: linear-gradient(to bottom, #1c1c1e 0%, #050505 100%);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.6);
}

/* PROMPT NEON GLOW EFFECTS FOR GUIDED LESSONS */
.piano-key.target-glow {
  animation: keyPulse 1.1s infinite alternate cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes keyPulse {
  0% {
    filter: brightness(1) drop-shadow(0 0 4px var(--key-color));
  }
  100% {
    filter: brightness(1.35) drop-shadow(0 0 16px var(--key-color));
  }
}

/* INCORRECT HIT SHAKE */
.piano-key.wrong-shake {
  animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both;
  background: #ff3b30 !important;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* MODE TABS */
.mode-tab {
  color: #a8a29e;
  background: transparent;
}
.mode-tab.active {
  color: #fbbf24;
  background: #27272a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

/* HIDE SCROLLBAR */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* OVERLAY MODAL DISPLAY NONE ENFORCEMENT */
.hidden {
  display: none !important;
}