<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <script>
      // Capture Android Chrome's native install prompt as early as possible
      window.addEventListener('beforeinstallprompt', function(e) {
        e.preventDefault();
        window.__deferredInstallPrompt = e;
      });
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Favicons -->
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./favicons/favicon-32x32.png"
    />

    <!-- Apple Touch Icon (iOS homescreen) -->
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="./favicons/icon-180.png"
    />

    <link rel="manifest" href="./manifest.json" />

    <link rel="canonical" href="https://kindahardgolf.com" />
    <link rel="sitemap" type="application/xml" href="https://kindahardgolf.com/sitemap.xml" />
    <link
      rel="preload"
      href="./fonts/Baloo2-VariableFont_wght.woff2"
      as="font"
      type="font/woff2"
      crossorigin="anonymous"
    />
    <link
      rel="preload"
      href="./fonts/Nunito-VariableFont_wght.woff2"
      as="font"
      type="font/woff2"
      crossorigin="anonymous"
    />
    <link
      rel="preload"
      href="./fonts/ComicNeue-Bold.woff2"
      as="font"
      type="font/woff2"
      crossorigin="anonymous"
    />
    
    <!-- Only preload truly critical resources needed for initial render -->
    <!-- Remove these preloads - they compete with JS bundle loading -->
    <!-- Icons will load fast enough when needed -->
    <style>
      /* Variable font definitions */
      @font-face {
        font-family: "Baloo2";
        src: url("fonts/Baloo2-VariableFont_wght.woff2") format("woff2");
        font-weight: 400 800;
        font-style: normal;
        font-display: swap;
      }

      @font-face {
        font-family: "Nunito";
        src: url("fonts/Nunito-VariableFont_wght.woff2") format("woff2");
        font-weight: 200 900;
        font-style: normal;
        font-display: swap;
      }

      /* Original Comic Neue font for homepage title */
      @font-face {
        font-family: "ComicNeue";
        src: url("fonts/ComicNeue-Bold.woff2") format("woff2");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
      }

      @font-face {
        font-family: "ComicNeue";
        src: url("fonts/ComicNeue-Regular.woff2") format("woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }

      /* Font family definitions for backwards compatibility */
      @font-face {
        font-family: "neue";
        src: url("fonts/Baloo2-VariableFont_wght.woff2") format("woff2");
        font-weight: 400 800;
        font-style: normal;
        font-display: swap;
      }

      /* Default font stacks */
      :root {
        --font-headers: "Baloo2", "Comic Neue", cursive, system-ui;
        --font-body: "Nunito", "Comic Neue", sans-serif, system-ui;
      }

      /* Base font family */
      body, html {
        font-family: var(--font-body);
      }

      /* Headers use Baloo 2 with letter spacing */
      h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-headers);
        letter-spacing: 1px;
      }

      /* Homepage title exception - uses original Comic Neue */
      #intro-title h1 {
        font-family: "ComicNeue", "Comic Neue", cursive, system-ui !important;
        letter-spacing: normal !important;
      }

      /* Ensure text is visible during font load */
      .font-loading h1, .font-loading h2, .font-loading p {
        visibility: visible !important;
      }
    </style>
    <link rel="icon" href="./favicons/favicon.ico" type="image/x-icon" />
    <title>Kinda Hard Golf - a challenging daily golf game</title>

    <meta
      name="description"
      content="A free daily golf game. Aim, shoot, and climb to the top in as few strokes as possible. Share your score and challenge friends."
    />

    <meta property="og:image:type" content="image/jpeg" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Kinda Hard Golf – Daily Golf Game" />
    <meta
      name="twitter:description"
      content="A fun and challenging golf game. Play a new hole daily!"
    />
    <meta name="twitter:image" content="https://kindahardgolf.com/hero.jpg" />

    <meta
      property="og:title"
      content="Kinda Hard Golf – Daily Golf Game"
    />
    <link rel="apple-touch-icon" href="./apple-touch-icon.png" />
    <meta
      property="og:site_name"
      content="Kinda Hard Golf"
    />

    <meta
      property="og:description"
      content="A free daily golf game — new hole every day. Aim, shoot, and climb to the top in as few strokes as possible."
    />
    <meta property="og:image" content="https://kindahardgolf.com/hero.jpg" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://kindahardgolf.com/" />
    <meta name="theme-color" content="#000000" />

    <meta
      name="keywords"
      content="daily web game, addictive browser game, free golf game, dle games, hard rage game, quick play game, fun daily challenge, golf platformer, browser-based game, one-level-a-day game, skill game, fun streamer game, wordle alternative, daily game against friends, physics game, addictive golf game, daily challenge game, ball physics game, frustrating game, challenging golf"
    />

    <meta name="author" content="James O'Halloran" />

    <script>
      const script = document.createElement('script');
      script.src = 'https://hb.vntsm.com/v4/live/vms/sites/kindahardgolf.com/index.js';
      script.async = true;
      document.head.appendChild(script);
    </script>
    
    <script>
        self.__VM = self.__VM || [];

        // Store placement references for cleanup
        window.prosperPlacements = {
          billboard: null,
          mobileBanner: null,
          mobileMpu: null,
          verticalSticky: false,
          horizontalSticky: null,
          mobileSticky: null
        };

        self.__VM.push(function (admanager, scope) {
            // Standard display placements
            window.prosperPlacements.billboard = scope.Config.get('billboard').display('slot-1');
            window.prosperPlacements.mobileBanner = scope.Config.get('mobile_banner').display('slot-2');

          if (window.innerHeight > 640 || (window.innerWidth >= 550 && window.innerHeight >= 510)) {
              window.prosperPlacements.mobileMpu = scope.Config.get('mobile_mpu').display('slot-3');
          }

            // Page session tracking for SPA
            scope.Instances.pageManager.on('navigated', () => {
                scope.Instances.pageManager.newPageSession(false);
                console.log('[PROSPER] New page session started');
            }, false);

          // Based on your layout, here are the responsive tags. The placement will change based on screen width.
          // With the mobile breakpoint set by default at max-width:1024px
        });
    </script>

    <script> 
     // Show ad blocker message
      function showThingyPreventerMessage() {
        console.log('Showing ad blocker message');
        const leftMessage = document.getElementById('left-thingyPreventer-message');
        const rightMessage = document.getElementById('right-thingyPreventer-message');
        
        if (leftMessage) {
          leftMessage.style.display = 'block';
          console.log('Left message shown');
        }
        if (rightMessage) {
          rightMessage.style.display = 'block';
          console.log('Right message shown');
        }
      }
      // setTimeout(() => {
      //   showThingyPreventerMessage();
      // }, 3000); // Show after 3 seconds
    </script>



    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "VideoGame",
        "name": "Kinda Hard Golf",
        "url": "https://kindahardgolf.com",
        "applicationCategory": "Game",
        "image": "https://kindahardgolf.com/hero.jpg",
        "operatingSystem": "Web",
        "author": {
          "@type": "Organization",
          "name": "Mighty Pebble Games",
          "url": "https://johalloran.dev"
        },
        "publisher": {
          "@type": "Organization",
          "name": "Mighty Pebble Games",
          "url": "https://johalloran.dev"
        },
        "gamePlatform": ["https://schema.org/WebApplication"],
        "inLanguage": "en",
        "genre": "Casual, Golf, Platformer",
        "keywords": "free browser games no download, daily morning game, casual golf game, bathroom break games, daily games, one level a day games, games to play with morning coffee, addictive browser game, fun physics game, wordle alternative, daily challenge, mini golf, mini golf online, free mini golf game, online golf game, free online golf, browser golf game, daily puzzle game, golf platformer, physics golf, free golf game",
        "description": "A free daily golf game — new hole every day. Aim, shoot, and climb to the top in as few strokes as possible.",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        },
        "playMode": "SinglePlayer",
        "datePublished": "2025-04-02",
        "dateModified": "2026-05-29"
      }
    </script>

    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": [
          {
            "@type": "Question",
            "name": "Is Kinda Hard Golf free?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes, Kinda Hard Golf is completely free to play in your browser — no download or account needed."
            }
          },
          {
            "@type": "Question",
            "name": "How do I play Kinda Hard Golf?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Aim and shoot your ball to reach the top of the hole in as few strokes as possible. Checkpoints are activated along the way. Stay away from hazards if you can help it."
            }
          },
          {
            "@type": "Question",
            "name": "How often does the level change?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "A brand new hole is published every day at midnight (EST). Everyone plays the same hole each day."
            }
          },
          {
            "@type": "Question",
            "name": "How is par calculated?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Par is calculated based on the average score of all players on that day's level. It changes throughout the day"
            }
          },
          {
            "@type": "Question",
            "name": "Can I make a daily level?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes! The game features a level editor. Once you finish a level, you can share it with friends, or submit it for consideration for a daily level."
            }
          }
        ]
      }
    </script>



    <script type="module" crossorigin src="./assets/main-BKveF2PY.js"></script>
    <link rel="modulepreload" crossorigin href="./assets/main-CUJ_v5tO.js">
    <link rel="stylesheet" crossorigin href="./assets/main-B6guoHDc.css">
  </head>
  <body>
    <img src="./hero.jpg" alt="Kinda Hard Golf - a challenging daily golf game" width="1200" height="630" style="display:none" loading="lazy" />
    <!-- Prosper Vertical Sticky Ads for wider screens -->
    <div id="left-vertical-sticky" class="sidebar-container left">
      <div class="thingyPreventer-message" id="left-thingyPreventer-message">
        I know ads are annoying, but it supports the game. Maybe consider whitelisting us with your Ad Blocker? 🙏
      </div>
    </div>
    <div id="right-vertical-sticky" class="sidebar-container right">
      <div class="thingyPreventer-message" id="right-thingyPreventer-message">
        I know ads are annoying, but it supports the game. Maybe consider whitelisting us with your Ad Blocker? 🙏
      </div>
    </div>
    
    <!-- Canvas Container -->
    <div id="canvas-container" class="shadow-2xl shadow-black/50">
      <!-- Game UI Container -->
      <div id="game-ui-container" ></div>
    </div>
    


    <!-- Fullscreen Start Screen -->
    <div
      id="start-game-screen"
      style="
        all: initial;
        position: fixed;
        z-index: 10;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        background: linear-gradient(to bottom right, #1f79cd, #4e99df);
        font-family: &quot;neue&quot;, sans-serif;
        text-align: center;
        padding: 2rem;
        padding-bottom: 100px;
        color: white;
        text-align: left;
      "
    >
      <a
        id="discord-link"
        href="https://discord.gg/ZcBf2FhcVH"
        target="_blank"
        style="
          position: absolute;
          top: 16px;
          left: 16px;
          z-index: 9999;
          display: flex;
          align-items: center;
          background-color: rgba(0, 0, 0, 0.6);
          padding: 8px 12px;
          border-radius: 20px;
          text-decoration: none;
          transition: background-color 0.2s ease-in-out;
        "
        onmouseover="this.style.backgroundColor='rgba(0, 0, 0, 0.8)'"
        onmouseout="this.style.backgroundColor='rgba(0, 0, 0, 0.6)'"
      >
        <img
          src="icons/discord.svg"
          alt="Discord"
          style="width: 20px; height: 20px;"
          id="discord-icon"
        />
        <span
          id="community-text"
          style="color: white; font-weight: bold; font-size: 14px"
          ></span
        >
      </a>

      <!-- Infuriating Mode Toggle -->
      <div
        id="infuriating-mode-container"
        style="
          position: absolute;
          bottom: 58px;
          left: 16px;
          z-index: 9999;
        "
      >
      <div
      id="infuriating-disclaimer"
      style="
        position: absolute;
        bottom: 100%;
        left: 0;
        margin-bottom: 4px;
        font-size: 0.7rem;
        color: #fecaca;
        background-color: rgba(0, 0, 0, 0.85);
        padding: 0.4rem 0.6rem;
        border-radius: 0.375rem;
        white-space: nowrap;
        display: none;
        z-index: 10000;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      "
    >
      🚨 Checkpoints disabled! (Good luck...)
    </div>
        <label
          for="infuriating-toggle"
          style="
            display: flex;
            align-items: center;
            cursor: pointer;
            background-color: rgba(0, 0, 0, 0.3);
            padding: 4px 8px;
            border-radius: 16px;
            transition: background-color 0.2s ease;
          "
          onmouseover="this.style.backgroundColor='rgba(0, 0, 0, 0.5)'"
          onmouseout="this.style.backgroundColor='rgba(0, 0, 0, 0.3)'"
        >
          <div style="position: relative; width: 32px; height: 16px">
            <input
              id="infuriating-toggle"
              type="checkbox"
              style="position: absolute; opacity: 0; width: 0; height: 0"
            />
            <div
              id="toggle-bg"
              style="
                width: 32px;
                height: 16px;
                background-color: rgba(255, 255, 255, 0.2);
                border-radius: 9999px;
                transition: background-color 0.2s ease;
              "
            ></div>
            <div
              id="toggle-knob"
              style="
                position: absolute;
                top: 2px;
                left: 2px;
                width: 14px;
                height: 14px;
                background-color: white;
                border-radius: 9999px;
                transition: transform 0.2s ease;
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
              "
            ></div>
          </div>
          <span
            id="difficulty-label"
            style="
              margin-left: 0.5rem;
              font-size: 0.75rem;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.9);
              white-space: nowrap;
            "
          >
            Kinda Infuriating Mode
          </span>
        </label>
      </div>

      <div id="main-stuff" style="margin-top: 25px; margin-left: auto; margin-right: auto; z-index: 10">
        <div id="slot-1" style="height: 250px; margin-bottom: 10px; justify-content: center; display: none;"></div>

        <div id="slot-2" style="height: 100px; margin-bottom: 20px; justify-content: center; display: none;"></div>

        <div id="main-splash-content" style="width: fit-content; margin: auto; display: flex; flex-direction: column; gap: 1rem;">
        <div id="intro-title" style="width: fit-content; margin: auto;">
          <h1
            style="
              text-align: left;
              width: fit-content;
              margin-top: 0;
              margin-bottom: 0;
            "
          >
            <span
              style="
                font-size: 48px;
                font-weight: 700;
                color: white;
                line-height: 1;
              "
            >
              Kinda Hard </span
            ><br />
            <span
              style="
                font-size: 96px;
                font-weight: 700;
                color: #fddf6a;
                margin: 0;
                line-height: 1;
              "
            >
              Golf
            </span>
          </h1>
          <h2
            id="subheader-text"
            style="
              margin: 0;
              font-size: 16px;
              font-weight: inherit;
              margin: auto;
              text-align: center;
            "
          >
            A challenging daily golf game.
          </h2>
          <div
            style="
              position: absolute;
              left: -9999px;
              top: auto;
              width: 1px;
              height: 1px;
              overflow: hidden;
            "
          >
            <p>
              Welcome to Kinda Hard Golf, a challenging and fun browser-based
              golf game where each day brings a new course. Use skill, patience,
              and finesse to reach the top in as few shots as possible. Compete
              with your friends, track your scores, and have some mindless daily
              fun.
            </p>
            <p>
              Drag the ball to aim, release to shoot, and hit checkpoints to
              save your progress. Try today's level now and come back tomorrow
              for a fresh challenge!
            </p>
            <p>
              This game is 100% free, family-friendly, and runs in your browser.
              Play on desktop or mobile without needing to install anything.
            </p>
          </div>
        </div>

        <div id="level-info-group" style=" display: flex; flex-direction: column; gap: 0.25rem;">
          
          <div id="daily-info-group" style="border-width: 2px; border-color: #caa66c; border-style: solid; width: fit-content; border-radius: 8px; margin: auto; margin-bottom: 8px; line-height: 1.3;">
            <div style="border-radius: 6px; border-width: 1px; border-color: #faeac3; border-style: solid; padding: 8px 12px; background-color: #f5e5bd; color: #7b3518; display: flex; flex-direction: row; align-items: center; width: fit-content; gap: 8px; ">
            <p
              id="level-date"
              style="
                margin: 0;
                width: fit-content;
                display: flex;
                flex-direction: column;
                text-align: center;
                gap: 1px;
              "
            >
              <span id="date-text" style="font-size: 16px; font-weight: 600; font-size: 18px;">May 30</span>
              <span id="date-year" style="font-size: 14px; font-weight: 400; font-size: 14px;">2026</span>

          </p>
          <div style="width: 1px; background-color: #caa66c; margin: 0; border-radius: 2px;"></div>
          <p
            id="level-name-container"
            style="
                margin: 0;
                width: fit-content;
                display: flex;
                flex-direction: column;
                text-align: center;
                gap: 2px;
             
            "
          >
              <span style="font-size: 12px;
              font-weight: 400; ">No.</span>
              <span id="level-name" style="font-size: 16px; font-weight: 600;">422</span>

          </p>
          </div>
        </div>

          <div
            id="challenges-button"
            style="
              font-size: 16px;
              margin-top: 0.25rem;
              padding: 0.875rem 1.5rem;
              color: white;
              font-weight: 700;
              background: linear-gradient(135deg, #dc2626, #991b1b); /* red gradient */
              border-radius: 8px;
              border: 2px solid #7f1d1d; /* darker red border */
              box-shadow:
                0 4px 0 #7f1d1d,
                0 6px 8px rgba(0, 0, 0, 0.2);
              z-index: 50;
              transition:
                transform 100ms ease-in-out,
                box-shadow 100ms ease-in-out,
                background 150ms ease-in-out;
              transform: translateY(0);
              cursor: pointer;
              text-align: center;
              display: inline-block;
              box-sizing: border-box;
              position: relative;
            "
            onmouseover="this.style.background='linear-gradient(135deg, #ef4444, #dc2626)'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 0 #7f1d1d, 0 8px 12px rgba(0, 0, 0, 0.25)'"
            onmouseout="this.style.background='linear-gradient(135deg, #dc2626, #991b1b)'; this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 0 #7f1d1d, 0 6px 8px rgba(0, 0, 0, 0.2)'"
            onmousedown="this.style.background='linear-gradient(135deg, #991b1b, #7f1d1d)'; this.style.transform='translateY(2px)'; this.style.boxShadow='0 2px 0 #7f1d1d, 0 3px 4px rgba(0, 0, 0, 0.2)'"
            onmouseup="this.style.background='linear-gradient(135deg, #ef4444, #dc2626)'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 0 #7f1d1d, 0 8px 12px rgba(0, 0, 0, 0.25)'"
          >
            🔥 Complete Challenges 🔥
          </div>

          <div
            id="start-button"
            style="
              font-size: 16px;
              margin-top: 0.25rem;
              padding: 0.875rem 1.5rem;
              color: white;
              font-weight: 700;
              background-color: #047857; /* emerald-700 */
              border-radius: 8px;
              border: 2px solid #034d34; /* darker emerald border */
              box-shadow:
                0 4px 0 #034d34,
                0 6px 8px rgba(0, 0, 0, 0.2);
              z-index: 50;
              transition:
                transform 100ms ease-in-out,
                box-shadow 100ms ease-in-out,
                background-color 150ms ease-in-out;
              transform: translateY(0);
              cursor: pointer;
              text-align: center;
              display: inline-block;
              box-sizing: border-box;
              position: relative;
            "
            onmouseover="this.style.backgroundColor='#059669'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 0 #034d34, 0 8px 12px rgba(0, 0, 0, 0.25)'"
            onmouseout="this.style.backgroundColor='#047857'; this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 0 #034d34, 0 6px 8px rgba(0, 0, 0, 0.2)'"
            onmousedown="this.style.backgroundColor='#065f46'; this.style.transform='translateY(2px)'; this.style.boxShadow='0 2px 0 #034d34, 0 3px 4px rgba(0, 0, 0, 0.2)'"
            onmouseup="this.style.backgroundColor='#059669'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 0 #034d34, 0 8px 12px rgba(0, 0, 0, 0.25)'"
          >
            Play Daily Hole ⛳
          </div>

          <div
            id="map-editor-button"
            style="
              font-size: 16px;
              margin-top: 0.5rem;
              padding: 0.75rem 1.25rem;
              color: white;
              font-weight: 700;
              background-color: #7c3aed; /* violet-700 */
              border-radius: 8px;
              border: 2px solid #5b21b6; /* darker violet border */
              box-shadow:
                0 4px 0 #5b21b6,
                0 6px 8px rgba(0, 0, 0, 0.2);
              z-index: 50;
              transition:
                transform 100ms ease-in-out,
                box-shadow 100ms ease-in-out,
                background-color 150ms ease-in-out;
              transform: translateY(0);
              cursor: pointer;
              text-align: center;
              display: inline-block;
              box-sizing: border-box;
              position: relative;
            "
            onmouseover="this.style.backgroundColor='#8b5cf6'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 0 #5b21b6, 0 8px 12px rgba(0, 0, 0, 0.25)'"
            onmouseout="this.style.backgroundColor='#7c3aed'; this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 0 #5b21b6, 0 6px 8px rgba(0, 0, 0, 0.2)'"
            onmousedown="this.style.backgroundColor='#6d28d9'; this.style.transform='translateY(2px)'; this.style.boxShadow='0 2px 0 #5b21b6, 0 3px 4px rgba(0, 0, 0, 0.2)'"
            onmouseup="this.style.backgroundColor='#8b5cf6'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 0 #5b21b6, 0 8px 12px rgba(0, 0, 0, 0.25)'"
          >
            Map Editor
          </div>
        </div>
        <div id="loading-disclaimer" style="display: none">
          Loading Today's Map...
        </div>
      </div>
      </div>

      <div id="slot-3" style="height: 50px; margin-top: 20px; text-align: center; display: none;"></div>

      <!-- Floating Clouds -->
      <div id="clouds-container" style="
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: -2;
        pointer-events: none;
      ">
        <!-- Background cloud (farthest/slowest) - starts on screen -->
        <img src="./textures/cloud.png" alt="" style="
          position: absolute;
          top: 8%;
          left: 20%;
          width: 100px;
          height: 67px;
          opacity: 0.25;
          animation: float-cloud-1 200s infinite linear;
        " />
        <!-- Middle cloud (medium distance/speed) - starts off screen -->
        <img src="./textures/cloud.png" alt="" style="
          position: absolute;
          top: 55%;
          left: -140px;
          width: 130px;
          height: 87px;
          opacity: 0.35;
          animation: float-cloud-2 150s infinite linear;
        " />
        <!-- Foreground cloud (closest/medium speed) - starts on screen -->
        <img src="./textures/cloud.png" alt="" style="
          position: absolute;
          top: 30%;
          left: 60%;
          width: 160px;
          height: 107px;
          opacity: 0.4;
          animation: float-cloud-3 120s infinite linear;
        " />
      </div>

      <!-- Single Hill SVG (grows toward right) -->
      <svg
        viewBox="0 0 1000 200"
        preserveAspectRatio="none"
        style="
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 150px;
          z-index: -1;
        "
      >
        <path
          d="M0 150 Q 250 120 500 130 Q 750 180 1000 100 V 200 H 0 Z"
          fill="#16a34a"
          stroke="none"
          stroke-width="0"
        />
      </svg>

      <footer
        style="
          box-sizing: border-box;
          font-size: 0.75rem;
          padding: 0 1rem;
          color: rgba(255, 255, 255, 0.7);
          position: absolute;
          bottom: 8px;
          width: 100%;
          z-index: 10;
          font-family: &quot;neue&quot;, sans-serif;
        "
      >
        <div
          id="footer-flex"
          style="
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;
            gap: 1rem;
          "
        >
          <div style="flex: 1; width: fit-content">
            © 2025 Kinda Hard Golf<br />
            <a
              href="https://johalloran.dev"
              target="_blank"
              style="color: white; text-decoration: underline"
              >johalloran.dev</a
            >
            |
            <a href="/privacy.html" target="_blank">Privacy</a> |
            <a href="/terms.html" target="_blank">Terms</a> |
            <a href="/about.html" target="_blank">About</a> |
            <a href="https://blog.kindahardgolf.com" target="_blank">Blog</a>
          </div>

          <div
            style="
              flex: none;
              min-width: 200px;
              display: flex;
              flex-direction: column;
              align-items: flex-end;
            "
          >
          </div>
        </div>
      </footer>
      
      <!-- Announcement Button (Left Side) -->
      <div
        id="announcement-button-container"
        style="
          position: absolute;
          left: 16px;
          top: 50px;
          margin-top: 10px;
          z-index: 10;
          display: none;
        "
        class="announcement-responsive"
      >
        <button
          id="announcement-button"
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(59, 130, 246, 0.9);
            color: white;
            padding: 8px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.3);
            cursor: pointer;
            font-family: &quot;neue&quot;, sans-serif;
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
            transition: all 0.2s ease;
            position: relative;
            overflow: visible;
            width: 36px;
            height: 36px;
          "
          onmouseover="this.style.background='rgba(37, 99, 235, 0.95)'; this.style.transform='translateY(-1px)';"
          onmouseout="this.style.background='rgba(59, 130, 246, 0.9)'; this.style.transform='translateY(0)';"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="18"
            height="18"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            id="announcement-bell-icon"
          >
            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
            <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
          </svg>
          <div
            id="announcement-beacon"
            style="
              position: absolute;
              top: -2px;
              right: -2px;
              width: 8px;
              height: 8px;
              background-color: #ef4444;
              border-radius: 50%;
              border: 2px solid white;
              display: none;
            "
          ></div>
        </button>
      </div>
    </div>
    
    <!-- Ad Slots -->

    <!-- Start Game Modal -->
    <div
      id="start-game-modal"
      class="hidden fixed inset-0 z-[10001] flex items-center justify-center"
      aria-labelledby="modal-title"
      role="dialog"
      aria-modal="true"
    >
      <!-- Backdrop -->
      <div
        id="modal-backdrop-start"
        class="fixed inset-0 bg-gray-500/75 transition-opacity opacity-0"
        aria-hidden="true"
      ></div>

      <!-- Modal Panel -->
      <div class="modal-panel-outer animate-fade-in mx-4 relative z-10 touch-auto" style="max-height: 100vh !important;">
      <div
        id="modal-panel-start"
        class="modal-panel"
      >
        <!-- Title -->
        <h2 style="
          font-size: 24px;
          font-weight: 700;
          margin: 0 0 20px 0;
          text-align: center;
          color: #4a2c17;
          letter-spacing: 1px;
        ">HOW TO PLAY</h2>

        <!-- Instructions List -->
        <div style="margin-bottom: 24px;">
          <!-- Drag and Shoot -->
          <div style="display: flex; align-items: flex-start; margin-bottom: 16px;">
            <img src="./textures/drag-ball.png" alt="Drag and Shoot" style="
              width: 32px;
              height: 32px;
              margin-right: 12px;
              margin-top: 2px;
              border-radius: 4px;
              flex-shrink: 0;
            " />
            <div>
              <div style="font-weight: 700; font-size: 16px; margin-bottom: 4px; color: #4a2c17;">
                Drag and Shoot
              </div>
              <p style="
                margin: 0;
                font-size: 14px;
                line-height: 1.4;
                color: #7b3518;
              ">
                Drag the ball to aim, release to shoot.
              </p>
            </div>
          </div>

          <!-- Climb to the Top -->
          <div style="display: flex; align-items: flex-start; margin-bottom: 16px;">
            <img src="./textures/finish.png" alt="Climb to the Top" style="
              width: 32px;
              height: 32px;
              margin-right: 12px;
              margin-top: 2px;
              border-radius: 4px;
              flex-shrink: 0;
            " />
            <div>
              <div style="font-weight: 700; font-size: 16px; margin-bottom: 4px; color: #4a2c17;">
                Climb to the Top
              </div>
              <p style="
                margin: 0;
                font-size: 14px;
                line-height: 1.4;
                color: #7b3518;
              ">
                Reach the top using fewest strokes.
              </p>
            </div>
          </div>

          <!-- Use Checkpoints -->
          <div style="display: flex; align-items: flex-start;">
            <img src="./textures/checkpoint.png" alt="Use Checkpoints" style="
              width: 32px;
              height: 32px;
              margin-right: 12px;
              margin-top: 2px;
              border-radius: 4px;
              flex-shrink: 0;
            " />
            <div>
              <div style="font-weight: 700; font-size: 16px; margin-bottom: 4px; color: #4a2c17;">
                Use Checkpoints
              </div>
              <p style="
                margin: 0;
                font-size: 14px;
                line-height: 1.4;
                color: #7b3518;
              ">
                Land on flags to save progress.
              </p>
            </div>
          </div>
        </div>

        <!-- Start Button -->
        <button
          id="play-button"
          style="
            width: 100%;
            font-size: 16px;
            padding: 12px 20px;
            color: white;
            font-weight: 700;
            background-color: #047857;
            border-radius: 20px;
            border: 2px solid #034d34;
            box-shadow:
              0 4px 0 #034d34,
              0 6px 8px rgba(0, 0, 0, 0.2);
            transition:
              transform 100ms ease-in-out,
              box-shadow 100ms ease-in-out,
              background-color 150ms ease-in-out;
            transform: translateY(0);
            cursor: pointer;
            text-align: center;
            display: inline-block;
            box-sizing: border-box;
            position: relative;
            font-family: 'neue', sans-serif;
          "
          onmouseover="this.style.backgroundColor='#059669'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 0 #034d34, 0 8px 12px rgba(0, 0, 0, 0.25)'"
          onmouseout="this.style.backgroundColor='#047857'; this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 0 #034d34, 0 6px 8px rgba(0, 0, 0, 0.2)'"
          onmousedown="this.style.backgroundColor='#065f46'; this.style.transform='translateY(2px)'; this.style.boxShadow='0 2px 0 #034d34, 0 3px 4px rgba(0, 0, 0, 0.2)'"
          onmouseup="this.style.backgroundColor='#059669'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 0 #034d34, 0 8px 12px rgba(0, 0, 0, 0.25)'"
        >
          Got it!
        </button>
      </div>
        </div>
      </div>
    </div>
  </div>

      


    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        /* background-color: #222; */
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
      }

      #start-game-screen {
        padding-top: 45px !important;
      }

      @media (min-width: 1024px) {
        #start-game-screen {
          padding-top: 0px !important;
        }
      }

      /* Hide community text on mobile portrait devices */
      @media (max-width: 480px) {
        #community-text {
          display: none;
        }
        #discord-icon {
          margin-right: 0 !important;
        }
        
        /* Reduce title sizes on small screens */
        #intro-title h1 span:first-child {
          font-size: 36px !important;
        }
        
        #intro-title h1 span:last-child {
          font-size: 72px !important;
        }
        
        #subheader-text {
          font-size: 14px !important;
        }
        
        
        #level-name {
          font-size: 18px !important;
        }
      }

      /* Move infuriating mode toggle to bottom right on mobile */
      @media (max-width: 768px) {
        #infuriating-mode-container {
          left: auto !important;
          right: 16px !important;
          bottom: 16px !important;
        }
      }

      body {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      canvas {
        display: block;
        touch-action: none; /* Prevent default touch actions like scrolling */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
      }

      /* Prevent double-tap zoom on buttons */
      button,
      .cursor-pointer {
        touch-action: manipulation;
      }

      body {
        margin: 0;
        overflow: hidden; /* Hide scrollbars for fullscreen canvas */
        -webkit-touch-callout: none;
      }

      @keyframes fade-in {
        from {
          opacity: 0;
          transform: scale(0.95);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }
      .animate-fade-in {
        animation: fade-in 0.4s ease-out;
      }

      /* Cloud floating animations - all moving left to right with consistent wind direction */
      @keyframes float-cloud-1 {
        0% {
          transform: translateX(0px) translateY(0px);
        }
        25% {
          transform: translateX(15vw) translateY(-5px);
        }
        50% {
          transform: translateX(30vw) translateY(-8px);
        }
        75% {
          transform: translateX(45vw) translateY(-3px);
        }
        100% {
          transform: translateX(60vw) translateY(-6px);
        }
      }

      @keyframes float-cloud-2 {
        0% {
          transform: translateX(0px) translateY(0px);
        }
        30% {
          transform: translateX(25vw) translateY(8px);
        }
        60% {
          transform: translateX(50vw) translateY(5px);
        }
        100% {
          transform: translateX(calc(100vw + 140px)) translateY(10px);
        }
      }

      @keyframes float-cloud-3 {
        0% {
          transform: translateX(0px) translateY(0px);
        }
        25% {
          transform: translateX(10vw) translateY(-8px);
        }
        50% {
          transform: translateX(20vw) translateY(-12px);
        }
        75% {
          transform: translateX(30vw) translateY(-6px);
        }
        100% {
          transform: translateX(40vw) translateY(-10px);
        }
      }

      @keyframes pulse-glow {
        0% {
          transform: scale(1);
          box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
        }
        50% {
          transform: scale(1.05);
          box-shadow: 0 4px 16px rgba(16, 185, 129, 0.6);
        }
        100% {
          transform: scale(1);
          box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
        }
      }

      /* Hamburger menu styles */
      #hamburger-button {
        position: relative;
        left: 0;
        transition:
          transform 0.2s ease-out,
          background-color 0.2s ease-out;
      }

      #hamburger-menu-container:hover #hamburger-button {
        transform: scale(1.05); /* slightly larger */
        background-color: #111; /* or darker background */
      }

      /* SVG icon styles */
      #menu-dropdown svg,
      #menu-dropdown img {
        fill: currentColor;
        width: 24px;
        height: 24px;
      }

      /* Ad slot styles - always reserve space to prevent layout shift */
      #slot-1, #slot-2, #slot-3 {
        display: none;
      }
      
      /* Very small screens with iOS Safari zoom */
      @media (max-width: 375px) {
        #intro-title h1 span:first-child {
          font-size: 28px !important;
        }
        
        #intro-title h1 span:last-child {
          font-size: 56px !important;
        }
        
        #start-button,
        #map-editor-button {
          font-size: 12px !important;
          padding: 0.5rem 1rem !important;
        }
      }

      /* When window height is limited AND on desktop, wrap columns horizontally */
      @media (min-width: 550px) and (max-height: 700px) {
        #main-splash-content {
          flex-direction: row !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 4rem !important;
        }
        
        #level-info-group {
          align-items: center !important;
        }
      }

      /* slot-1 shows only on desktop (1024px and larger) */
      @media (min-width: 1024px) {
        #slot-1 {
          display: flex !important;
          justify-content: center;
        }

        #main-splash-content {
          margin-top: 70px;
        }
      }

      /* slot-2 shows only on mobile/tablet (smaller than 1024px) */
      @media (max-width: 1023px) {
        #slot-2 {
          display: flex !important;
          justify-content: center;
        }
      }

      #slot-3:not(:empty) {
        display: block !important;
      }

      /* Position slot-3 at bottom on mobile */
      @media (max-width: 1023px) {
        #slot-3 {
          position: absolute;
          bottom: 100px;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          display: flex;
          justify-content: center;
        }
      }

      /* Golf transition animations */
      @keyframes golf-ball-bounce {
        0% {
          transform: translateY(-30px) scale(1);
          animation-timing-function: ease-in;
        }
        20% {
          transform: translateY(0px) scale(1.15, 0.9);
          animation-timing-function: ease-out;
        }
        25% {
          transform: translateY(-8px) scale(1);
          animation-timing-function: ease-in;
        }
        35% {
          transform: translateY(0px) scale(1.08, 0.95);
          animation-timing-function: ease-out;
        }
        40% {
          transform: translateY(-3px) scale(1);
          animation-timing-function: ease-in;
        }
        50% {
          transform: translateY(0px) scale(1.03, 0.98);
          animation-timing-function: ease-out;
        }
        100% {
          transform: translateY(0px) scale(1);
        }
      }

      @keyframes fade-in-up {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes fade-out-bg {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }

      .golf-ball-bounce {
        animation: golf-ball-bounce 1.2s ease-out forwards;
      }

      .fade-in-up {
        animation: fade-in-up 0.8s ease-out forwards;
      }

      .fade-out-bg {
        animation: fade-out-bg 1s ease-out forwards;
      }

      /* Side ad containers for wider screens - Prosper vertical sticky ads */
      .sidebar-container {
        position: fixed;
        top: 0;
        width: 300px;
        height: 100%;
        display: none;
        z-index: -1;
        background-color: #4d260e;
        background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='15' height='15' fill='%23582c11'/%3E%3C/svg%3E");
        background-repeat: repeat;
        justify-content: center;
        align-items: center;
      }
      
      .thingyPreventer-message {
        display: none;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 20px;
        border-radius: 12px;
        text-align: center;
        font-family: "neue", sans-serif;
        font-size: 14px;
        line-height: 1.4;
        max-width: 250px;
        margin-top: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.1);
        margin: auto;
      }
      
      .sidebar-container.left {
        left: 0;
      }
      
      .sidebar-container.right {
        right: 0;
      }
      
      /* Show only right side ad between 1024px and 1200px */
      @media (min-width: 1024px) and (max-width: 1199px) {
        .sidebar-container.right {
          display: block;
        }
      }
      
      /* Show both side ads at 1200px and above */
      @media (min-width: 1200px) {
        .sidebar-container {
          display: block;
        }
      }
      
      /* Canvas container that handles positioning */
      #canvas-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
      }
      
      /* Game UI container relative to canvas container */
      #game-ui-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 10;
        overflow: hidden; /* Prevents overflow issues */
        box-sizing: border-box;
      }
      
      /* Layered border effect - only show when side ads are visible (1024px+) */
      @media (min-width: 1024px) {
        #game-ui-container {
          border-right: 2px solid #0d0301;
          box-shadow: inset -2px 0 0 0 #6B4C3A,
            inset -4px 0 0 0 #A0826D,
            inset -6px 0 0 0 #D2B48C,
            inset -8px 0 0 0 rgba(0, 0, 0, 0.2);
        }
      }
      
      #game-ui-container > * {
        pointer-events: auto;
      }

      .fc-ccpa-root .fc-dialog-container {
        position: fixed !important;
        right: 8px !important;
        bottom: 8px !important;
        left: auto !important;
        top: auto !important;
        max-width: calc(100vw - 16px);
        z-index: 2147483644;
      }
      .fc-ccpa-root .fc-dns-dialog {
        font-size: 11px;
        padding: 4px 8px;
        border-radius: 6px;
      }
      @media (max-width: 480px) {
        .fc-ccpa-root .fc-dialog-container {
          right: 4px !important;
          bottom: 4px !important;
        }
        .fc-ccpa-root .fc-dns-dialog {
          font-size: 10px;
          padding: 3px 6px;
        }
      }
    </style>

    <script>
        const challengesButton = document.getElementById("challenges-button");
        if(challengesButton) {
          challengesButton.style.display = 'none';
        }
    </script>

    <script>
      const toggle = document.getElementById("infuriating-toggle");
      const toggleBg = document.getElementById("toggle-bg");
      const toggleKnob = document.getElementById("toggle-knob");
      const disclaimer = document.getElementById("infuriating-disclaimer");
      const difficultyLabel = document.getElementById("difficulty-label");


      function updateDifficultyUI(isChecked) {
        // Move knob and change background
        toggleBg.style.backgroundColor = isChecked ? "rgba(220, 38, 38, 0.5)" : "rgba(255, 255, 255, 0.2)"; // semi-transparent red or white
        toggleKnob.style.transform = isChecked
          ? "translateX(14px)"
          : "translateX(0)";

        // Update label and disclaimer
        // difficultyLabel.textContent = isChecked ? infuriatingText : hardText;
        disclaimer.style.display = isChecked ? "block" : "none";
        window.__KHG_INFURIATING_MODE__ = isChecked;
      }

      toggle.addEventListener("change", (e) => {
        updateDifficultyUI(e.target.checked);
      });

      // Initialize state on load
      updateDifficultyUI(toggle.checked);

      // Handle "Got It! ⛳" button click in the modal
      document.getElementById("play-button").addEventListener("click", () => {
        // Hide the modal
        const startGameModal = document.getElementById("start-game-modal");
        if (startGameModal) {
          startGameModal.classList.add("hidden");
          startGameModal.style.display = "none";
        }
        
        // Hide the start screen
        const startGameScreen = document.getElementById("start-game-screen");
        if (startGameScreen) {
          startGameScreen.style.display = "none";
        }
        
        // Trigger game controls to show
        if (window.gameplayUI) {
          window.gameplayUI.hideInstructions();
        }
      });

      document.getElementById("challenges-button").addEventListener("click", () => {
        
        // Hide buttons and show loading after a short delay
        setTimeout(() => {
          document.getElementById("loading-disclaimer").style.display = "block";
          document.getElementById("start-button").style.display = "none";
          document.getElementById("challenges-button").style.display = "none";
        }, 300);
        
        window.__STARTED_CHALLENGE__ = true;
        window.__STARTED_GAME__ = false;
      });

      document.getElementById("start-button").addEventListener("click", () => {
        // Hide buttons and show loading after a short delay
        setTimeout(() => {
          document.getElementById("loading-disclaimer").style.display = "block";
          document.getElementById("start-button").style.display = "none";
          document.getElementById("challenges-button").style.display = "none";

          // Hide map editor button while game loads
          const mapEditorButton = document.getElementById("map-editor-button");
          if (mapEditorButton) {
            mapEditorButton.style.display = "none";
          }
        }, 300);
        
        window.__STARTED_GAME__ = true;
        window.__STARTED_CHALLENGE__ = false;
        
        // Don't show modal immediately - let the game load first
        // The modal will be shown by main.ts after the game is ready
        
        // Remove the homepage banner ad (will be handled by main.ts AdsManager)
        // This is now managed by the AdsManager class
      });

      document.getElementById("map-editor-button").addEventListener("click", () => {
        // Hide loading disclaimer only
        const loadingDisclaimer = document.getElementById("loading-disclaimer");
        if (loadingDisclaimer) {
          loadingDisclaimer.style.display = "none";
        }
        
        // Show map editor immediately if available
        if (window.openMapEditor) {
          window.openMapEditor();
        } else {
          // Set flag for main.ts to check and show loading state
          window.__MAP_EDITOR_REQUESTED__ = true;
          
          // Show loading state like play button
          const button = document.getElementById("map-editor-button");
          if (button) {
            button.textContent = "Loading Map Editor...";
            button.style.pointerEvents = "none";
            button.style.opacity = "0.7";
          }
          
          // Retry when JS loads
          const checkInterval = setInterval(() => {
            if (window.openMapEditor) {
              clearInterval(checkInterval);
              window.openMapEditor();
              window.__MAP_EDITOR_REQUESTED__ = false;
            }
          }, 100);
        }
      });

      // Cookie preferences link
      // document.getElementById("cookie-preferences-link").addEventListener("click", (e) => {
      //   e.preventDefault();
      //   // Clear cookie preferences and reload to show banner again
      //   localStorage.removeItem("cookies-accepted");
      //   localStorage.removeItem("cookies-rejected");
      //   window.location.reload();
      // });

      // Handle Homescreen button clickAdd commentMore actions
      const homescreenButton = document.getElementById("homescreen-button");
        if (homescreenButton) {
          homescreenButton.addEventListener("click", function () {
            // Navigate to root and refresh
            window.location.href = "/";
            // Close the menu
            menuDropdown.classList.add("hidden");
          });
        }
    </script>

    <script>
      // Run immediately when DOM is ready to prevent layout shift
      document.addEventListener('DOMContentLoaded', function() {
        const offsetHours = 4; // Adjust as needed
        const offsetMs = offsetHours * 60 * 60 * 1000;

        const utcDateStr = new Date(new Date().getTime() - offsetMs)
          .toISOString()
          .split("T")[0];

        const utcLaunchDate = "2025-04-02";

        // Convert to Date objects in UTC by appending 'T00:00:00Z'
        const startDate = new Date(utcLaunchDate + "T00:00:00Z");
        const endDate = new Date(utcDateStr + "T00:00:00Z");

        // Get difference in milliseconds
        const diffTime = endDate - startDate;
        const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));

        // Update text in the DOM
        const levelDate = document.getElementById("date-text");
        const levelName = document.getElementById("level-name");

        if (levelDate) {
          // Parse the utcDateStr which already has the correct date accounting for 4am UTC reset
          const [year, month, day] = utcDateStr.split('-').map(Number);
          const displayDate = new Date(Date.UTC(year, month - 1, day));
          const options = { month: 'long', day: 'numeric', timeZone: 'UTC' };
          levelDate.textContent = displayDate.toLocaleDateString('en-US', options);
        }

        if (levelName) {
          levelName.textContent = `${diffDays}`;
        }

        // Store in global window for your game code to use (frozen to prevent console tampering)
        Object.defineProperty(window, '__KHG_MAP_NUMBER__', {
          value: diffDays,
          writable: false,
          configurable: false
        });
        window.__KHG_DATE_STR__ = utcDateStr;
      });
    </script>


    <link rel="stylesheet" href="https://sdk.playlight.dev/playlight-sdk.css" />

    <!-- <script>
      if dates are April 9-14, replace subheader-text with "A frustration unlike any other."
      const subheaderText = document.getElementById("subheader-text");
      const currentDate = new Date();
      const startDate = new Date("2025-04-10");
      const endDate = new Date("2025-04-14");
      if (currentDate >= startDate && currentDate <= endDate && subheaderText) {
        subheaderText.textContent = "A frustration unlike any other.";
      }
    </script> -->

    <script>
      // Announcement System will be initialized from main.ts
      
      // Function to update canvas container position
      function updateCanvasPosition() {
        const canvasContainer = document.getElementById('canvas-container');
        const MIN_WINDOW_WIDTH_FOR_PLACEHOLDERS = 10200;
        const MIN_WINDOW_WIDTH_FOR_RIGHT_PLACEHOLDER = 1024;
        const PLACEHOLDER_WIDTH = 300;

        if (window.innerWidth >= MIN_WINDOW_WIDTH_FOR_PLACEHOLDERS) {
          // Both placeholders visible - canvas should be centered between them
          canvasContainer.style.left = `${PLACEHOLDER_WIDTH}px`;
          canvasContainer.style.width = `${window.innerWidth - (PLACEHOLDER_WIDTH * 2)}px`;
        } else if (window.innerWidth >= MIN_WINDOW_WIDTH_FOR_RIGHT_PLACEHOLDER) {
          // Only right placeholder visible - canvas should avoid the right side
          canvasContainer.style.left = '0';
          canvasContainer.style.width = `${window.innerWidth - PLACEHOLDER_WIDTH}px`;
        } else {
          // No placeholders - canvas covers full window
          canvasContainer.style.left = '0';
          canvasContainer.style.width = '100%';
        }
      }
      
      
      // Expose function globally for main.ts to call
      window.updateCanvasPosition = updateCanvasPosition;

      // Update position on resize
      window.addEventListener('resize', updateCanvasPosition);
      
      // Initialize on load
      document.addEventListener("DOMContentLoaded", updateCanvasPosition);
    </script>

    <!-- Golf Transition Overlay -->
    <div
      id="golf-transition-overlay"
      style="
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom right, #1f79cd, #4e99df);
        z-index: 10002;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-family: 'neue', sans-serif;
      "
    >
      <!-- Golf Ball -->
      <div
        id="transition-golf-ball"
        style="
          width: 40px;
          height: 40px;
          background: white;
          border-radius: 50%;
          position: relative;
          margin-bottom: 2rem;
          box-shadow: 
            inset -2px -2px 4px rgba(0,0,0,0.1),
            0 4px 8px rgba(0,0,0,0.2);
        "
        class="golf-ball-bounce"
      >
        <!-- Golf ball dimples -->
        <div style="
          position: absolute;
          top: 8px;
          left: 12px;
          width: 3px;
          height: 3px;
          background: rgba(0,0,0,0.1);
          border-radius: 50%;
        "></div>
        <div style="
          position: absolute;
          top: 15px;
          left: 20px;
          width: 2px;
          height: 2px;
          background: rgba(0,0,0,0.1);
          border-radius: 50%;
        "></div>
        <div style="
          position: absolute;
          top: 22px;
          left: 15px;
          width: 3px;
          height: 3px;
          background: rgba(0,0,0,0.1);
          border-radius: 50%;
        "></div>
        <div style="
          position: absolute;
          top: 25px;
          left: 8px;
          width: 2px;
          height: 2px;
          background: rgba(0,0,0,0.1);
          border-radius: 50%;
        "></div>
      </div>

      <!-- Hole Info -->
      <div
        id="transition-hole-info"
        style="
          text-align: center;
          color: white;
          opacity: 0;
        "
        class="fade-in-up"
      >
        <h2 style="
          font-size: 2.5rem;
          font-weight: 700;
          margin: 0 0 0.5rem 0;
          text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        ">Hole <span id="transition-hole-number">1</span></h2>
        <!-- Map Attribution -->
        <div id="transition-map-attribution" style="
          margin-bottom: 1rem;
          display: none;
        ">
          <p style="
            font-size: 1rem;
            margin: 0;
            opacity: 0.7;
            font-style: italic;
          "><span id="transition-map-title"></span></p>
          <p style="
            font-size: 0.9rem;
            margin: 0;
            opacity: 0.6;
          ">by <span id="transition-map-creator"></span></p>
        </div>
        <p style="
          font-size: 1.2rem;
          margin: 0;
          opacity: 0.8;
        ">Par <span id="transition-par">3</span></p>
      </div>
    </div>

    <!-- Announcement Panel -->
    <div
      id="announcement-panel"
      style="display: none"
      class="fixed top-100 left-16 bg-white text-gray-800 p-5 rounded-lg shadow-xl z-[10001] max-w-sm flex flex-col gap-3 text-sm animate-fade-in"
    >
      <div
        class="flex justify-between items-center border-b border-gray-200 pb-2 mb-1"
      >
        <h3 id="announcement-title" class="font-bold text-lg text-blue-600">
          Custom Map Editor - Now in Alpha!
        </h3>
        <button
          id="close-announcement"
          class="text-gray-500 hover:text-gray-700 transition-colors"
          aria-label="Close announcement"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
      <div id="announcement-content" class="text-gray-700">
        <p>
          Join the <a href="https://discord.gg/ZcBf2FhcVH" target="_blank" class="text-blue-600 underline font-semibold">Discord</a> for more information, or to access some community maps. The feature is still evolving, so would love any feedback you have!
        </p>
      </div>
    </div>
    <script async data-id="101505796" src="//static.getclicky.com/js"></script>
  </body>
</html>
