Art Deco Session Timeout Alarm

<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-70 dark:bg-black dark:bg-opacity-80 font-serif">
  <div class="relative w-full max-w-md mx-auto overflow-hidden text-center bg-gradient-to-br from-amber-50 to-orange-100 dark:from-stone-900 dark:to-stone-800 rounded-lg shadow-xl border-4 border-amber-300 dark:border-amber-700 transform transition-all duration-300 ease-in-out hover:scale-[1.01]">
    <!-- Art Deco Top Border Pattern -->
    <div class="absolute top-0 left-0 right-0 h-6 bg-gradient-to-r from-amber-400 to-yellow-500 dark:from-stone-700 dark:to-stone-600 flex items-center justify-center overflow-hidden">
      <div class="flex w-full justify-around">
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45 hidden sm:block" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45 hidden md:block" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
      </div>
    </div>

    <div class="p-8 pb-6 pt-12 relative">
      <h2 class="text-3xl sm:text-4xl font-bold mb-4 text-amber-900 dark:text-amber-200 tracking-wide leading-tight drop-shadow-md">
        Session Expiring Soon!
      </h2>
      <p class="text-lg sm:text-xl text-stone-700 dark:text-stone-300 mb-6 leading-relaxed">
        Your session will end in <strong class="text-amber-800 dark:text-amber-400">2:00</strong>.
        Do you want to continue watching?
      </p>

      <!-- Geometric Separator -->
      <div class="w-full h-px bg-amber-300 dark:bg-stone-700 my-6 relative">
        <div class="absolute -top-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-amber-400 dark:bg-stone-600 transform rotate-45 border border-amber-500 dark:border-stone-500"></div>
      </div>

      <div class="flex flex-col sm:flex-row justify-center gap-4">
        <button class="px-8 py-3 rounded-full bg-amber-500 hover:bg-amber-600 text-white font-semibold text-lg shadow-lg 
                       transition duration-300 ease-in-out transform hover:scale-105 
                       dark:bg-amber-600 dark:hover:bg-amber-700 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-800">
          Continue Session
        </button>
        <button class="px-8 py-3 rounded-full border-2 border-amber-500 hover:border-amber-600 text-amber-700 font-semibold text-lg shadow-lg 
                       transition duration-300 ease-in-out transform hover:scale-105 
                       dark:border-stone-500 dark:text-stone-200 dark:hover:border-stone-400 dark:hover:text-stone-100 dark:bg-transparent focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-800">
          Log Out
        </button>
      </div>
    </div>

    <!-- Art Deco Bottom Border Pattern -->
    <div class="absolute bottom-0 left-0 right-0 h-6 bg-gradient-to-r from-yellow-500 to-amber-400 dark:from-stone-600 dark:to-stone-700 flex items-center justify-center overflow-hidden">
      <div class="flex w-full justify-around">
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45 hidden sm:block" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45 hidden md:block" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
      </div>
    </div>
  </div>
</div>