/* =========================================================
   CARAMELTOTO V2
   Theme: Dark Glass + Blue Saber
   Mobile-first, PHP Native
   ========================================================= */

:root {
    --bg: #040710;
    --bg-soft: #08101e;
    --glass: rgba(10, 18, 34, .58);
    --glass-strong: rgba(7, 14, 27, .80);
    --line: rgba(93, 216, 255, .20);
    --line-strong: rgba(93, 216, 255, .48);
    --blue: #118cff;
    --cyan: #55e9ff;
    --saber: #00bfff;
    --white: #f5fbff;
    --muted: #91a9be;
    --danger: #ff4f6d;
    --shadow: 0 18px 55px rgba(0, 0, 0, .38);
    --saber-shadow:
        0 0 10px rgba(0, 191, 255, .60),
        0 0 28px rgba(0, 119, 255, .25);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    padding-bottom: 86px;
    color: var(--white);
    background: transparent;
    font-family:
        Inter, ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}

button,
input,
a {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

/* ---------- BACKGROUND ---------- */

/*
   Struktur folder:
   project/
   ├── css/
   │   └── style.css
   └── assets/
       └── background/
           └── background.gif

   Path GIF dari style.css:
   ../assets/background/background.gif
*/

.site-bg {
    position: fixed;
    z-index: -10;
    left: 0;
    top: 0;
    width: 100%;

    /*
       Fallback 100vh + 100lvh.
       100lvh menjaga tinggi bidang background tetap stabil
       ketika address bar Chrome Android muncul/hilang saat scroll.
    */
    height: 100vh;
    height: 100lvh;

    overflow: hidden;
    pointer-events: none;
    contain: paint;

    background:
        radial-gradient(circle at 15% -10%, rgba(11, 43, 85, .55) 0, transparent 32rem),
        linear-gradient(180deg, #050812 0%, #02040a 100%);
}

/*
   Layer anak dibuat absolute terhadap .site-bg.
   Jangan dibuat fixed satu per satu agar framing GIF tidak
   dihitung ulang saat viewport browser berubah.
*/
.site-bg > div {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.site-bg__image {
    z-index: -9;
    background-image: url("../assets/background/background.gif");
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;

    opacity: .76;
    filter:
        saturate(1.08)
        contrast(1.04)
        brightness(.98);

    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

.site-bg__overlay {
    z-index: -5;
    background:
        linear-gradient(
            180deg,
            rgba(2, 6, 14, .06) 0%,
            rgba(2, 5, 12, .17) 46%,
            rgba(2, 4, 10, .40) 100%
        );
}

/* Grid dimatikan supaya GIF bersih dan tidak terlalu ramai */
.site-bg__grid {
    display: none;
}

/* Glow dipertahankan tipis */
.site-bg__glow {
    width: 50vw;
    height: 50vw;
    min-width: 260px;
    min-height: 260px;
    max-width: 620px;
    max-height: 620px;
    border-radius: 50%;
    filter: blur(78px);
    opacity: .06;
    animation: floatGlow 10s ease-in-out infinite alternate;
}

.site-bg__glow--one {
    left: -15vw;
    top: 5vh;
    right: auto;
    bottom: auto;
    background: #0078ff;
}

.site-bg__glow--two {
    right: -20vw;
    top: 44vh;
    left: auto;
    bottom: auto;
    background: #00d8ff;
    animation-delay: -4s;
}

@keyframes floatGlow {
    from { transform: translate3d(0, 0, 0) scale(.95); }
    to   { transform: translate3d(8vw, 5vh, 0) scale(1.08); }
}

/* ---------- BASIC GLASS ---------- */

.glass {
    background:
        linear-gradient(145deg, rgba(18, 31, 52, .64), rgba(6, 13, 26, .48));
    border: 1px solid var(--line);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        var(--shadow);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

/* ---------- TOPBAR ---------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:
        max(10px, env(safe-area-inset-top))
        16px
        10px;
    background: rgba(4, 9, 20, .64);
    border-bottom: 1px solid rgba(88, 211, 255, .16);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand__mark {
    width: 39px;
    height: 39px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #eafeff;
    font-weight: 900;
    font-size: 19px;
    background:
        linear-gradient(135deg, rgba(8, 157, 255, .94), rgba(0, 210, 255, .82));
    border: 1px solid rgba(151, 237, 255, .68);
    box-shadow: var(--saber-shadow);
}

.brand__text {
    line-height: 1.05;
}

.brand__text strong {
    display: block;
    font-size: 16px;
    letter-spacing: .6px;
}

.brand__text span {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-btn {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--cyan);
    background: rgba(9, 19, 35, .62);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: inset 0 1px rgba(255,255,255,.04);
}

/* ---------- PAGE ---------- */

.page {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 14px 14px 28px;
}

/* ---------- HERO ---------- */

.hero {
    position: relative;
    min-height: 238px;
    padding: 22px;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 78% 16%, rgba(85,233,255,.27), transparent 34%),
        linear-gradient(135deg, rgba(0,112,255,.20), transparent 50%),
        linear-gradient(180deg, rgba(2, 7, 15, .12), rgba(1,4,10,.87));
}

.hero::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 4px;
    left: 22px;
    top: 24px;
    border-radius: 10px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    box-shadow: 0 0 16px var(--saber);
    opacity: .75;
}

.hero__content {
    position: relative;
    z-index: 2;
    max-width: 520px;
}

.eyebrow {
    margin: 0 0 7px;
    color: var(--cyan);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero h1 {
    margin: 0;
    font-size: clamp(30px, 8.5vw, 54px);
    line-height: .98;
    letter-spacing: -1.5px;
}

.hero h1 span {
    color: transparent;
    background: linear-gradient(180deg, #ffffff, #75ecff 55%, #1193ff);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 14px rgba(0,191,255,.25));
}

.hero p {
    max-width: 460px;
    margin: 12px 0 0;
    color: #b6cad9;
    font-size: 13px;
    line-height: 1.55;
}

/* ---------- ANNOUNCEMENT ---------- */

.announcement {
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
    color: #cbeaff;
    font-size: 12px;
}

.announcement__icon {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: var(--cyan);
    background: rgba(0, 167, 255, .13);
    border: 1px solid rgba(74, 220, 255, .25);
}

/* ---------- AUTH CARD ---------- */

.auth-card {
    margin-top: 13px;
    padding: 16px;
    border-radius: 20px;
}

.input-group {
    position: relative;
    margin-bottom: 11px;
}

.input-group__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #64ddff;
    z-index: 2;
}

.input-control {
    width: 100%;
    height: 54px;
    padding: 0 16px 0 47px;
    color: #f6fcff;
    background: rgba(2, 8, 17, .64);
    border: 1px solid rgba(99, 216, 255, .20);
    border-radius: 16px;
    outline: 0;
    transition: .2s ease;
}

.input-control::placeholder {
    color: #6f879a;
}

.input-control:focus {
    border-color: rgba(85, 233, 255, .60);
    box-shadow: 0 0 0 3px rgba(0, 191, 255, .09);
}

.auth-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.btn {
    min-height: 50px;
    border: 0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    letter-spacing: .4px;
    cursor: pointer;
}

.btn--ghost {
    color: #bdefff;
    background: rgba(10, 23, 41, .62);
    border: 1px solid rgba(89, 221, 255, .38);
}

.btn--saber {
    color: #f5fdff;
    background:
        linear-gradient(135deg, #0877ff, #00c8ff);
    border: 1px solid rgba(163, 241, 255, .65);
    box-shadow: var(--saber-shadow);
}

/* ---------- CATEGORY ---------- */

.section {
    margin-top: 16px;
}

.section-heading {
    margin: 0 3px 10px;
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.section-heading h2 {
    margin: 0;
    font-size: 17px;
}

.section-heading span {
    color: var(--muted);
    font-size: 11px;
}

.categories {
    display: grid;
    grid-template-columns: repeat(5, minmax(68px, 1fr));
    gap: 9px;
    overflow-x: auto;
    padding-bottom: 3px;
}

.category {
    min-width: 68px;
    padding: 12px 6px 10px;
    border-radius: 17px;
    text-align: center;
    background: rgba(9, 19, 35, .58);
    border: 1px solid rgba(89, 211, 255, .14);
}

.category--active {
    border-color: rgba(85,233,255,.52);
    box-shadow: 0 0 18px rgba(0, 174, 255, .11);
}

.category__icon {
    width: 39px;
    height: 39px;
    margin: 0 auto 6px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #9af0ff;
    background: linear-gradient(145deg, rgba(0,126,255,.24), rgba(0,207,255,.08));
    border: 1px solid rgba(108,226,255,.18);
}

.category span {
    display: block;
    color: #bed3e2;
    font-size: 10px;
}

/* ---------- JACKPOT ---------- */

.jackpot {
    position: relative;
    padding: 17px;
    border-radius: 21px;
    overflow: hidden;
}

.jackpot::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -120px;
    top: -150px;
    border-radius: 50%;
    background: rgba(0,191,255,.20);
    filter: blur(45px);
}

.jackpot__label {
    position: relative;
    color: #7eeaff;
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 900;
}

.jackpot__amount {
    position: relative;
    margin-top: 4px;
    color: transparent;
    background: linear-gradient(180deg, #fff 0, #7eeaff 46%, #0d8eff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: clamp(30px, 8vw, 48px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -1px;
    filter: drop-shadow(0 0 12px rgba(0,191,255,.24));
}

.jackpot__sub {
    position: relative;
    margin-top: 8px;
    color: var(--muted);
    font-size: 11px;
}

/* ---------- QUICK CARDS ---------- */

.quick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.quick-card {
    min-height: 114px;
    padding: 15px;
    border-radius: 19px;
    position: relative;
    overflow: hidden;
}

.quick-card::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    right: -35px;
    bottom: -40px;
    border-radius: 50%;
    background: rgba(0,191,255,.13);
    filter: blur(18px);
}

.quick-card strong {
    position: relative;
    z-index: 2;
    display: block;
    font-size: 14px;
}

.quick-card span {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.4;
}

.quick-card__icon {
    position: relative;
    z-index: 2;
    width: 34px;
    height: 34px;
    margin-bottom: 11px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: var(--cyan);
    background: rgba(0, 159, 255, .13);
    border: 1px solid rgba(85,233,255,.18);
}

/* ---------- MEMBER ---------- */

.member-card {
    margin-top: 13px;
    padding: 15px;
    border-radius: 20px;
}

.member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.member-row small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    margin-bottom: 3px;
}

.member-row strong {
    font-size: 14px;
}

.member-balance {
    color: var(--cyan);
    text-align: right;
}

/* ---------- BOTTOM NAV ---------- */

.bottom-nav {
    position: fixed;
    z-index: 70;
    left: 50%;
    bottom: max(7px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(calc(100% - 20px), 720px);
    min-height: 58px;
    padding: 4px 8px;
    border-radius: 19px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: rgba(5, 12, 25, .78);
    border: 1px solid rgba(92,218,255,.20);
    box-shadow:
        0 18px 45px rgba(0,0,0,.55),
        inset 0 1px rgba(255,255,255,.04);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.bottom-item {
    min-height: 46px;
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #718b9f;
    font-size: 9px;
}

.bottom-item__icon {
    font-size: 18px;
}

.bottom-item--active {
    color: #baf2ff;
    background: rgba(0, 177, 255, .10);
}

.bottom-item--main {
    position: relative;
    top: -14px;
}

.bottom-item--main .bottom-item__icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0877ff, #00d5ff);
    border: 1px solid rgba(174,244,255,.75);
    box-shadow: var(--saber-shadow);
}

/* ---------- RESPONSIVE ---------- */

@media (min-width: 700px) {
    .page {
        padding-top: 20px;
    }

    .hero {
        min-height: 310px;
        padding: 30px;
    }

    .auth-card {
        padding: 20px;
    }

    .categories {
        grid-template-columns: repeat(5, 1fr);
    }
}


/* ---------- STABLE GIF BACKGROUND: MOBILE ---------- */

@media (max-width: 480px) {
    .site-bg {
        width: 100%;
        height: 100vh;
        height: 100lvh;
    }

    .site-bg__image {
        background-position: center top;
        background-size: cover;
        opacity: .78;
    }

    .site-bg__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(2, 6, 14, .05) 0%,
                rgba(2, 5, 12, .14) 45%,
                rgba(2, 4, 10, .36) 100%
            );
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* =========================================================
   V1.1 - Hamburger, Banner, Ticker, Real Game Center Icons
   ========================================================= */

.icon-btn svg,
.input-group__icon svg,
.category__icon svg,
.ticker__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.brand__logo {
    width: auto;
    max-width: 190px;
    max-height: 46px;
    object-fit: contain;
}

/* ---------- SIDE DRAWER ---------- */

.drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 79;
    background: rgba(0, 4, 12, .68);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.drawer-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.side-drawer {
    position: fixed;
    z-index: 80;
    top: 10px;
    right: 10px;
    bottom: 10px;
    width: min(82vw, 330px);
    border-radius: 24px;
    padding: 18px;
    transform: translateX(calc(100% + 30px));
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
    overflow-y: auto;
}

.side-drawer.is-open {
    transform: translateX(0);
}

.side-drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(96,218,255,.15);
}

.side-drawer__top strong {
    display: block;
    font-size: 20px;
}

.side-drawer__eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--cyan);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.drawer-close {
    width: 41px;
    height: 41px;
    border: 1px solid rgba(91,221,255,.22);
    border-radius: 13px;
    color: #a8efff;
    background: rgba(2,10,20,.58);
    font-size: 27px;
    line-height: 1;
}

.drawer-user {
    margin: 15px 0;
    padding: 12px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(3,12,24,.50);
    border: 1px solid rgba(92,214,255,.12);
}

.drawer-avatar {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 900;
    background: linear-gradient(135deg, #0877ff, #00d5ff);
    box-shadow: var(--saber-shadow);
}

.drawer-user small {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 9px;
}

.drawer-menu {
    display: grid;
    gap: 7px;
}

.drawer-menu a {
    min-height: 48px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 14px;
    color: #cce7f5;
    background: rgba(5,15,29,.42);
    border: 1px solid transparent;
}

.drawer-menu a:hover,
.drawer-menu a:focus {
    color: #fff;
    border-color: rgba(85,233,255,.28);
    background: rgba(0,160,255,.08);
}

.drawer-menu a span {
    width: 28px;
    color: var(--cyan);
    text-align: center;
    font-size: 17px;
}

.drawer-menu__danger {
    margin-top: 8px;
    color: #ff9bad !important;
    border-color: rgba(255,79,109,.12) !important;
}

/* ---------- BANNER ---------- */

.banner-slider {
    position: relative;
    height: clamp(210px, 52vw, 330px);
    border-radius: 24px;
    overflow: hidden;
}

.banner-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.banner-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .55s ease,
        transform .75s cubic-bezier(.2,.8,.2,1);
    transform: scale(1.025);
}

.banner-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-slide__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(2,6,14,.78), rgba(2,6,14,.05) 72%),
        linear-gradient(180deg, transparent 35%, rgba(1,5,12,.72));
}

.banner-slide__copy {
    position: absolute;
    z-index: 3;
    left: 20px;
    right: 20px;
    bottom: 21px;
}

.banner-slide__copy span {
    display: block;
    margin-bottom: 5px;
    color: #81efff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.banner-slide__copy strong {
    display: block;
    max-width: 82%;
    font-size: clamp(22px, 6vw, 36px);
    line-height: 1;
}

.banner-slide--fallback {
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 22%, rgba(0,217,255,.25), transparent 30%),
        radial-gradient(circle at 24% 96%, rgba(0,105,255,.22), transparent 36%),
        linear-gradient(135deg, #071426 0%, #06101c 50%, #02060d 100%);
}

.banner-slide--fallback::before {
    content: "";
    position: absolute;
    inset: -50%;
    background:
        repeating-linear-gradient(
            115deg,
            transparent 0 62px,
            rgba(89,229,255,.035) 63px 64px
        );
    animation: bannerGridMove 16s linear infinite;
}

.banner-slide__copy--fallback {
    top: 50%;
    bottom: auto;
    transform: translateY(-44%);
}

.banner-slide__copy--fallback strong {
    max-width: 100%;
    font-size: clamp(31px, 9vw, 55px);
    letter-spacing: -1px;
}

.banner-slide__copy--fallback strong em {
    display: block;
    color: transparent;
    font-style: normal;
    background: linear-gradient(180deg, #fff, #63e8ff 50%, #168cff);
    -webkit-background-clip: text;
    background-clip: text;
}

.banner-slide__copy--fallback p {
    max-width: 340px;
    margin: 9px 0 0;
    color: #9cb8cb;
    font-size: 11px;
}

.banner-fx {
    position: absolute;
    border-radius: 50%;
    filter: blur(35px);
    opacity: .45;
}

.banner-fx--one {
    width: 180px;
    height: 180px;
    right: -40px;
    top: -50px;
    background: #00d5ff;
}

.banner-fx--two {
    width: 150px;
    height: 150px;
    left: 18%;
    bottom: -95px;
    background: #006eff;
}

.banner-fx--three {
    width: 230px;
    height: 230px;
    left: 50%;
    top: 20%;
    transform: translate(-20%, -30%);
    background: #0077ff;
}

.banner-arrow {
    position: absolute;
    z-index: 6;
    top: 50%;
    transform: translateY(-50%);
    width: 37px;
    height: 37px;
    border: 1px solid rgba(139,234,255,.25);
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #c8f7ff;
    background: rgba(4,12,24,.48);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-size: 29px;
    line-height: 1;
}

.banner-arrow--prev {
    left: 10px;
}

.banner-arrow--next {
    right: 10px;
}

.banner-dots {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 11px;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
}

.banner-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.40);
    transition: .2s ease;
}

