/* ===========================================
   COZY GARDEN - SVG PIXEL ART PLANT SYSTEM
   A stunning, coherent visual language for plants
   =========================================== */

/* =====================================
   TILE BASE STYLES
   ===================================== */

.tile {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: visible;
    font-size: 32px;
}

/* Tile depth layers */
.tile::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    z-index: 0;
}

.tile:hover {
    transform: translateY(-6px) scale(1.05);
    z-index: 10;
}

.tile:active {
    transform: translateY(-2px) scale(1.02);
}

/* =====================================
   EMPTY TILE - Rich Soil Visualization
   ===================================== */

.tile.empty {
    background:
        /* Top soil texture */
        radial-gradient(ellipse 60% 30% at 30% 20%, rgba(139, 90, 43, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse 40% 25% at 70% 40%, rgba(101, 67, 33, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse 50% 35% at 50% 70%, rgba(160, 120, 70, 0.4) 0%, transparent 50%),
        /* Base gradient */
        linear-gradient(145deg, #8B7355 0%, #6B5344 50%, #5a4030 100%);
    border: 3px solid #4a3020;
    box-shadow:
        inset 0 -8px 16px rgba(0,0,0,0.3),
        inset 0 4px 8px rgba(255,255,255,0.1),
        0 4px 0 #3a2515,
        0 6px 12px rgba(0,0,0,0.3);
}

.tile.empty:hover {
    box-shadow:
        inset 0 -8px 16px rgba(0,0,0,0.3),
        inset 0 4px 8px rgba(255,255,255,0.15),
        0 8px 0 #3a2515,
        0 12px 20px rgba(0,0,0,0.4);
}

/* Dirt particles animation */
.tile.empty::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #8B6914;
    border-radius: 50%;
    top: 25%;
    left: 30%;
    box-shadow:
        15px 10px 0 0 rgba(139, 90, 43, 0.7),
        25px -5px 0 1px rgba(101, 67, 33, 0.6),
        -5px 20px 0 0 rgba(139, 90, 43, 0.5),
        35px 25px 0 1px rgba(160, 120, 70, 0.6),
        10px 35px 0 0 rgba(101, 67, 33, 0.5),
        40px 15px 0 0 rgba(139, 90, 43, 0.4);
    opacity: 0.8;
}

/* =====================================
   TILLED SOIL - Prepared for Planting
   ===================================== */

.tile.tilled {
    background:
        /* Tilled rows pattern */
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 6px,
            rgba(80, 50, 30, 0.5) 6px,
            rgba(80, 50, 30, 0.5) 8px
        ),
        /* Rich dark soil */
        linear-gradient(145deg, #5a3d2b 0%, #4a3020 50%, #3a2515 100%);
    border: 3px solid #2a1a0a;
    box-shadow:
        inset 0 -10px 20px rgba(0,0,0,0.4),
        inset 0 6px 12px rgba(100, 70, 40, 0.2),
        0 4px 0 #1a0a00,
        0 6px 12px rgba(0,0,0,0.4);
    animation: soil-breathe 4s ease-in-out infinite;
}

@keyframes soil-breathe {
    0%, 100% {
        box-shadow:
            inset 0 -10px 20px rgba(0,0,0,0.4),
            inset 0 6px 12px rgba(100, 70, 40, 0.2),
            0 4px 0 #1a0a00,
            0 6px 12px rgba(0,0,0,0.4);
    }
    50% {
        box-shadow:
            inset 0 -10px 20px rgba(0,0,0,0.35),
            inset 0 6px 12px rgba(100, 70, 40, 0.25),
            0 4px 0 #1a0a00,
            0 6px 16px rgba(0,0,0,0.45);
    }
}

/* Tilled row lines */
.tile.tilled::after {
    content: '';
    position: absolute;
    inset: 8px;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 4px,
            rgba(60, 35, 20, 0.3) 4px,
            rgba(60, 35, 20, 0.3) 6px
        );
    border-radius: 6px;
    opacity: 0.7;
}

/* =====================================
   PLANTED/GROWING TILES
   ===================================== */

.tile.planted,
.tile.growing {
    background: linear-gradient(145deg, #5a3d2b 0%, #4a3020 50%, #3a2515 100%);
    border: 3px solid #2a1a0a;
    box-shadow:
        inset 0 -8px 16px rgba(0,0,0,0.3),
        0 4px 0 #1a0a00,
        0 6px 12px rgba(0,0,0,0.3);
}

/* =====================================
   SVG PLANT CONTAINER
   ===================================== */

.plant-svg-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.plant-svg {
    width: 56px;
    height: 56px;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.3));
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Growth animation on stage change */
.plant-svg.growing-transition {
    animation: plant-grow 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes plant-grow {
    0% { transform: scale(0.8); opacity: 0.7; }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

/* Ambient sway animation for all plants */
.plant-svg {
    animation: gentle-sway 3s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes gentle-sway {
    0%, 100% { transform: rotate(-1deg) translateX(-1px); }
    50% { transform: rotate(1deg) translateX(1px); }
}

/* Stage 0: More pronounced bounce for seedlings */
.plant-svg.stage-0 {
    animation: seedling-bounce 2s ease-in-out infinite;
}

@keyframes seedling-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.05); }
}

/* Stage 2: Mature plants have stronger presence */
.plant-svg.stage-2 {
    animation: mature-presence 4s ease-in-out infinite;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35));
}

