Update index.html

index.html

@@ -21,33 +21,51 @@
             min-height: 100vh;
             position: relative;
             overflow-x: hidden;
+            scroll-behavior: smooth;
         }
         
-        /* Animated gradient background */
+        /* Card art background with subtle blur */
         body::before {
             content: '';
             position: fixed;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: 
-                radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
-                radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
-                radial-gradient(circle at 40% 40%, rgba(0, 212, 255, 0.2) 0%, transparent 50%),
-                radial-gradient(circle at 90% 90%, rgba(120, 255, 119, 0.2) 0%, transparent 50%);
-            animation: gradientShift 20s ease infinite;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            filter: blur(10px) brightness(0.7); /* Reduced blur and adjusted brightness */
             z-index: 0;
+            opacity: 0.4; /* Reduced opacity for subty */
+            transform: scale(1.1); /* Reduced scale to prevent edge issues */
         }
         
+        /* Static glass panel overlay */
+        body::after {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(255, 255, 255, 0.1); /* 20% opacity white overlay */
+            backdrop-filter: blur(10px); /* Subtle blur effect */
+            -webkit-backdrop-filter: blur(10px); /* Safari support */
+            z-index: 1; /* Above background but below content */
+            pointer-events: none; /* Allow interactions to pass through */
+        }
+        
+        /* Remove the additional blur overlay */
+        
         @keyframes gradientShift {
-            0%, 100% { transform: rotate(0deg) scale(1.5); }
-            25% { transform: rotate(90deg) scale(1.8); }
-            50% { transform: rotate(180deg) scale(1.5); }
-            75% { transform: rotate(270deg) scale(1.8); }
+            0%, 100% { transform: rotate(0deg) scale(1.2); }
+            25% { transform: rotate(90deg) scale(1.5); }
+            50% { transform: rotate(180deg) scale(1.2); }
+            75% { transform: rotate(270deg) scale(1.5); }
         }
         
-        /* Floating orbs for depth */
+        /* Optimized floating orbs with better mobile performance */
         .orb {
             position: fixed;
             border-radius: 50%;
@@ -55,11 +73,12 @@
             opacity: 0.4;
             animation: float 20s infinite ease-in-out;
             pointer-events: none;
+            will-change: transform;
         }
         
         .orb1 {
-            width: 400px;
-            height: 400px;
+            width: min(400px, 40vw);
+            height: min(400px, 40vw);
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             top: 10%;
             left: 10%;
@@ -67,8 +86,8 @@
         }
         
         .orb2 {
-            width: 300px;
-            height: 300px;
+            width: min(300px, 30vw);
+            height: min(300px, 30vw);
             background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
             bottom: 20%;
             right: 10%;
@@ -77,8 +96,8 @@
         }
         
         .orb3 {
-            width: 350px;
-            height: 350px;
+            width: min(350px, 35vw);
+            height: min(350px, 35vw);
             background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
             top: 50%;
             left: 50%;
@@ -98,66 +117,76 @@
             }
         }
         
+        /* Mobile optimizations - reduce animations on smaller screens */
+        @media (max-width: 768px) {
+            body::before {
+                animation-duration: 30s;
+                filter: blur(80px) brightness(0.6); /* Reduced blur but kept darkening */
+            }
+            
+            .orb {
+                filter: blur(20px);
+                opacity: 0.2;
+            }
+            
+            .orb1, .orb2, .orb3 {
+                animation-duration: 40s;
+            }
+        }
+        
         .container {
             position: relative;
             z-index: 10;
         }
         
-        /* Enhanced glass panel effect */
+        /* Ensure the card art is properly positioned */
+        #card-image {
+            position: relative;
+            z-index: 5;
+        }
+        
+        /* Enhanced glass panel effect with better mobile support */
         .glass {
-            background: rgba(255, 255, 255, 0.03);
+            background: rgba(0, 0, 0, 0.4); /* Darker background */
             backdrop-filter: blur(20px);
             -webkit-backdrop-filter: blur(20px);
             border: 1px solid rgba(255, 255, 255, 0.08);
             box-shadow: 
-                0 8px 32px 0 rgba(0, 0, 0, 0.37),
-                inset 0 0 0 1px rgba(255, 255, 255, 0.08),
-                inset 0 -1px 0 0 rgba(255, 255, 255, 0.05);
+                0 8px 32px 0 rgba(0, 0, 0, 0.6), /* Darker shadow */
+                inset 0 0 0 1px rgba(255, 255, 255, 0.05), /* Reduced inner glow */
+                inset 0 -1px 0 0 rgba(255, 255, 255, 0.03); /* Reduced inner highlight */
             transition: all 0.3s ease;
         }
         
         .glass-hover:hover {
-            background: rgba(255, 255, 255, 0.05);
+            background: rgba(0, 0, 0, 0.5); /* Darker on hover */
             border-color: rgba(255, 255, 255, 0.15);
             box-shadow: 
-                0 8px 32px 0 rgba(0, 0, 0, 0.5),
+                0 8px 32px 0 rgba(0, 0, 0, 0.7),
                 inset 0 0 0 1px rgba(255, 255, 255, 0.1),
                 inset 0 -1px 0 0 rgba(255, 255, 255, 0.08),
                 0 0 80px -20px rgba(120, 119, 198, 0.5);
             transform: translateY(-2px);
         }
         
-        /* Ultra glass card */
+        /* Mobile-first glass card design - Much darker */
         .glass-card {
             background: linear-gradient(135deg, 
-                rgba(255, 255, 255, 0.07) 0%, 
-                rgba(255, 255, 255, 0.02) 100%);
-            backdrop-filter: blur(40px) saturate(150%);
-            -webkit-backdrop-filter: blur(40px) saturate(150%);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 24px;
+                rgba(0, 0, 0, 0.8) 0%, /* Much darker gradient */
+                rgba(0, 0, 0, 0.7) 100%);
+            backdrop-filter: blur(min(40px, 20px));
+            -webkit-backdrop-filter: blur(min(40px, 20px));
+            border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle border */
+            border-radius: min(24px, 16px);
             box-shadow: 
-                0 20px 40px -15px rgba(0, 0, 0, 0.5),
-                inset 0 0 0 1px rgba(255, 255, 255, 0.1),
-                inset 0 0 30px rgba(255, 255, 255, 0.02);
+                0 20px 40px -15px rgba(0, 0, 0, 0.8), /* Much darker shadow */
+                inset 0 0 0 1px rgba(255, 255, 255, 0.05), /* Minimal inner glow */
+                inset 0 0 30px rgba(0, 0, 0, 0.3); /* Dark inner shadow instead of light */
             overflow: hidden;
             position: relative;
         }
         
-        .glass-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 1px;
-            background: linear-gradient(90deg, 
-                transparent, 
-                rgba(255, 255, 255, 0.3), 
-                transparent);
-        }
-        
-        /* Header styling */
+        /* Responsive typography */
         .header-text {
             font-family: 'Space Grotesk', sans-serif;
             font-weight: 700;
@@ -167,6 +196,7 @@
             background-clip: text;
             text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
             letter-spacing: -1px;
+            line-height: 1;
         }
         
         .subheader-text {
@@ -174,23 +204,50 @@
             font-weight: 300;
             letter-spacing: 2px;
             text-transform: uppercase;
-            font-size: 0.875rem;
+            font-size: clamp(0.75rem, 2vw, 0.875rem);
         }
         
-        /* Modern button style */
+        /* Responsive button styles */
         .glass-button {
-            background: rgba(255, 255, 255, 0.05);
+            background: rgba(0, 0, 0, 0.4); /* Darker button background */
             backdrop-filter: blur(10px);
             border: 1px solid rgba(255, 255, 255, 0.1);
             color: rgba(255, 255, 255, 0.9);
-            padding: 14px 28px;
-            border-radius: 16px;
+            padding: min(14px, 3vw) min(28px, 6vw);
+            border-radius: min(16px, 12px);
             font-weight: 500;
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             position: relative;
             overflow: hidden;
-            font-size: 0.95rem;
+            font-size: clamp(0.85rem, 2.5vw, 0.95rem);
             letter-spacing: 0.5px;
+            touch-action: manipulation;
+            -webkit-tap-highlight-color: transparent;
+            user-select: none;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 44px; /* iOS minimum tap target */
+            white-space: nowrap;
+        }
+        
+        /* Specific styles for purchase buttons */
+        #purchase-links .glass-button {
+            padding: 8px 12px;
+            font-size: 0.85rem;
+            min-width: auto;
+        }
+        
+        /* Ensure full text is visible on mobile */
+        @media (max-width: 768px) {
+            #purchase-links .glass-button {
+                padding: 6px 10px;
+                font-size: 0.8rem;
+            }
+            
+            #purchase-links .glass-button i {
+                margin-right: 4px;
+            }
         }
         
         .glass-button::before {
@@ -208,12 +265,14 @@
             transition: transform 0.6s;
         }
         
