@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root{--navy:#050a18;
    --navy-2:#091229;
    --blue:#1388ff;
    --cyan:#42d8ff;
    --white:#f7fbff;
    --muted:#9aa9bd;
    --line:rgba(157,198,255,.16);
    color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;
    overflow-x:hidden;
    background:radial-gradient(circle at 78% 0,rgba(19,136,255,.12),transparent 28%),var(--navy);
    color:var(--white);
    font-family:Inter,sans-serif}
    
body::before{
    content:"";
    position:fixed;
    z-index:-1;
    inset:0;
    opacity:.1;
    background-image:linear-gradient(rgba(120,178,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(120,178,255,.12) 1px,transparent 1px);
    background-size:70px 70px;
    mask-image:linear-gradient(115deg,#000,transparent 88%)}
    
a{
    color:inherit;
    text-decoration:none}

button,input{font:inherit}
button{cursor:pointer}

.instant-nav{
    position:sticky!important;
    z-index:50;
    top:0;
    height:72px;
    display:flex!important;
    align-items:center;
    gap:13px;
    padding:0 max(22px,calc((100vw - 1180px)/2))!important;
    border-bottom:1px solid var(--line);
    background:rgba(4,9,22,.93)!important;
    backdrop-filter:blur(18px)}
    
.instant-nav::after{display:none}

.instant-nav>a:first-child{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid rgba(92,193,255,.32);
    border-radius:11px!important;
    clip-path:none!important;
    background:#08152a;
    color:#d7e8f8;
    font-size:26px}
    
.instant-brand{
    font:900 17px 'Barlow Condensed',sans-serif}

.instant-brand b{color:var(--cyan)}
.instant-nav-account{
    display:flex;
    align-items:center;
    gap:9px;margin-left:auto}
    
.instant-nav-wallet{
    height:40px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 14px;
    border:1px solid #28506b;border-radius:999px!important;
    clip-path:none!important;
    background:rgba(10,35,65,.8)}
    
.instant-nav-wallet span{
    color:var(--cyan);
    font-size:7px;
    font-weight:800}
    
.instant-nav-wallet strong{font-size:12px}

.instant-profile-link{
    width:40px!important;
    height:40px!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid rgba(136,222,255,.5)!important;
    border-radius:50%!important;
    clip-path:none!important;
    background:linear-gradient(135deg,#1265ee,#26baf6)!important}
    
    .instant-profile-link svg{width:18px;fill:none;stroke:#fff;stroke-width:1.8}

main{
    width:min(1180px,calc(100% - 32px))!important;
    margin:28px auto 70px!important;
    color:var(--white)}
    
.instant-game-card{
        position:relative;
        min-height:0!important;
        display:grid!important;
        grid-template-columns:104px minmax(0,1fr)!important;
        align-items:center!important;
        gap:20px!important;
        overflow:hidden;
        padding:22px!important;
        border:1px solid var(--line)!important;
        border-radius:22px!important;
        clip-path:none!important;
        background:radial-gradient(circle at 85% 15%,rgba(31,145,255,.2),transparent 35%),linear-gradient(125deg,#071329,#091b35 55%,#050a18)!important;
        box-shadow:0 24px 55px rgba(0,0,0,.28)!important}
        
.instant-game-card::before{
    display:none}
    
.instant-game-card::after{
    content:"";
    position:absolute;
    inset:0 auto auto;
    width:130px;
    height:3px;
    background:var(--cyan)}
    
.instant-game-icon{
    position:relative;
    width:104px;
    height:104px;
    overflow:hidden;
    border:1px solid rgba(74,198,255,.3);
    border-radius:19px!important;
    clip-path:none!important;
    background:#08162e}
    
.instant-game-icon img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover}
    
.instant-game-title small,.instant-section-head small,.instant-package-group>header small,.instant-id-copy small{
    color:var(--cyan)!important;
    font:800 9px 'Barlow Condensed',sans-serif!important;
    letter-spacing:.17em}
    
.instant-game-title small::before,.instant-section-head small::before,.instant-package-group>header small::before{display:none}
.instant-game-title h1{
    margin:6px 0 0!important;
    font:900 clamp(26px,4vw,40px)/.98 'Barlow Condensed',sans-serif!important;
    text-transform:uppercase}
    
.instant-game-title h1 em{display:block;
    margin-top:7px;
    color:var(--cyan)!important;
    font-size:.55em;
    font-style:normal;-webkit-text-stroke:0!important;
    letter-spacing:.12em}
    
.instant-game-info{
    grid-column:1/-1;
    margin:0!important;
    padding-top:14px;
    border-top:1px solid var(--line)!important;
    color:var(--muted)!important;
    font-size:11px;
    line-height:1.6}

.instant-notice{
    position: relative;
    margin-top: 18px;
    padding: 16px 18px;

    border: 1px solid rgba(224, 9, 9, 0.45);
    border-radius: 12px !important;
    clip-path: none !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 174, 0, .09),
            rgba(255, 174, 0, .025)
        ),
        #0a101c;

    box-shadow:
        inset 3px 0 0 #ffb52d,
        0 8px 24px rgba(0, 0, 0, .18);

    overflow: hidden;
}

/* glow halus dekat kanan */
.instant-notice::after{
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -50px;
    top: -60px;

    background: rgba(255, 181, 45, .08);
    border-radius: 50%;
    filter: blur(20px);

    pointer-events: none;
}

/* LOGIN DIPERLUKAN */
.instant-notice strong{
    display: block;
    margin-bottom: 4px;

    color: #ffc14d;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

/* ayat kecil */
.instant-notice p{
    margin: 0 0 9px;

    color: #aeb8c8;
    font-size: 11px;
    line-height: 1.5;
}

/* LOGIN / REGISTER */
.instant-notice a{
    display: inline-flex;
    align-items: center;

    color: #ffbe3d;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;

    transition: .2s ease;
}

.instant-notice a:hover{
    color: #ffd77f;
    transform: translateX(3px);
}


/* =========================
   SETUP / INFO VERSION
========================= */

.instant-notice.setup{
    border-color: rgba(66, 216, 255, .35);

    background:
        linear-gradient(
            135deg,
            rgba(36, 123, 255, .12),
            rgba(66, 216, 255, .03)
        ),
        #081426;

    box-shadow:
        inset 3px 0 0 #42d8ff,
        0 8px 24px rgba(0, 0, 0, .18);
}

.instant-notice.setup::after{
    background: rgba(66, 216, 255, .1);
}

.instant-notice.setup strong,
.instant-notice.setup a{
    color: var(--cyan);
}

.instant-id-card{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:end;gap:12px;margin-top:18px;padding:20px!important;border:1px solid var(--line)!important;border-radius:18px!important;clip-path:none!important;background:linear-gradient(130deg,#091a33,#07101f)!important;box-shadow:0 16px 38px rgba(0,0,0,.2)}.instant-id-copy{grid-column:1/-1;padding-right:55px}.instant-id-copy h2,.instant-section-head h2{margin:5px 0 3px;font:900 23px 'Barlow Condensed',sans-serif!important;text-transform:uppercase}.instant-id-copy p{margin:0;color:var(--muted);font-size:9px}.instant-id-card::before{content:"01";position:absolute;top:18px;right:20px;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(74,198,255,.35);border-radius:10px;clip-path:none;background:#081731;color:var(--cyan);font-size:10px;font-weight:800}.instant-id-card label,.instant-checkout label{display:grid;gap:6px;color:#8394aa;font-size:8px;font-weight:800}.instant-id-card input,.instant-checkout input{width:100%;height:47px;padding:0 13px;border:1px solid rgba(157,198,255,.22);border-radius:11px!important;background:#050c1b;color:#fff}.instant-id-card input:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(66,216,255,.08)}.instant-id-check{height:47px;padding:0 22px;border:0;border-radius:11px!important;clip-path:none!important;background:linear-gradient(115deg,#1467ef,#2cbcf4);color:#fff;font-size:9px;font-weight:900}.instant-id-status{grid-column:1/-1;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#06101f;color:#7f91a8;font-size:9px}.instant-id-status.success{border-color:rgba(54,217,139,.35);background:rgba(14,69,48,.25);color:#68e5aa}.instant-id-status.error{border-color:rgba(255,82,101,.4);background:rgba(84,17,31,.25);color:#ff8997}

.instant-layout{display:grid!important;grid-template-columns:minmax(0,1fr) 365px!important;align-items:start;gap:20px;margin-top:27px}.instant-section-head{margin-bottom:13px}.instant-section-head h2{font-size:30px!important}.instant-package-lock{margin-bottom:14px;padding:10px 12px;border:1px solid rgba(255,182,62,.28);border-radius:10px!important;clip-path:none!important;background:rgba(68,48,12,.24);color:#ffc55b;font-size:8px;font-weight:800}.instant-packages{display:grid!important;grid-template-columns:1fr!important;gap:26px!important}.instant-package-group>header{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:11px}.instant-package-group>header h3{margin:4px 0 0;font:800 19px 'Barlow Condensed',sans-serif!important;text-transform:uppercase}.instant-package-group>header>span{padding:5px 8px;border:1px solid var(--line);border-radius:999px!important;background:#071225;color:#7f91a8;font-size:7px;font-weight:800}.instant-package-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}.instant-package{position:relative;min-width:0;min-height:94px!important;display:flex!important;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:13px;padding:15px!important;border:1px solid rgba(157,198,255,.25)!important;border-radius:14px!important;clip-path:none!important;background:linear-gradient(145deg,#0b1730,#07101e)!important;color:#fff!important;text-align:left;box-shadow:0 9px 22px rgba(0,0,0,.12)!important}.instant-package::before,.instant-package::after{display:none}.instant-package strong{font:800 16px/1.05 'Barlow Condensed',sans-serif}.instant-package span{position:relative;color:var(--cyan)!important;font-size:10px;font-weight:900}.instant-package:hover:not(:disabled),.instant-package.active{transform:translateY(-3px);border-color:var(--cyan)!important;background:radial-gradient(circle at 80% 0,rgba(43,161,255,.2),transparent 45%),#0b1931!important}.instant-package:disabled{cursor:not-allowed;opacity:.64!important;filter:none!important}.instant-package:disabled strong,.instant-package:disabled span{opacity:.78}

.instant-checkout{position:sticky;top:90px;padding:20px!important;border:1px solid var(--line)!important;border-radius:18px!important;clip-path:none!important;background:linear-gradient(140deg,#09172e,#06101f)!important;box-shadow:0 20px 48px rgba(0,0,0,.26)!important}.instant-checkout::before{display:none}.instant-verified-player{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;padding:12px;border:1px solid var(--line);border-radius:10px!important;clip-path:none!important;background:#071225}.instant-verified-player span{color:#8190a6;font-size:8px}.instant-verified-player strong{color:var(--cyan);font:800 13px 'Barlow Condensed',sans-serif}.instant-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px;padding:12px;border:0!important;border-radius:10px;background:#08182b}.instant-summary span{color:#7d8da3;font-size:8px}.instant-summary strong{font:800 16px 'Barlow Condensed',sans-serif}.instant-payment{margin-top:17px;padding-top:16px;border-top:1px solid var(--line)}.instant-payment-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.instant-payment-head div{display:grid;gap:3px}.instant-payment-head small{color:var(--cyan);font-size:7px;font-weight:900}.instant-payment-head strong{font:800 17px 'Barlow Condensed',sans-serif!important}.instant-payment-head>span{padding:5px 7px;border:1px solid rgba(66,216,255,.28);border-radius:999px!important;clip-path:none!important;color:var(--cyan);font-size:6px;font-weight:900}.instant-payment-options{display:grid;gap:8px}.instant-payment-option{width:100%;min-height:54px;display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--line)!important;border-radius:11px!important;clip-path:none!important;background:#07121f!important;color:#fff!important;text-align:left}.instant-payment-option.active{border-color:var(--cyan)!important;background:linear-gradient(90deg,rgba(8,145,178,.18),rgba(37,99,235,.12))!important}.instant-payment-option:disabled{cursor:not-allowed;opacity:.58}.instant-payment-icon{width:35px;height:35px;display:grid;place-items:center;flex:0 0 35px;border-radius:9px!important;clip-path:none!important;background:#10263a;color:var(--cyan);font-size:8px;font-weight:900}.instant-payment-copy{min-width:0;display:grid;gap:3px}.instant-payment-copy strong{font-size:9px}.instant-payment-copy small{color:#7890a4;font-size:7px}.instant-payment-badge{margin-left:auto;padding:5px 7px;border-radius:999px!important;background:rgba(245,158,11,.14);color:#fbbf24;font-size:6px;font-weight:900;white-space:nowrap}.instant-payment-option.active .instant-payment-badge{background:rgba(74,222,128,.14);color:#86efac}.instant-safe-note{margin:10px 0 0;color:#65758c;text-align:center;font-size:7px}.instant-checkout>button:last-of-type{width:100%;height:48px;margin-top:14px;border:0;border-radius:12px;background:linear-gradient(115deg,#1467ef,#2cbcf4);color:#fff;font-size:9px;font-weight:900}.instant-checkout>button:disabled{cursor:not-allowed;background:#33445d;color:#98a8bc}

.instant-validation-result{margin-top:12px;padding:11px;border-radius:10px;font-size:9px;font-weight:800}.instant-validation-result.success{border:1px solid rgba(74,222,128,.45);background:rgba(22,101,52,.22);color:#86efac}.instant-validation-result.error{border:1px solid rgba(248,113,113,.45);background:rgba(127,29,29,.22);color:#fca5a5}.instant-empty{grid-column:1/-1;padding:25px;border:1px dashed #334155;border-radius:14px;color:#94a3b8;text-align:center;font-size:10px}

.instant-receipt-modal[hidden]{display:none!important}.instant-receipt-modal{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:18px;background:rgba(1,4,10,.84);backdrop-filter:blur(9px)}.instant-receipt-card{position:relative;width:min(430px,100%);padding:30px 24px 22px;border:1px solid rgba(34,211,238,.45);border-radius:22px!important;clip-path:none!important;background:linear-gradient(155deg,#0b1d2c,#050911 65%);color:#fff}.instant-receipt-close{position:absolute;top:15px;right:15px;width:34px;height:34px;border:1px solid #284157;border-radius:50%;background:#07111c;color:#94a3b8}.instant-receipt-check{width:65px;height:65px;display:grid;place-items:center;margin:0 auto 15px;border:1px solid rgba(74,222,128,.5);border-radius:50%;background:rgba(22,163,74,.15);color:#4ade80;font-size:32px}.instant-receipt-card>small{display:block;color:var(--cyan);text-align:center;font-size:8px;font-weight:900}.instant-receipt-card h2{margin:7px 0 5px;text-align:center;font:800 26px 'Barlow Condensed',sans-serif}.instant-receipt-card>p{color:#94a3b8;text-align:center;font-size:9px}.instant-receipt-details{display:grid;gap:1px;overflow:hidden;border:1px solid #1f3549;border-radius:14px;background:#1f3549}.instant-receipt-row{display:flex;justify-content:space-between;gap:15px;padding:11px 13px;background:#07111c}.instant-receipt-row span{color:#7890a4;font-size:7px}.instant-receipt-row strong{max-width:65%;text-align:right;font-size:10px}.instant-receipt-row.status strong{color:#4ade80}.instant-receipt-done{width:100%;height:47px;margin-top:17px;border:0;border-radius:12px;background:linear-gradient(90deg,#0891b2,#2563eb);color:#fff;font-size:9px;font-weight:900}

@media(max-width:900px){.instant-layout{grid-template-columns:1fr!important}.instant-checkout{position:static}.instant-package-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:620px){.instant-nav{height:64px;padding:0 12px!important}.instant-nav>a:first-child{width:37px;height:37px}.instant-brand{font-size:14px}.instant-nav-account{gap:6px}.instant-nav-wallet{height:37px;padding:0 10px}.instant-nav-wallet span{display:none}.instant-profile-link{width:37px!important;height:37px!important}main{width:calc(100% - 20px)!important;margin:14px auto 42px!important}.instant-game-card{grid-template-columns:78px minmax(0,1fr)!important;gap:13px!important;padding:14px!important;border-radius:16px!important}.instant-game-icon{width:78px;height:78px;border-radius:14px!important}.instant-game-title h1{font-size:22px!important}.instant-game-info{font-size:9px}.instant-id-card{grid-template-columns:1fr!important;padding:15px!important}.instant-id-copy,.instant-id-status{grid-column:1}.instant-id-check{width:100%}.instant-layout{margin-top:21px}.instant-section-head h2{font-size:26px!important}.instant-package-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.instant-package{min-height:87px!important;padding:13px!important}.instant-package strong{font-size:15px}.instant-checkout{padding:16px!important}}
@media(max-width:370px){.instant-brand{display:none}.instant-package strong{font-size:14px}}

/* Pakej kekal jelas sebelum ID disemak; hanya interaksi dikunci. */
.instant-package:disabled{opacity:1!important;filter:none!important;cursor:not-allowed}
.instant-package:disabled strong,.instant-package:disabled span{opacity:1!important}
.instant-package:disabled:hover{transform:none}

/* Logo rasmi untuk pilihan pembayaran akan datang. */
.instant-payment-icon{overflow:hidden;background:#fff!important}
.instant-payment-icon img{display:block;width:100%;height:100%;object-fit:cover}
.instant-payment-option.active .instant-payment-icon{background:#10263a!important}
.instant-payment-option[data-method="gnex-wallet"] .instant-payment-icon{padding:6px;background:#03101d!important}
.instant-payment-option[data-method="gnex-wallet"] .instant-payment-icon img{object-fit:contain}

/* Login/setup notice override. Diletakkan paling akhir supaya edit manual
   tidak ditindih oleh gaya notice lama di bahagian atas fail. */
main .instant-notice{
margin-top:18px;
padding:15px 17px;
border:1px solid rgb(255, 255, 255);
border-radius:14px!important;
clip-path:none!important;
background:#10263a;
box-shadow:none;
overflow:visible;
}
main .instant-notice::after{display:none}
main .instant-notice strong,
main .instant-notice a{color:#ffc55b}
main .instant-notice p{margin:5px 0;color:#b7aa8b;font-size:9px}
main .instant-notice.setup{border-color:rgba(66,216,255,.3);background:#081932;box-shadow:none}
main .instant-notice.setup strong{color:var(--cyan)}

.instant-payment-option[data-method="celcomdigi"] .instant-payment-icon{background:#15156b!important;padding:0}.instant-payment-option[data-method="celcomdigi"] .instant-payment-icon img{object-fit:contain}

/* A stable, finger-sized Back target; no hover movement on touch. */
.instant-nav>a:first-child{min-width:44px;min-height:44px;flex-shrink:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transform:none;transition:none}

.instant-payment-option .instant-add-topup{margin-left:auto;flex-shrink:0;width:44px;height:44px;border:1px solid #33d7ff;border-radius:10px;background:#0a344c;color:#85efff;font-size:25px;cursor:pointer;touch-action:manipulation}.instant-topup-help{padding:14px;border:1px solid #28718c;border-radius:12px;background:#06162a}.instant-topup-help[hidden]{display:none}.instant-topup-help p{margin:0 0 12px;font-size:12px;line-height:1.6;color:#b7c8db}.instant-topup-help>div{display:flex;gap:8px}.instant-topup-help a{display:flex;align-items:center;justify-content:center;min-height:40px;padding:8px 12px;border:1px solid #28718c;border-radius:7px;background:#0b3049;color:#a3efff;text-decoration:none;font-size:11px;font-weight:800}

#instantManualAdmin{margin-top:14px}#instantManualAdmin[hidden],#instantManualOptions[hidden]{display:none!important}#instantManualAdmin button{min-height:44px;padding:10px 12px;border:1px solid #28718c;border-radius:8px;background:#0b3049;color:#a3efff;font-size:11px;font-weight:800;cursor:pointer}#instantManualToggle{width:100%;margin-bottom:10px;text-align:left}#instantManualStatus{margin-top:12px}#instantManualStatus:empty{display:none}

.instant-manual-note{margin:14px 0 20px;padding:14px;border:1px solid #28718c;border-radius:14px;background:#081b30}.instant-manual-note[hidden],#instantManualNoteOptions[hidden]{display:none!important}#instantManualNoteToggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;background:transparent;color:#9cecff;font-size:13px;font-weight:700;line-height:1.6;text-align:left;cursor:pointer;padding:4px;min-height:44px}#instantManualNoteToggle span{font-size:22px}#instantManualNoteOptions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}#instantManualNoteOptions a,#instantManualNoteOptions button{display:flex;align-items:center;justify-content:center;min-height:44px;flex:1;padding:10px;border:1px solid #28718c;border-radius:8px;background:#0b3049;color:#a3efff;text-decoration:none;font-size:11px;font-weight:800;cursor:pointer}#instantManualNoteStatus{font-size:12px;color:#b7c8db;line-height:1.5}#instantManualNoteStatus:empty{display:none}

.ff-package-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:12px 0}
.ff-package-tabs button{min-width:0;padding:10px 3px;border:1px solid #275068;border-radius:9px;background:#071523;color:#a8c4d2;font-size:12px;font-weight:700;cursor:pointer}
.ff-package-tabs button[aria-pressed="true"]{background:#103e50;border-color:#28cce3;color:#66e4f5}
#instantPackages [data-package-category][hidden]{display:none!important}
.instant-receipt-check.is-loading{background:rgba(8,145,178,.12);border-color:#245365;box-shadow:none}.instant-receipt-check.is-loading:after{content:"";width:30px;height:30px;border:3px solid #224757;border-top-color:#67e8f9;border-radius:50%;animation:receipt-spin .9s linear infinite}@keyframes receipt-spin{to{transform:rotate(360deg)}}#instantReceiptHistoryNote{margin:14px 0 0;font-size:11px;line-height:1.5;color:#a7c2d5}@media(prefers-reduced-motion:reduce){.instant-receipt-check.is-loading:after{animation-duration:2.5s}}