.banner-dot.is-active {
    width: 20px;
    border-radius: 20px;
    background: var(--cyan);
    box-shadow: 0 0 8px rgba(0,191,255,.55);
}

@keyframes bannerGridMove {
    from { transform: translate3d(0,0,0); }
    to   { transform: translate3d(80px,-40px,0); }
}

/* ---------- RUNNING TEXT ---------- */

.ticker {
    height: 46px;
    margin-top: 11px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ticker__icon {
    position: relative;
    z-index: 3;
    width: 45px;
    height: 100%;
    flex: 0 0 45px;
    display: grid;
    place-items: center;
    color: var(--cyan);
    background: rgba(0,142,255,.13);
    border-right: 1px solid rgba(86,223,255,.16);
}

.ticker__viewport {
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.ticker__track {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 55px;
    white-space: nowrap;
    animation: tickerMove 22s linear infinite;
}

.ticker__track span {
    color: #bed8e9;
    font-size: 11px;
}

@keyframes tickerMove {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 27.5px)); }
}

/* ---------- GAME CENTER ICON UPGRADE ---------- */

.category__icon {
    position: relative;
    overflow: hidden;
}

.category__icon::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 0, rgba(116,235,255,.15), transparent 65%);
    pointer-events: none;
}

.category__icon svg {
    position: relative;
    z-index: 2;
    width: 23px;
    height: 23px;
    stroke-width: 1.7;
}

