<!DOCTYPE html>
<html lang="da">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Royal Game of Ur</title>
    <style>
        :root {
            --board-bg: #f3dcb4;
            --square-border: #8b5a2b;
            --player1-color: #4a708b;
            --player2-color: #f0f0f0;
            --rosette-color: #c0392b; /* Rød til rosetten */
            --rosette-color-alt: #3498db; /* Blå til rosetten */
            --highlight-color: rgba(46, 204, 113, 0.4);
            --button-bg: #8b5a2b;
            --selection-glow: #00aaff;
            --die-white: #f0f0f0;
            --die-black: #333;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #3d2c1d;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
        }
        
        #main-container {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform 0.1s ease-out;
            transform-origin: top center;
        }

        header {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 650px;
            margin-bottom: 10px;
            box-sizing: border-box;
        }

        h1 {
            margin: 0;
            font-size: 1.8em;
            cursor: ew-resize;
            user-select: none;
        }

        .footer-controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            margin-top: 5px;
        }

        .toggles-wrapper {
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .footer-buttons {
            display: flex;
            gap: 15px;
        }

        .button {
            background-color: var(--button-bg);
            color: white;
            border: 2px solid #f3dcb4;
            padding: 10px 20px;
            font-size: 1em;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.2s, color 0.2s;
            white-space: nowrap;
            text-decoration: none;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .button:hover {
            background-color: #a06b3a;
        }

        .button:disabled {
            background-color: #5d4a3a;
            color: #aaa;
            cursor: not-allowed;
            border-color: #777;
        }

        .toggle-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }
        .toggle-title {
            font-weight: bold;
            margin: 0 0 2px 0;
            font-size: 1em;
        }
        .switch-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9em;
        }
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--button-bg);
            transition: .4s;
            border-radius: 24px;
            border: 1px solid #f3dcb4;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .slider:before {
            transform: translateX(26px);
        }

        .game-container {
            display: flex;
            gap: 20px;
            align-items: flex-start;
            width: 100%;
            justify-content: center;
        }

        .player-area { 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            gap: 15px; 
        }
        #board { 
            display: grid;
            grid-template-columns: repeat(3, 80px);
            grid-template-rows: repeat(8, 80px);
            gap: 2px;
            background-color: var(--square-border);
            border: 5px solid var(--square-border);
            border-radius: 5px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.4);
            position: relative;
        }
        .square { width: 80px; height: 80px; background-color: var(--board-bg); border: 1px solid var(--square-border); display: flex; justify-content: center; align-items: center; position: relative; transition: background-color 0.2s; }
        .square[data-col="0"][data-row="4"], .square[data-col="0"][data-row="5"], .square[data-col="2"][data-row="4"], .square[data-col="2"][data-row="5"] { background-color: transparent; border: none; }
        
        /* NY KODE: Styling for fremhævelse af træk */
        .hint-highlight {
            background-color: var(--highlight-color) !important;
            box-shadow: inset 0 0 10px #2ecc71;
        }

        .square svg {
            width: 75%;
            height: 75%;
            z-index: 0;
            position: absolute; 
        }

        .piece { 
            width: 60px; 
            height: 60px; 
            border-radius: 50%; 
            cursor: grab; 
            border: 3px solid rgba(0,0,0,0.5); 
            box-shadow: inset 0 -5px 10px rgba(0,0,0,0.3), 0 2px 3px rgba(0,0,0,0.3); 
            position: relative; 
            z-index: 1; 
        }

        .start-zone .piece, .end-zone .piece {
            margin-top: -30px;
            z-index: 2;
        }
        .start-zone .piece:first-of-type, .end-zone .piece:first-of-type {
            margin-top: 0;
        }

        .piece.dragging { opacity: 0.4; transition: opacity 0.2s; }
        .piece:active { cursor: grabbing; transform: scale(1.1); }
        .piece.selected { outline: 3px solid var(--selection-glow); cursor: pointer; }
        .player1 { background-color: var(--player1-color); }
        .player2 { background-color: var(--player2-color); }
        .drag-over { background-color: var(--highlight-color); }
        .start-zone, .end-zone { 
            min-height: 80px; 
            width: 120px; 
            border: 2px dashed #888; 
            border-radius: 10px; 
            padding: 5px;
            display: flex; 
            flex-wrap: wrap; 
            justify-content: center; 
            align-content: flex-start; 
            gap: 5px; 
            box-sizing: border-box; 
            background-color: rgba(0, 0, 0, 0.2); 
            overflow: hidden;
            transition: background-color 0.2s;
        }
        .zone-label { width: 100%; text-align: center; font-size: 0.9em; color: rgba(255, 255, 255, 0.7); margin: 0 0 5px 0; padding: 0; pointer-events: none; }
        
        footer {
            margin-top: 10px;
            font-size: 0.8em;
            color: #aaa;
            text-align: center;
        }
        
        .dice-container {
            width: 120px;
            box-sizing: border-box;
            border: 2px dashed #888;
            border-radius: 10px;
            padding: 5px 8px;
            background-color: rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            user-select: none;
        }
        .dice-container.rolling {
            animation: shake 0.4s;
        }
        .dice-result {
            font-size: 2.5em;
            font-weight: bold;
            color: #fff;
            width: 40px;
            text-align: center;
        }
        .dice-visuals {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4px;
        }
        .die {
            width: 20px;
            height: 20px;
            transition: opacity 0.3s;
        }

        body.three-dice-mode .die:last-child {
            opacity: 0.2;
        }
        
        @keyframes shake {
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(2px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(4px, 0, 0); }
        }

        @keyframes fadeAndShrink { to { opacity: 0; transform: scale(0.5); } }
        .piece.captured { animation: fadeAndShrink 0.4s forwards; }

        @media (max-width: 800px) {
            body { padding: 10px; }
            header { max-width: 100%; flex-wrap: wrap; justify-content: center; gap: 10px; }
            h1 { font-size: 1.2em; text-align: center; width: 100%; }
            .footer-buttons { flex-wrap: wrap; justify-content: center; }
            .button { font-size: 0.9em; }

            .game-container { 
                gap: 10px;
            }
            
            .player-area { 
                flex-direction: column; 
                width: 100px;
            }
            .start-zone, .end-zone, .dice-container { 
                width: 100%;
                min-height: auto;
            }
            .dice-container {
                flex-direction: column;
                gap: 5px;
                padding: 8px;
            }
            .dice-result {
                font-size: 2em;
            }

            #board { 
                grid-template-columns: repeat(3, 60px); 
                grid-template-rows: repeat(8, 60px); 
            }
            .square { width: 60px; height: 60px; }
            .piece { width: 48px; height: 48px; }
            .start-zone .piece, .end-zone .piece {
                margin-top: -20px;
            }
        }
    </style>
