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

body {
  font-family: 'Crimson Pro', serif;
  overscroll-behavior: none;
  background: linear-gradient(170deg, #2D1B0E 0%, #3B2718 30%, #2D5016 100%);
  min-height: 100dvh;
}

#root {
  min-height: 100dvh;
}

.wood-grain {
  background-image: 
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 8px,
      rgba(139,105,20,0.04) 8px,
      rgba(139,105,20,0.04) 10px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 20px,
      rgba(92,64,51,0.06) 20px,
      rgba(92,64,51,0.06) 22px
    );
}

.card-shadow {
  box-shadow: 
    0 10px 40px rgba(0,0,0,0.3),
    0 2px 10px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,248,231,0.1);
}

@keyframes leafFall {
  0% { transform: translateY(-20px) rotate(0deg) scale(0); opacity: 0; }
  20% { opacity: 1; scale: 1; }
  100% { transform: translateY(100vh) rotate(720deg) scale(0.5); opacity: 0; }
}

@keyframes gentleSway {
  0%, 100% { transform: rotate(-0.5deg); }
  50% { transform: rotate(0.5deg); }
}

@keyframes blossomBurst {
  0% { transform: scale(0) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.5) rotate(180deg); opacity: 0.8; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes growTogether {
  0% { transform: scaleY(0); transform-origin: bottom; }
  100% { transform: scaleY(1); transform-origin: bottom; }
}

@keyframes heartFloat {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-80px) scale(1.5); opacity: 0; }
}

.leaf-particle {
  animation: leafFall linear forwards;
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  font-size: 24px;
}

.blossom-particle {
  animation: blossomBurst 1s ease-out forwards;
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  font-size: 28px;
}

.sway {
  animation: gentleSway 4s ease-in-out infinite;
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.img-shimmer {
  background: linear-gradient(90deg, #3B2718 25%, #5C4033 50%, #3B2718 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.swipe-hint-left {
  background: linear-gradient(90deg, rgba(232,134,12,0.3) 0%, transparent 100%);
}

.swipe-hint-right {
  background: linear-gradient(-90deg, rgba(74,124,63,0.3) 0%, transparent 100%);
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(160,132,92,0.3); border-radius: 2px; }

.match-overlay {
  backdrop-filter: blur(10px);
  background: radial-gradient(circle at 50% 50%, rgba(45,80,22,0.9) 0%, rgba(59,39,24,0.95) 100%);
}

.tag-pill {
  background: linear-gradient(135deg, rgba(74,124,63,0.2), rgba(45,80,22,0.3));
  border: 1px solid rgba(143,174,110,0.3);
}

.nav-active {
  background: linear-gradient(180deg, rgba(74,124,63,0.3) 0%, transparent 100%);
}

.profile-card-bg {
  background: linear-gradient(180deg, #2B1E12 0%, #1E140B 100%);
}

.match-card-bg {
  background: linear-gradient(135deg, rgba(45,80,22,0.15) 0%, rgba(74,124,63,0.1) 100%);
  border: 1px solid rgba(143,174,110,0.2);
}