.category:hover .category__icon,
.category--active .category__icon {
    color: #d8fbff;
    border-color: rgba(114,234,255,.36);
    box-shadow:
        inset 0 0 14px rgba(0,174,255,.10),
        0 0 16px rgba(0,174,255,.12);
}

@media (max-width: 380px) {
    .categories {
        grid-template-columns: repeat(5, 66px);
    }

    .category {
        padding-left: 4px;
        padding-right: 4px;
    }
}


/* =========================================================
   V1.3 - Assets folder images
   ========================================================= */

.brand__logo {
    max-width: 215px;
    max-height: 50px;
    object-fit: contain;
}

.category__icon img {
    position: relative;
    z-index: 2;
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter:
        drop-shadow(0 0 5px rgba(0,191,255,.28))
        drop-shadow(0 3px 4px rgba(0,0,0,.34));
}

.category:hover .category__icon img,
.category--active .category__icon img {
    transform: scale(1.06);
}

.banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =========================================================
   V1.5 - Progressive Jackpot GIF
   ========================================================= */

.jackpot-gif {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 0;
    min-height: 120px;
    background: rgba(4, 12, 24, .58);
    border-color: rgba(85, 233, 255, .28);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 0 24px rgba(0,191,255,.08),
        var(--shadow);
}

.jackpot-gif__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 480px) {
    .jackpot-gif__image {
        max-height: 180px;
    }
}


/* =========================================================
   V1.6 - Jackpot GIF Full Bleed
   ========================================================= */

.jackpot-gif {
    position: relative;
    width: calc(100% + 12px);
    margin-left: -6px;
    margin-right: -6px;
    padding: 0;
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.jackpot-gif__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 480px) {
    .jackpot-gif {
        width: calc(100% + 16px);
        margin-left: -8px;
        margin-right: -8px;
    }

    .jackpot-gif__image {
        max-height: none;
    }
}


/* =========================================================
   V1.7 - Compact Login Form
   ========================================================= */

.auth-card {
    padding: 13px 14px;
    border-radius: 18px;
}

.input-group {
    margin-bottom: 9px;
}

.input-control {
    height: 46px;
    padding: 0 14px 0 43px;
    border-radius: 14px;
    font-size: 14px;
}

.input-group__icon {
    left: 14px;
}

.input-group__icon svg {
    width: 19px;
    height: 19px;
}

.auth-actions {
    gap: 9px;
}

.auth-actions .btn {
    min-height: 44px;
    border-radius: 14px;
    font-size: 15px;
}

@media (max-width: 420px) {
    .auth-card {
        padding: 12px;
    }

    .input-control {
        height: 44px;
        font-size: 13.5px;
    }

    .auth-actions .btn {
        min-height: 42px;
        font-size: 14px;
    }
}


/* =========================================================
   V1.8 - Clean Banner / Remove Inner Shadow
   ========================================================= */

.banner-slider {
    box-shadow: none !important;
}

.banner-slide__shade {
    background: transparent !important;
}

.banner-slide::after,
.banner-slider::after {
    box-shadow: none !important;
}


/* =========================================================
   V1.9 - PNG Footer Icons
   ========================================================= */

.bottom-item__icon {
    display: grid;
    place-items: center;
}

.bottom-item__icon img {
    display: block;
    width: 25px;
    height: 25px;
    object-fit: contain;
    filter:
        drop-shadow(0 0 5px rgba(0,191,255,.25))
        drop-shadow(0 2px 3px rgba(0,0,0,.35));
}

.bottom-item--active .bottom-item__icon img {
    filter:
        drop-shadow(0 0 7px rgba(85,233,255,.55))
        drop-shadow(0 2px 3px rgba(0,0,0,.35));
}

