diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -3,11 +3,25 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>MTG Card Explorer - Glass Edition</title>
+    <title>MTG Deck Doctor - Card Explorer</title>
+    <meta name="description" content="Advanced MTG card database with similarity search and market prices">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@600;700&display=swap');
+        
+        :root {
+            --glass-bg: rgba(0, 0, 0, 0.4);
+            --glass-bg-dark: rgba(0, 0, 0, 0.6);
+            --glass-border: rgba(255, 255, 255, 0.08);
+            --text-primary: rgba(255, 255, 255, 0.9);
+            --text-secondary: rgba(255, 255, 255, 0.6);
+            --text-muted: rgba(255, 255, 255, 0.4);
+            --accent-blue: rgba(102, 126, 234, 0.5);
+            --border-radius: 16px;
+            --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
         
         * {
             margin: 0;
@@ -18,292 +32,209 @@
         body {
             font-family: 'Inter', sans-serif;
             background: #0a0a0a;
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
             min-height: 100vh;
             position: relative;
             overflow-x: hidden;
-            scroll-behavior: smooth;
-            /* Prevent pull-to-refresh on mobile */
             overscroll-behavior-y: contain;
-        }
-        
-        /* Disable touch gestures globally except on specific elements */
-        * {
             touch-action: pan-y;
         }
         
-        /* Enable horizontal swipe only on card container */
-        .card-3d-container {
-            touch-action: pan-y pinch-zoom;
-        }
-        
-        /* Details modal for mobile */
-        .details-modal {
+        /* Glass overlay panel */
+        .background-overlay {
             position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.95);
-            backdrop-filter: blur(20px);
-            -webkit-backdrop-filter: blur(20px);
-            z-index: 1000;
-            display: none;
-            overflow-y: auto;
-            -webkit-overflow-scrolling: touch;
-        }
-        
-        .details-modal.active {
-            display: block;
-        }
-        
-        .details-modal-content {
-            min-height: 100%;
-            padding: 20px;
-            padding-top: 60px;
-            position: relative;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            z-index: 0;
         }
         
-        .details-close-btn {
+        /* Optimized background effects */
+        body::before {
+            content: '';
             position: fixed;
-            top: 20px;
-            right: 20px;
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.1);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            color: white;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            z-index: 1001;
-            transition: all 0.3s;
-        }
-        
-        .details-close-btn:hover {
-            background: rgba(255, 255, 255, 0.2);
+            inset: 0;
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            filter: blur(20px) brightness(0.5);
+            z-index: -1;
+            opacity: 0.3;
             transform: scale(1.1);
+            will-change: transform;
         }
         
-        /* Swipe indicator overlay */
-        .swipe-indicator {
-            position: absolute;
+        /* Single orb for performance */
+        .orb {
+            position: fixed;
+            width: min(400px, 40vw);
+            height: min(400px, 40vw);
+            border-radius: 50%;
+            background: radial-gradient(circle, rgba(102, 126, 234, 0.4) 0%, transparent 70%);
+            filter: blur(60px);
+            opacity: 0.3;
             top: 50%;
-            transform: translateY(-50%);
-            background: rgba(255, 255, 255, 0.9);
-            padding: 8px 12px;
-            border-radius: 20px;
-            font-size: 14px;
-            font-weight: 600;
+            left: 50%;
+            transform: translate(-50%, -50%);
             pointer-events: none;
-            opacity: 0;
-            transition: opacity 0.3s;
-            z-index: 100;
-            white-space: nowrap;
+            animation: float 20s infinite ease-in-out;
+            z-index: 1;
         }
         
-        .swipe-indicator.left {
-            left: 20px;
+        @keyframes float {
+            0%, 100% { transform: translate(-50%, -50%) scale(1); }
+            50% { transform: translate(-30%, -60%) scale(1.2); }
         }
         
-        .swipe-indicator.right {
-            right: 20px;
+        /* Disable complex animations on mobile */
+        @media (max-width: 768px) {
+            .orb { animation: none; opacity: 0.2; }
         }
         
-        .swipe-indicator.active {
-            opacity: 1;
+        .container {
+            position: relative;
+            z-index: 20;
         }
         
-        /* Touch feedback */
-        .touch-feedback {
-            position: fixed;
-            width: 60px;
-            height: 60px;
-            border-radius: 50%;
-            background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
-            pointer-events: none;
-            opacity: 0;
-            transform: translate(-50%, -50%) scale(0);
-            transition: opacity 0.3s, transform 0.3s;
-            z-index: 9999;
+        /* Consolidated glass styles */
+        .glass {
+            background: var(--glass-bg);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border: 1px solid var(--glass-border);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+            transition: var(--transition-normal);
         }
         
-        .touch-feedback.active {
-            opacity: 1;
-            transform: translate(-50%, -50%) scale(1);
+        .glass-card {
+            background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));
+            backdrop-filter: blur(30px);
+            -webkit-backdrop-filter: blur(30px);
+            border: 1px solid var(--glass-border);
+            border-radius: var(--border-radius);
+            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
+            overflow: hidden;
         }
         
-        /* Disable text selection on interactive elements */
-        .no-select {
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-            -webkit-touch-callout: none;
+        /* Optimized search */
+        .search-container {
+            position: relative;
+            max-width: 500px;
+            margin: 0 auto;
         }
         
-        /* Card art background with subtle blur */
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
+        .search-input {
             width: 100%;
-            height: 100%;
-            background-size: cover;
-            background-position: center;
-            background-repeat: no-repeat;
-            filter: blur(10px) brightness(0.7);
-            z-index: 0;
-            opacity: 0.4;
-            transform: scale(1.1);
+            background: var(--glass-bg-dark);
+            backdrop-filter: blur(20px);
+            border: 1px solid var(--glass-border);
+            border-radius: var(--border-radius);
+            padding: 14px 20px 14px 50px;
+            color: white;
+            font-size: 16px;
+            transition: var(--transition-fast);
+            outline: none;
+            position: relative;
+            z-index: 5;
         }
         
-        /* Static glass panel overlay */
-        body::after {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-            z-index: 1;
-            pointer-events: none;
+        .search-input::placeholder {
+            color: var(--text-muted);
         }
         
-        @keyframes gradientShift {
-            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); }
+        .search-input:focus {
+            border-color: var(--accent-blue);
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
         }
         
-        /* Optimized floating orbs with better mobile performance */
-        .orb {
-            position: fixed;
-            border-radius: 50%;
-            filter: blur(40px);
-            opacity: 0.4;
-            animation: float 20s infinite ease-in-out;
+        .search-icon {
+            position: absolute;
+            left: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: var(--text-muted);
             pointer-events: none;
-            will-change: transform;
+            font-size: 16px;
+            z-index: 10;
         }
         
-        .orb1 {
-            width: min(400px, 40vw);
-            height: min(400px, 40vw);
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            top: 10%;
-            left: 10%;
-            animation-duration: 25s;
-        }
-        
-        .orb2 {
-            width: min(300px, 30vw);
-            height: min(300px, 30vw);
-            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-            bottom: 20%;
-            right: 10%;
-            animation-duration: 30s;
-            animation-delay: -5s;
-        }
-        
-        .orb3 {
-            width: min(350px, 35vw);
-            height: min(350px, 35vw);
-            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+        .search-clear {
+            position: absolute;
+            right: 14px;
             top: 50%;
-            left: 50%;
-            animation-duration: 35s;
-            animation-delay: -10s;
+            transform: translateY(-50%);
+            background: none;
+            border: none;
+            color: var(--text-muted);
+            cursor: pointer;
+            padding: 4px;
+            border-radius: 50%;
+            transition: var(--transition-fast);
+            display: none;
         }
         
-        @keyframes float {
-            0%, 100% { 
-                transform: translate(0, 0) scale(1);
-            }
-            33% { 
-                transform: translate(30px, -50px) scale(1.1);
-            }
-            66% { 
-                transform: translate(-20px, 30px) scale(0.9);
-            }
+        .search-clear.visible {
+            display: block;
         }
         
-        /* Mobile optimizations - reduce animations on smaller screens */
-        @media (max-width: 768px) {
-            body::before {
-                animation-duration: 30s;
-                filter: blur(80px) brightness(0.6);
-            }
-            
-            .orb {
-                filter: blur(20px);
-                opacity: 0.2;
-            }
-            
-            .orb1, .orb2, .orb3 {
-                animation-duration: 40s;
-            }
+        .search-clear:hover {
+            color: var(--text-primary);
+            background: rgba(255, 255, 255, 0.1);
         }
         
-        .container {
-            position: relative;
-            z-index: 10;
+        /* Simplified autocomplete */
+        .autocomplete-dropdown {
+            position: absolute;
+            top: calc(100% + 8px);
+            left: 0;
+            right: 0;
+            background: var(--glass-bg-dark);
+            backdrop-filter: blur(20px);
+            border: 1px solid var(--glass-border);
+            border-radius: 12px;
+            max-height: 300px;
+            overflow-y: auto;
+            z-index: 1000;
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(-10px);
+            transition: var(--transition-fast);
         }
         
-        /* Ensure the card art is properly positioned */
-        #card-image {
-            position: relative;
-            z-index: 5;
+        .autocomplete-dropdown.visible {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
         }
         
-        /* Enhanced glass panel effect with better mobile support */
-        .glass {
-            background: rgba(0, 0, 0, 0.4);
-            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.6),
-                inset 0 0 0 1px rgba(255, 255, 255, 0.05),
-                inset 0 -1px 0 0 rgba(255, 255, 255, 0.03);
-            transition: all 0.3s ease;
+        .autocomplete-item {
+            padding: 12px 16px;
+            color: var(--text-secondary);
+            cursor: pointer;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            transition: var(--transition-fast);
+            display: flex;
+            align-items: center;
         }
         
-        .glass-hover:hover {
-            background: rgba(0, 0, 0, 0.5);
-            border-color: rgba(255, 255, 255, 0.15);
-            box-shadow: 
-                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);
+        .autocomplete-item:hover,
+        .autocomplete-item.selected {
+            background: rgba(102, 126, 234, 0.2);
+            color: white;
         }
         
-        /* Mobile-first glass card design - Much darker */
-        .glass-card {
-            background: linear-gradient(135deg, 
-                rgba(0, 0, 0, 0.8) 0%,
-                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);
-            border-radius: min(24px, 16px);
-            box-shadow: 
-                0 20px 40px -15px rgba(0, 0, 0, 0.8),
-                inset 0 0 0 1px rgba(255, 255, 255, 0.05),
-                inset 0 0 30px rgba(0, 0, 0, 0.3);
-            overflow: hidden;
-            position: relative;
+        .autocomplete-loading,
+        .autocomplete-empty {
+            padding: 16px;
+            text-align: center;
+            color: var(--text-muted);
+            font-size: 14px;
         }
         
-        /* Responsive typography */
+        /* Headers */
         .header-text {
             font-family: 'Space Grotesk', sans-serif;
             font-weight: 700;
@@ -311,104 +242,57 @@
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
-            text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
+            font-size: clamp(2.5rem, 10vw, 6rem);
             letter-spacing: -1px;
             line-height: 1;
         }
         
         .subheader-text {
-            color: rgba(255, 255, 255, 0.6);
+            color: var(--text-secondary);
             font-weight: 300;
             letter-spacing: 2px;
             text-transform: uppercase;
             font-size: clamp(0.75rem, 2vw, 0.875rem);
         }
         
-        /* Responsive button styles */
+        /* Optimized buttons */
         .glass-button {
-            background: rgba(0, 0, 0, 0.4);
+            background: var(--glass-bg);
             backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            color: rgba(255, 255, 255, 0.9);
-            padding: min(14px, 3vw) min(28px, 6vw);
-            border-radius: min(16px, 12px);
+            border: 1px solid var(--glass-border);
+            color: var(--text-primary);
+            padding: 12px 24px;
+            border-radius: 12px;
             font-weight: 500;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            position: relative;
-            overflow: hidden;
-            font-size: clamp(0.85rem, 2.5vw, 0.95rem);
-            letter-spacing: 0.5px;
-            touch-action: manipulation;
-            -webkit-tap-highlight-color: transparent;
-            user-select: none;
+            transition: var(--transition-fast);
+            cursor: pointer;
+            font-size: 0.9rem;
+            white-space: nowrap;
+            min-height: 44px;
             display: inline-flex;
             align-items: center;
             justify-content: center;
-            min-height: 44px;
-            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 {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(135deg, 
-                rgba(255, 255, 255, 0) 0%, 
-                rgba(255, 255, 255, 0.1) 50%, 
-                rgba(255, 255, 255, 0) 100%);
-            transform: translateX(-100%);
-            transition: transform 0.6s;
-        }
-        
-        .glass-button:hover::before,
-        .glass-button:focus::before {
-            transform: translateX(100%);
         }
         
-        .glass-button:hover,
-        .glass-button:focus {
+        .glass-button:hover:not(:disabled) {
             background: rgba(0, 0, 0, 0.5);
             border-color: rgba(255, 255, 255, 0.2);
             transform: translateY(-2px);
-            box-shadow: 
-                0 10px 30px -10px rgba(0, 0, 0, 0.5),
-                0 0 40px -20px rgba(255, 255, 255, 0.3);
         }
         
-        .glass-button:active {
-            transform: translateY(0);
-            transition: transform 0.1s;
+        .glass-button:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
         }
         
-        /* Mobile-optimized card container */
+        /* Card container */
         .card-3d-container {
             perspective: 2000px;
             width: 100%;
             max-width: min(420px, 90vw);
             margin: 0 auto;
             position: relative;
+            user-select: none;
         }
         
         .card-3d {
@@ -419,30 +303,24 @@
             position: relative;
         }
         
-        .card-3d.flipped {
-            transform: rotateY(180deg);
-        }
-        
         .card-face {
             position: absolute;
             width: 100%;
             height: 100%;
             backface-visibility: hidden;
-            border-radius: min(18px, 4vw);
+            border-radius: 18px;
             overflow: hidden;
-            box-shadow: 
-                0 20px 60px -20px rgba(0, 0, 0, 0.8),
-                0 10px 20px -10px rgba(0, 0, 0, 0.6);
+            box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.5);
         }
         
         .card-face-back {
             transform: rotateY(180deg);
         }
         
-        /* Responsive grid layouts */
+        /* Responsive grids */
         .responsive-grid {
             display: grid;
-            gap: min(1.5rem, 4vw);
+            gap: 1.5rem;
             grid-template-columns: 1fr;
         }
         
@@ -454,133 +332,81 @@
         
         .stats-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(min(140px, 45vw), 1fr));
-            gap: min(0.75rem, 3vw);
+            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+            gap: 0.75rem;
         }
         
         .stat-box {
-            background: rgba(0, 0, 0, 0.6);
-            border: 1px solid rgba(255, 255, 255, 0.08);
-            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;
+            background: var(--glass-bg-dark);
+            border: 1px solid var(--glass-border);
+            border-radius: 12px;
+            padding: 1rem;
+            transition: var(--transition-fast);
         }
         
         .stat-box:hover {
-            background: rgba(0, 0, 0, 0.7);
-            border-color: rgba(255, 255, 255, 0.15);
             transform: translateY(-2px);
         }
         
-        /* Increase font size for info labels and values */
+        /* Info styles */
         .info-label {
-            font-size: 0.85rem;
+            font-size: 0.75rem;
             font-weight: 600;
             text-transform: uppercase;
             letter-spacing: 0.05em;
-            color: rgba(255, 255, 255, 0.4);
+            color: var(--text-muted);
             margin-bottom: 0.25rem;
         }
         
         .info-value {
-            color: rgba(255, 255, 255, 0.9);
+            color: var(--text-primary);
             font-weight: 500;
-            font-size: 1.2em;
+            font-size: 1.1rem;
         }
         
-        /* Mobile-optimized gallery */
-        .gallery-grid {
+        /* Price section */
+        .price-section {
+            background: var(--glass-bg-dark);
+            border: 1px solid var(--glass-border);
+            border-radius: 12px;
+            padding: 1rem;
+            margin-bottom: 1rem;
+        }
+        
+        .price-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(min(180px, 45vw), 1fr));
-            gap: min(1rem, 3vw);
+            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+            gap: 0.75rem;
+            margin-top: 0.75rem;
         }
         
-        @media (min-width: 640px) {
-            .gallery-grid {
-                grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-            }
+        .price-item {
+            text-align: center;
         }
         
-        .gallery-item {
-            position: relative;
-            border-radius: min(16px, 4vw);
-            overflow: hidden;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            cursor: pointer;
-            background: rgba(0, 0, 0, 0.4);
-            border: 1px solid rgba(255, 255, 255, 0.05);
-            touch-action: manipulation;
-            -webkit-tap-highlight-color: transparent;
+        .price-value {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: var(--text-primary);
         }
         
-        .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 15px 30px -10px rgba(0, 0, 0, 0.5),
-                0 0 30px -8px rgba(102, 126, 234, 0.3);
+        .price-label {
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            text-transform: uppercase;
+            margin-top: 0.25rem;
         }
         
-        .gallery-overlay {
-            position: absolute;
-            inset: 0;
-            background: linear-gradient(to top, 
-                rgba(0, 0, 0, 0.95) 0%,
-                rgba(0, 0, 0, 0.6) 40%, 
-                transparent 100%);
-            opacity: 0;
-            transition: opacity 0.3s;
-            padding: min(1rem, 3vw);
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-end;
-        }
-        
-        .gallery-item:hover .gallery-overlay,
-        .gallery-item:focus .gallery-overlay {
-            opacity: 1;
-        }
-        
-        /* 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 badges */
+        .legality-badge {
+            padding: 6px 12px;
+            border-radius: 8px;
+            font-size: 0.75rem;
+            font-weight: 500;
+            text-transform: uppercase;
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
         }
         
         .legality-legal {
@@ -595,1459 +421,756 @@
             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: 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%;
-            animation: spin 1s linear infinite;
-        }
-        
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-        
-        /* Enhanced scrollbar for all devices */
-        ::-webkit-scrollbar {
-            width: min(10px, 2vw);
-            height: min(10px, 2vw);
-        }
-        
-        ::-webkit-scrollbar-track {
-            background: rgba(0, 0, 0, 0.3);
-            border-radius: min(10px, 2vw);
-        }
-        
-        ::-webkit-scrollbar-thumb {
-            background: rgba(255, 255, 255, 0.15);
-            border-radius: min(10px, 2vw);
-            border: 1px solid transparent;
-            background-clip: content-box;
-        }
-        
-        ::-webkit-scrollbar-thumb:hover {
-            background: rgba(255, 255, 255, 0.25);
-            background-clip: content-box;
+        /* Gallery */
+        .gallery-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+            gap: 1.5rem;
         }
         
-        /* 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;
-            }
         }
         
-        /* 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);
-            }
-        }
-        
-        /* 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;
+                grid-template-columns: 1fr;
+                gap: 1rem;
             }
         }
         
-        /* 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;
-            }
+        .gallery-item {
+            position: relative;
+            border-radius: 12px;
+            overflow: hidden;
+            transition: var(--transition-fast);
+            cursor: pointer;
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
         }
         
-        /* 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);
-            }
+        .gallery-item:hover {
+            transform: translateY(-4px) scale(1.02);
         }
         
-        /* 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);
-            }
+        .gallery-overlay {
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
+            opacity: 0;
+            transition: var(--transition-fast);
+            padding: 1rem;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
         }
         
-        /* Print styles */
-        @media print {
-            body::before,
-            .orb {
-                display: none;
-            }
-            
-            .glass-card,
-            .glass {
-                background: white;
-                color: black;
-                border: 1px solid #ccc;
-                box-shadow: none;
-            }
+        .gallery-item:hover .gallery-overlay {
+            opacity: 1;
         }
         
-        /* Smooth scrolling behavior */
-        html {
-            scroll-behavior: smooth;
+        /* Modal */
+        .details-modal {
+            position: fixed;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.95);
+            backdrop-filter: blur(20px);
+            z-index: 1000;
+            display: none;
+            overflow-y: auto;
         }
         
-        /* Enhanced touch scrolling for iOS */
-        .card-face-back {
-            -webkit-overflow-scrolling: touch;
+        .details-modal.active {
+            display: block;
         }
         
-        /* Button loading state */
-        .glass-button:disabled {
-            opacity: 0.6;
-            pointer-events: none;
-            cursor: not-allowed;
+        .details-modal-content {
+            min-height: 100%;
+            padding: 60px 20px 20px;
         }
         
-        .glass-button.loading {
-            position: relative;
-            color: transparent;
+        .details-close-btn {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            z-index: 1001;
         }
         
-        .glass-button.loading::after {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 16px;
-            height: 16px;
-            border: 2px solid rgba(255, 255, 255, 0.3);
-            border-top-color: white;
+        /* Loading */
+        .loading-ring {
+            width: 48px;
+            height: 48px;
+            border: 3px solid rgba(255, 255, 255, 0.1);
+            border-top-color: rgba(102, 126, 234, 0.8);
             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;
         }
         
-        ::-moz-selection {
-            background: rgba(102, 126, 234, 0.3);
-            color: white;
+        @keyframes spin {
+            to { transform: rotate(360deg); }
         }
         
-        /* 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;
+        /* Toast */
+        .toast {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 1100;
+            padding: 12px 16px;
+            border-radius: 8px;
+            font-size: 14px;
+            transition: var(--transition-fast);
+            transform: translateX(400px);
         }
         
-        @keyframes shimmer {
-            0% { background-position: -200% 0; }
-            100% { background-position: 200% 0; }
+        .toast.show {
+            transform: translateX(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));
-            }
+        .toast.error {
+            background: rgba(239, 68, 68, 0.9);
+            color: white;
         }
         
-        /* Keyboard navigation improvements */
-        .glass-button:focus-visible,
-        .gallery-item:focus-visible {
-            outline: 3px solid rgba(102, 126, 234, 0.8);
-            outline-offset: 2px;
+        .toast.success {
+            background: rgba(16, 185, 129, 0.9);
+            color: white;
         }
         
-        /* 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;
+        /* Price tag */
+        .price-tag {
+            background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.9));
+            color: white;
+            padding: 6px 12px;
+            border-radius: 8px;
+            font-weight: 600;
+            font-size: 0.875rem;
         }
         
-        /* 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;
+        /* Scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
         }
         
-        .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;
+        ::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.3);
         }
         
-        .info-value {
-            color: rgba(255, 255, 255, 0.9);
-            font-weight: 500;
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 4px;
         }
         
-        /* Consolidated price section */
-        .price-section {
-            background: rgba(0, 0, 0, 0.6);
-            border: 1px solid rgba(255, 255, 255, 0.08);
-            border-radius: 12px;
-            padding: 1rem;
-            margin-bottom: 1rem;
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.3);
         }
         
-        .price-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-            gap: 0.75rem;
-            margin-top: 0.75rem;
-        }
+        /* Utilities */
+        .hidden { display: none !important; }
+        .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+        .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
         
-        .price-item {
-            text-align: center;
+        /* Focus styles */
+        :focus-visible {
+            outline: 2px solid var(--accent-blue);
+            outline-offset: 2px;
         }
         
-        .price-value {
-            font-size: 1.25rem;
-            font-weight: 600;
-            color: rgba(255, 255, 255, 0.95);
+        /* Selection */
+        ::selection {
+            background: rgba(102, 126, 234, 0.3);
+            color: white;
         }
         
-        .price-label {
-            font-size: 0.75rem;
-            color: rgba(255, 255, 255, 0.5);
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            margin-top: 0.25rem;
+        /* Reduced motion */
+        @media (prefers-reduced-motion: reduce) {
+            * {
+                animation-duration: 0.01ms !important;
+                transition-duration: 0.01ms !important;
+            }
         }
     </style>
 </head>
 <body>
-    <!-- Animated background orbs -->
-    <div class="orb orb1" aria-hidden="true"></div>
-    <div class="orb orb2" aria-hidden="true"></div>
-    <div class="orb orb3" aria-hidden="true"></div>
+    <!-- Background elements -->
+    <div class="background-overlay"></div>
+    <div class="orb" aria-hidden="true"></div>
     
-    <!-- Touch feedback element -->
-    <div class="touch-feedback" id="touch-feedback"></div>
+    <!-- Toast notifications -->
+    <div id="toast" class="toast"></div>
     
-    <!-- Details Modal for Mobile -->
+    <!-- Details Modal -->
     <div class="details-modal" id="details-modal">
-        <button class="details-close-btn" id="close-details" aria-label="Close details">
+        <button class="details-close-btn" onclick="closeModal()" aria-label="Close">
             <i class="fas fa-times"></i>
         </button>
         <div class="details-modal-content">
-            <div id="modal-card-details" class="glass-card p-4">
-                <!-- Card details will be populated here -->
-            </div>
+            <div id="modal-content" class="glass-card p-4"></div>
         </div>
     </div>
     
-    <div class="container mx-auto py-4 md:py-8">
+    <div class="container mx-auto py-4 md:py-8 px-4">
         <!-- Header -->
-        <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-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>
+        <header class="text-center mb-8 md:mb-12">
+            <p class="subheader-text mb-2">Advanced Card Database</p>
+            <h1 class="header-text mb-6">Deck Doctor</h1>
+            
+            <!-- Search -->
+            <div class="search-container">
+                <i class="fas fa-search search-icon"></i>
+                <input 
+                    type="text" 
+                    id="search-input"
+                    class="search-input" 
+                    placeholder="Search for cards..." 
+                    autocomplete="off"
+                >
+                <button class="search-clear" id="search-clear" aria-label="Clear">
+                    <i class="fas fa-times"></i>
+                </button>
+                <div class="autocomplete-dropdown" id="autocomplete"></div>
             </div>
         </header>
 
         <div class="responsive-grid max-w-7xl mx-auto">
-            <!-- Card Display Section -->
-            <div class="flex flex-col items-center order-1 lg:order-none">
-                <div class="card-3d-container mb-4 md:mb-6 no-select">
-                    <!-- Swipe indicators -->
-                    <div class="swipe-indicator left" id="swipe-left">
-                        <i class="fas fa-chevron-left mr-1"></i> Previous
-                    </div>
-                    <div class="swipe-indicator right" id="swipe-right">
-                        Next <i class="fas fa-chevron-right ml-1"></i>
-                    </div>
-                    
+            <!-- Card Display -->
+            <div class="flex flex-col items-center">
+                <div class="card-3d-container mb-4">
                     <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 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-2 md:top-4 right-2 md:right-4 price-tag hidden text-xs md:text-sm">
-                                Face 1/2
-                            </div>
-                        </div>
-                        
-                        <!-- Card Back (for desktop only) -->
-                        <div class="card-face card-face-back glass-card p-3 md:p-6 hidden lg:block">
-                            <div id="card-details" class="h-full overflow-y-auto">
-                                <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 id="card-image" class="w-full h-full bg-gray-900 flex items-center justify-center">
+                                <div class="text-center glass-card p-8">
+                                    <i class="fas fa-cube text-5xl text-white/30 mb-4"></i>
+                                    <p class="text-white/60">Initializing...</p>
                                 </div>
                             </div>
+                            <div id="face-indicator" class="absolute top-4 right-4 price-tag hidden">Face 1/2</div>
                         </div>
                     </div>
                 </div>
                 
-                <!-- Control Buttons -->
-                <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>
+                <!-- Controls -->
+                <div class="flex gap-2 mb-4">
+                    <button id="random-btn" class="glass-button">
+                        <i class="fas fa-shuffle mr-2"></i>Random
                     </button>
-                    
-                    <button id="flip-btn" class="glass-button" aria-label="Show Details">
-                        <i class="fas fa-info-circle mr-2"></i><span>Details</span>
+                    <button id="details-btn" class="glass-button">
+                        <i class="fas fa-info-circle mr-2"></i>Details
                     </button>
                 </div>
                 
                 <!-- Face Navigation -->
-                <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">
+                <div id="face-nav" class="hidden glass-card px-4 py-2 flex items-center gap-4">
+                    <button onclick="switchFace(-1)" class="text-white/60 hover:text-white">
                         <i class="fas fa-chevron-left"></i>
                     </button>
-                    <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">
+                    <span id="face-counter" class="text-white font-medium">1/2</span>
+                    <button onclick="switchFace(1)" class="text-white/60 hover:text-white">
                         <i class="fas fa-chevron-right"></i>
                     </button>
                 </div>
             </div>
             
-            <!-- 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-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>
+            <!-- Info Panel -->
+            <div class="space-y-4">
+                <div class="glass-card p-4 md:p-5">
+                    <h2 id="card-name" class="text-2xl font-semibold text-white mb-1">No Card Selected</h2>
+                    <div id="card-type" class="text-white/60 mb-4"></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 class="glass p-3 rounded-lg mb-4 max-h-40 overflow-y-auto">
+                        <div id="card-text" class="text-white/80 text-sm whitespace-pre-line"></div>
                     </div>
                     
-                    <!-- Consolidated Pricing Section -->
-                    <div class="price-section">
-                        <h3 class="info-label">Market Prices</h3>
-                        <div id="card-prices" class="price-grid">
-                            <!-- Prices will be inserted here dynamically -->
-                        </div>
+                    <!-- Legalities -->
+                    <div class="mb-4">
+                        <h3 class="info-label mb-2">Format Legality</h3>
+                        <div id="legalities" class="flex flex-wrap gap-1"></div>
                     </div>
                     
-                    <!-- Rankings Box -->
-                    <div class="stat-box bg-black/40 border border-white/5 mb-4">
-                        <p class="info-label text-xs">Rankings</p>
-                        <div id="card-rankings" class="info-value text-sm md:text-base"></div>
+                    <!-- Rankings -->
+                    <div class="stat-box mb-4">
+                        <p class="info-label">Rankings</p>
+                        <div id="rankings" class="info-value">—</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>
+                    <!-- Prices -->
+                    <div class="price-section">
+                        <h3 class="info-label">Market Prices</h3>
+                        <div id="prices" class="price-grid"></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>
-                        
-                        <!-- 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>
+                    <!-- Links -->
+                    <div>
+                        <h3 class="info-label mb-2">Purchase & Resources</h3>
+                        <div id="links" class="flex flex-wrap gap-2"></div>
                     </div>
                 </div>
             </div>
         </div>
         
-        <!-- Related Cards Gallery -->
-        <div id="card-gallery-section" class="mt-8 md:mt-16 hidden px-4">
-            <div class="glass-divider"></div>
-            <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="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 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>
+        <!-- Gallery -->
+        <div id="gallery-section" class="mt-12 hidden">
+            <h2 class="text-2xl font-bold text-center text-white mb-6">Similar Cards</h2>
+            <div id="gallery" class="gallery-grid max-w-7xl mx-auto"></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>
+        <!-- Loading -->
+        <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-6 text-center">
+                <div class="loading-ring mx-auto mb-3"></div>
+                <p class="text-white/60">Loading...</p>
             </div>
         </div>
     </div>
 
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // DOM elements
-            const randomBtn = document.getElementById('random-btn');
-            const flipBtn = document.getElementById('flip-btn');
-            const prevFaceBtn = document.getElementById('prev-face');
-            const nextFaceBtn = document.getElementById('next-face');
-            const loading = document.getElementById('loading');
-            const cardImage = document.getElementById('card-image');
-            const cardDetails = document.getElementById('card-details');
-            const cardName = document.getElementById('card-name');
-            const cardType = document.getElementById('card-type');
-            const cardText = document.getElementById('card-text');
-            const cardLegalities = document.getElementById('card-legalities');
-            const faceIndicator = document.getElementById('face-indicator');
-            const cardFaceNav = document.getElementById('card-face-nav');
-            const faceCounter = document.getElementById('face-counter');
-            const card3d = document.getElementById('card-3d');
-            const card3dContainer = document.querySelector('.card-3d-container');
-            const errorToast = document.getElementById('error-toast');
-            const successToast = document.getElementById('success-toast');
-            const touchFeedback = document.getElementById('touch-feedback');
-            const swipeLeftIndicator = document.getElementById('swipe-left');
-            const swipeRightIndicator = document.getElementById('swipe-right');
-            const detailsModal = document.getElementById('details-modal');
-            const closeDetailsBtn = document.getElementById('close-details');
-            const modalCardDetails = document.getElementById('modal-card-details');
-            
-            let currentCardFace = 0;
-            let currentCardData = null;
-            let isLoading = false;
-            
-            // Touch gesture state
-            let touchStartX = 0;
-            let touchStartY = 0;
-            let touchStartTime = 0;
-            let isSwiping = false;
-            let swipeThreshold = 100; // Increased from 50px to prevent accidental swipes
-            let swipeVelocityThreshold = 0.3; // pixels per millisecond
-            let lastSwipeTime = 0;
-            let swipeDebounceTime = 500; // Prevent multiple swipes in quick succession
-            
-            // Check if mobile
-            const isMobile = () => window.innerWidth <= 768;
-            
-            // Event listeners with debouncing
-            randomBtn.addEventListener('click', debounce(() => {
-                if (!isLoading) {
-                    currentCardFace = 0;
-                    fetchRandomCard();
-                }
-            }, 300));
-            
-            flipBtn.addEventListener('click', handleFlipButton);
-            prevFaceBtn.addEventListener('click', () => switchFace(-1));
-            nextFaceBtn.addEventListener('click', () => switchFace(1));
-            closeDetailsBtn.addEventListener('click', closeDetailsModal);
-            
-            // Close modal on outside click
-            detailsModal.addEventListener('click', (e) => {
-                if (e.target === detailsModal) {
-                    closeDetailsModal();
-                }
-            });
-            
-            // Keyboard navigation
-            document.addEventListener('keydown', handleKeydown);
-            
-            // Improved touch gesture handling - only on card container
-            card3dContainer.addEventListener('touchstart', handleTouchStart, { passive: false });
-            card3dContainer.addEventListener('touchmove', handleTouchMove, { passive: false });
-            card3dContainer.addEventListener('touchend', handleTouchEnd, { passive: false });
-            card3dContainer.addEventListener('touchcancel', handleTouchCancel, { passive: false });
-            
-            // Prevent default touch behavior on buttons
-            [randomBtn, flipBtn, prevFaceBtn, nextFaceBtn].forEach(btn => {
-                btn.addEventListener('touchstart', (e) => {
-                    e.stopPropagation();
-                }, { passive: false });
-            });
-            
-            // Initialize
+        // State
+        let currentCard = null;
+        let currentFace = 0;
+        let isLoading = false;
+        let searchTimeout = null;
+        let autocompleteResults = [];
+        
+        // DOM Elements
+        const $ = id => document.getElementById(id);
+        const searchInput = $('search-input');
+        const searchClear = $('search-clear');
+        const autocomplete = $('autocomplete');
+        const randomBtn = $('random-btn');
+        const detailsBtn = $('details-btn');
+        const loading = $('loading');
+        const toast = $('toast');
+        
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
             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;
-                }
-                
-                // Close modal on Escape
-                if (e.key === 'Escape' && detailsModal.classList.contains('active')) {
-                    closeDetailsModal();
-                    return;
-                }
-                
-                switch(e.key) {
-                    case ' ':
-                    case 'Enter':
-                        if (e.target === flipBtn || e.target === randomBtn) return;
-                        e.preventDefault();
-                        if (!isLoading) fetchRandomCard();
-                        break;
-                    case 'd':
-                    case 'D':
-                        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) {
-                if (isLoading) return;
-                
-                // Get the first touch point
-                const touch = e.touches[0];
-                touchStartX = touch.clientX;
-                touchStartY = touch.clientY;
-                touchStartTime = Date.now();
-                isSwiping = false;
-                
-                // Show touch feedback
-                showTouchFeedback(touchStartX, touchStartY);
-            }
-            
-            function handleTouchMove(e) {
-                if (!touchStartX || !touchStartY || isLoading) return;
-                
-                const touch = e.touches[0];
-                const deltaX = touch.clientX - touchStartX;
-                const deltaY = touch.clientY - touchStartY;
-                
-                // Determine if this is a horizontal swipe
-                if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 20) {
-                    isSwiping = true;
-                    e.preventDefault(); // Prevent scrolling only when swiping horizontally
-                    
-                    // Show swipe indicators
-                    if (deltaX > 30) {
-                        swipeLeftIndicator.classList.add('active');
-                        swipeRightIndicator.classList.remove('active');
-                    } else if (deltaX < -30) {
-                        swipeRightIndicator.classList.add('active');
-                        swipeLeftIndicator.classList.remove('active');
-                    }
+            setupEventListeners();
+        });
+        
+        // Event Listeners
+        function setupEventListeners() {
+            searchInput.addEventListener('input', handleSearch);
+            searchInput.addEventListener('keydown', handleSearchKey);
+            searchClear.addEventListener('click', clearSearch);
+            randomBtn.addEventListener('click', () => fetchRandomCard());
+            detailsBtn.addEventListener('click', showDetails);
+            
+            // Close autocomplete on outside click
+            document.addEventListener('click', e => {
+                if (!e.target.closest('.search-container')) {
+                    hideAutocomplete();
                 }
-                
-                // Update touch feedback position
-                updateTouchFeedback(touch.clientX, touch.clientY);
-            }
+            });
             
-            function handleTouchEnd(e) {
-                if (!touchStartX || !touchStartY || isLoading) {
-                    resetTouchState();
-                    return;
-                }
-                
-                const touchEndTime = Date.now();
-                const touchDuration = touchEndTime - touchStartTime;
-                const touchEndX = e.changedTouches[0].clientX;
-                const touchEndY = e.changedTouches[0].clientY;
-                
-                const deltaX = touchEndX - touchStartX;
-                const deltaY = touchEndY - touchStartY;
-                const velocity = Math.abs(deltaX) / touchDuration;
-                
-                // Hide swipe indicators
-                swipeLeftIndicator.classList.remove('active');
-                swipeRightIndicator.classList.remove('active');
-                hideTouchFeedback();
-                
-                // Check if enough time has passed since last swipe
-                const now = Date.now();
-                if (now - lastSwipeTime < swipeDebounceTime) {
-                    resetTouchState();
-                    return;
+            // Keyboard shortcuts
+            document.addEventListener('keydown', e => {
+                if (e.key === '/' && document.activeElement !== searchInput) {
+                    e.preventDefault();
+                    searchInput.focus();
                 }
-                
-                // Horizontal swipe detection with velocity check
-                if (isSwiping && Math.abs(deltaX) > swipeThreshold && velocity > swipeVelocityThreshold) {
-                    lastSwipeTime = now;
-                    
-                    if (currentCardData && currentCardData.card_faces) {
-                        if (deltaX > 0) {
-                            switchFace(-1); // Swipe right - previous face
-                            showSuccess('Previous face');
-                        } else {
-                            switchFace(1); // Swipe left - next face
-                            showSuccess('Next face');
-                        }
-                    } else {
-                        // No multiple faces, could show a message
-                        if (deltaX > 0) {
-                            showError('No previous face');
-                        } else {
-                            showError('No next face');
-                        }
-                    }
+                if (e.key === 'Escape') {
+                    closeModal();
+                    searchInput.blur();
                 }
-                // Vertical swipe down for random card (increased threshold)
-                else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY > 150 && !isSwiping) {
-                    lastSwipeTime = now;
-                    fetchRandomCard();
-                    showSuccess('Loading random card...');
-                }
-                
-                resetTouchState();
-            }
+            });
+        }
+        
+        // Search Functions
+        function handleSearch(e) {
+            const query = e.target.value.trim();
+            searchClear.classList.toggle('visible', query.length > 0);
             
-            function handleTouchCancel(e) {
-                resetTouchState();
-                swipeLeftIndicator.classList.remove('active');
-                swipeRightIndicator.classList.remove('active');
-                hideTouchFeedback();
+            clearTimeout(searchTimeout);
+            if (query.length < 2) {
+                hideAutocomplete();
+                return;
             }
             
-            function resetTouchState() {
-                touchStartX = 0;
-                touchStartY = 0;
-                touchStartTime = 0;
-                isSwiping = false;
+            searchTimeout = setTimeout(() => fetchAutocomplete(query), 300);
+        }
+        
+        function handleSearchKey(e) {
+            if (e.key === 'Enter' && autocompleteResults.length > 0) {
+                selectCard(autocompleteResults[0]);
             }
-            
-            function showTouchFeedback(x, y) {
-                touchFeedback.style.left = x + 'px';
-                touchFeedback.style.top = y + 'px';
-                touchFeedback.classList.add('active');
+        }
+        
+        function clearSearch() {
+            searchInput.value = '';
+            searchClear.classList.remove('visible');
+            hideAutocomplete();
+        }
+        
+        async function fetchAutocomplete(query) {
+            try {
+                showAutocompleteLoading();
+                const response = await fetch(`https://api.scryfall.com/cards/autocomplete?q=${encodeURIComponent(query)}`);
+                const data = await response.json();
+                autocompleteResults = data.data || [];
+                displayAutocomplete(autocompleteResults);
+            } catch (error) {
+                console.error('Autocomplete error:', error);
+                hideAutocomplete();
             }
-            
-            function updateTouchFeedback(x, y) {
-                if (touchFeedback.classList.contains('active')) {
-                    touchFeedback.style.left = x + 'px';
-                    touchFeedback.style.top = y + 'px';
-                }
+        }
+        
+        function displayAutocomplete(results) {
+            if (!results.length) {
+                autocomplete.innerHTML = '<div class="autocomplete-empty">No cards found</div>';
+            } else {
+                autocomplete.innerHTML = results.map(name => 
+                    `<div class="autocomplete-item" onclick="selectCard('${name.replace(/'/g, "\\'")}')">${name}</div>`
+                ).join('');
             }
+            showAutocomplete();
+        }
+        
+        function showAutocompleteLoading() {
+            autocomplete.innerHTML = '<div class="autocomplete-loading"><i class="fas fa-spinner fa-spin mr-2"></i>Searching...</div>';
+            showAutocomplete();
+        }
+        
+        function showAutocomplete() {
+            autocomplete.classList.add('visible');
+        }
+        
+        function hideAutocomplete() {
+            autocomplete.classList.remove('visible');
+        }
+        
+        async function selectCard(name) {
+            hideAutocomplete();
+            searchInput.value = name;
+            searchClear.classList.add('visible');
+            setLoading(true);
             
-            function hideTouchFeedback() {
-                touchFeedback.classList.remove('active');
+            try {
+                const response = await fetch(`https://api.scryfall.com/cards/named?exact=${encodeURIComponent(name)}`);
+                const card = await response.json();
+                displayCard(card);
+                showToast('Card loaded', 'success');
+            } catch (error) {
+                showToast('Failed to load card', 'error');
+            } finally {
+                setLoading(false);
             }
+        }
+        
+        // Card Functions
+        async function fetchRandomCard() {
+            if (isLoading) return;
+            setLoading(true);
             
-            function handleFlipButton() {
-                if (currentCardData && currentCardData.card_faces) {
-                    switchFace(1);
-                } else {
-                    // On mobile, show details modal instead of flipping
-                    if (isMobile()) {
-                        showDetailsModal();
-                    } else {
-                        card3d.classList.toggle('flipped');
-                        flipBtn.querySelector('span').textContent = 
-                            card3d.classList.contains('flipped') ? 'Card' : 'Details';
-                    }
-                }
+            try {
+                const response = await fetch('https://api.scryfall.com/cards/random?q=is%3Acommander');
+                const card = await response.json();
+                displayCard(card);
+            } catch (error) {
+                showToast('Failed to fetch card', 'error');
+            } finally {
+                setLoading(false);
             }
+        }
+        
+        function displayCard(card) {
+            currentCard = card;
+            currentFace = 0;
             
-            function showDetailsModal() {
-                if (!currentCardData) return;
-                
-                // Populate modal with card details
-                modalCardDetails.innerHTML = document.getElementById('detailed-info').innerHTML;
-                detailsModal.classList.add('active');
-                document.body.style.overflow = 'hidden';
+            // Update background
+            if (card.image_uris?.art_crop) {
+                document.body.style.setProperty('--bg-image', `url('${card.image_uris.art_crop}')`);
+                document.body.style.backgroundImage = `url('${card.image_uris.art_crop}')`;
             }
             
-            function closeDetailsModal() {
-                detailsModal.classList.remove('active');
-                document.body.style.overflow = '';
-            }
+            // Display card face
+            displayCardFace(card, 0);
             
-            function switchFace(direction) {
-                if (!currentCardData || !currentCardData.card_faces) return;
-                
-                currentCardFace = (currentCardFace + direction + currentCardData.card_faces.length) % currentCardData.card_faces.length;
-                displayCardFace(currentCardData, currentCardFace);
-            }
+            // Update info
+            updateCardInfo(card);
             
-            async function fetchRandomCard() {
-                if (isLoading) return;
-                
-                setLoadingState(true);
-                
-                try {
-                    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);
-                    
-                    // Reset flip state
-                    card3d.classList.remove('flipped');
-                    flipBtn.querySelector('span').textContent = 'Details';
-                    closeDetailsModal();
-                    
-                    // 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 check your connection and try again.');
-                } finally {
-                    setLoadingState(false);
-                }
-            }
+            // Fetch similar cards
+            fetchSimilarCards(card);
+        }
+        
+        function displayCardFace(card, faceIndex) {
+            const hasFaces = card.card_faces?.length > 1;
+            const face = hasFaces ? card.card_faces[faceIndex] : card;
+            const imageUris = face.image_uris || card.image_uris;
             
-            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');
-                }
+            // Update image
+            if (imageUris?.large) {
+                $('card-image').innerHTML = `<img src="${imageUris.large}" alt="${face.name}" class="w-full h-full object-contain">`;
             }
             
-            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);
+            // Update face navigation
+            if (hasFaces) {
+                $('face-nav').classList.remove('hidden');
+                $('face-indicator').classList.remove('hidden');
+                $('face-indicator').textContent = `Face ${faceIndex + 1}/${card.card_faces.length}`;
+                $('face-counter').textContent = `${faceIndex + 1}/${card.card_faces.length}`;
+            } else {
+                $('face-nav').classList.add('hidden');
+                $('face-indicator').classList.add('hidden');
             }
             
-            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';
-                }
-            }
+            // Update card info
+            $('card-name').textContent = face.name || card.name;
+            $('card-type').innerHTML = `<i class="fas fa-layer-group mr-2"></i>${face.type_line || card.type_line}`;
+            $('card-text').textContent = face.oracle_text || card.oracle_text || '';
+        }
+        
+        function updateCardInfo(card) {
+            // Legalities
+            const formats = [
+                { key: 'standard', name: 'Standard' },
+                { key: 'modern', name: 'Modern' },
+                { key: 'legacy', name: 'Legacy' },
+                { key: 'commander', name: 'Commander' }
+            ];
+            $('legalities').innerHTML = formats.map(format => {
+                const status = card.legalities?.[format.key];
+                if (!status) return '';
+                const isLegal = status === 'legal';
+                return `<div class="legality-badge ${isLegal ? 'legality-legal' : status === 'banned' ? 'legality-banned' : 'legality-not-legal'}">
+                    <i class="fas fa-${isLegal ? 'check' : 'times'}"></i>
+                    <span>${format.name}</span>
+                </div>`;
+            }).join('');
+            
+            // Rankings
+            $('rankings').innerHTML = card.edhrec_rank ? 
+                `#${card.edhrec_rank.toLocaleString()} <span class="text-xs text-white/60">EDH Rank</span>` : '—';
+            
+            // Prices
+            const prices = [];
+            if (card.prices?.usd) prices.push({ 
+                label: 'USD', 
+                value: `${parseFloat(card.prices.usd).toFixed(2)}`,
+                url: card.purchase_uris?.tcgplayer
+            });
+            if (card.prices?.usd_foil) prices.push({ 
+                label: 'Foil', 
+                value: `${parseFloat(card.prices.usd_foil).toFixed(2)}`,
+                url: card.purchase_uris?.tcgplayer
+            });
             
-            function displayCard(card) {
-                currentCardData = card;
-                currentCardFace = 0;
+            $('prices').innerHTML = prices.length ? prices.map(p => 
+                `<a href="${p.url || '#'}" target="_blank" class="price-item" ${p.url ? '' : 'style="cursor: default;"'}>
+                    <div class="price-value">${p.value}</div>
+                    <div class="price-label">${p.label}</div>
+                </a>`
+            ).join('') : '<div class="text-center text-white/40">No pricing data</div>';
+            
+            // Links
+            const links = [];
+            if (card.scryfall_uri) links.push({ name: 'Scryfall', url: card.scryfall_uri, icon: 'search' });
+            
+            // Purchase links with fallbacks
+            if (card.purchase_uris?.tcgplayer) {
+                links.push({ name: 'TCGPlayer', url: card.purchase_uris.tcgplayer, icon: 'shopping-cart' });
+            } else if (card.purchase_uris?.cardmarket) {
+                links.push({ name: 'Cardmarket', url: card.purchase_uris.cardmarket, icon: 'shopping-cart' });
+            }
+            
+            if (card.purchase_uris?.cardhoarder) {
+                links.push({ name: 'Cardhoarder', url: card.purchase_uris.cardhoarder, icon: 'shopping-cart' });
+            }
+            
+            if (card.related_uris?.edhrec) links.push({ name: 'EDHREC', url: card.related_uris.edhrec, icon: 'chart-bar' });
+            
+            $('links').innerHTML = links.map(link => 
+                `<a href="${link.url}" target="_blank" class="glass-button">
+                    <i class="fas fa-${link.icon} mr-2"></i>${link.name}
+                </a>`
+            ).join('');
+        }
+        
+        // Build card query string matching Python function
+        function buildCardQueryString(card) {
+            // Extract card data
+            const name = card.name || '';
+            const manaCost = card.mana_cost || '';
+            const cmc = card.cmc || 0;
+            const colors = card.colors || [];
+            const types = card.type_line ? card.type_line.split('—')[0].trim().split(' ') : [];
+            const subtypes = card.type_line && card.type_line.includes('—') ? 
+                           card.type_line.split('—')[1].trim().split(' ') : [];
+            const oracleText = card.oracle_text || '';
+            const power = card.power || null;
+            const toughness = card.toughness || null;
+            
+            // Color replacement
+            let colorString = colors.join(' ')
+                .replace(/W/g, 'Plains')
+                .replace(/B/g, 'Swamp')
+                .replace(/U/g, 'Island')
+                .replace(/R/g, 'Mountain')
+                .replace(/G/g, 'Forest');
+            
+            // Clean color text
+            colorString = colorString.replace(/\}\{/g, ',').replace(/\{/g, '').replace(/\}/g, '');
+            
+            // Clean mana cost
+            let cleanManaCost = manaCost.replace(/\{/g, '').replace(/\}/g, '').replace(/ /g, '').toLowerCase();
+            if (cmc) {
+                cleanManaCost += ` (${parseInt(cmc)})`;
+            }
+            
+            // Clean oracle text
+            let cleanText = oracleText
+                .replace(/•/g, '--')
+                .replace(/\n/g, '. ')
+                .replace(/\{/g, '')
+                .replace(/\}/g, '')
+                .replace(/\.\./g, '.')
+                .replace(/  /g, ' ')
+                .replace(/\u2014/g, '--')
+                .replace(/ \u2022/g, ':');
+            
+            // Replace name in text
+            let cardName = name;
+            if (name.includes(',')) {
+                const altName = name.split(',')[0].trim();
+                cleanText = cleanText.replace(new RegExp(altName, 'g'), 'this card');
+            }
+            
+            const subtypeString = subtypes.join(' ');
+            const typeString = types.join(' ');
+            
+            // Build card string based on type
+            let cardStr = '';
+            if (types.includes('Creature')) {
+                cardStr = `${cardName}, ${cleanManaCost}, ${subtypeString}, ${power}/${toughness}, ${cleanText}`;
+            } else if (types.includes('Land')) {
+                cardStr = `${cardName}, ${colorString}, ${cleanText}`;
+            } else {
+                cardStr = `${cardName}, ${cleanManaCost}, ${typeString}, ${cleanText}`;
+            }
+            
+            // Clean up card string
+            cardStr = cardStr.trim();
+            if (cardStr.endsWith(',')) {
+                cardStr = cardStr.slice(0, -1).trim();
+            }
+            
+            // Final cleaning
+            return cardStr.replace(/, ,/g, ',');
+        }
+        
+        async function fetchSimilarCards(card) {
+            try {
+                // Build the query string using the same logic as Python
+                const query = buildCardQueryString(card);
+                console.log('Query string:', query); // Debug logging
                 
-                // Set the card art as background
-                setCardArtBackground(card);
+                const response = await fetch(`https://api.deck.doctor/v1/mtg/search?q=${encodeURIComponent(query)}&topk=8`);
+                const data = await response.json();
                 
-                // Update face navigation
-                if (card.card_faces && card.card_faces.length > 1) {
-                    cardFaceNav.classList.remove('hidden');
-                    faceCounter.textContent = `1/${card.card_faces.length}`;
-                    flipBtn.querySelector('span').textContent = 'Switch Face';
-                } else {
-                    cardFaceNav.classList.add('hidden');
-                    flipBtn.querySelector('span').textContent = 'Details';
+                if (data?.length > 0) {
+                    displayGallery(data.filter(([c]) => c.id !== card.id));
+                    $('gallery-section').classList.remove('hidden');
                 }
-                
-                displayCardFace(card, currentCardFace);
-                displayCardBackDetails(card);
-                displayPrices(card);
-                displayPurchaseLinks(card);
-                displayLinks(card);
-                displayLegalities(card);
-                displayRankings(card);
+            } catch (error) {
+                console.error('Gallery error:', error);
             }
-            
-            function displayCardFace(card, faceIndex) {
-                let face, imageUris, name, typeText, oracleText, stats;
-                
-                if (card.card_faces && card.card_faces[faceIndex]) {
-                    face = card.card_faces[faceIndex];
-                    imageUris = face.image_uris || card.image_uris;
-                    name = face.name;
-                    typeText = face.type_line;
-                    oracleText = face.oracle_text;
-                    
-                    stats = {
-                        power: face.power || card.power,
-                        toughness: face.toughness || card.toughness,
-                        loyalty: face.loyalty || card.loyalty
-                    };
-                    
-                    faceIndicator.classList.remove('hidden');
-                    faceIndicator.textContent = `Face ${faceIndex + 1}/${card.card_faces.length}`;
-                    faceCounter.textContent = `${faceIndex + 1}/${card.card_faces.length}`;
-                } else {
-                    imageUris = card.image_uris;
-                    name = card.name;
-                    typeText = card.type_line;
-                    oracleText = card.oracle_text;
-                    stats = {
-                        power: card.power,
-                        toughness: card.toughness,
-                        loyalty: card.loyalty
-                    };
-                    
-                    faceIndicator.classList.add('hidden');
-                }
-                
-                displayCardImage(imageUris, name, card, faceIndex);
-                
-                cardName.textContent = name || 'Unknown Card';
-                cardType.innerHTML = `<i class="fas fa-layer-group mr-2"></i>${typeText || ''}`;
-                cardText.textContent = oracleText || 'No oracle text available.';
-            }
-            
-            function displayCardImage(imageUris, name, card, faceIndex) {
-                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}';">
-                    `;
-                } 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-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>
-                    `;
-                }
+        }
+        
+        function displayGallery(cards) {
+            $('gallery').innerHTML = cards.map(([card, score]) => `
+                <div class="gallery-item" onclick="loadCard('${card.id}')">
+                    <img src="${card.image_uris?.normal || ''}" alt="${card.name}" class="w-full h-full object-cover">
+                    ${card.prices?.usd ? `<div class="absolute bottom-2 left-2 price-tag text-xs">$${parseFloat(card.prices.usd).toFixed(2)}</div>` : ''}
+                    <div class="gallery-overlay">
+                        <h4 class="font-semibold text-white line-clamp-2">${card.name}</h4>
+                        <p class="text-xs text-white/60">${Math.round(score * 100)}% similar</p>
+                    </div>
+                </div>
+            `).join('');
+        }
+        
+        async function loadCard(id) {
+            setLoading(true);
+            try {
+                const response = await fetch(`https://api.scryfall.com/cards/${id}`);
+                const card = await response.json();
+                displayCard(card);
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+            } catch (error) {
+                showToast('Failed to load card', 'error');
+            } finally {
+                setLoading(false);
             }
-            
-            function displayCardBackDetails(card) {
-                let detailsHtml = `
-                    <h3 class="text-lg md:text-2xl font-semibold mb-3 md:mb-4 text-white">${card.name}</h3>
-                    
-                    <div class="mb-4 md:mb-6">
-                        <div class="glass p-2 md:p-3 rounded-lg">
-                            <h4 class="info-label">Set Information</h4>
-                            <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>
-                            <p class="text-xs text-white/60">Released: ${card.released_at || 'Unknown'}</p>
-                        </div>
+        }
+        
+        function switchFace(direction) {
+            if (!currentCard?.card_faces) return;
+            currentFace = (currentFace + direction + currentCard.card_faces.length) % currentCard.card_faces.length;
+            displayCardFace(currentCard, currentFace);
+        }
+        
+        function showDetails() {
+            if (!currentCard) return;
+            $('modal-content').innerHTML = `
+                <h3 class="text-2xl font-semibold text-white mb-4">${currentCard.name}</h3>
+                <div class="space-y-3">
+                    <div class="glass p-3 rounded">
+                        <p class="info-label">Set</p>
+                        <p class="text-white">${currentCard.set_name} (${currentCard.set.toUpperCase()})</p>
                     </div>
-                    
-                    ${card.flavor_text ? `
-                        <div class="glass p-2 md:p-3 rounded-lg mb-3 md:mb-4">
-                            <h4 class="info-label">Flavor Text</h4>
-                            <p class="italic text-xs md:text-sm text-white/70 leading-relaxed">"${card.flavor_text}"</p>
+                    ${currentCard.flavor_text ? `
+                        <div class="glass p-3 rounded">
+                            <p class="info-label">Flavor Text</p>
+                            <p class="italic text-white/70">"${currentCard.flavor_text}"</p>
                         </div>
                     ` : ''}
-                    
-                    <div class="glass p-2 md:p-3 rounded-lg">
-                        <h4 class="info-label">Artist & Rarity</h4>
-                        <p class="text-xs md:text-sm text-white/80">${card.artist}</p>
-                        <p class="text-xs text-white/60">${card.rarity ? card.rarity.charAt(0).toUpperCase() + card.rarity.slice(1) : 'Unknown'}</p>
+                    <div class="glass p-3 rounded">
+                        <p class="info-label">Artist</p>
+                        <p class="text-white">${currentCard.artist}</p>
                     </div>
-                `;
-                
-                document.getElementById('detailed-info').innerHTML = detailsHtml;
-                
-                // Also update modal content if on mobile
-                if (isMobile()) {
-                    modalCardDetails.innerHTML = detailsHtml;
-                }
-            }
-            
-            function displayPrices(card) {
-                let pricesHtml = '';
-                if (card.prices) {
-                    const priceData = [];
-                    
-                    if (card.prices.usd) {
-                        priceData.push({
-                            label: 'USD',
-                            value: `$${parseFloat(card.prices.usd).toFixed(2)}`,
-                            color: 'text-green-400'
-                        });
-                    }
-                    
-                    if (card.prices.usd_foil) {
-                        priceData.push({
-                            label: 'Foil',
-                            value: `$${parseFloat(card.prices.usd_foil).toFixed(2)}`,
-                            color: 'text-blue-400'
-                        });
-                    }
-                    
-                    if (card.prices.eur) {
-                        priceData.push({
-                            label: 'EUR',
-                            value: `€${parseFloat(card.prices.eur).toFixed(2)}`,
-                            color: 'text-purple-400'
-                        });
-                    }
-                    
-                    if (priceData.length > 0) {
-                        pricesHtml = priceData.map(price => `
-                            <div class="price-item">
-                                <div class="price-value ${price.color}">${price.value}</div>
-                                <div class="price-label">${price.label}</div>
-                            </div>
-                        `).join('');
-                    } else {
-                        pricesHtml = '<div class="col-span-full text-center text-white/40">No pricing data available</div>';
-                    }
-                } else {
-                    pricesHtml = '<div class="col-span-full text-center text-white/40">No pricing data available</div>';
-                }
-                document.getElementById('card-prices').innerHTML = pricesHtml;
-            }
-            
-            function displayPurchaseLinks(card) {
-                let linksHtml = '';
-                if (card.purchase_uris) {
-                    const stores = [
-                        { name: 'TCGPlayer', url: card.purchase_uris.tcgplayer, icon: 'fa-shopping-cart' },
-                        { name: 'Cardmarket', url: card.purchase_uris.cardmarket, icon: 'fa-store' },
-                        { name: 'Cardhoarder', url: card.purchase_uris.cardhoarder, icon: 'fa-warehouse' }
-                    ];
-                    
-                    stores.forEach(store => {
-                        if (store.url) {
-                            linksHtml += `
-                                <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-xs">No purchase links</p>';
-                }
-                document.getElementById('purchase-links').innerHTML = linksHtml;
-            }
-            
-            function displayLinks(card) {
-                let linksHtml = '';
-                const links = [
-                    { name: 'Scryfall', url: card.scryfall_uri, icon: 'fa-search' },
-                    { name: 'Gatherer', url: card.related_uris?.gatherer, icon: 'fa-book' },
-                    { name: 'EDHREC', url: card.related_uris?.edhrec, icon: 'fa-chart-bar' }
-                ];
-                
-                links.forEach(link => {
-                    if (link.url) {
-                        linksHtml += `
-                            <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>
-                        `;
-                    }
-                });
-                
-                document.getElementById('card-links').innerHTML = linksHtml;
-            }
-            
-            function displayLegalities(card) {
-                cardLegalities.innerHTML = '';
-                if (card.legalities) {
-                    const formats = ['standard', 'modern', 'legacy', 'vintage', 'commander', 'pioneer'];
-                    
-                    formats.forEach(format => {
-                        if (card.legalities[format]) {
-                            const status = card.legalities[format];
-                            const badge = document.createElement('div');
-                            
-                            let badgeClass = 'legality-badge ';
-                            let icon = '';
-                            
-                            if (status === 'legal') {
-                                badgeClass += 'legality-legal';
-                                icon = 'fa-check';
-                            } else if (status === 'not_legal') {
-                                badgeClass += 'legality-not-legal';
-                                icon = 'fa-times';
-                            } else if (status === 'restricted') {
-                                badgeClass += 'legality-restricted';
-                                icon = 'fa-exclamation';
-                            } else if (status === 'banned') {
-                                badgeClass += 'legality-banned';
-                                icon = 'fa-ban';
-                            }
-                            
-                            badge.className = badgeClass;
-                            badge.innerHTML = `
-                                <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);
-                        }
-                    });
-                }
-            }
-            
-            function displayRankings(card) {
-                let rankingsHtml = '';
-                
-                if (card.edhrec_rank) {
-                    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>';
-                }
-                
-                document.getElementById('card-rankings').innerHTML = rankingsHtml;
-            }
-            
-            // 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-6 md:py-8"><div class="loading-ring mx-auto"></div></div>';
-                    
-                    console.log('Searching for:', searchQuery);
-                    
-                    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) {
-                        console.error('API response not ok:', response.status);
-                        throw new Error('Failed to fetch related cards');
-                    }
-                    
-                    const data = await response.json();
-                    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-6 md:py-8 text-white/40 text-sm">Unable to load related cards</div>';
-                }
-            }
-            
-            // 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 || '';
-                } else {
-                    oracleText = card.oracle_text || '';
-                }
-                
-                // 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());
-                        }
-                    }
-                }
-                
-                // 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);
-                        }
-                    }
-                }
-                
-                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 foundKeywords;
-            }
-            
-            function displayCardGallery(cardPairs) {
-                const gallery = document.getElementById('card-gallery');
-                
-                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 = cardPairs.map(tuple => {
-                    const [card, similarityScore] = tuple;
-                    // Get oracle text from card or first face
-                    const oracleText = card.oracle_text || (card.card_faces && card.card_faces[0] ? card.card_faces[0].oracle_text : '');
-                    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 right-1 md:right-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>
-                                    ${oracleText ? `<p class="text-xs text-white/50 mt-2 line-clamp-3">${oracleText}</p>` : ''}
-                                </div>
-                            </div>
-                        </div>
-                    `;
-                }).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) {
-                if (card.image_uris) {
-                    return card.image_uris.normal || card.image_uris.large || card.image_uris.small;
-                }
-                if (card.card_faces && card.card_faces[0] && card.card_faces[0].image_uris) {
-                    return card.card_faces[0].image_uris.normal || card.card_faces[0].image_uris.large;
-                }
-                return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgwIiBoZWlnaHQ9IjM5MCIgdmlld0JveD0iMCAwIDI4MCAzOTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyODAiIGhlaWdodD0iMzkwIiBmaWxsPSIjMUExQTJFIi8+Cjx0ZXh0IHg9IjE0MCIgeT0iMTk1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMjAiIGZpbGw9IiM2NjY2NjYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5vIEltYWdlPC90ZXh0Pgo8L3N2Zz4=';
-            }
-            
-            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(`HTTP ${response.status}: ${response.statusText}`);
-                    const card = await response.json();
-                    currentCardFace = 0;
-                    displayCard(card);
-                    
-                    // Smooth scroll to top
-                    window.scrollTo({ top: 0, behavior: 'smooth' });
-                    
-                    // Reset flip state and close modal if open
-                    card3d.classList.remove('flipped');
-                    flipBtn.querySelector('span').textContent = 'Details';
-                    closeDetailsModal();
-                    
-                    // 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. Please try again.');
-                } finally {
-                    setLoadingState(false);
-                }
-            };
-        });
+                </div>
+            `;
+            $('details-modal').classList.add('active');
+            document.body.style.overflow = 'hidden';
+        }
+        
+        function closeModal() {
+            $('details-modal').classList.remove('active');
+            document.body.style.overflow = '';
+        }
+        
+        // Utilities
+        function setLoading(state) {
+            isLoading = state;
+            loading.classList.toggle('hidden', !state);
+            randomBtn.disabled = state;
+            detailsBtn.disabled = state;
+        }
+        
+        function showToast(message, type = 'info') {
+            toast.textContent = message;
+            toast.className = `toast ${type} show`;
+            setTimeout(() => toast.classList.remove('show'), 3000);
+        }
     </script>
 </body>
 </html>
\ No newline at end of file
