<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <!--
      Server-rendered head is brand-agnostic — first paint on any route
      (including the root splash) reads as the whole NarutoDB brand,
      not either publisher in particular. Every route then swaps its
      own <title>, meta description, canonical, and OG tags at hydrate
      time via useDocumentHead. Kayou-scoped pages replace this
      description with their Kayou-forward copy for the "kayou naruto"
      SEO signal; Bandai pages replace with jade-side copy + noindex.
    -->
    <title>NarutoDB · the Naruto card database</title>
    <meta
      name="description"
      content="NarutoDB — the Naruto card database. Two experiences under one catalog: the Kayou collectibles side and the 2027 Bandai TCG. Real market data, hand-verified sets, community vault tracking."
    />

    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="NarutoDB" />
    <meta property="og:url" content="https://narutodb.com/" />
    <meta property="og:title" content="NarutoDB · the Naruto card database" />
    <meta
      property="og:description"
      content="Every Naruto card, two experiences. The Kayou collectibles catalog is hand-verified and live; the Bandai TCG arrives summer 2027. One vault, both catalogs."
    />
    <meta property="og:image" content="https://narutodb.com/og-image.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="920" />
    <meta property="og:image:alt" content="NarutoDB — Every Naruto card. Two experiences. One database." />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="NarutoDB · the Naruto card database" />
    <meta
      name="twitter:description"
      content="Every Naruto card, two experiences. Kayou collectibles + 2027 Bandai TCG. One vault, both catalogs."
    />
    <meta name="twitter:image" content="https://narutodb.com/og-image.png" />

    <meta name="theme-color" content="#0f0b0a" />
    <link rel="manifest" href="/manifest.json" />
    <link rel="alternate" type="application/rss+xml" title="NarutoDB Blog" href="/blog/feed.xml" />

    <link rel="preconnect" href="https://api.narutodb.com" crossorigin />
    <link rel="preconnect" href="https://cdn.narutodb.com" crossorigin />
    <link rel="dns-prefetch" href="https://api.narutodb.com" />
    <link rel="dns-prefetch" href="https://cdn.narutodb.com" />
    <!--
      Preload the home page's LCP element — the featured "throne" card
      (NRCCNA-◇XR-007L5) always appears in the hero via a deterministic
      pick in Home.tsx (see THRONE_CN). Firing the fetch during HTML
      parse instead of after React hydrates + resolves the heroPool
      API call knocks ~1s off mobile LCP.
    -->
    <link
      rel="preload"
      as="image"
      href="https://cdn.narutodb.com/storage/cards/official/NRCCNA-%E2%97%87XR-007L5-thumb.png"
      fetchpriority="high"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <!--
      Fonts load off the critical render path: preload the stylesheet, then flip
      it to rel="stylesheet" on load. Combined with display=swap, text paints
      immediately in the fallback face instead of blocking first paint on the
      Google Fonts request. <noscript> covers no-JS clients.
    -->
    <link
      rel="preload"
      as="style"
      href="https://fonts.googleapis.com/css2?family=Bowlby+One&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Shippori+Mincho:wght@700;900&display=swap"
      onload="this.onload=null;this.rel='stylesheet'"
    />
    <noscript>
      <link
        href="https://fonts.googleapis.com/css2?family=Bowlby+One&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Shippori+Mincho:wght@700;900&display=swap"
        rel="stylesheet"
      />
    </noscript>

    <!-- Google Ads conversion tracking (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=AW-18192322165"></script>
    <script>
      window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}
      gtag('js',new Date());gtag('config','AW-18192322165');
    </script>

    <!-- Reddit Pixel — fires PageVisit on load; SignUp / Purchase fired
         from app code (see lib/redditPixel.ts). -->
    <script>
      !function(w,d){if(!w.rdt){var p=w.rdt=function(){p.sendEvent?p.sendEvent.apply(p,arguments):p.callQueue.push(arguments)};p.callQueue=[];var t=d.createElement("script");t.src="https://www.redditstatic.com/ads/pixel.js?pixel_id=a2_j2unlfgzpg7q",t.async=!0;var s=d.getElementsByTagName("script")[0];s.parentNode.insertBefore(t,s)}}(window,document);
      rdt('init','a2_j2unlfgzpg7q');
      rdt('track','PageVisit');
    </script>

    <script type="module" crossorigin src="/assets/index-BzJnteuO.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-BV68bqPJ.js">
    <link rel="modulepreload" crossorigin href="/assets/chunk-5KNZJZUH-Bj0-DAK2.js">
    <link rel="modulepreload" crossorigin href="/assets/jsx-runtime-BCxNzY32.js">
    <link rel="modulepreload" crossorigin href="/assets/Avatar-Bfmkg69y.js">
    <link rel="modulepreload" crossorigin href="/assets/auth-DjBm19F0.js">
    <link rel="modulepreload" crossorigin href="/assets/navTracking-B7u02axi.js">
    <link rel="modulepreload" crossorigin href="/assets/redditPixel-d_Osdrmo.js">
    <link rel="modulepreload" crossorigin href="/assets/toast-zR8MjxG2.js">
    <link rel="modulepreload" crossorigin href="/assets/AuthControls-EYW6vpTs.js">
    <link rel="modulepreload" crossorigin href="/assets/authPrompt-D5_6nXQY.js">
    <link rel="modulepreload" crossorigin href="/assets/achievements-BLx_WJoW.js">
    <link rel="modulepreload" crossorigin href="/assets/collection--CJKUDbh.js">
    <link rel="modulepreload" crossorigin href="/assets/notifications-B_yfQInK.js">
    <link rel="modulepreload" crossorigin href="/assets/UpdateAvailableBanner-t6BZOISC.js">
    <link rel="modulepreload" crossorigin href="/assets/Mascot-hehFwM2g.js">
    <link rel="modulepreload" crossorigin href="/assets/api-CRspSzUR.js">
    <link rel="stylesheet" crossorigin href="/assets/index-DDQpUWp1.css">
  </head>
  <body>
    <div class="paper-grain"></div>
    <div id="root"></div>
  </body>
</html>