-        .glass-button:hover::before {
+        .glass-button:hover::before,
+        .glass-button:focus::before {
             transform: translateX(100%);
         }
         
-        .glass-button:hover {
-            background: rgba(255, 255, 255, 0.08);
+        .glass-button:hover,
+        .glass-button:focus {
+            background: rgba(0, 0, 0, 0.5); /* Darker on hover */
             border-color: rgba(255, 255, 255, 0.2);
             transform: translateY(-2px);
             box-shadow: 
@@ -223,31 +282,15 @@
         
         .glass-button:active {
             transform: translateY(0);
+            transition: transform 0.1s;
         }
         
-        /* Primary button variant */
-        .glass-button-primary {
-            background: linear-gradient(135deg, 
-                rgba(102, 126, 234, 0.2) 0%, 
-                rgba(118, 75, 162, 0.2) 100%);
-            border-color: rgba(102, 126, 234, 0.3);
-        }
-        
-        .glass-button-primary:hover {
-            background: linear-gradient(135deg, 
-                rgba(102, 126, 234, 0.3) 0%, 
-                rgba(118, 75, 162, 0.3) 100%);
-            border-color: rgba(102, 126, 234, 0.5);
-            box-shadow: 
-                0 10px 30px -10px rgba(102, 126, 234, 0.5),
-                0 0 40px -20px rgba(102, 126, 234, 0.3);
-        }
-        
-        /* Card display enhancements */
+        /* Mobile-optimized card container */
         .card-3d-container {
             perspective: 2000px;
             width: 100%;
-            max-width: 420px;
+            max-width: min(420px, 90vw);
+            margin: 0 auto;
         }
         
         .card-3d {
@@ -267,7 +310,7 @@
             width: 100%;
             height: 100%;
             backface-visibility: hidden;
-            border-radius: 18px;
+            border-radius: min(18px, 4vw);
             overflow: hidden;
             box-shadow: 
                 0 20px 60px -20px rgba(0, 0, 0, 0.8),
@@ -278,125 +321,178 @@
             transform: rotateY(180deg);
         }
         
-        /* Price badge styling */
-        .price-tag {
-            background: linear-gradient(135deg, 
-                rgba(16, 185, 129, 0.9) 0%, 
-                rgba(5, 150, 105, 0.9) 100%);
-            backdrop-filter: blur(10px);
-            color: white;
-            padding: 6px 14px;
-            border-radius: 12px;
-            font-weight: 600;
-            font-size: 0.875rem;
-            box-shadow: 
-                0 4px 15px -3px rgba(16, 185, 129, 0.5),
-                inset 0 0 0 1px rgba(255, 255, 255, 0.2);
+        /* Responsive grid layouts */
+        .responsive-grid {
+            display: grid;
+            gap: min(1.5rem, 4vw);
+            grid-template-columns: 1fr;
         }
         
-        /* Info panel styling */
-        .info-label {
-            color: rgba(255, 255, 255, 0.5);
-            font-size: 0.75rem;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            font-weight: 500;
-            margin-bottom: 0.25rem;
+        @media (min-width: 1024px) {
+            .responsive-grid {
+                grid-template-columns: 1fr 1fr;
+            }
         }
         
-        .info-value {
-            color: rgba(255, 255, 255, 0.95);
-            font-size: 1rem;
-            font-weight: 400;
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(min(140px, 45vw), 1fr));
+            gap: min(0.75rem, 3vw);
         }
         
-        /* Legality badges */
-        .legality-badge {
-            padding: 6px 12px;
-            border-radius: 10px;
-            font-size: 0.75rem;
-            font-weight: 500;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            backdrop-filter: blur(10px);
-            transition: all 0.2s;
-            display: inline-flex;
-            align-items: center;
-            gap: 4px;
+        .stat-box {
+            background: rgba(0, 0, 0, 0.6); /* Much darker stat boxes */
+            border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle border */
+            border-radius: min(12px, 3vw);
+            padding: min(1rem, 4vw);
+            transition: all 0.3s;
+            min-height: min(80px, 20vw);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            font-size: 1.2em; /* Increased font size */
         }
         
-        .legality-legal {
-            background: rgba(16, 185, 129, 0.15);
-            border: 1px solid rgba(16, 185, 129, 0.3);
-            color: rgb(52, 211, 153);
+        .stat-box:hover {
+            background: rgba(0, 0, 0, 0.7); /* Darker on hover */
+            border-color: rgba(255, 255, 255, 0.15);
+            transform: translateY(-2px);
         }
         
-        .legality-not-legal {
-            background: rgba(239, 68, 68, 0.15);
-            border: 1px solid rgba(239, 68, 68, 0.3);
-            color: rgb(248, 113, 113);
+        /* Increase font size for info labels and values */
+        .info-label {
+            font-size: 0.85rem; /* Increased from 0.75rem */
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: rgba(255, 255, 255, 0.4);
+            margin-bottom: 0.25rem;
         }
         
-        .legality-restricted {
-            background: rgba(251, 191, 36, 0.15);
-            border: 1px solid rgba(251, 191, 36, 0.3);
-            color: rgb(251, 191, 36);
+        .info-value {
+            color: rgba(255, 255, 255, 0.9);
+            font-weight: 500;
+            font-size: 1.2em; /* Increased font size */
         }
         
-        .legality-banned {
-            background: rgba(127, 29, 29, 0.15);
-            border: 1px solid rgba(127, 29, 29, 0.3);
-            color: rgb(239, 68, 68);
+        /* Mobile-optimized gallery */
+        .gallery-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(min(150px, 45vw), 1fr));
+            gap: min(1rem, 3vw);
         }
         
-        .legality-badge:hover {
-            transform: scale(1.05);
-            box-shadow: 0 0 20px -5px currentColor;
+        @media (min-width: 640px) {
+            .gallery-grid {
+                grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+            }
         }
         
-        /* Gallery cards */
         .gallery-item {
             position: relative;
-            border-radius: 16px;
+            border-radius: min(16px, 4vw);
             overflow: hidden;
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             cursor: pointer;
-            background: rgba(255, 255, 255, 0.02);
+            background: rgba(0, 0, 0, 0.4); /* Darker gallery items */
             border: 1px solid rgba(255, 255, 255, 0.05);
+            touch-action: manipulation;
+            -webkit-tap-highlight-color: transparent;
         }
         
-        .gallery-item:hover {
-            transform: translateY(-8px) scale(1.02);
-            background: rgba(255, 255, 255, 0.05);
+        .gallery-item:hover,
+        .gallery-item:focus {
+            transform: translateY(-4px) scale(1.02);
+            background: rgba(0, 0, 0, 0.5);
             border-color: rgba(255, 255, 255, 0.1);
             box-shadow: 
-                0 20px 40px -15px rgba(0, 0, 0, 0.5),
-                0 0 40px -10px rgba(102, 126, 234, 0.3);
+                0 15px 30px -10px rgba(0, 0, 0, 0.5),
+                0 0 30px -8px rgba(102, 126, 234, 0.3);
         }
         
         .gallery-overlay {
             position: absolute;
             inset: 0;
             background: linear-gradient(to top, 
-                rgba(0, 0, 0, 0.9) 0%, 
-                rgba(0, 0, 0, 0.4) 40%, 
+                rgba(0, 0, 0, 0.95) 0%, /* Much darker gradient */
+                rgba(0, 0, 0, 0.6) 40%, 
                 transparent 100%);
             opacity: 0;
             transition: opacity 0.3s;
-            padding: 1rem;
+            padding: min(1rem, 3vw);
             display: flex;
             flex-direction: column;
             justify-content: flex-end;
         }
         
-        .gallery-item:hover .gallery-overlay {
+        .gallery-item:hover .gallery-overlay,
+        .gallery-item:focus .gallery-overlay {
             opacity: 1;
         }
         
-        /* Loading animation */
+        /* Responsive pricing and badges */
+        .price-tag {
+            background: linear-gradient(135deg, 
+                rgba(16, 185, 129, 0.9) 0%, 
+                rgba(5, 150, 105, 0.9) 100%);
+            backdrop-filter: blur(10px);
+            color: white;
+            padding: min(6px, 2vw) min(14px, 4vw);
+            border-radius: min(12px, 3vw);
+            font-weight: 600;
+            font-size: clamp(0.75rem, 2.5vw, 0.875rem);
+            box-shadow: 
+                0 4px 15px -3px rgba(16, 185, 129, 0.5),
+                inset 0 0 0 1px rgba(255, 255, 255, 0.2);
+            white-space: nowrap;
+        }
+        
+        .legality-badge {
+            padding: min(8px, 2.5vw) min(14px, 3.5vw);
+            border-radius: min(12px, 3vw);
+            font-size: clamp(0.8rem, 2.5vw, 0.9rem);
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            backdrop-filter: blur(10px);
+            transition: all 0.2s;
+            display: inline-flex;
+            align-items: center;
+            gap: min(5px, 1.2vw);
+            white-space: nowrap;
+            touch-action: manipulation;
+            -webkit-tap-highlight-color: transparent;
+            min-height: 36px;
+        }
+        
+        .legality-legal {
+            background: rgba(16, 185, 129, 0.2);
+            border: 1px solid rgba(16, 185, 129, 0.4);
+            color: rgb(52, 211, 153);
+        }
+        
+        .legality-not-legal {
+            background: rgba(148, 163, 184, 0.2);
+            border: 1px solid rgba(148, 163, 184, 0.4);
+            color: rgb(148, 163, 184);
+        }
+        
+        .legality-restricted {
+            background: rgba(251, 191, 36, 0.2);
+            border: 1px solid rgba(251, 191, 36, 0.4);
+            color: rgb(251, 191, 36);
+        }
+        
+        .legality-banned {
+            background: rgba(239, 68, 68, 0.2);
+            border: 1px solid rgba(239, 68, 68, 0.4);
+            color: rgb(248, 113, 113);
+        }
+        
+        /* Loading states with better mobile support */
         .loading-ring {
-            width: 64px;
-            height: 64px;
+            width: min(64px, 15vw);
+            height: min(64px, 15vw);
             border: 3px solid rgba(255, 255, 255, 0.1);
             border-top-color: rgba(102, 126, 234, 0.8);
             border-radius: 50%;
@@ -407,126 +503,344 @@
             to { transform: rotate(360deg); }
         }
         
-        /* Smooth scrollbar */
+        /* Enhanced scrollbar for all devices */
         ::-webkit-scrollbar {
-            width: 10px;
-            height: 10px;
+            width: min(10px, 2vw);
+            height: min(10px, 2vw);
         }
         
         ::-webkit-scrollbar-track {
-            background: rgba(255, 255, 255, 0.02);
-            border-radius: 10px;
+            background: rgba(0, 0, 0, 0.3); /* Darker scrollbar track */
+            border-radius: min(10px, 2vw);
         }
         
         ::-webkit-scrollbar-thumb {
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 10px;
-            border: 2px solid transparent;
+            background: rgba(255, 255, 255, 0.15); /* Slightly brighter thumb */
+            border-radius: min(10px, 2vw);
+            border: 1px solid transparent;
             background-clip: content-box;
         }
         
         ::-webkit-scrollbar-thumb:hover {
-            background: rgba(255, 255, 255, 0.15);
+            background: rgba(255, 255, 255, 0.25);
             background-clip: content-box;
         }
         
-        /* Divider */
-        .glass-divider {
-            height: 1px;
-            background: linear-gradient(90deg, 
-                transparent, 
-                rgba(255, 255, 255, 0.1), 
-                transparent);
-            margin: 2rem 0;
+        /* Mobile-specific improvements */
+        @media (max-width: 768px) {
+            .container {
+                padding: 1rem;
+            }
+            
+            .glass-card {
+                border-radius: 16px;
+                padding: 1rem;
+            }
+            
+            .glass-button {
+                padding: 12px 20px;
+                border-radius: 12px;
+                font-size: 0.9rem;
+            }
+            
+            .card-3d-container {
+                max-width: min(350px, 85vw);
+            }
+            
+            .stats-grid {
+                grid-template-columns: 1fr 1fr;
+            }
+            
+            .gallery-grid {
+                grid-template-columns: repeat(2, 1fr);
+                gap: 0.75rem;
+            }
+            
+            /* Stack layout for mobile */
+            .responsive-grid {
+                gap: 1rem;
+            }
+            
+            .header-text {
+                font-size: clamp(2.5rem, 12vw, 4rem);
+                margin-bottom: 1rem;
+            }
         }
         
-        /* Stats grid */
-        .stat-box {
-            background: rgba(255, 255, 255, 0.02);
-            border: 1px solid rgba(255, 255, 255, 0.05);
-            border-radius: 12px;
-            padding: 1rem;
-            transition: all 0.3s;
+        /* Very small mobile screens */
+        @media (max-width: 480px) {
+            .container {
+                padding: 0.75rem;
+            }
+            
+            .glass-card {
+                padding: 0.75rem;
+            }
+            
+            .stats-grid {
+                grid-template-columns: 1fr;
+                gap: 0.5rem;
+            }
+            
+            .stat-box {
+                padding: 0.75rem;
+                min-height: 60px;
+            }
+            
+            .gallery-grid {
+                grid-template-columns: 1fr 1fr;
+            }
+            
+            .header-text {
+                font-size: clamp(2rem, 10vw, 3rem);
+            }
         }
         
-        .stat-box:hover {
-            background: rgba(255, 255, 255, 0.04);
-            border-color: rgba(255, 255, 255, 0.1);
-            transform: translateY(-2px);
+        /* Tablet optimizations */
+        @media (min-width: 768px) and (max-width: 1024px) {
+            .responsive-grid {
+                gap: 1.25rem;
+            }
+            
+            .gallery-grid {
+                grid-template-columns: repeat(3, 1fr);
+            }
+            
+            .stats-grid {
+                grid-template-columns: repeat(3, 1fr);
+            }
+        }
+        
+        /* Large desktop optimizations */
+        @media (min-width: 1280px) {
+            .gallery-grid {
+                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            }
+            
+            .responsive-grid {
+                gap: 2rem;
+            }
         }
         
-        /* Tooltip */
-        .tooltip {
+        /* Focus management for accessibility */
+        .glass-button:focus,
+        .gallery-item:focus,
+        .legality-badge:focus {
+            outline: 2px solid rgba(102, 126, 234, 0.6);
+            outline-offset: 2px;
+        }
+        
+        /* Reduced motion preferences */
+        @media (prefers-reduced-motion: reduce) {
+            * {
+                animation-duration: 0.01ms !important;
+                animation-iteration-count: 1 !important;
+                transition-duration: 0.01ms !important;
+            }
+            
+            .orb {
+                animation: none;
+            }
+            
+            body::before {
+                animation: none;
+            }
+        }
+        
+        /* High contrast mode support */
+        @media (prefers-contrast: high) {
+            .glass-card {
+                background: rgba(0, 0, 0, 0.9);
+                border: 2px solid rgba(255, 255, 255, 0.3);
+            }
+            
+            .glass-button {
+                background: rgba(0, 0, 0, 0.8);
+                border: 2px solid rgba(255, 255, 255, 0.4);
+            }
+        }
+        
+        /* Dark mode optimizations */
+        @media (prefers-color-scheme: dark) {
+            .glass {
+                background: rgba(0, 0, 0, 0.6);
+                border: 1px solid rgba(255, 255, 255, 0.1);
+            }
+        }
+        
+        /* Print styles */
+        @media print {
+            body::before,
+            .orb {
+                display: none;
+            }
+            
+            .glass-card,
+            .glass {
+                background: white;
+                color: black;
+                border: 1px solid #ccc;
+                box-shadow: none;
+            }
+        }
+        
+        /* Smooth scrolling behavior */
+        html {
+            scroll-behavior: smooth;
+        }
+        
+        /* Enhanced touch scrolling for iOS */
+        .card-face-back {
+            -webkit-overflow-scrolling: touch;
+        }
+        
+        /* Button loading state */
+        .glass-button:disabled {
+            opacity: 0.6;
+            pointer-events: none;
+            cursor: not-allowed;
+        }
+        
+        .glass-button.loading {
             position: relative;
+            color: transparent;
         }
         
-        .tooltip-content {
+        .glass-button.loading::after {
+            content: '';
             position: absolute;
-            bottom: 100%;
+            top: 50%;
             left: 50%;
-            transform: translateX(-50%);
-            background: rgba(0, 0, 0, 0.9);
-            backdrop-filter: blur(10px);
+            width: 16px;
+            height: 16px;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            border-top-color: white;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            transform: translate(-50%, -50%);
+        }
+        
+        /* Improved text selection */
+        ::selection {
+            background: rgba(102, 126, 234, 0.3);
             color: white;
-            padding: 8px 12px;
-            border-radius: 8px;
-            font-size: 0.75rem;
-            white-space: nowrap;
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity 0.3s;
-            margin-bottom: 8px;
-            box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.5);
         }
         
-        .tooltip:hover .tooltip-content {
-            opacity: 1;
+        ::-moz-selection {
+            background: rgba(102, 126, 234, 0.3);
+            color: white;
+        }
+        
+        /* Better image loading states */
+        .card-image-loading {
+            background: linear-gradient(90deg, 
+                rgba(0, 0, 0, 0.4) 0%, 
+                rgba(255, 255, 255, 0.05) 50%, 
+                rgba(0, 0, 0, 0.4) 100%);
+            background-size: 200% 100%;
+            animation: shimmer 2s infinite;
+        }
+        
+        @keyframes shimmer {
+            0% { background-position: -200% 0; }
+            100% { background-position: 200% 0; }
+        }
+        
+        /* Safe area support for iOS devices with notches */
+        @supports (padding: max(0px)) {
+            .container {
+                padding-left: max(1rem, env(safe-area-inset-left));
+                padding-right: max(1rem, env(safe-area-inset-right));
+                padding-top: max(1rem, env(safe-area-inset-top));
+                padding-bottom: max(1rem, env(safe-area-inset-bottom));
+            }
+        }
+        
+        /* Keyboard navigation improvements */
+        .glass-button:focus-visible,
+        .gallery-item:focus-visible {
+            outline: 3px solid rgba(102, 126, 234, 0.8);
+            outline-offset: 2px;
+        }
+        
+        /* Error state styling */
+        .error-state {
+            background: rgba(239, 68, 68, 0.1);
+            border: 1px solid rgba(239, 68, 68, 0.3);
+            color: rgb(248, 113, 113);
+            padding: 1rem;
+            border-radius: 12px;
+            text-align: center;
+        }
+        
+        /* Success state styling */
+        .success-state {
+            background: rgba(16, 185, 129, 0.1);
+            border: 1px solid rgba(16, 185, 129, 0.3);
+            color: rgb(52, 211, 153);
+            padding: 1rem;
+            border-radius: 12px;
+            text-align: center;
+        }
+        
+        .info-label {
+            font-size: 0.65rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: rgba(255, 255, 255, 0.4);
+            margin-bottom: 0.25rem;
+        }
+        
+        .info-value {
+            color: rgba(255, 255, 255, 0.9);
+            font-weight: 500;
         }
     </style>
 </head>
 <body>
     <!-- Animated background orbs -->
-    <div class="orb orb1"></div>
-    <div class="orb orb2"></div>
-    <div class="orb orb3"></div>
+    <div class="orb orb1" aria-hidden="true"></div>
+    <div class="orb orb2" aria-hidden="true"></div>
+    <div class="orb orb3" aria-hidden="true"></div>
     
-    <div class="container mx-auto px-4 py-8">
+    <div class="container mx-auto py-4 md:py-8">
         <!-- Header -->
-        <header class="text-center mb-16 relative">
-            <p class="subheader-text mb-3">Advanced Card Database</p>
-            <h1 class="header-text text-6xl md:text-8xl mb-6">
+        <header class="text-center mb-8 md:mb-16 relative px-4">
+            <p class="subheader-text mb-2 md:mb-3">Advanced Card Database</p>
+            <h1 class="header-text text-4xl md:text-6xl lg:text-8xl mb-4 md:mb-6">
                 MTG NEXUS
             </h1>
-            <div class="flex justify-center gap-8 text-sm">
-                <span class="text-white/40"><i class="fas fa-layer-group mr-2"></i>Infinite Library</span>
-                <span class="text-white/40"><i class="fas fa-chart-line mr-2"></i>Real-time Prices</span>
+            <div class="flex justify-center gap-4 md:gap-8 text-xs md:text-sm flex-wrap">
                 <span class="text-white/40"><i class="fas fa-shield-alt mr-2"></i>Format Analysis</span>
+                <span class="text-white/40"><i class="fas fa-chart-line mr-2"></i>Price Tracking</span>
+                <span class="text-white/40"><i class="fas fa-search mr-2"></i>Smart Discovery</span>
             </div>
         </header>
 
-        <div class="grid grid-cols-1 xl:grid-cols-2 gap-8 max-w-7xl mx-auto">
+        <div class="responsive-grid max-w-7xl mx-auto">
             <!-- Card Display Section -->
-            <div class="flex flex-col items-center">
-                <div class="card-3d-container mb-8">
+            <div class="flex flex-col items-center order-1 lg:order-none">
+                <div class="card-3d-container mb-4 md:mb-6">
                     <div class="card-3d" id="card-3d">
                         <!-- Card Front -->
                         <div class="card-face">
-                            <div id="card-image" class="w-full h-full bg-gradient-to-br from-gray-900 to-gray-800 flex items-center justify-center">
-                                <div class="text-center p-8 glass-card">
-                                    <i class="fas fa-cube text-6xl text-white/30 mb-4"></i>
-                                    <p class="text-white/60">Initializing...</p>
+                            <div id="card-image" class="w-full h-full bg-gradient-to-br from-gray-900 to-gray-800 flex items-center justify-center card-image-loading">
+                                <div class="text-center p-4 md:p-8 glass-card">
+                                    <i class="fas fa-cube text-4xl md:text-6xl text-white/30 mb-2 md:mb-4"></i>
+                                    <p class="text-white/60 text-sm md:text-base">Initializing...</p>
                                 </div>
                             </div>
-                            <div id="face-indicator" class="absolute top-4 right-4 price-tag hidden">
+                            <div id="face-indicator" class="absolute top-2 md:top-4 right-2 md:right-4 price-tag hidden text-xs md:text-sm">
                                 Face 1/2
                             </div>
                         </div>
                         
                         <!-- Card Back -->
-                        <div class="card-face card-face-back glass-card p-6">
+                        <div class="card-face card-face-back glass-card p-3 md:p-6">
                             <div id="card-details" class="h-full overflow-y-auto">
-                                <h3 class="text-xl font-semibold text-white mb-4">Card Analysis</h3>
-                                <div id="detailed-info" class="text-white/80">
+                                <h3 class="text-lg md:text-xl font-semibold text-white mb-3 md:mb-4">Card Analysis</h3>
+                                <div id="detailed-info" class="text-white/80 text-sm md:text-base">
                                     <p>Loading card data...</p>
                                 </div>
                             </div>
@@ -535,113 +849,123 @@
                 </div>
                 
                 <!-- Control Buttons -->
-                <div class="flex flex-wrap gap-3 justify-center mb-6">
-                    <button id="random-btn" class="glass-button glass-button-primary">
-                        <i class="fas fa-shuffle mr-2"></i>Random Card
+                <div class="flex flex-wrap gap-2 justify-center mb-3 md:mb-4 px-4">
+                    <button id="random-btn" class="glass-button glass-button-primary" aria-label="Get Random Card">
+                        <i class="fas fa-shuffle mr-2"></i><span class="hidden sm:inline">Random Card</span><span class="sm:hidden">Random</span>
                     </button>
                     
-                    <button id="flip-btn" class="glass-button">
+                    <button id="flip-btn" class="glass-button" aria-label="Flip Card">
                         <i class="fas fa-rotate mr-2"></i><span>Details</span>
                     </button>
-                    
-                    <button id="refresh-btn" class="glass-button">
-                        <i class="fas fa-sync-alt mr-2"></i>Refresh
-                    </button>
                 </div>
                 
                 <!-- Face Navigation -->
-                <div id="card-face-nav" class="hidden glass-card px-6 py-3 flex items-center gap-6">
-                    <button id="prev-face" class="text-white/60 hover:text-white transition-colors">
+                <div id="card-face-nav" class="hidden glass-card px-3 md:px-4 py-2 flex items-center gap-3 md:gap-4">
+                    <button id="prev-face" class="text-white/60 hover:text-white transition-colors p-2" aria-label="Previous Face">
                         <i class="fas fa-chevron-left"></i>
                     </button>
-                    <span id="face-counter" class="text-white font-medium">1/2</span>
-                    <button id="next-face" class="text-white/60 hover:text-white transition-colors">
+                    <span id="face-counter" class="text-white font-medium text-sm md:text-base">1/2</span>
+                    <button id="next-face" class="text-white/60 hover:text-white transition-colors p-2" aria-label="Next Face">
                         <i class="fas fa-chevron-right"></i>
                     </button>
                 </div>
             </div>
             
-            <!-- Info Panel -->
-            <div class="space-y-6">
+            <!-- Consolidated Info Panel -->
+            <div class="space-y-3 md:space-y-4 order-2 lg:order-none">
                 <!-- Main Info Card -->
-                <div class="glass-card p-6">
-                    <h2 id="card-name" class="text-3xl font-semibold text-white mb-2">No Card Selected</h2>
-                    <div id="card-type" class="text-white/60 mb-6"></div>
+                <div class="glass-card p-3 md:p-5">
+                    <h2 id="card-name" class="text-xl md:text-2xl font-semibold text-white mb-1 break-words">No Card Selected</h2>
+                    <div id="card-type" class="text-white/60 mb-3 md:mb-4 text-sm md:text-base"></div>
                     
-                    <div class="glass p-4 rounded-xl mb-6">
-                        <div id="card-text" class="text-white/80 leading-relaxed whitespace-pre-line"></div>
+                    <div class="glass p-2 md:p-3 rounded-lg mb-3 md:mb-4 max-h-32 md:max-h-40 overflow-y-auto">
+                        <div id="card-text" class="text-white/80 leading-relaxed whitespace-pre-line text-xs md:text-sm"></div>
                     </div>
                     
-                    <!-- Stats Grid -->
-                    <div class="grid grid-cols-2 gap-4">
-                        <div class="stat-box">
-                            <p class="info-label">Stats</p>
-                            <div id="card-stats" class="info-value"></div>
+                    <!-- Stats Grid - Removed Set Info -->
+                    <div class="stats-grid mb-4 md:mb-6">
+                        <div class="stat-box bg-black/40 border border-white/5">
+                            <p class="info-label text-xs">Stats</p>
+                            <div id="card-stats" class="info-value text-sm md:text-base"></div>
                         </div>
                         
-                        <div class="stat-box">
-                            <p class="info-label">Market Price</p>
-                            <div id="card-prices" class="info-value"></div>
+                        <div class="stat-box bg-black/40 border border-white/5">
+                            <p class="info-label text-xs">Market Price</p>
+                            <div id="card-prices" class="info-value text-sm md:text-base"></div>
                         </div>
                         
-                        <div class="stat-box">
-                            <p class="info-label">Rankings</p>
-                            <div id="card-rankings" class="info-value"></div>
+                        <div class="stat-box bg-black/40 border border-white/5">
+                            <p class="info-label text-xs">Rankings</p>
+                            <div id="card-rankings" class="info-value text-sm md:text-base"></div>
+                        </div>
+                    </div>
+                    
+                    <!-- Purchase Links Section -->
+                    <div class="mb-4 md:mb-6">
+                        <h3 class="font-semibold text-white mb-2 text-sm md:text-base">Purchase Options</h3>
+                        <div id="purchase-links" class="flex flex-wrap gap-2 justify-start">
+                            <!-- Buttons will be inserted here dynamically -->
+                        </div>
+                    </div>
+                    
+                    <!-- Combined Sections -->
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4">
+                        <!-- Legalities -->
+                        <div>
+                            <h3 class="font-semibold text-white mb-2 text-sm md:text-base">Format Legality</h3>
+                            <div id="card-legalities" class="flex flex-wrap gap-1"></div>
                         </div>
                         
-                        <div class="stat-box">
-                            <p class="info-label">Set Info</p>
-                            <div id="card-set-info" class="info-value"></div>
+                        <!-- Links -->
+                        <div>
+                            <h3 class="font-semibold text-white mb-2 text-sm md:text-base">Resources & Links</h3>
+                            <div id="card-links" class="flex flex-wrap gap-2"></div>
                         </div>
                     </div>
                 </div>
-                
-                <!-- Purchase Links -->
-                <div class="glass-card p-6">
-                    <h3 class="text-lg font-semibold text-white mb-4">Purchase Options</h3>
-                    <div id="purchase-links" class="flex flex-wrap gap-3"></div>
-                </div>
-                
-                <!-- Legalities -->
-                <div class="glass-card p-6">
-                    <h3 class="text-lg font-semibold text-white mb-4">Format Legality</h3>
-                    <div id="card-legalities" class="flex flex-wrap gap-2"></div>
-                </div>
-                
-                <!-- External Links -->
-                <div class="glass-card p-6">
-                    <h3 class="text-lg font-semibold text-white mb-4">Resources</h3>
-                    <div id="card-links" class="flex flex-wrap gap-3"></div>
-                </div>
             </div>
         </div>
         
         <!-- Related Cards Gallery -->
-        <div id="card-gallery-section" class="mt-20 hidden">
+        <div id="card-gallery-section" class="mt-8 md:mt-16 hidden px-4">
             <div class="glass-divider"></div>
-            <h2 class="text-4xl font-bold text-center text-white mb-10">
+            <h2 class="text-2xl md:text-3xl font-bold text-center text-white mb-6 md:mb-8">
                 Similar Cards
             </h2>
-            <div id="card-gallery" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
+            <div id="card-gallery" class="gallery-grid max-w-7xl mx-auto">
                 <!-- Populated dynamically -->
             </div>
         </div>
         
         <!-- Loading Modal -->
-        <div id="loading" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center hidden z-50">
-            <div class="glass-card p-8 text-center">
-                <div class="loading-ring mx-auto mb-4"></div>
-                <h3 class="text-xl font-semibold text-white mb-2">Loading</h3>
-                <p class="text-white/60">Fetching card data...</p>
+        <div id="loading" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center hidden z-50 p-4">
+            <div class="glass-card p-4 md:p-6 text-center max-w-sm w-full">
+                <div class="loading-ring mx-auto mb-2 md:mb-3"></div>
+                <h3 class="text-base md:text-lg font-semibold text-white mb-1">Loading</h3>
+                <p class="text-white/60 text-xs md:text-sm">Fetching card data...</p>
+            </div>
+        </div>
+        
+        <!-- Error Toast -->
+        <div id="error-toast" class="fixed top-4 right-4 z-50 hidden">
+            <div class="error-state max-w-sm">
+                <p id="error-message" class="text-sm"></p>
+            </div>
+        </div>
+        
+        <!-- Success Toast -->
+        <div id="success-toast" class="fixed top-4 right-4 z-50 hidden">
+            <div class="success-state max-w-sm">
+                <p id="success-message" class="text-sm"></p>
             </div>
         </div>
     </div>
 
     <script>
         document.addEventListener('DOMContentLoaded', function() {
+            // DOM elements
             const randomBtn = document.getElementById('random-btn');
             const flipBtn = document.getElementById('flip-btn');
-            const refreshBtn = document.getElementById('refresh-btn');
             const prevFaceBtn = document.getElementById('prev-face');
             const nextFaceBtn = document.getElementById('next-face');
             const loading = document.getElementById('loading');
@@ -656,35 +980,141 @@
             const cardFaceNav = document.getElementById('card-face-nav');
             const faceCounter = document.getElementById('face-counter');
             const card3d = document.getElementById('card-3d');
+            const errorToast = document.getElementById('error-toast');
+            const successToast = document.getElementById('success-toast');
             
             let currentCardFace = 0;
             let currentCardData = null;
+            let isLoading = false;
             
-            // Event listeners
-            randomBtn.addEventListener('click', () => {
+            // Event listeners with debouncing
+            randomBtn.addEventListener('click', debounce(() => {
                 currentCardFace = 0;
                 fetchRandomCard();
-            });
-            
-            refreshBtn.addEventListener('click', () => {
-                if (currentCardData) {
-                    displayCard(currentCardData);
-                    fetchRelatedCards(currentCardData);
-                }
-            });
+            }, 500));
             
             flipBtn.addEventListener('click', handleFlipButton);
             prevFaceBtn.addEventListener('click', () => switchFace(-1));
             nextFaceBtn.addEventListener('click', () => switchFace(1));
             
+            // Keyboard navigation
+            document.addEventListener('keydown', handleKeydown);
+            
+            // Touch gestures for mobile
+            let touchStartX = 0;
+            let touchStartY = 0;
+            
+            cardImage.addEventListener('touchstart', handleTouchStart, { passive: true });
+            cardImage.addEventListener('touchend', handleTouchEnd, { passive: true });
+            
             // Initialize
             fetchRandomCard();
             
+            // Utility functions
+            function debounce(func, wait) {
+                let timeout;
+                return function executedFunction(...args) {
+                    const later = () => {
+                        clearTimeout(timeout);
+                        func(...args);
+                    };
+                    clearTimeout(timeout);
+                    timeout = setTimeout(later, wait);
+                };
+            }
+            
+            function showToast(element, message, duration = 3000) {
+                element.querySelector('p').textContent = message;
+                element.classList.remove('hidden');
+                setTimeout(() => {
+                    element.classList.add('hidden');
+                }, duration);
+            }
+            
+            function showError(message) {
+                showToast(errorToast, message);
+            }
+            
+            function showSuccess(message) {
+                showToast(successToast, message);
+            }
+            
+            function handleKeydown(e) {
+                if (e.target.tagName.toLowerCase() === 'input' || e.target.tagName.toLowerCase() === 'textarea') {
+                    return;
+                }
+                
+                switch(e.key) {
+                    case ' ':
+                    case 'Enter':
+                        if (e.target === flipBtn || e.target === randomBtn) return;
+                        e.preventDefault();
+                        fetchRandomCard();
+                        break;
+                    case 'f':
+                    case 'F':
+                        e.preventDefault();
+                        handleFlipButton();
+                        break;
+                    case 'ArrowLeft':
+                        if (currentCardData && currentCardData.card_faces) {
+                            e.preventDefault();
+                            switchFace(-1);
+                        }
+                        break;
+                    case 'ArrowRight':
+                        if (currentCardData && currentCardData.card_faces) {
+                            e.preventDefault();
+                            switchFace(1);
+                        }
+                        break;
+                }
+            }
+            
+            function handleTouchStart(e) {
+                touchStartX = e.touches[0].clientX;
+                touchStartY = e.touches[0].clientY;
+            }
+            
+            function handleTouchEnd(e) {
+                if (!touchStartX || !touchStartY) return;
+                
+                const touchEndX = e.changedTouches[0].clientX;
+                const touchEndY = e.changedTouches[0].clientY;
+                
+                const deltaX = touchStartX - touchEndX;
+                const deltaY = touchStartY - touchEndY;
+                
+                // Minimum swipe distance
+                const minSwipe = 50;
+                
+                // Horizontal swipe
+                if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > minSwipe) {
+                    if (currentCardData && currentCardData.card_faces) {
+                        if (deltaX > 0) {
+                            switchFace(1); // Swipe left - next face
+                        } else {
+                            switchFace(-1); // Swipe right - previous face
+                        }
+                    }
+                }
+                
+                // Vertical swipe up for random card
+                if (deltaY > minSwipe && Math.abs(deltaY) > Math.abs(deltaX)) {
+                    fetchRandomCard();
+                }
+                
+                touchStartX = 0;
+                touchStartY = 0;
+            }
+            
             function handleFlipButton() {
                 if (currentCardData && currentCardData.card_faces) {
                     switchFace(1);
                 } else {
                     card3d.classList.toggle('flipped');
+                    flipBtn.querySelector('span').textContent = 
+                        card3d.classList.contains('flipped') ? 'Card' : 'Details';
                 }
             }
             
@@ -696,41 +1126,96 @@
             }
             
             async function fetchRandomCard() {
+                if (isLoading) return;
+                
                 setLoadingState(true);
                 
                 try {
-                    const response = await fetch('https://api.scryfall.com/cards/random');
-                    if (!response.ok) throw new Error('Network response was not ok');
+                    const response = await fetch('https://api.scryfall.com/cards/random?q=is%3Acommander');
+                    if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                     
                     const data = await response.json();
                     displayCard(data);
                     
-                    if (data.oracle_text || data.type_line) {
-                        fetchRelatedCards(data);
-                    }
+                    // Reset flip state
+                    card3d.classList.remove('flipped');
+                    flipBtn.querySelector('span').textContent = 'Details';
+                    
+                    // Fetch related cards with improved query
+                    fetchRelatedCards(data);
+                    
+                    // Announce to screen readers
+                    const announcement = `Loaded card: ${data.name}`;
+                    announceToScreenReader(announcement);
+                    
                 } catch (error) {
                     console.error('Error fetching card:', error);
-                    showError('Failed to fetch card. Please try again.');
+                    showError('Failed to fetch card. Please check your connection and try again.');
                 } finally {
                     setLoadingState(false);
                 }
             }
             
-            function setLoadingState(isLoading) {
-                loading.classList.toggle('hidden', !isLoading);
-                document.body.style.overflow = isLoading ? 'hidden' : '';
-                randomBtn.disabled = isLoading;
-                flipBtn.disabled = isLoading;
+            function setLoadingState(loading) {
+                isLoading = loading;
+                
+                // Update loading modal
+                loading ? document.getElementById('loading').classList.remove('hidden') : document.getElementById('loading').classList.add('hidden');
+                document.body.style.overflow = loading ? 'hidden' : '';
+                
+                // Update button states
+                [randomBtn, flipBtn].forEach(btn => {
+                    btn.disabled = loading;
+                    btn.classList.toggle('loading', loading);
+                });
+                
+                // Update card image loading state
+                if (loading) {
+                    cardImage.classList.add('card-image-loading');
+                } else {
+                    cardImage.classList.remove('card-image-loading');
+                }
+            }
+            
+            function announceToScreenReader(message) {
+                const announcement = document.createElement('div');
+                announcement.setAttribute('aria-live', 'polite');
+                announcement.setAttribute('aria-atomic', 'true');
+                announcement.className = 'sr-only';
+                announcement.textContent = message;
+                document.body.appendChild(announcement);
+                setTimeout(() => document.body.removeChild(announcement), 1000);
             }
             
-            function showError(message) {
-                console.error(message);
+            function setCardArtBackground(card) {
+                let artUrl = '';
+                
+                // Try to get art crop from current face or main card
+                if (card.card_faces && card.card_faces[0] && card.card_faces[0].image_uris) {
+                    artUrl = card.card_faces[0].image_uris.art_crop || card.image_uris?.art_crop;
+                } else if (card.image_uris) {
+                    artUrl = card.image_uris.art_crop;
+                }
+                
+                if (artUrl) {
+                    document.body.style.backgroundImage = `url('${artUrl}')`;
+                    document.body.style.backgroundSize = 'cover';
+                    document.body.style.backgroundPosition = 'center';
+                    document.body.style.backgroundAttachment = 'fixed';
+                } else {
+                    // Fallback to default gradient if no art crop available
+                    document.body.style.backgroundImage = 'none';
+                    document.body.style.backgroundColor = '#0a0a0a';
+                }
             }
             
             function displayCard(card) {
                 currentCardData = card;
                 currentCardFace = 0;
                 
+                // Set the card art as background
+                setCardArtBackground(card);
+                
                 // Update face navigation
                 if (card.card_faces && card.card_faces.length > 1) {
                     cardFaceNav.classList.remove('hidden');
@@ -748,7 +1233,6 @@
                 displayLinks(card);
                 displayLegalities(card);
                 displayRankings(card);
-                displaySetInfo(card);
             }
             
             function displayCardFace(card, faceIndex) {
@@ -784,7 +1268,7 @@
                     faceIndicator.classList.add('hidden');
                 }
                 
-                displayCardImage(imageUris, name);
+                displayCardImage(imageUris, name, card, faceIndex);
                 
                 cardName.textContent = name || 'Unknown Card';
                 cardType.innerHTML = `<i class="fas fa-layer-group mr-2"></i>${typeText || ''}`;
@@ -793,27 +1277,60 @@
                 displayStats(stats, card);
             }
             
-            function displayCardImage(imageUris, name) {
+            function displayCardImage(imageUris, name, card, faceIndex) {
+                let priceLink = '';
+                let priceValue = null;
+                let purchaseLink = null;
+
+                // Check for prices in order of preference: USD, USD Foil, EUR
+                if (card.prices?.usd) {
+                    priceValue = parseFloat(card.prices.usd).toFixed(2);
+                } else if (card.prices?.usd_foil) {
+                    priceValue = parseFloat(card.prices.usd_foil).toFixed(2);
+                } else if (card.prices?.eur) {
+                    priceValue = parseFloat(card.prices.eur).toFixed(2);
+                }
+
+                // Determine purchase link
+                if (card.purchase_uris) {
+                    purchaseLink = card.purchase_uris.tcgplayer || card.purchase_uris.cardmarket || card.purchase_uris.cardhoarder;
+                }
+
+                if (priceValue) {
+                    if (purchaseLink) {
+                        priceLink = `
+                            <a href="${purchaseLink}" target="_blank" rel="noopener noreferrer" 
+                               class="absolute bottom-1 md:bottom-2 left-1 md:left-2 price-tag text-xs no-underline hover:scale-105 transition-transform">
+                                ${priceValue}
+                            </a>
+                        `;
+                    } else {
+                        priceLink = `
+                            <div class="absolute bottom-1 md:bottom-2 left-1 md:left-2 price-tag text-xs">
+                                ${priceValue}
+                            </div>
+                        `;
+                    }
+                }
+                
                 if (imageUris && imageUris.large) {
                     cardImage.innerHTML = `
                         <img src="${imageUris.large}" 
                              alt="${name}" 
                              class="w-full h-full object-contain"
+                             loading="lazy"
                              onerror="this.onerror=null; this.src='${imageUris.normal || imageUris.small}';">
-                        ${currentCardData.prices?.usd ? `
-                            <div class="absolute top-4 left-4 price-tag">
-                                $${currentCardData.prices.usd}
-                            </div>
-                        ` : ''}
+                        ${priceLink}
                     `;
                 } else {
                     cardImage.innerHTML = `
                         <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-gray-900 to-gray-800">
-                            <div class="text-center p-8 glass-card">
-                                <i class="fas fa-image-slash text-6xl text-white/30 mb-4"></i>
-                                <p class="text-white/60">Image unavailable</p>
+                            <div class="text-center p-4 md:p-8 glass-card">
+                                <i class="fas fa-image-slash text-4xl md:text-6xl text-white/30 mb-2 md:mb-4"></i>
+                                <p class="text-white/60 text-sm md:text-base">Image unavailable</p>
                             </div>
                         </div>
+                        ${priceLink}
                     `;
                 }
             }
@@ -822,16 +1339,16 @@
                 let statsHtml = '';
                 
                 if (stats.power && stats.toughness) {
-                    statsHtml += `<div class="mb-1">${stats.power}/${stats.toughness}</div>`;
+                    statsHtml += `<div class="mb-1 font-semibold">${stats.power}/${stats.toughness}</div>`;
                 }
                 if (stats.loyalty) {
                     statsHtml += `<div class="mb-1">Loyalty: ${stats.loyalty}</div>`;
                 }
                 
-                statsHtml += `<div>CMC: ${card.cmc || 0}</div>`;
+                statsHtml += `<div class="text-white/70">CMC: ${card.cmc || 0}</div>`;
                 
                 if (card.mana_cost) {
-                    statsHtml += `<div>${card.mana_cost}</div>`;
+                    statsHtml += `<div class="text-xs md:text-sm text-white/60 mt-1">${card.mana_cost}</div>`;
                 }
                 
                 cardStats.innerHTML = statsHtml || '<span class="text-white/40">—</span>';
@@ -839,34 +1356,26 @@
             
             function displayCardBackDetails(card) {
                 let detailsHtml = `
-                    <h3 class="text-2xl font-semibold mb-4 text-white">${card.name}</h3>
+                    <h3 class="text-lg md:text-2xl font-semibold mb-3 md:mb-4 text-white">${card.name}</h3>
                     
-                    <div class="grid grid-cols-2 gap-4 mb-6">
-                        <div class="glass p-3 rounded-lg">
+                    <div class="mb-4 md:mb-6">
+                        <div class="glass p-2 md:p-3 rounded-lg">
                             <h4 class="info-label">Set</h4>
-                            <p class="text-sm text-white/80">${card.set_name}</p>
-                            <p class="text-sm text-white/60">${card.set.toUpperCase()} • #${card.collector_number || 'N/A'}</p>
-                        </div>
-                        
-                        <div class="glass p-3 rounded-lg">
-                            <h4 class="info-label">Market</h4>
-                            ${card.prices ? `
-                                ${card.prices.usd ? `<p class="text-sm text-white/80">$${card.prices.usd}</p>` : ''}
-                                ${card.prices.usd_foil ? `<p class="text-sm text-white/60">Foil: $${card.prices.usd_foil}</p>` : ''}
-                            ` : '<p class="text-sm text-white/40">No data</p>'}
+                            <p class="text-xs md:text-sm text-white/80">${card.set_name}</p>
+                            <p class="text-xs text-white/60">${card.set.toUpperCase()} • #${card.collector_number || 'N/A'}</p>
                         </div>
                     </div>
                     
                     ${card.flavor_text ? `
-                        <div class="glass p-3 rounded-lg mb-4">
+                        <div class="glass p-2 md:p-3 rounded-lg mb-3 md:mb-4">
                             <h4 class="info-label">Flavor</h4>
-                            <p class="italic text-sm text-white/70">"${card.flavor_text}"</p>
+                            <p class="italic text-xs md:text-sm text-white/70 leading-relaxed">"${card.flavor_text}"</p>
                         </div>
                     ` : ''}
                     
-                    <div class="glass p-3 rounded-lg">
+                    <div class="glass p-2 md:p-3 rounded-lg">
                         <h4 class="info-label">Artist</h4>
-                        <p class="text-sm text-white/80">${card.artist}</p>
+                        <p class="text-xs md:text-sm text-white/80">${card.artist}</p>
                     </div>
                 `;
                 
@@ -877,10 +1386,16 @@
                 let pricesHtml = '';
                 if (card.prices) {
                     if (card.prices.usd) {
-                        pricesHtml = `<span class="text-green-400 font-semibold">$${card.prices.usd}</span>`;
+                        const formattedUsd = parseFloat(card.prices.usd).toFixed(2);
+                        pricesHtml = `<span class="text-green-400 font-semibold">${formattedUsd}</span>`;
                     }
                     if (card.prices.usd_foil) {
-                        pricesHtml += `<br><span class="text-sm text-white/60">Foil: $${card.prices.usd_foil}</span>`;
+                        const formattedFoil = parseFloat(card.prices.usd_foil).toFixed(2);
+                        pricesHtml += `<br><span class="text-xs md:text-sm text-white/60">Foil: ${formattedFoil}</span>`;
+                    }
+                    if (card.prices.eur) {
+                        const formattedEur = parseFloat(card.prices.eur).toFixed(2);
+                        pricesHtml += `<br><span class="text-xs text-white/50">€${formattedEur}</span>`;
                     }
                 } else {
                     pricesHtml = '<span class="text-white/40">—</span>';
@@ -900,15 +1415,15 @@
                     stores.forEach(store => {
                         if (store.url) {
                             linksHtml += `
-                                <a href="${store.url}" target="_blank" 
-                                   class="glass-button glass-button-primary text-sm">
-                                   <i class="fas ${store.icon} mr-2"></i>${store.name}
+                                <a href="${store.url}" target="_blank" rel="noopener noreferrer"
+                                   class="glass-button glass-button-primary text-xs">
+                                   <i class="fas ${store.icon} mr-1"></i><span>${store.name}</span>
                                 </a>
                             `;
                         }
                     });
                 } else {
-                    linksHtml = '<p class="text-white/40 text-sm">No purchase links available</p>';
+                    linksHtml = '<p class="text-white/40 text-xs">No purchase links</p>';
                 }
                 document.getElementById('purchase-links').innerHTML = linksHtml;
             }
@@ -924,9 +1439,9 @@
                 links.forEach(link => {
                     if (link.url) {
                         linksHtml += `
-                            <a href="${link.url}" target="_blank" 
-                               class="glass-button text-sm">
-                               <i class="fas ${link.icon} mr-2"></i>${link.name}
+                            <a href="${link.url}" target="_blank" rel="noopener noreferrer"
+                               class="glass-button text-xs md:text-sm">
+                               <i class="fas ${link.icon} mr-1 md:mr-2"></i><span class="hidden sm:inline">${link.name}</span><span class="sm:hidden">${link.name.slice(0, 4)}</span>
                             </a>
                         `;
                     }
@@ -964,9 +1479,11 @@
                             
                             badge.className = badgeClass;
                             badge.innerHTML = `
-                                <i class="fas ${icon}"></i>
-                                ${format.charAt(0).toUpperCase() + format.slice(1)}
+                                <i class="fas ${icon}" aria-hidden="true"></i>
+                                <span class="hidden sm:inline">${format.charAt(0).toUpperCase() + format.slice(1)}</span>
+                                <span class="sm:hidden">${format.slice(0, 3).toUpperCase()}</span>
                             `;
+                            badge.setAttribute('title', `${format}: ${status}`);
                             cardLegalities.appendChild(badge);
                         }
                     });
@@ -977,7 +1494,7 @@
                 let rankingsHtml = '';
                 
                 if (card.edhrec_rank) {
-                    rankingsHtml = `#${card.edhrec_rank} EDH`;
+                    rankingsHtml = `<span class="text-blue-400">#${card.edhrec_rank.toLocaleString()}</span><br><span class="text-xs text-white/60">EDH Rank</span>`;
                 } else {
                     rankingsHtml = '<span class="text-white/40">—</span>';
                 }
@@ -985,40 +1502,68 @@
                 document.getElementById('card-rankings').innerHTML = rankingsHtml;
             }
             
-            function displaySetInfo(card) {
-                let setInfoHtml = `
-                    <div class="text-sm">
-                        <div>${card.set_name}</div>
-                        <div class="text-white/60">${card.set.toUpperCase()}</div>
-                    </div>
-                `;
-                
-                document.getElementById('card-set-info').innerHTML = setInfoHtml;
-            }
-            
+            // Updated and improved fetchRelatedCards function
             async function fetchRelatedCards(card) {
                 try {
+                    // Build a better search query
+                    const searchQuery = buildImprovedSearchText(card);
+                    
+                    // Only proceed if we have a valid query
+                    if (!searchQuery || searchQuery.trim().length < 3) {
+                        console.log('Search query too short, skipping related cards');
+                        document.getElementById('card-gallery-section').classList.add('hidden');
+                        return;
+                    }
+                    
                     document.getElementById('card-gallery-section').classList.remove('hidden');
                     const gallery = document.getElementById('card-gallery');
-                    gallery.innerHTML = '<div class="col-span-full text-center py-8"><div class="loading-ring mx-auto"></div></div>';
+                    gallery.innerHTML = '<div class="col-span-full text-center py-6 md:py-8"><div class="loading-ring mx-auto"></div></div>';
+                    
+                    console.log('Searching for:', searchQuery);
                     
-                    const searchQuery = buildSearchText(card);
                     const response = await fetch(`https://api.deck.doctor/v1/mtg/search?q=${encodeURIComponent(searchQuery)}&topk=12&price_threshold=0`, {
                         headers: { 'accept': 'application/json' }
                     });
                     
-                    if (!response.ok) throw new Error('Failed to fetch related cards');
+                    if (!response.ok) {
+                        console.error('API response not ok:', response.status);
+                        throw new Error('Failed to fetch related cards');
+                    }
                     
                     const data = await response.json();
-                    const cards = Array.isArray(data) ? data.map(item => item[0]) : [];
-                    displayCardGallery(cards);
+                    console.log('API Response:', data);
+                    
+                    // The API returns an array of tuples: [card_object, similarity_score]
+                    if (Array.isArray(data) && data.length > 0) {
+                        // Filter out the current card and very low similarity scores
+                        const filteredCards = data
+                            .filter(tuple => {
+                                if (!Array.isArray(tuple) || tuple.length < 2) return false;
+                                const [relatedCard, score] = tuple;
+                                return relatedCard && relatedCard.id !== card.id && score > 0.05;
+                            })
+                            .sort((a, b) => b[1] - a[1]) // Sort by similarity score
+                            .slice(0, 12); // Limit to 12 cards
+                        
+                        if (filteredCards.length > 0) {
+                            displayCardGallery(filteredCards);
+                        } else {
+                            gallery.innerHTML = '<div class="col-span-full text-center py-6 md:py-8 text-white/40 text-sm">No similar cards found</div>';
+                        }
+                    } else {
+                        gallery.innerHTML = '<div class="col-span-full text-center py-6 md:py-8 text-white/40 text-sm">No related cards found</div>';
+                    }
                 } catch (error) {
                     console.error('Error fetching related cards:', error);
-                    document.getElementById('card-gallery').innerHTML = '<div class="col-span-full text-center py-8 text-white/40">Unable to load related cards</div>';
+                    document.getElementById('card-gallery').innerHTML = '<div class="col-span-full text-center py-6 md:py-8 text-white/40 text-sm">Unable to load related cards</div>';
                 }
             }
             
-            function buildSearchText(card) {
+            // Improved search text builder
+            function buildImprovedSearchText(card) {
+                let searchTerms = [];
+                
+                // Get oracle text from current face or main card
                 let oracleText = '';
                 if (card.card_faces && card.card_faces[currentCardFace]) {
                     oracleText = card.card_faces[currentCardFace].oracle_text || '';
@@ -1026,51 +1571,139 @@
                     oracleText = card.oracle_text || '';
                 }
                 
-                let cleanText = oracleText.replace(/•/g, '--')
-                    .replace(/\n/g, '. ')
-                    .replace(/[{}]/g, '')
-                    .replace(/\u2014/g, '--')
-                    .replace(/\s+/g, ' ')
-                    .trim();
+                // Priority 1: Extract key abilities and mechanics
+                const mechanics = extractMechanics(oracleText.toLowerCase());
+                if (mechanics.length > 0) {
+                    // Take top 3 mechanics
+                    searchTerms = mechanics.slice(0, 3);
+                }
+                
+                // Priority 2: If no mechanics found, try card type
+                if (searchTerms.length === 0) {
+                    const typeText = card.card_faces && card.card_faces[currentCardFace] ? 
+                        card.card_faces[currentCardFace].type_line : card.type_line;
+                    
+                    if (typeText) {
+                        // Extract creature types or important card types
+                        const typeParts = typeText.split('—').map(s => s.trim());
+                        if (typeParts.length > 1) {
+                            // Use subtype (after the dash)
+                            searchTerms.push(typeParts[1].toLowerCase());
+                        } else {
+                            // Use main type
+                            const mainType = typeParts[0].replace(/legendary/i, '').trim();
+                            searchTerms.push(mainType.toLowerCase());
+                        }
+                    }
+                }
                 
-                if (card.name) {
-                    cleanText = cleanText.replace(new RegExp(`\\b${card.name}\\b`, 'g'), 'this card');
+                // Priority 3: If still no terms, use first ability word
+                if (searchTerms.length === 0 && oracleText) {
+                    const firstSentence = oracleText.split('.')[0];
+                    if (firstSentence) {
+                        const cleanedSentence = firstSentence
+                            .replace(/[{}]/g, '')
+                            .replace(/\(.*?\)/g, '')
+                            .trim()
+                            .toLowerCase();
+                        
+                        // Take first few meaningful words
+                        const words = cleanedSentence.split(' ').filter(w => w.length > 3);
+                        if (words.length > 0) {
+                            searchTerms = words.slice(0, 3);
+                        }
+                    }
                 }
                 
-                const typeText = card.card_faces && card.card_faces[currentCardFace] ? 
-                    card.card_faces[currentCardFace].type_line : card.type_line;
+                return searchTerms.join(' ');
+            }
+            
+            // Extract MTG mechanics and keywords from text
+            function extractMechanics(text) {
+                const keywords = [
+                    // Evergreen keywords
+                    'flying', 'trample', 'haste', 'vigilance', 'deathtouch',
+                    'lifelink', 'first strike', 'double strike', 'hexproof',
+                    'indestructible', 'menace', 'reach', 'flash', 'defender',
+                    'protection', 'ward',
+                    
+                    // Common mechanics
+                    'landfall', 'cascade', 'storm', 'prowess', 'kicker',
+                    'flashback', 'madness', 'cycling', 'morph', 'evoke',
+                    'convoke', 'delve', 'prowl', 'rebound', 'suspend',
+                    'proliferate', 'scry', 'surveil', 'explore', 'adapt',
+                    'riot', 'spectacle', 'afterlife', 'amass', 'mentor',
+                    'mutate', 'companion', 'foretell', 'boast', 'learn',
+                    'magecraft', 'ward', 'cleave', 'disturb', 'daybound',
+                    'nightbound', 'decayed', 'exploit', 'training', 'modified',
+                    'reconfigure', 'channel', 'ninjutsu', 'compleated',
+                    'toxic', 'corrupted', 'proliferate', 'oil counter',
+                    
+                    // Common actions
+                    'draw', 'discard', 'destroy', 'counter', 'exile',
+                    'return', 'sacrifice', 'tap', 'untap', 'damage',
+                    'gain life', 'lose life', 'mill', 'search', 'shuffle',
+                    'reveal', 'put', 'create', 'copy', 'fight', 'goad'
+                ];
+                
+                const foundKeywords = [];
+                keywords.forEach(keyword => {
+                    if (text.includes(keyword) && !foundKeywords.includes(keyword)) {
+                        foundKeywords.push(keyword);
+                    }
+                });
                 
-                return `${typeText || ''} ${cleanText}`.trim();
+                return foundKeywords;
             }
             
-            function displayCardGallery(cards) {
+            function displayCardGallery(cardPairs) {
                 const gallery = document.getElementById('card-gallery');
                 
-                if (cards.length === 0) {
-                    gallery.innerHTML = '<div class="col-span-full text-center py-8 text-white/40">No related cards found</div>';
+                if (!cardPairs || cardPairs.length === 0) {
+                    gallery.innerHTML = '<div class="col-span-full text-center py-6 md:py-8 text-white/40 text-sm">No related cards found</div>';
                     return;
                 }
                 
-                gallery.innerHTML = cards.map(card => `
-                    <div class="gallery-item" onclick="loadGalleryCard('${card.id}')">
-                        <div class="relative w-full" style="aspect-ratio: 0.72;">
-                            <img src="${getCardImageUrl(card)}" 
-                                 alt="${card.name}" 
-                                 class="w-full h-full object-cover">
-                            
-                            ${card.prices?.usd ? `
-                                <div class="absolute top-2 right-2 price-tag text-xs">
-                                    $${card.prices.usd}
+                gallery.innerHTML = cardPairs.map(tuple => {
+                    const [card, similarityScore] = tuple;
+                    return `
+                        <div class="gallery-item" onclick="loadGalleryCard('${card.id}')" 
+                             tabindex="0" role="button" aria-label="Load ${card.name} (${Math.round(similarityScore * 100)}% similar)">
+                            <div class="relative w-full" style="aspect-ratio: 0.72;">
+                                <img src="${getCardImageUrl(card)}" 
+                                     alt="${card.name}" 
+                                     class="w-full h-full object-cover"
+                                     loading="lazy">
+                                
+                                ${card.prices?.usd ? `
+                                    <div class="absolute bottom-1 md:bottom-2 left-1 md:left-2 price-tag text-xs">
+                                        ${parseFloat(card.prices.usd).toFixed(2)}
+                                    </div>
+                                ` : ''}
+                                
+                                <!-- Similarity Score Badge -->
+                                <div class="absolute bottom-1 md:bottom-2 left-1/2 transform -translate-x-1/2 glass-card px-2 py-1 text-xs">
+                                    <span class="text-green-400 font-semibold">${Math.round(similarityScore * 100)}%</span>
+                                </div>
+                                
+                                <div class="gallery-overlay">
+                                    <h4 class="font-semibold text-sm md:text-base text-white mb-1 line-clamp-2">${card.name}</h4>
+                                    <p class="text-xs md:text-sm text-white/60 line-clamp-1">${card.type_line || ''}</p>
                                 </div>
-                            ` : ''}
-                            
-                            <div class="gallery-overlay">
-                                <h4 class="font-semibold text-sm text-white mb-1">${card.name}</h4>
-                                <p class="text-xs text-white/60">${card.type_line || ''}</p>
                             </div>
                         </div>
-                    </div>
-                `).join('');
+                    `;
+                }).join('');
+                
+                // Add keyboard navigation for gallery items
+                gallery.querySelectorAll('.gallery-item').forEach(item => {
+                    item.addEventListener('keydown', (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            item.click();
+                        }
+                    });
+                });
             }
             
             function getCardImageUrl(card) {
@@ -1084,22 +1717,31 @@
             }
             
             window.loadGalleryCard = async function(cardId) {
+                if (isLoading) return;
+                
                 setLoadingState(true);
                 try {
                     const response = await fetch(`https://api.scryfall.com/cards/${cardId}`);
-                    if (!response.ok) throw new Error('Failed to fetch card');
+                    if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                     const card = await response.json();
                     currentCardFace = 0;
                     displayCard(card);
                     
+                    // Smooth scroll to top
                     window.scrollTo({ top: 0, behavior: 'smooth' });
                     
-                    if (card.oracle_text || card.type_line) {
-                        fetchRelatedCards(card);
-                    }
+                    // Reset flip state
+                    card3d.classList.remove('flipped');
+                    flipBtn.querySelector('span').textContent = 'Details';
+                    
+                    // Announce to screen readers
+                    announceToScreenReader(`Loaded card: ${card.name}`);
+                    
+                    // Fetch new related cards
+                    fetchRelatedCards(card);
                 } catch (error) {
                     console.error('Error loading gallery card:', error);
-                    showError('Failed to load selected card.');
+                    showError('Failed to load selected card. Please try again.');
                 } finally {
                     setLoadingState(false);
                 }