/* Custom CSS for Pondere's Gaming Hub */

/* Custom animations */
@keyframes gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes slideIn {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

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

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); }
    50% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.6); }
}

/* Custom utility classes */
.bg-gradient-text {
    background: linear-gradient(45deg, #00d4ff, #0099cc, #0066ff);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient 3s ease-in-out infinite;
}

.bg-gradient-blue {
    background: linear-gradient(45deg, #00d4ff, #0099cc);
}

.shadow-blue-glow {
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
}

.panel-glow {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.card-glow {
    transition: all 0.3s ease;
}

.card-glow:hover {
    box-shadow: 0 12px 40px rgba(0, 212, 255, 0.2);
    transform: translateY(-5px);
}

.text-shadow-glow {
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

.animate-slide-in {
    animation: slideIn 0.6s ease-out;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

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

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #00d4ff, #0099cc);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #0099cc, #0066ff);
}

/* Custom focus styles */
.focus-cyan:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.3);
}

/* Custom button styles */
.btn-gradient {
    background: linear-gradient(45deg, #00d4ff, #0099cc);
    transition: all 0.3s ease;
}

.btn-gradient:hover {
    background: linear-gradient(45deg, #0099cc, #0066ff);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);
}

/* Custom input styles */
.input-glow:focus {
    border-color: #00d4ff;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

/* Custom card styles */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Custom background overlays */
.bg-overlay-light {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(20, 20, 20, 0.6) 100%);
}

.bg-overlay-medium {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(20, 20, 20, 0.8) 100%);
}

.bg-overlay-heavy {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(20, 20, 20, 0.9) 100%);
}

.bg-overlay-custom {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 212, 255, 0.1) 100%);
}

