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

::-webkit-scrollbar-track {
    background: #102216;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #13ec5b;
}

/* Animations */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

.animate-shake {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

/* Touch scrolling for mobile/tablet */
html,
body {
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
}

/* Prevent content overflow on all screens */
* {
    box-sizing: border-box;
}

/* Image responsiveness */
img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Responsive containers */
.responsive-container {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Tablet specific styles (7-12 inch screens ~768px to 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    body {
        font-size: 16px;
    }

    /* Grid adjustments for tablet */
    .grid {
        gap: 1rem !important;
    }

    /* Card padding adjustments */
    .p-6 {
        padding: 1rem !important;
    }

    /* Icon size adjustments for tablet */
    .text-\[64px\] {
        font-size: 48px !important;
    }

    /* Title adjustments */
    .text-3xl {
        font-size: 1.5rem !important;
    }

    .text-4xl {
        font-size: 1.875rem !important;
    }
}

/* Landscape tablet (11.2 inch tablet in landscape ~1200px width) */
@media screen and (min-width: 1024px) and (max-width: 1280px) and (orientation: landscape) {
    body {
        font-size: 15px;
    }

    main {
        padding: 1rem !important;
    }

    /* Ensure grid fills viewport properly */
    .grid {
        min-height: auto !important;
        height: auto !important;
    }
}

/* Portrait tablet */
@media screen and (max-width: 1024px) and (orientation: portrait) {

    /* Ensure single column on portrait for better readability */
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Reduce padding */
    .lg\:p-8,
    .lg\:p-10 {
        padding: 1rem !important;
    }
}

/* Prevent horizontal scroll */
html {
    overflow-x: hidden;
    width: 100%;
}

/* Ensure proper scroll behavior */
body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    width: 100%;
    position: relative;
}

/* Fix for fixed elements on tablet */
.fixed {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Safe area padding for tablets with notches */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
}

/* Performance optimizations for tablets */
@media screen and (max-width: 1280px) {

    /* Disable heavy effects on tablets for better performance */
    .backdrop-blur-sm,
    .backdrop-blur-md,
    .backdrop-blur-lg {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Simpler shadows for better performance */
    .shadow-2xl {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    }

    /* GPU acceleration for overlays */
    .fixed {
        will-change: opacity;
        backface-visibility: hidden;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Fast transitions for interactive elements */
button,
a,
.transition-all,
.transition-colors,
.transition-opacity {
    transition-duration: 150ms !important;
}