@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{
    color-scheme:dark;

    --navy:#050a18;
    --navy-2:#071126;
    --navy-3:#09162f;

    --blue:#1388ff;
    --cyan:#42d8ff;
    --cyan-soft:#8be7ff;

    --white:#f7fbff;
    --muted:#8c9caf;
    --muted-2:#65758c;

    --line:rgba(157,198,255,.16);
    --line-strong:rgba(92,193,255,.32);

    --green:#36d98b;
    --yellow:#ffb63e;
    --red:#ff5265;
}


/* ==================================================
   GLOBAL
================================================== */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(19,136,255,.11),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #040916 0%,
            #050a18 45%,
            #040816 100%
        );

    color:var(--white);

    font-family:"Inter",sans-serif;
}


/* subtle esports grid */

body::before{
    content:"";

    position:fixed;

    inset:0;

    z-index:-1;

    pointer-events:none;

    opacity:.14;

    background-image:
        linear-gradient(
            rgba(120,178,255,.10) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(120,178,255,.10) 1px,
            transparent 1px
        );

    background-size:70px 70px;

    mask-image:
        linear-gradient(
            110deg,
            black,
            transparent 85%
        );
}


main{
    color:var(--white);
}


/* ==================================================
   NAVIGATION
================================================== */

.instant-nav{
    position:relative;

    border-bottom:1px solid var(--line);

    background:
        rgba(4,9,22,.94);

    backdrop-filter:blur(18px);

    box-shadow:
        0 8px 30px rgba(0,0,0,.20);
}


.instant-nav::after{
    content:"";

    position:absolute;

    bottom:-1px;

    left:8%;

    width:120px;

    height:1px;

    background:var(--cyan);
}


.instant-nav>a:first-child{
    border:1px solid var(--line-strong);

    background:
        linear-gradient(
            135deg,
            #0a1730,
            #071020
        );

    color:#c5d3e4;

    clip-path:
        polygon(
            7px 0,
            100% 0,
            100% calc(100% - 7px),
            calc(100% - 7px) 100%,
            0 100%,
            0 7px
        );
}


.instant-brand{
    color:#fff;

    font-family:"Barlow Condensed",sans-serif;

    font-weight:900;

    letter-spacing:.04em;

    text-transform:uppercase;
}


.instant-nav-wallet{
    border:1px solid var(--line);

    background:#081225;

    color:#fff;

    box-shadow:none;

    clip-path:
        polygon(
            8px 0,
            100% 0,
            100% calc(100% - 8px),
            calc(100% - 8px) 100%,
            0 100%,
            0 8px
        );
}


.instant-nav-wallet span{
    color:var(--cyan);

    font-size:.78em;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;
}


.instant-profile-link{
    border:1px solid rgba(136,222,255,.55)!important;

    background:
        linear-gradient(
            115deg,
            #1265ee,
            #26baf6
        )!important;

    clip-path:
        polygon(
            8px 0,
            100% 0,
            100% calc(100% - 8px),
            calc(100% - 8px) 100%,
            0 100%,
            0 8px
        );

    box-shadow:
        0 12px 30px rgba(13,110,255,.2);
}


.instant-profile-link svg{
    stroke:#fff;
}


/* ==================================================
   GAME / HERO CARD
================================================== */

.instant-game-card{
    position:relative;

    overflow:hidden;

    border:1px solid var(--line)!important;

    background:
        radial-gradient(
            circle at 82% 25%,
            rgba(31,145,255,.18),
            transparent 32%
        ),
        linear-gradient(
            125deg,
            #050a18 15%,
            #081229 55%,
            #030713 100%
        )!important;

    box-shadow:
        0 25px 60px rgba(0,0,0,.34)!important;

    clip-path:
        polygon(
            18px 0,
            100% 0,
            100% calc(100% - 18px),
            calc(100% - 18px) 100%,
            0 100%,
            0 18px
        );
}


.instant-game-card::before{
    content:"";

    position:absolute;

    inset:0;

    opacity:.13;

    background-image:
        linear-gradient(
            rgba(120,178,255,.13) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(120,178,255,.13) 1px,
            transparent 1px
        );

    background-size:55px 55px;

    pointer-events:none;
}


.instant-game-card::after{
    content:"";

    position:absolute;

    top:0;

    left:0;

    width:135px;

    height:3px;

    background:var(--cyan);
}


