<title>Shavy Ki Dhulai 🔥</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 25%, #c44569 50%, #8b2c5c 75%, #5a1a42 100%);
        background-size: 400% 400%;
        animation: gradientShift 15s ease infinite;
        color: white;
        overflow-x: hidden;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at 20% 50%, rgba(255, 107, 107, 0.3) 0%, transparent 50%),
                    radial-gradient(circle at 80% 80%, rgba(196, 69, 105, 0.3) 0%, transparent 50%),
                    radial-gradient(circle at 40% 20%, rgba(238, 90, 111, 0.2) 0%, transparent 50%);
        animation: pulse 8s ease-in-out infinite;
        pointer-events: none;
    }

    @keyframes gradientShift {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }

    @keyframes pulse {
        0%, 100% { opacity: 0.5; transform: scale(1); }
        50% { opacity: 0.8; transform: scale(1.1); }
    }

    .container {
        width: 90%;
        max-width: 850px;
        text-align: center;
        padding: 40px;
        position: relative;
        z-index: 10;
    }

    .start-screen {
        animation: fadeIn 1s ease-out;
    }

    .start-screen h1 {
        font-size: 4rem;
        margin-bottom: 20px;
        animation: bounceIn 1s ease-out, glow 2s ease-in-out infinite;
        text-shadow: 0 0 10px rgba(255, 217, 61, 0.8),
                     0 0 20px rgba(255, 107, 107, 0.6),
                     0 0 30px rgba(255, 107, 107, 0.4),
                     3px 3px 20px rgba(0, 0, 0, 0.5);
        background: linear-gradient(45deg, #ffd93d, #ff6b6b, #ffd93d);
        background-size: 200% 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: bounceIn 1s ease-out, gradientText 3s ease infinite;
    }

    @keyframes gradientText {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }

    @keyframes glow {
        0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 217, 61, 0.5)); }
        50% { filter: drop-shadow(0 0 20px rgba(255, 217, 61, 0.9)); }
    }

    .start-screen p {
        font-size: 1.5rem;
        margin-bottom: 40px;
        text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
        animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }

    .game-screen {
        display: none;
    }

    .game-screen.active {
        display: block;
        animation: slideIn 0.5s ease-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes bounceIn {
        0% {
            opacity: 0;
            transform: scale(0.3) rotate(-10deg);
        }
        50% {
            transform: scale(1.05) rotate(5deg);
        }
        70% {
            transform: scale(0.9) rotate(-3deg);
        }
        100% {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(50px) scale(0.9);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .progress-bar {
        width: 100%;
        height: 15px;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 20px;
        margin-bottom: 30px;
        overflow: hidden;
        border: 2px solid rgba(255, 217, 61, 0.3);
        box-shadow: 0 0 20px rgba(255, 217, 61, 0.2),
                    inset 0 2px 10px rgba(0, 0, 0, 0.5);
    }

    .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #ffd93d, #ffed4e, #ffd93d);
        background-size: 200% 100%;
        animation: shimmer 2s linear infinite;
        width: 0%;
        transition: width 0.5s ease;
        box-shadow: 0 0 15px rgba(255, 217, 61, 0.8);
        position: relative;
    }

    .progress-fill::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        animation: progressShine 1.5s ease-in-out infinite;
    }

    @keyframes shimmer {
        0% { background-position: -200% 0; }
        100% { background-position: 200% 0; }
    }

    @keyframes progressShine {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }

    .roast-card {
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(20px);
        padding: 50px;
        border-radius: 30px;
        margin-bottom: 30px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                    0 0 30px rgba(255, 107, 107, 0.3),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
        border: 2px solid rgba(255, 255, 255, 0.1);
        position: relative;
        overflow: hidden;
        animation: cardPulse 3s ease-in-out infinite;
    }

    .roast-card::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 217, 61, 0.1) 0%, transparent 70%);
        animation: rotate 10s linear infinite;
    }

    @keyframes cardPulse {
        0%, 100% { transform: scale(1); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 107, 107, 0.3); }
        50% { transform: scale(1.02); box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 107, 107, 0.5); }
    }

    @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .roast-emoji {
        font-size: 5rem;
        margin-bottom: 20px;
        animation: bounce 1s infinite, spin 3s ease-in-out infinite;
        filter: drop-shadow(0 0 10px rgba(255, 217, 61, 0.6));
        position: relative;
        z-index: 1;
    }

    @keyframes bounce {
        0%, 100% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-20px) scale(1.1); }
    }

    @keyframes spin {
        0%, 100% { transform: rotate(-5deg); }
        50% { transform: rotate(5deg); }
    }

    .roast-title {
        font-size: 2.5rem;
        margin-bottom: 20px;
        color: #ffd93d;
        text-shadow: 0 0 10px rgba(255, 217, 61, 0.5),
                     2px 2px 15px rgba(0, 0, 0, 0.7);
        animation: titleGlow 2s ease-in-out infinite;
        position: relative;
        z-index: 1;
    }

    @keyframes titleGlow {
        0%, 100% { text-shadow: 0 0 10px rgba(255, 217, 61, 0.5), 2px 2px 15px rgba(0, 0, 0, 0.7); }
        50% { text-shadow: 0 0 20px rgba(255, 217, 61, 0.8), 2px 2px 15px rgba(0, 0, 0, 0.7); }
    }

    .roast-text {
        font-size: 1.4rem;
        line-height: 1.8;
        margin-bottom: 30px;
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
        position: relative;
        z-index: 1;
    }

    .btn {
        padding: 18px 50px;
        font-size: 1.3rem;
        background: linear-gradient(135deg, #ffffff, #f0f0f0);
        color: #c44569;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: bold;
        margin: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3),
                    inset 0 1px 0 rgba(255, 255, 255, 0.8);
        position: relative;
        overflow: hidden;
    }

    .btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 217, 61, 0.3);
        transform: translate(-50%, -50%);
        transition: width 0.5s, height 0.5s;
    }

    .btn:hover::before {
        width: 300px;
        height: 300px;
    }

    .btn:hover {
        transform: scale(1.1) translateY(-3px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .btn:active {
        transform: scale(0.95) translateY(0);
    }

    .btn span {
        position: relative;
        z-index: 1;
    }

    .choices {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 30px;
    }

    .choice-btn {
        padding: 20px;
        font-size: 1.2rem;
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 15px;
        cursor: pointer;
        transition: all 0.3s ease;
        backdrop-filter: blur(5px);
        position: relative;
        overflow: hidden;
    }

    .choice-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
    }

    .choice-btn:hover::before {
        left: 100%;
    }

    .choice-btn:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: translateX(10px);
        border-color: #ffd93d;
        box-shadow: 0 5px 20px rgba(255, 217, 61, 0.3);
    }

    .score {
        font-size: 1.6rem;
        margin-bottom: 20px;
        font-weight: bold;
        text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
        animation: scoreFloat 2s ease-in-out infinite;
    }

    @keyframes scoreFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-5px); }
    }

    .final-screen {
        display: none;
    }

    .final-screen.active {
        display: block;
        animation: zoomIn 0.8s ease-out;
    }

    @keyframes zoomIn {
        from {
            opacity: 0;
            transform: scale(0.5) rotate(-10deg);
        }
        to {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }
    }

    .final-screen h1 {
        animation: rainbow 3s linear infinite, bounce 1s ease-in-out infinite;
        font-size: 3.5rem;
        text-shadow: 0 0 20px rgba(255, 217, 61, 0.8),
                     3px 3px 15px rgba(0, 0, 0, 0.7);
    }

    @keyframes rainbow {
        0% { color: #ff6b6b; }
        25% { color: #ffd93d; }
        50% { color: #6bcf7f; }
        75% { color: #4d96ff; }
        100% { color: #ff6b6b; }
    }

    .confetti {
        position: fixed;
        width: 12px;
        height: 12px;
        position: absolute;
        animation: fall 3s linear;
        border-radius: 50%;
        box-shadow: 0 0 10px currentColor;
    }

    @keyframes fall {
        to {
            transform: translateY(100vh) rotate(720deg);
            opacity: 0;
        }
    }

    .particles {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
    }

    .particle {
        position: absolute;
        width: 4px;
        height: 4px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        animation: particleFloat 20s linear infinite;
    }

    @keyframes particleFloat {
        0% {
            transform: translateY(100vh) translateX(0) scale(0);
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        90% {
            opacity: 1;
        }
        100% {
            transform: translateY(-100vh) translateX(100px) scale(1);
            opacity: 0;
        }
    }

    @media (max-width: 768px) {
        .start-screen h1 { font-size: 2.5rem; }
        .roast-emoji { font-size: 3rem; }
        .roast-title { font-size: 1.8rem; }
        .roast-text { font-size: 1.1rem; }
        .btn { font-size: 1.1rem; padding: 15px 35px; }
    }
</style>

<div class="container">
    <div class="start-screen" id="startScreen">
        <h1>🔥SHAVY KI Chudai🔥</h1>
        <p>Mere bacche, tayyar ho jao roast hone ke liye!</p>
        <p>⚠️Warning: Teri ego ki bhi Maa Chudegi⚠️</p>
        <button class="btn" onclick="startGame()"><span>Aa Jaa Beta (Dar Lag Raha Hai Na?)</span></button>
    </div>

    <div class="game-screen" id="gameScreen">
        <div class="score" id="score">Chudai Level: <span id="roastCount">0</span>/6</div>
        <div class="progress-bar">
            <div class="progress-fill" id="progressBar"></div>
        </div>
        <div class="roast-card">
            <div class="roast-emoji" id="roastEmoji">🔥</div>
            <h2 class="roast-title" id="roastTitle">Loading Roast...</h2>
            <p class="roast-text" id="roastText">Preparing...</p>
            <div id="interactiveSection"></div>
        </div>
    </div>

    <div class="final-screen" id="finalScreen">
        <h1>🎉 SHABAASH SHAVY! 🎉</h1>
        <p style="font-size: 1.8rem; margin: 30px 0;">Sab roasts survive kar liye tune!</p>
        <p style="font-size: 1.3rem; margin: 20px 0;">Lekin phir bhi tu mera baccha hi hai 😎</p>
        <p style="font-size: 1.2rem; margin: 20px 0;">Ab ja, apni mummy se complaint kar 😂</p>
        <button class="btn" onclick="location.reload()"><span>Dobara Roast Kar Mujhe</span></button>
    </div>
</div>

<script>
    // Create floating particles
    function createParticles() {
        const particlesContainer = document.getElementById('particles');
        for (let i = 0; i < 30; i++) {
            const particle = document.createElement('div');
            particle.className = 'particle';
            particle.style.left = Math.random() * 100 + '%';
            particle.style.animationDelay = Math.random() * 20 + 's';
            particle.style.animationDuration = (15 + Math.random() * 10) + 's';
            particlesContainer.appendChild(particle);
        }
    }
    createParticles();

    const roasts = [
        {
            emoji: "🍼",
            title: "Tu Mera Beta Hai",
            text: "Haan bhai, tu literally mera baccha hai. Maine tujhe sab sikhaya - PC kaise use karte hain, pant kaise pehente hain, Mutthi kaise marte hai (wahi choti se lulli se), saans kaise lete hain. Tera baap hun main!",
            type: "button",
            buttonText: "Thik Hai Papa 🙄"
        },
        {
            emoji: "🎮",
            title: "Gaming Skills",
            text: "Sale Kis game me teri skill hai? bas wahi tattki skill Minecraft JAVA me? maine to tujhe JAVA me bhi mara hai Bedrock Player hote huye, tune mujhe kabhi nhi haraya Bedrock me, fir bhi bolta hai ki Bedrock baccho ka hai.",
            type: "choice",
            question: "To bata kya bahana hai tera?",
            choices: [
                "Mera skill issue hai",
                "Ping high rehta hai yaar",
                "Mera lauda chota hai na isiliye",
                "Theek hai tu better hai 😭"
            ]
        },
        {
            emoji: "😴",
            title: "Ladki jaisi awaz",
            text: "Sale ek to teri awaz ladkiyo jaisi patli hai, upar se tu bakwad bhi bohot karta hai, Harkat bhi ladkiyo jaise Flex karna, ignore karna, sabko nicha dikana (apne paas kuch hai bhi nhi abbhi) ",
            type: "choice",
            question: "Bata aisa kyu hai?",
            choices: [
                "Mai ladki hi hun!!",
                "are kyuki mere mummy ke husband gay hai",
                "meri lulli aadhi kati huyi hai na",
                "Khaa Mat!!"
            ]
        },
        {
            emoji: "🖕",
            title: "'Khaa Mat'",
            text: "Ye kya hai? bas baat rokne ka tarika? ye to ladkiyo ka kaam hai, Conversation haarne se pehle ye line bolke bach jana, or tere paas to lauda bhi nhi hai to kya Boobs ki baat kar raha hai? ",
            type: "button",
            buttonText: "Khaa Mat!"
        },
        {
            emoji: "👧🏼",
            title: "Fir Bola Khaa mat?",
            text: "Sali ladki, mere liye website banwaya tha na, ab bol kaisa hai ye, Agar AI bolke bhaagne ki koshish ki na to yehi website teri gand me daalke sare pages khol dunga",
            type: "choice",
            question: "Bol Kaisa bana hai?",
            choices: [
                "Accha hai Papa",
                "Papa aapne to jaadi kar diya",
                "Lo meri mummy ki Pussy award me",
                "Bohot sahi Papa"
            ]
        },
        {
            emoji: "😂",
            title: "Sun Ladki",
            text: "Dekh Shavy, tu kaisa bhi ho... Maadarchod, Gay , Apni Mummy ke sath 69 karne wala... par hai toh tu mera baccha hi na! Love you beta, par ye mat bhoolna ki main tera baap hun! 😎",
            type: "button",
            buttonText: "Okay Daddy 🥺"
        }
    ];

    let currentRoast = 0;

    function startGame() {
        document.getElementById('startScreen').style.display = 'none';
        document.getElementById('gameScreen').classList.add('active');
        showRoast(0);
    }

    function showRoast(index) {
        if (index >= roasts.length) {
            showFinal();
            return;
        }

        const roast = roasts[index];
        document.getElementById('roastEmoji').textContent = roast.emoji;
        document.getElementById('roastTitle').textContent = roast.title;
        document.getElementById('roastText').textContent = roast.text;
        document.getElementById('roastCount').textContent = index + 1;
        document.getElementById('progressBar').style.width = ((index + 1) / roasts.length * 100) + '%';

        const interactiveSection = document.getElementById('interactiveSection');
        interactiveSection.innerHTML = '';

        if (roast.type === 'button') {
            const btn = document.createElement('button');
            btn.className = 'btn';
            btn.innerHTML = '<span>' + roast.buttonText + '</span>';
            btn.onclick = () => nextRoast();
            interactiveSection.appendChild(btn);
        } else if (roast.type === 'choice') {
            const questionDiv = document.createElement('p');
            questionDiv.textContent = roast.question;
            questionDiv.style.fontSize = '1.3rem';
            questionDiv.style.marginBottom = '20px';
            interactiveSection.appendChild(questionDiv);

            const choicesDiv = document.createElement('div');
            choicesDiv.className = 'choices';
            roast.choices.forEach(choice => {
                const btn = document.createElement('button');
                btn.className = 'choice-btn';
                btn.textContent = choice;
                btn.onclick = () => {
                    btn.style.background = 'rgba(255, 217, 61, 0.3)';
                    setTimeout(nextRoast, 800);
                };
                choicesDiv.appendChild(btn);
            });
            interactiveSection.appendChild(choicesDiv);
        }
    }

    function nextRoast() {
        currentRoast++;
        const gameScreen = document.getElementById('gameScreen');
        gameScreen.style.animation = 'none';
        setTimeout(() => {
            gameScreen.style.animation = 'slideIn 0.5s ease-out';
            showRoast(currentRoast);
        }, 100);
    }

    function showFinal() {
        document.getElementById('gameScreen').classList.remove('active');
        document.getElementById('finalScreen').classList.add('active');
        createConfetti();
    }

    function createConfetti() {
        const colors = ['#ffd93d', '#ff6b6b', '#6bcf7f', '#4d96ff', '#ff8ed4'];
        for (let i = 0; i < 100; i++) {
            setTimeout(() => {
                const confetti = document.createElement('div');
                confetti.className = 'confetti';
                confetti.style.left = Math.random() * 100 + '%';
                confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
                confetti.style.animationDelay = Math.random() * 2 + 's';
                confetti.style.animationDuration = (2 + Math.random() * 2) + 's';
                document.body.appendChild(confetti);
                setTimeout(() => confetti.remove(), 5000);
            }, i * 30);
        }
    }
</script>