/* Responsive utilities */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none;
    }
    
    .mobile-full {
        width: 100%;
    }
    
    /* Mobile-specific adjustments */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Improve touch targets on mobile */
    .btn, button, a {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better spacing for mobile */
    .section-mobile {
        margin-bottom: 2rem;
    }
    
    /* Optimize text sizes for mobile */
    .text-mobile-sm {
        font-size: 0.875rem;
    }
    
    .text-mobile-base {
        font-size: 1rem;
    }
    
    .text-mobile-lg {
        font-size: 1.125rem;
    }
    
    /* Improve card layouts on mobile */
    .card-mobile {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    /* Better grid layouts for mobile */
    .grid-mobile {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Improve social media buttons on mobile */
    .social-btn-mobile {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1rem;
        margin-bottom: 0.5rem;
    }
    
    /* Better tab navigation on mobile */
    .tab-mobile {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        min-width: auto;
    }
    
    /* Improve content padding on mobile */
    .content-mobile {
        padding: 1rem;
    }
    
    /* Better spacing between sections on mobile */
    .section-spacing-mobile {
        margin-bottom: 2rem;
    }
    
    /* Optimize icons for mobile */
    .icon-mobile {
        font-size: 1.25rem;
    }
    
    /* Better button layouts on mobile */
    .btn-group-mobile {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group-mobile .btn {
        margin-bottom: 0.5rem;
        width: 100%;
    }
}

/* Small mobile devices (320px and up) */
@media (min-width: 320px) and (max-width: 480px) {
    .xs\:text-xs {
        font-size: 0.75rem;
    }
    
    .xs\:px-2 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .xs\:py-2 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    
    .xs\:space-y-2 > * + * {
        margin-top: 0.5rem;
    }
    
    .xs\:gap-2 {
        gap: 0.5rem;
    }
    
    .xs\:rounded-lg {
        border-radius: 0.5rem;
    }
    
    .xs\:text-sm {
        font-size: 0.875rem;
    }
    
    .xs\:mb-2 {
        margin-bottom: 0.5rem;
    }
    
    .xs\:p-3 {
        padding: 0.75rem;
    }
}

/* Medium mobile devices (481px and up) */
@media (min-width: 481px) and (max-width: 768px) {
    .sm\:text-base {
        font-size: 1rem;
    }
    
    .sm\:px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .sm\:py-3 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    
    .sm\:space-y-3 > * + * {
        margin-top: 0.75rem;
    }
    
    .sm\:gap-4 {
        gap: 1rem;
    }
    
    .sm\:rounded-xl {
        border-radius: 0.75rem;
    }
    
    .sm\:text-lg {
        font-size: 1.125rem;
    }
    
    .sm\:mb-3 {
        margin-bottom: 0.75rem;
    }
    
    .sm\:p-4 {
        padding: 1rem;
    }
}

/* Large mobile devices (769px and up) */
@media (min-width: 769px) and (max-width: 1024px) {
    .md\:text-xl {
        font-size: 1.25rem;
    }
    
    .md\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .md\:py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    .md\:space-y-4 > * + * {
        margin-top: 1rem;
    }
    
    .md\:gap-6 {
        gap: 1.5rem;
    }
    
    .md\:rounded-2xl {
        border-radius: 1rem;
    }
    
    .md\:text-2xl {
        font-size: 1.5rem;
    }
    
    .md\:mb-4 {
        margin-bottom: 1rem;
    }
    
    .md\:p-6 {
        padding: 1.5rem;
    }
}

/* Desktop devices (1025px and up) */
@media (min-width: 1025px) {
    .lg\:text-3xl {
        font-size: 1.875rem;
    }
    
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    .lg\:py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    
    .lg\:space-y-6 > * + * {
        margin-top: 1.5rem;
    }
    
    .lg\:gap-8 {
        gap: 2rem;
    }
    
    .lg\:rounded-3xl {
        border-radius: 1.5rem;
    }
    
    .lg\:text-4xl {
        font-size: 2.25rem;
    }
    
    .lg\:mb-6 {
        margin-bottom: 1.5rem;
    }
    
    .lg\:p-8 {
        padding: 2rem;
    }
}

/* Extra large devices (1441px and up) */
@media (min-width: 1441px) {
    .xl\:text-5xl {
        font-size: 3rem;
    }
    
    .xl\:px-10 {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    
    .xl\:py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .xl\:space-y-8 > * + * {
        margin-top: 2rem;
    }
    
    .xl\:gap-10 {
        gap: 2.5rem;
    }
    
    .xl\:rounded-3xl {
        border-radius: 1.5rem;
    }
    
    .xl\:text-6xl {
        font-size: 3.75rem;
    }
    
    .xl\:mb-8 {
        margin-bottom: 2rem;
    }
    
    .xl\:p-10 {
        padding: 2.5rem;
    }
}

/* Landscape mobile orientation */
@media (max-width: 768px) and (orientation: landscape) {
    .landscape-mobile {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    .landscape-mobile .header {
        margin-bottom: 1rem;
    }
    
    .landscape-mobile .section {
        margin-bottom: 1rem;
    }
}

/* Portrait mobile orientation */
@media (max-width: 768px) and (orientation: portrait) {
    .portrait-mobile .header {
        margin-bottom: 2rem;
    }
    
    .portrait-mobile .section {
        margin-bottom: 2rem;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .retina {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .animate-slide-in,
    .animate-float,
    .animate-pulse-glow,
    .animate-gradient {
        animation: none;
    }
    
    .hover\:scale-105:hover,
    .hover\:-translate-y-1:hover,
    .hover\:-translate-y-3:hover {
        transform: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .dark-mode {
        color-scheme: dark;
    }
}

/* Light mode support */
@media (prefers-color-scheme: light) {
    .light-mode {
        color-scheme: light;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
}

/* Last Updated Display Styling */
.last-updated-display {
    animation: fadeInUp 0.6s ease-out;
}

.last-updated-display .settings-updated {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%);
    border: 1px solid rgba(6, 182, 212, 0.3);
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.1);
}

.last-updated-display .game-updated {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(147, 51, 234, 0.2) 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1);
}

.last-updated-display .badge {
    transition: all 0.3s ease;
}

.last-updated-display .badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* System Specs Card Improvements */
.spec-value-box {
    min-height: 3rem; /* Increased from 2.5rem */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    word-break: break-word;
    hyphens: auto;
    max-width: 70%; /* Increased from 65% for better balance */
    /* Unified color scheme for all sections */
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(0, 153, 204, 0.15)) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.15) !important;
    transition: all 0.3s ease;
}

.spec-value-box:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 153, 204, 0.2)) !important;
    border-color: rgba(0, 212, 255, 0.4) !important;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2) !important;
}

