/* ==========================================
   GOOGLE FONT
========================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ==========================================
   RESET
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#2f0a67;

    color:#fff;

    overflow-x:hidden;

    min-height:100vh;

    position:relative;

}

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

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

::-webkit-scrollbar-track{
    background:#21034b;
}

::-webkit-scrollbar-thumb{

    background:#8f45ff;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#b06cff;

}

/* ==========================================
   BACKGROUND
========================================== */

.background{

    position:fixed;

    inset:0;

    z-index:-2;

    background:

    radial-gradient(circle at top,#8a3cff 0%,transparent 45%),

    radial-gradient(circle at bottom,#5114b6 0%,transparent 50%),

    linear-gradient(180deg,#5512be,#2d0558);

}

/* floating glow */

.background::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    background:#b066ff;

    filter:blur(170px);

    opacity:.18;

    border-radius:50%;

    top:-180px;

    left:-180px;

    animation:floatGlow 14s infinite alternate;

}

.background::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:#00bfff;

    filter:blur(180px);

    opacity:.10;

    border-radius:50%;

    right:-150px;

    bottom:-120px;

    animation:floatGlow2 16s infinite alternate;

}

@keyframes floatGlow{

    from{

        transform:translateY(0px) translateX(0px);

    }

    to{

        transform:translateY(120px) translateX(120px);

    }

}

@keyframes floatGlow2{

    from{

        transform:translate(0,0);

    }

    to{

        transform:translate(-120px,-90px);

    }

}

/* ==========================================
   NAVBAR
========================================== */

nav{

    width:100%;

    position:sticky;

    top:0;

    z-index:1000;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 8%;

    backdrop-filter:blur(18px);

    background:rgba(28,8,63,.55);

    border-bottom:1px solid rgba(255,255,255,.08);

}

.logo{
    display:flex;
    align-items:center;
}

.logo img{
    width:70px;
    height:70px;
    object-fit:contain;
    border-radius:12px; /* optional */
    transition:.3s;
}

.logo img:hover{
    transform:scale(1.05);
}

.menu{

    display:flex;

    gap:35px;

}

.menu a{

    color:white;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    transition:.3s;

    position:relative;

}

.menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-7px;

    width:0;

    height:3px;

    background:#ffcc00;

    transition:.35s;

    border-radius:30px;

}

.menu a:hover{

    color:#ffd447;

}

.menu a:hover::after{

    width:100%;

}

/* ==========================================
   HERO
========================================== */

.hero{

    width:100%;

    max-width:1200px;

    margin:auto;

    text-align:center;

    padding:90px 20px 60px;

}

.hero h1{

    font-size:58px;

    font-weight:800;

    line-height:1.15;

    margin-bottom:20px;

    text-shadow:

    0 0 12px rgba(255,255,255,.18),

    0 0 35px rgba(173,92,255,.25);

}

.hero p{

    max-width:700px;

    margin:auto;

    color:#ece8ff;

    font-size:18px;

    line-height:1.8;

    opacity:.95;

}

/* hero decorative line */

