{{-- Standalone 3D Chubby Samurai Character Widget with Moveable Katana & Samurai Animations --}}
<style>
.cp-standalone-wrapper {
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 1000;
    vertical-align: middle;
    margin-left: 15px;
}

/* Screen Shake Effect for Katana Impact */
.cp-screen-shake {
    animation: cpScreenShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes cpScreenShake {
    10%, 90% { transform: translate3d(-3px, 0, 0); }
    20%, 80% { transform: translate3d(5px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-7px, 0, 0); }
    40%, 60% { transform: translate3d(7px, 0, 0); }
}

/* Free-Standing 3D Samurai Stage */
.cp-sprite-stage {
    position: relative;
    width: 140px;
    height: 150px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
    overflow: visible;
}

/* 3D Canvas Viewport */
.cp-sprite-canvas {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}

/* Samurai Level Badge Pill */
.cp-avatar-lvl-tag {
    position: absolute;
    top: 4px;
    right: 4px;
    background: linear-gradient(135deg, #DC2626, #F59E0B);
    color: #FFF;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.5);
    border: 1.5px solid #78350F;
    z-index: 10;
}

/* Floating Impact Popups */
.cp-impact-popup {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #F59E0B, #DC2626);
    color: #FFF;
    font-weight: 900;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.6);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 105;
}
.cp-impact-popup.cp-pop-animate {
    animation: cpImpactFloat 1.1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
@keyframes cpImpactFloat {
    0% { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.5); }
    30% { opacity: 1; transform: translateX(-50%) translateY(-22px) scale(1.3); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-44px) scale(0.9); }
}

/* Environment Shatter Debris Canvas Overlay */
.cp-debris-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20;
}

/* ==========================================================================
   3D SAMURAI HOVER STATISTICS TOOLTIP HUD CARD
   ========================================================================== */
