Cyberpunk-Sportmedien einbetten

<div class="font-sans bg-gray-950 text-emerald-300 min-h-screen p-4 sm:p-8 dark:bg-gray-900 overflow-hidden">
  <div class="max-w-7xl mx-auto bg-gray-900 rounded-none shadow-neon-emerald border-t-2 border-l-2 border-emerald-500 overflow-hidden dark:bg-gray-800 dark:border-emerald-700 relative">
    <!-- Glitch effect pseudo-element -->
    <div class="absolute inset-0 z-0 pointer-events-none after:content-[''] after:absolute after:inset-0 after:bg-gradient-to-br after:from-emerald-900/50 after:to-transparent after:animate-flicker">
    </div>
    
    <!-- Header -->
    <div class="relative z-10 px-6 py-4 border-b border-emerald-700/50 flex items-center justify-between">
      <h2 class="text-2xl sm:text-3xl font-bold tracking-wider uppercase text-emerald-400 drop-shadow-md shadow-emerald-500/50">
        <span class="block transform -skew-x-12">Live Stream_</span>
        <span class="block text-xs sm:text-sm text-emerald-500 uppercase ml-2">// Cyber-Arena</span>
      </h2>
      <div class="flex space-x-2">
        <button class="px-3 py-1 bg-emerald-700 hover:bg-emerald-600 text-white text-xs font-semibold uppercase rounded-sm transition-colors duration-200 border border-emerald-500 shadow-sm shadow-emerald-500/30">RECORD</button>
        <button class="px-3 py-1 bg-gray-800 hover:bg-gray-700 text-emerald-300 text-xs font-semibold uppercase rounded-sm border border-emerald-700 shadow-sm shadow-emerald-700/30">VIEW ALL</button>
      </div>
    </div>

    <div class="relative z-10 grid grid-cols-1 lg:grid-cols-3 gap-0">
      <!-- Main Video Player Section -->
      <div class="lg:col-span-2 bg-black overflow-hidden relative group">
        <div class="aspect-video w-full bg-gray-900 flex items-center justify-center">
          <!-- Placeholder for video player -->
          <img src="https://picsum.photos/1280/720?random=1" alt="Live Sports Event" class="w-full h-full object-cover opacity-80 group-hover:scale-105 transition-transform duration-500 ease-in-out">
          <div class="absolute inset-0 flex items-center justify-center p-4">
            <div class="bg-emerald-800/60 backdrop-blur-sm p-4 rounded-lg border border-emerald-600 text-center text-white/90 shadow-lg shadow-emerald-500/40">
              <svg class="w-16 h-16 mx-auto mb-2 text-emerald-300 animate-pulse" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
              <p class="text-sm sm:text-lg font-bold uppercase tracking-wide">STREAM PENDING: ARENA INITIALIZING...</p>
              <p class="text-xs text-emerald-200 mt-1">Estimated Start: 13:00 GMT+1</p>
            </div>
          </div>
        </div>
        <!-- Player Controls (simple placeholders) -->
        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-gray-900 to-transparent p-4 flex items-center justify-between text-emerald-300 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <div class="flex items-center space-x-2">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            <span>00:15 / 23:45</span>
          </div>
          <div class="flex items-center space-x-2">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 5H6a2 2 0 00-2 2v2a2 2 0 002 2h1v4a2 2 0 002 2h2a2 2 0 002-2v-4h1a2 2 0 002-2V7a2 2 0 00-2-2h-3zm-1 9v-3h-3V7h7v4h-3v3z"></path></svg>
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.552 6.858 2 12 2c5.142 0 10.268 3.552 11.542 8-.268.587-.542 1.25-.8 1.9-.3-.55-.6-1.127-.9-1.7zm13.197-2.316l-3.3 3.3a1 1 0 01-1.414 0l-3.3-3.3a1 1 0 011.414-1.414L10 8.586l2.096-2.096a1 1 0 011.414 1.414z" clip-rule="evenodd"></path></svg>
          </div>
        </div>
      </div>

      <!-- Information / Chat Sidebar -->
      <div class="lg:col-span-1 border-t-2 border-emerald-700/50 lg:border-t-0 lg:border-l-2 bg-gray-900 flex flex-col dark:bg-gray-800">
        <!-- Tabs for Info / Chat -->
        <div class="flex text-sm sm:text-base border-b-2 border-emerald-700/50">
          <button class="flex-1 py-3 px-2 text-center uppercase tracking-wide font-bold text-emerald-300 border-r border-emerald-700/50 hover:bg-emerald-900/40 dark:hover:bg-emerald-700/40 transition-colors duration-200 active-tab">
            OVERVIEW
          </button>
          <button class="flex-1 py-3 px-2 text-center uppercase tracking-wide font-bold text-emerald-500 hover:bg-emerald-900/40 dark:hover:bg-emerald-700/40 transition-colors duration-200">
            LIVE CHAT
          </button>
        </div>

        <!-- Content Area -->
        <div class="flex-1 p-4 sm:p-6 overflow-y-auto space-y-4 max-h-[400px] lg:max-h-[unset]">
          <!-- Overview Content -->
          <div class="space-y-4">
            <div>
              <h3 class="text-xl font-bold text-emerald-400 mb-2 uppercase border-b border-emerald-700/50 pb-1">Event Details_</h3>
              <p class="text-emerald-200 text-sm leading-relaxed tracking-tight">
                Witness the ultimate showdown: 'Gravity Gauntlet' Season Finals. Teams 'Neon Raptors' and 'Circuit Breakers' clash in a zero-G tactical combat for championship supremacy. 
                Expected duration: 2 hours. High-tension action guaranteed.
              </p>
            </div>

            <div>
              <h3 class="text-xl font-bold text-emerald-400 mb-2 uppercase border-b border-emerald-700/50 pb-1">Key Players_</h3>
              <div class="space-y-3">
                <div class="flex items-center space-x-3 bg-gray-800 p-2 rounded-sm border border-emerald-800/50 shadow-inner shadow-emerald-900/20">
                  <img class="w-10 h-10 rounded-full border-2 border-emerald-500" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Player Avatar">
                  <div>
                    <p class="font-semibold text-emerald-300">SYNTAX_ERROR</p>
                    <p class="text-emerald-400 text-xs">Neon Raptors - Striker</p>
                  </div>
                </div>
                <div class="flex items-center space-x-3 bg-gray-800 p-2 rounded-sm border border-emerald-800/50 shadow-inner shadow-emerald-900/20">
                  <img class="w-10 h-10 rounded-full border-2 border-emerald-500" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Player Avatar">
                  <div>
                    <p class="font-semibold text-emerald-300">GHOST_PRØPHET</p>
                    <p class="text-emerald-400 text-xs">Circuit Breakers - Architect</p>
                  </div>
                </div>
              </div>
            </div>

            <div>
              <h3 class="text-xl font-bold text-emerald-400 mb-2 uppercase border-b border-emerald-700/50 pb-1">Stats & Analytics_</h3>
              <ul class="text-emerald-200 text-sm space-y-1">
                <li class="flex justify-between"><span>AVG. APM:</span> <span class="text-emerald-300">320</span></li>
                <li class="flex justify-between"><span>K/D Ratio:</span> <span class="text-emerald-300">1.87</span></li>
                <li class="flex justify-between"><span>ACCURACY:</span> <span class="text-emerald-300">89.2%</span></li>
              </ul>
            </div>
          </div>
        </div>

        <!-- Ad/Sponsor Section -->
        <div class="p-4 sm:p-6 border-t-2 border-emerald-700/50 bg-gray-950 dark:bg-gray-850">
          <h3 class="text-lg font-bold text-emerald-500 mb-2 uppercase">Sponsored By_</h3>
          <div class="flex items-center justify-center bg-gray-800 h-20 rounded-sm border border-emerald-700/50 shadow-inner shadow-emerald-900/20">
            <span class="text-emerald-600 text-3xl font-mono opacity-80 animate-pulse">NEXUS_TECH</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Footer (simple for status) -->
    <div class="relative z-10 px-6 py-3 bg-gray-950 border-t-2 border-emerald-700/50 text-emerald-500 flex items-center justify-end text-xs sm:text-sm uppercase tracking-wide dark:bg-gray-850">
      <span class="block transform -skew-x-6 text-emerald-400">STATUS: </span>
      <span class="ml-1 text-emerald-300 animate-pulse">_ONLINE</span>
    </div>
  </div>
