<!doctype html>
<html lang="en" data-theme="dark">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <meta name="robots" content="<%= import.meta.env.VITE_ROBOTS_META %>" />
    
    <!-- Mobile optimization -->
    <meta name="theme-color" content="#030712" media="(prefers-color-scheme: dark)" />
    <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json" />
    
    <!-- iOS PWA Meta Tags -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="Xdares" />
    
    <!-- iOS Icons -->
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="apple-touch-icon" sizes="192x192" href="/android-chrome-192x192.png" />
    <link rel="apple-touch-icon" sizes="512x512" href="/android-chrome-512x512.png" />
    
    <!-- Preconnect for performance -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://sensible-akita.10web.me">
    <link rel="dns-prefetch" href="https://sensible-akita.10web.me">
    
    <!-- Preload critical resources for LCP - conditionally loaded via JS -->
    <script>
      // Only preload welcome image on landing pages to avoid unused preload warning
      if (window.location.pathname === '/' || window.location.pathname === '/landing') {
        const link = document.createElement('link');
        link.rel = 'preload';
        link.href = '/welcome-bg-400-poster.webp';
        link.as = 'image';
        link.type = 'image/webp';
        document.head.appendChild(link);
      }
    </script>
    
    <!-- EXPANDED Critical CSS inline for LCP optimization -->
    <style>
      /* Reset and base styles */
      *, ::before, ::after { 
        box-sizing: border-box; 
        border-width: 0; 
        border-style: solid; 
        border-color: #e5e7eb; 
      }
      html { 
        line-height: 1.5; 
        -webkit-text-size-adjust: 100%; 
        -moz-tab-size: 4; 
        -o-tab-size: 4; 
           tab-size: 4; 
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; 
      }
      body { 
        margin: 0; 
        line-height: inherit; 
        background-color: #030712; 
        color: #ffffff; 
      }
      
      /* Critical layout classes */
      .relative { position: relative; }
      .absolute { position: absolute; }
      .inset-0 { top: 0px; right: 0px; bottom: 0px; left: 0px; }
      .-z-10 { z-index: -10; }
      .flex { display: flex; }
      .inline-flex { display: inline-flex; }
      .min-h-screen { min-height: 100vh; }
      .w-full { width: 100%; }
      .h-full { height: 100%; }
      .h-12 { height: 3rem; }
      .max-w-xl { max-width: 36rem; }
      .flex-col { flex-direction: column; }
      .items-center { align-items: center; }
      .justify-center { justify-content: center; }
      .gap-4 { gap: 1rem; }
      .overflow-hidden { overflow: hidden; }
      .rounded-lg { border-radius: 0.5rem; }
      .px-4 { padding-left: 1rem; padding-right: 1rem; }
      .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
      .py-20 { padding-top: 5rem; padding-bottom: 5rem; }
      .pt-28 { padding-top: 7rem; }
      .mb-6 { margin-bottom: 1.5rem; }
      .mb-8 { margin-bottom: 2rem; }
      .mx-auto { margin-left: auto; margin-right: auto; }
      
      /* Typography */
      .text-center { text-align: center; }
      .text-6xl { font-size: 3.75rem; line-height: 1; }
      .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
      .font-medium { font-weight: 500; }
      .font-extrabold { font-weight: 800; }
      .text-lightCharcoal { color: #374151; }
      .text-black { color: #000000; }
      .text-transparent { color: transparent; }
      .text-brand-text-60 { color: rgba(255, 255, 255, 0.6); }
      .text-pink-500 { color: #ec4899; }
      .text-white { color: #ffffff; }
      
      /* Gradients and backgrounds */
      .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
      .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
      .from-pink-500 { 
        --tw-gradient-from: #ec4899; 
        --tw-gradient-to: rgb(236 72 153 / 0); 
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); 
      }
      .to-yellow-400 { --tw-gradient-to: #facc15; }
      .hover\:from-pink-600:hover { --tw-gradient-from: #db2777; }
      .hover\:to-yellow-500:hover { --tw-gradient-to: #eab308; }
      .from-brand-surface-1 { 
        --tw-gradient-from: #1f2937; 
        --tw-gradient-to: rgb(31 41 55 / 0); 
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); 
      }
      .to-black { --tw-gradient-to: #000000; }
      .bg-clip-text { 
        -webkit-background-clip: text; 
        background-clip: text; 
      }
      
      /* Borders */
      .border { border-width: 1px; }
      .border-pink-500 { border-color: #ec4899; }
      .hover\:bg-pink-500:hover { background-color: #ec4899; }
      .hover\:text-white:hover { color: #ffffff; }
      
      /* Focus and transitions */
      .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
      .focus\:ring-2:focus { 
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); 
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); 
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); 
      }
      .focus\:ring-offset-2:focus { --tw-ring-offset-width: 2px; }
      .transition-all { 
        transition-property: all; 
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
        transition-duration: 150ms; 
      }
      .duration-200 { transition-duration: 200ms; }
      .transform { 
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); 
      }
      .hover\:scale-105:hover { --tw-scale-x: 1.05; --tw-scale-y: 1.05; }
      
      /* Object fit for video/images */
      .object-cover { -o-object-fit: cover; object-fit: cover; }
      
      /* Responsive */
      @media (min-width: 640px) {
        .sm\:flex-row { flex-direction: row; }
      }
      @media (min-width: 768px) {
        .md\:text-7xl { font-size: 4.5rem; line-height: 1; }
      }
      
      /* Fallback font for faster rendering */
      h1, .font-heading { font-family: system-ui, -apple-system, sans-serif; }
      
      /* Loading state to prevent FOUC */
      #root { opacity: 0; transition: opacity 0.3s ease-in-out; }
      #root.loaded { opacity: 1; }
    </style>
    
    <!-- Load main CSS non-blocking with media trick -->
    <noscript></noscript>
    
    <!-- Load theme CSS non-blocking -->
    <noscript></noscript>
    
    <!-- Optimize font loading -->
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript>
      <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@600;700&display=swap" rel="stylesheet">
    </noscript>
    
    <!-- Defer Material Icons to prevent render blocking -->
    <link rel="preload" href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript>
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap" rel="stylesheet">
    </noscript>
    <link rel="preload" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript>
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined&display=swap" rel="stylesheet">
    </noscript>
    
    <!-- SEO and Discovery -->
    <link rel="sitemap" type="application/xml" href="/sitemap.xml">
    
    <!-- Favicons -->
    <link rel="icon" href="/favicon.ico" sizes="any">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    
    <!-- Enhanced Meta Tags -->
    <meta name="theme-color" content="#ffffff">
    <meta name="author" content="Xdares">
    <meta name="language" content="en">
    <meta name="coverage" content="Worldwide">
    <meta name="distribution" content="Global">
    <meta name="rating" content="General">
    <meta name="revisit-after" content="7 days">
    
    <!-- Primary Meta Tags -->
    <meta name="description" content="Join 1000+ creators earning money through fun adult dares and challenges on Xdares. Instant payouts, verified 18+ community, safe platform. Start earning today - free signup!">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:title" content="Xdares - Dare. Flirt. Earn. Repeat." />
    <meta property="og:description" content="Join 1000+ creators earning money through fun adult dares and challenges. Instant payouts, verified 18+ community, safe platform. Start earning today!" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://xdares.com" />
    <meta property="og:image" content="https://xdares.com/xdares-logo-dark-rectangle.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:site_name" content="Xdares" />
    
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Xdares - Dare. Flirt. Earn. Repeat." />
    <meta name="twitter:description" content="Join 1000+ creators earning money through fun adult dares and challenges. Instant payouts, verified 18+ community, safe platform. Start earning today!" />
    <meta name="twitter:image" content="https://xdares.com/xdares-logo-dark-rectangle.png" />
    <meta name="twitter:site" content="@YourTwitterHandle">
    <meta name="twitter:creator" content="@YourTwitterHandle">
    
    <!-- App/Mobile optimization -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://xdares.com" />
    
    <!-- Enhanced Structured Data -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "name": "Xdares",
        "url": "https://xdares.com",
        "description": "Join 1000+ creators earning money through fun adult dares and challenges. Instant payouts, verified 18+ community, safe platform.",
        "potentialAction": {
          "@type": "SearchAction",
          "target": "https://xdares.com/app/search-users?q={search_term_string}",
          "query-input": "required name=search_term_string"
        },
        "sameAs": [
          "https://twitter.com/xdares_official",
          "https://instagram.com/xdares_official"
        ],
        "contactPoint": {
          "@type": "ContactPoint",
          "contactType": "customer service",
          "email": "support@xdares.com"
        },
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD",
          "description": "Free creator platform with instant payouts"
        }
      }
    </script>
    
    <!-- FAQ Structured Data -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": [
          {
            "@type": "Question",
            "name": "Is Xdares free to join?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes, Xdares is completely free to join. You can sign up, create your profile, and start earning money through dares without any upfront costs."
            }
          },
          {
            "@type": "Question", 
            "name": "How do I get paid on Xdares?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Xdares offers instant payouts through multiple payment methods. Once you complete a dare and it's verified, you receive payment within minutes to your preferred payment method."
            }
          },
          {
            "@type": "Question",
            "name": "Is Xdares safe and secure?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes, Xdares prioritizes user safety with age verification, content moderation, privacy controls, and secure payment processing. Our platform is designed for verified 18+ users only."
            }
          },
          {
            "@type": "Question",
            "name": "What types of dares can I do on Xdares?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Xdares offers a variety of fun, creative challenges ranging from dance dares to creative content challenges. All dares are designed to be entertaining while respecting community guidelines."
            }
          }
        ]
      }
    </script>
    
    <!-- Social Media Crawler Detection -->
    <script>
      // This script checks for social media crawlers and redirects them to an
      // Open Graph (OG) version of the page. This is necessary for social
      // media sharing to work correctly. It is not intended to block
      // legitimate users or QA testers.
      const ua = navigator.userAgent.toLowerCase();
      const isSocialCrawler = /facebookexternalhit|facebot|linkedinbot|slackbot|twitterbot|discordbot|pinterest/.test(ua);
      const pathMatch = window.location.pathname.match(/^\/dare\/([^\/]+)/);

      if (isSocialCrawler && pathMatch) {
        window.location.href = `/og/dare/${pathMatch[1]}`;
      }
    </script>
    
    <!-- Critical path optimization script -->
    <script>
      // Show content once CSS is loaded
      window.addEventListener('DOMContentLoaded', function() {
        document.getElementById('root').classList.add('loaded');
      });
    </script>
    <script type="module" crossorigin src="/assets/main-D07u9xb9.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-vendor-C2zyHabd.js">
    <link rel="modulepreload" crossorigin href="/assets/firebase-DE4sLGwQ.js">
    <link rel="modulepreload" crossorigin href="/assets/ui-libs-a-SMnfpl.js">
    <link rel="stylesheet" crossorigin href="/assets/main-BgIl4Mgl.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