.spec-value-multiple {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.25rem; /* Reduced from 0.375rem for tighter spacing */
    padding: 0.625rem 0.875rem; /* Reduced from 0.75rem 1rem for better proportions */
    max-width: 70%; /* Increased from 65% for better balance */
}

.spec-value-multiple .spec-item {
    font-size: 0.75rem; /* Reduced from 0.875rem for better fit */
    line-height: 1.3; /* Increased from 1.2 */
    padding: 0.25rem 0.5rem; /* Reduced from 0.375rem 0.625rem for better proportions */
    /* Different color for individual items - more vibrant */
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.25), rgba(0, 153, 204, 0.25));
    border-radius: 0.5rem; /* Increased from 0.375rem */
    border: 1px solid rgba(0, 212, 255, 0.4);
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    text-align: right;
    color: #ffffff;
    font-weight: 500;
    transition: all 0.2s ease;
}

.spec-value-multiple .spec-item:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.35), rgba(0, 153, 204, 0.35));
    border-color: rgba(0, 212, 255, 0.5);
}

.spec-value-single {
    padding: 0.625rem 0.875rem; /* Reduced from 0.75rem 1rem for better proportions */
    font-size: 0.75rem; /* Reduced from 0.875rem for better fit */
    line-height: 1.3; /* Increased from 1.2 */
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    text-align: right;
    color: #ffffff;
    font-weight: 600;
    /* Ensure single items have the same box styling as multiple items */
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Unified color scheme for all sections */
.system-specs-card .spec-value-box,
.peripherals-card .spec-value-box,
.hardware-card .spec-value-box {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(0, 153, 204, 0.15)) !important;
    border-color: rgba(0, 212, 255, 0.3) !important;
}

.system-specs-card .spec-value-box:hover,
.peripherals-card .spec-value-box:hover,
.hardware-card .spec-value-box:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 153, 204, 0.2)) !important;
    border-color: rgba(0, 212, 255, 0.4) !important;
}

.system-specs-card .spec-item,
.peripherals-card .spec-item,
.hardware-card .spec-item {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.25), rgba(0, 153, 204, 0.25));
    border-color: rgba(0, 212, 255, 0.4);
}

.system-specs-card .spec-item:hover,
.peripherals-card .spec-item:hover,
.hardware-card .spec-item:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.35), rgba(0, 153, 204, 0.35));
    border-color: rgba(0, 212, 255, 0.5);
}

/* Animation for the last updated display */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Better system specs layout for long text */
.system-specs-card .flex.justify-between {
    align-items: flex-start;
    gap: 0.75rem; /* Reduced from default for tighter spacing */
}

.system-specs-card .font-medium {
    flex-shrink: 0;
    min-width: 70px; /* Reduced from 80px for better proportions */
}

.system-specs-card .spec-value-box,
.system-specs-card .spec-value-multiple,
.system-specs-card .spec-value-single {
    flex: 1;
    min-width: 0;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .last-updated-display .badge {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }
    
    .last-updated-display .badge span {
        font-size: 0.75rem;
    }
}