.bottom-item--main .bottom-item__icon img {
    width: 90px;
    height: 54px;
    object-fit: contain;
    filter:
        drop-shadow(0 0 8px rgba(255,255,255,.22))
        drop-shadow(0 0 14px rgba(0,191,255,.45));
}


/* =========================================================
   V2.0 - Compact Bottom Navigation Height
   Width intentionally unchanged.
   ========================================================= */
@media (max-width: 480px) {
    .bottom-nav {
        width: min(calc(100% - 20px), 720px);
        min-height: 56px;
        padding-top: 3px;
        padding-bottom: 3px;
        border-radius: 18px;
    }

    .bottom-item {
        min-height: 44px;
        gap: 1px;
    }

    .bottom-item--main {
        top: -13px;
    }
}


/* =========================================================
   V2.1 - Compact Homepage Banner
   Width unchanged; only vertical footprint is reduced.
   ========================================================= */
.banner-slider {
    height: clamp(145px, 42vw, 270px);
    border-radius: 20px;
}

.banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.banner-arrow {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 25px;
}

.banner-dots {
    bottom: 8px;
}

@media (max-width: 480px) {
    .banner-slider {
        height: clamp(145px, 42vw, 175px);
        border-radius: 18px;
    }

    .banner-arrow {
        width: 31px;
        height: 31px;
        border-radius: 10px;
        font-size: 23px;
    }

    .banner-arrow--prev {
        left: 8px;
    }

    .banner-arrow--next {
        right: 8px;
    }

    .banner-dots {
        bottom: 7px;
        gap: 5px;
    }

    .banner-dot {
        width: 5px;
        height: 5px;
    }

    .banner-dot.is-active {
        width: 17px;
    }
}


/* =========================================================
   V2.2 - Compact Running Text / Ticker
   Width unchanged; vertical footprint reduced.
   ========================================================= */
.ticker {
    height: 38px;
    margin-top: 8px;
    border-radius: 13px;
}

.ticker__icon {
    width: 39px;
    flex: 0 0 39px;
}

.ticker__icon svg,
.ticker__icon img {
    max-width: 20px;
    max-height: 20px;
}

.ticker__track {
    gap: 44px;
}

.ticker__track span {
    font-size: 10px;
    line-height: 1;
}

@media (max-width: 480px) {
    .ticker {
        height: 36px;
        margin-top: 7px;
        border-radius: 12px;
    }

    .ticker__icon {
        width: 37px;
        flex-basis: 37px;
    }

    .ticker__icon svg,
    .ticker__icon img {
        max-width: 19px;
        max-height: 19px;
    }

    .ticker__track {
        gap: 40px;
    }

    .ticker__track span {
        font-size: 9.5px;
    }
}


/* =========================================================
   V2.3 - Header Wallet Balance
   ========================================================= */
.topbar {
    overflow: visible;
}

.topbar__actions {
    position: relative;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 7px;
}

.header-wallet {
    position: relative;
}

.header-wallet > summary {
    list-style: none;
}

.header-wallet > summary::-webkit-details-marker {
    display: none;
}

