@extends('layouts.questionnaire-game', [
    'pageTitle' => $battery->title,
    'qgTheme' => $qgTheme,
    'faviconUrl' => $faviconUrl ?? null,
    'projectName' => $projectName ?? null,
])

@section('content')
    <div class="qg-play">
        <div class="qg-play__bg" aria-hidden="true"></div>

        <div class="qg-play__wires-layer" aria-hidden="true">
            <x-questionnaire.splash-wire-corner corner="tl" />
            <x-questionnaire.splash-wire-corner corner="tr" />
        </div>

        <header class="qg-hud">
            <div class="qg-hud__start">
                @if (! empty($logoUrl))
                    <img
                        src="{{ $logoUrl }}"
                        alt=""
                        class="qg-hud__logo"
                        loading="eager"
                        decoding="async"
                    />
                @endif
                <p class="qg-hud__title" title="{{ $battery->title }}">{{ $battery->title }}</p>
            </div>
            <div class="qg-hud__controls">
                <div class="qg-hud__actions">
                    <button type="button" class="qg-hud__btn" id="qg-pause-toggle" aria-pressed="false">
                        Pausar
                    </button>
                    <div class="qg-audio-ctrl">
                        <button
                            type="button"
                            class="qg-audio-toggle qg-audio-toggle--hud"
                            id="qg-audio-toggle"
                            aria-pressed="false"
                            aria-label="Mutar música"
                            title="Mutar música"
                        >
                            <svg
                                viewBox="0 0 24 24"
                                aria-hidden="true"
                                width="20"
                                height="20"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2.2"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            >
                                <path d="M4 10v4h4l6 5V5l-6 5H4z" />
                                <path d="M17 9.5c1 .8 1.5 1.6 1.5 2.5s-.5 1.7-1.5 2.5" />
                                <path d="M19.4 7.2c1.8 1.5 2.6 3.1 2.6 4.8s-.8 3.3-2.6 4.8" />
                                <path class="audio-off-mark" d="M3 3l18 18" />
                            </svg>
                        </button>
                        <input
                            type="range"
                            class="qg-volume-slider"
                            id="qg-volume-slider"
                            min="0"
                            max="100"
                            value="40"
                            aria-label="Volume da música"
                            title="Volume da música"
                        >
                    </div>
                    <form method="POST" action="{{ route('portal.questionnaire.experience.exit') }}" class="inline">
                        @csrf
                        <input type="hidden" name="question_battery_id" value="{{ $battery->id }}">
                        <button type="submit" class="qg-hud__btn qg-hud__btn--ghost">Sair</button>
                    </form>
                </div>
                <div class="qg-timer-wrap">
                    <svg class="qg-timer__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <circle cx="12" cy="12" r="10" />
                        <polyline points="12 6 12 12 16 14" />
                    </svg>
                    <span id="qg-timer" class="qg-timer" role="timer" aria-live="polite">00:00</span>
                </div>
            </div>
        </header>

        @php
            $progressPercent = $totalQuestions > 0
                ? (int) min(100, round(($questionNumber / $totalQuestions) * 100))
                : 0;
        @endphp
        <div class="qg-play__progress">
            <p class="qg-play__progress-label" id="qg-progress-label">
                Pergunta <strong id="qg-progress-current">{{ $questionNumber }}</strong> de <strong id="qg-progress-total">{{ $totalQuestions }}</strong>
            </p>
            <div
                class="qg-play__progress-bar"
                id="qg-progress-bar"
                role="progressbar"
                aria-valuenow="{{ $progressPercent }}"
                aria-valuemin="0"
                aria-valuemax="100"
                aria-label="Progresso do questionário"
            >
                <div class="qg-play__progress-fill" id="qg-progress-fill" style="width: {{ $progressPercent }}%;"></div>
            </div>
        </div>

        <div class="qg-play__stage" id="qg-play-stage">
            <form
                method="POST"
                action="{{ route('portal.questionnaire.experience.answer') }}"
                class="qg-play__form"
                id="qg-answer-form"
            >
                @csrf
                <input type="hidden" name="question_battery_id" value="{{ $battery->id }}">
                <input type="hidden" name="battery_question_id" value="{{ $currentQuestion->id }}">
                <input type="hidden" name="elapsed_seconds" id="qg-elapsed-seconds" value="0">
                <input type="hidden" name="selected_position" id="qg-selected-position" value="">

                <div class="qg-qcard qg-qcard--prompt" id="qg-qcard-prompt">
                    <h2 class="qg-qcard__legend" id="qg-qcard-legend">
                        {{ $questionNumber }}.
                        {{ preg_replace('/^\d+\.\s*/', '', $currentQuestion->stem) }}
                    </h2>
                    <p class="qg-qcard__tags" id="qg-qcard-tags" @if (! $currentQuestion->tags) hidden @endif>
                        @if ($currentQuestion->tags)
                            Tags: {{ $currentQuestion->tags }}
                        @endif
                    </p>
                </div>

                <fieldset
                    class="qg-qcard qg-qcard--choices"
                    id="qg-qcard"
                    aria-labelledby="qg-qcard-legend"
                >
                    <legend class="qg-qcard__legend--sr">Alternativas</legend>
                    @foreach ($currentQuestion->alternatives as $alt)
                        <button
                            type="button"
                            class="qg-alt qg-alt--pick"
                            data-position="{{ $alt->position }}"
                        >
                            <span class="qg-alt__radio" aria-hidden="true"></span>
                            <span class="qg-alt__text">
                                <span class="qg-alt__num">{{ $alt->position }}.</span>{{ $alt->body }}
                            </span>
                        </button>
                    @endforeach
                    @error('selected_position')
                        <p class="qg-err">{{ $message }}</p>
                    @enderror
                </fieldset>

                <div class="qg-actions">
                    <div class="qg-splash__btn-wrap qg-play__confirm-wrap">
                        <button type="submit" class="qg-btn-iniciar" id="qg-confirm-btn" disabled>
                            <span class="qg-btn-iniciar__wing qg-btn-iniciar__wing--l" aria-hidden="true"></span>
                            <span class="qg-btn-iniciar__wing qg-btn-iniciar__wing--r" aria-hidden="true"></span>
                            <span class="qg-btn-iniciar__gem qg-btn-iniciar__gem--t" aria-hidden="true"></span>
                            <span class="qg-btn-iniciar__gem qg-btn-iniciar__gem--b" aria-hidden="true"></span>
                            Confirmar resposta
                        </button>
                    </div>
                </div>
            </form>

            <div
                class="qg-pause-overlay"
                id="qg-pause-overlay"
                hidden
                role="dialog"
                aria-modal="true"
                aria-label="Questionário em pausa"
            >
                <p class="qg-pause-overlay__title">Em pausa</p>
                <p class="qg-pause-overlay__hint">O tempo está parado. A pergunta fica oculta até continuar.</p>
                <button type="button" class="qg-btn-iniciar qg-pause-overlay__btn" id="qg-resume-btn">
                    <span class="qg-btn-iniciar__wing qg-btn-iniciar__wing--l" aria-hidden="true"></span>
                    <span class="qg-btn-iniciar__wing qg-btn-iniciar__wing--r" aria-hidden="true"></span>
                    <span class="qg-btn-iniciar__gem qg-btn-iniciar__gem--t" aria-hidden="true"></span>
                    <span class="qg-btn-iniciar__gem qg-btn-iniciar__gem--b" aria-hidden="true"></span>
                    Continuar
                </button>
            </div>
        </div>

        @include('portal.questionnaire._experience-success-modal')
        @include('portal.questionnaire._experience-error-modal')
    </div>
