* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: fixed;
        }

        body {
            background: white;
            cursor: none;
            font-family: 'Arial', sans-serif;
            touch-action: none;
        }

        #cursor {
            position: fixed;
            width: 100px;
            height: 100px;
            pointer-events: none;
            z-index: 1000;
            transform: translate(-50%, -50%);
            transition: transform 0.05s;
        }

        #cursor img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        #ball {
            position: absolute;
            width: 50px;
            height: 50px;
            cursor: none;
            filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
            will-change: transform;
            transition: none;
        }

        @media (max-width: 768px) {
            #ball {
                width: 40px;
                height: 40px;
            }
        }

        #ball img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            pointer-events: none;
        }

        #info {
            position: fixed;
            top: 45px;
            left: 20px;
            color: #333;
            font-size: 11px;
            z-index: 999;
            padding: 0;
            pointer-events: none;
        }

        .wall {
            position: fixed;
            background: rgba(255, 255, 255, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.4);
            box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1);
        }

        #top-wall {
            top: 0;
            left: 0;
            right: 0;
            height: 10px;
        }

        #bottom-wall {
            bottom: 0;
            left: 0;
            right: 0;
            height: 10px;
        }

        #left-wall {
            left: 0;
            top: 0;
            bottom: 0;
            width: 10px;
        }

        #right-wall {
            right: 0;
            top: 0;
            bottom: 0;
            width: 10px;
        }

        .goal {
            position: fixed;
            z-index: 1;
        }

        .goal-structure {
            position: relative;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(5px);
        }

        .goal-post {
            position: absolute;
            background: linear-gradient(145deg, #ffffff, #e0e0e0);
            border: 2px solid #333;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        .goal-crossbar {
            position: absolute;
            background: linear-gradient(145deg, #ffffff, #e0e0e0);
            border: 2px solid #333;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        .goal-net {
            position: absolute;
            background:
                repeating-linear-gradient(0deg, transparent, transparent 15px, rgba(220, 220, 220, 0.5) 15px, rgba(220, 220, 220, 0.5) 17px),
                repeating-linear-gradient(90deg, transparent, transparent 15px, rgba(220, 220, 220, 0.5) 15px, rgba(220, 220, 220, 0.5) 17px);
            pointer-events: none;
            opacity: 0.8;
        }

        #score-board {
            position: fixed;
            top: 20px;
            left: 20px;
            color: black;
            padding: 0;
            font-size: 14px;
            font-weight: bold;
            z-index: 999;
            pointer-events: none;
        }

        .goal-celebration {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 100px;
            font-weight: 900;
            color: black;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 2px 2px 4px rgba(0, 0, 0, 0.1);
            animation: goalPop 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            pointer-events: none;
            z-index: 9999;
            letter-spacing: 5px;
            font-style: italic;
        }

        @keyframes goalPop {
            0% {
                transform: translate(-50%, -50%) scale(0.5);
                opacity: 0;
                filter: blur(10px);
            }

            20% {
                transform: translate(-50%, -50%) scale(1.2);
                opacity: 1;
                filter: blur(0);
            }

            80% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
                filter: blur(0);
            }

            100% {
                transform: translate(-50%, -50%) scale(1.5);
                opacity: 0;
                filter: blur(10px);
            }
        }

        .particle {
            position: fixed;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9998;
        }

        #siuuu-container {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 200px;
            height: 200px;
            z-index: 1000;
            display: none;
            pointer-events: none;
        }

        #siuuu-container img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
        }