/*
Template Name: Game MonsterDuel
Game Name: Monster Duel
Game Description: A strategic turn-based RPG battle game. Train monsters, choose tactical moves, and defeat champions.
Game Icon: fas fa-fire
Game Category: Mega Games
Game Featured: true
*/
get_header();
?>



<style>
    .battle-scene {
        background: linear-gradient(to bottom, #1e293b, #0f172a);
        border-radius: 20px;
        padding: 50px;
        color: #fff;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        max-width: 900px;
        margin: 0 auto;
    }

    .monster-stage {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        min-height: 250px;
        margin-bottom: 50px;
        position: relative;
    }

    .monster-container {
        text-align: center;
        width: 200px;
    }

    .monster-img {
        font-size: 5rem;
        margin-bottom: 20px;
        transition: transform 0.3s;
    }

    .hp-bar-full {
        width: 100%;
        height: 12px;
        background: #334155;
        border-radius: 6px;
        overflow: hidden;
        margin-top: 10px;
    }

    .hp-bar-fill {
        height: 100%;
        background: #22c55e;
        transition: width 0.5s, background-color 0.5s;
    }

    .level-badge {
        font-size: 0.8rem;
        background: #334155;
        padding: 2px 10px;
        border-radius: 10px;
    }

    .battle-log {
        background: rgba(0, 0, 0, 0.5);
        padding: 20px;
        border-radius: 12px;
        margin-bottom: 30px;
        height: 100px;
        overflow-y: auto;
        font-family: monospace;
        text-align: left;
    }

    .action-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .attack-btn {
        padding: 15px;
        border-radius: 12px;
        font-weight: bold;
        text-transform: uppercase;
        border: none;
        transition: 0.2s;
    }

    .attack-btn:hover:not(:disabled) {
        transform: translateY(-3px);
    }

    .attack-btn:active:not(:disabled) {
        transform: translateY(0);
    }
</style>

<section class="py-2" style="min-height: calc(100vh - 120px); display: flex; flex-direction: column; justify-content: center;" style="background: #FFFFFF;">
    <div class="container text-center">
        <div class="battle-scene">
            <div class="monster-stage">
                <!-- Player Monster -->
                <div class="monster-container">
                    <span class="level-badge">LV. 15</span>
                    <div id="player-monster" class="monster-img"><i class="fas fa-dragon text-info"></i></div>
                    <div class="fw-bold">BLUE FLAME</div>
                    <div class="hp-bar-full">
                        <div id="player-hp" class="hp-bar-fill" style="width: 100%"></div>
                    </div>
                    <div class="small mt-1"><span id="player-hp-text">500</span>/500 HP</div>
                </div>

                <div class="h2 fw-bold text-muted">VS</div>

                <!-- Enemy Monster -->
                <div class="monster-container text-end">
                    <span class="level-badge">LV. 18</span>
                    <div id="enemy-monster" class="monster-img"><i class="fas fa-ghost text-danger"></i></div>
                    <div class="fw-bold">SHADOW SPIRIT</div>
                    <div class="hp-bar-full">
                        <div id="enemy-hp" class="hp-bar-fill" style="width: 100%"></div>
                    </div>
                    <div class="small mt-1"><span id="enemy-hp-text">650</span>/650 HP</div>
                </div>
            </div>

            <div class="battle-log" id="battle-log">
                Welcome to the arena! Choose your attack.
            </div>

            <div class="action-grid" id="action-panel">
                <button class="attack-btn btn-primary" onclick="window.handleTurn('strike')">FIRE STRIKE</button>
                <button class="attack-btn btn-warning" onclick="window.handleTurn('heal')">ENERGY RESTORE</button>
                <button class="attack-btn btn-info" onclick="window.handleTurn('guard')">STEEL GUARD</button>
                <button class="attack-btn btn-danger" onclick="window.handleTurn('ultimate')">ULTIMATE BURST</button>
            </div>
        </div>
    </div>
</section>

<!-- Result Modal -->
<div class="modal fade" id="duelModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg bg-dark text-white">
            <div class="modal-body text-center p-5">
                <i id="duel-icon" class="fas fa-trophy text-warning display-1 mb-4"></i>
                <h2 id="duel-title" class="fw-bold">VICTORY!</h2>
                <p id="duel-text" class="text-muted mb-4">You have defeated the Shadow Spirit.</p>
                <div class="d-grid gap-2">
                    <button class="btn btn-primary btn-lg fw-bold" onclick="location.reload()">ANOTHER DUEL</button>
                    <button class="btn btn-outline-light" onclick="shareDuel()"><i
                            class="fas fa-share-alt me-2"></i>SHARE VICTORY</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const log = document.getElementById('battle-log');
        const playerHP = document.getElementById('player-hp');
        const enemyHP = document.getElementById('enemy-hp');
        const playerHPText = document.getElementById('player-hp-text');
        const enemyHPText = document.getElementById('enemy-hp-text');
        const panel = document.getElementById('action-panel');
        const monsterP = document.getElementById('player-monster');
        const monsterE = document.getElementById('enemy-monster');

        let duelModal = null;
        if (typeof bootstrap !== 'undefined' && document.getElementById('duelModal')) {
            try {
                duelModal = new bootstrap.Modal(document.getElementById('duelModal'));
            } catch (e) {
                console.warn('Bootstrap Modal init failed', e);
            }
        }

        let stats = {
            player: { hp: 500, max: 500, pwr: 60 },
            enemy: { hp: 650, max: 650, pwr: 55 }
        };

        window.addLog = (msg) => {
            const p = document.createElement('p');
            p.className = 'mb-1 small';
            p.innerText = '> ' + msg;
            log.appendChild(p);
            log.scrollTop = log.scrollHeight;
        };

        window.handleTurn = async (move) => {
            panel.style.pointerEvents = 'none';
            panel.style.opacity = '0.5';

            // Player Move
            monsterP.style.transform = 'translateX(50px) scale(1.2)';
            await new Promise(r => setTimeout(r, 400));
            monsterP.style.transform = '';

            let dmg = 0;
            if (move === 'strike') {
                dmg = Math.floor(stats.player.pwr * (0.8 + Math.random() * 0.4));
                addLog(`Blue Flame uses FIRE STRIKE! Deals ${dmg} damage.`);
            } else if (move === 'heal') {
                const heal = 100;
                stats.player.hp = Math.min(stats.player.max, stats.player.hp + heal);
                addLog(`Blue Flame restores ${heal} energy!`);
            } else if (move === 'ultimate') {
                dmg = Math.floor(stats.player.pwr * 2);
                addLog(`ULTIMATE BURST CRITICAL! Deals ${dmg} damage.`);
            }

            stats.enemy.hp = Math.max(0, stats.enemy.hp - dmg);
            updateHP();

            if (stats.enemy.hp <= 0) return endGame('WIN');

            await new Promise(r => setTimeout(r, 800));

            // Enemy Move
            monsterE.style.transform = 'translateX(-50px) scale(1.2)';
            await new Promise(r => setTimeout(r, 400));
            monsterE.style.transform = '';

            const eDmg = Math.floor(stats.enemy.pwr * (0.8 + Math.random() * 0.4));
            stats.player.hp = Math.max(0, stats.player.hp - eDmg);
            addLog(`Shadow Spirit attacks with GHOST CLAW! Deals ${eDmg} damage.`);
            updateHP();

            if (stats.player.hp <= 0) return endGame('LOSE');

            panel.style.pointerEvents = 'all';
            panel.style.opacity = '1';
        };

        function updateHP() {
            playerHP.style.width = (stats.player.hp / stats.player.max * 100) + '%';
            enemyHP.style.width = (stats.enemy.hp / stats.enemy.max * 100) + '%';
            playerHPText.innerText = Math.round(stats.player.hp);
            enemyHPText.innerText = Math.round(stats.enemy.hp);

            // Color shift
            if (stats.player.hp < stats.player.max * 0.3) playerHP.style.background = '#ef4444';
            if (stats.enemy.hp < stats.enemy.max * 0.3) enemyHP.style.background = '#ef4444';
        }

        function endGame(status) {
            document.getElementById('duel-title').innerText = status === 'WIN' ? 'VICTORY!' : 'DEFEATED';
            document.getElementById('duel-icon').className = status === 'WIN' ? 'fas fa-trophy text-warning display-1' : 'fas fa-skull text-danger display-1';
            document.getElementById('duel-text').innerText = status === 'WIN' ? 'You have defeated the Shadow Spirit and claimed the arena!' : 'Your monster has fallen. Train harder!';

            var duelPopupTitle = status === 'WIN' ? 'VICTORY!' : 'DEFEATED';
            var duelPopupMsg = status === 'WIN' ? 'You have defeated the Shadow Spirit!' : 'Your monster has fallen.';
            if (duelModal) {
                duelModal.show();
            } else if (window.sttGamePopup) {
                sttGamePopup(duelPopupTitle, duelPopupMsg, {
                    actions: [{ label: 'Play Again', primary: true, onClick: function () { location.reload(); } }]
                });
            } else {
                alert(`${duelPopupTitle}\n${duelPopupMsg}`);
                location.reload();
            }
        }

        window.shareDuel = function () {
            const text = `I just won a Monster Duel in the local arena! Think you have a stronger team?`;
            if (navigator.share) {
                navigator.share({ title: 'Monster Duel', text: text, url: window.location.href });
            } else {
                navigator.clipboard.writeText(`${text} ${window.location.href}`);
                if (window.sttGameToast) sttGameToast('Victory shared!'); else alert('Victory shared!');
            }
        }
    });