@keyframes mature-presence {
    0%, 100% { transform: rotate(-0.5deg) scale(1); }
    25% { transform: rotate(0.5deg) scale(1.02); }
    50% { transform: rotate(-0.5deg) scale(1); }
    75% { transform: rotate(0.5deg) scale(0.98); }
}

/* =====================================
   NEEDS WATER STATE
   ===================================== */

.tile.needs-water {
    border-color: #e74c3c !important;
    animation: water-warning 1.5s ease-in-out infinite;
}

@keyframes water-warning {
    0%, 100% {
        box-shadow:
            inset 0 -8px 16px rgba(0,0,0,0.3),
            0 4px 0 #1a0a00,
            0 0 0 0 rgba(231, 76, 60, 0.6),
            0 6px 12px rgba(0,0,0,0.3);
    }
    50% {
        box-shadow:
            inset 0 -8px 16px rgba(0,0,0,0.3),
            0 4px 0 #1a0a00,
            0 0 0 12px rgba(231, 76, 60, 0),
            0 6px 12px rgba(0,0,0,0.3);
    }
}

.tile.needs-water .plant-svg {
    animation: thirsty-droop 2s ease-in-out infinite;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.3)) brightness(0.85) saturate(0.7);
}

@keyframes thirsty-droop {
    0%, 100% { transform: rotate(-3deg) scale(0.95); }
    50% { transform: rotate(3deg) scale(0.93); }
}

/* Water droplet indicator */
.water-indicator {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    z-index: 20;
}

.water-indicator svg {
    width: 100%;
    height: 100%;
    animation: droplet-bounce 0.8s ease-in-out infinite;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}

@keyframes droplet-bounce {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-4px) rotate(5deg); }
}

/* =====================================
   HARVESTABLE STATE
   ===================================== */

.tile.harvestable {
    border-color: #f1c40f !important;
    animation: harvest-glow 2s ease-in-out infinite;
}

@keyframes harvest-glow {
    0%, 100% {
        box-shadow:
            inset 0 -8px 16px rgba(0,0,0,0.3),
            0 4px 0 #b8860b,
            0 0 20px rgba(241, 196, 15, 0.5),
            0 6px 12px rgba(0,0,0,0.3);
    }
    50% {
        box-shadow:
            inset 0 -8px 16px rgba(0,0,0,0.3),
            0 4px 0 #b8860b,
            0 0 35px rgba(241, 196, 15, 0.8),
            0 6px 12px rgba(0,0,0,0.3);
    }
}

.tile.harvestable .plant-svg {
    animation: harvest-ready 1.5s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(241, 196, 15, 0.5));
}

@keyframes harvest-ready {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.05) rotate(-2deg); }
    75% { transform: scale(1.05) rotate(2deg); }
}

/* Sparkle indicator for harvest */
.harvest-indicator {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    z-index: 20;
    pointer-events: none;
}

