Gobak Sodor Cyber Arena

by maritaningtyas

HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Gobak Sodor Cyber Arena - Permainan Tradisional Nusantara</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Google: Fredoka & Poppins -->
    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
    <!-- Canvas Confetti Library -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
    <!-- Custom Tailwind Configuration -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        fredoka: ['Fredoka', 'sans-serif'],
                        poppins: ['Poppins', 'sans-serif'],
                    },
                    colors: {
                        brand: {
                            purple: '#6d28d9',
                            cyan: '#06b6d4',
                            pink: '#ec4899',
                            yellow: '#f59e0b',
                            dark: '#0f172a',
                            card: '#1e293b'
                        }
                    }
                }
            }
        }
    </script>
    <style>
        body {
            font-family: 'Fredoka', sans-serif;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
        }
        .glow-text {
            text-shadow: 0 0 12px rgba(6, 182, 212, 0.6);
        }
        .glow-box {
            box-shadow: 0 0 20px rgba(109, 40, 217, 0.4);
        }
        /* Custom scrollbar for clean UI */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
   ...