</script>


<section class="py-5 bg-light">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card shadow-sm border-0">
                    <div class="card-body p-4">
                        <h3 class="fw-bold mb-3"><i class="fas fa-info-circle me-2 text-primary"></i>How to Play</h3>
                        <p class="mb-0">A rock-paper-scissors style card battle! Select your move to counter the
                            monster's attack. <strong>Fire beats Nature</strong>, <strong>Nature beats Water</strong>,
                            and <strong>Water beats Fire</strong>.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

  </main>
  <!-- FOOTER — matches _design-reference's footer exactly (site-footer >
       footer-inner > footer-top + footer-bottom), wired to real WP links. -->
  <div class="stt26">
  <footer class="site-footer">
    <div class="footer-inner">
      <div class="footer-top">
        <div class="footer-brand">
          <a class="brand" href="https://scriptandtools.com/">
            <span class="brand-mark" aria-hidden="true">&gt;_</span>
            <span class="brand-word">Script<span>&amp;</span>Tools</span>
          </a>
          <p class="footer-tagline">100+ free online tools, templates and scripts for developers &mdash; built and maintained by <a href="https://webpenter.com" target="_blank" rel="noopener noreferrer" style="color:inherit;">Webpenter</a>.</p>
          <div class="footer-social">
            <a href="https://twitter.com/scriptandtools" target="_blank" rel="noopener noreferrer" aria-label="Script &amp; Tools on X (Twitter)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4l16 16M20 4L4 20"/></svg></a>
            <a href="https://github.com/scriptandtools" target="_blank" rel="noopener noreferrer" aria-label="Script &amp; Tools on GitHub"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21"/></svg></a>
            <a href="https://linkedin.com/company/scriptandtools" target="_blank" rel="noopener noreferrer" aria-label="Script &amp; Tools on LinkedIn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="8" y1="11" x2="8" y2="16"/><line x1="8" y1="8" x2="8" y2="8"/><line x1="12" y1="11" x2="12" y2="16"/><path d="M12 13.5c0-1.4 1-2.5 2.5-2.5S17 12.1 17 13.5V16"/></svg></a>
          </div>

          <!-- Real, working subscribe form — posts to the site's existing newsletter AJAX handler -->
          <form class="footer-newsletter" id="fyp-nl-form">
            <label for="fyp-nl-email" class="visually-hidden">Email address</label>
            <input id="fyp-nl-email" class="blog-nl-input" type="email" placeholder="you@email.com" autocomplete="email" required>
            <button class="btn btn-primary blog-nl-btn" type="submit">Subscribe</button>
          </form>
          <p id="fyp-nl-msg" style="display:none;font-size:.8rem;margin-top:8px;"></p>
        </div>

        <div class="footer-col">
          <span class="footer-col-label">Explore</span>
          <nav aria-label="Explore">
            <a href="https://scriptandtools.com/tools/">All Tools</a>
            <a href="https://scriptandtools.com/projects/">Projects &amp; Scripts</a>
            <a href="https://scriptandtools.com/games/">Games</a>
            <a href="https://scriptandtools.com/blogs/">Blog</a>
            <a href="https://scriptandtools.com/#submit-tool">Submit a Tool</a>
          </nav>
        </div>

        <div class="footer-col">
          <span class="footer-col-label">Popular categories</span>
          <nav aria-label="Popular categories">
            <a href="https://scriptandtools.com/tool-category/developer-tools/">Developer Tools</a><a href="https://scriptandtools.com/tool-category/calculators/">Calculators</a><a href="https://scriptandtools.com/tool-category/youtube-tools/">YouTube Tools</a><a href="https://scriptandtools.com/tool-category/design-tools/">Design Tools</a><a href="https://scriptandtools.com/tool-category/web-tools/">Web Tools</a>          </nav>
        </div>

        <div class="footer-col">
          <span class="footer-col-label">Company</span>
          <nav aria-label="Company">
            <a href="https://scriptandtools.com/about/">About Us</a>
            <a href="https://webpenter.com/team" target="_blank" rel="noopener noreferrer">Our Team</a>
            <a href="https://scriptandtools.com/contact-us/">Contact</a>
            <a href="https://scriptandtools.com/#services">Hire Our Team</a>
          </nav>
        </div>
      </div>

      <div class="footer-bottom">
        <p>&copy; <span id="year"></span> Script &amp; Tools. All rights reserved.</p>
        <div class="footer-legal">
          <a href="https://scriptandtools.com/privacy-policy/">Privacy Policy</a>
          <a href="https://scriptandtools.com/terms-of-service/">Terms of Service</a>
          <a href="https://scriptandtools.com/cookie-policy/">Cookie Policy</a>
        </div>
      </div>
    </div>
  </footer>
  </div><!-- /.stt26 (footer) -->


  <!-- Game Modal -->
  <div class="modal fade" id="gameModal" tabindex="-1" aria-labelledby="gameModalLabel" aria-hidden="true"
    style="z-index: 9999;">
    <div class="modal-dialog modal-fullscreen">
      <div class="modal-content" style="background: rgba(0,0,0,0.9); border: none;">
        <div class="modal-header border-0 p-3" style="background: var(--dark); z-index: 10;">
          <h5 class="modal-title text-white" id="gameModalLabel">Playing Game</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body p-0 overflow-hidden d-flex align-items-center justify-content-center">
          <div id="game-loader" class="position-absolute text-white text-center">
            <i class="fas fa-spinner fa-spin fa-3x mb-3"></i>
            <p>Loading Game...</p>
          </div>
          <iframe id="game-iframe" src=""
            style="width: 100%; height: 100%; border: none; opacity: 0; transition: opacity 0.3s ease;"></iframe>
        </div>
      </div>
    </div>
  </div>

  <style>
    /* Game Modal specific fixes */
    #gameModal .modal-dialog.modal-fullscreen {
      margin: 0;
      max-width: none;
      height: 100%;
    }

    #gameModal .modal-body {
      background: #000;
    }

    @media (max-width: 768px) {
      #gameModal .modal-header h5 {
        font-size: 1rem;
      }
    }
  </style>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const gameModal = document.getElementById('gameModal');
      const gameIframe = document.getElementById('game-iframe');
      const gameLoader = document.getElementById('game-loader');
      const gameTitle = document.getElementById('gameModalLabel');
      const hud = document.getElementById('game-hud');

      if (gameModal) {
        // Handle showing modal - show HUD
        gameModal.addEventListener('show.bs.modal', function () {
          if (hud) hud.style.display = 'block';
        });

        // Handle closing - reset iframe to stop audio/game, hide HUD
        gameModal.addEventListener('hidden.bs.modal', function () {
          gameIframe.src = '';
          gameIframe.style.opacity = '0';
          gameLoader.style.display = 'block';
          if (hud) hud.style.display = 'none';
        });

        // Global trigger for game play
        document.addEventListener('click', function (e) {
          const playBtn = e.target.closest('[data-play-game]');
          if (playBtn) {
            e.preventDefault();
            const gameUrl = playBtn.getAttribute('data-game-url');
            const title = playBtn.getAttribute('data-game-title');
            if (title) gameTitle.innerText = title;

            // Add play_modal=1 param
            const url = new URL(gameUrl, window.location.origin);
            url.searchParams.set('play_modal', '1');
            gameIframe.src = url.toString();

            const bsModal = new bootstrap.Modal(gameModal);
            bsModal.show();
          }
        });

        // Handle iframe load
        gameIframe.addEventListener('load', function () {
          if (gameIframe.src && gameIframe.src !== 'about:blank') {
            gameIframe.style.opacity = '1';
            gameLoader.style.display = 'none';
          }
        });

        // HUD Exit Button Binding
        const hudExitBtn = document.getElementById('hud-exit-btn');
        if (hudExitBtn) {
          hudExitBtn.addEventListener('click', function (e) {
            e.preventDefault();
            const bsModalCheck = bootstrap.Modal.getInstance(gameModal);
            if (bsModalCheck) bsModalCheck.hide();
          });
        }
      }
    });
  </script>

  <script>
    // Set current year in footer
    document.addEventListener('DOMContentLoaded', function () {
      const yearSpan = document.getElementById('year');
      if (yearSpan) {
        yearSpan.textContent = new Date().getFullYear();
      }
    });
  </script>

  <!-- Full Screen Game HUD -->
  <div id="game-hud" style="display: none;">
    <!-- Exit Button -->
    <a href="#" id="hud-exit-btn" class="game-hud-btn exit-btn" title="Exit Game">
      <i class="fas fa-times"></i>
    </a>

    <!-- Info Button -->
    <button id="show-game-info" class="game-hud-btn info-btn" title="How to Play" aria-label="How to Play">
      <i class="fas fa-info"></i>
    </button>

    <!-- Instructions Modal -->
    <div id="game-instructions-modal" class="game-modal-overlay">
      <div class="game-modal-content">
        <div class="game-modal-header">
          <h3><i class="fas fa-gamepad me-2"></i>How to Play</h3>
          <button id="close-game-info" class="close-modal-btn" aria-label="Close how to play modal"><i class="fas fa-times"></i></button>
        </div>
        <div class="game-modal-body" id="game-instructions-body">
          <!-- Content will be injected here via JS -->
          <p>Follow the on-screen instructions to play.</p>
        </div>
      </div>
    </div>
  </div>

  <style>
    /* HUD Buttons */
    .game-hud-btn {
      position: fixed;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      cursor: pointer;
      transition: all 0.3s ease;
      z-index: 9999;
      text-decoration: none;
    }

    .game-hud-btn:hover {
      background: rgba(59, 130, 246, 0.8);
      transform: scale(1.1);
      color: white;
      border-color: rgba(59, 130, 246, 1);
    }

    .exit-btn {
      top: 20px;
      right: 20px;
      background: rgba(239, 68, 68, 0.2);
    }

    .exit-btn:hover {
      background: #ef4444;
    }

    .info-btn {
      bottom: 20px;
      right: 20px;
    }

    /* Modal Overlay */
    .game-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(5px);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    .game-modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    /* Modal Content */
    .game-modal-content {
      background: #1f2937;
      width: 90%;
      max-width: 500px;
      border-radius: 16px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
      transform: translateY(20px);
      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      border: 1px solid #374151;
      color: #f3f4f6;
      overflow: hidden;
    }

    .game-modal-overlay.active .game-modal-content {
      transform: translateY(0);
    }

    .game-modal-header {
      padding: 20px;
      background: #111827;
      border-bottom: 1px solid #374151;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .game-modal-header h3 {
      margin: 0;
      font-size: 1.25rem;
      color: #fff;
    }

    .close-modal-btn {
      background: transparent;
      border: none;
      color: #9ca3af;
      font-size: 1.2rem;
      cursor: pointer;
      transition: color 0.2s;
    }

    .close-modal-btn:hover {
      color: #fff;
    }

    .game-modal-body {
      padding: 25px;
      line-height: 1.6;
      font-size: 1.05rem;
    }

    .game-modal-body p {
      margin-bottom: 0;
      color: #d1d5db;
    }

    .game-modal-body strong {
      color: #fff;
    }
  </style>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const hud = document.getElementById('game-hud');
      // HUD display is now managed by the Modal Events, not hardcoded here.

      // Elements
      const showInfoBtn = document.getElementById('show-game-info');
      const closeInfoBtn = document.getElementById('close-game-info');
      const modal = document.getElementById('game-instructions-modal');
      const modalBody = document.getElementById('game-instructions-body');

      // Logic to pull instruction content from the page
      // We look for the standard "How to Play" section hidden by CSS
      const hiddenInstructions = document.querySelector('section.py-5.bg-light .card-body');

      if (hiddenInstructions) {
        // Clone the content for the modal
        // We want to grab the paragraph text, removing the icon header if present
        const paragraphs = hiddenInstructions.querySelectorAll('p, ul, ol');
        if (paragraphs.length > 0) {
          modalBody.innerHTML = '';
          paragraphs.forEach(p => {
            const clone = p.cloneNode(true);
            clone.style.color = '#d1d5db'; // Ensure text color is fixed for dark mode
            modalBody.appendChild(clone);
          });
        }
      } else {
        // If no instructions found, maybe hide the info button?
        // showInfoBtn.style.display = 'none';
      }

      // Event Listeners
      function toggleModal(show) {
        if (show) modal.classList.add('active');
        else modal.classList.remove('active');
      }

      if (showInfoBtn) showInfoBtn.addEventListener('click', () => toggleModal(true));
      if (closeInfoBtn) closeInfoBtn.addEventListener('click', () => toggleModal(false));

      // Close on backdrop click
      if (modal) {
        modal.addEventListener('click', (e) => {
          if (e.target === modal) toggleModal(false);
        });
      }
    });
  </script>

  <!-- Seamless Site-Wide AJAX Page Loader & Hover Prefetcher -->
  <script>
    (function() {
      const pageCache = new Map();

      // Mouseover prefetching for instant 0ms loads
      document.addEventListener('mouseover', function(e) {
        const link = e.target.closest('a');
        if (!link) return;
        const href = link.getAttribute('href');
        if (!href || href.startsWith('#') || href.startsWith('javascript:') || href.includes('wp-admin') || href.includes('wp-login')) return;
        if (!href.includes(window.location.hostname) && !href.startsWith('/')) return;

        if (!pageCache.has(href)) {
          fetch(href).then(function(res) {
            if (res.ok) return res.text();
          }).then(function(html) {
            if (html) pageCache.set(href, html);
          }).catch(function() {});
        }
      });

      // The AJAX loader only swaps <main>. The breadcrumb and the menu's
      // highlighted item live outside it, so copy them from the fetched page
      // too - otherwise they stay stuck on the page you came from.
      function syncPageChrome(doc) {
        const oldBc = document.querySelector('nav.breadcrumb');
        const newBc = doc.querySelector('nav.breadcrumb');
        const oldWrap = oldBc ? oldBc.parentElement : null;
        const newWrap = newBc ? newBc.parentElement : null;
        if (newWrap && oldWrap) {
          oldWrap.innerHTML = newWrap.innerHTML;
        } else if (newWrap && !oldWrap) {
          const main = document.getElementById('main-content');
          if (main && main.parentNode) main.parentNode.insertBefore(document.importNode(newWrap, true), main);
        } else if (oldWrap && !newWrap) {
          oldWrap.remove();
        }

        ['.primary-nav', '.mobile-menu'].forEach(function(sel) {
          const cur = document.querySelectorAll(sel + ' a');
          const nxt = doc.querySelectorAll(sel + ' a');
          if (cur.length !== nxt.length) return;
          cur.forEach(function(a, i) {
            a.classList.toggle('current-menu-item', nxt[i].classList.contains('current-menu-item'));
          });
        });
      }

      window.loadToolViaAjax = function(url, pushHistory = true) {
        const mainContent = document.getElementById('main-content');
        if (!mainContent) {
          window.location.href = url;
          return;
        }

        let progressBar = document.getElementById('ajax-tool-progress');
        if (!progressBar) {
          progressBar = document.createElement('div');
          progressBar.id = 'ajax-tool-progress';
          progressBar.style.cssText = 'position:fixed;top:0;left:0;height:4px;width:0%;background:linear-gradient(90deg,#2563eb,#10b981);z-index:999999;transition:width 0.3s ease, opacity 0.3s ease;box-shadow:0 0 10px rgba(37,99,235,0.5);';
          document.body.appendChild(progressBar);
        }

        progressBar.style.opacity = '1';
        progressBar.style.width = '35%';
        mainContent.style.opacity = '0.4';
        mainContent.style.transition = 'opacity 0.2s ease';

        const fetchPromise = pageCache.has(url) 
          ? Promise.resolve(pageCache.get(url)) 
          : fetch(url).then(function(res) {
              if (!res.ok) throw new Error('HTTP ' + res.status);
              return res.text();
            });

        fetchPromise
          .then(function(html) {
            progressBar.style.width = '100%';

            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            const newMain = doc.getElementById('main-content');

            if (newMain) {
              if (doc.title) document.title = doc.title;

              // 1. Sync custom <style> and <link rel="stylesheet"> tags from fetched document's <head>
              const fetchedHeadTags = doc.querySelectorAll('head style, head link[rel="stylesheet"]');
              fetchedHeadTags.forEach(function(el) {
                if (el.tagName.toLowerCase() === 'style' && el.textContent.trim()) {
                  const s = document.createElement('style');
                  s.textContent = el.textContent;
                  document.head.appendChild(s);
                } else if (el.tagName.toLowerCase() === 'link' && el.href) {
                  if (!document.querySelector('link[href="' + el.href + '"]')) {
                    const l = document.createElement('link');
                    Array.from(el.attributes).forEach(function(attr) { l.setAttribute(attr.name, attr.value); });
                    document.head.appendChild(l);
                  }
                }
              });

              // 2. Swap main content
              mainContent.innerHTML = newMain.innerHTML;
              mainContent.style.opacity = '1';
              syncPageChrome(doc);

              // 3. Update Body Classes & Header Nav active state
              const cleanUrl = url.split('?')[0].replace(/\/$/, '');

              if (doc.body.classList.contains('single-tool')) {
                document.body.className = doc.body.className;
              } else {
                document.body.classList.remove('single-tool', 'single-game');
                document.body.style.paddingTop = '';
              }

              // Update active menu link
              document.querySelectorAll('.primary-nav a, .mobile-menu a').forEach(function(navLink) {
                navLink.classList.remove('active');
                const nHref = navLink.getAttribute('href');
                if (nHref) {
                  const cleanNHref = nHref.split('?')[0].replace(/\/$/, '');
                  if (cleanNHref === cleanUrl || (cleanNHref === '' && cleanUrl.endsWith(window.location.hostname))) {
                    navLink.classList.add('active');
                  }
                }
              });

              // Sync category slider in header if present
              const newCatWrap = doc.querySelector('.categories-wrapper');
              const currentCatWrap = document.querySelector('.categories-wrapper');
              if (newCatWrap && currentCatWrap) {
                currentCatWrap.innerHTML = newCatWrap.innerHTML;
                currentCatWrap.style.display = '';
              }

              // Remove leftover manual ajax back button
              const oldAjaxBack = mainContent.querySelector('.ajax-back-to-tools');
              if (oldAjaxBack) oldAjaxBack.remove();

              if (pushHistory) {
                history.pushState({ ajaxUrl: url }, '', url);
              }

              // 4. Execute script tags sequentially and dispatch DOMContentLoaded event
              const scripts = Array.from(mainContent.querySelectorAll('script'));
              (async function runScripts() {
                for (let i = 0; i < scripts.length; i++) {
                  const oldScript = scripts[i];
                  const newScript = document.createElement('script');
                  Array.from(oldScript.attributes).forEach(function(attr) {
                    newScript.setAttribute(attr.name, attr.value);
                  });

                  if (oldScript.src) {
                    await new Promise(function(resolve) {
                      newScript.onload = resolve;
                      newScript.onerror = resolve;
                      newScript.src = oldScript.src;
                      oldScript.parentNode.replaceChild(newScript, oldScript);
                    });
                  } else {
                    newScript.textContent = oldScript.textContent;
                    oldScript.parentNode.replaceChild(newScript, oldScript);
                  }
                }

                // Fire events so all scripts waiting for DOMContentLoaded initialize
                document.dispatchEvent(new Event('DOMContentLoaded'));
                window.dispatchEvent(new Event('load'));
              })();

              window.scrollTo({ top: 0, behavior: 'smooth' });
            } else {
              window.location.href = url;
            }
          })
          .catch(function(err) {
            console.error('AJAX Load Error:', err);
            window.location.href = url;
          })
          .finally(function() {
            setTimeout(function() {
              if (progressBar) {
                progressBar.style.opacity = '0';
                progressBar.style.width = '0%';
              }
            }, 300);
          });
      };

      document.addEventListener('click', function(e) {
        const link = e.target.closest('a');
        if (!link) return;

        const href = link.getAttribute('href');
        if (!href || href.startsWith('#') || href.startsWith('javascript:') || href.includes('wp-admin') || href.includes('wp-login')) return;

        // Ensure internal link
        const isInternal = href.startsWith('/') || href.includes(window.location.hostname);
        if (!isInternal) return;

        const isNavMenu = link.closest('.primary-nav') || 
                         link.closest('.mobile-menu') || 
                         link.closest('.logo-area') || 
                         link.classList.contains('logo-area');

        const isToolCard = link.classList.contains('card-link-wrapper') ||
                           link.classList.contains('back-tools-link') ||
                           link.classList.contains('tool-back-btn') ||
                           link.closest('.tool-crumbs') ||
                           link.closest('#tools-grid') || 
                           link.closest('#toolsContainer') || 
                           link.closest('.tools-section') || 
                           link.closest('.tool-item') || 
                           link.closest('.tool-card') || 
                           link.closest('.project-card') || 
                           link.closest('.center-tool-card') || 
                           link.closest('.pro-tool-card') || 
                           link.closest('.suggestions-dropdown');

        const isBlogCard = link.closest('.blog-card') || 
                           link.closest('.post-card') || 
                           link.closest('.blog-item') || 
                           link.closest('#blogs-grid') || 
                           link.closest('#blogsContainer') || 
                           link.closest('.blog-content') || 
                           link.closest('.read-more') || 
                           link.classList.contains('blog-link');

        if (isNavMenu || isToolCard || isBlogCard) {
          e.preventDefault();
          window.loadToolViaAjax(href, true);
        }
      });

      window.addEventListener('popstate', function(e) {
        if (e.state && e.state.ajaxUrl) {
          window.loadToolViaAjax(e.state.ajaxUrl, false);
        } else {
          window.loadToolViaAjax(window.location.href, false);
        }
      });
    })();
  </script>

