body { 
    font-family: 'Poppins', sans-serif; 
    background-color: #f0fdf4; 
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

.title-font { font-family: 'Playfair Display', serif; }

/* Smooth Animations */
.island-card { transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; }
.island-card:active { transform: scale(0.95); }

/* Modal Animation */
.modal { transition: opacity 0.2s ease-in-out; opacity: 0; pointer-events: none; }
.modal.active { opacity: 1; pointer-events: auto; }

/* Coin Animation */
.coin { 
    position: fixed; 
    animation: fall 1s linear forwards; 
    pointer-events: none; 
    z-index: 100; 
    font-size: 24px;
}
@keyframes fall { 
    0% { top: -10%; opacity: 1; transform: rotate(0deg); } 
    100% { top: 100%; opacity: 0; transform: rotate(360deg); } 
}

/* Utility */
.shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
@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); } 
}

/* Custom Scrollbar */
.custom-scroll::-webkit-scrollbar { width: 4px; }
.custom-scroll::-webkit-scrollbar-track { background: #f1f1f1; }
.custom-scroll::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }

/* Helicopter fly animation */
.heli-fly {
    position: fixed;
    z-index: 9999;
    font-size: 40px;
    top: 50%;
    left: -10%;
    transform: translateY(-50%);
    animation: heliFly 1.5s linear forwards;
    pointer-events: none;
}

@keyframes heliFly {
    0%   { left: -10%; transform: translateY(-50%) rotate(0deg); }
    50%  { left: 50%;  transform: translateY(-60%) rotate(-5deg); }
    100% { left: 110%; transform: translateY(-50%) rotate(5deg); }
}