.harvest-indicator svg {
    width: 100%;
    height: 100%;
    animation: sparkle-spin 3s linear infinite;
}

@keyframes sparkle-spin {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.1); }
    50% { transform: rotate(180deg) scale(1); }
    75% { transform: rotate(270deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Floating particles around harvestable plants */
.harvest-particles {
    position: absolute;
    inset: -10px;
    pointer-events: none;
    z-index: 15;
}

.harvest-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #ffd700 0%, #ff8c00 100%);
    border-radius: 50%;
    animation: float-particle 2s ease-in-out infinite;
}

.harvest-particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.harvest-particle:nth-child(2) { left: 80%; top: 30%; animation-delay: 0.3s; }
.harvest-particle:nth-child(3) { left: 20%; top: 70%; animation-delay: 0.6s; }
.harvest-particle:nth-child(4) { left: 70%; top: 80%; animation-delay: 0.9s; }
.harvest-particle:nth-child(5) { left: 50%; top: 10%; animation-delay: 1.2s; }

@keyframes float-particle {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-10px) scale(1.2);
        opacity: 1;
    }
}

/* =====================================
   PLANT-SPECIFIC COLOR THEMES
   ===================================== */

/* Tomato glow */
.tile[data-plant="tomato"].harvestable {
    --harvest-color: #e74c3c;
}
.tile[data-plant="tomato"].harvestable .harvest-particle {
    background: radial-gradient(circle, #ff6b6b 0%, #e74c3c 100%);
}

/* Lettuce glow */
.tile[data-plant="lettuce"].harvestable {
    --harvest-color: #27ae60;
}
.tile[data-plant="lettuce"].harvestable .harvest-particle {
    background: radial-gradient(circle, #2ecc71 0%, #27ae60 100%);
}

/* Carrot glow */
.tile[data-plant="carrot"].harvestable {
    --harvest-color: #e67e22;
}
.tile[data-plant="carrot"].harvestable .harvest-particle {
    background: radial-gradient(circle, #f39c12 0%, #e67e22 100%);
}

/* Corn glow */
.tile[data-plant="corn"].harvestable {
    --harvest-color: #f1c40f;
}
.tile[data-plant="corn"].harvestable .harvest-particle {
    background: radial-gradient(circle, #f7dc6f 0%, #f1c40f 100%);
}

/* Potato glow */
.tile[data-plant="potato"].harvestable {
    --harvest-color: #d4a574;
}
.tile[data-plant="potato"].harvestable .harvest-particle {
    background: radial-gradient(circle, #e6c9a8 0%, #d4a574 100%);
}

/* =====================================
   INTERACTION EFFECTS
   ===================================== */

/* Click ripple effect */
.tile-click-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: ripple-expand 0.5s ease-out forwards;
    pointer-events: none;
    z-index: 100;
}

@keyframes ripple-expand {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

/* Watering splash effect */
.water-splash-effect {
    position: absolute;
    inset: 0;
    /* Explicitly reset - garden.css has an older .water-splash-effect rule (built for the
       single-emoji version) that centers via top/left/transform:translate(-50%,-50%). Since
       that rule only sets top/left (not right/bottom), inset:0 here doesn't fully override
       it, and the leftover transform was shoving this whole (now tile-sized) box up-left by
       half its own size - which read as "the effect is offset toward the top-right of the cell". */
    transform: none;
    pointer-events: none;
    z-index: 100;
}

.water-drop {
    position: absolute;
    width: 13px;
    height: 19px;
    background: linear-gradient(180deg, #87CEEB 0%, #4A90D9 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: water-fall 0.6s ease-in forwards;
}

.water-drop:nth-child(1) { left: 25%; animation-delay: 0s; }
.water-drop:nth-child(2) { left: 50%; animation-delay: 0.1s; }
.water-drop:nth-child(3) { left: 75%; animation-delay: 0.05s; }

@keyframes water-fall {
    0% { top: -25px; opacity: 1; transform: scale(1); }
    70% { opacity: 1; }
    100% { top: 85%; opacity: 0; transform: scale(0.5); }
}

/* Water splash on ground */
.water-splash-ground {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 55px;
    height: 14px;
    background: radial-gradient(ellipse, rgba(74, 144, 217, 0.5) 0%, transparent 70%);
    animation: splash-spread 0.4s ease-out forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

@keyframes splash-spread {
    0% { width: 14px; opacity: 0; }
    50% { opacity: 1; }
    100% { width: 70px; opacity: 0; }
}

/* Till (hoe) effect - 4 dirt clumps scattering outward and up, then fading */
.till-effect {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.dirt-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    background: radial-gradient(circle, #8B6F47 0%, #6B4F31 100%);
    border-radius: 40% 60% 50% 50%;
    animation: dirt-scatter 0.5s ease-out forwards;
}

.dirt-particle:nth-child(1) { --dx: -30px; --dy: -34px; animation-delay: 0s; }
.dirt-particle:nth-child(2) { --dx: 28px; --dy: -32px; animation-delay: 0.02s; }
.dirt-particle:nth-child(3) { --dx: -20px; --dy: -20px; animation-delay: 0.06s; }
.dirt-particle:nth-child(4) { --dx: 22px; --dy: -22px; animation-delay: 0.04s; }

@keyframes dirt-scatter {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3); opacity: 0; }
}

/* Harvest collection effect */
.harvest-collect-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    animation: harvest-collect 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    pointer-events: none;
    z-index: 100;
}

@keyframes harvest-collect {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -150%) scale(1.3); opacity: 1; }
    100% { transform: translate(-50%, -200%) scale(0.5); opacity: 0; }
}

/* =====================================
   GROWTH STAGE TRANSITION
   ===================================== */

.stage-transition {
    animation: stage-pop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes stage-pop {
    0% { transform: scale(0.6) rotate(-10deg); opacity: 0.5; }
    50% { transform: scale(1.2) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Subtle glow during growth */
.tile.growing .plant-svg-container::after {
    content: '';
    position: absolute;
    inset: -5px;
    background: radial-gradient(circle, rgba(100, 200, 100, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    animation: growth-pulse 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes growth-pulse {
    0%, 100% { transform: scale(0.8); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.6; }
}

/* =====================================
   GARDEN GRID ENHANCEMENTS
   ===================================== */

.garden-grid {
    display: grid;
    gap: 8px;
    background:
        linear-gradient(135deg, rgba(107, 68, 35, 0.5) 0%, rgba(139, 111, 71, 0.5) 100%);
    padding: 16px;
    border-radius: 20px;
    box-shadow:
        inset 0 6px 20px rgba(0,0,0,0.3),
        inset 0 -3px 10px rgba(255,255,255,0.1);
    position: relative;
}

/* Grid decorative corners */
.garden-grid::before,
.garden-grid::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(139, 111, 71, 0.6);
    pointer-events: none;
}

.garden-grid::before {
    top: 4px;
    left: 4px;
    border-right: none;
    border-bottom: none;
    border-radius: 8px 0 0 0;
}

.garden-grid::after {
    bottom: 4px;
    right: 4px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 8px 0;
}

/* =====================================
   FRUIT TREE CONTAINER STYLES
   ===================================== */

.tree-svg-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.tree-svg {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35));
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tree-svg svg {
    width: 100%;
    height: 100%;
}

/* Tree stage animations */
.tree-svg.stage-0 {
    animation: sapling-sway 2.5s ease-in-out infinite;
}

.tree-svg.stage-1,
.tree-svg.stage-2 {
    animation: tree-sway 4s ease-in-out infinite;
}

.tree-svg.stage-3 {
    animation: fruit-tree-sway 5s ease-in-out infinite;
}

@keyframes sapling-sway {
    0%, 100% { transform: rotate(-2deg) scale(1); }
    50% { transform: rotate(2deg) scale(1.02); }
}

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

@keyframes fruit-tree-sway {
    0%, 100% { transform: rotate(-0.3deg) scale(1); }
    25% { transform: rotate(0.3deg) scale(1.01); }
    50% { transform: rotate(-0.3deg) scale(1); }
    75% { transform: rotate(0.3deg) scale(0.99); }
}

/* Dead tree styling */
.tree-svg.dead-tree {
    filter: grayscale(0.6) brightness(0.8) drop-shadow(0 4px 6px rgba(0,0,0,0.3));
    animation: dead-tree-wind 6s ease-in-out infinite;
}

@keyframes dead-tree-wind {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(1deg); }
}

/* =====================================
   FRUIT CELL SPECIFIC STYLES
   ===================================== */

.fruit-cell {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: visible;
}

.fruit-cell.empty {
    background:
        radial-gradient(ellipse 60% 30% at 30% 20%, rgba(139, 90, 43, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse 40% 25% at 70% 40%, rgba(101, 67, 33, 0.5) 0%, transparent 50%),
        linear-gradient(145deg, #8B7355 0%, #6B5344 50%, #5a4030 100%);
    border: 3px solid #4a3020;
    box-shadow:
        inset 0 -8px 16px rgba(0,0,0,0.3),
        0 4px 0 #3a2515,
        0 6px 12px rgba(0,0,0,0.3);
}

.fruit-cell.tilled {
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 8px,
            rgba(80, 50, 30, 0.5) 8px,
            rgba(80, 50, 30, 0.5) 10px
        ),
        linear-gradient(145deg, #5a3d2b 0%, #4a3020 50%, #3a2515 100%);
    border: 3px solid #2a1a0a;
}

.fruit-cell.planted,
.fruit-cell.growing,
.fruit-cell.mature {
    background: linear-gradient(145deg, #5a3d2b 0%, #4a3020 50%, #3a2515 100%);
    border: 3px solid #2a1a0a;
}

.fruit-cell.needs-water {
    border-color: #e74c3c !important;
    animation: water-warning 1.5s ease-in-out infinite;
}

.fruit-cell.needs-water .tree-svg {
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)) brightness(0.85) saturate(0.7);
    animation: thirsty-droop 2s ease-in-out infinite;
}

.fruit-cell.harvestable {
    border-color: #f1c40f !important;
    animation: harvest-glow 2s ease-in-out infinite;
}

.fruit-cell.harvestable .tree-svg {
    filter: drop-shadow(0 4px 8px rgba(241, 196, 15, 0.5));
    animation: harvest-ready 1.5s ease-in-out infinite;
}

.fruit-cell.dead {
    border-color: #795548 !important;
}

/* Fruit cell hover effects */
.fruit-cell:hover {
    transform: translateY(-6px) scale(1.03);
    z-index: 10;
}

/* Fruit-specific harvest particle colors */
.fruit-cell[data-fruit="apple"].harvestable .harvest-particle {
    background: radial-gradient(circle, #ff6b6b 0%, #c62828 100%);
}

.fruit-cell[data-fruit="orange"].harvestable .harvest-particle {
    background: radial-gradient(circle, #ffb74d 0%, #f57c00 100%);
}

.fruit-cell[data-fruit="banana"].harvestable .harvest-particle {
    background: radial-gradient(circle, #ffeb3b 0%, #ffc107 100%);
}

.fruit-cell[data-fruit="pear"].harvestable .harvest-particle {
    background: radial-gradient(circle, #dce775 0%, #afb42b 100%);
}

/* Fruit cell info labels */
.fruit-cell .remove-label,
.fruit-cell .harvest-counter,
.fruit-cell .production-timer {
    position: absolute;
    font-size: 11px;
    font-weight: bold;
    background: rgba(139, 69, 19, 0.9);
    color: #fff;
    padding: 3px 8px;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 20;
}

.fruit-cell .remove-label {
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
}

.fruit-cell .harvest-counter {
    bottom: 5px;
    left: 5px;
}

.fruit-cell .production-timer {
    top: 5px;
    left: 5px;
    background: rgba(34, 139, 34, 0.9);
}

/* =====================================
   RESPONSIVE ADJUSTMENTS
   ===================================== */

@media (max-width: 600px) {
    .tile {
        width: 60px;
        height: 60px;
    }

    .plant-svg {
        width: 48px;
        height: 48px;
    }

    .tree-svg {
        width: 70px;
        height: 70px;
    }

    .fruit-cell {
        width: 80px;
        height: 80px;
    }

    .garden-grid {
        gap: 6px;
        padding: 12px;
    }
}