.header-wallet__pill {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px 5px 7px;
    border-radius: 13px;
    border: 1px solid rgba(82, 214, 255, .19);
    background:
        linear-gradient(
            145deg,
            rgba(7, 31, 57, .92),
            rgba(2, 13, 27, .94)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 0 18px rgba(0, 155, 255, .07);
    cursor: pointer;
    user-select: none;
}

.header-wallet[open] .header-wallet__pill {
    border-color: rgba(82, 219, 255, .38);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 0 22px rgba(0, 180, 255, .14);
}

.header-wallet__icon {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #55ddff;
    background: rgba(0, 140, 220, .10);
    border: 1px solid rgba(77, 212, 255, .12);
}

.header-wallet__icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.header-wallet__copy {
    min-width: 0;
    display: block;
}

.header-wallet__copy small {
    display: block;
    margin-bottom: 1px;
    color: #5e8196;
    font-size: 5.5px;
    font-weight: 900;
    letter-spacing: .75px;
    line-height: 1;
}

.header-wallet__copy strong {
    display: block;
    max-width: 128px;
    overflow: hidden;
    color: #dff9ff;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.header-wallet__chevron {
    color: #4f8299;
    font-size: 8px;
    transition: transform .18s ease;
}

.header-wallet[open] .header-wallet__chevron {
    transform: rotate(180deg);
}

.header-wallet__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 230px;
    padding: 10px;
    border-radius: 15px;
    border: 1px solid rgba(75, 210, 255, .20);
    background:
        linear-gradient(
            145deg,
            rgba(6, 25, 47, .98),
            rgba(2, 10, 22, .985)
        );
    box-shadow:
        0 18px 45px rgba(0,0,0,.42),
        0 0 25px rgba(0, 159, 255, .09);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.header-wallet__menu-head {
    padding: 3px 4px 10px;
    border-bottom: 1px solid rgba(76, 195, 238, .08);
}

.header-wallet__menu-head span {
    display: block;
    color: #65879a;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .8px;
}

.header-wallet__menu-head strong {
    display: block;
    margin-top: 4px;
    color: #ecfbff;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.header-wallet__quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 9px;
}

.header-wallet__action {
    min-height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 8px;
    border-radius: 10px;
    text-decoration: none;
    color: #bfeeff;
    border: 1px solid rgba(78, 203, 249, .12);
    background: rgba(4, 25, 43, .72);
    font-size: 7px;
    font-weight: 900;
}

.header-wallet__action span {
    color: #59dcff;
    font-size: 13px;
    line-height: 1;
}

.header-wallet__action--deposit {
    color: #fff;
    background: linear-gradient(135deg, #087dff, #00bce7);
    border-color: rgba(108, 225, 255, .34);
}

.header-wallet__action--deposit span {
    color: #fff;
}

.header-wallet__profile {
    min-height: 38px;
    margin-top: 7px;
    padding: 0 9px;
    display: flex;
    align-items: center;
    gap: 7px;
    border-radius: 10px;
    text-decoration: none;
    color: #87aabd;
    background: rgba(2, 13, 27, .62);
    font-size: 7px;
    font-weight: 900;
}

.header-wallet__profile span {
    color: #52d8ff;
    font-size: 12px;
}

.header-wallet__profile b {
    margin-left: auto;
    color: #4c7388;
    font-size: 12px;
}

.member-card--compact {
    padding-top: 11px;
    padding-bottom: 11px;
}

.member-row--compact {
    align-items: center;
}

.member-card__hint {
    display: block;
    margin-top: 3px;
    color: #587a8d;
    font-size: 6px;
}

.member-card__profile {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    border-radius: 10px;
    text-decoration: none;
    color: #a9dff0;
    background: rgba(0, 132, 202, .07);
    border: 1px solid rgba(76, 202, 247, .11);
    font-size: 7px;
    font-weight: 900;
}

.member-card__profile span {
    color: #4ddcff;
    font-size: 12px;
}

.member-card__actions {
    margin-top: 9px !important;
}

@media (max-width: 480px) {
    .topbar {
        gap: 5px;
    }

    .brand {
        min-width: 0;
        flex: 1 1 auto;
    }

    .brand__logo {
        max-width: 145px;
        object-fit: contain;
        object-position: left center;
    }

    .topbar__actions {
        flex: 0 0 auto;
        gap: 5px;
    }

    .header-wallet__pill {
        min-height: 39px;
        gap: 5px;
        padding: 4px 7px 4px 5px;
        border-radius: 11px;
    }

    .header-wallet__icon {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
        border-radius: 8px;
    }

    .header-wallet__icon svg {
        width: 15px;
        height: 15px;
    }

    .header-wallet__copy small {
        display: none;
    }

    .header-wallet__copy strong {
        max-width: 92px;
        font-size: 8px;
    }

    .header-wallet__chevron {
        display: none;
    }

    .header-wallet__menu {
        width: min(230px, calc(100vw - 20px));
        right: -46px;
        top: calc(100% + 7px);
    }

    .icon-btn {
        width: 39px;
        height: 39px;
        flex: 0 0 39px;
    }
}

@media (max-width: 375px) {
    .brand__logo {
        max-width: 126px;
    }

    .header-wallet__copy strong {
        max-width: 78px;
        font-size: 7.5px;
    }
}


/* =========================================================
   V2.4 - ACCOUNT HAMBURGER DRAWER
   Motifbet reference structure, WLA_V2 Dark Glass + Blue Saber.
   ========================================================= */

html.drawer-open,
html.drawer-open body {
    overflow: hidden;
}

.drawer-overlay {
    z-index: 109;
    background: rgba(0, 4, 12, .74);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.account-drawer {
    position: fixed;
    z-index: 110;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(80vw, 370px);
    max-width: calc(100vw - 42px);
    padding: 0 0 26px;
    border: 0;
    border-left: 2px solid rgba(47, 202, 255, .80);
    border-radius: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background:
        linear-gradient(
            90deg,
            rgba(3, 17, 32, .985),
            rgba(4, 29, 55, .97)
        );
    box-shadow:
        -18px 0 48px rgba(0, 0, 0, .52),
        -2px 0 20px rgba(0, 182, 255, .14),
        inset 1px 0 0 rgba(88, 221, 255, .11);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transform: translateX(105%);
}

.account-drawer::before {
    content: "";
    position: fixed;
    pointer-events: none;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(80vw, 370px);
    max-width: calc(100vw - 42px);
    opacity: .16;
    background-image:
        linear-gradient(rgba(47, 176, 231, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 176, 231, .12) 1px, transparent 1px);
    background-size: 34px 34px;
}

.account-drawer::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    right: -60px;
    bottom: -80px;
    width: 280px;
    height: 520px;
    background:
        radial-gradient(
            ellipse at center,
            rgba(0, 130, 255, .42),
            rgba(0, 130, 255, 0) 68%
        );
    filter: blur(5px);
}

.account-drawer.is-open {
    transform: translateX(0);
}

.account-drawer__close {
    position: sticky;
    z-index: 5;
    top: 10px;
    margin: 10px 12px 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 11px;
    color: #eafaff;
    background: rgba(2, 13, 27, .72);
    font-size: 31px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
}

.account-drawer__profile {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    padding: 7px 20px 17px;
    border-bottom: 1px solid rgba(68, 192, 239, .14);
}

.account-drawer__avatar {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #eaffff;
    background:
        radial-gradient(circle at 50% 34%, #48e7ff 0 18%, transparent 19%),
        radial-gradient(circle at 50% 78%, #48e7ff 0 31%, transparent 32%),
        rgba(17, 68, 83, .9);
    border: 3px solid #36d9f2;
    box-shadow:
        0 0 0 3px rgba(0, 158, 232, .08),
        0 0 24px rgba(0, 190, 255, .13);
    font-size: 0;
}

.account-drawer__identity {
    min-width: 0;
    padding-top: 3px;
}

.account-drawer__identity small {
    display: block;
    color: #b0c7d3;
    font-size: 8px;
}

.account-drawer__identity > strong {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #54ddff;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.account-drawer__balance {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 6px;
}

.account-drawer__balance span {
    color: #d8e9ef;
    font-size: 10px;
}

.account-drawer__balance b {
    overflow: hidden;
    color: #55dcff;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.account-drawer__logout {
    grid-column: 1 / -1;
    justify-self: center;
    min-width: 104px;
    min-height: 34px;
    margin-top: 2px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #ecffff;
    text-decoration: none;
    font-size: 9px;
    font-weight: 900;
    background:
        linear-gradient(135deg, #1595da, #2ddbe2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 0 18px rgba(0, 190, 255, .12);
}

.account-menu {
    position: relative;
    z-index: 1;
    display: block;
    padding: 14px 0 0;
}

.account-menu__item {
    position: relative;
    width: 100%;
    min-height: 54px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 0;
    border-radius: 0;
    color: #eef9ff;
    text-decoration: none;
    text-align: left;
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}

.account-menu__item:hover,
.account-menu__item:focus {
    color: #ffffff;
    background:
        linear-gradient(
            90deg,
            rgba(0, 193, 232, .30),
            rgba(18, 101, 136, .10)
        );
}

.account-menu__icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    color: #ddec57;
}

.account-menu__icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-history__toggle {
    justify-content: flex-start;
}

.account-history__toggle > span:nth-child(2) {
    flex: 1;
}

.account-history__chevron {
    margin-left: auto;
    color: #d8f4ff;
    font-size: 26px;
    line-height: 1;
    transform: rotate(0);
    transition: transform .18s ease;
}

.account-history.is-open .account-history__toggle {
    color: #fff;
    background:
        linear-gradient(
            90deg,
            rgba(15, 200, 221, .82),
            rgba(22, 75, 96, .28)
        );
}

.account-history.is-open .account-history__chevron {
    transform: rotate(90deg);
}

.account-history__submenu {
    padding: 2px 0 6px;
    background: rgba(1, 10, 21, .32);
}

.account-history__submenu[hidden] {
    display: none !important;
}

.account-history__submenu a {
    min-height: 42px;
    padding: 0 24px 0 63px;
    display: flex;
    align-items: center;
    color: #edf8fd;
    text-decoration: none;
    font-size: 10px;
    background: transparent;
}

.account-history__submenu a:hover,
.account-history__submenu a:focus {
    color: #63e4ff;
    background: rgba(0, 154, 219, .07);
}

/* Guest drawer */
.account-drawer__guest {
    position: relative;
    z-index: 1;
    padding: 7px 20px 20px;
    border-bottom: 1px solid rgba(64, 188, 238, .13);
}

.drawer-login-alert {
    margin-bottom: 9px;
    padding: 9px 10px;
    border-radius: 10px;
    color: #ffd6dd;
    background: rgba(128, 17, 39, .26);
    border: 1px solid rgba(255, 96, 126, .17);
    font-size: 7px;
    line-height: 1.45;
}

.drawer-login-form {
    display: grid;
    gap: 10px;
}

.drawer-login-field {
    min-height: 48px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 9px;
    border: 1px solid rgba(95, 198, 255, .25);
    background: rgba(2, 8, 45, .88);
    box-shadow: inset 0 0 16px rgba(0, 65, 190, .08);
}

.drawer-login-field:focus-within {
    border-color: rgba(79, 222, 255, .48);
    box-shadow:
        inset 0 0 16px rgba(0, 65, 190, .10),
        0 0 18px rgba(0, 164, 255, .08);
}

.drawer-login-field__icon {
    width: 45px;
    flex: 0 0 45px;
    display: grid;
    place-items: center;
    color: #e1ec50;
}

.drawer-login-field__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.drawer-login-field input {
    min-width: 0;
    width: 100%;
    height: 46px;
    padding: 0 11px 0 0;
    border: 0;
    outline: 0;
    color: #f0fbff;
    background: transparent;
    font-family: inherit;
    font-size: 10px;
}

.drawer-login-field input::placeholder {
    color: #758193;
}

.drawer-login-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 4px;
}

.drawer-login-btn {
    min-height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    text-decoration: none;
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
}

.drawer-login-btn--login {
    color: #fff;
    border: 1px solid rgba(238, 252, 255, .92);
    background: rgba(2, 9, 46, .84);
}

.drawer-login-btn--register {
    color: #fff;
    border: 1px solid rgba(75, 220, 240, .26);
    background:
        linear-gradient(135deg, #20a5da, #2cd8df);
}

.account-menu--guest {
    padding-top: 10px;
}

.account-menu [data-unwired="1"] {
    cursor: default;
}

/* Keep header wallet above normal page but below opened drawer. */
.topbar__actions {
    z-index: 90;
}

@media (max-width: 480px) {
    .account-drawer {
        width: 80vw;
        max-width: calc(100vw - 34px);
    }

    .account-drawer::before {
        width: 80vw;
        max-width: calc(100vw - 34px);
    }

    .account-drawer__profile {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 10px;
        padding-left: 17px;
        padding-right: 17px;
    }

    .account-drawer__avatar {
        width: 58px;
        height: 58px;
    }

    .account-menu__item {
        min-height: 51px;
        padding-left: 20px;
        padding-right: 18px;
        font-size: 10.5px;
    }

    .account-history__submenu a {
        min-height: 40px;
        padding-left: 58px;
        padding-right: 17px;
        font-size: 9.5px;
    }

    .account-drawer__guest {
        padding-left: 17px;
        padding-right: 17px;
    }
}

@media (max-width: 360px) {
    .account-drawer {
        width: 84vw;
        max-width: calc(100vw - 24px);
    }

    .account-drawer::before {
        width: 84vw;
        max-width: calc(100vw - 24px);
    }
}


/* =========================================================
   V2.5.1 - FIX Game Center Horizontal Slider
   IMPORTANT: actual container class is .categories
   ========================================================= */

.categories {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 9px !important;

    width: 100%;
    max-width: 100%;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding: 2px 2px 9px !important;

    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;

    scrollbar-width: none;
}

.categories::-webkit-scrollbar {
    display: none;
}

.categories > .category {
    flex: 0 0 112px !important;
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;

    box-sizing: border-box;
    scroll-snap-align: start;
}

/*
 * Keep every card visually aligned even when label has 2 lines,
 * e.g. TEMBAK IKAN.
 */
.categories > .category {
    min-height: 116px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.categories > .category .category__icon {
    flex: 0 0 auto;
}

.categories > .category > span {
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    text-align: center;
}

/*
 * Neutralize old <=380px grid rule:
 * .categories { grid-template-columns: repeat(5, 66px); }
 */
@media (max-width: 480px) {
    .categories {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding-right: 24px !important;
    }

    .categories > .category {
        flex: 0 0 108px !important;
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
    }
}

@media (max-width: 380px) {
    .categories {
        display: flex !important;
        grid-template-columns: none !important;
    }

    .categories > .category {
        flex: 0 0 104px !important;
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
    }
}


/* =========================================================
   V2.5.2 - Restore Original Game Center Card Size
   Keep horizontal swipe, restore original visual dimensions.
   ========================================================= */

.categories {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 9px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding: 0 0 3px !important;

    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.categories::-webkit-scrollbar {
    display: none;
}

/*
 * Original layout showed 5 cards across.
 * Keep exactly that visual width, but allow card #6 to sit
 * immediately to the right and become reachable by swipe.
 */
.categories > .category {
    flex: 0 0 calc((100% - 36px) / 5) !important;
    width: calc((100% - 36px) / 5) !important;
    min-width: 68px !important;
    max-width: none !important;

    min-height: 0 !important;
    padding: 12px 6px 10px !important;
    border-radius: 17px !important;

    display: block !important;
    text-align: center !important;

    scroll-snap-align: start;
}

.categories > .category .category__icon {
    width: 39px !important;
    height: 39px !important;
    margin: 0 auto 6px !important;
}

.categories > .category > span {
    min-height: 0 !important;
    display: block !important;
    font-size: 10px !important;
    line-height: normal !important;
    text-align: center !important;
}

/*
 * On narrow phones use the project's original 66px card behavior.
 */
@media (max-width: 380px) {
    .categories {
        gap: 9px !important;
        padding-right: 8px !important;
    }

    .categories > .category {
        flex: 0 0 66px !important;
        width: 66px !important;
        min-width: 66px !important;
        max-width: 66px !important;

        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}


/* =========================================================
   V2.6 - Homepage Horizontal Game Lobby
   Replaces old Quick Access.
   ========================================================= */

.home-lobby-section {
    margin-top: 18px;
}

.home-lobby-head {
    padding: 0 5px 8px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
}

.home-lobby-head small {
    display: block;
    margin-bottom: 2px;
    color: #57798e;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .9px;
}

.home-lobby-head h2 {
    margin: 0;
    color: #e8f9ff;
    font-size: 18px;
    line-height: 1;
}

.home-lobby-head > a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 1px;
    color: #66899b;
    text-decoration: none;
    font-size: 7px;
    font-weight: 800;
    white-space: nowrap;
}

.home-lobby-head > a span {
    color: #54ddff;
    font-size: 13px;
}

.home-lobby-rail {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 9px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 3px 8px;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.home-lobby-rail::-webkit-scrollbar {
    display: none;
}

/* Provider: approximately 2.6 cards visible on a typical phone */
.home-provider-card {
    flex: 0 0 142px;
    width: 142px;
    min-width: 142px;
    overflow: hidden;
    display: block;
    border-radius: 14px;
    text-decoration: none;
    scroll-snap-align: start;
    border: 1px solid rgba(73, 205, 251, .13);
    background:
        linear-gradient(
            145deg,
            rgba(6, 27, 50, .91),
            rgba(2, 11, 24, .94)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02),
        0 10px 24px rgba(0,0,0,.14);
}

.home-provider-card__media {
    height: 82px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(0, 141, 255, .17),
            transparent 67%
        ),
        rgba(0, 8, 19, .56);
    border-bottom: 1px solid rgba(72, 197, 245, .08);
}

.home-provider-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 7px;
}

.home-provider-card__fallback {
    min-width: 64px;
    min-height: 42px;
    padding: 0 9px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #63ddff;
    background: rgba(0, 129, 213, .10);
    border: 1px solid rgba(78, 212, 255, .12);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .7px;
}

.home-provider-card > strong {
    display: block;
    overflow: hidden;
    margin: 8px 8px 0;
    color: #e9faff;
    font-size: 9px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.home-provider-card > span:last-child {
    display: block;
    margin: 3px 8px 8px;
    color: #4fcfee;
    font-size: 5.5px;
    font-weight: 900;
    letter-spacing: .35px;
}

/* Togel market cards are wider to fit result balls. */
.home-lobby-rail--togel .home-market-card {
    flex: 0 0 178px;
    width: 178px;
    min-width: 178px;
}

.home-market-card {
    overflow: hidden;
    display: block;
    padding: 10px;
    border-radius: 15px;
    text-decoration: none;
    scroll-snap-align: start;
    border: 1px solid rgba(75, 212, 255, .17);
    background:
        linear-gradient(
            145deg,
            rgba(7, 35, 61, .94),
            rgba(2, 13, 28, .96)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 10px 25px rgba(0,0,0,.16);
}

.home-market-card__top {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.home-market-card__top strong {
    min-width: 0;
    overflow: hidden;
    color: #e9faff;
    font-size: 9px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.home-market-card__status {
    flex: 0 0 auto;
    padding: 3px 5px;
    border-radius: 999px;
    color: #65e4ff;
    background: rgba(0, 145, 211, .10);
    border: 1px solid rgba(77, 216, 255, .11);
    font-size: 5px;
    font-weight: 900;
}

.home-result-balls {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-top: 10px;
}

.home-result-balls span {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #effcff;
    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(84, 225, 255, .26),
            rgba(4, 19, 42, .98) 65%
        );
    border: 1px solid rgba(85, 222, 255, .35);
    box-shadow:
        inset 0 0 11px rgba(0, 173, 255, .12),
        0 0 8px rgba(0, 172, 255, .08);
    font-size: 11px;
    font-weight: 900;
}

.home-market-card__meta {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    gap: 6px;
    color: #64879a;
    font-size: 5.5px;
}

.home-market-card__meta b {
    overflow: hidden;
    color: #5bcfe9;
    font-weight: 900;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.home-market-card__waiting {
    min-height: 48px;
    margin-top: 10px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #64879a;
    background: rgba(0, 8, 20, .38);
    border: 1px dashed rgba(78, 200, 244, .10);
    font-size: 6px;
    font-weight: 900;
}

.home-market-card__cta {
    margin-top: 8px;
    padding-top: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #60ddff;
    border-top: 1px solid rgba(75, 198, 242, .08);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .4px;
}

.home-market-card__cta span {
    font-size: 12px;
}

@media (max-width: 480px) {
    .home-lobby-section {
        margin-top: 15px;
    }

    .home-lobby-head {
        padding-left: 4px;
        padding-right: 4px;
    }

    .home-lobby-head h2 {
        font-size: 17px;
    }

    .home-lobby-rail {
        gap: 8px;
        padding-right: 20px;
    }

    .home-provider-card {
        flex-basis: 138px;
        width: 138px;
        min-width: 138px;
    }

    .home-provider-card__media {
        height: 78px;
    }

    .home-lobby-rail--togel .home-market-card {
        flex-basis: 174px;
        width: 174px;
        min-width: 174px;
    }
}

@media (max-width: 380px) {
    .home-provider-card {
        flex-basis: 132px;
        width: 132px;
        min-width: 132px;
    }

    .home-provider-card__media {
        height: 74px;
    }

    .home-lobby-rail--togel .home-market-card {
        flex-basis: 166px;
        width: 166px;
        min-width: 166px;
    }
}


/* =========================================================
   V2.6.1 - Provider Cards Image Only
   SLOT -> LIVE CASINO -> SPORT -> SABUNG AYAM -> TEMBAK IKAN
   ========================================================= */

.home-provider-card {
    overflow: hidden;
    padding: 0 !important;
}

.home-provider-card__media {
    height: 92px;
    border-bottom: 0 !important;
}

.home-provider-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 7px;
}

/* Provider name + CTA intentionally removed from homepage cards. */
.home-provider-card > strong,
.home-provider-card > span:last-child:not(.home-provider-card__fallback) {
    display: none !important;
}

.home-provider-card__fallback {
    min-width: 52px;
    min-height: 52px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #61ddff;
    background:
        radial-gradient(
            circle at center,
            rgba(0, 157, 255, .18),
            rgba(0, 25, 50, .35)
        );
    border: 1px solid rgba(83, 216, 255, .14);
    font-size: 22px;
    line-height: 1;
}

@media (max-width: 480px) {
    .home-provider-card__media {
        height: 88px;
    }
}

@media (max-width: 380px) {
    .home-provider-card__media {
        height: 84px;
    }
}


/* =========================================================
   V2.7 - MEMBER PROFILE
   ========================================================= */

.profile-page {
    position: relative;
    z-index: 2;
    width: min(100%, 720px);
    margin: 0 auto;
    padding: 12px 12px 112px;
}

.profile-flash {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 13px;
    font-size: 8px;
    line-height: 1.45;
}

.profile-flash--success {
    color: #bfffe3;
    border: 1px solid rgba(66, 232, 164, .16);
    background: rgba(13, 101, 68, .22);
}

.profile-flash--error {
    color: #ffd2dc;
    border: 1px solid rgba(255, 88, 122, .16);
    background: rgba(127, 22, 49, .22);
}

.profile-hero {
    padding: 15px;
    border-radius: 19px;
    border: 1px solid rgba(79, 209, 255, .16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025),
        0 15px 38px rgba(0, 0, 0, .20);
}

.profile-hero__top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-avatar {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #effcff;
    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(86, 229, 255, .30),
            rgba(7, 55, 92, .88) 55%,
            rgba(2, 16, 31, .97)
        );
    border: 2px solid rgba(75, 216, 255, .55);
    box-shadow:
        0 0 0 4px rgba(0, 155, 230, .07),
        0 0 25px rgba(0, 176, 255, .13);
    font-size: 22px;
    font-weight: 900;
}

.profile-identity {
    min-width: 0;
}

.profile-identity > small {
    color: #5f8397;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .9px;
}

.profile-identity h1 {
    margin: 3px 0 0;
    overflow: hidden;
    color: #eefcff;
    font-size: 19px;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.profile-identity__meta {
    margin-top: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: #64879a;
    font-size: 6px;
}

.profile-status {
    min-height: 20px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-weight: 900;
}

.profile-status.is-active {
    color: #7ff0c1;
    border: 1px solid rgba(69, 231, 164, .14);
    background: rgba(23, 112, 76, .18);
}

.profile-status.is-disabled {
    color: #ff9eb2;
    border: 1px solid rgba(255, 92, 126, .14);
    background: rgba(115, 18, 44, .18);
}

.profile-balance {
    min-height: 70px;
    margin-top: 13px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 15px;
    border: 1px solid rgba(77, 210, 255, .12);
    background:
        linear-gradient(
            145deg,
            rgba(2, 18, 34, .90),
            rgba(2, 10, 22, .95)
        );
}

.profile-balance small {
    display: block;
    color: #5b7d90;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .7px;
}

.profile-balance strong {
    display: block;
    margin-top: 4px;
    color: #5ddfff;
    font-size: 18px;
    line-height: 1.15;
}

.profile-balance__wallet {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #59ddff;
    background: rgba(0, 131, 211, .10);
    border: 1px solid rgba(75, 210, 255, .13);
}

.profile-balance__wallet svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-actions {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.profile-action {
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    text-decoration: none;
    font-size: 9px;
    font-weight: 900;
}

.profile-action--ghost {
    color: #c5e8f5;
    border: 1px solid rgba(76, 203, 248, .25);
    background: rgba(4, 20, 36, .65);
}

.profile-action--primary {
    color: #fff;
    border: 1px solid rgba(103, 225, 255, .34);
    background:
        linear-gradient(
            135deg,
            #0a7cff,
            #00c6ed
        );
    box-shadow:
        0 7px 20px rgba(0, 145, 255, .15);
}

.profile-card {
    margin-top: 11px;
    padding: 14px;
    border-radius: 17px;
    border: 1px solid rgba(77, 205, 250, .12);
}

.profile-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 13px;
}

.profile-card__head small {
    display: block;
    color: #577b8f;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .8px;
}

.profile-card__head h2 {
    margin: 3px 0 0;
    color: #eafaff;
    font-size: 15px;
}

.profile-card__icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #58dcff;
    background: rgba(0, 135, 210, .08);
    border: 1px solid rgba(78, 209, 252, .11);
}

.profile-card__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.profile-field {
    min-width: 0;
    display: block;
}

.profile-field--wide {
    grid-column: 1 / -1;
}

.profile-field > span {
    display: block;
    margin: 0 0 5px 2px;
    color: #63869a;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .6px;
}

.profile-field input {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid rgba(74, 204, 250, .13);
    border-radius: 11px;
    outline: 0;
    color: #e9faff;
    background:
        linear-gradient(
            145deg,
            rgba(2, 13, 27, .86),
            rgba(1, 8, 19, .92)
        );
    font-family: inherit;
    font-size: 9px;
}

.profile-field input:focus {
    border-color: rgba(74, 219, 255, .43);
    box-shadow:
        0 0 0 3px rgba(0, 178, 255, .05);
}

.profile-field input[readonly] {
    color: #688a9d;
    cursor: not-allowed;
}

.profile-field > small {
    display: block;
    margin: 4px 2px 0;
    color: #426579;
    font-size: 5.5px;
}

.profile-subhead {
    margin: 14px 0 9px;
    padding-top: 12px;
    border-top: 1px solid rgba(73, 196, 240, .07);
}

.profile-subhead small,
.profile-subhead strong {
    display: block;
}

.profile-subhead small {
    color: #55798c;
    font-size: 5.5px;
    font-weight: 900;
    letter-spacing: .7px;
}

.profile-subhead strong {
    margin-top: 2px;
    color: #bfe4f1;
    font-size: 9px;
}

.profile-save {
    width: 100%;
    min-height: 43px;
    margin-top: 11px;
    border: 1px solid rgba(93, 220, 255, .30);
    border-radius: 12px;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #087cf7,
            #00bde6
        );
    font-family: inherit;
    font-size: 8px;
    font-weight: 900;
    cursor: pointer;
}

.profile-save--security {
    background:
        linear-gradient(
            135deg,
            #0b5fa5,
            #0683b8
        );
}

.profile-referral {
    min-height: 66px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 13px;
    border: 1px solid rgba(75, 205, 250, .10);
    background: rgba(2, 12, 25, .55);
}

.profile-referral__code {
    min-width: 0;
    flex: 1;
}

.profile-referral__code small {
    display: block;
    color: #577a8e;
    font-size: 5.5px;
    font-weight: 900;
    letter-spacing: .7px;
}

.profile-referral__code strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #5bddff;
    font-size: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.profile-copy {
    min-width: 70px;
    min-height: 34px;
    padding: 0 9px;
    border-radius: 10px;
    border: 1px solid rgba(76, 211, 255, .18);
    color: #bcecff;
    background: rgba(0, 128, 207, .10);
    font-family: inherit;
    font-size: 6.5px;
    font-weight: 900;
    cursor: pointer;
}

.profile-info-row,
.profile-system-row {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(72, 192, 237, .06);
}

.profile-info-row {
    margin-top: 5px;
}

.profile-info-row span,
.profile-system-row span {
    color: #608296;
    font-size: 7px;
}

.profile-info-row strong,
.profile-system-row strong {
    color: #bedfea;
    font-size: 7px;
    text-align: right;
    overflow-wrap: anywhere;
}

.profile-card--system {
    padding-top: 8px;
}

.profile-system-row:last-of-type {
    border-bottom: 0;
}

.profile-logout {
    min-height: 40px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #ff9db2;
    text-decoration: none;
    border: 1px solid rgba(255, 88, 121, .14);
    background: rgba(104, 18, 42, .16);
    font-size: 7px;
    font-weight: 900;
}

.account-menu__item.is-current {
    color: #fff;
    background:
        linear-gradient(
            90deg,
            rgba(15, 200, 221, .55),
            rgba(22, 75, 96, .14)
        );
}

@media (max-width: 480px) {
    .profile-page {
        padding-left: 10px;
        padding-right: 10px;
    }

    .profile-hero {
        padding: 13px;
    }

    .profile-avatar {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
        font-size: 19px;
    }

    .profile-identity h1 {
        font-size: 17px;
    }

    .profile-balance strong {
        font-size: 16px;
    }

    .profile-card {
        padding: 12px;
    }

    .profile-form-grid {
        grid-template-columns: 1fr;
    }

    .profile-field--wide {
        grid-column: auto;
    }
}

/* ==========================================================
   HOMEPAGE PARTNER GRID - BANK & SLOT PROVIDER
   Dark Glass + Blue Saber
   ========================================================== */
.partner-section {
    padding: 14px 18px 4px;
}

.partner-section__head {
    margin-bottom: 12px;
}

.partner-section__head h2 {
    margin: 0;
    font-size: clamp(18px, 4.6vw, 24px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: .01em;
    color: #f4fbff;
    text-shadow: 0 0 16px rgba(47, 198, 255, .22);
}

.partner-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.partner-grid--bank {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.partner-grid--bank .partner-card {
    min-height: 56px;
    padding: 6px 7px;
    border-radius: 12px;
}

.partner-grid--bank .partner-card img {
    height: 34px;
}

.partner-card {
    min-width: 0;
    min-height: 68px;
    padding: 9px 10px;
    border: 1px solid rgba(51, 209, 255, .92);
    border-radius: 15px;
    background:
        linear-gradient(145deg, rgba(13, 91, 226, .94), rgba(3, 31, 76, .94)),
        rgba(4, 18, 38, .88);
    box-shadow:
        0 0 0 1px rgba(57, 174, 255, .13) inset,
        0 0 14px rgba(24, 190, 255, .26),
        0 8px 18px rgba(0, 0, 0, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.partner-card img {
    display: block;
    width: 100%;
    height: 46px;
    object-fit: contain;
}

.partner-card--provider img {
    height: 48px;
}

.partner-card span {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.partner-empty {
    padding: 14px;
    border-radius: 14px;
    color: rgba(236, 248, 255, .82);
    font-size: 13px;
}

@media (max-width: 480px) {
    .partner-section {
        padding-left: 18px;
        padding-right: 18px;
    }

    .partner-grid {
        gap: 8px;
    }

    .partner-card {
        min-height: 62px;
        padding: 8px;
        border-radius: 13px;
    }

    .partner-card img,
    .partner-card--provider img {
        height: 42px;
    }
}

@media (max-width: 360px) {
    .partner-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .partner-grid {
        gap: 6px;
    }

    .partner-card {
        min-height: 56px;
        padding: 6px;
    }

    .partner-card img,
    .partner-card--provider img {
        height: 38px;
    }
}


/* Bank partner: compact 4-column grid */
@media (max-width: 480px) {
    .partner-grid--bank {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }
    .partner-grid--bank .partner-card {
        min-height: 50px;
        padding: 5px;
        border-radius: 10px;
    }
    .partner-grid--bank .partner-card img {
        height: 30px;
    }
}

@media (max-width: 360px) {
    .partner-grid--bank {
        gap: 5px;
    }
    .partner-grid--bank .partner-card {
        min-height: 46px;
        padding: 4px;
    }
    .partner-grid--bank .partner-card img {
        height: 27px;
    }
}


/* ======================================================================
   WLA_V2 HOME PARTNER FOOTER REVISION - 2026-08-31
   BANK: 4 kartu per baris di mobile.
   PROVIDER: 3 kartu per baris, sumber assets/provider-footer/.
   Diletakkan PALING BAWAH agar tidak ditimpa media query lama.
   ====================================================================== */

.partner-section .bank-partner-grid-v2 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

.partner-section .bank-partner-grid-v2 .partner-card--bank {
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 4px !important;
    border-radius: 10px !important;
}

.partner-section .bank-partner-grid-v2 .partner-card--bank img {
    width: 100% !important;
    height: 28px !important;
    max-height: 28px !important;
    object-fit: contain !important;
}

.partner-section .provider-footer-grid-v2 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.partner-section .provider-footer-grid-v2 .partner-card--provider {
    min-width: 0 !important;
    min-height: 62px !important;
    padding: 7px 8px !important;
}

.partner-section .provider-footer-grid-v2 .partner-card--provider img {
    width: 100% !important;
    height: 42px !important;
    object-fit: contain !important;
}

@media (max-width: 360px) {
    .partner-section .bank-partner-grid-v2 {
        gap: 5px !important;
    }

    .partner-section .bank-partner-grid-v2 .partner-card--bank {
        min-height: 44px !important;
        padding: 3px !important;
    }

    .partner-section .bank-partner-grid-v2 .partner-card--bank img {
        height: 25px !important;
        max-height: 25px !important;
    }
}