/* Fruit Garden - desktop uses a simple show/hide toggle (.garden-view.active);
   mobile.css fully re-specifies these under its own media query for the swipe/slide version. */

.gardens-slider {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Individual Garden Views - stacked via position:absolute so both stay in flex layout
   (display:none can't transition), crossfading between them on .active via opacity */
.garden-view {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.garden-view.active {
    opacity: 1;
    pointer-events: auto;
}

.garden-dot.locked {
    opacity: 0.55;
    filter: grayscale(80%);
}

/* Fruit Wrapper - Match Vegetable Garden Style */
.fruit-wrapper {
    background: rgba(139, 111, 71, 0.4);
    padding: 12px;
    border-radius: 15px;
    border: 4px solid var(--dark-brown);
    box-shadow: 0 6px 0 var(--dark-brown), 0 8px 16px var(--shadow);
    position: relative;
    backdrop-filter: blur(5px);
}

/* Fruit Grid - wraps at 3 per row, so 5 plots read as 3 on top + 2 centered below */
.fruit-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    align-items: center;
    justify-content: center;
    max-width: 434px; /* 3 cells (120px + 4px border each side = 128px) + 2 gaps - the 4th/5th cell wraps to row two */
    /* Match vegetable garden grid background */
    background: linear-gradient(135deg, rgba(107, 68, 35, 0.6) 0%, rgba(139, 111, 71, 0.6) 100%);
    padding: 12px;
    border-radius: 15px;
    box-shadow: inset 0 4px 12px rgba(0,0,0,0.3);
}

.fruit-cell {
    flex-shrink: 0;
}

/* Fruit Cell Styling - PREMIUM TREATMENT */
.fruit-cell {
    width: 120px;
    height: 120px;
    /* Premium inner glow effect */
    background:
        radial-gradient(circle at center,
            rgba(255, 248, 220, 0.3) 0%,
            rgba(139, 115, 85, 0.8) 70%,
            #6B5D4F 100%
        );
    /* Golden brass border */
    border: 4px solid #C9B037;
    border-radius: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    /* Premium shadow with golden aura */
    box-shadow:
        inset 0 2px 8px rgba(255,255,255,0.2),
        inset 0 -2px 8px rgba(0,0,0,0.3),
        0 4px 12px rgba(0,0,0,0.5),
        0 0 20px rgba(201, 176, 55, 0.2);
    overflow: visible;
}

/* Premium corner decoration (brass stud) */
.fruit-cell::before {
    content: '✦';
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 10px;
    color: #C9B037;
    opacity: 0.6;
    z-index: 10;
}

.fruit-cell:hover {
    transform: translateY(-5px) scale(1.02);
    /* Enhanced golden glow on hover */
    box-shadow:
        inset 0 2px 8px rgba(255,255,255,0.3),
        inset 0 -2px 8px rgba(0,0,0,0.4),
        0 8px 20px rgba(0,0,0,0.6),
        0 0 30px rgba(201, 176, 55, 0.4);
}

.fruit-cell.empty {
    background: linear-gradient(135deg, #8B7355 0%, #6F5436 100%);
}

/* Empty fruit cell dirt texture - natural soil particles */
.fruit-dirt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background:
        /* Large dirt clumps */
        radial-gradient(ellipse 6px 4px at 15% 20%, rgba(139, 115, 85, 0.9) 0%, transparent 100%),
        radial-gradient(ellipse 5px 3px at 75% 35%, rgba(107, 84, 54, 0.85) 0%, transparent 100%),
        radial-gradient(ellipse 7px 4px at 45% 80%, rgba(139, 115, 85, 0.9) 0%, transparent 100%),
        radial-gradient(ellipse 4px 3px at 85% 75%, rgba(111, 84, 54, 0.8) 0%, transparent 100%),
        /* Medium soil spots */
        radial-gradient(circle at 25% 55%, rgba(139, 115, 85, 0.7) 3px, transparent 3px),
        radial-gradient(circle at 65% 25%, rgba(107, 93, 79, 0.75) 2.5px, transparent 2.5px),
        radial-gradient(circle at 55% 65%, rgba(139, 115, 85, 0.7) 3px, transparent 3px),
        radial-gradient(circle at 35% 40%, rgba(111, 84, 54, 0.65) 2px, transparent 2px),
        radial-gradient(circle at 80% 50%, rgba(139, 115, 85, 0.7) 2.5px, transparent 2.5px),
        /* Small dirt particles */
        radial-gradient(circle at 10% 70%, rgba(107, 93, 79, 0.6) 1.5px, transparent 1.5px),
        radial-gradient(circle at 90% 15%, rgba(139, 115, 85, 0.55) 1.5px, transparent 1.5px),
        radial-gradient(circle at 40% 10%, rgba(111, 84, 54, 0.5) 1px, transparent 1px),
        radial-gradient(circle at 70% 90%, rgba(139, 115, 85, 0.6) 1.5px, transparent 1.5px),
        radial-gradient(circle at 20% 85%, rgba(107, 93, 79, 0.55) 1px, transparent 1px),
        /* Base gradient */
        linear-gradient(135deg, #8B7355 0%, #6F5436 100%);
}

.fruit-cell.tilled {
    background: linear-gradient(135deg, #654321 0%, #5C3D1E 100%);
}

/* Tilled fruit cell texture - plowed furrows for tree planting */
.fruit-tilled {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background:
        /* Horizontal furrow lines - wider spacing for larger cells */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 14px,
            rgba(80, 50, 30, 0.5) 14px,
            rgba(80, 50, 30, 0.5) 17px
        ),
        /* Vertical cross-furrows */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 20px,
            rgba(80, 50, 30, 0.3) 20px,
            rgba(80, 50, 30, 0.3) 23px
        ),
        /* Additional soil texture dots */
        radial-gradient(circle at 30% 25%, rgba(90, 58, 31, 0.4) 2px, transparent 2px),
        radial-gradient(circle at 70% 60%, rgba(90, 58, 31, 0.35) 2px, transparent 2px),
        radial-gradient(circle at 50% 85%, rgba(90, 58, 31, 0.4) 1.5px, transparent 1.5px),
        radial-gradient(circle at 15% 70%, rgba(90, 58, 31, 0.3) 1.5px, transparent 1.5px),
        radial-gradient(circle at 85% 30%, rgba(90, 58, 31, 0.35) 2px, transparent 2px),
        /* Base tilled soil gradient */
        linear-gradient(135deg, #6B4423 0%, #5A3A1F 100%);
}

.fruit-cell.planted,
.fruit-cell.growing {
    background: linear-gradient(135deg, #4A3728 0%, #3E2F23 100%);
}

/* Planted/growing fruit cell texture - rich dark soil around tree */
.fruit-planted {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    z-index: 0;
    background:
        /* Soil texture around plant base */
        radial-gradient(ellipse 8px 5px at 20% 80%, rgba(74, 55, 40, 0.6) 0%, transparent 100%),
        radial-gradient(ellipse 6px 4px at 80% 75%, rgba(62, 47, 35, 0.55) 0%, transparent 100%),
        radial-gradient(ellipse 5px 3px at 15% 30%, rgba(74, 55, 40, 0.5) 0%, transparent 100%),
        radial-gradient(ellipse 7px 4px at 85% 25%, rgba(62, 47, 35, 0.5) 0%, transparent 100%),
        /* Subtle moisture marks */
        radial-gradient(circle at 35% 70%, rgba(50, 35, 25, 0.4) 3px, transparent 3px),
        radial-gradient(circle at 65% 85%, rgba(50, 35, 25, 0.35) 2.5px, transparent 2.5px),
        radial-gradient(circle at 25% 50%, rgba(50, 35, 25, 0.3) 2px, transparent 2px),
        radial-gradient(circle at 75% 45%, rgba(50, 35, 25, 0.35) 2px, transparent 2px),
        /* Small organic particles */
        radial-gradient(circle at 45% 20%, rgba(62, 47, 35, 0.4) 1.5px, transparent 1.5px),
        radial-gradient(circle at 55% 90%, rgba(74, 55, 40, 0.35) 1.5px, transparent 1.5px),
        radial-gradient(circle at 10% 60%, rgba(62, 47, 35, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 90% 55%, rgba(74, 55, 40, 0.3) 1px, transparent 1px),
        /* Base dark soil gradient */
        linear-gradient(135deg, #4A3728 0%, #3E2F23 100%);
}

.fruit-cell.locked {
    opacity: 0.7;
    filter: grayscale(60%);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.fruit-cell.locked:hover {
    opacity: 0.92;
    filter: grayscale(25%);
}

.fruit-locked-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #FFD700;
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.fruit-locked-badge .coin-icon {
    width: 14px;
    height: 14px;
}

.fruit-cell.needs-water {
    border-color: #FF6B6B;
    animation: pulse-red 1.5s ease-in-out infinite;
}

.fruit-cell.harvestable {
    border-color: #FFD700;
    /* Intense golden glow for harvestable state */
    box-shadow:
        inset 0 2px 8px rgba(255,255,255,0.4),
        inset 0 -2px 8px rgba(0,0,0,0.2),
        0 0 30px rgba(255, 215, 0, 0.8),
        0 4px 12px rgba(0,0,0,0.5),
        0 0 40px rgba(255, 215, 0, 0.5);
    animation: pulse-premium-gold 1.5s ease-in-out infinite;
}

@keyframes pulse-premium-gold {
    0%, 100% {
        box-shadow:
            inset 0 2px 8px rgba(255,255,255,0.4),
            inset 0 -2px 8px rgba(0,0,0,0.2),
            0 0 30px rgba(255, 215, 0, 0.8),
            0 4px 12px rgba(0,0,0,0.5),
            0 0 40px rgba(255, 215, 0, 0.5);
    }
    50% {
        box-shadow:
            inset 0 2px 8px rgba(255,255,255,0.5),
            inset 0 -2px 8px rgba(0,0,0,0.3),
            0 0 50px rgba(255, 215, 0, 1),
            0 6px 20px rgba(0,0,0,0.6),
            0 0 60px rgba(255, 215, 0, 0.7);
    }
}

@keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4); }
    50% { box-shadow: 0 0 20px 8px rgba(255, 107, 107, 0.2); }
}

@keyframes pulse-gold {
    0%, 100% { box-shadow: 0 0 20px 8px rgba(218, 165, 32, 0.4); }
    50% { box-shadow: 0 0 35px 15px rgba(218, 165, 32, 0.6); }
}

.orchard-panel.collapsed {
    transform: translateY(-50%) translateX(calc(100% - 50px));
}

/* Orchard Header */
.orchard-header {
    background: linear-gradient(135deg, #DAA520 0%, #B8860B 100%);
    padding: 12px 15px;
    border-bottom: 3px solid #8B6914;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.orchard-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #FFF;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    font-family: 'Fredoka', sans-serif;
}

.orchard-toggle {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 16px;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.orchard-toggle:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.orchard-panel.collapsed .orchard-toggle {
    transform: rotate(180deg);
}

/* Orchard Content */
.orchard-content {
    padding: 15px;
    overflow-y: auto;
    max-height: calc(85vh - 60px);
}

.orchard-content::-webkit-scrollbar {
    width: 8px;
}

.orchard-content::-webkit-scrollbar-track {
    background: rgba(218, 165, 32, 0.1);
    border-radius: 4px;
}

.orchard-content::-webkit-scrollbar-thumb {
    background: #DAA520;
    border-radius: 4px;
}

.orchard-content::-webkit-scrollbar-thumb:hover {
    background: #B8860B;
}

/* Orchard Slots Container */
.orchard-slots {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 15px;
}

/* Individual Fruit Tree Slot */
.fruit-slot {
    background: linear-gradient(135deg, #FFF 0%, #FFFEF0 100%);
    border: 4px dashed #DAA520;
    border-radius: 15px;
    height: 140px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(218, 165, 32, 0.15);
    overflow: hidden;
}

.fruit-slot:hover {
    border-color: #B8860B;
    box-shadow: 0 6px 15px rgba(218, 165, 32, 0.3);
    transform: translateY(-2px);
}

.fruit-slot.empty {
    border-style: dashed;
    opacity: 0.7;
}

.fruit-slot.planted,
.fruit-slot.growing {
    border-style: solid;
    background: linear-gradient(135deg, #E8F5E9 0%, #F1F8E9 100%);
}

.fruit-slot.needs-water {
    border-color: #FF6B6B;
    animation: pulse-red 1.5s ease-in-out infinite;
}

.fruit-slot.harvestable {
    border-color: #4CAF50;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.4),
                0 4px 10px rgba(218, 165, 32, 0.3);
    animation: pulse-gold 1s ease-in-out infinite;
}

@keyframes pulse-red {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4);
    }
    50% {
        box-shadow: 0 0 15px 5px rgba(255, 107, 107, 0.2);
    }
}

@keyframes pulse-gold {
    0%, 100% {
        box-shadow: 0 0 15px 5px rgba(218, 165, 32, 0.4);
    }
    50% {
        box-shadow: 0 0 25px 10px rgba(218, 165, 32, 0.6);
    }
}

/* Fruit Tree Visual */
.fruit-tree {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 5px;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
}

.fruit-slot:hover .fruit-tree {
    transform: scale(1.1);
}

/* Premium Tree Growth Stages */
/* Stage 0: Seedling/sapling - small and muted */
.fruit-tree.stage-0 {
    font-size: 40px;
    filter: grayscale(0.3) saturate(0.8);
    opacity: 0.9;
}

/* Stage 1: Young tree establishing - growing with sway */
.fruit-tree.stage-1 {
    font-size: 50px;
    filter: saturate(0.9);
    animation: tree-sway 4s ease-in-out infinite;
}

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

/* Stage 2: Mature tree - full size, ready to fruit */
.fruit-tree.stage-2 {
    font-size: 58px;
    filter: saturate(1.1);
    position: relative;
}

/* Stage 3: Harvestable - large fruit with premium effects */
.fruit-tree.stage-3 {
    font-size: 70px;
    filter: saturate(1.2) drop-shadow(0 0 12px rgba(255, 215, 0, 0.6));
    animation:
        premium-pulse 2s ease-in-out infinite,
        premium-float 3s ease-in-out infinite;
}

@keyframes premium-pulse {
    0%, 100% {
        filter: saturate(1.2) drop-shadow(0 0 12px rgba(255, 215, 0, 0.6));
    }
    50% {
        filter: saturate(1.4) drop-shadow(0 0 20px rgba(255, 215, 0, 0.9));
    }
}

@keyframes premium-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Fruit Type Label */
.fruit-label {
    font-size: 14px;
    font-weight: 600;
    color: #6B4423;
    text-align: center;
    margin-bottom: 3px;
    font-family: 'Comfortaa', sans-serif;
}

/* Empty Slot Label */
.empty-label {
    font-size: 14px;
    color: #999;
    text-align: center;
    font-family: 'Comfortaa', sans-serif;
}

/* Water Indicator for Fruits */
.fruit-water-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 24px;
    animation: drip 1s ease-in-out infinite;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

@keyframes drip {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(3px);
    }
}

/* Harvest Ready Sparkle for Fruits */
.fruit-harvest-sparkle {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 24px;
    animation: sparkle 1s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotate(180deg);
    }
}

/* Orchard Info Section */
.orchard-info {
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.1) 0%, rgba(184, 134, 11, 0.1) 100%);
    border: 2px solid rgba(218, 165, 32, 0.3);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}

.orchard-hint {
    margin: 0;
    font-size: 13px;
    color: #6B4423;
    font-family: 'Comfortaa', sans-serif;
    line-height: 1.4;
}

/* Responsive - Hide on mobile */
@media (max-width: 768px) {
    .orchard-panel {
        display: none !important;
    }
}

/* Tablet - Narrower panel */
@media (min-width: 769px) and (max-width: 1024px) {
    .orchard-panel {
        width: 220px;
    }

    .fruit-slot {
        height: 120px;
    }

    .fruit-tree {
        font-size: 56px;
    }

    .fruit-tree.stage-3 {
        font-size: 64px;
    }
}

/* Premium Orchard Unlock Animation */
@keyframes orchard-unlock {
    0% {
        transform: translateY(-50%) translateX(100%);
        opacity: 0;
    }
    60% {
        transform: translateY(-50%) translateX(-10px);
    }
    100% {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
    }
}

.orchard-panel.unlocking {
    animation: orchard-unlock 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Harvest and Production Timer Animations */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(0);
    }
    50% {
        transform: translate(-50%, -50%) translateY(-8px);
    }
}