/* Additional mobile-specific utilities */
.mobile-optimized {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.mobile-touch-friendly {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
}

.mobile-scroll-smooth {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.mobile-font-optimized {
    font-feature-settings: "liga" 1, "kern" 1;
    text-rendering: optimizeLegibility;
}

/* Mobile-specific button styles */
.btn-mobile-primary {
    @apply bg-gradient-to-r from-cyan-500 to-blue-600 text-white font-semibold py-3 px-6 rounded-xl;
    min-height: 48px;
    touch-action: manipulation;
}

.btn-mobile-secondary {
    @apply border-2 border-cyan-400/30 text-cyan-400 font-semibold py-3 px-6 rounded-xl;
    min-height: 48px;
    touch-action: manipulation;
}

/* Mobile-specific card styles */
.card-mobile-optimized {
    @apply bg-gradient-to-br from-white/8 to-white/3 backdrop-blur-xl border border-white/10 rounded-2xl;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Mobile-specific grid layouts */
.grid-mobile-1 {
    grid-template-columns: 1fr;
    gap: 1rem;
}

.grid-mobile-2 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

/* Mobile-specific spacing */
.space-mobile-y-2 > * + * {
    margin-top: 0.5rem;
}

.space-mobile-y-4 > * + * {
    margin-top: 1rem;
}

.space-mobile-y-6 > * + * {
    margin-top: 1.5rem;
}

/* Mobile-specific text sizes */
.text-mobile-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.text-mobile-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-mobile-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-mobile-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-mobile-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-mobile-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-mobile-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

/* Mobile-specific padding */
.p-mobile-2 {
    padding: 0.5rem;
}

.p-mobile-3 {
    padding: 0.75rem;
}

.p-mobile-4 {
    padding: 1rem;
}

.p-mobile-6 {
    padding: 1.5rem;
}

.p-mobile-8 {
    padding: 2rem;
}

/* Mobile-specific margins */
.m-mobile-2 {
    margin: 0.5rem;
}

.m-mobile-4 {
    margin: 1rem;
}

.m-mobile-6 {
    margin: 1.5rem;
}

.m-mobile-8 {
    margin: 2rem;
}

/* Mobile-specific border radius */
.rounded-mobile-lg {
    border-radius: 0.5rem;
}

.rounded-mobile-xl {
    border-radius: 0.75rem;
}

.rounded-mobile-2xl {
    border-radius: 1rem;
}

.rounded-mobile-3xl {
    border-radius: 1.5rem;
}

/* Mobile-specific shadows */
.shadow-mobile-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.shadow-mobile-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-mobile-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Mobile-specific transitions */
.transition-mobile-fast {
    transition: all 0.15s ease-in-out;
}

.transition-mobile-normal {
    transition: all 0.3s ease-in-out;
}

.transition-mobile-slow {
    transition: all 0.5s ease-in-out;
}

/* Mobile-specific hover effects */
.hover-mobile-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.hover-mobile-scale:hover {
    transform: scale(1.02);
}

.hover-mobile-glow:hover {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

/* Mobile-specific focus states */
.focus-mobile-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.3);
}

.focus-mobile-outline:focus {
    outline: 2px solid rgba(0, 212, 255, 0.5);
    outline-offset: 2px;
}

/* Mobile-specific animations */
.animate-mobile-fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

.animate-mobile-slide-up {
    animation: slideUp 0.3s ease-out;
}

.animate-mobile-bounce {
    animation: bounce 0.6s ease-in-out;
}

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

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -8px, 0);
    }
    70% {
        transform: translate3d(0, -4px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.animate-heartbeat {
    animation: heartbeat 2s ease-in-out infinite;
}

/* Better spacing for the flex layout */
.system-specs-card .flex.justify-between,
.peripherals-card .flex.justify-between,
.hardware-card .flex.justify-between {
    align-items: flex-start;
    gap: 0.75rem; /* Reduced from default for tighter spacing */
}

.system-specs-card .font-medium,
.peripherals-card .font-medium,
.hardware-card .font-medium {
    flex-shrink: 0;
    min-width: 70px; /* Reduced from 80px for better proportions */
}

.system-specs-card .spec-value-box,
.system-specs-card .spec-value-multiple,
.system-specs-card .spec-value-single,
.peripherals-card .spec-value-box,
.peripherals-card .spec-value-multiple,
.peripherals-card .spec-value-single,
.hardware-card .spec-value-box,
.hardware-card .spec-value-multiple,
.hardware-card .spec-value-single {
    flex: 1;
    min-width: 0;
}