Update index.html

index.html

@@ -186,6 +186,99 @@
             background: rgba(255, 255, 255, 0.1);
         }
         
+        /* Gallery Header with Filters */
+        .gallery-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 24px;
+            flex-wrap: wrap;
+            gap: 16px;
+        }
+        
+        .gallery-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: white;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        
+        /* Color Filters - Redesigned for gallery section */
+        .color-filters-inline {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .color-filter-label {
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: var(--text-secondary);
+            margin-right: 4px;
+        }
+        
+        .color-filter-btn {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            border: 2px solid transparent;
+            cursor: pointer;
+            transition: var(--transition-fast);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            font-size: 13px;
+            position: relative;
+            background: none;
+            outline: none;
+        }
+        
+        .color-filter-btn:hover {
+            transform: scale(1.15);
+            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
+        }
+        
+        .color-filter-btn.active {
+            border-color: rgba(255, 255, 255, 0.9);
+            box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
+            transform: scale(1.15);
+        }
+        
+        .color-filter-btn::after {
+            content: '';
+            position: absolute;
+            inset: 2px;
+            border-radius: 50%;
+            transition: var(--transition-fast);
+        }
+        
+        /* Clear filters button */
+        .clear-filters-btn {
+            background: rgba(239, 68, 68, 0.2);
+            border: 1px solid rgba(239, 68, 68, 0.4);
+            color: rgb(248, 113, 113);
+            padding: 6px 12px;
+            border-radius: 8px;
+            font-size: 0.75rem;
+            cursor: pointer;
+            transition: var(--transition-fast);
+            display: none;
+        }
+        
+        .clear-filters-btn.visible {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+        }
+        
+        .clear-filters-btn:hover {
+            background: rgba(239, 68, 68, 0.3);
+            border-color: rgba(239, 68, 68, 0.6);
+        }
+        
         /* Simplified autocomplete */
         .autocomplete-dropdown {
             position: absolute;
@@ -278,6 +371,8 @@
             display: flex;
             align-items: center;
             justify-content: space-between;
+            flex-wrap: wrap;
+            gap: 12px;
         }
         
         .search-results-title {
@@ -299,6 +394,13 @@
             font-size: 0.875rem;
         }
         
+        /* Search Results Filters */
+        .search-results-filters {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
         /* Optimized buttons */
         .glass-button {
             background: var(--glass-bg);
@@ -329,6 +431,86 @@
             cursor: not-allowed;
         }
         
+        .glass-button-small {
+            padding: 6px 12px;
+            font-size: 0.8rem;
+            min-height: 32px;
+        }
+        
+        /* Oracle text search buttons */
+        .oracle-search-btn {
+            background: rgba(102, 126, 234, 0.2);
+            border: 1px solid rgba(102, 126, 234, 0.4);
+            color: rgba(102, 126, 234, 1);
+            padding: 12px 16px;
+            border-radius: 12px;
+            font-size: 0.85rem;
+            cursor: pointer;
+            transition: var(--transition-fast);
+            display: block;
+            margin: 8px 0;
+            text-align: left;
+            width: 100%;
+            word-wrap: break-word;
+            line-height: 1.5;
+            white-space: normal;
+            overflow-wrap: break-word;
+            word-break: break-word;
+        }
+        
+        .oracle-search-btn:hover {
+            background: rgba(102, 126, 234, 0.3);
+            border-color: rgba(102, 126, 234, 0.6);
+            color: white;
+            transform: translateY(-1px);
+        }
+        
+        .oracle-search-btn i {
+            margin-right: 8px;
+            flex-shrink: 0;
+        }
+        
+        /* Mobile optimization for oracle search buttons */
+        @media (max-width: 768px) {
+            .oracle-search-btn {
+                font-size: 0.8rem;
+                padding: 10px 14px;
+                margin: 6px 0;
+                line-height: 1.4;
+                display: flex;
+                align-items: flex-start;
+            }
+            
+            .oracle-search-btn i {
+                margin-right: 8px;
+                font-size: 0.8rem;
+                margin-top: 0.1em;
+            }
+        }
+        
+        @media (max-width: 480px) {
+            .oracle-search-btn {
+                font-size: 0.75rem;
+                padding: 10px 12px;
+                margin: 5px 0;
+                line-height: 1.4;
+                border-radius: 10px;
+            }
+            
+            .oracle-search-btn i {
+                margin-right: 6px;
+                font-size: 0.75rem;
+            }
+        }
+
+        @media (max-width: 360px) {
+            .oracle-search-btn {
+                font-size: 0.7rem;
+                padding: 8px 10px;
+                margin: 4px 0;
+            }
+        }
+        
         /* Card container */
         .card-3d-container {
             perspective: 2000px;
@@ -399,7 +581,7 @@
             text-transform: uppercase;
             letter-spacing: 0.05em;
             color: var(--text-muted);
-            margin-bottom: 0.25rem;
+            margin-bottom: 0.5rem;
         }
         
         .info-value {
@@ -471,7 +653,7 @@
             color: rgb(248, 113, 113);
         }
         
-        /* Gallery */
+        /* Enhanced Gallery */
         .gallery-grid {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
@@ -483,6 +665,11 @@
                 grid-template-columns: repeat(2, 1fr);
                 gap: 1rem;
             }
+            
+            .gallery-header {
+                flex-direction: column;
+                align-items: flex-start;
+            }
         }
         
         @media (max-width: 480px) {
@@ -497,7 +684,6 @@
             border-radius: 12px;
             overflow: hidden;
             transition: var(--transition-fast);
-            cursor: pointer;
             background: var(--glass-bg);
             border: 1px solid var(--glass-border);
         }
@@ -506,10 +692,11 @@
             transform: translateY(-4px) scale(1.02);
         }
         
