🌾 Fazenda Paraíso

<!DOCTYPE html>
 <html lang="pt-BR">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>🌾 Fazenda Paraíso</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
         
         * {
             font-family: 'Nunito', sans-serif;
             -webkit-tap-highlight-color: transparent;
         }
         
         body {
             overscroll-behavior: none;
             touch-action: manipulation;
         }
         
         :root {
             --grass: #7CCD7C;
             --grass-dark: #6BBF6B;
             --soil: #8B5A2B;
             --soil-dark: #6F4723;
             --wood: #A0522D;
             --barn-red: #CD5C5C;
             --sky: #87CEEB;
             --wheat: #F4D03F;
             --water: #5DADE2;
             --stone: #A9A9A9;
             --paradise-green: #4CAF50;
             --paradise-gold: #FFD700;
             --paradise-sky: #87CEEB;
         }
         
         .game-bg {
             background: linear-gradient(180deg, #87CEEB 0%, #B0E0E6 25%, #98FB98 45%, #7CCD7C 100%);
             min-height: 100vh;
         }
         
         .btn-yellow {
             background: linear-gradient(180deg, #FFD700 0%, #F2C900 100%);
             box-shadow: 0 4px 0 #B8860B, 0 6px 10px rgba(0,0,0,0.15);
             transition: all 0.1s;
         }
         .btn-yellow:active { transform: translateY(2px); box-shadow: 0 2px 0 #B8860B; }
         
         .btn-brown {
             background: linear-gradient(180deg, #A0522D 0%, #8B4513 100%);
             box-shadow: 0 4px 0 #5C2E0C, 0 6px 10px rgba(0,0,0,0.15);
             color: white;
         }
         .btn-brown:active { transform: translateY(2px); box-shadow: 0 2px 0 #5C2E0C; }
         
         .btn-green {
             background: linear-gradient(180deg, #4CAF50 0%, #45A049 100%);
             box-shadow: 0 4px 0 #2E7D32, 0 6px 10px rgba(0,0,0,0.15);
             color: white;
         }
         .btn-green:active { transform: translateY(2px); box-shadow: 0 2px 0 #2E7D32; }
         
         .btn-blue {
             background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%);
             box-shadow: 0 4px 0 #1D4ED8, 0 6px 10px rgba(0,0,0,0.15);
             color: white;
         }
         .btn-blue:active { transform: translateY(2px); box-shadow: 0 2px 0 #1D4ED8; }
         
         .btn-purple {
             background: linear-gradient(180deg, #9370DB 0%, #7B68EE 100%);
             box-shadow: 0 4px 0 #5B21B6, 0 6px 10px rgba(0,0,0,0.15);
             color: white;
         }
         .btn-purple:active { transform: translateY(2px); box-shadow: 0 2px 0 #5B21B6; }
         
         .panel {
             background: linear-gradient(180deg, #FFF8DC 0%, #F5DEB3 100%);
             border: 4px solid #8B4513;
             border-radius: 20px;
             box-shadow: 0 6px 0 #654321, 0 8px 16px rgba(0,0,0,0.15);
         }
         
         .plot {
             background: linear-gradient(145deg, #8B5A2B, #6F4723);
             border: 3px solid #5C2E0C;
             border-radius: 6px;
             aspect-ratio: 1;
             cursor: pointer;
             transition: all 0.2s;
         }
         .plot:hover { transform: scale(1.05); }
         .plot.empty { background: linear-gradient(145deg, #8B5A2B, #6F4723); }
         .plot.seedling { background: linear-gradient(145deg, #9ACD32, #6B8E23); }
         .plot.growing { background: linear-gradient(145deg, #7CCD7C, #4CAF50); }
         .plot.ready {
             background: linear-gradient(145deg, #90EE90, #32CD32);
             animation: bounce 0.8s infinite alternate;
         }
         @keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-4px); } }
         
         .fruit-tree {
             background: radial-gradient(circle, #90EE90 0%, #7CCD7C 60%, #6BBF6B 100%);
             border-radius: 50%;
             cursor: pointer;
             transition: transform 0.2s;
         }
         .fruit-tree:hover { transform: scale(1.1); }
         .fruit-tree.ready { animation: sway 2s infinite ease-in-out; }
         @keyframes sway {
             0%, 100% { transform: rotate(-3deg); }
             50% { transform: rotate(3deg); }
         }
         .fruit-tree.dry {
             background: radial-gradient(circle, #D2B48C 0%, #BC9A6B 60%, #A0826D 100%);
             filter: grayscale(40%);
         }
         
         .animal {
             font-size: 2.2rem;
             cursor: pointer;
             transition: transform 0.2s;
         }
         .animal:hover { transform: scale(1.2); }
         .animal.walking { animation: animalWalk 6s infinite ease-in-out; }
         @keyframes animalWalk {
             0%, 100% { transform: translateX(0) rotate(0deg); }
             25% { transform: translateX(15px) rotate(3deg); }
             75% { transform: translateX(-15px) rotate(-3deg); }
         }
         
         .machine {
             background: linear-gradient(145deg, #DEB887, #D2B48C);
             border: 3px solid #8B4513;
             border-radius: 12px;
             cursor: pointer;
             transition: all 0.2s;
         }
         .machine:hover { transform: scale(1.03); border-color: #FFD700; }
         .machine.working { animation: machinePulse 1.5s infinite; }
         @keyframes machinePulse {
             0%, 100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); }
             50% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); }
         }
         
         .progress-bar {
             background: linear-gradient(90deg, #4CAF50, #8BC34A);
             border-radius: 999px;
             transition: width 0.3s ease;
         }
         .xp-bar {
             background: linear-gradient(90deg, #9370DB, #BA55D9, #DA70D6);
         }
         
         .toast {
             animation: slideIn 0.3s ease-out, fadeOut 0.3s ease-in 2.7s forwards;
         }
         @keyframes slideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
         @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
         
         .modal-backdrop {
             background: rgba(0,0,0,0.5);
             backdrop-filter: blur(4px);
         }
         
         .sun {
             background: radial-gradient(circle, #FFF9C4, #FFEB3B);
             box-shadow: 0 0 40px #FFD700, 0 0 80px rgba(255, 215, 0, 0.3);
         }
         .cloud {
             background: white;
             border-radius: 50%;
             box-shadow: 30px 0 0 8px white, 60px 0 0 4px white, 15px 15px 0 6px white, 45px 15px 0 3px white;
             animation: floatCloud 25s linear infinite;
         }
         @keyframes floatCloud {
             0% { transform: translateX(-150px); }
             100% { transform: translateX(calc(100vw + 150px)); }
         }
         
         .neighbor-card {
             background: linear-gradient(145deg, #E6F7FF, #D1EAFE);
             border: 3px solid #3B82F6;
             border-radius: 12px;
             transition: all 0.2s;
         }
         .neighbor-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); }