<?php
// ১. ডাটাবেস কানেকশন এবং সেটিংস লোড
// যদি কানেকশন না থাকে তবে ইনক্লুড করুন
if(!isset($conn) && file_exists('config.php')) include 'config.php';

// সেটিংস ফেচ করা (ডাটাবেস কানেকশন থাকলে)
if(isset($conn)) {
    $theme_query = $conn->query("SELECT * FROM site_settings WHERE id=1");
    if($theme_query->num_rows > 0) {
        $theme = $theme_query->fetch_assoc();
    }
}

// যদি ডাটাবেস না থাকে বা ডাটা না পায়, তাহলে ডিফল্ট ভ্যালু (সেফটি ফলব্যাক)
if(!isset($theme)) {
    $theme = [
        'site_title'=>'TurkyHub', 'bg_color'=>'#000', 'effect_color'=>'#00f2ff', 
        'active_effect'=>'snow', 'effect_speed'=>1, 'header_anim'=>'none', 
        'bg_video'=>'', 'youtube_bgm'=>'', 'col_mobile'=>1, 'col_desktop'=>3,
        'social_fb'=>'#', 'social_tg'=>'#', 'social_yt'=>'#', 'social_ds'=>'#'
    ];
}

// ২. হেল্পার ফাংশন
function getYtId($url) {
    if(empty($url)) return '';
    preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $url, $match);
    return isset($match[1]) ? $match[1] : '';
}

function getVideoType($url) {
    if (strpos($url, 'youtube.com') !== false || strpos($url, 'youtu.be') !== false) return 'youtube';
    return 'file';
}

