:root {
        /* Variabel Warna */
        --color-text: #fff;
        --color-bg-dark: #201E21;
        --color-bg-form: #2F211D;
        --color-border-form: #707070;
        --color-black: #000;

        /* Variabel untuk Efek Glowing */
        --glow-duration: 2500ms;
        --glow-c1: rgba(255, 255, 255, 1);
        --glow-c2: rgba(255, 255, 255, 0.1);
    }

    /* @property untuk animasi gradien (sudah bagus, tidak perlu diubah) */
    @property --angle {
        syntax: '<angle>';
        initial-value: 90deg;
        inherits: true;
    }

    @property --gradX {
        syntax: '<percentage>';
        initial-value: 50%;
        inherits: true;
    }

    @property --gradY {
        syntax: '<percentage>';
        initial-value: 0%;
        inherits: true;
    }

    body {
        margin: 0;
        /* Menghapus 'auto' karena body biasanya 100% width */
        color: var(--color-text);
        /* Latar belakang bisa ditambahkan di sini jika diperlukan */
        /* background-color: var(--color-bg-dark); */
    }

    #right-column {
        width: 60%;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1049;

        background-color: var(--color-bg-dark);
        overflow-y: auto;
        /* Menggunakan overflow-y agar scrollbar hanya vertikal */

        /* Peningkatan: Gunakan transform untuk animasi yang lebih mulus */
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.5s ease, visibility 0.5s ease;

        font-size: 14px;
        text-transform: capitalize;
    }

    #right-column.active {
        transform: translateX(0);
        visibility: visible;
    }

    .overlay {
        position: fixed;
        inset: 0;
        /* Shorthand untuk top, right, bottom, left: 0 */
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 21;

        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    }

    .overlay.show {
        opacity: 1;
        visibility: visible;
    }


    /* ==========================================================================
   3. Komponen UI (Tombol, Form, Menu)
   ========================================================================== */

    .form-control {
        background-color: var(--color-bg-form);
        border-color: var(--color-border-form);
        color: var(--color-text);
        appearance: none;
        /* Properti standar, menggantikan -moz- dan -webkit- */
    }

    .closebtn {
        position: absolute;
        top: 0;
        right: 9px;
        z-index: 3;

        color: var(--color-text);
        font-size: 33px;
        padding: 1px 5px;
        cursor: pointer;
        /* Menambahkan cursor pointer untuk interaktivitas */
    }

    #progressive_jackpot {
        font-family: 'Open24DisplaySt', sans-serif;
        /* Fallback font */
        font-size: 32px;
        margin: auto auto auto 0;
    }

    /* --- Main Menu --- */
    .main-menu-outer-container {
        display: flex;
        z-index: 3;
    }

    .main-menu-outer-container>i {
        color: var(--color-text);
        display: flex;
        align-items: center;
        padding: 0 3px;
    }

    .main-menu-outer-container>main {
        margin: 0;
        display: flex;
        overflow-x: auto;
        /* Scroll horizontal jika item tidak muat */
    }

    /* 
 * Peningkatan: Menggunakan satu kelas .menu-item untuk mengurangi duplikasi kode 
 * untuk <a> dan <div> di dalam menu.
 */
    .menu-item {
        display: block;
        white-space: nowrap;
        padding: 10px 0;
        font-size: 11px;
        text-align: center;
        color: var(--color-text);
        text-transform: uppercase;
        text-decoration: none;
        /* Menghilangkan garis bawah pada link */
    }

    .menu-item img {
        display: block;
        width: 25px;
        margin: 10px auto;
    }

    /* Menggunakan flexbox 'auto margin' untuk mendorong grup item ke tengah */
    .main-menu-outer-container>main>.menu-item:first-child {
        margin-left: auto;
    }

    .main-menu-outer-container>main>.menu-item:last-child {
        margin-right: auto;
    }

    .active-menu-scroll {
        position: sticky;
        top: 50px;
        background-color: var(--color-black);
        z-index: 1;
    }


    /* ==========================================================================
   4. Efek dan Animasi
   ========================================================================== */

    /* --- Animasi Bounce --- */
    .hot-games-bounce {
        animation: hot-games-bounce 2s ease infinite;
        /* Durasi dan iterasi bisa disesuaikan */
    }

    @keyframes hot-games-bounce {

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

        10% {
            transform: scale(1.1, 0.9) translateY(0);
        }

        30% {
            transform: scale(0.9, 1.1) translateY(-2px);
        }
    }

    /* --- Animasi Border Glowing --- */
    .glowing {
        border: 0.35rem solid;
        /* Peningkatan: Menggunakan modifier class .glowing--radial agar lebih jelas */
        border-image: conic-gradient(from var(--angle), var(--glow-c2), var(--glow-c1) 0.1turn, var(--glow-c1) 0.15turn, var(--glow-c2) 0.25turn) 30;
        animation: borderRotate var(--glow-duration) linear infinite forwards;
    }

    .glowing.glowing--radial {
        border-image: radial-gradient(ellipse at var(--gradX) var(--gradY), var(--glow-c1), var(--glow-c1) 10%, var(--glow-c2) 40%) 30;
        animation: borderRadial var(--glow-duration) linear infinite forwards;
    }

    @keyframes borderRotate {
        100% {
            --angle: 420deg;
        }
    }

    @keyframes borderRadial {
        20% {
            --gradX: 100%;
            --gradY: 50%;
        }

        40% {
            --gradX: 100%;
            --gradY: 100%;
        }

        60% {
            --gradX: 50%;
            --gradY: 100%;
        }

        80% {
            --gradX: 0%;
            --gradY: 50%;
        }

        100% {
            --gradX: 50%;
            --gradY: 0%;
        }
    }


    /* --- Animasi Shine --- */
    .glowing2 {
        position: relative;
        overflow: hidden;
    }

    .glowing2::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100px;
        width: 100px;
        height: 100%;
        background-image: linear-gradient(120deg,
                rgba(255, 255, 255, 0) 30%,
                rgba(255, 255, 255, 0.8),
                rgba(255, 255, 255, 0) 70%);
        animation: shine 3s infinite linear;
    }

    @keyframes shine {
        0% {
            left: -100px;
        }

        20% {
            left: 100%;
        }

        100% {
            left: 100%;
        }
    }