.cp-stats-card {
    position: absolute;
    top: 145px;
    left: 0;
    width: 300px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.97) 0%, rgba(30, 41, 59, 0.98) 100%);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(14px);
    color: #F8FAFC;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    z-index: 9999;
}
.cp-standalone-wrapper:hover .cp-stats-card,
.cp-stats-card.cp-card-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.cp-card-arrow {
    position: absolute;
    top: -7px;
    left: 35px;
    width: 0; height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #0F172A;
}
.cp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}
.cp-card-name { font-size: 14px; font-weight: 800; color: #F8FAFC; }
.cp-card-rank-tag {
    background: linear-gradient(135deg, #F59E0B, #DC2626);
    color: #FFF; font-size: 10px; font-weight: 900; padding: 2px 8px; border-radius: 10px;
}
.cp-stat-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 11px; }
.cp-stat-lbl { color: #94A3B8; font-weight: 600; }
.cp-stat-val { color: #38BDF8; font-weight: 800; font-size: 12px; }

/* Progress Bar */
.cp-progress-bg {
    width: 100%; height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 5px; overflow: hidden; margin: 8px 0 12px 0;
}
.cp-progress-fill {
    height: 100%; width: 85%;
    background: linear-gradient(90deg, #F59E0B, #DC2626, #EF4444);
    background-size: 200% 100%; border-radius: 5px; transition: width 0.5s ease;
}
.cp-speech-box {
    background: rgba(255, 255, 255, 0.07); border-left: 3px solid #F59E0B; border-radius: 6px; padding: 6px 10px; font-size: 11px; font-style: italic; color: #CBD5E1; margin-bottom: 12px;
}
.cp-card-actions { display: flex; gap: 6px; }
.cp-action-btn {
    flex: 1; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: #E2E8F0; font-size: 10px; font-weight: 700; padding: 5px 8px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; text-align: center; outline: none !important;
}
.cp-action-btn:hover { background: #DC2626; color: #FFF; border-color: #EF4444; }
</style>

<!-- STANDALONE 3D CHUBBY SAMURAI CHARACTER WIDGET -->
<div class="cp-standalone-wrapper" id="cpStandaloneWrapper">
    <!-- Free-Standing 3D Samurai Stage -->
    <div class="cp-sprite-stage" id="cpSpriteStage" onclick="cpSpriteWidget.onDisbursementIncrease()" title="Click to simulate Katana Slash disbursement!">
        <div class="cp-avatar-lvl-tag" id="cpAvatarLvlTag">LVL 9 👑</div>
        <div class="cp-impact-popup" id="cpImpactPopup">KATANA SLASH! ⚔️</div>

        <!-- Canvas 3D Chubby Samurai Renderer -->
        <canvas class="cp-sprite-canvas" id="cpSpriteCanvas" width="160" height="170"></canvas>

        <!-- Shatter Debris Canvas Overlay -->
        <canvas class="cp-debris-canvas" id="cpDebrisCanvas" width="160" height="170"></canvas>
    </div>

    <!-- HOVER STATISTICS HUD CARD -->
    <div class="cp-stats-card" id="cpStatsCard">
        <div class="cp-card-arrow"></div>
        <div class="cp-card-header">
            <div>
                <div class="cp-card-name" id="cpStatName">
                    @if(\Illuminate\Support\Facades\Auth::check())
                        {{ \Illuminate\Support\Facades\Auth::user()->name }}
                    @else
                        Rahul Sharma
                    @endif
                </div>
                <div style="font-size: 10px; color: #94A3B8;" id="cpStateTag">Role: 3D Chubby Samurai Hero ⚔️</div>
            </div>
            <span class="cp-card-rank-tag" id="cpStatRank">👑 SAMURAI #1</span>
        </div>

        <div class="cp-stat-row">
            <span class="cp-stat-lbl">Today's Disbursements</span>
            <span class="cp-stat-val" id="cpStatDisb">22 / 20 Disbursed</span>
        </div>

        <div class="cp-stat-row">
            <span class="cp-stat-lbl">Achievement Target</span>
            <span class="cp-stat-val" style="color: #FBBF24;" id="cpStatPct">110% (Katana Fire Mode ⚔️)</span>
        </div>

        <div class="cp-progress-bg">
            <div class="cp-progress-fill" id="cpProgressFill" style="width: 85%;"></div>
        </div>

        <div class="cp-speech-box" id="cpSpeechText">
            "Target slashed! Katana Spirit Unleashed! ⚔️💥"
        </div>

        <!-- Interactive State Testing Buttons -->
        <div class="cp-card-actions">
            <button type="button" class="cp-action-btn" onclick="cpSpriteWidget.onDisbursementIncrease()" title="Simulate Katana Slash Disbursement">
                ⚔️ +1 Slash
            </button>
            <button type="button" class="cp-action-btn" onclick="cpSpriteWidget.setPerformanceState('tired')" title="Simulate Low Performance Meditation">
                🧘 Meditate
            </button>
            <button type="button" class="cp-action-btn" onclick="cpSpriteWidget.onLevelUp()" title="Trigger Level Up & Destroy Environment">
                💥 Level Up!
            </button>
            <button type="button" class="cp-action-btn" onclick="cpSpriteWidget.toggleSound()" id="cpSfxBtn">
                🔊 SFX ON
            </button>
        </div>
    </div>
</div>

<script>
(function() {
    // ----------------------------------------------------------------------
    // 1. 3D Chubby Samurai Frame-by-Frame Canvas Renderer
    // ----------------------------------------------------------------------
    class CPSamuraiRenderer {
        constructor(canvasId) {
            this.canvas = document.getElementById(canvasId);
            this.ctx = this.canvas ? this.canvas.getContext('2d') : null;
            this.frameIndex = 0;
            this.state = 'idle'; // 'idle', 'attack', 'tired', 'levelup'
            this.animTimer = null;
        }

        startLoop() {
            if (this.animTimer) clearInterval(this.animTimer);
            this.animTimer = setInterval(() => {
                this.frameIndex = (this.frameIndex + 1) % 6;
                this.render();
            }, 120);
        }

        setState(newState) {
            this.state = newState;
            this.frameIndex = 0;
            this.render();
        }

        render() {
            if (!this.ctx) return;
            const w = this.canvas.width;
            const h = this.canvas.height;
            this.ctx.clearRect(0, 0, w, h);

            const f = this.frameIndex;
            const cx = w / 2;
            const cy = h / 2 + 15;

            // 3D Shadow
            this.ctx.fillStyle = 'rgba(0,0,0,0.3)';
            this.ctx.beginPath();
            this.ctx.ellipse(cx, cy + 50, 36 - (f % 2) * 3, 7, 0, 0, Math.PI * 2);
            this.ctx.fill();

            if (this.state === 'idle') {
                const waddleY = Math.sin(f * 0.8) * 4;
                this.draw3DSamurai(cx, cy + waddleY, 'idle', f);
            } else if (this.state === 'attack') {
                // Katana Slash Jump
                const jumpY = (f < 3) ? -f * 14 : -(5 - f) * 14;
                
                // Fire Energy Slash Arc Effect
                this.ctx.strokeStyle = '#F59E0B';
                this.ctx.lineWidth = 5;
                this.ctx.beginPath();
                this.ctx.arc(cx + 10, cy + jumpY - 10, 45, 0.2 * Math.PI, 1.2 * Math.PI);
                this.ctx.stroke();

                this.draw3DSamurai(cx + (f * 4), cy + jumpY, 'attack', f);
            } else if (this.state === 'tired') {
                // Meditation / Tired Mode
                const slumpY = 6 + (f % 2) * 2;
                this.draw3DSamurai(cx, cy + slumpY, 'tired', f);

                // Sweat drop
                this.ctx.fillStyle = '#38BDF8';
                this.ctx.beginPath();
                this.ctx.arc(cx + 34, cy - 25 + (f * 2), 4, 0, Math.PI * 2);
                this.ctx.fill();
            } else if (this.state === 'levelup') {
                const flashY = Math.sin(f) * 5;
                // Dragon Ki Aura
                const grad = this.ctx.createRadialGradient(cx, cy, 10, cx, cy, 60);
                grad.addColorStop(0, 'rgba(245, 158, 11, 0.8)');
                grad.addColorStop(1, 'rgba(220, 38, 38, 0)');
                this.ctx.fillStyle = grad;
                this.ctx.beginPath();
                this.ctx.arc(cx, cy, 60, 0, Math.PI * 2);
                this.ctx.fill();

                this.draw3DSamurai(cx, cy + flashY, 'levelup', f);
            }
        }

        draw3DSamurai(x, y, mode, f) {
            const ctx = this.ctx;

            // 1. 3D Samurai Hakama Pants & Legs
            const hakamaGrad = ctx.createLinearGradient(x - 25, y, x + 25, y + 45);
            hakamaGrad.addColorStop(0, '#1E1B4B');
            hakamaGrad.addColorStop(1, '#0F172A');
            ctx.fillStyle = hakamaGrad;
            
            const waddle = (f % 2 === 0) ? 3 : -3;
            ctx.fillRect(x - 22, y + 24, 15, 24 + (mode === 'tired' ? -4 : waddle));
            ctx.fillRect(x + 7, y + 24, 15, 24 + (mode === 'tired' ? -4 : -waddle));

            // 3D Geta / Zori Sandals
            ctx.fillStyle = '#78350F';
            ctx.fillRect(x - 25, y + 44 + waddle, 18, 7);
            ctx.fillRect(x + 7, y + 44 - waddle, 18, 7);

            // 2. 3D Chubby Samurai Dō Chest Armor
            const armorGrad = ctx.createLinearGradient(x - 30, y - 20, x + 30, y + 35);
            if (mode === 'levelup') {
                armorGrad.addColorStop(0, '#8B5CF6');
                armorGrad.addColorStop(1, '#4C1D95');
            } else {
                armorGrad.addColorStop(0, '#DC2626');
                armorGrad.addColorStop(1, '#7F1D1D');
            }
            ctx.fillStyle = armorGrad;
            ctx.beginPath();
            ctx.arc(x, y + 10, 34, 0, Math.PI * 2); // Chubby round armor
            ctx.fill();

            // Gold Trim Highlights
            ctx.strokeStyle = '#FACC15';
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.arc(x, y + 10, 34, 0.2 * Math.PI, 0.8 * Math.PI);
            ctx.stroke();

            // 3. Gold Samurai Belt & Family Crest (Kamon)
            ctx.fillStyle = '#F59E0B';
            ctx.fillRect(x - 28, y + 20, 56, 7);

            ctx.fillStyle = '#FEF08A';
            ctx.beginPath();
            ctx.arc(x, y + 10, 8, 0, Math.PI * 2);
            ctx.fill();
            ctx.fillStyle = '#7F1D1D';
            ctx.font = 'bold 10px sans-serif';
            ctx.textAlign = 'center';
            ctx.fillText('⚔️', x, y + 14);

            // 4. 3D Samurai Shoulder Guards (Sode)
            ctx.fillStyle = '#991B1B';
            ctx.fillRect(x - 38, y - 5, 12, 22);
            ctx.fillRect(x + 26, y - 5, 12, 22);

            // 5. Moveable Arms & 3D KATANA SWORD
            ctx.strokeStyle = '#DC2626';
            ctx.lineWidth = 10;
            ctx.lineCap = 'round';
            ctx.beginPath();

            if (mode === 'attack') {
                // Slash Pose!
                ctx.moveTo(x - 24, y); ctx.lineTo(x + 36, y - 18);
                ctx.stroke();

                // 3D KATANA BLADE
                ctx.strokeStyle = '#E2E8F0';
                ctx.lineWidth = 4;
                ctx.beginPath();
                ctx.moveTo(x + 36, y - 18); ctx.lineTo(x + 65, y - 38);
                ctx.stroke();

                // Blade Glow
                ctx.strokeStyle = '#38BDF8';
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.moveTo(x + 36, y - 18); ctx.lineTo(x + 65, y - 38);
                ctx.stroke();
            } else if (mode === 'tired') {
                ctx.moveTo(x - 24, y + 8); ctx.lineTo(x - 28, y + 28);
                ctx.moveTo(x + 24, y + 8); ctx.lineTo(x + 28, y + 28);
                ctx.stroke();

                // Sheathed Katana on hip
                ctx.strokeStyle = '#1E293B';
                ctx.lineWidth = 5;
                ctx.beginPath();
                ctx.moveTo(x - 28, y + 10); ctx.lineTo(x + 10, y + 36);
                ctx.stroke();
            } else {
                // Waving / Stance Pose
                ctx.moveTo(x - 24, y + 4); ctx.lineTo(x - 34, y + (f % 2 * 6));
                ctx.moveTo(x + 24, y + 4); ctx.lineTo(x + 38, y - (f % 2 * 8));
                ctx.stroke();

                // KATANA SWORD IN HAND
                ctx.strokeStyle = '#CBD5E1';
                ctx.lineWidth = 3.5;
                ctx.beginPath();
                ctx.moveTo(x + 38, y - (f % 2 * 8)); ctx.lineTo(x + 58, y - 28 - (f % 2 * 8));
                ctx.stroke();
            }

            // 6. Chubby Face & Head
            ctx.fillStyle = '#FFDBAC';
            ctx.fillRect(x - 6, y - 20, 12, 10);
            ctx.beginPath();
            ctx.arc(x, y - 32, 28, 0, Math.PI * 2);
            ctx.fill();

            // Chubby Blushing Cheeks
            ctx.fillStyle = '#FB7185';
            ctx.beginPath();
            ctx.arc(x - 18, y - 24, 6, 0, Math.PI * 2);
            ctx.arc(x + 18, y - 24, 6, 0, Math.PI * 2);
            ctx.fill();

            // Fierce Samurai Eyes
            ctx.fillStyle = '#0F172A';
            if (mode === 'tired') {
                ctx.fillRect(x - 14, y - 36, 8, 3);
                ctx.fillRect(x + 6, y - 36, 8, 3);
            } else {
                ctx.beginPath();
                ctx.ellipse(x - 10, y - 36, 4.5, 6, -0.2, 0, Math.PI * 2);
                ctx.ellipse(x + 10, y - 36, 4.5, 6, 0.2, 0, Math.PI * 2);
                ctx.fill();

                ctx.fillStyle = '#FFFFFF';
                ctx.beginPath();
                ctx.arc(x - 9, y - 38, 1.5, 0, Math.PI * 2);
                ctx.arc(x + 11, y - 38, 1.5, 0, Math.PI * 2);
                ctx.fill();
            }

            // 7. 3D KABUTO SAMURAI HELMET
            const helmetGrad = ctx.createLinearGradient(x - 30, y - 60, x + 30, y - 30);
            helmetGrad.addColorStop(0, '#1E293B');
            helmetGrad.addColorStop(1, '#0F172A');
            ctx.fillStyle = helmetGrad;
            ctx.beginPath();
            ctx.arc(x, y - 38, 27, Math.PI, 0);
            ctx.fill();
            ctx.fillRect(x - 30, y - 40, 60, 5); // Visor brim

            // GOLDEN KUWAGATA CRESCENT ORNAMENT (Horns)
            ctx.fillStyle = '#F59E0B';
            ctx.beginPath();
            ctx.moveTo(x - 12, y - 44);
            ctx.quadraticCurveTo(x - 22, y - 65, x - 32, y - 68);
            ctx.quadraticCurveTo(x - 16, y - 55, x, y - 44);
            ctx.fill();

            ctx.beginPath();
            ctx.moveTo(x + 12, y - 44);
            ctx.quadraticCurveTo(x + 22, y - 65, x + 32, y - 68);
            ctx.quadraticCurveTo(x + 16, y - 55, x, y - 44);
            ctx.fill();

            ctx.fillStyle = '#FEF08A';
            ctx.beginPath();
            ctx.arc(x, y - 46, 5, 0, Math.PI * 2);
            ctx.fill();
        }
    }

    // ----------------------------------------------------------------------
    // 2. Shatter Debris Canvas Particle Engine
    // ----------------------------------------------------------------------
    class CPDebrisEngine {
        static explode(canvasId) {
            const canvas = document.getElementById(canvasId);
            if (!canvas) return;
            const ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            const debris = [];
            const colors = ['#F59E0B', '#DC2626', '#38BDF8', '#10B981', '#FEF08A'];

            for (let i = 0; i < 45; i++) {
                debris.push({
                    x: canvas.width / 2,
                    y: canvas.height / 2,
                    vx: (Math.random() - 0.5) * 16,
                    vy: (Math.random() - 0.5) * 16 - 3,
                    size: Math.random() * 6 + 3,
                    color: colors[Math.floor(Math.random() * colors.length)],
                    life: 30
                });
            }

            function animate() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                let alive = false;
                debris.forEach(p => {
                    if (p.life > 0) {
                        alive = true;
                        p.x += p.vx;
                        p.y += p.vy;
                        p.vy += 0.35;
                        p.life--;
                        ctx.fillStyle = p.color;
                        ctx.fillRect(p.x, p.y, p.size, p.size);
                    }
                });
                if (alive) requestAnimationFrame(animate);
            }
            animate();
        }
    }

    // ----------------------------------------------------------------------
    // 3. Main 3D Samurai Widget Controller
    // ----------------------------------------------------------------------
    class CPSamuraiWidget {
        constructor() {
            this.soundEnabled = true;
            this.disbCount = 22;
            this.target = 20;
            this.level = 9;
            this.renderer = new CPSamuraiRenderer('cpSpriteCanvas');
        }

        init() {
            this.renderer.startLoop();
        }

        onDisbursementIncrease() {
            this.disbCount++;
            this.renderer.setState('attack');

            // Screen Shake Effect
            const wrapper = document.getElementById('cpStandaloneWrapper');
            if (wrapper) {
                wrapper.classList.remove('cp-screen-shake');
                void wrapper.offsetWidth;
                wrapper.classList.add('cp-screen-shake');
            }

            // Impact Popup
            const popup = document.getElementById('cpImpactPopup');
            if (popup) {
                popup.innerText = 'KATANA SLASH! ⚔️';
                popup.classList.remove('cp-pop-animate');
                void popup.offsetWidth;
                popup.classList.add('cp-pop-animate');
            }

            this.updateStatsUI('3D Katana Fire Mode ⚔️', 'Target slashed! Katana Spirit Unleashed! ⚔️💥');
            this.playChime('attack');

            setTimeout(() => {
                this.renderer.setState('idle');
            }, 1200);
        }

        setPerformanceState(state) {
            if (state === 'tired') {
                this.renderer.setState('tired');
                this.updateStatsUI('Meditating Samurai 🧘', 'Samurai Meditation: Recharging Ki energy!');
                this.playChime('tired');
            } else {
                this.renderer.setState('idle');
                this.updateStatsUI('3D Samurai Hero ⚔️', 'Ready to slash targets!');
            }
        }

        onLevelUp() {
            this.level++;
            this.renderer.setState('levelup');

            const lvlTag = document.getElementById('cpAvatarLvlTag');
            if (lvlTag) lvlTag.innerText = 'LVL ' + this.level + ' 👑';

            CPDebrisEngine.explode('cpDebrisCanvas');

            const popup = document.getElementById('cpImpactPopup');
            if (popup) {
                popup.innerText = 'SAMURAI LEVEL UP! 👑';
                popup.classList.remove('cp-pop-animate');
                void popup.offsetWidth;
                popup.classList.add('cp-pop-animate');
            }

            this.updateStatsUI(`Samurai Level ${this.level} Champion! 🏆`, `🔥 SAMURAI LEVEL UP! Dragon Ki unleashed!`);
            this.playChime('level_up');

            setTimeout(() => {
                this.renderer.setState('idle');
            }, 2000);
        }

        updateStatsUI(tag, speech) {
            const disbEl = document.getElementById('cpStatDisb');
            const stateEl = document.getElementById('cpStateTag');
            const speechEl = document.getElementById('cpSpeechText');
            if (disbEl) disbEl.innerText = `${this.disbCount} / ${this.target} Disbursed`;
            if (stateEl) stateEl.innerText = `Role: ${tag}`;
            if (speechEl) speechEl.innerText = `"${speech}"`;
        }

        toggleSound() {
            this.soundEnabled = !this.soundEnabled;
            const btn = document.getElementById('cpSfxBtn');
            if (btn) btn.innerText = this.soundEnabled ? '🔊 SFX ON' : '🔇 SFX OFF';
            if (this.soundEnabled) this.playChime('attack');
        }

        playChime(type) {
            if (!this.soundEnabled) return;
            try {
                const AudioCtx = window.AudioContext || window.webkitAudioContext;
                if (!AudioCtx) return;
                const ctx = new AudioCtx();
                const now = ctx.currentTime;
                const osc = ctx.createOscillator();
                const gain = ctx.createGain();

                osc.connect(gain);
                gain.connect(ctx.destination);

                if (type === 'attack') {
                    // Katana Slash Sound Effect
                    osc.type = 'sawtooth';
                    osc.frequency.setValueAtTime(600, now);
                    osc.frequency.exponentialRampToValueAtTime(1400, now + 0.12);
                    gain.gain.setValueAtTime(0.2, now);
                    gain.gain.exponentialRampToValueAtTime(0.01, now + 0.2);
                } else if (type === 'tired') {
                    osc.type = 'sine';
                    osc.frequency.setValueAtTime(200, now);
                    osc.frequency.linearRampToValueAtTime(120, now + 0.35);
                    gain.gain.setValueAtTime(0.1, now);
                    gain.gain.exponentialRampToValueAtTime(0.01, now + 0.35);
                } else if (type === 'level_up') {
                    osc.type = 'triangle';
                    osc.frequency.setValueAtTime(523.25, now);
                    osc.frequency.exponentialRampToValueAtTime(1046.50, now + 0.3);
                    gain.gain.setValueAtTime(0.2, now);
                    gain.gain.exponentialRampToValueAtTime(0.01, now + 0.45);
                }

                osc.start(now);
                osc.stop(now + 0.45);
            } catch(e) {}
        }
    }

    window.cpSpriteWidget = new CPSamuraiWidget();
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => window.cpSpriteWidget.init());
    } else {
        window.cpSpriteWidget.init();
    }
})();
</script>