body {
    background-color: #060608;
    color: #ffffff;
    overflow-x: hidden;
    position: relative;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255, 30, 66, 0.18),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 30%,
            rgba(255, 0, 60, 0.12),
            transparent 35%
        ),
        radial-gradient(
            circle at 50% 90%,
            rgba(139, 0, 0, 0.15),
            transparent 40%
        ),
        #060608;

    background-size: 180% 180%;
    animation: bodyGlow 12s ease-in-out infinite;
}

        /* Dark Texture Overlay */
        .bg-smoke-pattern {
            background-image:
                radial-gradient(circle at 20% 20%, rgba(255, 30, 66, 0.18), transparent 35%),
                radial-gradient(circle at 80% 30%, rgba(255, 0, 60, 0.12), transparent 35%),
                radial-gradient(circle at 50% 90%, rgba(139, 0, 0, 0.15), transparent 40%),
                #060608,
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M11 18c3.86 0 7-3.14 7-7s-3.14-7-7-7-7 3.14-7 7 3.14 7 7 7zm48 25c3.86 0 7-3.14 7-7s-3.14-7-7-7-7 3.14-7 7 3.14 7 7 7zm-43-7c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zm63 31c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zM34 90c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zm56-76c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z' fill='%3C%23ff1e42%3E' fill-opacity='0.03'/%3E%3C/svg%3E");
            background-size: 180% 180%, 180% 180%, 180% 180%, auto, 100px 100px;
        }

        /* Glassmorphism Panels */
        .glass-card {
            background: rgba(18, 18, 24, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 30, 66, 0.3);
        }

        .glass-card-main {
            background: linear-gradient(180deg, rgba(22, 18, 25, 0.95) 0%, rgba(12, 10, 15, 0.98) 100%);
            backdrop-filter: blur(16px);
            border: 2px solid #ff1e42;
            box-shadow: 0 0 30px rgba(255, 30, 66, 0.4), inset 0 0 15px rgba(255, 30, 66, 0.15);
        }

        /* Red Neon Glow Text */
        .glow-text-red {
            text-shadow: 0 0 10px rgba(255, 30, 66, 0.8), 0 0 20px rgba(255, 30, 66, 0.5), 0 0 30px rgba(220, 20, 60, 0.3);
        }

        .glow-text-gold {
            text-shadow: 0 0 8px rgba(255, 215, 0, 0.8), 0 0 15px rgba(255, 140, 0, 0.5);
        }

        /* Premium Metallic Button Effect */
        .btn-premium-red {
            background: linear-gradient(180deg, #ff2e4d 0%, #a80018 50%, #68000f 100%);
            border: 1px solid #ff6b81;
            box-shadow: 0 4px 15px rgba(255, 30, 66, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.4);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .btn-premium-red:hover {
            background: linear-gradient(180deg, #ff4763 0%, #c4001d 50%, #8a0014 100%);
            box-shadow: 0 0 25px rgba(255, 30, 66, 0.8), inset 0 1px 2px rgba(255, 255, 255, 0.6);
            transform: translateY(-2px) scale(1.01);
        }

        .btn-dark-glow {
            background: linear-gradient(180deg, #1f1b24 0%, #0d0b10 100%);
            border: 1px solid rgba(255, 30, 66, 0.5);
            transition: all 0.25s ease;
        }

        .btn-dark-glow:hover {
            border-color: #ff1e42;
            background: linear-gradient(180deg, #2d2436 0%, #17121c 100%);
            box-shadow: 0 0 18px rgba(255, 30, 66, 0.5);
            transform: translateY(-2px);
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #08080a;
        }
        ::-webkit-scrollbar-thumb {
            background: #8b0000;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #ff1e42;
        }

/* ============================================================
   LOGO PNG & GAMBAR TENGAH
   Ganti assets/logo.png dan assets/hero.png tanpa mengubah HTML.
   ============================================================ */
.site-logo-wrap {
    width: min(78vw, 360px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.site-logo {
    width: 100%;
    max-height: 88px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 14px rgba(255, 30, 66, .45));
}
.hero-image-wrap {
    width: min(78vw, 330px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 30, 66, .75);
    box-shadow: 0 0 30px rgba(255, 30, 66, .35);
    background: #08080a;
}
.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 420px) {
    .site-logo-wrap { width: min(82vw, 300px); }
    .site-logo { max-height: 70px; }
    .hero-image-wrap { width: min(65vw, 260px); }
}
@keyframes bodyGlow {
    0% {
        background-position: 0% 0%;
    }

    25% {
        background-position: 100% 30%;
    }

    50% {
        background-position: 70% 100%;
    }

    75% {
        background-position: 20% 70%;
    }

    100% {
        background-position: 0% 0%;
    }
}
body::before {
    content: "";
    position: fixed;
    width: 500px;
    height: 500px;

    left: -150px;
    top: 20%;

    background: radial-gradient(
        circle,
        rgba(255, 30, 66, 0.25) 0%,
        rgba(255, 30, 66, 0.08) 35%,
        transparent 70%
    );

    filter: blur(30px);
    pointer-events: none;
    z-index: 0;

    animation: neonMove 10s ease-in-out infinite alternate;
}
@keyframes neonMove {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(300px, -80px) scale(1.2);
    }

    100% {
        transform: translate(650px, 150px) scale(0.9);
    }
}
body::after {
    content: "";
    position: fixed;
    width: 450px;
    height: 450px;

    right: -150px;
    bottom: 10%;

    background: radial-gradient(
        circle,
        rgba(220, 20, 60, 0.20) 0%,
        transparent 70%
    );

    filter: blur(35px);
    pointer-events: none;
    z-index: 0;

    animation: neonMove2 14s ease-in-out infinite alternate;
}
@keyframes neonMove2 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-250px, -120px) scale(1.25);
    }

    100% {
        transform: translate(-500px, 80px) scale(0.85);
    }
}
/* =========================================
   CARTOON GAME BACKGROUND
========================================= */

.game-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.dragon-background {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.particle-network {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.72;
}

.dragon-artwork {
    position: absolute;
    width: 0;
    height: 0;
}

.dragon-flight {
    position: absolute;
    width: clamp(250px, 38vw, 460px);
    overflow: visible;
    opacity: 0.48;
    filter: drop-shadow(0 0 20px rgba(255, 30, 66, 0.62));
}

.dragon-flight-one {
    top: 12%;
    left: -8%;
    animation: dragonSail 26s ease-in-out infinite alternate;
}

.dragon-flight-two {
    top: 58%;
    right: -8%;
    opacity: 0.38;
    filter: drop-shadow(0 0 18px rgba(255, 30, 66, 0.42));
    animation: dragonSailReverse 30s ease-in-out infinite alternate;
}

@keyframes dragonSail {
    from {
        transform: translate3d(0, 0, 0) rotate(-5deg);
    }

    to {
        transform: translate3d(62vw, -5vh, 0) rotate(4deg);
    }
}

@keyframes dragonSailReverse {
    from {
        transform: translate3d(0, 0, 0) scaleX(-1) rotate(-4deg);
    }

    to {
        transform: translate3d(-62vw, 4vh, 0) scaleX(-1) rotate(5deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dragon-flight-one {
        animation: none;
        left: 8%;
        top: 12%;
    }

    .dragon-flight-two {
        animation: none;
        right: 4%;
        top: 58%;
    }
}

/* ===============================
   CLOUD
================================ */

.game-cloud {
    position: absolute;
    font-size: 70px;
    opacity: 0.18;
    filter: drop-shadow(0 5px 10px rgba(255,255,255,0.15));
    animation: cloudMove linear infinite;
}

.cloud-1 {
    top: 12%;
    left: -150px;
    animation-duration: 28s;
}

.cloud-2 {
    top: 35%;
    left: -250px;
    font-size: 50px;
    animation-duration: 38s;
    animation-delay: 5s;
}

.cloud-3 {
    top: 65%;
    left: -200px;
    font-size: 90px;
    animation-duration: 45s;
    animation-delay: 10s;
}

@keyframes cloudMove {

    0% {
        transform: translateX(-200px);
    }

    100% {
        transform: translateX(calc(100vw + 300px));
    }

}

/* ===============================
   COIN
================================ */

.game-coin {
    position: absolute;
    font-size: 35px;
    filter:
        drop-shadow(0 0 8px rgba(255,215,0,0.8))
        drop-shadow(0 0 20px rgba(255,180,0,0.4));

    animation:
        coinFloat 3s ease-in-out infinite,
        coinRotate 1.2s linear infinite;
}

.coin-1 {
    left: 12%;
    top: 25%;
}

.coin-2 {
    right: 15%;
    top: 40%;
    animation-delay: 1s;
}

.coin-3 {
    left: 75%;
    bottom: 15%;
    animation-delay: 2s;
}

@keyframes coinFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-25px);
    }

}

@keyframes coinRotate {

    0% {
        rotate: 0deg;
    }

    50% {
        rotate: 180deg;
    }

    100% {
        rotate: 360deg;
    }

}

/* ===============================
   STAR
================================ */

.game-star {
    position: absolute;
    font-size: 25px;

    animation:
        starFloat 3s ease-in-out infinite,
        starGlow 1.5s ease-in-out infinite alternate;
}

.star-1 {
    top: 20%;
    left: 30%;
}

.star-2 {
    top: 55%;
    right: 25%;
    animation-delay: 1s;
}

.star-3 {
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

@keyframes starFloat {

    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(20deg);
    }

}

@keyframes starGlow {

    from {
        opacity: 0.3;
        filter: drop-shadow(0 0 2px gold);
    }

    to {
        opacity: 1;
        filter: drop-shadow(0 0 15px gold);
    }

}

/* ===============================
   GAME BLOCK
================================ */

.game-block {
    position: absolute;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #ffd84d,
            #ff9d00
        );

    border: 3px solid #8a4300;

    border-radius: 8px;

    color: #8a4300;

    font-size: 28px;
    font-weight: 900;

    box-shadow:
        0 5px 0 #6e3500,
        0 0 15px rgba(255,190,0,0.5);

    animation: blockBounce 2s ease-in-out infinite;
}

