/* Custom fonts & global rules */
:root {
  --navy: #2B2D42;
  --yellow: #FFD166;
  --pink: #F72585;
  --blue: #4CC9F0;
  --green: #06D6A0;
  --bg-cream: #FFFDF7;
}

body {
  font-family: 'Nunito', sans-serif;
  background-color: var(--bg-cream);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

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

/* Custom border width helper */
.border-3 {
  border-width: 3px;
}

/* Sticker Card Styling */
.sticker-card {
  position: relative;
  border: 4px solid var(--navy);
  border-radius: 1.75rem;
  box-shadow: 0 8px 0 var(--navy);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
  user-select: none;
  cursor: pointer;
  overflow: hidden;
}

.sticker-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 0 var(--navy);
}

.sticker-card:active, .sticker-card.active-squish {
  transform: translateY(4px) scale(0.96);
  box-shadow: 0 4px 0 var(--navy);
}

/* Inner Gloss Shine */
.sticker-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events-none: none;
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
}

/* Nav Tab States */
.deck-tab.active {
  background-color: var(--green) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--navy) !important;
}

.mode-btn.active {
  background-color: var(--pink) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 0 var(--navy) !important;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Smooth Animations */
@keyframes popIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

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

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg) scale(0.98); }
  75% { transform: rotate(8deg) scale(0.98); }
}

.animate-wiggle {
  animation: wiggle 0.4s ease-in-out;
}