/* Modern polish layer - additive only, keeps the site's original gold/dark palette.
   Colors used are taken from the existing code:
   gold  #ffdc02 / #f8ce19 / #f4ae00 / #FDB931
   dark panel  #201E21
   Everything here enhances interaction/feel without changing layout or base colors. */

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: #f8ce19;
    color: #201E21;
}

/* Themed scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #f8ce19 #201E21;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #201E21;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f4ae00, #f8ce19);
    border-radius: 10px;
    border: 2px solid #201E21;
}
::-webkit-scrollbar-thumb:hover {
    background: #ffdc02;
}

/* Smooth interactions */
a,
button,
.btn,
.glowing,
.glowing2,
.tab-active,
.tab-nonactive,
input,
select,
textarea {
    transition: transform .18s ease, box-shadow .2s ease, filter .2s ease,
        border-color .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease;
}

/* Every button gets a consistent modern feel */
button,
.btn,
.glowing,
.glowing2,
.submit,
.saldo-popup-btn,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    cursor: pointer;
    will-change: transform;
}
button:hover,
.btn:hover,
.glowing:hover,
.glowing2:hover,
.submit:hover,
.saldo-popup-btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
    filter: brightness(1.07) saturate(1.05);
    box-shadow: 0 8px 22px rgba(248, 206, 25, 0.28);
    transform: translateY(-2px);
}
button:active,
.btn:active,
.glowing:active,
.glowing2:active,
.submit:active,
.saldo-popup-btn:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
    transform: translateY(0) scale(0.98);
    filter: brightness(0.98);
}

/* Filled gold CTAs (register/submit) - extra glossy top highlight */
.glowing,
.glowing2,
.submit,
.saldo-popup-btn {
    box-shadow: 0 4px 14px rgba(248, 206, 25, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.glowing:hover,
.glowing2:hover,
.submit:hover,
.saldo-popup-btn:hover {
    box-shadow: 0 12px 26px rgba(248, 206, 25, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Outline MASUK button (transparent, white border) -> lights up gold on hover */
input[type="submit"]:hover {
    border-color: #ffdc02 !important;
    color: #ffdc02 !important;
    background-color: rgba(248, 206, 25, 0.10) !important;
}

/* Modal / notification close buttons */
.close,
.close-modal,
.close-notif {
    transition: transform .2s ease, color .2s ease, opacity .2s ease;
    cursor: pointer;
}
.close:hover,
.close-modal:hover,
.close-notif:hover {
    transform: scale(1.15) rotate(90deg);
    color: #ffdc02;
    opacity: 1;
}

/* Deposit method tabs */
.tab-nonactive:hover {
    box-shadow: 0 0 0 1px #ffdc02 inset, 0 6px 16px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}
.tab-active:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* Inputs & selects: refined focus glow in brand gold */
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    outline: none;
    border-color: #f8ce19 !important;
    box-shadow: 0 0 0 3px rgba(248, 206, 25, 0.25);
}

/* Game tiles: subtle lift + gold glow (filter-based to avoid clashing with existing bounce animation) */
.hot-games-bounce {
    cursor: pointer;
    transition: filter .25s ease;
}
.hot-games-bounce:hover {
    filter: drop-shadow(0 8px 16px rgba(248, 206, 25, 0.35)) brightness(1.04);
}

/* Generic link hover */
a:hover {
    text-decoration: none;
}

/* Close button on side menu */
.closebtn {
    transition: transform .2s ease, color .2s ease;
    cursor: pointer;
}
.closebtn:hover {
    transform: rotate(90deg);
    color: #ffdc02;
}