</head>
<body>

    <header>
        <h1>The Royal Game of Ur</h1>
    </header>

    <div id="main-container">
        <div class="game-container">
            <div class="player-area">
                <div class="dice-container" data-player="1" title="Klik for at slå med terningerne">
                    <div class="dice-result">0</div>
                    <div class="dice-visuals">
                        <div class="die"></div><div class="die"></div><div class="die"></div><div class="die"></div>
                    </div>
                </div>
                <div id="player1-start" class="start-zone"><p class="zone-label">Start</p></div>
                <div id="player1-end" class="end-zone"><p class="zone-label">I mål</p></div>
            </div>
            <div id="board">
                </div>
            <div class="player-area">
                <div class="dice-container" data-player="2" title="Klik for at slå med terningerne">
                    <div class="dice-result">0</div>
                    <div class="dice-visuals">
                        <div class="die"></div><div class="die"></div><div class="die"></div><div class="die"></div>
                    </div>
                </div>
                <div id="player2-start" class="start-zone"><p class="zone-label">Start</p></div>
                <div id="player2-end" class="end-zone"><p class="zone-label">I mål</p></div>
            </div>
        </div>
        
        <div class="footer-controls">
            <div class="toggles-wrapper">
                <div class="toggle-container">
                    <p class="toggle-title">Rosetter</p>
                    <div class="switch-wrapper">
                        <span>Frie</span>
                        <label class="toggle-switch">
                            <input type="checkbox" id="rosette-toggle" checked>
                            <span class="slider"></span>
                        </label>
                        <span>Låste</span>
                    </div>
                </div>
                <div class="toggle-container">
                    <p class="toggle-title">Terninger</p>
                    <div class="switch-wrapper">
                        <span>3</span>
                        <label class="toggle-switch">
                            <input type="checkbox" id="dice-toggle" checked> <span class="slider"></span>
                        </label>
                        <span>4</span>
                    </div>
                </div>
                <div class="toggle-container">
                    <p class="toggle-title">Træk-Hjælp</p>
                    <div class="switch-wrapper">
                        <span>Fra</span>
                        <label class="toggle-switch">
                            <input type="checkbox" id="hint-toggle">
                            <span class="slider"></span>
                        </label>
                        <span>Til</span>
                    </div>
                </div>
            </div>
            
            <div class="footer-buttons">
                <button id="reset-button" class="button">Forfra</button>
                <a href="rules.html" target="_blank" class="button">Info</a>
                <button id="undo-button" class="button" disabled>Fortryd</button>
                </div>
        </div>
        
        <footer>
            Royal Game of Ur board (c) 2025 by Kihap.dk
        </footer>
    </div>

    <script>
        const h1 = document.querySelector('h1');
        const mainContainer = document.getElementById('main-container');
        const boardElement = document.getElementById('board');
        const p1Start = document.getElementById('player1-start');
        const p1End = document.getElementById('player1-end');
        const p2Start = document.getElementById('player2-start');
        const p2End = document.getElementById('player2-end');
        const undoButton = document.getElementById('undo-button');
        const rosetteToggle = document.getElementById('rosette-toggle');
        const totalPieces = 7;
        let selectedPiece = null;
        let isAnimating = false;
        let lastMove = null;
        let rosettesAreSafe = true;

        const rosetteSVG = `
            <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
                <g transform="rotate(22.5, 50, 50)">
                    <rect x="47" y="5" width="6" height="35" rx="3" fill="var(--rosette-color-alt)" transform="rotate(45, 50, 50)"></rect>
                    <rect x="47" y="5" width="6" height="35" rx="3" fill="var(--rosette-color-alt)" transform="rotate(135, 50, 50)"></rect>
                    <rect x="47" y="5" width="6" height="35" rx="3" fill="var(--rosette-color-alt)" transform="rotate(225, 50, 50)"></rect>
                    <rect x="47" y="5" width="6" height="35" rx="3" fill="var(--rosette-color-alt)" transform="rotate(315, 50, 50)"></rect>
                    <rect x="47" y="5" width="6" height="35" rx="3" fill="var(--rosette-color)" transform="rotate(0, 50, 50)"></rect>
                    <rect x="47" y="5" width="6" height="35" rx="3" fill="var(--rosette-color)" transform="rotate(90, 50, 50)"></rect>
                    <rect x="47" y="5" width="6" height="35" rx="3" fill="var(--rosette-color)" transform="rotate(180, 50, 50)"></rect>
                    <rect x="47" y="5" width="6" height="35" rx="3" fill="var(--rosette-color)" transform="rotate(270, 50, 50)"></rect>
                    <circle cx="50" cy="50" r="12" fill="var(--rosette-color)"></circle>
                </g>
            </svg>
        `;

        for (let row = 0; row < 8; row++) {
            for (let col = 0; col < 3; col++) {
                const square = document.createElement('div');
                square.classList.add('square');
                square.dataset.col = col;
                square.dataset.row = row;

                const isRosette = (col === 0 && row === 0) || (col === 2 && row === 0) || (col === 1 && row === 3) || (col === 0 && row === 6) || (col === 2 && row === 6);
                
                if (isRosette) {
                    square.innerHTML = rosetteSVG;
                    square.classList.add('rosette');
                }
                boardElement.appendChild(square);
            }
        }

        function createPiecesAndSetup() { for (let i = 0; i < totalPieces; i++) { const piece1 = document.createElement('div'); piece1.classList.add('piece', 'player1'); piece1.id = `p1-${i}`; piece1.draggable = true; p1Start.appendChild(piece1); const piece2 = document.createElement('div'); piece2.classList.add('piece', 'player2'); piece2.id = `p2-${i}`; piece2.draggable = true; p2Start.appendChild(piece2); } addInteractionsToPieces(); }
        
        // --- OPDATERET KODE: addInteractionsToPieces håndterer nu mouseenter/mouseleave for hints ---
        function addInteractionsToPieces() { 
            document.querySelectorAll('.piece').forEach(piece => { 
                piece.addEventListener('click', handlePieceClick); 
                piece.addEventListener('dragstart', handleDragStart); 
                piece.addEventListener('dragend', cleanupDraggingState);
                piece.addEventListener('mouseenter', handlePieceMouseEnter);
                piece.addEventListener('mouseleave', handlePieceMouseLeave);
            }); 
        }

        function sendPieceHome(piece) { if (piece.classList.contains('player1')) p1Start.appendChild(piece); else p2Start.appendChild(piece); }
        function isValidMoveTarget(targetZone, movingPiece) { if (!movingPiece) return false; const isPlayer1 = movingPiece.classList.contains('player1'); const isTargetMultiZone = targetZone.classList.contains('start-zone') || targetZone.classList.contains('end-zone'); if (isTargetMultiZone) { if (isPlayer1) return targetZone.id === 'player1-start' || targetZone.id === 'player1-end'; else return targetZone.id === 'player2-start' || targetZone.id === 'player2-end'; } const pieceOnSquare = targetZone.querySelector('.piece'); if (!pieceOnSquare) return true; const isOpponent = !movingPiece.classList.contains(pieceOnSquare.classList.contains('player1') ? 'player1' : 'player2'); const isRosette = targetZone.classList.contains('rosette'); return isOpponent && (!isRosette || !rosettesAreSafe); }
        async function handlePieceClick(e) { if (isAnimating) return; e.stopPropagation(); const clickedPiece = e.currentTarget; if (selectedPiece) { if (selectedPiece === clickedPiece) { selectedPiece.classList.remove('selected'); selectedPiece = null; return; } const targetZone = clickedPiece.parentElement; if (isValidMoveTarget(targetZone, selectedPiece)) { await executeMove(selectedPiece, targetZone); } else { selectedPiece.classList.remove('selected'); clickedPiece.classList.add('selected'); selectedPiece = clickedPiece; } } else { selectedPiece = clickedPiece; selectedPiece.classList.add('selected'); } }
        async function handleZoneClick(e) { if (isAnimating || !selectedPiece) return; const targetZone = e.currentTarget; if (isValidMoveTarget(targetZone, selectedPiece)) { await executeMove(selectedPiece, targetZone); } }
        async function executeMove(movingPiece, targetZone) { isAnimating = true; undoButton.disabled = true; const pieceOnSquare = targetZone.querySelector('.piece'); const isOpponent = pieceOnSquare && !movingPiece.classList.contains(pieceOnSquare.classList.contains('player1') ? 'player1' : 'player2'); lastMove = { movedPiece: movingPiece, fromZone: movingPiece.parentElement, toZone: targetZone, capturedPiece: isOpponent ? pieceOnSquare : null }; if (isOpponent) await animateSendHome(pieceOnSquare); await animateMove(movingPiece, targetZone); undoButton.disabled = false; isAnimating = false; }
        function animateSendHome(piece) { return new Promise(resolve => { piece.classList.add('captured'); piece.addEventListener('animationend', () => { piece.classList.remove('captured'); sendPieceHome(piece); resolve(); }, { once: true }); }); }
        function animateMove(piece, targetZone) { return new Promise(resolve => { const startRect = piece.getBoundingClientRect(); targetZone.appendChild(piece); const endRect = piece.getBoundingClientRect(); const deltaX = startRect.left - endRect.left; const deltaY = startRect.top - endRect.top; piece.style.transition = 'none'; piece.style.transform = `translate(${deltaX}px, ${deltaY}px)`; piece.offsetHeight; piece.style.transition = 'transform 0.4s ease-in-out'; piece.style.transform = 'none'; if (selectedPiece === piece) { piece.classList.remove('selected'); selectedPiece = null; } piece.addEventListener('transitionend', () => { piece.style.transition = ''; resolve(); }, { once: true }); }); }
        function handleDragStart(e) { if (selectedPiece) { selectedPiece.classList.remove('selected'); selectedPiece = null; } e.dataTransfer.setData('text/plain', e.target.id); e.dataTransfer.effectAllowed = 'move'; setTimeout(() => { e.target.classList.add('dragging'); }, 0); }
        function cleanupDraggingState() { const dragged = document.querySelector('.piece.dragging'); if (dragged) { dragged.classList.remove('dragging'); } }
        function handleUndo() { if (!lastMove || isAnimating) return; lastMove.fromZone.appendChild(lastMove.movedPiece); if (lastMove.capturedPiece) { lastMove.toZone.appendChild(lastMove.capturedPiece); } lastMove = null; undoButton.disabled = true; }
        const dropZones = document.querySelectorAll('.square, .start-zone, .end-zone'); dropZones.forEach(zone => { zone.addEventListener('click', handleZoneClick); zone.addEventListener('dragover', (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; }); zone.addEventListener('dragenter', (e) => { const draggingPiece = document.querySelector('.piece.dragging'); if (isValidMoveTarget(e.currentTarget, draggingPiece)) e.currentTarget.classList.add('drag-over'); }); zone.addEventListener('dragleave', (e) => e.currentTarget.classList.remove('drag-over')); zone.addEventListener('drop', async (e) => { e.preventDefault(); if (isAnimating) return; const targetZone = e.currentTarget; targetZone.classList.remove('drag-over'); const draggedPieceId = e.dataTransfer.getData('text/plain'); const draggedPiece = document.getElementById(draggedPieceId); if (draggedPiece && isValidMoveTarget(targetZone, draggedPiece)) { await executeMove(draggedPiece, targetZone); } }); });
        
        const resetButton = document.getElementById('reset-button');
        resetButton.addEventListener('click', () => {
            if (confirm('Er du sikker på, at du vil starte forfra?')) {
                if (isAnimating) return;
                if (selectedPiece) { selectedPiece.classList.remove('selected'); selectedPiece = null; }
                document.querySelectorAll('.piece.player1').forEach(piece => p1Start.appendChild(piece));
                document.querySelectorAll('.piece.player2').forEach(piece => p2Start.appendChild(piece));
                lastMove = null;
                undoButton.disabled = true;
                rosetteToggle.checked = true;
                rosettesAreSafe = true;
                mainContainer.style.transform = 'scale(1)';
            }
        });
        
        undoButton.addEventListener('click', handleUndo);
        rosetteToggle.addEventListener('change', () => { rosettesAreSafe = rosetteToggle.checked; });
        document.addEventListener('touchend', cleanupDraggingState);
        document.addEventListener('touchcancel', cleanupDraggingState);

        let isDraggingZoom = false;

        const setZoom = (clientX) => {
            const trackRect = h1.getBoundingClientRect();
            let percent = (clientX - trackRect.left) / trackRect.width;
            percent = Math.max(0, Math.min(1, percent));
            const scale = 0.1 + (percent * 0.9);
            mainContainer.style.transform = `scale(${scale})`;
        };

        const startDrag = (e) => {
            isDraggingZoom = true;
            document.addEventListener('mousemove', moveDrag);
            document.addEventListener('touchmove', moveDrag);
            document.addEventListener('mouseup', endDrag);
            document.addEventListener('touchend', endDrag);
            setZoom(e.clientX || e.touches[0].clientX);
        };

        const moveDrag = (e) => {
            if (!isDraggingZoom) return;
            e.preventDefault();
            setZoom(e.clientX || e.touches[0].clientX);
        };

        const endDrag = () => {
            isDraggingZoom = false;
            document.removeEventListener('mousemove', moveDrag);
            document.removeEventListener('touchmove', moveDrag);
            document.removeEventListener('mouseup', endDrag);
            document.removeEventListener('touchend', endDrag);
        };

        h1.addEventListener('mousedown', startDrag);
        h1.addEventListener('touchstart', startDrag);
        
        createPiecesAndSetup();

        window.addEventListener('beforeunload', (event) => {
            event.preventDefault();
            event.returnValue = '';
        });

        const diceToggle = document.getElementById('dice-toggle');
        const diceContainers = document.querySelectorAll('.dice-container');
        let useFourDice = true;
        let diceAreRolling = false;
        let p1LastRoll = 0;
        let p2LastRoll = 0;

        const dieSVG = (isWhite) => {
            const tipColor = isWhite ? 'var(--die-white)' : 'var(--die-black)';
            return `
            <svg viewBox="0 0 20 20">
                <path d="M10 2 L18 18 L2 18 Z" fill="var(--die-black)" stroke="#999" stroke-width="1"/>
                <path d="M10 2 L13 9 L7 9 Z" fill="${tipColor}"/>
            </svg>
            `;
        };

        function updateDiceVisibility() {
            document.body.classList.toggle('three-dice-mode', !useFourDice);
        }

        diceToggle.addEventListener('change', () => {
            useFourDice = diceToggle.checked;
            updateDiceVisibility();
        });
        
        diceContainers.forEach(container => {
            const resultEl = container.querySelector('.dice-result');
            const dieVisuals = container.querySelectorAll('.die');
            
            dieVisuals.forEach(die => die.innerHTML = dieSVG(false));

            container.addEventListener('click', () => {
                if (diceAreRolling) return;
                diceAreRolling = true;
                
                container.classList.add('rolling');

                setTimeout(() => {
                    let totalResult = 0;
                    const dieResults = [];
                    const numDice = useFourDice ? 4 : 3;

                    for (let i = 0; i < numDice; i++) {
                        const result = Math.round(Math.random());
                        totalResult += result;
                        dieResults.push(result);
                    }

                    if (!useFourDice && totalResult === 0) {
                        totalResult = 4;
                    }
                    
                    // Gem resultatet for den rigtige spiller
                    if(container.dataset.player === "1") {
                        p1LastRoll = totalResult;
                    } else {
                        p2LastRoll = totalResult;
                    }

                    resultEl.textContent = totalResult;

                    dieVisuals.forEach((die, index) => {
                        if (index < numDice) {
                            die.innerHTML = dieSVG(dieResults[index] === 1);
                        } else {
                            die.innerHTML = dieSVG(false);
                        }
                    });
                    
                    container.classList.remove('rolling');
                    diceAreRolling = false;
                }, 400);
            });
        });
        
        updateDiceVisibility();

        // --- NY KODE: Logik for Træk-Hjælp ---
        const hintToggle = document.getElementById('hint-toggle');
        let moveHintsActive = false;

        const player1Path = [[0,3], [0,2], [0,1], [0,0], [1,0], [1,1], [1,2], [1,3], [1,4], [1,5], [1,6], [1,7], [0,7], [0,6]];
        const player2Path = [[2,3], [2,2], [2,1], [2,0], [1,0], [1,1], [1,2], [1,3], [1,4], [1,5], [1,6], [1,7], [2,7], [2,6]];

        hintToggle.addEventListener('change', () => {
            moveHintsActive = hintToggle.checked;
        });

        function findIndexOnPath(col, row, path) {
            return path.findIndex(pos => pos[0] === col && pos[1] === row);
        }
        
        function handlePieceMouseEnter(e) {
            if (!moveHintsActive) return;

            const piece = e.currentTarget;
            const isPlayer1 = piece.classList.contains('player1');
            const diceRoll = isPlayer1 ? p1LastRoll : p2LastRoll;

            if (diceRoll === 0) return;

            const currentPath = isPlayer1 ? player1Path : player2Path;
            const endZone = isPlayer1 ? p1End : p2End;
            let currentIndex = -1;

            if (piece.parentElement.classList.contains('square')) {
                const col = parseInt(piece.parentElement.dataset.col);
                const row = parseInt(piece.parentElement.dataset.row);
                currentIndex = findIndexOnPath(col, row, currentPath);
            }

            const destinationIndex = currentIndex + diceRoll;

            if (destinationIndex < currentPath.length) {
                const [destCol, destRow] = currentPath[destinationIndex];
                const destSquare = document.querySelector(`.square[data-col="${destCol}"][data-row="${destRow}"]`);
                if (destSquare && isValidMoveTarget(destSquare, piece)) {
                    destSquare.classList.add('hint-highlight');
                }
            } else if (destinationIndex === currentPath.length) { // Præcis i mål
                if(isValidMoveTarget(endZone, piece)) {
                    endZone.classList.add('hint-highlight');
                }
            }
        }

        function handlePieceMouseLeave() {
            const highlighted = document.querySelector('.hint-highlight');
            if (highlighted) {
                highlighted.classList.remove('hint-highlight');
            }
        }

    </script>
</body>
</html>