@endsection

@push('scripts')
    <script>
        (function () {
            const timerEl = document.getElementById('qg-timer');
            const elapsedInput = document.getElementById('qg-elapsed-seconds');
            const form = document.getElementById('qg-answer-form');
            const stage = document.getElementById('qg-play-stage');
            const qcardPrompt = document.getElementById('qg-qcard-prompt');
            const qcard = document.getElementById('qg-qcard');
            const overlay = document.getElementById('qg-pause-overlay');
            const pauseBtn = document.getElementById('qg-pause-toggle');
            const resumeBtn = document.getElementById('qg-resume-btn');
            const confirmBtn = document.getElementById('qg-confirm-btn');
            const selectedInput = document.getElementById('qg-selected-position');
            const questionIdInput = form.querySelector('input[name="battery_question_id"]');
            const progressCurrent = document.getElementById('qg-progress-current');
            const progressTotal = document.getElementById('qg-progress-total');
            const progressBar = document.getElementById('qg-progress-bar');
            const progressFill = document.getElementById('qg-progress-fill');
            const qcardTags = document.getElementById('qg-qcard-tags');
            const qcardLegend = document.getElementById('qg-qcard-legend');
            const celebrate = document.getElementById('qg-celebrate');
            const miss = document.getElementById('qg-miss');
            const particlesEl = document.getElementById('qg-celebrate-particles');
            const successDialog = document.getElementById('qg-success-dialog');
            const successPoints = document.getElementById('qg-success-points');
            const successAdvance = document.getElementById('qg-success-advance');
            const successAdvanceLabel = document.getElementById('qg-success-advance-label');
            const errorDialog = document.getElementById('qg-error-dialog');
            const errorAdvance = document.getElementById('qg-error-advance');
            const errorAdvanceLabel = document.getElementById('qg-error-advance-label');

            if (!timerEl || !elapsedInput || !form) return;

            let elapsed = 0;
            let paused = false;
            let submitting = false;
            let intervalId = null;
            let redirectUrl = null;
            let nextQuestionPayload = null;

            function pad(n) {
                return String(n).padStart(2, '0');
            }

            function renderTimer() {
                timerEl.textContent = pad(Math.floor(elapsed / 60)) + ':' + pad(elapsed % 60);
                elapsedInput.value = String(elapsed);
            }

            function stopTimer() {
                if (intervalId !== null) {
                    clearInterval(intervalId);
                    intervalId = null;
                }
            }

            function startTimer() {
                if (intervalId !== null) return;
                intervalId = setInterval(function () {
                    if (!paused && !submitting) {
                        elapsed += 1;
                        renderTimer();
                    }
                }, 1000);
            }

            function setPaused(value) {
                if (submitting) return;
                paused = value;
                pauseBtn.setAttribute('aria-pressed', value ? 'true' : 'false');
                pauseBtn.textContent = value ? 'Continuar' : 'Pausar';
                stage.classList.toggle('qg-play__stage--paused', value);
                [qcardPrompt, qcard].forEach(function (el) {
                    if (el) {
                        el.setAttribute('aria-hidden', value ? 'true' : 'false');
                    }
                });
                overlay.hidden = !value;
                confirmBtn.disabled = value || selectedInput.value === '' || submitting;
            }

            function lockForm() {
                submitting = true;
                confirmBtn.disabled = true;
                confirmBtn.textContent = 'Salvando…';
                if (qcard) {
                    qcard.querySelectorAll('.qg-alt--pick').forEach(function (b) {
                        b.disabled = true;
                    });
                }
                pauseBtn.disabled = true;
            }

            function formatPoints(value) {
                const n = Number(value);
                if (Number.isNaN(n)) return '+0';
                const text = n.toLocaleString('pt-BR', {
                    minimumFractionDigits: 0,
                    maximumFractionDigits: 2,
                });
                return '+' + text;
            }

            function spawnParticles() {
                if (!particlesEl) return;
                particlesEl.replaceChildren();
                const colors = ['#f0d78c', '#38bdf8', '#4ade80', '#f472b6', '#e2e8f0'];
                for (let i = 0; i < 42; i++) {
                    const p = document.createElement('span');
                    p.className = 'qg-celebrate__particle';
                    const angle = (Math.PI * 2 * i) / 42 + Math.random() * 0.4;
                    const dist = 80 + Math.random() * 140;
                    p.style.setProperty('--tx', Math.cos(angle) * dist + 'px');
                    p.style.setProperty('--ty', Math.sin(angle) * dist + 'px');
                    p.style.setProperty('--rot', Math.floor(Math.random() * 360) + 'deg');
                    p.style.setProperty('--delay', (Math.random() * 0.35).toFixed(2) + 's');
                    p.style.background = colors[i % colors.length];
                    particlesEl.appendChild(p);
                }
            }

            function lockStageForFeedback() {
                stage.classList.add('qg-play__stage--answered');
                document.body.classList.add('qg-body--celebrate');
            }

            function showSuccessModal(points) {
                if (!celebrate || !successDialog) return;
                if (successPoints) {
                    successPoints.textContent = formatPoints(points);
                }
                if (successAdvanceLabel) {
                    successAdvanceLabel.textContent = 'Avançar';
                }
                lockStageForFeedback();
                celebrate.hidden = false;
                celebrate.setAttribute('aria-hidden', 'false');
                celebrate.classList.add('qg-celebrate--visible');
                spawnParticles();
                if (window.qgPlayFeedback) {
                    window.qgPlayFeedback.correct();
                }
                successAdvance.focus();
            }

            function showErrorModal(completed) {
                if (!miss || !errorDialog) return;
                if (errorAdvanceLabel) {
                    errorAdvanceLabel.textContent = completed ? 'Ver resultado' : 'Continuar';
                }
                lockStageForFeedback();
                miss.hidden = false;
                miss.setAttribute('aria-hidden', 'false');
                miss.classList.add('qg-miss--visible');
                if (window.qgPlayFeedback) {
                    window.qgPlayFeedback.fail();
                }
                errorAdvance.focus();
            }

            function navigateNext() {
                if (window.qgPlayFeedback && window.qgPlayFeedback.persist) {
                    window.qgPlayFeedback.persist();
                }

                const goingToResult = redirectUrl && redirectUrl.indexOf('resultado') !== -1;

                if (goingToResult) {
                    if (window.qgPlayFeedback && window.qgPlayFeedback.clearSession) {
                        window.qgPlayFeedback.clearSession();
                    }
                    if (redirectUrl) {
                        window.location.href = redirectUrl;
                    }
                    return;
                }

                if (nextQuestionPayload) {
                    renderQuestion(nextQuestionPayload);
                    nextQuestionPayload = null;
                    redirectUrl = null;
                    return;
                }

                if (redirectUrl) {
                    window.location.href = redirectUrl;
                }
            }

            function selectedPick() {
                const pos = selectedInput.value;
                if (!pos || !qcard) return null;
                return qcard.querySelector('.qg-alt--pick[data-position="' + pos + '"]');
            }

            function createAlternativeButton(alternative) {
                const btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'qg-alt qg-alt--pick';
                btn.setAttribute('data-position', String(alternative.position));

                const radio = document.createElement('span');
                radio.className = 'qg-alt__radio';
                radio.setAttribute('aria-hidden', 'true');

                const text = document.createElement('span');
                text.className = 'qg-alt__text';

                const num = document.createElement('span');
                num.className = 'qg-alt__num';
                num.textContent = String(alternative.position) + '.';

                text.appendChild(num);
                text.appendChild(document.createTextNode(alternative.body));

                btn.appendChild(radio);
                btn.appendChild(text);

                return btn;
            }

            function resetStageForNextQuestion() {
                stage.classList.remove('qg-play__stage--answered');
                document.body.classList.remove('qg-body--celebrate');

                [celebrate, miss].forEach(function (el) {
                    if (!el) return;
                    el.hidden = true;
                    el.setAttribute('aria-hidden', 'true');
                    el.classList.remove('qg-celebrate--visible', 'qg-miss--visible');
                });

                if (particlesEl) {
                    particlesEl.replaceChildren();
                }

                submitting = false;
                selectedInput.value = '';
                confirmBtn.textContent = 'Confirmar resposta';
                confirmBtn.disabled = true;
                pauseBtn.disabled = false;
                setPaused(false);
                elapsed = 0;
                renderTimer();
                startTimer();
            }

            function renderQuestion(data) {
                if (!data || !questionIdInput || !qcardLegend || !qcard) return;

                resetStageForNextQuestion();

                questionIdInput.value = String(data.battery_question_id);

                if (progressCurrent) {
                    progressCurrent.textContent = String(data.question_number);
                }
                if (progressTotal) {
                    progressTotal.textContent = String(data.total_questions);
                }

                const percent = data.total_questions > 0
                    ? Math.min(100, Math.round((data.question_number / data.total_questions) * 100))
                    : 0;

                if (progressBar) {
                    progressBar.setAttribute('aria-valuenow', String(percent));
                }
                if (progressFill) {
                    progressFill.style.width = percent + '%';
                }

                qcardLegend.textContent = data.stem;

                if (qcardTags) {
                    if (data.tags) {
                        qcardTags.textContent = 'Tags: ' + data.tags;
                        qcardTags.hidden = false;
                    } else {
                        qcardTags.textContent = '';
                        qcardTags.hidden = true;
                    }
                }

                qcard.querySelectorAll('.qg-alt--pick, .qg-err').forEach(function (el) {
                    el.remove();
                });

                (data.alternatives || []).forEach(function (alternative) {
                    qcard.appendChild(createAlternativeButton(alternative));
                });
            }

            pauseBtn.addEventListener('click', function () {
                setPaused(!paused);
            });

            resumeBtn.addEventListener('click', function () {
                setPaused(false);
            });

            if (qcard) {
                qcard.addEventListener('click', function (event) {
                    const btn = event.target.closest('.qg-alt--pick');
                    if (!btn || paused || submitting) return;
                    const pos = btn.getAttribute('data-position');
                    selectedInput.value = pos || '';
                    qcard.querySelectorAll('.qg-alt--pick').forEach(function (pick) {
                        pick.classList.toggle('qg-alt--selected', pick === btn);
                    });
                    confirmBtn.disabled = false;
                });
            }

            if (successAdvance) {
                successAdvance.addEventListener('click', navigateNext);
            }

            if (errorAdvance) {
                errorAdvance.addEventListener('click', navigateNext);
            }

            form.addEventListener('submit', function (event) {
                event.preventDefault();
                if (submitting || selectedInput.value === '') return;

                renderTimer();
                stopTimer();
                lockForm();

                const body = new FormData(form);

                fetch(form.action, {
                    method: 'POST',
                    headers: {
                        Accept: 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: body,
                    credentials: 'same-origin',
                })
                    .then(function (response) {
                        return response.json().then(function (data) {
                            if (!response.ok) {
                                const message = data && data.message
                                    ? String(data.message)
                                    : 'Não foi possível guardar a resposta. Tente novamente.';
                                throw new Error(message);
                            }

                            return data;
                        });
                    })
                    .then(function (data) {
                        redirectUrl = data.redirect_url || '{{ route('portal.questionnaire.experience.play') }}';
                        nextQuestionPayload = data.next_question || null;
                        const pick = selectedPick();

                        if (data.is_correct) {
                            if (pick) {
                                pick.classList.add('qg-alt--correct');
                            }
                            if (data.completed && successAdvanceLabel) {
                                successAdvanceLabel.textContent = 'Ver resultado';
                            }
                            showSuccessModal(data.points_earned);
                            return;
                        }

                        if (pick) {
                            pick.classList.add('qg-alt--wrong');
                        }
                        showErrorModal(Boolean(data.completed));
                    })
                    .catch(function (error) {
                        submitting = false;
                        nextQuestionPayload = null;
                        confirmBtn.disabled = selectedInput.value === '';
                        confirmBtn.textContent = 'Confirmar resposta';
                        if (qcard) {
                            qcard.querySelectorAll('.qg-alt--pick').forEach(function (b) {
                                b.disabled = false;
                            });
                        }
                        pauseBtn.disabled = false;
                        startTimer();
                        alert(error && error.message
                            ? error.message
                            : 'Não foi possível guardar a resposta. Tente novamente.');
                    });
            });

            renderTimer();
            startTimer();
        })();
    </script>
    <script>
        (() => {
            const toggleButton = document.getElementById('qg-audio-toggle');
            const volumeSlider  = document.getElementById('qg-volume-slider');
            if (!toggleButton) return;

            const batteryInput = document.querySelector('input[name="question_battery_id"]');
            const storageKey = 'qg-play-audio:' + (batteryInput ? batteryInput.value : 'default');

            const soundtrack = new Audio('/sons/som-interno.mpeg');
            soundtrack.loop    = true;
            soundtrack.preload = 'auto';
            soundtrack.volume  = 0;

            const correctSound = new Audio('/sons/acerto-1.mp3');
            correctSound.preload = 'auto';

            const failSound = new Audio('/sons/fail.mp3');
            failSound.preload = 'auto';

            let started        = false;
            let muted          = false;
            let usingFileTrack = false;
            let lastVolume     = 0.4;
            let pendingResumeTime = null;

            const AudioCtx    = window.AudioContext || window.webkitAudioContext;
            const audioContext = AudioCtx ? new AudioCtx() : null;
            const masterGain   = audioContext ? audioContext.createGain() : null;
            if (masterGain) {
                masterGain.gain.value = 0;
                masterGain.connect(audioContext.destination);
            }

            const sliderVolume = () => volumeSlider ? volumeSlider.value / 100 : lastVolume;

            const musicVolume = () => {
                if (muted || sliderVolume() === 0) {
                    return 0;
                }
                return Math.min(1, sliderVolume());
            };

            function readStoredState() {
                try {
                    const raw = sessionStorage.getItem(storageKey);
                    if (!raw) {
                        return;
                    }
                    const data = JSON.parse(raw);
                    if (!data || typeof data !== 'object') {
                        return;
                    }
                    muted = Boolean(data.muted);
                    if (typeof data.lastVolume === 'number') {
                        lastVolume = data.lastVolume;
                    }
                    if (volumeSlider && typeof data.volume === 'number') {
                        volumeSlider.value = String(Math.min(100, Math.max(0, data.volume)));
                    }
                    if (typeof data.currentTime === 'number' && data.currentTime > 0) {
                        pendingResumeTime = data.currentTime;
                    }
                } catch (_) {}
            }

            function applyResumeTime() {
                if (pendingResumeTime === null) {
                    return;
                }
                const duration = soundtrack.duration;
                if (!duration || Number.isNaN(duration)) {
                    return;
                }
                const resumeAt = Math.min(pendingResumeTime, Math.max(0, duration - 0.25));
                if (resumeAt > 0) {
                    soundtrack.currentTime = resumeAt;
                }
                pendingResumeTime = null;
            }

            function persistState() {
                try {
                    sessionStorage.setItem(storageKey, JSON.stringify({
                        currentTime: usingFileTrack && !Number.isNaN(soundtrack.currentTime)
                            ? soundtrack.currentTime
                            : (pendingResumeTime || 0),
                        muted,
                        volume: volumeSlider ? Number(volumeSlider.value) : Math.round(lastVolume * 100),
                        lastVolume,
                    }));
                } catch (_) {}
            }

            function clearSession() {
                try {
                    sessionStorage.removeItem(storageKey);
                } catch (_) {}
            }

            soundtrack.addEventListener('loadedmetadata', applyResumeTime);

            readStoredState();

            const effectVolume = () => {
                if (muted || sliderVolume() === 0) {
                    return 0;
                }
                return Math.min(1, sliderVolume() * 0.95);
            };

            const playCorrectSound = () => {
                const vol = effectVolume();
                if (vol === 0) {
                    return;
                }
                correctSound.volume = vol;
                correctSound.currentTime = 0;
                correctSound.play().catch(function () {});
            };

            const playFailSound = () => {
                const vol = effectVolume();
                if (vol === 0) {
                    return;
                }
                failSound.volume = vol;
                failSound.currentTime = 0;
                failSound.play().catch(function () {});
            };

            window.qgPlayFeedback = {
                correct: playCorrectSound,
                fail: playFailSound,
                persist: persistState,
                clearSession: clearSession,
            };

            const setButtonState = () => {
                const isMuted = muted || sliderVolume() === 0;
                toggleButton.setAttribute('aria-pressed', isMuted ? 'true' : 'false');
                toggleButton.classList.toggle('is-muted', isMuted);
                toggleButton.setAttribute('aria-label', isMuted ? 'Ativar música' : 'Mutar música');
                toggleButton.setAttribute('title',       isMuted ? 'Ativar música' : 'Mutar música');
            };

            const applyVolume = () => {
                if (usingFileTrack) {
                    soundtrack.volume = musicVolume();
                    return;
                }
                if (!audioContext) return;
                masterGain.gain.cancelScheduledValues(audioContext.currentTime);
                masterGain.gain.linearRampToValueAtTime(musicVolume(), audioContext.currentTime + 0.1);
            };

            const startMusic = async () => {
                if (started) return;
                try {
                    soundtrack.volume = musicVolume();
                    await soundtrack.play();
                    usingFileTrack = true;
                    started        = true;
                    applyResumeTime();
                    return;
                } catch (_) { usingFileTrack = false; }
                if (!audioContext) return;
                try {
                    if (audioContext.state === 'suspended') await audioContext.resume();
                } catch (_) { return; }
                started = true;
                masterGain.gain.cancelScheduledValues(audioContext.currentTime);
                masterGain.gain.linearRampToValueAtTime(
                    musicVolume(),
                    audioContext.currentTime + 0.28
                );
            };

            /* Botão mute */
            toggleButton.addEventListener('click', async () => {
                if (!started) await startMusic();
                if (!muted && sliderVolume() === 0 && volumeSlider) {
                    volumeSlider.value = Math.round(lastVolume * 100);
                }
                muted = !muted;
                applyVolume();
                setButtonState();
            });

            /* Slider de volume */
            if (volumeSlider) {
                volumeSlider.addEventListener('input', async () => {
                    if (!started) await startMusic();
                    const vol = sliderVolume();
                    if (vol > 0) {
                        lastVolume = vol;
                        muted      = false;
                    } else {
                        muted = true;
                    }
                    applyVolume();
                    setButtonState();
                });
            }

            const onFirstInteraction = async () => {
                await startMusic();
                window.removeEventListener('click',      onFirstInteraction);
                window.removeEventListener('keydown',    onFirstInteraction);
                window.removeEventListener('touchstart', onFirstInteraction);
            };

            window.addEventListener('click',      onFirstInteraction, { once: true });
            window.addEventListener('keydown',    onFirstInteraction, { once: true });
            window.addEventListener('touchstart', onFirstInteraction, { once: true });

            document.addEventListener('visibilitychange', () => {
                if (!started || !usingFileTrack) return;
                soundtrack.volume = document.hidden ? 0 : musicVolume();
            });

            window.addEventListener('pagehide', persistState);

            const exitForm = document.querySelector('.qg-hud__actions form[action*="experiencia/sair"]');
            if (exitForm) {
                exitForm.addEventListener('submit', clearSession);
            }

            window.setInterval(function () {
                if (started && usingFileTrack) {
                    persistState();
                }
            }, 2000);

            window.addEventListener('beforeunload', () => {
                persistState();
                soundtrack.pause();
                correctSound.pause();
                failSound.pause();
            });

            startMusic();
            setButtonState();
        })();
    </script>
@endpush