+        /* Enhanced gallery overlay */
         .gallery-overlay {
             position: absolute;
             inset: 0;
-            background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
+            background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
             opacity: 0;
             transition: var(--transition-fast);
             padding: 1rem;
@@ -522,41 +709,63 @@
             opacity: 1;
         }
         
-        /* 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;
-        }
-        
-        .details-modal.active {
-            display: block;
+        .gallery-overlay-content {
+            space-y: 1rem;
         }
         
-        .details-modal-content {
-            min-height: 100%;
-            padding: 60px 20px 20px;
+        .gallery-mana-cost {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            margin-bottom: 8px;
         }
         
-        .details-close-btn {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            width: 40px;
-            height: 40px;
+        .mana-symbol {
+            width: 16px;
+            height: 16px;
             border-radius: 50%;
-            background: var(--glass-bg);
-            border: 1px solid var(--glass-border);
-            color: white;
-            display: flex;
+            display: inline-flex;
             align-items: center;
             justify-content: center;
+            font-size: 10px;
+            font-weight: bold;
+            color: white;
+            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+        }
+        
+        .gallery-actions {
+            display: flex;
+            gap: 8px;
+            margin-top: 12px;
+        }
+        
+        .gallery-btn {
+            background: rgba(0, 0, 0, 0.8);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            color: white;
+            padding: 6px 12px;
+            border-radius: 6px;
+            font-size: 0.75rem;
             cursor: pointer;
-            z-index: 1001;
+            transition: var(--transition-fast);
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+        }
+        
+        .gallery-btn:hover {
+            background: rgba(102, 126, 234, 0.8);
+            border-color: rgba(102, 126, 234, 1);
+        }
+        
+        .gallery-btn-view {
+            background: rgba(102, 126, 234, 0.8);
+        }
+        
+        .gallery-btn-view:hover {
+            background: rgba(102, 126, 234, 1);
+            transform: translateY(-1px);
         }
         
         /* Loading */
@@ -663,16 +872,6 @@
     <!-- Toast notifications -->
     <div id="toast" class="toast"></div>
     
-    <!-- Details Modal -->
-    <div class="details-modal" id="details-modal">
-        <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-content" class="glass-card p-4"></div>
-        </div>
-    </div>
-    
     <div class="container mx-auto py-4 md:py-8 px-4">
         <!-- Header -->
         <header class="text-center mb-8 md:mb-12">            
@@ -687,7 +886,7 @@
             </div>
 
             <!-- Search -->
-            <div class="search-container">
+            <div class="search-container mt-8">
                 <i class="fas fa-search search-icon"></i>
                 <textarea 
                     id="search-input"
@@ -702,8 +901,6 @@
                 </button>
                 <div class="autocomplete-dropdown" id="autocomplete"></div>
             </div>
-
-
         </header>
 
         <!-- Main Card Display -->
@@ -729,9 +926,6 @@
                     <button id="random-btn" class="glass-button">
                         <i class="fas fa-shuffle mr-2"></i>Random
                     </button>
-                    <button id="details-btn" class="glass-button">
-                        <i class="fas fa-info-circle mr-2"></i>Details
-                    </button>
                 </div>
                 
                 <!-- Face Navigation -->