.hero::after{

    content:"";

    display:block;

    width:170px;

    height:6px;

    margin:45px auto 0;

    border-radius:50px;

    background:linear-gradient(90deg,#ffcc00,#ff9d00);

    box-shadow:0 0 25px rgba(255,204,0,.6);

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:900px){

    nav{

        padding:15px 20px;

    }

    .logo img{

        width:170px;

    }

    .menu{

        gap:20px;

    }

    .menu a{

        font-size:14px;

    }

    .hero{

        padding:70px 20px 50px;

    }

    .hero h1{

        font-size:42px;

    }

    .hero p{

        font-size:16px;

    }

}

@media(max-width:650px){

    nav{

        flex-direction:column;

        gap:15px;

    }

    .menu{

        flex-wrap:wrap;

        justify-content:center;

        gap:18px;

    }

    .hero h1{

        font-size:34px;

    }

    .hero p{

        font-size:15px;

    }

}
/* ==========================================
   ITEMS SECTION
========================================== */

.items{

    width:100%;
    max-width:1300px;

    margin:20px auto 80px;

    padding:0 25px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

/* ==========================================
   CARD
========================================== */

.card{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    background:linear-gradient(180deg,#5823ba,#34126d);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:

    0 10px 30px rgba(0,0,0,.35);

    padding:28px 20px;

    text-align:center;

    transition:.35s;

    cursor:pointer;

}

/* animated border glow */

.card::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:22px;

    padding:2px;

    background:linear-gradient(
        45deg,
        transparent,
        rgba(255,255,255,.6),
        transparent
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.4s;

}

.card:hover::before{

    opacity:1;

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 25px 55px rgba(0,0,0,.45),

    0 0 35px rgba(170,90,255,.35);

}

/* ==========================================
   ITEM IMAGE
========================================== */

.card img{

    width:150px;

    height:150px;

    object-fit:contain;

    transition:.45s;

    user-select:none;

}

.card:hover img{

    transform:

    scale(1.12)

    rotate(-4deg);

    filter:

    drop-shadow(0 0 18px rgba(255,255,255,.35));

}

/* ==========================================
   ITEM TITLE
========================================== */

.card h3{

    margin-top:18px;

    font-size:22px;

    font-weight:700;

    color:white;

    line-height:1.3;

}

/* ==========================================
   RARITY BADGES
========================================== */

.rarity{

    position:absolute;

    top:16px;

    left:16px;

    padding:8px 16px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

    color:#fff;

}

/* Legendary */

.legendary{

    background:linear-gradient(
    90deg,
    #ffcc00,
    #ff9800);

    box-shadow:

    0 0 18px rgba(255,200,0,.5);

}

/* Epic */

.godly{

    background:linear-gradient(
    90deg,
    #ff3bb5,
    #b700ff);

    box-shadow:

    0 0 18px rgba(255,0,180,.45);

}

/* Rare */

.mythical{

    background:linear-gradient(
    90deg,
    #00c6ff,
    #0078ff);

    box-shadow:

    0 0 18px rgba(0,180,255,.45);

}

/* ==========================================
   BUTTON
========================================== */

.claim-btn{

    margin-top:25px;

    width:100%;

    border:none;

    outline:none;

    padding:15px;

    border-radius:14px;

    cursor:pointer;

    font-family:inherit;

    font-size:16px;

    font-weight:700;

    color:#341100;

    background:linear-gradient(
    180deg,
    #ffd84f,
    #ffb700);

    transition:.3s;

    box-shadow:

    0 8px 18px rgba(255,193,7,.35);

}

.claim-btn:hover{

    transform:translateY(-3px);

    background:linear-gradient(
    180deg,
    #ffe16b,
    #ffc400);

    box-shadow:

    0 12px 28px rgba(255,193,7,.55);

}

.claim-btn:active{

    transform:scale(.97);

}

/* ==========================================
   SHINE EFFECT
========================================== */

.card::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-70%;

    width:60%;

    height:300%;

    background:

    linear-gradient(

        rgba(255,255,255,0),

        rgba(255,255,255,.18),

        rgba(255,255,255,0)

    );

    transform:rotate(25deg);

    transition:.7s;

}

.card:hover::after{

    left:160%;

}

/* ==========================================
   GRID RESPONSIVE
========================================== */

@media(max-width:1200px){

.items{

grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:850px){

.items{

grid-template-columns:repeat(2,1fr);

gap:22px;

}

.card img{

width:130px;
height:130px;

}

}

@media(max-width:520px){

.items{

grid-template-columns:1fr;

padding:0 18px;

}

.card{

padding:24px 18px;

}

.card img{

width:120px;
height:120px;

}

.card h3{

font-size:20px;

}

.claim-btn{

font-size:15px;

}

}
/* ==========================================
   LOADER
========================================== */

#loader{

    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:linear-gradient(180deg,#3a0d83,#23024f);

    z-index:99999;

    transition:.5s ease;

}

.loader-box{

    text-align:center;

}

.loader-logo{

    width:120px;

    animation:logoFloat 2s ease-in-out infinite;

}

@keyframes logoFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

.loading-bar{

    width:260px;
    height:10px;

    margin:30px auto 15px;

    border-radius:20px;

    overflow:hidden;

    background:rgba(255,255,255,.15);

}

.loading-fill{

    width:0;

    height:100%;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #ffd84f,
        #ff9800
    );

    animation:loading 2.2s linear forwards;

}

@keyframes loading{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}

.loader-box p{

    color:white;

    letter-spacing:2px;

    font-size:15px;

    opacity:.9;

}

/* ==========================================
   POPUP
========================================== */

.popup{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(8px);

    visibility:hidden;

    opacity:0;

    transition:.35s;

    z-index:5000;

}

.popup.active{

    visibility:visible;

    opacity:1;

}

.popup-content{

    width:420px;

    max-width:90%;

    background:linear-gradient(
        180deg,
        #5d25cb,
        #371170
    );

    border-radius:22px;

    padding:35px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.45);

    border:1px solid rgba(255,255,255,.08);

}

.popup-content h2{

    font-size:30px;

    margin-bottom:10px;

}

.popup-content p{

    color:#e6dfff;

    margin-bottom:25px;

    line-height:1.6;

}

.popup-content input{

    width:100%;

    padding:16px;

    border:none;

    outline:none;

    border-radius:14px;

    font-size:16px;

    margin-bottom:20px;

    background:white;

    color:#333;

}

.popup-content button{

    width:100%;

    padding:15px;

    margin-top:10px;

    border:none;

    cursor:pointer;

    border-radius:14px;

    font-size:16px;

    font-weight:700;

    transition:.3s;

}

#continue{

    background:linear-gradient(
        180deg,
        #ffd84f,
        #ffb700
    );

    color:#381600;

}

#continue:hover{

    transform:translateY(-3px);

}

#close{

    background:#ffffff22;

    color:white;

}

#close:hover{

    background:#ffffff35;

}

/* ==========================================
   PROCESSING
========================================== */

.processing{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(10px);

    visibility:hidden;

    opacity:0;

    transition:.35s;

    z-index:6000;

}

.processing.active{

    visibility:visible;

    opacity:1;

}

.processing-box{

    text-align:center;

}

.processing-box h2{

    margin-top:25px;

    font-size:30px;

}

.processing-box p{

    margin-top:10px;

    color:#ddd;

}

.spinner{

    width:85px;

    height:85px;

    border:8px solid rgba(255,255,255,.15);

    border-top:8px solid #ffd84f;

    border-radius:50%;

    animation:spin 1s linear infinite;

    margin:auto;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================
   FOOTER
========================================== */

footer{

    padding:40px 20px;

    text-align:center;

    color:#d9d9d9;

    font-size:14px;

    border-top:1px solid rgba(255,255,255,.08);

    background:rgba(0,0,0,.15);

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:992px){

    .popup-content{

        padding:30px;

    }

    .processing-box h2{

        font-size:26px;

    }

}

@media(max-width:768px){

    .loader-logo{

        width:95px;

    }

    .loading-bar{

        width:220px;

    }

    .popup-content{

        width:92%;

        padding:25px;

    }

    .popup-content h2{

        font-size:24px;

    }

    .popup-content input{

        font-size:15px;

    }

    .spinner{

        width:70px;
        height:70px;

    }

}

@media(max-width:480px){

    .popup-content{

        padding:22px;

        border-radius:18px;

    }

    .popup-content h2{

        font-size:22px;

    }

    .popup-content p{

        font-size:14px;

    }

    .popup-content button{

        font-size:15px;

        padding:14px;

    }

    .loader-logo{

        width:80px;

    }

    .loading-bar{

        width:180px;

    }

    footer{

        font-size:13px;

    }

}
#verifyBtn{

    width:100%;

    padding:16px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:18px;

    font-weight:700;

    color:#381600;

    background:linear-gradient(180deg,#ffd84f,#ffb700);

    transition:.3s;

}

#verifyBtn:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(255,193,7,.4);

}