.block-1 {
    left: 8%;
    bottom: 25%;
}

.block-2 {
    right: 8%;
    bottom: 35%;
    animation-delay: 1s;
}

@keyframes blockBounce {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

}

/* ===============================
   CARTOON CHARACTER
================================ */

.game-character {

    position: absolute;

    left: 50%;
    bottom: 20px;

    width: 70px;
    height: 90px;

    transform: translateX(-50%);

    animation: characterJump 2s ease-in-out infinite;

}

/* Kepala */

.character-head {

    position: absolute;

    width: 55px;
    height: 55px;

    left: 7px;

    background: #ffb27a;

    border-radius: 50%;

    border: 4px solid #4a1800;

}

/* Topi */

.character-head::before {

    content: "";

    position: absolute;

    width: 65px;
    height: 20px;

    left: -9px;
    top: -8px;

    background: #e60035;

    border-radius: 50% 50% 20% 20%;

    border: 4px solid #4a1800;

}

/* Mata */

.character-head::after {

    content: "•  •";

    position: absolute;

    top: 17px;
    left: 14px;

    color: #111;

    font-size: 16px;

    letter-spacing: 5px;

}

/* Badan */

.character-body {

    position: absolute;

    width: 45px;
    height: 40px;

    bottom: 0;
    left: 12px;

    background: #e60035;

    border-radius: 15px 15px 8px 8px;

    border: 4px solid #4a1800;

}

@keyframes characterJump {

    0%, 100% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, -35px);
    }

}

/* ===============================
   MOBILE
================================ */

@media (max-width: 600px) {

    .game-cloud {
        font-size: 45px;
    }

    .game-coin {
        font-size: 25px;
    }

    .game-star {
        font-size: 18px;
    }

    .game-block {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }

    .game-character {
        transform: translateX(-50%) scale(0.7);
    }

}

/* =================================
   GAME CARTOON BACKGROUND
================================= */

.game-bg {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}