$bg_video_type = getVideoType($theme['bg_video']);
$bg_video_id = getYtId($theme['bg_video']);
$bgm_id = getYtId($theme['youtube_bgm']);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($theme['site_title']) ?></title>
    
    <!-- ৩. SITE ICON (NEW FEATURE) -->
    <link rel="icon" type="image/x-icon" href="uploads/<?= !empty($theme['site_icon']) ? $theme['site_icon'] : 'favicon.png' ?>">

    <!-- লাইব্রেরি -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* =========================================
           CORE STYLES
           ========================================= */
        body { 
            background: <?= !empty($theme['bg_video']) ? 'transparent' : $theme['bg_color'] ?>; 
            color: #fff; 
            margin: 0; 
            padding: 0;
            overflow-x: hidden; 
            min-height: 100vh; 
            font-family: 'Segoe UI', sans-serif;
            position: relative;
        }

        /* লেয়ারিং সিস্টেম (Z-Index) */
        .video-background {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            z-index: -10; overflow: hidden; pointer-events: none;
        }
        .video-background iframe, .video-background video {
            width: 100vw; height: 100vh; object-fit: cover; border: none;
            position: absolute; top: 0; left: 0;
        }
        
        #effectCanvas { 
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
            z-index: -5; pointer-events: none; 
        }

        header { 
            background: rgba(0,0,0,0.6); 
            backdrop-filter: blur(12px); 
            border-bottom: 1px solid <?= $theme['effect_color'] ?>; 
            position: sticky; top: 0; z-index: 1000; 
            padding: 15px 0; 
            box-shadow: 0 5px 20px rgba(0,0,0,0.5);
            transition: all 0.3s ease;
        }

        .nav-container { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            max-width: 1200px; 
            margin: 0 auto; 
            padding: 0 20px; 
        }
        
        /* LOGO STYLES */
        .logo { 
            font-size: 26px; 
            font-weight: 900; 
            color: #fff; 
            text-decoration: none; 
            text-transform: uppercase; 
            display: flex; /* Flex helps align text properly */
            align-items: center;
            white-space: nowrap; 
        }
        .logo span { color: <?= $theme['effect_color'] ?>; }

        /* SOCIAL LINKS */
        .social-links { display: flex; gap: 12px; }
        .social-links a { 
            width: 38px; height: 38px; 
            display: flex; align-items: center; justify-content: center; 
            background: rgba(255,255,255,0.1); 
            border-radius: 50%; 
            color: #fff; 
            transition: 0.3s; 
            text-decoration: none; 
            font-size: 18px; 
        }
        .social-links a:hover { 
            background: <?= $theme['effect_color'] ?>; 
            color: #000; 
            transform: translateY(-3px) scale(1.1); 
            box-shadow: 0 0 15px <?= $theme['effect_color'] ?>; 
        }

        /* =========================================
           MOBILE RESPONSIVE FIX (New Addition)
           ========================================= */
        @media (max-width: 768px) {
            header {
                padding: 10px 0; /* প্যাডিং কমানো হয়েছে মোবাইলের জন্য */
            }
            .nav-container {
                padding: 0 15px; /* সাইডের গ্যাপ কমানো হয়েছে */
            }
            .logo {
                font-size: 20px; /* মোবাইলে ফন্ট সাইজ ছোট করা হয়েছে যাতে ভেঙে না যায় */
                max-width: 60%; /* লোগো যেন সোশ্যাল আইকনের উপর না উঠে যায় */
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .social-links {
                gap: 8px; /* আইকনের মাঝখানের গ্যাপ কমানো হয়েছে */
            }
            .social-links a {
                width: 32px; /* আইকন ছোট করা হয়েছে */
                height: 32px;
                font-size: 14px;
            }
        }
        
        /* খুব ছোট ডিভাইসের জন্য (যেমন Galaxy Fold বা পুরনো iPhone) */
        @media (max-width: 380px) {
            .logo { font-size: 18px; }
            .social-links a { width: 28px; height: 28px; font-size: 12px; }
        }

        /* =========================================
           20 TITLE ANIMATIONS
           ========================================= */
        
        /* 1. Glow */
        .anim-glow { animation: glow 1.5s infinite alternate; } 
        @keyframes glow { from { text-shadow: 0 0 5px #fff; } to { text-shadow: 0 0 20px <?= $theme['effect_color'] ?>, 0 0 40px <?= $theme['effect_color'] ?>; } }
        
        /* 2. Glitch */
        .anim-glitch { animation: glitch 1s infinite; position: relative; display:inline-block; } 
        @keyframes glitch { 0% { transform: translate(0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } 100% { transform: translate(0); } }
        
        /* 3. Typewriter */
        .anim-typewriter { border-right: 3px solid <?= $theme['effect_color'] ?>; white-space: nowrap; overflow: hidden; animation: typing 3s steps(30, end) infinite; display: inline-block; vertical-align: bottom; max-width: 100%; } 
        @keyframes typing { 0% { width: 0 } 50% { width: 100% } 100% { width: 0 } }
        
        /* 4. Bounce */
        .anim-bounce { animation: bounce 1s infinite; display: inline-block; } 
        @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
        
        /* 5. Rainbow */
        .anim-rainbow { background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); -webkit-background-clip: text; color: transparent; animation: rainbow 3s linear infinite; background-size: 400%; } 
        @keyframes rainbow { 0% { background-position: 0%; } 100% { background-position: 400%; } }
        
        /* 6. 3D Rotate */
        .anim-3d { animation: rot3d 4s infinite linear; display: inline-block; transform-style: preserve-3d; } 
        @keyframes rot3d { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
        
        /* 7. Fade */
        .anim-fade { animation: fade 2s infinite; } 
        @keyframes fade { 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }
        
        /* 8. Scale (Heartbeat) */
        .anim-scale { animation: scale 1s infinite alternate; display: inline-block; } 
        @keyframes scale { from { transform: scale(1); } to { transform: scale(1.1); } }
        
        /* 9. Slide */
        .anim-slide { animation: slide 1s ease-out; display: inline-block; } 
        @keyframes slide { from { transform: translateX(-100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
        
        /* 10. Blur */
        .anim-blur { animation: blur 2s infinite alternate; } 
        @keyframes blur { from { filter: blur(0px); } to { filter: blur(3px); } }
        
        /* 11. Wave */
        .anim-wave { animation: wave 2s infinite; display: inline-block; transform-origin: center; } 
        @keyframes wave { 0% { transform: rotate(0deg); } 25% { transform: rotate(10deg); } 75% { transform: rotate(-10deg); } 100% { transform: rotate(0deg); } }
        
        /* 12. Mirror */
        .anim-mirror { transform: scaleY(-1); opacity: 0.7; display: inline-block; }
        
        /* 13. Fire */
        .anim-fire { color: #f00; text-shadow: 0 -5px 4px #ff0, 2px -10px 6px #fd3, -2px -15px 11px #f80; }
        
        /* 14. Liquid */
        .anim-liquid { background: url('https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252_960_720.jpg'); -webkit-background-clip: text; color: transparent; animation: liquid 10s infinite linear; background-size: 200%; } 
        @keyframes liquid { 0% { background-position: 0 0; } 100% { background-position: 100% 0; } }
        
        /* 15. Smoke */
        .anim-smoke { animation: smoke 3s infinite; color: transparent; text-shadow: 0 0 10px #fff; } 
        @keyframes smoke { 50% { text-shadow: 0 -20px 20px transparent; opacity: 0; } }
        
        /* 16. Circuit */
        .anim-circuit { border-bottom: 2px dashed <?= $theme['effect_color'] ?>; letter-spacing: 3px; }
        
        /* 17. Pop */
        .anim-pop { animation: pop 0.3s infinite alternate; display: inline-block; } 
        @keyframes pop { from { transform: scale(1); } to { transform: scale(1.2); } }
        
        /* 18. Shadow */
        .anim-shadow { text-shadow: 5px 5px 0px rgba(255,255,255,0.2); }
        
        /* 19. Rotate Full */
        .anim-rotate { animation: fullrot 5s infinite linear; display: inline-block; } 
        @keyframes fullrot { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        
        /* 20. Shake */
        .anim-shake { animation: shake 0.5s infinite; display: inline-block; } 
        @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } }

        /* =========================================
           NEW NOTICE & POPUP STYLES (NO CODE DELETED)
           ========================================= */
        /* Inline Notice Styles */
        .main-notice-box { 
            width: 95%; max-width: 1200px; margin: 15px auto; padding: 12px;
            border-radius: 8px; border: 2px solid <?= $theme['inline_border_color'] ?>;
            background: <?= $theme['inline_bg_color'] ?>; color: <?= $theme['inline_text_color'] ?>;
            text-align: center; font-weight: bold; overflow: hidden; position: relative;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        }
        .notice-anim-marquee { display: inline-block; white-space: nowrap; animation: n-marquee 15s linear infinite; }
        @keyframes n-marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
        .notice-anim-pulse { animation: n-pulse 1.5s infinite alternate; }
        @keyframes n-pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(1.03); opacity: 0.8; } }
        .notice-anim-blink { animation: n-blink 0.8s infinite; }
        @keyframes n-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
        .notice-anim-slide { animation: n-slide 1s ease-out; }
        @keyframes n-slide { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

        /* Popup Styles */
        .popup-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.85); z-index: 99999; display: none;
            justify-content: center; align-items: center; padding: 20px;
        }
        .popup-content { max-width: 450px; width: 100%; position: relative; animation: p-zoom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        @keyframes p-zoom { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        
        .p-style-style1 { background: #1a1a1a; border: 1px solid #444; border-radius: 12px; padding: 25px; }
        .p-style-style2 { background: rgba(255,255,255,0.1); backdrop-filter: blur(15px); border-radius: 30px; border: 1px solid rgba(255,255,255,0.2); padding: 30px; }
        .p-style-style3 { background: #000; border: 2px solid <?= $theme['effect_color'] ?>; box-shadow: 0 0 25px <?= $theme['effect_color'] ?>; border-radius: 15px; padding: 25px; }
        .p-style-style4 { background: #fff; color: #000; border-radius: 0 0 25px 25px; padding: 25px; position: absolute; top: 0; }
        .p-style-style5 { background: #fff; color: #000; border-radius: 8px; padding: 20px; border-left: 6px solid <?= $theme['effect_color'] ?>; }

        .p-image { width: 100%; border-radius: 10px; margin-bottom: 15px; max-height: 250px; object-fit: cover; cursor: pointer; }
        .p-title { font-size: 22px; font-weight: 800; margin-bottom: 10px; color: #fff; }
        .p-style-style4 .p-title, .p-style-style5 .p-title { color: #000; }
        .p-text { font-size: 15px; line-height: 1.6; opacity: 0.9; margin-bottom: 20px; }
        .p-btn { display: inline-block; padding: 10px 25px; border-radius: 50px; font-weight: bold; background: <?= $theme['effect_color'] ?>; color: #000; text-decoration: none; border: none; cursor: pointer; }
        .p-close { position: absolute; top: 12px; right: 18px; font-size: 26px; cursor: pointer; color: #fff; opacity: 0.6; }
        .p-style-style4 .p-close, .p-style-style5 .p-close { color: #000; }
        .p-timer { font-size: 12px; margin-top: 10px; opacity: 0.7; }
    </style>
</head>
<body>

<!-- ==========================================
     1. VIDEO BACKGROUND LOGIC (UPDATED AUTOPLAY)
     ========================================== -->
<?php if(!empty($theme['bg_video'])): ?>
    <div class="video-background">
        <?php if($bg_video_type == 'youtube'): ?>
            <!-- ইউটিউব ভিডিও অটোপ্লে এবং মিউট ঠিক করা হয়েছে -->
            <iframe src="https://www.youtube.com/embed/<?= $bg_video_id ?>?autoplay=1&mute=1&loop=1&playlist=<?= $bg_video_id ?>&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&enablejsapi=1" allow="autoplay; encrypted-media"></iframe>
        <?php else: ?>
            <!-- MP4 ভিডিও -->
            <video autoplay muted loop playsinline>
                <source src="<?= $theme['bg_video'] ?>" type="video/mp4">
            </video>
        <?php endif; ?>
    </div>
<?php endif; ?>

<!-- ==========================================
     2. AUDIO BACKGROUND LOGIC (FORCE AUTOPLAY FIX)
     ========================================== -->
<?php if(!empty($bgm_id)): ?>
    <div style="position:absolute; visibility:hidden; width:0; height:0; overflow:hidden;">
        <iframe id="yt-audio" 
            src="https://www.youtube.com/embed/<?= $bgm_id ?>?enablejsapi=1&autoplay=1&loop=1&playlist=<?= $bgm_id ?>&controls=0&mute=0" 
            frameborder="0" 
            allow="autoplay; encrypted-media">
        </iframe>
    </div>
    <script>
        // অটোপ্লে পলিসি বাইপাস করার জন্য শক্তিশালী লজিক
        function forcePlayAudio() {
            var iframe = document.getElementById("yt-audio");
            if(iframe) {
                // ইউটিউব এপিআই এর মাধ্যমে প্লে কমান্ড পাঠানো
                iframe.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
                iframe.contentWindow.postMessage('{"event":"command","func":"unMute","args":""}', '*');
            }
        }

        // পেজ লোড হওয়া মাত্রই এবং ইউজারের যেকোনো প্রাথমিক মুভমেন্টে প্লে করার চেষ্টা করবে
        window.addEventListener('load', forcePlayAudio);
        document.addEventListener('mouseover', forcePlayAudio, { once: true });
        document.addEventListener('touchstart', forcePlayAudio, { once: true });
        document.addEventListener('scroll', forcePlayAudio, { once: true });
        document.addEventListener('click', forcePlayAudio, { once: true });
    </script>
<?php endif; ?>

<!-- ==========================================
     3. EFFECT CANVAS (BACKGROUND ANIMATION)
     ========================================== -->
<canvas id="effectCanvas"></canvas>

<!-- ==========================================
     4. HEADER SECTION
     ========================================== -->
<header>
    <div class="nav-container">
        <!-- LOGO & ANIMATION -->
        <a href="index.php" class="logo anim-<?= $theme['header_anim'] ?>">
            <?php 
            $t = $theme['site_title'];
            $mid = ceil(strlen($t)/2);
            // মোবাইলে যেন টেক্সট ভেঙ্গে না যায় তার জন্য স্প্যান লজিক ঠিক রাখা হয়েছে
            echo substr($t, 0, $mid) . "<span>" . substr($t, $mid) . "</span>";
            ?>
        </a>
        
        <!-- SOCIAL ICONS -->
        <div class="social-links">
            <?php if($theme['social_fb']!='#') echo '<a href="'.$theme['social_fb'].'" target="_blank"><i class="fab fa-facebook-f"></i></a>'; ?>
            <?php if($theme['social_tg']!='#') echo '<a href="'.$theme['social_tg'].'" target="_blank"><i class="fab fa-telegram"></i></a>'; ?>
            <?php if($theme['social_yt']!='#') echo '<a href="'.$theme['social_yt'].'" target="_blank"><i class="fab fa-youtube"></i></a>'; ?>
            <?php if($theme['social_ds']!='#') echo '<a href="'.$theme['social_ds'].'" target="_blank"><i class="fab fa-discord"></i></a>'; ?>
        </div>
    </div>
</header>

<!-- ==========================================
     5. JAVASCRIPT EFFECTS ENGINE (ALL 30)
     ========================================== -->
<script>
const canvas = document.getElementById('effectCanvas');
const ctx = canvas.getContext('2d');
let w, h;
const type = "<?= $theme['active_effect'] ?>";
const color = "<?= $theme['effect_color'] ?>";
const speed = parseFloat("<?= $theme['effect_speed'] ?>");

// RESIZE HANDLER
function resize() { 
    w = canvas.width = window.innerWidth; 
    h = canvas.height = window.innerHeight; 
}
window.addEventListener('resize', resize);
resize();

// PARTICLE SETUP
let particles = [];
const max = (window.innerWidth < 600) ? 40 : 100;

// Character & Emoji Sets
const chars = "01XYTABCDEFGHIJKLMNOPQRSTUVWXYZ";
const emojis = ["❤️","🔥","💀","💎","⚡","🎮","🚀","👻","👽"];
const leaves = ["🍂","🍃","🍁","🌿"];
const clouds = ["☁️","🌥️","🌫️"];
const warnings = ["⚠️","🚫","☢️","⛔"];

function init() {
    particles = [];
    for(let i=0; i<max; i++) {
        particles.push({
            x: Math.random() * w,
            y: Math.random() * h,
            v: (Math.random() * 2 + 1) * speed,
            vx: (Math.random() - 0.5) * speed,
            vy: (Math.random() - 0.5) * speed,
            size: Math.random() * 3 + 1,
            char: chars[Math.floor(Math.random() * chars.length)],
            emoji: emojis[Math.floor(Math.random() * emojis.length)],
            leaf: leaves[Math.floor(Math.random() * leaves.length)],
            cloud: clouds[Math.floor(Math.random() * clouds.length)],
            warn: warnings[Math.floor(Math.random() * warnings.length)],
            angle: Math.random() * 360
        });
    }
}
init();

function draw() {
    // 1. CLEAR CANVAS
    if(['matrix','wormhole','cyber','galaxy'].includes(type)) {
        ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; // Trail effect
        ctx.fillRect(0, 0, w, h);
    } else {
        ctx.clearRect(0, 0, w, h);
    }

    if(type === 'none') return;

    ctx.fillStyle = color;
    ctx.strokeStyle = color;
    
    // --- SPECIAL EFFECT: LIGHTNING ---
    if(type === 'lightning') {
        if(Math.random() > 0.97) {
            ctx.beginPath(); ctx.moveTo(Math.random()*w, 0); 
            let lx = Math.random()*w; let ly = 0;
            while(ly < h) {
                lx += (Math.random()-0.5)*50; ly += Math.random()*50;
                ctx.lineTo(lx, ly);
            }
            ctx.lineWidth = 2; ctx.strokeStyle = "#fff"; ctx.stroke();
            ctx.fillStyle = "rgba(255,255,255,0.3)"; ctx.fillRect(0,0,w,h); // Flash
        }
        requestAnimationFrame(draw); return;
    }
    
    // --- SPECIAL EFFECT: CYBER GRID ---
    if(type === 'cyber') {
        let t = Date.now() * 0.002 * speed;
        ctx.strokeStyle = color; ctx.lineWidth = 0.5;
        let o = (t * 50) % 50;
        // Horizontal
        for(let y=o; y<h; y+=50) { ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(w,y); ctx.stroke(); }
        // Perspective
        for(let x=0; x<=w; x+=100) { ctx.beginPath(); ctx.moveTo(x, h); ctx.lineTo(w/2, 0); ctx.stroke(); }
        requestAnimationFrame(draw); return;
    }

    // --- MAIN PARTICLE LOOP ---
    particles.forEach((p, i) => {
        
        // MOVEMENT LOGIC
        if(['snow','rain','blood','matrix','leaves','confetti','warning'].includes(type)) {
            p.y += p.v; 
            if(type === 'leaves') p.x += Math.sin(p.y * 0.02); // Sway
            if(p.y > h) { p.y = -20; p.x = Math.random() * w; }
        }
        else if(['bubbles','fire','smoke','hearts','balloons','kiss','clouds'].includes(type)) {
            p.y -= p.v; 
            p.x += Math.sin(p.y * 0.05); 
            if(p.y < -50) { p.y = h + 50; p.x = Math.random() * w; }
        }
        else if(['stars','wormhole','galaxy'].includes(type)) {
            let dx = (p.x - w/2); let dy = (p.y - h/2);
            let dist = Math.sqrt(dx*dx + dy*dy);
            p.x += (dx / dist) * p.v * 5;
            p.y += (dy / dist) * p.v * 5;
            
            if(p.x<0 || p.x>w || p.y<0 || p.y>h) {
                p.x = w/2 + (Math.random()-0.5)*10;
                p.y = h/2 + (Math.random()-0.5)*10;
            }
        }
        else { // Random movement
            p.x += p.vx; p.y += p.vy;
            if(p.x<0) p.x=w; if(p.x>w) p.x=0;
            if(p.y<0) p.y=h; if(p.y>h) p.y=0;
        }

        // DRAWING LOGIC (ALL 30 EFFECTS)
        ctx.beginPath();
        
        if(type === 'snow' || type === 'stars' || type === 'particles' || type === 'galaxy') {
            ctx.arc(p.x, p.y, p.size, 0, Math.PI*2); ctx.fill();
        }
        else if(type === 'rain') {
            ctx.lineWidth = 1; ctx.moveTo(p.x, p.y); ctx.lineTo(p.x, p.y+15); ctx.stroke();
        }
        else if(type === 'lines') {
            ctx.lineWidth = 1; ctx.moveTo(p.x, p.y); ctx.lineTo(p.x+20, p.y+20); ctx.stroke();
        }
        else if(type === 'bubbles') {
            ctx.arc(p.x, p.y, p.size*3, 0, Math.PI*2); ctx.stroke();
        }
        else if(type === 'matrix') {
            ctx.font = "14px monospace"; ctx.fillText(p.char, p.x, p.y);
        }
        else if(type === 'hearts') {
            ctx.font = (p.size*5)+"px Arial"; ctx.fillText("❤️", p.x, p.y);
        }
        else if(type === 'kiss') {
            ctx.font = (p.size*5)+"px Arial"; ctx.fillText("💋", p.x, p.y);
        }
        else if(type === 'skull') {
            ctx.font = (p.size*5)+"px Arial"; ctx.fillText("💀", p.x, p.y);
        }
        else if(type === 'fire') {
            ctx.font = (p.size*5)+"px Arial"; ctx.fillText("🔥", p.x, p.y);
        }
        else if(type === 'leaves') {
            ctx.font = (p.size*4)+"px Arial"; ctx.fillText(p.leaf, p.x, p.y);
        }
        else if(type === 'clouds') {
            ctx.font = (p.size*10)+"px Arial"; ctx.fillText(p.cloud, p.x, p.y);
        }
        else if(type === 'emojis') {
            ctx.font = (p.size*4)+"px Arial"; ctx.fillText(p.emoji, p.x, p.y);
        }
        else if(type === 'warning') {
            ctx.font = (p.size*5)+"px Arial"; ctx.fillText(p.warn, p.x, p.y);
        }
        else if(type === 'confetti') {
             ctx.fillStyle = `hsl(${Math.random()*360}, 100%, 50%)`;
             ctx.fillRect(p.x, p.y, 5, 5);
        }
        else if(type === 'blood') {
             ctx.fillStyle = "red";
             ctx.arc(p.x, p.y, p.size, 0, Math.PI*2); ctx.fill();
        }
        else if(type === 'glitch') {
            ctx.fillRect(p.x, p.y, p.size*10, 2);
        }
        else if(type === 'hex') {
             let r = p.size * 3; ctx.moveTo(p.x + r, p.y);
             for (let side = 1; side <= 6; side++) {
                ctx.lineTo(p.x + r * Math.cos(side * 2 * Math.PI / 6), p.y + r * Math.sin(side * 2 * Math.PI / 6));
             }
             ctx.stroke();
        }
        else if(type === 'neon_pulse') {
            ctx.shadowBlur = 10; ctx.shadowColor = color;
            ctx.arc(p.x, p.y, p.size, 0, Math.PI*2); ctx.stroke();
            ctx.shadowBlur = 0;
        }
        else if(type === 'sparkles') {
             ctx.font = (p.size*4)+"px Arial"; ctx.fillText("✨", p.x, p.y);
        }
        else if(type === 'balloons') {
             ctx.font = (p.size*5)+"px Arial"; ctx.fillText("🎈", p.x, p.y);
        }
        else if(type === 'smoke') {
             ctx.globalAlpha = 0.3;
             ctx.arc(p.x, p.y, p.size*5, 0, Math.PI*2); ctx.fill();
             ctx.globalAlpha = 1.0;
        }
        else if(type === 'waves') {
             p.x += 1; if(p.x > w) p.x = 0;
             p.y = h/2 + Math.sin(p.x * 0.01 + Date.now()*0.001) * 50;
             ctx.arc(p.x, p.y, 2, 0, Math.PI*2); ctx.fill();
        }
        else if(type === 'bokeh') {
             ctx.globalAlpha = 0.5;
             ctx.arc(p.x, p.y, p.size*4, 0, Math.PI*2); ctx.fill();
             ctx.globalAlpha = 1.0;
        }

    });

    // Connecting lines for Particles/Galaxy
    if(['particles','galaxy','hex'].includes(type)) {
        particles.forEach((p1, i) => {
            particles.forEach((p2, j) => {
                if(i !== j && Math.hypot(p1.x - p2.x, p1.y - p2.y) < 100) {
                    ctx.lineWidth = 0.2; 
                    ctx.moveTo(p1.x, p1.y); 
                    ctx.lineTo(p2.x, p2.y); 
                    ctx.stroke();
                }
            });
        });
    }

    requestAnimationFrame(draw);
}

if(type !== 'none') draw();
</script>

</body>
</html>