<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Teka-Teki Master</title>
    <link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Poppins:wght@400;700&family=Press+Start+2P&display=swap" rel="stylesheet">
    
        /* Global Styles */
        :root {
            --primary: #1E1E2F;
            --secondary: #6C5CE7;
            --accent: #FF7675;
            --text: #FFFFFF;
            --background: linear-gradient(45deg, var(--primary), var(--secondary));
            --glow: 0 0 20px rgba(108, 92, 231, 0.8);
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: var(--background);
            color: var(--text);
            margin: 0;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow-y: auto;
        }

        .container {
            background: rgba(30, 30, 47, 0.8);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 20px;
            box-shadow: var(--glow);
            width: 90%;
            max-width: 800px;
            position: relative;
            text-align: center;
            overflow-y: auto;
            max-height: 90vh;
            animation: fadeIn 1s ease-in-out;
        }

        /* Loading Screen */
        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--primary);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            animation: fadeOut 2s ease-in-out forwards;
            background: linear-gradient(135deg, #1E1E2F, #6C5CE7);
        }

        .loading-screen h1 {
            font-size: 2.5rem;
            color: var(--accent);
            font-family: 'Luckiest Guy', cursive;
            animation: bounce 2s infinite;
        }

        .loading-screen .loader {
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid #FF7675;
            width: 120px;
            height: 120px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes fadeOut {
            0% { opacity: 1; }
            100% { opacity: 0; visibility: hidden; }
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-20px); }
            60% { transform: translateY(-10px); }
        }

        /* Main Menu Styles */
        .main-menu {
            display: none;
            animation: fadeIn 1s;
        }

        .main-menu.active {
            display: block;
        }

        .game-title {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            color: var(--accent);
            font-family: 'Luckiest Guy', cursive;
            animation: bounce 2s infinite;
            line-height: 1.2;
            letter-spacing: 2px;
        }

        .menu {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-top: 2rem;
        }

        .btn {
            background: var(--accent);
            color: var(--primary);
            padding: 0.8rem 2rem;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1rem;
            font-weight: bold;
            font-family: 'Poppins', sans-serif;
            animation: pulse 2s infinite;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        /* Dashboard Styles */
        .dashboard {
            display: none;
        }

        .dashboard.active {
            display: block;
        }

        .level-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
            margin: 2rem 0;
        }

        .level-btn {
            background: var(--secondary);
            border: none;
            padding: 1rem;
            border-radius: 10px;
            color: var(--text);
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1rem;
            font-weight: bold;
            font-family: 'Poppins', sans-serif;
            animation: fadeIn 1s;
        }

        .level-btn:hover:not(.locked) {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .locked {
            background: #4a4a4a;
            cursor: not-allowed;
            opacity: 0.5;
        }

        /* Game Screen Styles */
        .game-screen {
            display: none;
        }

        .game-screen.active {
            display: block;
        }

        .question-box {
            background: rgba(255, 255, 255, 0.1);
            padding: 2rem;
            border-radius: 15px;
            margin: 2rem 0;
            animation: slideIn 0.5s ease-out;
        }

        .timer-box, .lives-box, .hint-box {
            position: fixed;
            top: 20px;
            background: rgba(0, 0, 0, 0.3);
            padding: 1rem;
            border-radius: 10px;
            font-size: 1rem;
            font-weight: bold;
            animation: fadeIn 1s;
        }

        .timer-box {
            right: 20px;
        }

        .lives-box {
            left: 20px;
        }

        .hint-box {
            left: 50%;
            transform: translateX(-50%);
        }

        input[type="text"] {
            width: 80%;
            padding: 1rem;
            border: none;
            border-radius: 10px;
            margin: 1rem 0;
            font-size: 1.1rem;
            background: rgba(255, 255, 255, 0.1);
            color: var(--text);
            font-family: 'Poppins', sans-serif;
            animation: fadeIn 1s;
        }

        /* Shop Styles */
        .shop {
            display: none;
        }

        .shop.active {
            display: block;
        }

        .shop-item {
            background: rgba(255, 255, 255, 0.1);
            padding: 1rem;
            border-radius: 10px;
            margin: 1rem 0;
            cursor: pointer;
            transition: all 0.3s ease;
            animation: slideIn 0.5s ease-out;
        }

        .shop-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

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

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        @keyframes slideIn {
            from { transform: translateY(-20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        @keyframes celebrate {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }

        .celebrate {
            animation: celebrate 1s ease-in-out;
        }

        /* Dark Mode */
        .dark-mode {
            background: linear-gradient(45deg, #1A1A2E, #16213E);
            color: #E5E5E5;
        }

        /* Payment Animation */
        @keyframes paymentSuccess {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.8; }
            100% { transform: scale(1); opacity: 1; }
        }

        .payment-success {
            animation: paymentSuccess 1s ease-in-out;
            color: #00C853;
        }

        .payment-failed {
            color: #FF1744;
        }

        /* Smooth Scroll */
        html {
            scroll-behavior: smooth;
        }
    
</head>
<body>
    <!-- Loading Screen -->
    <div class="loading-screen">
        <div class="loader"></div>
        <h1>Loading...</h1>
    </div>

    <div class="container">
        <!-- Main Menu -->
        <div class="main-menu active">
            <h1 class="game-title"> Teka-Teki Master</h1>
            <div class="menu">
                <button class="btn" onclick="startNewGame()"> New Game</button>
                <button class="btn" onclick="continueGame()"> Continue Game</button>
                <button class="btn" onclick="toggleMusic()" id="musicBtn"> Putar Musik</button>
                <button class="btn" onclick="showShopLives()"> Toko Nyawa</button>
                <button class="btn" onclick="showShopHints()"> Toko Hint</button>
                <button class="btn" onclick="window.open('https://wa.me/6285773608993', '_blank')"> Hubungi Kami</button>
                <button class="btn" onclick="window.open('https://saweria.co/antboyDeveloper', '_blank')"> Donasi</button>
                <button class="btn" onclick="toggleDarkMode()"> Mode Gelap</button>
                <button class="btn" onclick="changeLanguage()"> Change Language</button>
            </div>
        </div>

        <!-- Dashboard -->
        <div class="dashboard">
            <h1 class="game-title">Pilih Level</h1>
            <div class="level-grid" id="levelGrid"></div>
            <div class="menu">
                <button class="btn" onclick="backToMainMenu()"> Menu Utama</button>
            </div>
        </div>

        <!-- Game Screen -->
        <div class="game-screen">
            <div class="lives-box">
                 Nyawa: <span id="lives">10</span>
            </div>
            <div class="hint-box">
                 Hint: <span id="hints">3</span>
            </div>
            <div class="timer-box">
                 Waktu: <span id="timer">20:00</span>
            </div>
            
            <div class="question-box">
                <h2 id="levelNumber">Level 1</h2>
                <p id="question"></p>
            </div>

            <input type="text" id="answerInput" placeholder="Masukkan jawabanmu...">
            <div class="menu">
                <button class="btn" onclick="checkAnswer()"> Submit</button>
                <button class="btn" onclick="useHint()"> Gunakan Hint</button>
                <button class="btn" onclick="backToDashboard()"> Menu Utama</button>
            </div>
        </div>

        <!-- Shop Nyawa -->
        <div class="shop" id="shopLives">
            <h1 class="game-title"> Toko Nyawa</h1>
            <h3>Beli Nyawa</h3>
            <div class="shop-item" onclick="buyLives(5, 1000)">
                <h3>5 Nyawa</h3>
                <p>Rp1.000</p>
                <button class="btn" onclick="processPayment('5nyawa', 1000, 'lives')"> Beli Sekarang</button>
            </div>
            <div class="shop-item" onclick="buyLives(10, 2000)">
                <h3>10 Nyawa</h3>
                <p>Rp2.000</p>
                <button class="btn" onclick="processPayment('10nyawa', 2000, 'lives')"> Beli Sekarang</button>
            </div>
            <div class="shop-item" onclick="buyLives(15, 3000)">
                <h3>15 Nyawa</h3>
                <p>Rp3.000</p>
                <button class="btn" onclick="processPayment('15nyawa', 3000, 'lives')"> Beli Sekarang</button>
            </div>
            <div class="shop-item" onclick="buyLives(20, 4000)">
                <h3>20 Nyawa</h3>
                <p>Rp4.000</p>
                <button class="btn" onclick="processPayment('20nyawa', 4000, 'lives')"> Beli Sekarang</button>
            </div>
            <div class="shop-item" onclick="buyLives(25, 5000)">
                <h3>25 Nyawa</h3>
                <p>Rp5.000</p>
                <button class="btn" onclick="processPayment('25nyawa', 5000, 'lives')"> Beli Sekarang</button>
            </div>
            <div class="menu">
                <button class="btn" onclick="backToMainMenu()"> Menu Utama</button>
            </div>
        </div>

        <!-- Shop Hint -->
        <div class="shop" id="shopHints">
            <h1 class="game-title"> Toko Hint</h1>
            <h3>Beli Hint</h3>
            <div class="shop-item" onclick="buyHints(5, 5000)">
                <h3>5 Hint</h3>
                <p>Rp5.000</p>
                <button class="btn" onclick="processPayment('5hint', 5000, 'hints')"> Beli Sekarang</button>
            </div>
            <div class="shop-item" onclick="buyHints(10, 10000)">
                <h3>10 Hint</h3>
                <p>Rp10.000</p>
                <button class="btn" onclick="processPayment('10hint', 10000, 'hints')"> Beli Sekarang</button>
            </div>
            <div class="shop-item" onclick="buyHints(15, 15000)">
                <h3>15 Hint</h3>
                <p>Rp15.000</p>
                <button class="btn" onclick="processPayment('15hint', 15000, 'hints')"> Beli Sekarang</button>
            </div>
            <div class="shop-item" onclick="buyHints(20, 20000)">
                <h3>20 Hint</h3>
                <p>Rp20.000</p>
                <button class="btn" onclick="processPayment('20hint', 20000, 'hints')"> Beli Sekarang</button>
            </div>
            <div class="shop-item" onclick="buyHints(25, 25000)">
                <h3>25 Hint</h3>
                <p>Rp25.000</p>
                <button class="btn" onclick="processPayment('25hint', 25000, 'hints')"> Beli Sekarang</button>
            </div>
            <div class="menu">
                <button class="btn" onclick="backToMainMenu()"> Menu Utama</button>
            </div>
        </div>
    </div>

    <!-- Audio for Music -->
    <audio id="backgroundMusic" loop>
        <source src="https://a.top4top.io/m_3340u2r925.mp3" type="audio/mpeg">
        Browser Anda tidak mendukung audio.
    </audio>

    <!-- External JavaScript -->
    <script src="security.js"></script>
    <script src="antboy.js"></script>
</body>
</html>