.instant-game-icon{
    position:relative;

    z-index:1;

    border:1px solid rgba(74,198,255,.28);

    background:#08162e;

    box-shadow:
        0 15px 35px rgba(0,0,0,.32);

    clip-path:
        polygon(
            10px 0,
            100% 0,
            100% calc(100% - 10px),
            calc(100% - 10px) 100%,
            0 100%,
            0 10px
        );
}


.instant-game-title{
    position:relative;

    z-index:1;
}


.instant-game-title small{
    display:flex;

    align-items:center;

    gap:10px;

    color:var(--cyan);

    font-family:"Barlow Condensed",sans-serif;

    font-size:13px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.18em;
}


.instant-game-title small::before{
    content:"";

    width:28px;

    height:2px;

    background:var(--cyan);
}


.instant-game-title h1{
    margin:.2em 0;

    color:#fff;

    font-family:"Barlow Condensed",sans-serif;

    font-weight:900;

    font-size:clamp(48px,6vw,80px);

    line-height:.88;

    letter-spacing:-.025em;

    text-transform:uppercase;
}


.instant-game-title h1 em{
    color:transparent;

    font-style:normal;

    -webkit-text-stroke:1.5px var(--cyan);

    text-shadow:
        0 0 25px rgba(54,174,255,.12);
}


.instant-game-info{
    position:relative;

    z-index:1;

    border-top:1px solid var(--line)!important;

    color:#8190a6!important;

    font-size:12px;
}


/* ==================================================
   NOTICE
================================================== */

.instant-notice{
    position:relative;

    border:1px solid rgba(255,182,62,.25);

    background:
        linear-gradient(
            135deg,
            rgba(74,52,16,.35),
            rgba(25,20,10,.45)
        );

    clip-path:
        polygon(
            9px 0,
            100% 0,
            100% calc(100% - 9px),
            calc(100% - 9px) 100%,
            0 100%,
            0 9px
        );
}


.instant-notice strong{
    color:#ffc55b;

    font-family:"Barlow Condensed",sans-serif;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.08em;
}


.instant-notice p{
    color:#ac9f80;
}


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

    background:
        linear-gradient(
            135deg,
            #081932,
            #071224
        );
}


.instant-notice.setup::before{
    content:"";

    position:absolute;

    top:0;

    left:0;

    width:70px;

    height:2px;

    background:var(--cyan);
}


/* ==================================================
   PLAYER ID CARD
================================================== */

.instant-id-card{
    position:relative;

    overflow:hidden;

    border:1px solid var(--line);

    background:
        linear-gradient(
            135deg,
            #09142a,
            #060c19
        );

    box-shadow:
        0 18px 45px rgba(0,0,0,.25);

    clip-path:
        polygon(
            14px 0,
            100% 0,
            100% calc(100% - 14px),
            calc(100% - 14px) 100%,
            0 100%,
            0 14px
        );
}


.instant-id-card::before{
    content:"01";

    position:absolute;

    right:22px;

    top:18px;

    display:grid;

    place-items:center;

    width:46px;

    height:46px;

    border:1px solid rgba(74,198,255,.32);

    background:#081731;

    color:var(--cyan);

    font-size:11px;

    font-weight:800;

    clip-path:
        polygon(
            7px 0,
            100% 0,
            100% calc(100% - 7px),
            calc(100% - 7px) 100%,
            0 100%,
            0 7px
        );
}


.instant-id-copy small{
    color:#7285a2;

    font-size:9px;

    font-weight:700;

    letter-spacing:.16em;

    text-transform:uppercase;
}


.instant-id-copy h2{
    margin:.25em 0;

    color:#fff;

    font-family:"Barlow Condensed",sans-serif;

    font-size:32px;

    font-weight:900;

    text-transform:uppercase;
}


.instant-id-copy p{
    color:#7f8fa5;

    font-size:12px;
}


.instant-id-card label{
    color:#8091aa;

    font-size:10px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.12em;
}


/* ==================================================
   INPUT
================================================== */

.instant-id-card input,
.instant-checkout input{
    border:1px solid rgba(157,198,255,.18);

    background:#050c1b;

    color:#fff;

    border-radius:0;

    box-shadow:none;
}


.instant-id-card input::placeholder,
.instant-checkout input::placeholder{
    color:#536279;
}