<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/fyp/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
    <script>
    (function(){
        // Supports multiple newsletter forms per page (e.g. footer + blog page
        // newsletter band): any form with id="fyp-nl-form" (legacy, footer) or
        // class="fyp-newsletter-form" gets wired up independently.
        var forms = document.querySelectorAll('#fyp-nl-form, .fyp-newsletter-form');
        forms.forEach(function(form){
            var input = form.querySelector('.blog-nl-input');
            var btn   = form.querySelector('.blog-nl-btn');
            var msg   = form.parentElement ? form.parentElement.querySelector('.fyp-nl-msg, #fyp-nl-msg') : null;

            form.addEventListener('submit', function(e){
                e.preventDefault();

                var email = input ? input.value.trim() : '';
                if (!email) { showMsg('Please enter your email address.', false); return; }

                if (btn) {
                    btn.disabled = true;
                    btn.textContent = 'Subscribing…';
                }

                var data = new FormData();
                data.append('action', 'fyp_newsletter_subscribe');
                data.append('nonce',  '2a89477b44');
                data.append('email',  email);

                fetch('https://scriptandtools.com/wp-admin/admin-ajax.php', {
                    method: 'POST',
                    body: data,
                    credentials: 'same-origin'
                })
                .then(function(r){ return r.json(); })
                .then(function(res){
                    if (res.success) {
                        showMsg(res.data.message, true);
                        if (input) input.value = '';
                        if (btn) btn.textContent = 'Subscribed ✓';
                    } else {
                        showMsg(res.data.message, false);
                        if (btn) {
                            btn.disabled = false;
                            btn.textContent = 'Subscribe';
                        }
                    }
                })
                .catch(function(){
                    showMsg('Something went wrong. Please try again.', false);
                    if (btn) {
                        btn.disabled = false;
                        btn.textContent = 'Subscribe';
                    }
                });
            });

            function showMsg(text, success) {
                if (msg) {
                    msg.textContent = text;
                    msg.style.display = 'block';
                    msg.style.color = success ? '#86efac' : '#fca5a5';
                }
            }
        });
    })();
    </script>
        <script>
        document.addEventListener('DOMContentLoaded', function () {
            const loginForm = document.querySelector('form.login-register');

            if (loginForm) {
                loginForm.addEventListener('submit', function (event) {
                    const email = document.getElementById('email');
                    const password = document.getElementById('pwd');

                    // Basic email validation
                    if (!validateEmail(email.value)) {
                        alert('Please enter a valid email address.');
                        event.preventDefault();
                        return;
                    }

                    // Basic password validation
                    if (password.value.length < 6) {
                        alert('Password must be at least 6 characters long.');
                        event.preventDefault();
                        return;
                    }
                });
            }

            const signupForm = document.querySelector('form.signup-register');

            if (signupForm) {
                signupForm.addEventListener('submit', function (event) {
                    const username = document.getElementById('name');
                    const email = document.getElementById('email');
                    const password = document.getElementById('password');

                    // Basic username validation
                    if (username.value.trim() === '') {
                        alert('Username is required.');
                        event.preventDefault();
                        return;
                    }

                    // Basic email validation
                    if (!validateEmail(email.value)) {
                        alert('Please enter a valid email address.');
                        event.preventDefault();
                        return;
                    }

                    // Basic password validation
                    if (password.value.length < 6) {
                        alert('Password must be at least 6 characters long.');
                        event.preventDefault();
                        return;
                    }
                });
            }

            function validateEmail(email) {
                const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return re.test(String(email).toLowerCase());
            }
        });
    </script>
    <div id="stt-game-hero-slot" hidden>        <div class="stt26">
        <section class="game-hero-v2" id="gameHeroV2" aria-labelledby="game-heading">
          <div class="game-hero-top">
            <div class="game-hero-icon" aria-hidden="true"><i class="fas fa-fire"></i></div>
            <div class="game-hero-text">
              <h1 id="game-heading">Monster Duel</h1>
              <a class="game-hero-cat" href="https://scriptandtools.com/game-category/mega-games/">Mega Games</a>
              <span class="game-hero-meta"><svg viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26"/></svg> 4.4 &middot; Free &middot; No sign-up</span>
            </div>
            <div class="game-hero-actions">
              <button class="ghv2-icon-btn" id="gameFullscreenBtn" type="button" aria-pressed="false" aria-label="Play full screen" title="Play full screen">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M21 16v3a2 2 0 0 1-2 2h-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
              </button>
              <button class="ghv2-icon-btn" id="gameShareBtn" type="button" aria-label="Copy link to this game" title="Copy link">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.07 0l2.83-2.83a5 5 0 0 0-7.07-7.07l-1.5 1.5"/><path d="M14 11a5 5 0 0 0-7.07 0L4.1 13.83a5 5 0 0 0 7.07 7.07l1.5-1.5"/></svg>
              </button>
              <button class="ghv2-icon-btn" id="gameBookmarkBtn" type="button" aria-pressed="false" aria-label="Save this game" title="Save">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 21l-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
              </button>
            </div>
          </div>
        </section>
        </div>
        </div>
