Gaming 3D Violet Lightbox

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-200 via-violet-300 to-purple-400 dark:from-gray-900 dark:via-gray-800 dark:to-purple-950 p-4 font-sans">

  <!-- Lightbox Overlay (Hidden by default, shown via JS in a real app) -->
  <div class="fixed inset-0 bg-black bg-opacity-70 dark:bg-opacity-80 flex items-center justify-center z-50 transition-opacity duration-300 opacity-0 pointer-events-none" id="lightbox-overlay">
    <div class="relative w-11/12 max-w-4xl p-2 md:p-4 bg-gradient-to-br from-violet-700 to-purple-900 rounded-xl shadow-2xl dark:from-violet-900 dark:to-purple-950 transform scale-95 opacity-0 transition-all duration-300 ease-out" id="lightbox-content">
      
      <!-- Inner pseudo-3D container -->
      <div class="p-1.5 md:p-2 bg-gradient-to-br from-purple-500/30 to-violet-900/30 rounded-lg transform rotate-x-6 rotate-y-3 skew-x-1 skew-y-1 shadow-lg dark:from-purple-800/30 dark:to-violet-950/30 backdrop-blur-sm">
        <div class="p-1.5 md:p-2 bg-gradient-to-br from-violet-600/30 to-purple-800/30 rounded-md transform rotate-x-3 rotate-y-1 skew-x-0.5 skew-y-0.5 shadow-md dark:from-violet-800/30 dark:to-purple-900/30 backdrop-blur-sm">
          
          <img src="https://picsum.photos/1200/800" alt="Full size game screenshot" class="w-full h-auto rounded-lg shadow-xl border-2 border-purple-400 dark:border-violet-600">
        </div>
      </div>

      <!-- Close Button -->
      <button class="absolute top-0 right-0 -mr-2 -mt-2 md:-mr-4 md:-mt-4 bg-purple-600 hover:bg-purple-700 text-white rounded-full p-2 md:p-3 shadow-lg transform rotate-45 hover:rotate-90 transition-transform duration-300 ease-in-out border-2 border-purple-400 dark:bg-purple-800 dark:hover:bg-purple-900 dark:border-purple-600 focus:outline-none focus:ring-4 focus:ring-purple-300/50 dark:focus:ring-purple-700/50">
        <svg class="w-6 h-6 md:w-8 md:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>

      <!-- Navigation Buttons (Optional, for a gallery) -->
      <button class="absolute left-0 top-1/2 -ml-4 md:-ml-8 transform -translate-y-1/2 bg-purple-600 hover:bg-purple-700 text-white rounded-full p-2 md:p-3 shadow-lg opacity-80 hover:opacity-100 transition-opacity duration-200 border-2 border-purple-400 dark:bg-purple-800 dark:hover:bg-purple-900 dark:border-purple-600 focus:outline-none focus:ring-4 focus:ring-purple-300/50 dark:focus:ring-purple-700/50">
        <svg class="w-6 h-6 md:w-8 md:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
        </svg>
      </button>
      <button class="absolute right-0 top-1/2 -mr-4 md:-mr-8 transform -translate-y-1/2 bg-purple-600 hover:bg-purple-700 text-white rounded-full p-2 md:p-3 shadow-lg opacity-80 hover:opacity-100 transition-opacity duration-200 border-2 border-purple-400 dark:bg-purple-800 dark:hover:bg-purple-900 dark:border-purple-600 focus:outline-none focus:ring-4 focus:ring-purple-300/50 dark:focus:ring-purple-700/50">
        <svg class="w-6 h-6 md:w-8 md:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
        </svg>
      </button>

    </div>
  </div>

  <!-- Example Trigger Image (Click this to trigger the lightbox visually here) -->
  <div class="relative group w-64 md:w-80 lg:w-96 transform hover:scale-105 transition-transform duration-300 ease-in-out cursor-pointer" onclick="document.getElementById('lightbox-overlay').classList.add('opacity-100', 'pointer-events-auto'); document.getElementById('lightbox-content').classList.remove('scale-95', 'opacity-0'); document.getElementById('lightbox-content').classList.add('scale-100', 'opacity-100');">
    <div class="relative p-2 md:p-3 bg-gradient-to-br from-violet-700 to-purple-900 rounded-xl shadow-2xl dark:from-violet-900 dark:to-purple-950 transform rotate-x-6 rotate-y-3 skew-x-1 skew-y-1 group-hover:rotate-x-3 group-hover:rotate-y-1 group-hover:skew-x-0.5 group-hover:skew-y-0.5 transition-all duration-300 ease-out">
      <!-- Inner pseudo-3D container -->
      <div class="p-1.5 md:p-2 bg-gradient-to-br from-purple-500/30 to-violet-900/30 rounded-lg transform rotate-x-6 rotate-y-3 skew-x-1 skew-y-1 shadow-lg dark:from-purple-800/30 dark:to-violet-950/30 backdrop-blur-sm group-hover:rotate-x-3 group-hover:rotate-y-1 group-hover:skew-x-0.5 group-hover:skew-y-0.5 transition-all duration-300 ease-out">
        <div class="p-1.5 md:p-2 bg-gradient-to-br from-violet-600/30 to-purple-800/30 rounded-md transform rotate-x-3 rotate-y-1 skew-x-0.5 skew-y-0.5 shadow-md dark:from-violet-800/30 dark:to-purple-900/30 backdrop-blur-sm group-hover:rotate-x-0 group-hover:rotate-y-0 group-hover:skew-x-0 group-hover:skew-y-0 transition-all duration-300 ease-out">
          <img src="https://picsum.photos/300/200" alt="Thumbnail" class="w-full h-auto object-cover rounded-lg shadow-xl border-2 border-purple-400 dark:border-violet-600">
          <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
    <p class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-sm text-purple-800 dark:text-purple-300 shadow-text transform -rotate-1 skew-x-1 group-hover:-rotate-0 group-hover:skew-x-0 transition-all duration-300 ease-out">Click to Enlarge</p>
  </div>

  <!-- Simple toggle for dark mode (for demo purposes) -->
  <button onclick="document.documentElement.classList.toggle('dark')" class="absolute bottom-4 right-4 bg-purple-600 text-white px-4 py-2 rounded-full shadow-lg hover:bg-purple-700 transition-colors duration-300 dark:bg-violet-800 dark:hover:bg-violet-900">
    Toggle Dark Mode
  </button>

  <!-- Inline script for demonstration. In a real app, use external JS. -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const lightboxOverlay = document.getElementById('lightbox-overlay');
      const lightboxContent = document.getElementById('lightbox-content');

      // Close lightbox when clicking outside the content or on the close button
      lightboxOverlay.addEventListener('click', (event) => {
        if (event.target === lightboxOverlay || event.target.closest('button')) {
          lightboxContent.classList.remove('scale-100', 'opacity-100');
          lightboxContent.classList.add('scale-95', 'opacity-0');
          lightboxOverlay.classList.remove('opacity-100', 'pointer-events-auto');
        }
      });

       // Close lightbox with ESC key
      document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && lightboxOverlay.classList.contains('opacity-100')) {
          lightboxContent.classList.remove('scale-100', 'opacity-100');
          lightboxContent.classList.add('scale-95', 'opacity-0');
          lightboxOverlay.classList.remove('opacity-100', 'pointer-events-auto');
        }
      });
    });
  </script>

</div>