.instant-id-card input:focus,
.instant-checkout input:focus{
    outline:none;

    border-color:var(--cyan);

    box-shadow:
        inset 3px 0 0 var(--cyan);
}


/* ==================================================
   CHECK ID
================================================== */

.instant-id-check{
    border:1px solid rgba(136,222,255,.5);

    background:
        linear-gradient(
            115deg,
            #1467ef,
            #2cbcf4
        );

    color:#fff;

    font-size:11px;

    font-weight:800;

    letter-spacing:.1em;

    text-transform:uppercase;

    box-shadow:
        0 12px 30px rgba(13,110,255,.22);

    clip-path:
        polygon(
            9px 0,
            100% 0,
            100% calc(100% - 9px),
            calc(100% - 9px) 100%,
            0 100%,
            0 9px
        );

    transition:.2s ease;
}


.instant-id-check:hover{
    filter:brightness(1.12);

    transform:translateY(-2px);
}


/* ==================================================
   ID STATUS
================================================== */

.instant-id-status{
    border:1px solid var(--line);

    background:#06101f;

    color:#77869c;
}


.instant-id-status.success{
    border-color:rgba(54,217,139,.32);

    background:rgba(14,69,48,.28);

    color:#62e3a6;
}


.instant-id-status.error{
    border-color:rgba(255,82,101,.35);

    background:rgba(84,17,31,.28);

    color:#ff8997;
}


/* ==================================================
   SECTION HEADINGS
================================================== */

.instant-section-head small,
.instant-package-group>header small{
    display:flex;

    align-items:center;

    gap:9px;

    color:var(--cyan);

    font-family:"Barlow Condensed",sans-serif;

    font-size:12px;

    font-weight:800;

    letter-spacing:.18em;

    text-transform:uppercase;
}


.instant-section-head small::before,
.instant-package-group>header small::before{
    content:"";

    width:26px;

    height:2px;

    background:var(--cyan);
}


.instant-section-head h2,
.instant-package-group>header h3{
    color:#fff;

    font-family:"Barlow Condensed",sans-serif;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:-.01em;
}


.instant-section-head h2{
    font-size:clamp(36px,4vw,54px);
}


.instant-package-group>header h3{
    font-size:28px;
}


.instant-package-group>header>span{
    border:1px solid var(--line);

    background:#071225;

    color:#77879c;

    border-radius:0;

    font-size:9px;

    font-weight:700;

    letter-spacing:.1em;

    text-transform:uppercase;
}


/* ==================================================
   LOCK MESSAGE
================================================== */

.instant-package-lock{
    border:1px solid rgba(255,182,62,.25);

    background:
        rgba(68,48,12,.27);

    color:#ffc45b;

    clip-path:
        polygon(
            7px 0,
            100% 0,
            100% calc(100% - 7px),
            calc(100% - 7px) 100%,
            0 100%,
            0 7px
        );
}


/* ==================================================
   PACKAGE CARDS
================================================== */

.instant-package{
    position:relative;

    overflow:hidden;

    border:1px solid var(--line);

    background:
        linear-gradient(
            145deg,
            #0b1730,
            #060b18
        );

    color:#fff;

    box-shadow:none;

    clip-path:
        polygon(
            12px 0,
            100% 0,
            100% calc(100% - 12px),
            calc(100% - 12px) 100%,
            0 100%,
            0 12px
        );

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}


.instant-package::before{
    content:"";

    position:absolute;

    inset:0;

    background:
        repeating-linear-gradient(
            125deg,
            transparent 0 35px,
            rgba(111,182,255,.025) 36px 37px
        );

    pointer-events:none;
}


.instant-package::after{
    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    background:var(--cyan);

    transition:width .25s ease;
}


.instant-package:hover{
    transform:translateY(-5px);

    border-color:rgba(74,204,255,.55);

    background:
        radial-gradient(
            circle at 75% 10%,
            rgba(43,161,255,.15),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #0d1b38,
            #060b18
        );
}


.instant-package:hover::after{
    width:100%;
}


.instant-package.active{
    transform:translateY(-4px);

    border-color:var(--cyan);

    background:
        radial-gradient(
            circle at 75% 10%,
            rgba(43,161,255,.22),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #0e2043,
            #071022
        );

    box-shadow:
        0 14px 35px rgba(0,0,0,.26);
}


.instant-package.active::after{
    width:100%;
}


