/* Custom Toy Theme & Keyframe Animations */

:root {
  --font-fredoka: 'Fredoka', cursive, sans-serif;
  --font-nunito: 'Nunito', sans-serif;
}

body {
  font-family: var(--font-nunito);
  background-color: #fef08a;
  background-image: radial-gradient(#fde047 1.5px, transparent 1.5px), radial-gradient(#fde047 1.5px, #fef08a 1.5px);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

.font-fredoka {
  font-family: var(--font-fredoka);
}

/* Chunky 3D Drop Shadows for Toy Effect */
.shadow-toy-phone {
  box-shadow: 0 20px 0 #9f1239, 0 30px 35px rgba(0, 0, 0, 0.35);
}

.shadow-antenna-glow {
  box-shadow: 0 0 15px #fde047, 0 0 30px #f59e0b;
}

.shadow-toy-green {
  box-shadow: 0 6px 0 #15803d, 0 10px 15px rgba(22, 163, 74, 0.4);
}

.shadow-toy-red {
  box-shadow: 0 6px 0 #991b1b, 0 10px 15px rgba(220, 38, 38, 0.4);
}

/* Chunky Rubber Number Keys */
.dial-key {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 58px;
  border-radius: 18px;
  border-width: 2px;
  border-bottom-width: 5px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15), 0 6px 8px rgba(0, 0, 0, 0.08);
  font-family: var(--font-fredoka);
  cursor: pointer;
  transition: transform 0.08s ease, border-bottom-width 0.08s ease, box-shadow 0.08s ease;
  user-select: none;
  -webkit-user-select: none;
}

.dial-key:active {
  transform: translateY(3px);
  border-bottom-width: 2px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.key-num {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.key-sub {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  opacity: 0.85;
  margin-top: 1px;
}

/* Nav Tabs */
.nav-tab.active-tab {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Contact Cards in Friends Book */
.contact-card {
  background: white;
  border-radius: 20px;
  padding: 10px;
  border: 3px solid #bae6fd;
  box-shadow: 0 5px 0 #7dd3fc;
  cursor: pointer;
  transition: all 0.12s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contact-card:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #7dd3fc;
}

/* Utility to hide scrollbar */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Keyframes */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(6deg); }
}

@keyframes floatDelay {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(18px) rotate(-6deg); }
}

@keyframes wiggleSoft {
  0%, 100% { transform: rotate(-2deg) scale(1); }
  50% { transform: rotate(2deg) scale(1.03); }
}

@keyframes bounceGentle {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.05); }
}

@keyframes popIn {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-float-slow {
  animation: floatSlow 8s ease-in-out infinite;
}

.animate-float-delay {
  animation: floatDelay 9s ease-in-out infinite 2s;
}

.animate-wiggle-soft {
  animation: wiggleSoft 3s ease-in-out infinite;
}

.animate-bounce-gentle {
  animation: bounceGentle 2s ease-in-out infinite;
}

.animate-pop-in {
  animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Floating Emote Particle in Call */
.floating-emote {
  position: absolute;
  font-size: 2.2rem;
  pointer-events: none;
  animation: riseAndFade 1.6s ease-out forwards;
}

@keyframes riseAndFade {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0.6) rotate(0deg);
  }
  50% {
    transform: translateY(-50px) scale(1.2) rotate(15deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-120px) scale(1.5) rotate(-15deg);
  }
}