/**
 * Custom CSS for BHc Farms Weed Game
 * Mobile-optimized styles
 */

/* Mobile-first optimizations */
@media (max-width: 768px) {
    /* Larger touch targets for mobile */
    button, a[role="button"], .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better spacing on mobile */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Prevent text from being too small */
    body {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
    }
    
    /* Better form inputs on mobile */
    input, textarea, select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Portrait-locked design for very small screens */
@media (orientation: landscape) and (max-height: 600px) {
    body {
        font-size: 14px;
    }
    
    nav {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* Smooth transitions */
* {
    transition: background-color 0.2s, color 0.2s;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1f2937;
}

::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* Grow patch hover effects (desktop only) */
@media (hover: hover) {
    [data-patch-id]:hover {
        transform: scale(1.05);
        cursor: pointer;
    }
}

/* Touch-friendly patches on mobile */
[data-patch-id] {
    min-height: 80px;
    min-width: 80px;
    touch-action: manipulation;
}

@media (max-width: 768px) {
    [data-patch-id] {
        min-height: 100px;
        min-width: 100px;
    }
}

/* Coupon modal animation */
#coupon-modal {
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Loading spinner */
.spinner {
    border: 4px solid #374151;
    border-top: 4px solid #10b981;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mobile-specific improvements */
@media (max-width: 768px) {
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }
    
    /* Better button spacing */
    .grid > * {
        margin-bottom: 0.5rem;
    }
    
    /* Larger tap targets */
    a, button {
        -webkit-tap-highlight-color: rgba(16, 185, 129, 0.3);
    }
    
    /* Better modal on mobile */
    #coupon-modal {
        padding: 1rem;
    }
    
    /* Stack stats on mobile */
    .flex.items-center.justify-between {
        flex-direction: column;
        gap: 1rem;
    }
    
    /* Better text wrapping */
    h1, h2, h3 {
        word-wrap: break-word;
    }
}

/* Landscape phone optimization */
@media (max-width: 768px) and (orientation: landscape) {
    nav {
        padding: 0.5rem 0;
    }
    
    main {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* Tutorial highlighting - brighten focused elements */
.tutorial-highlight {
    animation: tutorialPulse 2s ease-in-out infinite !important;
    border-color: #10b981 !important;
    border-width: 3px !important;
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.8), 0 0 50px rgba(16, 185, 129, 0.4) !important;
    z-index: 10 !important;
    position: relative !important;
    filter: brightness(1.4) !important;
    transform: scale(1.05) !important;
}

@keyframes tutorialPulse {
    0%, 100% {
        box-shadow: 0 0 25px rgba(16, 185, 129, 0.8), 0 0 50px rgba(16, 185, 129, 0.4) !important;
        transform: scale(1.05) !important;
        filter: brightness(1.4) !important;
    }
    50% {
        box-shadow: 0 0 40px rgba(16, 185, 129, 1), 0 0 80px rgba(16, 185, 129, 0.7) !important;
        transform: scale(1.08) !important;
        filter: brightness(1.6) !important;
    }
}

/* Lab section highlight */
#step-lab.tutorial-highlight {
    border: 3px solid #10b981;
    border-radius: 0.5rem;
    padding: 1rem;
    background: rgba(16, 185, 129, 0.15);
    filter: brightness(1.15);
}

/* Dim non-highlighted elements when tutorial is active */
body.tutorial-active .container > *:not(.tutorial-highlight):not(#tutorial-instructions) {
    opacity: 0.6;
    filter: brightness(0.7);
    transition: opacity 0.3s, filter 0.3s;
}

/* Keep highlighted elements bright */
body.tutorial-active .tutorial-highlight {
    opacity: 1 !important;
    filter: brightness(1.2) !important;
}