<div id="stt-game-below-slot" hidden>        <div class="stt26">

                <section class="tool-section" aria-labelledby="about-heading">
          <div class="section-container">
            <h2 id="about-heading">About Monster Duel</h2>
            <p class="tool-section-sub">A strategic turn-based RPG battle game. Train monsters, choose tactical moves, and defeat champions.</p>
          </div>
        </section>
        
        <section class="tool-section" aria-labelledby="why-heading" style="background:var(--surface-alt);">
          <div class="section-container">
            <h2 id="why-heading">Why play Monster Duel here</h2>
            <div class="feature-grid">
              <div class="feature-item">
                <div class="feature-icon" aria-hidden="true"><i class="fas fa-bolt"></i></div>
                <h3>Play Instantly</h3>
                <p>Runs right in your browser — no install, no plugins, no waiting.</p>
              </div>
              <div class="feature-item">
                <div class="feature-icon" aria-hidden="true"><i class="fas fa-gift"></i></div>
                <h3>Totally Free</h3>
                <p>No sign-up, no paywall, no hidden costs. Just open it and play.</p>
              </div>
              <div class="feature-item">
                <div class="feature-icon" aria-hidden="true"><i class="fas fa-mobile-screen-button"></i></div>
                <h3>Works Everywhere</h3>
                <p>Play on desktop, tablet, or phone with touch-friendly controls.</p>
              </div>
              <div class="feature-item">
                <div class="feature-icon" aria-hidden="true"><i class="fas fa-shield-halved"></i></div>
                <h3>Safe &amp; Lightweight</h3>
                <p>No downloads to worry about — the whole game loads in seconds.</p>
              </div>
            </div>
          </div>
        </section>

        <section class="tool-section" aria-labelledby="faq-heading">
          <div class="section-container">
            <h2 id="faq-heading">Frequently asked questions</h2>
            <div class="tool-faq-list">
                            <details class="tool-faq-item">
                <summary>Is Monster Duel free to play?<svg class="icon icon-sm chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></summary>
                <div class="tool-faq-a"><p>Yes — Monster Duel is completely free to play on Script &amp; Tools, with no sign-up required.</p></div>
              </details>
                            <details class="tool-faq-item">
                <summary>Do I need to download anything to play Monster Duel?<svg class="icon icon-sm chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></summary>
                <div class="tool-faq-a"><p>No. Monster Duel runs directly in your web browser, so there is nothing to download or install.</p></div>
              </details>
                            <details class="tool-faq-item">
                <summary>Can I play Monster Duel on my phone?<svg class="icon icon-sm chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></summary>
                <div class="tool-faq-a"><p>Yes, Monster Duel works on mobile and tablet browsers with touch controls, as well as on desktop.</p></div>
              </details>
                          </div>
          </div>
        </section>
        <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Is Monster Duel free to play?","acceptedAnswer":{"@type":"Answer","text":"Yes \u2014 Monster Duel is completely free to play on Script & Tools, with no sign-up required."}},{"@type":"Question","name":"Do I need to download anything to play Monster Duel?","acceptedAnswer":{"@type":"Answer","text":"No. Monster Duel runs directly in your web browser, so there is nothing to download or install."}},{"@type":"Question","name":"Can I play Monster Duel on my phone?","acceptedAnswer":{"@type":"Answer","text":"Yes, Monster Duel works on mobile and tablet browsers with touch controls, as well as on desktop."}}]}</script>

                <section class="tool-section" aria-labelledby="related-games-heading" style="border-top:1px solid var(--border);">
          <div class="section-container">
            <h2 id="related-games-heading">More games to try</h2>
            <div class="tool-list">
                            <article class="tool-card">
                <div class="tool-preview">        <div class="tool-preview-icon">
          <div class="tool-preview-icon-badge"><i class="fas fa-map-signs" aria-hidden="true"></i></div>
        </div>
        </div>
                <div class="tool-card-body">
                  <div class="tool-card-top"><span class="tool-row-cat">Mega Games</span></div>
                  <h3><a href="https://scriptandtools.com/games/labyrinth/">Labyrinth Escape</a></h3>
                  <p>A maze navigation puzzle where players must find the exit before time runs out. Features procedural generation.</p>
                </div>
              </article>
                            <article class="tool-card">
                <div class="tool-preview">        <div class="tool-preview-icon">
          <div class="tool-preview-icon-badge"><i class="fas fa-fort-awesome" aria-hidden="true"></i></div>
        </div>
        </div>
                <div class="tool-card-body">
                  <div class="tool-card-top"><span class="tool-row-cat">Mega Games</span></div>
                  <h3><a href="https://scriptandtools.com/games/guardian/">Tower Guardian</a></h3>
                  <p>A strategic defense challenge. Build your defenses and protect the core!</p>
                </div>
              </article>
                            <article class="tool-card">
                <div class="tool-preview">        <div class="tool-preview-icon">
          <div class="tool-preview-icon-badge"><i class="fas fa-rocket" aria-hidden="true"></i></div>
        </div>
        </div>
                <div class="tool-card-body">
                  <div class="tool-card-top"><span class="tool-row-cat">Mega Games</span></div>
                  <h3><a href="https://scriptandtools.com/games/hell/">Bullet Hell Pilot</a></h3>
                  <p>A frantic space shooter. Dodge thousands of bullets and destroy the alien mother-ship!</p>
                </div>
              </article>
                            <article class="tool-card">
                <div class="tool-preview">        <div class="tool-preview-icon">
          <div class="tool-preview-icon-badge"><i class="fas fa-shield-alt" aria-hidden="true"></i></div>
        </div>
        </div>
                <div class="tool-card-body">
                  <div class="tool-card-top"><span class="tool-row-cat">Mega Games</span></div>
                  <h3><a href="https://scriptandtools.com/games/knight/">Knight&#8217;s Quest</a></h3>
                  <p>A top-down dungeon crawler. Explore, defeat enemies, and collect treasure!</p>
                </div>
              </article>
                          </div>
          </div>
        </section>
        
        </div>
        </div>
