body {
    font-family: 'Nunito', sans-serif;
    user-select: none;
    background: #0d1b2a;
    color: #f1f5f9;
    overflow-x: hidden;
}

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

/* Meadow Background (Outer) */
.meadow-container {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    position: relative;
    overflow: hidden;
}

/* 2D Pond & Grass */
.grass-area {
    background: linear-gradient(135deg, #15803d 0%, #166534 50%, #14532d 100%);
    background-image: 
        radial-gradient(#22c55e 3px, transparent 3px),
        radial-gradient(#15803d 2px, transparent 2px);
    background-size: 32px 32px;
    background-position: 0 0, 16px 16px;
    box-shadow: inset 0 0 60px rgba(0,0,0,0.6);
    position: relative;
}

/* Wonky Organic Pond Shape */
.organic-pond {
    background: linear-gradient(145deg, #0284c7, #0369a1);
    border: 6px solid #7dd3fc;
    border-radius: 65% 35% 58% 42% / 38% 62% 38% 62%;
    box-shadow: inset 0 15px 35px rgba(0,0,0,0.45), 0 10px 25px rgba(0,0,0,0.4);
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1.1 / 1;
    position: relative;
    animation: pondBreathe 10s ease-in-out infinite alternate;
}

@keyframes pondBreathe {
    0% { border-radius: 65% 35% 58% 42% / 38% 62% 38% 62%; transform: scale(1) rotate(-2deg); }
    50% { border-radius: 42% 58% 65% 35% / 55% 45% 55% 45%; transform: scale(1.02) rotate(1deg); }
    100% { border-radius: 52% 48% 38% 62% / 44% 56% 44% 56%; transform: scale(1.01) rotate(0deg); }
}

/* Bobber Animations */
@keyframes gentleBob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-12px) rotate(3deg); }
}

@keyframes dipBite {
    0% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-20px) scale(1.1); }
    60% { transform: translateY(45px) scale(0.85); }
    80% { transform: translateY(35px) scale(0.9); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes castArc {
    0% { transform: translate(-30vw, 30vh) scale(0.2) rotate(-45deg); opacity: 0; }
    50% { transform: translate(-5vw, -10vh) scale(1.2) rotate(15deg); opacity: 1; }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
}

@keyframes ripple {
    0% { transform: scale(0.2); opacity: 0.9; border-width: 4px; }
    100% { transform: scale(3.5); opacity: 0; border-width: 1px; }
}

@keyframes flutter {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    25% { transform: translateY(-12px) translateX(8px) rotate(-15deg) scale(1.15); }
    50% { transform: translateY(-4px) translateX(18px) rotate(10deg) scale(0.9); }
    75% { transform: translateY(-16px) translateX(12px) rotate(-10deg) scale(1.1); }
}

@keyframes flyPath1 {
    0% { transform: translate(-30px, 150px); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translate(450px, -220px); opacity: 0; }
}

@keyframes flyPath2 {
    0% { transform: translate(400px, 220px); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translate(-80px, -120px); opacity: 0; }
}

.butterfly-1 { animation: flyPath1 14s infinite ease-in-out; }
.butterfly-2 { animation: flyPath2 18s infinite ease-in-out 3s; }
.flutter-wings { animation: flutter 0.6s infinite ease-in-out alternate; }

.bobber-idle { animation: gentleBob 2.8s ease-in-out infinite; }
.bobber-dip { animation: dipBite 0.6s ease-in-out forwards; }
.bobber-cast { animation: castArc 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
.ripple-effect { animation: ripple 1s ease-out forwards; }

.custom-scroll::-webkit-scrollbar { width: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 8px; }
.custom-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 8px; }

.modal-enter { opacity: 0; transform: scale(0.9) translateY(20px); }
.modal-active { opacity: 1; transform: scale(1) translateY(0); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }

.auth-input {
    width: 100%;
    background: rgba(30, 41, 59, .95);
    border: 2px solid #475569;
    color: #f8fafc;
    border-radius: .75rem;
    padding: .75rem 1rem;
    outline: none;
}
.auth-input:focus { border-color: #2dd4bf; }
.auth-link { color: #5eead4; text-decoration: underline; }