/* Base Template CSS - Extracted from inline styles */

/* Custom scrollbar styling for dark theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #111111;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 4px;
    border: 1px solid #1a1a1a;
}

::-webkit-scrollbar-thumb:hover {
    background: #404040;
}

::-webkit-scrollbar-corner {
    background: #111111;
}

/* Firefox scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: #333333 #111111;
}

/* Disable zoom and touch behaviors */
html, body {
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

input, textarea {
    -webkit-user-select: text;
}

/* Load More Button Styling */
.load-more-btn {
    position: relative;
    transition: all 0.2s ease-in-out;
}

.load-more-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.load-more-btn:active {
    transform: translateY(0);
}

.load-more-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.load-more-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Loading Spinner */
.htmx-indicator {
    display: none;
}

/* Fade-in animation for new games */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.4s ease-out;
}

/* Mobile loading overlay with terminal aesthetic */
@media (max-width: 768px) {
    /* Mobile loading overlay completely covers viewport issues */
    #mobile-loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        overflow: hidden;
    }
    
    /* Clean disabled state styling for desktop */
    .opacity-50 {
        opacity: 0.5 !important;
        transform: none !important;
    }
}

/* Terminal window styling for loading overlay */
.terminal-window {
    background: #111111;
    border: 1px solid #333333;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.terminal-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #111111 100%);
    border-bottom: 1px solid #333333;
}

.terminal-content {
    background: #111111;
}

/* Loading spinner animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Progress bar animation for mobile loading */
.loading-progress {
    animation: progress-pulse 2s ease-in-out infinite;
}

@keyframes progress-pulse {
    0%, 100% { 
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

/* Status Strip Styling */
#status-strip {
    background: linear-gradient(135deg, #111111 0%, #0f0f0f 100%);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

#status-strip .terminal-border {
    border-color: #333333;
}

/* Status strip responsive design */
@media (max-width: 640px) {
    #status-strip .hidden.sm\\:inline {
        display: none !important;
    }
    
    #status-strip {
        top: 64px; /* Adjust for mobile nav height */
    }
}
        width: 45%; 
        opacity: 0.8;
    }
    50% { 
        width: 65%; 
        opacity: 1;
    }
}

/* Browser Autofill Styling Fixes */
/* Ensure search input and all form inputs maintain dark theme colors even with browser autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #111111 inset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: #111111 !important;
    color: #ffffff !important;
    border-color: #333333 !important;
    caret-color: #8b5cf6 !important;
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s !important;
}

/* More aggressive Chrome autofill text color fixes */
input:-webkit-autofill::first-line,
textarea:-webkit-autofill::first-line {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Firefox autofill fix */
input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill {
    background-color: #111111 !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}

/* Search input specific autofill fixes */
#search-input:-webkit-autofill,
#search-input:-webkit-autofill:hover,
#search-input:-webkit-autofill:focus,
#search-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: transparent !important;
    color: #ffffff !important;
    caret-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s !important;
}

/* Extra aggressive search input text color fix for Chrome */
#search-input:-webkit-autofill::first-line {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Force text color on autofill selection */
#search-input:-webkit-autofill::selection {
    background-color: #8b5cf6 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#search-input:-moz-autofill {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Fallback for line-clamp until CSS is fully refactored */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobile menu styles */
#mobile-menu {
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    will-change: transform, opacity, max-height;
}

#mobile-menu.show {
    display: block !important;
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    max-height: 80vh;
}

/* Mobile menu item animations */
#mobile-menu .mobile-menu-item {
    transform: translateX(-20px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobile-menu.show .mobile-menu-item {
    transform: translateX(0);
    opacity: 1;
}

/* Staggered animation delays */
#mobile-menu.show .mobile-menu-item:nth-child(1) { transition-delay: 0.05s; }
#mobile-menu.show .mobile-menu-item:nth-child(2) { transition-delay: 0.1s; }
#mobile-menu.show .mobile-menu-item:nth-child(3) { transition-delay: 0.15s; }
#mobile-menu.show .mobile-menu-item:nth-child(4) { transition-delay: 0.2s; }
#mobile-menu.show .mobile-menu-item:nth-child(5) { transition-delay: 0.25s; }
#mobile-menu.show .mobile-menu-item:nth-child(6) { transition-delay: 0.3s; }
#mobile-menu.show .mobile-menu-item:nth-child(7) { transition-delay: 0.35s; }

/* Menu button icon animations */
#menu-icon, #close-icon {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#menu-icon.hidden, #close-icon.hidden {
    transform: rotate(90deg) scale(0);
    opacity: 0;
}

/* Desktop navigation - ensure it shows on wider screens */
.desktop-nav-container {
    display: none;
}

@media (min-width: 768px) {
    .desktop-nav-container {
        display: flex;
    }
}

/* User dropdown hover/click interaction */
/* Desktop hover behavior - only when not click-active */
@media (min-width: 768px) {
    .group:not(.click-active):hover #user-dropdown {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .group:not(.click-active):hover #user-menu-arrow {
        transform: rotate(180deg) !important;
    }
}

/* Click-active state takes full control */
.click-active #user-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
}

.click-active #user-dropdown.opacity-0 {
    opacity: 0 !important;
    visibility: hidden !important;
}