<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="referrer" content="no-referrer-when-downgrade">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>How many ways can you visit this game?</title>
  <style>
    body {
      margin: 0;
      font-family: Helvetica, Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f0f0f0;
      overflow: hidden;
    }

    #game-container {
      text-align: center;
      position: relative;
    }

    #shape {
      width: 100px;
      height: 100px;
      margin: 50px auto;
      cursor: pointer;
      position: relative;
      z-index: 2;
    }

    #shape:active {
      transform: scale(0.95);
    }

    #shape.triangle {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid var(--shape-color);
    }

    #shape.triangle::after {
      content: '';
      position: absolute;
      top: 35px;
      left: -25px;
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 50px solid var(--inner-shape-color);
    }

    #shape.square {
      background-color: var(--shape-color);
    }

    #shape.square::after {
      content: '';
      position: absolute;
      top: 25px;
      left: 25px;
      width: 50px;
      height: 50px;
      background-color: var(--inner-shape-color);
    }

    #shape.pentagon {
      clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
      background-color: var(--shape-color);
    }

    #shape.pentagon::after {
      content: '';
      position: absolute;
      top: 25px;
      left: 25px;
      width: 50px;
      height: 50px;
      background-color: var(--inner-shape-color);
      clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    }

    #shape.hexagon {
      clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
      background-color: var(--shape-color);
    }

    #shape.hexagon::after {
      content: '';
      position: absolute;
      top: 25px;
      left: 25px;
      width: 50px;
      height: 50px;
      background-color: var(--inner-shape-color);
      clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    }

    #shape.heptagon {
      clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
      background-color: var(--shape-color);
    }

    #shape.heptagon::after {
      content: '';
      position: absolute;
      top: 25px;
      left: 25px;
      width: 50px;
      height: 50px;
      background-color: var(--inner-shape-color);
      clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    }

    #shape.octagon {
      clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
      background-color: var(--shape-color);
    }

    #shape.octagon::after {
      content: '';
      position: absolute;
      top: 25px;
      left: 25px;
      width: 50px;
      height: 50px;
      background-color: var(--inner-shape-color);
      clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    }

    #click-count {
      font-size: 24px;
      margin-top: 20px;
      font-weight: bold;
    }

    #progress-bar {
      width: 200px;
      height: 20px;
      background-color: #ddd;
      border-radius: 10px;
      margin: 20px auto;
      overflow: hidden;
    }

    #progress {
      width: 0%;
      height: 100%;
      background-color: #4CAF50;
      transition: width 0.1s ease-in-out;
    }

    #start-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      z-index: 1000;
      background-image: radial-gradient(circle at 50% 30%, rgba(102, 0, 255, 0.1) 0%, rgba(102, 0, 255, 0.5) 10%, #6600ff 100%);
      padding-top: 20vh;
    }

    #start-screen h1 {
      font-size: 36px;
      color: white;
      margin-bottom: 20px;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 255, 255, 0.2);
      max-width: 80%;
      text-align: center;
    }

    #start-button {
      font-size: 24px;
      padding: 10px 20px;
      background-color: #4d00bf;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s, box-shadow 0.3s;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
    }

    #start-button:hover {
      background-color: #3a008f;
      box-shadow: 0 12px 20px rgba(0, 0, 0, 0.8);
    }

    #start-button:active {
      box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6);
      transform: translateY(2px);
    }

    #trophy-button {
      position: fixed;
      top: 20px;
      right: 20px;
      font-size: 24px;
      padding: 10px;
      background-color: #ffd700;
      color: #000;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.3s;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    #trophy-button:hover {
      background-color: #ffed4a;
      transform: scale(1.1);
    }

    #trophy-button:active {
      transform: scale(0.95);
    }

    #trophy-menu {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      max-width: 600px;
      background-color: rgba(255, 255, 255, 0.95);
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
      z-index: 1001;
    }

    #trophy-menu h2 {
      font-size: 28px;
      margin-bottom: 20px;
      color: #ffa500;
    }

    #trophy-menu-close {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 24px;
      background: none;
      border: none;
      cursor: pointer;
      color: #ffa500;
    }

    .trophy-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      padding: 10px;
      background-color: #f0f0f0;
      border-radius: 5px;
      position: relative;
      cursor: pointer;
    }

    .trophy-icon {
      font-size: 24px;
      margin-right: 15px;
    }

    .trophy-text {
      font-size: 18px;
      color: #333;
      flex-grow: 1;
    }

    .trophy-difficulty {
      font-size: 14px;
      color: #888;
      margin-left: 10px;
    }

    .trophy-locked {
      opacity: 0.5;
    }

    .trophy-description {
      display: none;
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 10px;
      border-radius: 5px;
      font-size: 14px;
      width: 200px;
      text-align: center;
      z-index: 1002;
    }

    .trophy-item:not(.trophy-locked):hover .trophy-description {
      display: block;
    }

    #achievement-notifications {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 1002;
    }

    .achievement-notification {
      background-color: rgba(0, 255, 0, 0.9);
      color: #000;
      padding: 10px 20px;
      border-radius: 5px;
      font-size: 18px;
      font-weight: bold;
      display: flex;
      align-items: center;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      margin-bottom: 10px;
    }

    .achievement-notification.show {
      opacity: 1;
    }

    .achievement-notification .trophy-icon {
      font-size: 24px;
      margin-right: 10px;
    }

    .trophy-item {
      position: relative;
    }

    .trophy-checkmark {
      font-size: 24px;
      margin-left: 10px;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }

    .trophy-item:not(.trophy-locked) .trophy-checkmark {
      opacity: 1;
    }

    .trophy-difficulty {
      margin-left: auto;
      padding-left: 10px;
    }

    #settings-button {
      position: fixed;
      top: 20px;
      right: 100px;
      font-size: 24px;
      padding: 10px;
      background-color: #808080;
      color: #fff;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.3s;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    #settings-button:hover {
      background-color: #666666;
      transform: scale(1.1);
    }

    #settings-button:active {
      transform: scale(0.95);
    }

    #settings-menu {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      max-width: 400px;
      background-color: rgba(255, 255, 255, 0.95);
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
      z-index: 1001;
    }

    #settings-menu h2 {
      font-size: 28px;
      margin-bottom: 20px;
      color: #000000;
    }

    #settings-menu-close {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 24px;
      background: none;
      border: none;
      cursor: pointer;
      color: #000000;
    }

    .settings-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }

    .settings-label {
      font-size: 18px;
      color: #000000;
      flex-grow: 1;
    }

    .settings-input {
      width: 50px;
      font-size: 16px;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }

    #reset-data-button {
      background-color: #ff4444;
      color: white;
      border: none;
      padding: 10px 15px;
      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    #reset-data-button:hover {
      background-color: #ff0000;
    }

    .particle {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: var(--shape-color);
      pointer-events: none;
      z-index: 1;
    }

    #phone-placeholder {
      font-size: 100px;
      position: fixed;
      bottom: 20px;
      right: 20px;
      opacity: 0;
      cursor: move;
      user-select: none;
      z-index: 1000;
      transition: transform 0.1s ease-in-out, text-shadow 0.1s ease-in-out;
      text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    #phone-placeholder:active {
      transform: scale(0.95);
      text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    }

    @keyframes float {

      0%,
      100% {
        transform: translate(0, 0);
        text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      }

      50% {
        transform: translate(0, -20px);
        text-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
      }
    }

    @keyframes phoneEffect {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.1);
      }

      100% {
        transform: scale(1);
      }
    }

    #phone-menu {
      display: none;
      position: fixed;
      bottom: 140px;
      right: 20px;
      width: 300px;
      height: 500px;
      background-color: #f0f0f0;
      border-radius: 20px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
      overflow: hidden;
      z-index: 999;
    }

    #phone-menu-header {
      background-color: #333;
      color: white;
      padding: 10px;
      text-align: center;
      font-size: 18px;
    }

    #phone-menu-content {
      padding: 20px;
      height: calc(100% - 40px);
      overflow-y: auto;
    }

    .phone-menu-item {
      background-color: #fff;
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 10px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .phone-menu-item:hover {
      background-color: #e0e0e0;
    }
  </style>
</head>

<body>
  <div id="start-screen">
    <h1>How many ways can you visit this game?</h1>
    <button id="start-button">Start Game</button>
  </div>
  <div id="game-container">
    <div id="shape" class="triangle"></div>
    <div id="progress-bar">
      <div id="progress"></div>
    </div>
    <div id="click-count">Clicks: 0</div>
  </div>
  <button id="trophy-button">🏆</button>
  <button id="settings-button">⚙️</button>
  <div id="trophy-menu">
    <h2>Trophy Room</h2>
    <button id="trophy-menu-close">×</button>
    <div id="trophy-list">
      <div class="trophy-item trophy-locked" data-id="normal-visit">
        <span class="trophy-icon">🏆</span>
        <span class="trophy-text">Method 1: Mistake</span>
        <span class="trophy-checkmark">✅</span>
        <span class="trophy-difficulty">Difficulty: Easy</span>
        <div class="trophy-description">You've visited the game normally. Welcome to the wildest goose chase of your life.</div>
      </div>
      <div class="trophy-item trophy-locked" data-id="mobile-visit">
        <span class="trophy-icon">📱</span>
        <span class="trophy-text">Method 2: Pocket Portal</span>
        <span class="trophy-checkmark">✅</span>
        <span class="trophy-difficulty">Difficulty: Easy</span>
        <div class="trophy-description">You've visited the game on a mobile device. Please stop playing.</div>
      </div>
      <div class="trophy-item trophy-locked" data-id="firefox-visit">
        <span class="trophy-icon">🦊</span>
        <span class="trophy-text">Method 3: Fire</span>
        <span class="trophy-checkmark">✅</span>
        <span class="trophy-difficulty">Difficulty: Easy</span>
        <div class="trophy-description">You've visited the game using Firefox. Just use Chrome.</div>
      </div>
      <div class="trophy-item trophy-locked" data-id="edge-visit">
        <span class="trophy-icon">🌐</span>
        <span class="trophy-text">Method 4: Edge</span>
        <span class="trophy-checkmark">✅</span>
        <span class="trophy-difficulty">Difficulty: Easy</span>
        <div class="trophy-description">You've visited the game using Edge. Living on the edge, aren't we? I won't make you download anymore browsers, don't worry.</div>
      </div>
    </div>
  </div>
  <div id="settings-menu">
    <h2>Settings</h2>
    <button id="settings-menu-close">×</button>
    <div class="settings-item">
      <label class="settings-label" for="clicks-per-change">Clicks per shape change:</label>
      <input class="settings-input" type="number" id="clicks-per-change" min="1" max="100" value="10">
    </div>
    <div class="settings-item">
      <button id="reset-data-button">Reset Data</button>
    </div>
  </div>
  <div id="phone-placeholder" style="display: none;">📱</div>
  <div id="phone-menu">
    <div id="phone-menu-header">Phone Menu</div>
    <div id="phone-menu-content">
      <div class="phone-menu-item">Placeholder Item 1</div>
      <div class="phone-menu-item">Placeholder Item 2</div>
      <div class="phone-menu-item">Placeholder Item 3</div>
    </div>
  </div>
  <script>
    (function() {
      let GG_ALL_GAME_CONFIG = {
        clickCount: 0, // Number of times the shape has been clicked
        shapeColor: "red", // Color of the clickable shape
        shapeSize: 100, // Size of the shape in pixels
        innerShapeColor: "#ff6666", // Color of the inner shape
        shapes: ['triangle', 'square', 'pentagon', 'hexagon', 'heptagon', 'octagon'], // Array of shape classes
        colors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'], // Array of ROYGBIV colors
        clicksPerChange: 10, // Number of clicks before changing shape
        gameStarted: false, // Whether the game has started
        normalVisitAchieved: false, // Whether the normal visit achievement has been unlocked
        mobileVisitAchieved: false, // Whether the mobile visit achievement has been unlocked
        firefoxVisitAchieved: false, // Whether the Firefox visit achievement has been unlocked
        edgeVisitAchieved: false, // Whether the Edge visit achievement has been unlocked
        particleCount: 50, // Number of particles to create when shape changes
        particleLifetime: 1000 // Lifetime of particles in milliseconds
      };
      const shape = document.getElementById('shape');
      const clickCounter = document.getElementById('click-count');
      const progressBar = document.getElementById('progress');
      const startScreen = document.getElementById('start-screen');
      const startButton = document.getElementById('start-button');
      const trophyButton = document.getElementById('trophy-button');
      const trophyMenu = document.getElementById('trophy-menu');
      const trophyMenuClose = document.getElementById('trophy-menu-close');
      const settingsButton = document.getElementById('settings-button');
      const settingsMenu = document.getElementById('settings-menu');
      const settingsMenuClose = document.getElementById('settings-menu-close');
      const clicksPerChangeInput = document.getElementById('clicks-per-change');
      const gameContainer = document.getElementById('game-container');
      const phonePlaceholder = document.getElementById('phone-placeholder');
      const phoneMenu = document.getElementById('phone-menu');

      function updateClickCount() {
        if (!GG_ALL_GAME_CONFIG.gameStarted) return;
        GG_ALL_GAME_CONFIG.clickCount++;
        clickCounter.textContent = `Clicks: ${GG_ALL_GAME_CONFIG.clickCount}`;
        updateProgressBar();
        if (GG_ALL_GAME_CONFIG.clickCount % GG_ALL_GAME_CONFIG.clicksPerChange === 0) {
          updateShape();
          createParticles();
        }
        saveGame({
          clickCount: GG_ALL_GAME_CONFIG.clickCount,
          normalVisitAchieved: GG_ALL_GAME_CONFIG.normalVisitAchieved,
          mobileVisitAchieved: GG_ALL_GAME_CONFIG.mobileVisitAchieved
        });
      }

      function updateProgressBar() {
        const progress = (GG_ALL_GAME_CONFIG.clickCount % GG_ALL_GAME_CONFIG.clicksPerChange) / GG_ALL_GAME_CONFIG.clicksPerChange * 100;
        progressBar.style.width = `${progress}%`;
      }

      function updateShape() {
        const shapeIndex = Math.floor(GG_ALL_GAME_CONFIG.clickCount / GG_ALL_GAME_CONFIG.clicksPerChange) % GG_ALL_GAME_CONFIG.shapes.length;
        const colorIndex = Math.floor(GG_ALL_GAME_CONFIG.clickCount / (GG_ALL_GAME_CONFIG.clicksPerChange * GG_ALL_GAME_CONFIG.shapes.length)) % GG_ALL_GAME_CONFIG.colors.length;
        shape.className = GG_ALL_GAME_CONFIG.shapes[shapeIndex];
        const mainColor = GG_ALL_GAME_CONFIG.colors[colorIndex];
        const lighterColor = getLighterColor(mainColor);
        document.documentElement.style.setProperty('--shape-color', mainColor);
        document.documentElement.style.setProperty('--inner-shape-color', lighterColor);
      }

      function createParticles() {
        for (let i = 0; i < GG_ALL_GAME_CONFIG.particleCount; i++) {
          setTimeout(() => {
            const particle = document.createElement('div');
            particle.classList.add('particle');
            const angle = Math.random() * Math.PI * 2;
            const distance = Math.random() * 150 + 50; // Random distance between 50 and 200 pixels
            const size = Math.random() * 5 + 5;
            particle.style.width = `${size}px`;
            particle.style.height = `${size}px`;
            particle.style.left = `${shape.offsetLeft + shape.offsetWidth / 2}px`;
            particle.style.top = `${shape.offsetTop + shape.offsetHeight / 2}px`;
            gameContainer.appendChild(particle);
            const animation = particle.animate([{
                transform: `translate(0, 0)`
              },
              {
                transform: `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance + 50}px)`
              }
            ], {
              duration: GG_ALL_GAME_CONFIG.particleLifetime,
              easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)'
            });
            animation.onfinish = () => {
              particle.remove();
            };
          }, Math.random() * 500); // Random delay between 0 and 500 milliseconds
        }
      }

      function getLighterColor(color) {
        const colorMap = {
          'red': '#ff6666',
          'orange': '#ffb366',
          'yellow': '#ffff66',
          'green': '#66ff66',
          'blue': '#66a3ff',
          'indigo': '#9966ff',
          'violet': '#ff66ff'
        };
        return colorMap[color] || color;
      }

      function startGame() {
        GG_ALL_GAME_CONFIG.gameStarted = true;
        startScreen.style.display = 'none';
        loadGame();
        initializeTrophyDescriptions();
        if (!GG_ALL_GAME_CONFIG.normalVisitAchieved) {
          unlockFirstTrophy();
        }
        checkBrowserVisits();
        showPhonePlaceholder();
        initDraggablePhone();
      }

      function initDraggablePhone() {
        const phone = document.getElementById('phone-placeholder');
        let isDragging = false;
        let startX, startY;

        function onMouseDown(e) {
          isDragging = true;
          startX = e.clientX - phone.offsetLeft;
          startY = e.clientY - phone.offsetTop;
          e.preventDefault();
        }

        function onMouseMove(e) {
          if (!isDragging) return;
          let newX = e.clientX - startX;
          let newY = e.clientY - startY;
          phone.style.left = `${newX}px`;
          phone.style.top = `${newY}px`;
          phone.style.bottom = 'auto';
          phone.style.right = 'auto';
        }

        function onMouseUp() {
          isDragging = false;
        }
        phone.addEventListener('mousedown', onMouseDown);
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
        // Start floating animation
        phone.style.animation = 'float 3s ease-in-out infinite';
      }

      function applyLoadedState() {
        clickCounter.textContent = `Clicks: ${GG_ALL_GAME_CONFIG.clickCount}`;
        updateShape();
        updateProgressBar();
      }

      function toggleTrophyMenu() {
        trophyMenu.style.display = trophyMenu.style.display === 'none' ? 'block' : 'none';
      }

      function toggleSettingsMenu() {
        settingsMenu.style.display = settingsMenu.style.display === 'none' ? 'block' : 'none';
      }

      function unlockTrophy(trophyId) {
        const trophyItem = document.querySelector(`.trophy-item[data-id="${trophyId}"]`);
        if (trophyItem && trophyItem.classList.contains('trophy-locked')) {
          trophyItem.classList.remove('trophy-locked');
          const checkmark = trophyItem.querySelector('.trophy-checkmark');
          if (checkmark) {
            checkmark.style.opacity = '1';
          }
          const description = trophyItem.querySelector('.trophy-description');
          if (description) {
            trophyItem.setAttribute('title', description.textContent);
          }
          // Trophy unlocked notification removed
          // Save the game state after unlocking a trophy
          GG_ALL_GAME_CONFIG[`${trophyId}Achieved`] = true;
          saveGame({
            clickCount: GG_ALL_GAME_CONFIG.clickCount,
            normalVisitAchieved: GG_ALL_GAME_CONFIG.normalVisitAchieved,
            mobileVisitAchieved: GG_ALL_GAME_CONFIG.mobileVisitAchieved
          });
        }
      }

      function applyTrophyState() {
        if (GG_ALL_GAME_CONFIG.normalVisitAchieved) {
          unlockTrophy('normal-visit');
        }
        if (GG_ALL_GAME_CONFIG.mobileVisitAchieved) {
          unlockTrophy('mobile-visit');
        }
        if (GG_ALL_GAME_CONFIG.firefoxVisitAchieved) {
          unlockTrophy('firefox-visit');
        }
        if (GG_ALL_GAME_CONFIG.edgeVisitAchieved) {
          unlockTrophy('edge-visit');
        }
        showPhonePlaceholder();
      }

      function checkBrowserVisits() {
        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
        const isEdge = navigator.userAgent.toLowerCase().indexOf('edg') > -1;
        if (isMobile || GG_ALL_GAME_CONFIG.mobileVisitAchieved) {
          unlockTrophy('mobile-visit');
          if (!GG_ALL_GAME_CONFIG.mobileVisitAchieved) {
            showAchievementNotification('Method 2: Pocket Portal Complete!');
            showAchievementNotification('Unlocked Phone!');
            GG_ALL_GAME_CONFIG.mobileVisitAchieved = true;
          }
        }
        if (isFirefox || GG_ALL_GAME_CONFIG.firefoxVisitAchieved) {
          unlockTrophy('firefox-visit');
          if (!GG_ALL_GAME_CONFIG.firefoxVisitAchieved) {
            showAchievementNotification('Method 3: Fire Complete!');
            GG_ALL_GAME_CONFIG.firefoxVisitAchieved = true;
          }
        }
        if (isEdge || GG_ALL_GAME_CONFIG.edgeVisitAchieved) {
          unlockTrophy('edge-visit');
          if (!GG_ALL_GAME_CONFIG.edgeVisitAchieved) {
            showAchievementNotification('Method 4: Edge Complete!');
            GG_ALL_GAME_CONFIG.edgeVisitAchieved = true;
          }
        }
        showPhonePlaceholder();
        saveGame({
          clickCount: GG_ALL_GAME_CONFIG.clickCount,
          normalVisitAchieved: GG_ALL_GAME_CONFIG.normalVisitAchieved,
          mobileVisitAchieved: GG_ALL_GAME_CONFIG.mobileVisitAchieved,
          firefoxVisitAchieved: GG_ALL_GAME_CONFIG.firefoxVisitAchieved,
          edgeVisitAchieved: GG_ALL_GAME_CONFIG.edgeVisitAchieved
        });
      }

      function initializeTrophyDescriptions() {
        const trophyItems = document.querySelectorAll('.trophy-item');
        trophyItems.forEach(item => {
          const description = item.querySelector('.trophy-description');
          if (description && !item.classList.contains('trophy-locked')) {
            item.setAttribute('title', description.textContent);
          } else {
            item.removeAttribute('title');
          }
        });
      }

      function unlockFirstTrophy() {
        unlockTrophy('normal-visit');
        showAchievementNotification('Method 1: Mistake Complete!');
      }

      function checkBrowserVisits() {
        // Check if the user is on a mobile device
        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        // Check if the user is using Firefox
        const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
        // Check if the user is using Edge
        const isEdge = navigator.userAgent.toLowerCase().indexOf('edg') > -1;
        let stateChanged = false;
        // Mobile visit check
        if ((isMobile || GG_ALL_GAME_CONFIG.mobileVisitAchieved) && !GG_ALL_GAME_CONFIG.mobileVisitAchieved) {
          unlockTrophy('mobile-visit');
          showAchievementNotification('Method 2: Pocket Portal Complete!');
          showAchievementNotification('Unlocked Phone!');
          GG_ALL_GAME_CONFIG.mobileVisitAchieved = true;
          stateChanged = true;
        }
        // Firefox visit check
        if ((isFirefox || GG_ALL_GAME_CONFIG.firefoxVisitAchieved) && !GG_ALL_GAME_CONFIG.firefoxVisitAchieved) {
          unlockTrophy('firefox-visit');
          showAchievementNotification('Method 3: Fire Complete!');
          GG_ALL_GAME_CONFIG.firefoxVisitAchieved = true;
          stateChanged = true;
        }
        // Edge visit check
        if ((isEdge || GG_ALL_GAME_CONFIG.edgeVisitAchieved) && !GG_ALL_GAME_CONFIG.edgeVisitAchieved) {
          unlockTrophy('edge-visit');
          showAchievementNotification('Method 4: Edge Complete!');
          GG_ALL_GAME_CONFIG.edgeVisitAchieved = true;
          stateChanged = true;
        }
        showPhonePlaceholder();
        // Always save the game state to ensure persistence across different browsers
        saveGame({
          clickCount: GG_ALL_GAME_CONFIG.clickCount,
          normalVisitAchieved: GG_ALL_GAME_CONFIG.normalVisitAchieved,
          mobileVisitAchieved: GG_ALL_GAME_CONFIG.mobileVisitAchieved,
          firefoxVisitAchieved: GG_ALL_GAME_CONFIG.firefoxVisitAchieved,
          edgeVisitAchieved: GG_ALL_GAME_CONFIG.edgeVisitAchieved
        });
        // Problem: The issue was caused by the function only saving the state when a change was detected.
        // This led to a situation where achievements weren't being saved consistently across different browsers.
        //
        // Solution: We've modified the logic to check for both the current browser condition AND the saved state.
        // This ensures that if a trophy was unlocked in a different browser, it remains unlocked.
        // We've also removed the 'stateChanged' condition for saving, so the game state is always saved after this function runs.
        // This guarantees that all browser-specific achievements are consistently saved and persisted across different browsers.
      }

      function showPhonePlaceholder() {
        const phonePlaceholder = document.getElementById('phone-placeholder');
        if (GG_ALL_GAME_CONFIG.gameStarted && GG_ALL_GAME_CONFIG.mobileVisitAchieved) {
          phonePlaceholder.style.display = 'block';
          phonePlaceholder.style.opacity = '1';
        } else {
          phonePlaceholder.style.display = 'none';
          phonePlaceholder.style.opacity = '0';
        }
      }
      // This bug might have happened because:
      // 1. The trophy state was only being set when on a mobile device.
      // 2. When switching to a laptop, the code wasn't checking if the trophy had been previously unlocked.
      // 3. The trophy display was being reset based on the current device, not the saved state.
      //
      // To fix this, we've added a condition to unlock the trophy even on non-mobile devices
      // if it has been previously achieved. This ensures the trophy stays unlocked
      // regardless of the current device being used.
      let achievementNotificationsContainer;

      function showAchievementNotification(message) {
        if (!achievementNotificationsContainer) {
          achievementNotificationsContainer = document.createElement('div');
          achievementNotificationsContainer.id = 'achievement-notifications';
          document.body.appendChild(achievementNotificationsContainer);
        }
        const notification = document.createElement('div');
        notification.className = 'achievement-notification';
        notification.textContent = message;
        notification.style.backgroundColor = message.includes('Unlocked Phone') ? 'rgba(255, 255, 0, 0.9)' : 'rgba(0, 255, 0, 0.9)';
        achievementNotificationsContainer.appendChild(notification);
        setTimeout(() => {
          notification.classList.add('show');
        }, 100);
        setTimeout(() => {
          notification.classList.remove('show');
          setTimeout(() => {
            notification.remove();
            if (achievementNotificationsContainer.childElementCount === 0) {
              achievementNotificationsContainer.remove();
              achievementNotificationsContainer = null;
            }
          }, 300);
        }, 3000);
      }

      function updateClicksPerChange() {
        const newValue = parseInt(clicksPerChangeInput.value);
        if (!isNaN(newValue) && newValue >= 1 && newValue <= 100) {
          GG_ALL_GAME_CONFIG.clicksPerChange = newValue;
          updateProgressBar();
        }
      }

      function resetData() {
        if (confirm("Are you sure you want to reset all game data? This action cannot be undone.")) {
          GG_ALL_GAME_CONFIG.clickCount = 0;
          GG_ALL_GAME_CONFIG.normalVisitAchieved = false;
          GG_ALL_GAME_CONFIG.mobileVisitAchieved = false;
          GG_ALL_GAME_CONFIG.firefoxVisitAchieved = false;
          GG_ALL_GAME_CONFIG.edgeVisitAchieved = false;
          applyLoadedState();
          resetTrophies();
          saveGame({
            clickCount: GG_ALL_GAME_CONFIG.clickCount,
            normalVisitAchieved: GG_ALL_GAME_CONFIG.normalVisitAchieved,
            mobileVisitAchieved: GG_ALL_GAME_CONFIG.mobileVisitAchieved,
            firefoxVisitAchieved: GG_ALL_GAME_CONFIG.firefoxVisitAchieved,
            edgeVisitAchieved: GG_ALL_GAME_CONFIG.edgeVisitAchieved
          });
          alert("Game data and trophies have been reset.");
        }
      }

      function saveGame(gameState) {
        const saveGameEvent = {
          type: 'REQUEST_SAVE_GAME_EVENT',
          save_data: gameState
        };
        window.parent.postMessage(saveGameEvent, '*');
        // Additional fix: Add a small delay before allowing the next save
        // This helps prevent rapid successive saves that could lead to data loss
        saveGame = debounce(saveGame, 300);
      }
      // Debounce function to limit the rate at which saveGame can be called
      function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
          const later = () => {
            clearTimeout(timeout);
            func(...args);
          };
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
        };
      }

      function resetTrophies() {
        const trophyItems = document.querySelectorAll('.trophy-item');
        trophyItems.forEach(item => {
          item.classList.add('trophy-locked');
          const checkmark = item.querySelector('.trophy-checkmark');
          if (checkmark) {
            checkmark.style.opacity = '0';
          }
        });
      }

      function togglePhoneMenu() {
        phoneMenu.style.display = phoneMenu.style.display === 'none' ? 'block' : 'none';
        showPhoneEffect();
      }

      function showPhoneEffect() {
        const phone = document.getElementById('phone-placeholder');
        phone.style.animation = 'phoneEffect 0.3s ease-in-out';
        setTimeout(() => {
          phone.style.animation = 'float 3s ease-in-out infinite';
        }, 300);
      }
      shape.addEventListener('click', updateClickCount);
      startButton.addEventListener('click', startGame);
      trophyButton.addEventListener('click', toggleTrophyMenu);
      trophyMenuClose.addEventListener('click', toggleTrophyMenu);
      settingsButton.addEventListener('click', toggleSettingsMenu);
      settingsMenuClose.addEventListener('click', toggleSettingsMenu);
      clicksPerChangeInput.addEventListener('change', updateClicksPerChange);
      document.getElementById('reset-data-button').addEventListener('click', resetData);
      phonePlaceholder.addEventListener('click', togglePhoneMenu);

      function loadGame() {
        const loadGameEvent = {
          type: 'REQUEST_LOAD_GAME_EVENT'
        };
        window.parent.postMessage(loadGameEvent, '*');
      }
      window.addEventListener('message', (event) => {
        const {
          type,
          save_data
        } = event.data;
        if (type === 'RESPONSE_LOAD_GAME_EVENT') {
          if (save_data) {
            GG_ALL_GAME_CONFIG.clickCount = save_data.clickCount;
            GG_ALL_GAME_CONFIG.normalVisitAchieved = save_data.normalVisitAchieved || false;
            GG_ALL_GAME_CONFIG.mobileVisitAchieved = save_data.mobileVisitAchieved || false;
            GG_ALL_GAME_CONFIG.firefoxVisitAchieved = save_data.firefoxVisitAchieved || false;
            GG_ALL_GAME_CONFIG.edgeVisitAchieved = save_data.edgeVisitAchieved || false;
          }
          applyLoadedState();
          applyTrophyState();
          // Check browser visits after loading saved data
          checkBrowserVisits();
        }
      });
      // Problem: The checkBrowserVisits function was only being called if the game had started.
      // This could lead to a situation where browser-specific achievements weren't being properly
      // recognized if the game hadn't officially "started" yet.
      //
      // Solution: We now call checkBrowserVisits unconditionally after loading the game state.
      // This ensures that all browser-specific achievements are properly recognized and applied,
      // regardless of whether the game has officially started or not.
      setInterval(() => {
        if (GG_ALL_GAME_CONFIG.gameStarted) {
          saveGame({
            clickCount: GG_ALL_GAME_CONFIG.clickCount,
            normalVisitAchieved: GG_ALL_GAME_CONFIG.normalVisitAchieved,
            mobileVisitAchieved: GG_ALL_GAME_CONFIG.mobileVisitAchieved,
            firefoxVisitAchieved: GG_ALL_GAME_CONFIG.firefoxVisitAchieved,
            edgeVisitAchieved: GG_ALL_GAME_CONFIG.edgeVisitAchieved
          });
        }
      }, 3000);

      function saveGame(gameState) {
        const saveGameEvent = {
          type: 'REQUEST_SAVE_GAME_EVENT',
          save_data: gameState
        };
        window.parent.postMessage(saveGameEvent, '*');
        // Additional fix: Add a small delay before allowing the next save
        // This helps prevent rapid successive saves that could lead to data loss
        saveGame = debounce(saveGame, 300);
      }
      // Debounce function to limit the rate at which saveGame can be called
      function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
          const later = () => {
            clearTimeout(timeout);
            func(...args);
          };
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
        };
      }
      updateShape();
      updateProgressBar();
      loadGame();
      initializeTrophyDescriptions();
      // Remove these event listeners as they are no longer needed
      // The checkMobileVisit function is now called in the startGame function
    })();
  </script>

</body>

</html>