<script>var sttGameLayoutConfig = {"block-stack":{"canvas":"#block-stack","overlays":["#start-overlay","#pause-overlay","#gameover-overlay"],"stats":[{"id":"score","label":"Score"},{"id":"level","label":"Level"},{"id":"best","label":"Best","wide":true}],"dpad":[{"id":"btn-rotate","dir":"up"},{"id":"btn-left","dir":"left"},{"id":"btn-down","dir":"down"},{"id":"btn-right","dir":"right"}],"controls":[]},"alien-defense":{"canvas":"#alienDefenseCanvas","overlays":["#start-overlay","#gameover-overlay"],"stats":[{"id":"score","label":"Score"},{"id":"level","label":"Level"}],"dpad":[{"id":"btn-left","dir":"left"},{"id":"btn-shoot","dir":"up","label":"Shoot"},{"id":"btn-right","dir":"right"}],"controls":[]},"tap-flyer":{"canvas":"#tapFlyerCanvas","overlays":["#start-overlay","#game-over-overlay"],"stats":[],"dpad":[],"controls":[]},"breakout":{"canvas":"#breakoutCanvas","overlays":["#start-overlay","#gameover-overlay"],"stats":[{"id":"score","label":"Score"},{"id":"level","label":"Level"},{"id":"lives","label":"Lives"}],"dpad":[{"id":"btn-left","dir":"left"},{"id":"btn-right","dir":"right"}],"controls":[]},"pong":{"canvas":"#pongCanvas","overlays":["#start-overlay","#gameover-overlay"],"stats":[{"id":"p1-score","label":"You"},{"id":"p2-score","label":"CPU"}],"dpad":[{"id":"btn-up","dir":"up"},{"id":"btn-down","dir":"down"}],"controls":[]},"snake":{"canvas":"#gameCanvas","overlays":["#start-screen","#game-over"],"stats":[{"id":"current-score","label":"Score"},{"id":"high-score","label":"Best"}],"dpad":[],"controls":[]},"match3":{"canvas":"","overlays":[],"stats":[{"id":"score","label":"Score"},{"id":"best","label":"Best"}],"dpad":[],"controls":[]},"aim":{"canvas":"#aim-trainer-canvas","overlays":["#start-screen"],"stats":[{"id":"score","label":"Score"},{"id":"timer","label":"Time"},{"id":"accuracy","label":"Accuracy"}],"dpad":[],"controls":[]},"archery":{"canvas":"#archery-canvas","overlays":["#start-screen"],"stats":[{"id":"archery-score","label":"Score","wide":true}],"dpad":[],"controls":[]},"guardian":{"canvas":"#tower-canvas","overlays":["#start-screen"],"stats":[{"id":"tower-gold","label":"Gold"},{"id":"tower-lives","label":"Lives"}],"dpad":[],"controls":[]},"traffic":{"canvas":"#traffic-canvas","overlays":["#start-screen"],"stats":[{"id":"traffic-coins","label":"Coins","wide":true}],"dpad":[],"controls":[]},"hell":{"canvas":"#hell-canvas","overlays":["#start-screen"],"stats":[{"id":"hell-score","label":"Score","wide":true}],"dpad":[],"controls":[]},"labyrinth":{"canvas":"#laby-canvas","overlays":["#start-screen"],"stats":[{"id":"laby-timer","label":"Time","wide":true}],"dpad":[],"controls":[]}}; var sttGameSlug = "duel";</script>