</div>

<style>
/* Define the flicker animation for the pseudo-element */
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    filter: brightness(1) opacity(0);
  }
  20%, 24%, 55% {
    filter: brightness(1.5) opacity(0.2);
  }
}

.shadow-neon-emerald {
  box-shadow: 0 0 15px rgba(52, 211, 153, 0.6), /* emerald-300 */
              0 0 30px rgba(16, 185, 129, 0.4), /* emerald-500 */
              0 0 45px rgba(5, 150, 105, 0.2);  /* emerald-700 */
}

/* Custom scrollbar for Webkit browsers */
.overflow-y-auto::-webkit-scrollbar {
  width: 8px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: #111827; /* gray-900 */
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background: #065F46; /* emerald-700 */
  border-radius: 4px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: #047857; /* emerald-600 */
}

/* Specific glitch effect on header for more subtle animation */
.drop-shadow-md {
  text-shadow: 0 0 5px currentColor,
               0 0 10px currentColor,
               0 0 15px currentColor;
  animation: text-glitch 1s infinite alternate;
}

@keyframes text-glitch {
  0% { transform: translate(1px, 1px) skewX(0); }
  20% { transform: translate(-1px, 2px) skewX(-2deg); }
  40% { transform: translate(-2px, -1px) skewX(0); }
  60% { transform: translate(2px, 1px) skewX(2deg); }
  80% { transform: translate(-1px, -2px) skewX(0); }
  100% { transform: translate(1px, 1px) skewX(-1deg); }
}

@media (prefers-color-scheme: dark) {
  .dark\:bg-gray-900 {
    background-color: #111827 !important; /* Tailwind's gray-900 */
  }
  .dark\:border-emerald-700 {
    border-color: #047857 !important; /* Tailwind's emerald-700 */
  }
  .dark\:bg-gray-800 {
    background-color: #1F2937 !important; /* Tailwind's gray-800 */
  }
  .dark\:hover\:bg-emerald-700\/40:hover {
    background-color: rgba(4, 120, 87, 0.4) !important; /* emerald-700/40 */
  }
  .dark\:bg-gray-850 {
    background-color: #18202b !important; /* Slightly lighter than 900 for distinction */
  }
}
</style>