.instant-package span{
    position:relative;

    z-index:1;

    color:var(--cyan);

    font-family:"Barlow Condensed",sans-serif;

    font-weight:800;

    letter-spacing:.04em;
}


.instant-package:disabled{
    border-color:rgba(157,198,255,.07);

    background:#060a13;

    color:#465268;

    opacity:.55;

    transform:none;
}


/* ==================================================
   CHECKOUT
================================================== */

.instant-checkout{
    position:relative;

    overflow:hidden;

    border:1px solid var(--line);

    background:
        linear-gradient(
            135deg,
            #09152c,
            #050b18
        );

    box-shadow:
        0 22px 50px rgba(0,0,0,.28);

    clip-path:
        polygon(
            14px 0,
            100% 0,
            100% calc(100% - 14px),
            calc(100% - 14px) 100%,
            0 100%,
            0 14px
        );
}


.instant-checkout::before{
    content:"";

    position:absolute;

    width:125px;

    height:3px;

    left:0;

    top:0;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--blue)
        );
}


.instant-checkout label{
    color:#8394aa;

    font-size:10px;

    font-weight:700;

    letter-spacing:.1em;

    text-transform:uppercase;
}


/* ==================================================
   VERIFIED PLAYER
================================================== */

.instant-verified-player{
    border:1px solid var(--line);

    background:#071225;

    clip-path:
        polygon(
            7px 0,
            100% 0,
            100% calc(100% - 7px),
            calc(100% - 7px) 100%,
            0 100%,
            0 7px
        );
}


.instant-verified-player span{
    color:#76869d;

    font-size:9px;

    text-transform:uppercase;

    letter-spacing:.12em;
}


.instant-verified-player strong{
    color:var(--cyan);

    font-family:"Barlow Condensed",sans-serif;

    font-size:19px;

    text-transform:uppercase;
}


/* ==================================================
   SUMMARY
================================================== */

.instant-summary{
    border:1px solid var(--line);

    background:
        #06101f;
}


.instant-summary span{
    color:#73839a;

    font-size:10px;

    letter-spacing:.07em;

    text-transform:uppercase;
}


.instant-summary strong{
    color:#fff;

    font-family:"Barlow Condensed",sans-serif;

    font-size:20px;
}


/* ==================================================
   PAYMENT HEADER
================================================== */

.instant-payment{
    border-top:1px solid var(--line);
}


.instant-payment-head strong{
    color:#fff;

    font-family:"Barlow Condensed",sans-serif;

    font-size:25px;

    font-weight:800;

    text-transform:uppercase;
}


.instant-payment-head small{
    color:#71839c;

    text-transform:uppercase;

    font-size:9px;

    letter-spacing:.13em;
}


.instant-payment-head>span{
    border:1px solid rgba(66,216,255,.28);

    background:#071932;

    color:var(--cyan);

    border-radius:0;

    font-size:9px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.1em;

    clip-path:
        polygon(
            6px 0,
            100% 0,
            100% calc(100% - 6px),
            calc(100% - 6px) 100%,
            0 100%,
            0 6px
        );
}


/* ==================================================
   PAYMENT OPTION
================================================== */

.instant-payment-option{
    position:relative;

    overflow:hidden;

    border:1px solid var(--line)!important;

    background:
        linear-gradient(
            145deg,
            #09152b,
            #060b17
        )!important;

    color:#fff!important;

    border-radius:0!important;

    clip-path:
        polygon(
            10px 0,
            100% 0,
            100% calc(100% - 10px),
            calc(100% - 10px) 100%,
            0 100%,
            0 10px
        );

    transition:
        transform .2s,
        border-color .2s,
        background .2s;
}


.instant-payment-option:hover{
    transform:translateY(-3px);

    border-color:rgba(74,204,255,.5)!important;
}


.instant-payment-option.active{
    border-color:var(--cyan)!important;

    background:
        radial-gradient(
            circle at 90% 0,
            rgba(43,161,255,.2),
            transparent 40%
        ),
        #091831!important;
}


.instant-payment-option.active::after{
    content:"";

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:2px;

    background:var(--cyan);
}


.instant-payment-icon{
    border:1px solid rgba(74,198,255,.22);

    background:#0a1730;

    color:var(--cyan);

    clip-path:
        polygon(
            6px 0,
            100% 0,
            100% calc(100% - 6px),
            calc(100% - 6px) 100%,
            0 100%,
            0 6px
        );
}


