<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

    <!-- Priority 6: SEO & Lighthouse meta tags -->
    <title>CinCin — AI Tasting Game</title>
    <meta name="description" content="Scan any bottle. Play the AI-powered blind tasting game. Track your palate. Compete with friends." />
    <meta name="theme-color" content="#0A0A0A" />
    <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="CinCin" />

    <!-- Priority 6: Preconnect to critical origins (reduces DNS/TLS latency) -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

    <!-- Priority 6: Preload critical font (display font used in hero/nav) -->
    <link
      rel="preload"
      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
      as="style"
    />

    <!-- Favicons -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

    <!-- Priority 6: Critical inline CSS for above-the-fold rendering
         Prevents FOUC and gives Lighthouse a styled FCP -->
    <style>
      body {
        margin: 0;
        padding: 0;
        background: #0A0A0A;
        color: #CCCCCC;
        font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        -webkit-font-smoothing: antialiased;
        min-height: 100dvh;
        overscroll-behavior: none;
      }
      #root {
        min-height: 100dvh;
      }
      /* Initial loading state before React hydrates */
      .cin-initial-loader {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100dvh;
        background: #0A0A0A;
      }
      .cin-initial-loader .spinner {
        width: 32px;
        height: 32px;
        border: 2px solid rgba(34,211,238,0.3);
        border-top-color: #22D3EE;
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
      }
      @keyframes spin { to { transform: rotate(360deg); } }
    </style>
    <script type="module" crossorigin src="/assets/index-BsODN_zO.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-CUY5zfj1.css">
  <link rel="manifest" href="/manifest.webmanifest"><script id="vite-plugin-pwa:register-sw" src="/registerSW.js"></script></head>
  <body>
    <!-- Priority 6: Skip-to-content link for keyboard/screen reader users -->
    <a href="#main-content" class="cin-skip-link">Skip to content</a>

    <div id="root">
      <!-- Priority 6: Visible content before JS loads (improves FCP) -->
      <div class="cin-initial-loader" aria-label="Loading CinCin">
        <div class="spinner"></div>
      </div>
    </div>

    <!-- Priority 6: Noscript fallback (Lighthouse Best Practices) -->
    <noscript>
      <div style="display:flex;align-items:center;justify-content:center;min-height:100vh;background:#0A0A0A;color:#CCCCCC;font-family:sans-serif;text-align:center;padding:24px;">
        <div>
          <h1 style="color:#22D3EE;font-size:24px;margin-bottom:8px;">CinCin</h1>
          <p>JavaScript is required to run CinCin. Please enable JavaScript in your browser settings.</p>
        </div>
      </div>
    </noscript>

  </body>
</html>