@@ -752,8 +946,10 @@
                     <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-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>
+                    <!-- Oracle Text Search Section -->
+                    <div id="oracle-search-section" class="mb-4">
+                        <h3 class="info-label">Search Card Mechanics</h3>
+                        <div id="oracle-search-buttons" class="space-y-2"></div>
                     </div>
                     
                     <!-- Legalities -->
@@ -783,9 +979,19 @@
             </div>
         </div>
         
-        <!-- Gallery Section -->
+        <!-- Gallery Section with Filters -->
         <div id="gallery-section" class="mt-12 hidden">
-            <h2 id="gallery-header" class="text-2xl font-bold text-center text-white mb-6">Similar Cards</h2>
+            <div class="gallery-header max-w-7xl mx-auto">
+                <h2 id="gallery-header" class="gallery-title">Similar Cards</h2>
+                <div class="color-filters-inline">
+                    <span class="color-filter-label">Filter:</span>
+                    <div id="gallery-color-filters" class="flex gap-2"></div>
+                    <button id="clear-gallery-filters" class="clear-filters-btn" onclick="clearGalleryFilters()">
+                        <i class="fas fa-times"></i>
+                        Clear
+                    </button>
+                </div>
+            </div>
             <div id="gallery" class="gallery-grid max-w-7xl mx-auto"></div>
         </div>
         
@@ -796,7 +1002,16 @@
                     <i class="fas fa-search"></i>
                     <span>Search: <span class="search-query" id="search-query-text"></span></span>
                 </div>
-                <div class="results-count" id="results-count"></div>
+                <div class="flex items-center gap-4">
+                    <div class="results-count" id="results-count"></div>
+                    <div class="search-results-filters">
+                        <div id="search-color-filters" class="flex gap-2"></div>
+                        <button id="clear-search-filters" class="clear-filters-btn" onclick="clearSearchFilters()">
+                            <i class="fas fa-times"></i>
+                            Clear
+                        </button>
+                    </div>
+                </div>
             </div>
             <div id="search-results" class="gallery-grid max-w-7xl mx-auto"></div>
         </div>
@@ -819,6 +1034,18 @@
         let autocompleteResults = [];
         let isSearchMode = false;
         let lastSearchQuery = '';
+        let galleryColors = new Set();
+        let searchColors = new Set();
+        let currentGalleryQuery = '';
+        
+        // Mana color definitions
+        const manaColors = [
+            { symbol: 'W', name: 'White', color: '#FFFBD5', textColor: '#000' },
+            { symbol: 'U', name: 'Blue', color: '#0E68AB', textColor: '#fff' },
+            { symbol: 'B', name: 'Black', color: '#150B00', textColor: '#fff' },
+            { symbol: 'R', name: 'Red', color: '#D3202A', textColor: '#fff' },
+            { symbol: 'G', name: 'Green', color: '#00733E', textColor: '#fff' }
+        ];
         
         // DOM Elements
         const $ = id => document.getElementById(id);
@@ -826,7 +1053,6 @@
         const searchClear = $('search-clear');
         const autocomplete = $('autocomplete');
         const randomBtn = $('random-btn');
-        const detailsBtn = $('details-btn');
         const loading = $('loading');
         const toast = $('toast');
         const mainCardSection = $('main-card-section');
@@ -836,10 +1062,91 @@
         
         // Initialize
         document.addEventListener('DOMContentLoaded', () => {
+            createColorFilterButtons('gallery-color-filters', 'gallery');
+            createColorFilterButtons('search-color-filters', 'search');
             fetchRandomCard();
             setupEventListeners();
         });
         