.instant-payment-copy small{
    color:#73839a;
}


.instant-payment-badge{
    background:#132540;

    color:#9aa9bd;

    border-radius:0;

    font-size:8px;

    font-weight:800;

    letter-spacing:.1em;

    text-transform:uppercase;
}


.instant-payment-option.active .instant-payment-badge{
    background:var(--cyan);

    color:#061020;
}


/* ==================================================
   SAFE NOTE
================================================== */

.instant-safe-note{
    color:#65758c;

    font-size:10px;

    letter-spacing:.04em;
}


/* ==================================================
   VALIDATION
================================================== */

.instant-validation-result.success{
    border:1px solid rgba(54,217,139,.32);

    background:rgba(14,69,48,.28);

    color:#68e5aa;
}


.instant-validation-result.error{
    border:1px solid rgba(255,82,101,.35);

    background:rgba(84,17,31,.28);

    color:#ff8997;
}


/* ==================================================
   RECEIPT MODAL
================================================== */

.instant-receipt-modal{
    background:
        rgba(2,6,15,.84);

    backdrop-filter:blur(10px);
}


.instant-receipt-card{
    position:relative;

    overflow:hidden;

    border:1px solid var(--line-strong);

    background:
        radial-gradient(
            circle at 80% 0,
            rgba(19,136,255,.14),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #0a1730,
            #050a18 70%
        );

    color:#fff;

    box-shadow:
        0 35px 90px rgba(0,0,0,.64);

    clip-path:
        polygon(
            16px 0,
            100% 0,
            100% calc(100% - 16px),
            calc(100% - 16px) 100%,
            0 100%,
            0 16px
        );
}


.instant-receipt-card::before{
    content:"";

    position:absolute;

    top:0;

    left:0;

    width:130px;

    height:3px;

    background:var(--cyan);
}


.instant-receipt-close{
    border:1px solid var(--line);

    background:#071225;

    color:#7789a2;

    border-radius:0;
}


.instant-receipt-close:hover{
    border-color:var(--cyan);

    color:#fff;
}


.instant-receipt-check{
    border:1px solid rgba(54,217,139,.42);

    background:rgba(24,100,69,.22);

    color:#62e3a6;

    box-shadow:none;
}


.instant-receipt-card>small{
    color:var(--cyan);

    font-family:"Barlow Condensed",sans-serif;

    font-weight:800;

    letter-spacing:.16em;

    text-transform:uppercase;
}


.instant-receipt-card>p{
    color:#8191a7;
}


.instant-receipt-details{
    border:1px solid var(--line);

    background:var(--line);

    overflow:hidden;
}


.instant-receipt-row{
    background:#07101f;
}


.instant-receipt-row span{
    color:#78899f;

    font-size:9px;

    letter-spacing:.1em;

    text-transform:uppercase;
}


.instant-receipt-row strong{
    color:#fff;

    font-family:"Barlow Condensed",sans-serif;

    font-size:18px;
}


.instant-receipt-row.status strong{
    color:#62e3a6;
}


/* ==================================================
   SCROLLBAR
================================================== */

::-webkit-scrollbar{
    width:7px;
}


::-webkit-scrollbar-track{
    background:#040816;
}


::-webkit-scrollbar-thumb{
    background:#17385e;
}


::-webkit-scrollbar-thumb:hover{
    background:var(--blue);
}


/* ==================================================
   TEXT SELECTION
================================================== */

::selection{
    background:var(--cyan);

    color:#061020;
}


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

@media(max-width:760px){

    body{
        background:
            linear-gradient(
                180deg,
                #050a18,
                #030713
            );
    }


    body::before{
        background-size:45px 45px;
    }


    .instant-nav{
        background:rgba(4,9,22,.97);
    }


    .instant-game-card{
        clip-path:
            polygon(
                12px 0,
                100% 0,
                100% calc(100% - 12px),
                calc(100% - 12px) 100%,
                0 100%,
                0 12px
            );
    }


    .instant-game-title h1{
        font-size:48px;
    }


    .instant-id-card::before{
        width:40px;

        height:40px;

        font-size:10px;
    }


    .instant-package:hover,
    .instant-payment-option:hover{
        transform:none;
    }


    .instant-checkout{
        box-shadow:
            0 15px 35px rgba(0,0,0,.28);
    }

}