<script>
    (function() {
        // Arrow keys, Space, Page Up/Down, Home and End are the browser's
        // native "scroll the page" keys — every game here binds its own
        // keydown handler for movement/controls but none of them call
        // preventDefault(), so pressing e.g. Down/Up while playing also
        // scrolls the whole page underneath the game. Block just that
        // default behavior globally on game pages, except while focus is
        // genuinely inside a real form control (the Typing game's text
        // input, a button, a link) where those keys still need to do their
        // normal job (move the caret, activate the button, etc.).
        var SCROLL_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' ', 'Spacebar', 'PageUp', 'PageDown', 'Home', 'End'];
        var SKIP_TAGS = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A'];
        window.addEventListener('keydown', function(e) {
            if (SCROLL_KEYS.indexOf(e.key) === -1) return;
            var active = document.activeElement;
            if (active && (SKIP_TAGS.indexOf(active.tagName) !== -1 || active.isContentEditable)) return;
            e.preventDefault();
        }, { passive: false });

        var DPAD_ICONS = {
            up: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12a8 8 0 1 1 2.3 5.6"/><polyline points="4 18 4 12 10 12"/></svg>',
            left: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>',
            down: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>',
            right: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>'
        };
        var DPAD_CELL = { up: '2 / 1', left: '1 / 2', down: '2 / 2', right: '3 / 2' };

        function buildSidebar(config) {
            var sidebar = document.createElement('aside');
            sidebar.className = 'game-sidebar-v2';
            sidebar.setAttribute('aria-label', 'Score and controls');
            var hasContent = false;

            // Stat tiles — reuse each game's own live score/level/etc. elements.
            var liveStats = (config.stats || []).filter(function (s) { return document.getElementById(s.id); });
            if (liveStats.length) {
                hasContent = true;
                var statRow = document.createElement('div');
                statRow.className = 'stat-row-v2';
                liveStats.forEach(function (s) {
                    var tile = document.createElement('div');
                    tile.className = 'stat-tile-v2' + (s.wide ? ' is-wide' : '');
                    var label = document.createElement('span');
                    label.className = 'stv2-label';
                    label.textContent = s.label;
                    tile.appendChild(label);
                    var valueEl = document.getElementById(s.id);
                    valueEl.classList.add('stv2-value');
                    tile.appendChild(valueEl);
                    statRow.appendChild(tile);
                });
                sidebar.appendChild(statRow);
            }

            // D-pad — only the directions this specific game actually exposes.
            var liveDpad = (config.dpad || []).filter(function (d) { return document.getElementById(d.id); });
            if (liveDpad.length) {
                hasContent = true;
                var dpadBox = document.createElement('div');
                dpadBox.className = 'dpad-box-v2';
                var hint = document.createElement('p');
                hint.className = 'dpad-hint-v2';
                hint.textContent = 'Tap or click — these never scroll the page';
                dpadBox.appendChild(hint);
                var dpad = document.createElement('div');
                dpad.className = 'dpad-v2' + (liveDpad.length === 1 ? ' is-single' : '');
                liveDpad.forEach(function (d) {
                    var btn = document.getElementById(d.id);
                    btn.classList.add('dpad-btn-v2');
                    if (liveDpad.length === 1) {
                        btn.innerHTML = (DPAD_ICONS[d.dir] || '') + '<span>' + (d.label || 'Play') + '</span>';
                    } else {
                        btn.style.gridArea = DPAD_CELL[d.dir] || 'auto';
                        if (!btn.innerHTML.trim()) btn.innerHTML = DPAD_ICONS[d.dir] || '';
                    }
                    dpad.appendChild(btn);
                });
                dpadBox.appendChild(dpad);
                sidebar.appendChild(dpadBox);
            }

            // Extra controls (pause/restart quick-access outside the overlays).
            var liveControls = (config.controls || []).filter(function (c) { return document.getElementById(c.id); });
            if (liveControls.length) {
                hasContent = true;
                var row = document.createElement('div');
                row.className = 'game-controls-row-v2';
                liveControls.forEach(function (c) {
                    var btn = document.getElementById(c.id);
                    btn.classList.add('gcv2-btn');
                    row.appendChild(btn);
                });
                sidebar.appendChild(row);
            }

            return hasContent ? sidebar : null;
        }

        function applyStandardLayout() {
            var gameSection = document.querySelector('section.py-2, .match3-wrap, .game-wrap, .spin-app');
            var infoSection = document.querySelector('section.py-5.bg-light, .game-instructions');
            var heroSlot = document.getElementById('stt-game-hero-slot');
            var belowSlot = document.getElementById('stt-game-below-slot');
            if (!gameSection || document.getElementById('game-stage-v2-anchor')) return;
            // Captured before any mutation below — once gameSection gets
            // reparented into boardWrap (which ends up inside wrapper),
            // gameSection.parentNode no longer points at its original
            // place in the page, it points at boardWrap. Inserting
            // "wrapper" relative to gameSection at that point would mean
            // inserting wrapper into its own descendant, which throws
            // (DOM hierarchy error) and aborts the whole function midway —
            // this was the actual cause of every non-Block-Stack game
            // breaking. Always insert relative to this original spot.
            var originalParent = gameSection.parentNode;
            var originalNextSibling = gameSection.nextSibling;

            var config = (window.sttGameLayoutConfig && window.sttGameSlug) ? window.sttGameLayoutConfig[window.sttGameSlug] : null;

            var wrapper = document.createElement('div');
            wrapper.id = 'modern-game-layout-wrapper';
            wrapper.className = 'stt26';

            var stage = document.createElement('section');
            stage.id = 'game-stage-v2-anchor';
            stage.className = 'game-stage-v2';
            stage.setAttribute('aria-label', document.title);

            var boardWrap = document.createElement('div');
            boardWrap.className = 'game-board-wrap';

            // Surgical extraction (canvas + overlays into the board, score/
            // controls into a real sidebar) only happens for a game listed
            // in STT_GAME_LAYOUT_CONFIG, where every element id is known
            // and verified ahead of time. For every other game — canvas or
            // not — splitting pieces out of its markup is unsafe: these 24
            // files each have their own bespoke nesting and inline sizing
            // (e.g. an outer section with "min-height:calc(100vh - 120px)"
            // + a solid white background), and silently moving just the
            // canvas out while leaving that sized, backgrounded shell
            // behind as "leftover" turned it into a near-viewport-height
            // blank white box with no game in it. So: a configured game
            // gets full extraction; everything else keeps its ENTIRE
            // original markup completely intact and untouched, just
            // contained inside the new compact shell.
            var canvasEl = (config && config.canvas) ? gameSection.querySelector(config.canvas) : null;
            var sidebar = config ? buildSidebar(config) : null;

            if (config && canvasEl) {
                boardWrap.appendChild(canvasEl);
                (config.overlays || []).forEach(function (sel) {
                    var el = gameSection.querySelector(sel) || document.querySelector(sel);
                    if (el) {
                        el.classList.add('game-overlay-v2');
                        el.querySelectorAll('#final-score, #final-p1, #final-p2, [id*="final" i]').forEach(function (s) {
                            s.classList.add('score-big');
                        });
                        boardWrap.appendChild(el);
                    }
                });
            } else {
                boardWrap.classList.add('is-passthrough');
                boardWrap.appendChild(gameSection);
            }

            stage.appendChild(boardWrap);
            if (sidebar) stage.appendChild(sidebar);
            wrapper.appendChild(stage);

            if (heroSlot) {
                heroSlot.removeAttribute('hidden');
                if (originalParent) {
                    originalParent.insertBefore(heroSlot, originalNextSibling);
                } else {
                    document.getElementById('main-content').prepend(heroSlot);
                }
            }
            if (originalParent) {
                originalParent.insertBefore(wrapper, originalNextSibling);
            } else {
                document.getElementById('main-content').appendChild(wrapper);
            }

            // A matched config means every meaningful element (canvas,
            // overlays, stats, d-pad) has already been extracted above —
            // what's left of the original section is just now-empty
            // wrapper divs and orphaned labels (e.g. a stat box's "Score"
            // span with its value already moved out), which would look
            // like confusing debris if left in the document. Discard it
            // outright. An unconfigured game was never split, so there is
            // nothing to discard — gameSection is already exactly where it
            // needs to be (inside boardWrap, untouched).
            if (config && canvasEl) {
                gameSection.remove();
            }

            if (infoSection) {
                infoSection.remove(); // Superseded by scriptandtools_game_below_sections()'s own content.
            }

            if (belowSlot) {
                belowSlot.removeAttribute('hidden');
                wrapper.parentNode.insertBefore(belowSlot, wrapper.nextSibling);
            }

            wireHeroActions();
        }

        /* Fullscreen / share / bookmark — new hero actions from the artifact. */
        function wireHeroActions() {
            var fsBtn = document.getElementById('gameFullscreenBtn');
            var boardWrap = document.querySelector('.game-board-wrap');
            if (fsBtn && boardWrap) {
                // Only boardWrap itself goes fullscreen (not the hero it
                // lives in) — so fsBtn, sitting in the hero, disappears
                // from view the moment fullscreen starts, leaving no
                // visible way back out except the Esc key. Add a real close
                // (✕) button directly inside boardWrap, shown only
                // while actually in fullscreen.
                var exitBtn = document.createElement('button');
                exitBtn.type = 'button';
                exitBtn.className = 'game-fs-exit-btn';
                exitBtn.setAttribute('aria-label', 'Exit full screen');
                exitBtn.title = 'Exit full screen';
                exitBtn.hidden = true;
                exitBtn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>';
                boardWrap.appendChild(exitBtn);

                function exitFullscreen() {
                    (document.exitFullscreen || document.webkitExitFullscreen || function(){}).call(document);
                }
                exitBtn.addEventListener('click', exitFullscreen);

                fsBtn.addEventListener('click', function () {
                    if (!document.fullscreenElement) {
                        (boardWrap.requestFullscreen || boardWrap.webkitRequestFullscreen || function(){}).call(boardWrap);
                    } else {
                        exitFullscreen();
                    }
                });
                document.addEventListener('fullscreenchange', function () {
                    var isFs = !!document.fullscreenElement;
                    fsBtn.setAttribute('aria-pressed', isFs ? 'true' : 'false');
                    var label = isFs ? 'Exit full screen' : 'Play full screen';
                    fsBtn.setAttribute('aria-label', label);
                    fsBtn.title = label;
                    exitBtn.hidden = !isFs;
                });
            }

            var shareBtn = document.getElementById('gameShareBtn');
            if (shareBtn) {
                shareBtn.addEventListener('click', function () {
                    var url = window.location.href;
                    if (navigator.share) {
                        navigator.share({ title: document.title, url: url }).catch(function () {});
                    } else if (navigator.clipboard) {
                        navigator.clipboard.writeText(url);
                    }
                });
            }

            var bookmarkBtn = document.getElementById('gameBookmarkBtn');
            if (bookmarkBtn && window.sttGameSlug) {
                var key = 'stt_saved_games';
                function getSaved() { try { return JSON.parse(localStorage.getItem(key) || '[]'); } catch (e) { return []; } }
                function isSaved() { return getSaved().indexOf(window.sttGameSlug) !== -1; }
                function render() { bookmarkBtn.setAttribute('aria-pressed', isSaved() ? 'true' : 'false'); }
                bookmarkBtn.addEventListener('click', function () {
                    var saved = getSaved();
                    var idx = saved.indexOf(window.sttGameSlug);
                    if (idx === -1) saved.push(window.sttGameSlug); else saved.splice(idx, 1);
                    try { localStorage.setItem(key, JSON.stringify(saved)); } catch (e) {}
                    render();
                });
                render();
            }
        }

        function tryApply() {
            try { applyStandardLayout(); } catch (e) { console.error('Game layout error:', e); }
        }

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', tryApply);
        }
        window.addEventListener('load', tryApply);
        setTimeout(tryApply, 300);
    })();
</script>

<style>
    /* The game archive's own "immersive dark" body/footer overrides have
       been retired (see enqueue_immersive_game_assets() in functions.php)
       — the new layout keeps the real site header/breadcrumb/footer
       visible, matching every other page type on the site. */
    body.single-game { background-color: var(--bg, #fff); }
    body.single-game .site-footer { display: block; }
    .game-floating-back-btn { display: none !important; }

    .stt26 .game-stage-v2 { max-width: 1520px; margin: 0 auto; }
    .stt26 #main-content,
    #main-content { display: flex; flex-direction: column; min-height: 0; }
    .stt26 .game-leftover-controls .container,
    .stt26 .game-leftover-controls .row,
    .stt26 .game-leftover-controls [class*="col-"] {
        width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding: 0 !important; margin: 0 !important;
    }
</style>
</body>

</html>