+        // Create color filter buttons for different sections
+        function createColorFilterButtons(containerId, filterType) {
+            const container = $(containerId);
+            if (!container) return;
+            
+            container.innerHTML = manaColors.map(color => `
+                <button 
+                    class="color-filter-btn" 
+                    data-color="${color.symbol}"
+                    data-filter-type="${filterType}"
+                    onclick="toggleColorFilter('${color.symbol}', '${filterType}')"
+                    style="color: ${color.textColor};"
+                    title="Filter by ${color.name}"
+                >
+                    <span style="
+                        position: absolute;
+                        inset: 0;
+                        background: ${color.color};
+                        border-radius: 50%;
+                        z-index: -1;
+                    "></span>
+                    ${color.symbol}
+                </button>
+            `).join('');
+        }
+        
+        // Toggle color filter for specific section
+        function toggleColorFilter(colorSymbol, filterType) {
+            const colorSet = filterType === 'gallery' ? galleryColors : searchColors;
+            const button = document.querySelector(`[data-color="${colorSymbol}"][data-filter-type="${filterType}"]`);
+            
+            if (colorSet.has(colorSymbol)) {
+                colorSet.delete(colorSymbol);
+                button.classList.remove('active');
+            } else {
+                colorSet.add(colorSymbol);
+                button.classList.add('active');
+            }
+            
+            // Update clear button visibility
+            const clearBtn = filterType === 'gallery' ? $('clear-gallery-filters') : $('clear-search-filters');
+            if (clearBtn) {
+                clearBtn.classList.toggle('visible', colorSet.size > 0);
+            }
+            
+            // Apply filters based on type
+            if (filterType === 'gallery' && currentCard) {
+                fetchSimilarCards(currentCard);
+            } else if (filterType === 'search' && isSearchMode) {
+                performDeckDoctorSearch(lastSearchQuery);
+            }
+        }
+        
+        // Clear filters for gallery
+        function clearGalleryFilters() {
+            galleryColors.clear();
+            document.querySelectorAll('[data-filter-type="gallery"]').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            $('clear-gallery-filters').classList.remove('visible');
+            
+            if (currentCard) {
+                fetchSimilarCards(currentCard);
+            }
+        }
+        
+        // Clear filters for search
+        function clearSearchFilters() {
+            searchColors.clear();
+            document.querySelectorAll('[data-filter-type="search"]').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            $('clear-search-filters').classList.remove('visible');
+            
+            if (isSearchMode) {
+                performDeckDoctorSearch(lastSearchQuery);
+            }
+        }
+        
         // Event Listeners
         function setupEventListeners() {
             searchInput.addEventListener('input', handleSearch);
@@ -847,9 +1154,9 @@
             searchClear.addEventListener('click', clearSearch);
             randomBtn.addEventListener('click', () => {
                 exitSearchMode();
+                clearGalleryFilters();
                 fetchRandomCard();
             });
-            detailsBtn.addEventListener('click', showDetails);
             
             // Close autocomplete on outside click
             document.addEventListener('click', e => {
@@ -865,7 +1172,6 @@
                     searchInput.focus();
                 }
                 if (e.key === 'Escape') {
-                    closeModal();
                     searchInput.blur();
                     hideAutocomplete();
                 }
@@ -936,6 +1242,7 @@
             searchInput.value = '';
             searchClear.classList.remove('visible');
             hideAutocomplete();
+            clearSearchFilters();
             if (isSearchMode) {
                 exitSearchMode();
                 fetchRandomCard();
@@ -1008,17 +1315,26 @@
             }
         }
         
-        // Deck Doctor Search
+        // Deck Doctor Search with color filters
         async function performDeckDoctorSearch(query) {
             setLoading(true);
             lastSearchQuery = query;
             
             try {
-                const response = await fetch(`https://api.deck.doctor/v1/mtg/search?q=${encodeURIComponent(query)}&topk=20`);
+                // Build URL with colors if selected
+                let url = `https://api.deck.doctor/v1/mtg/search?q=${encodeURIComponent(query)}&topk=20&price_threshold=0`;
+                
+                // Add color filters for search results
+                searchColors.forEach(color => {
+                    url += `&colors=${color}`;
+                });
+                
+                const response = await fetch(url);
                 const data = await response.json();
                 
                 if (data && data.length > 0) {
-                    enterSearchMode(query, data);
+                    const colorFilterText = searchColors.size > 0 ? ` (${Array.from(searchColors).join('')})` : '';
+                    enterSearchMode(query + colorFilterText, data);
                     showToast(`Found ${data.length} cards`, 'success');
                 } else {
                     showToast('No cards found', 'error');
@@ -1107,20 +1423,38 @@
             
             // Hide search results
             searchResultsSection.classList.add('hidden');
+            
+            // Clear search filters when exiting search mode
+            clearSearchFilters();
         }
         
         function displaySearchResults(results) {
             const searchResultsContainer = $('search-results');
             
             searchResultsContainer.innerHTML = results.map(([card, score]) => `
-                <div class="gallery-item" onclick="loadCardFromSearch('${card.id}')">
+                <div class="gallery-item">
                     <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 mt-1">${card.type_line}</p>
-                        ${score < 1.0 ? `<p class="text-xs text-white/40 mt-1">${Math.round(score * 100)}% match</p>` : 
-                          score === 1.0 ? `<p class="text-xs text-white/40 mt-1">From decklist</p>` : ''}
+                        <div class="gallery-overlay-content">
+                            <h4 class="font-semibold text-white line-clamp-2">${card.name}</h4>
+                            <p class="text-xs text-white/60 mt-1">${card.type_line}</p>
+                            ${score < 1.0 ? `<p class="text-xs text-white/40 mt-1">${Math.round(score * 100)}% match</p>` : 
+                              score === 1.0 ? `<p class="text-xs text-white/40 mt-1">From decklist</p>` : ''}
+                            
+                            <div class="gallery-actions">
+                                <button onclick="loadCardFromSearch('${card.id}')" class="gallery-btn gallery-btn-view">
+                                    <i class="fas fa-eye"></i>
+                                    View Card
+                                </button>
+                                ${card.purchase_uris?.tcgplayer ? `
+                                    <a href="${card.purchase_uris.tcgplayer}" target="_blank" class="gallery-btn">
+                                        <i class="fas fa-shopping-cart"></i>
+                                        Buy
+                                    </a>
+                                ` : ''}
+                            </div>
+                        </div>
                     </div>
                 </div>
             `).join('');
@@ -1141,6 +1475,7 @@
                 searchClear.classList.remove('visible');
                 
                 window.scrollTo({ top: 0, behavior: 'smooth' });
+                showToast('Card loaded successfully', 'success');
             } catch (error) {
                 showToast('Failed to load card', 'error');
             } finally {
@@ -1211,10 +1546,88 @@
             // 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 || '';
+        }
+        
+        // Oracle text search functionality
+        function createOracleSearchButtons(oracleText) {
+            if (!oracleText) return '';
+            
+            const cardName = currentCard.name;
+            const shortName = cardName.includes(',') ? cardName.split(',')[0].trim() : cardName;
+            
+            // Split oracle text into meaningful lines
+            const lines = oracleText.split('\n').filter(line => line.trim().length > 0);
+            const buttons = [];
+            
+            lines.forEach((line) => {
+                let cleanedLine = line.trim();
+                if (cleanedLine.length > 10) {
+                    // Replace card names with "this card" (case insensitive)
+                    cleanedLine = cleanedLine.replace(new RegExp(cardName, 'gi'), 'this card');
+                    if (shortName !== cardName) {
+                        cleanedLine = cleanedLine.replace(new RegExp(shortName, 'gi'), 'this card');
+                    }
+                    
+                    // Show full text in buttons now
+                    buttons.push(`
+                        <button class="oracle-search-btn" onclick="searchOracleText('${cleanedLine.replace(/'/g, "\\'")}')">
+                            <i class="fas fa-search mr-2"></i>
+                            ${cleanedLine}
+                        </button>
+                    `);
+                }
+            });
+            
+            return buttons.join('');
+        }
+        
+        async function searchOracleText(searchTerm) {
+            searchInput.value = searchTerm;
+            searchClear.classList.add('visible');
+            await performDeckDoctorSearch(searchTerm);
+        }
+        
+        // Mana cost display helper
+        function formatManaCost(manaCost) {
+            if (!manaCost) return '';
+            
+            const symbols = manaCost.match(/\{[^}]+\}/g) || [];
+            return symbols.map(symbol => {
+                const clean = symbol.replace(/[{}]/g, '');
+                let color = '';
+                let bgColor = '';
+                
+                switch(clean) {
+                    case 'W': color = 'white'; bgColor = '#FFFBD5'; break;
+                    case 'U': color = 'blue'; bgColor = '#0E68AB'; break;
+                    case 'B': color = 'black'; bgColor = '#150B00'; break;
+                    case 'R': color = 'red'; bgColor = '#D3202A'; break;
+                    case 'G': color = 'green'; bgColor = '#00733E'; break;
+                    case 'C': color = 'colorless'; bgColor = '#A89B9A'; break;
+                    default: color = 'generic'; bgColor = '#CAC5C0'; break;
+                }
+                
+                return `<span class="mana-symbol" style="background-color: ${bgColor}">${clean}</span>`;
+            }).join('');
         }
         
         function updateCardInfo(card) {
+            // Oracle text search buttons
+            const hasFaces = card.card_faces?.length > 1;
+            const face = hasFaces ? card.card_faces[currentFace] : card;
+            const oracleText = face.oracle_text || card.oracle_text || '';
+            
+            const oracleSection = $('oracle-search-section');
+            if (oracleText) {
+                $('oracle-search-buttons').innerHTML = createOracleSearchButtons(oracleText);
+                oracleSection.style.display = 'block';
+                
+                // Add container class for better mobile layout
+                $('oracle-search-buttons').classList.add('space-y-2');
+            } else {
+                oracleSection.style.display = 'none';
+            }
+            
             // Legalities
             const formats = [
                 { key: 'standard', name: 'Standard' },
@@ -1356,9 +1769,18 @@
             try {
                 // Build the query string using the same logic as Python
                 const query = buildCardQueryString(card);
+                currentGalleryQuery = query;
                 console.log('Query string:', query); // Debug logging
                 
-                const response = await fetch(`https://api.deck.doctor/v1/mtg/search?q=${encodeURIComponent(query)}&topk=12`);
+                // Build URL with gallery color filters
+                let url = `https://api.deck.doctor/v1/mtg/search?q=${encodeURIComponent(query)}&topk=12&price_threshold=0`;
+                
+                // Add color filters for gallery
+                galleryColors.forEach(color => {
+                    url += `&colors=${color}`;
+                });
+                
+                const response = await fetch(url);
                 const data = await response.json();
                 
                 if (data?.length > 0) {
@@ -1372,6 +1794,10 @@
                     
                     displayGallery(filteredResults);
                     $('gallery-section').classList.remove('hidden');
+                    
+                    // Update header if filters are active
+                    const colorFilterText = galleryColors.size > 0 ? ` (${Array.from(galleryColors).join('')})` : '';
+                    $('gallery-header').textContent = `Similar Cards${colorFilterText}`;
                 }
             } catch (error) {
                 console.error('Gallery error:', error);
@@ -1380,12 +1806,35 @@
         
         function displayGallery(cards) {
             $('gallery').innerHTML = cards.map(([card, score]) => `
-                <div class="gallery-item" onclick="loadCard('${card.id}')">
+                <div class="gallery-item">
                     <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>` : ''}
+                    ${card.prices?.usd ? `<div class="absolute top-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 class="gallery-overlay-content">
+                            <h4 class="font-semibold text-white line-clamp-2 mb-2">${card.name}</h4>
+                            ${card.mana_cost ? `<div class="gallery-mana-cost mb-2">${formatManaCost(card.mana_cost)}</div>` : ''}
+                            <p class="text-xs text-white/60 line-clamp-2 mb-2">${card.type_line}</p>
+                            ${card.oracle_text ? `<p class="text-xs text-white/50 line-clamp-3 mb-3">${card.oracle_text}</p>` : ''}
+                            <p class="text-xs text-white/40 mb-3">${Math.round(score * 100)}% similar</p>
+                            
+                            <div class="gallery-actions">
+                                <button onclick="loadCard('${card.id}')" class="gallery-btn gallery-btn-view">
+                                    <i class="fas fa-eye"></i>
+                                    View Card
+                                </button>
+                                ${card.purchase_uris?.tcgplayer ? `
+                                    <a href="${card.purchase_uris.tcgplayer}" target="_blank" class="gallery-btn">
+                                        <i class="fas fa-shopping-cart"></i>
+                                        TCG
+                                    </a>
+                                ` : card.purchase_uris?.cardmarket ? `
+                                    <a href="${card.purchase_uris.cardmarket}" target="_blank" class="gallery-btn">
+                                        <i class="fas fa-shopping-cart"></i>
+                                        CM
+                                    </a>
+                                ` : ''}
+                            </div>
+                        </div>
                     </div>
                 </div>
             `).join('');
@@ -1398,6 +1847,7 @@
                 const card = await response.json();
                 displayCard(card);
                 window.scrollTo({ top: 0, behavior: 'smooth' });
+                showToast('Card loaded successfully', 'success');
             } catch (error) {
                 showToast('Failed to load card', 'error');
             } finally {
@@ -1409,36 +1859,7 @@
             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>
-                    ${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-3 rounded">
-                        <p class="info-label">Artist</p>
-                        <p class="text-white">${currentCard.artist}</p>
-                    </div>
-                </div>
-            `;
-            $('details-modal').classList.add('active');
-            document.body.style.overflow = 'hidden';
-        }
-        
-        function closeModal() {
-            $('details-modal').classList.remove('active');
-            document.body.style.overflow = '';
+            updateCardInfo(currentCard); // Refresh oracle text buttons for the new face
         }
         
         // Utilities
@@ -1446,7 +1867,6 @@
             isLoading = state;
             loading.classList.toggle('hidden', !state);
             randomBtn.disabled = state;
-            detailsBtn.disabled = state || !currentCard;
         }
         
         function showToast(message, type = 'info') {