html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    margin:0;
    padding:0;
	font-family:'Poppins',sans-serif;
}

body{
    position:fixed;
    inset:0;
}


body{
    margin:0;
    min-height:100vh;
    font-family:'Poppins',sans-serif;

    position: relative;
    overflow-x: hidden;

    background: #000;
}

/* Blurred Background Layer */
body::before{
    content:'';
    position:fixed;
    inset:-20px;

    background-image: url('../images/bg-tile-2.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    filter: blur(1px);
    transform: scale(1.08);

    z-index:-2;
}

/* Dark Overlay */
body::after{
    content:'';
    position:fixed;
    inset:0;

    background: rgba(0,0,0,0.60);

    z-index:-1;
}
	
	.main-wrapper{
	    background: rgba(0, 0, 0, 0.5) !important;
	}
	
	.carousel-container{
		scroll-behavior:smooth;
		-webkit-overflow-scrolling:touch;
	}

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

	.hide-scrollbar{
		scrollbar-width:none;
	}
	
	

/* MOBILE HEIGHT FIX */
.main-wrapper{
    width:100%;
    max-width:420px;
    height:100dvh;
    overflow:hidden;
    padding:12px;
}

/* SAFER MOBILE SUPPORT */
@supports(height:100dvh){
    .main-wrapper{
        height:100dvh;
    }
}

@supports not (height:100dvh){
    .main-wrapper{
        height:100vh;
    }
}

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


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

.halloween-bg{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at top left, rgba(255,184,0,0.15), transparent 30%),
        radial-gradient(circle at bottom right, rgba(255,87,34,0.12), transparent 35%),
        linear-gradient(135deg, #050505 0%, #120902 45%, #1b0f04 100%);
}

.halloween-bg::before{
    content:"";
    position:absolute;
   top:-20%;
left:-20%;
right:-20%;
bottom:-20%;
    background:
        radial-gradient(circle, rgba(255,184,0,0.10) 0%, transparent 60%),
        radial-gradient(circle, rgba(255,87,34,0.08) 0%, transparent 65%);
    animation:rotateBg 18s linear infinite;
    z-index:0;
    pointer-events:none;
}

.halloween-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(circle, rgba(255,215,0,0.18) 0%, transparent 12%),
        radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 10%),
        radial-gradient(circle, rgba(255,140,0,0.14) 0%, transparent 14%);
    background-size:
        180px 180px,
        260px 260px,
        320px 320px;
    animation:floatShots 25s linear infinite;
    opacity:0.8;
    z-index:0;
    pointer-events:none;
}

@keyframes rotateBg{
    from{
        transform:rotate(0deg) scale(1);
    }
    to{
        transform:rotate(360deg) scale(1.1);
    }
}

@keyframes floatShots{
    0%{
        transform:translateY(0px) translateX(0px);
    }
    50%{
        transform:translateY(-40px) translateX(20px);
    }
    100%{
        transform:translateY(0px) translateX(0px);
    }
}

/* ===========================
   MUSIC BARS
=========================== */

.music-bars{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:120px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:6px;
    z-index:1;
    opacity:0.25;
    pointer-events:none;
}

.music-bars span{
    width:10px;
    border-radius:20px 20px 0 0;
    background:linear-gradient(to top,#ff7b00,#ffd000);
    animation:bars 1.2s infinite ease-in-out;
}

.music-bars span:nth-child(1){height:30px;animation-delay:.1s;}
.music-bars span:nth-child(2){height:70px;animation-delay:.3s;}
.music-bars span:nth-child(3){height:45px;animation-delay:.5s;}
.music-bars span:nth-child(4){height:90px;animation-delay:.2s;}
.music-bars span:nth-child(5){height:55px;animation-delay:.4s;}
.music-bars span:nth-child(6){height:80px;animation-delay:.6s;}
.music-bars span:nth-child(7){height:35px;animation-delay:.2s;}
.music-bars span:nth-child(8){height:100px;animation-delay:.5s;}
.music-bars span:nth-child(9){height:60px;animation-delay:.7s;}
.music-bars span:nth-child(10){height:40px;animation-delay:.1s;}

@keyframes bars{
    0%,100%{
        transform:scaleY(.4);
        opacity:.5;
    }
    50%{
        transform:scaleY(1.3);
        opacity:1;
    }
}

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

.glass-card{
    position:relative;
    background:rgba(30,30,30,0.45);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,0.08);
    overflow:hidden;
    isolation:isolate;
    box-shadow:0 8px 30px rgba(0,0,0,0.35);
}

.glass-card::before,
.glass-card::after{
    content:"";
    position:absolute;
    border-radius:9999px;
    filter:blur(70px);
    opacity:0.45;
    z-index:1;
}

.glass-card::before{
    width:180px;
    height:180px;
    background:rgba(253,184,19,0.35);
    top:-40px;
    left:-40px;
}

.glass-card::after{
    width:160px;
    height:160px;
    background:rgba(255,140,0,0.22);
    bottom:-30px;
    right:-30px;
}

.glass-card>*{
    position:relative;
    z-index:3;
}

/* ===========================
   CAROUSEL
=========================== */

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

.hide-scrollbar{
    -ms-overflow-style:none;
    scrollbar-width:none;
}



.carousel-container{
    scroll-snap-type:x mandatory;
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;
    gap:20px;
    padding:20px 14px;
    width:100%;
}

.carousel-item{
    scroll-snap-align:center;
    flex:0 0 100%;
    max-width:280px;
}

.splash-header-purple{
    background:linear-gradient(322deg,#FF5722 0%,#ffbf00 100%);
}

.splash-header-teal{
    background:linear-gradient(135deg,#2dd4bf 0%,#0d9488 100%);
}

.dot.active{
    background-color:#FDB813;
    width:1.5rem;
}


.toast {
    position: fixed;
    top: 20px;
    right: -300px; /* hidden initially */
    min-width: 250px;
    max-width: 320px;
    background: linear-gradient(135deg, #ff4d4d, #d60000);
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    transition: all 0.4s ease;
    z-index: 9999;
    opacity: 0;
}

/* active state */
.toast.show {
    right: 20px;
    opacity: 1;
}


	/* FULLSCREEN OVERLAY */
.redirect-loader{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999;

    display: none;
    align-items: center;
    justify-content: center;
}

/* CENTER BOX */
.loader-box{
    width: 280px;
    padding: 30px 25px;
    border-radius: 24px;

    background: rgba(20,20,20,0.85);
    border: 1px solid rgba(255,215,0,0.15);

    text-align: center;

    box-shadow:
        0 10px 40px rgba(0,0,0,0.45),
        0 0 30px rgba(255,204,0,0.08);
}

/* SPINNER */
.modern-spinner{
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;

    border-radius: 50%;
    border: 5px solid rgba(255,255,255,0.1);
    border-top: 5px solid #ffcc00;

    animation: spinLoader 1s linear infinite;
}

/* TITLE */
.loader-box h3{
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

/* SUBTITLE */
.loader-box p{
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    line-height: 1.5;
}

/* TOP BAR */
#pageLoader{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:rgba(255,255,255,0.08);
    z-index:9999999;
}

#loaderBar{
    width:0%;
    height:100%;
    background: linear-gradient(90deg,#ffcc00,#ff8800);
    transition: width .3s ease;
    box-shadow: 0 0 15px #ffcc00;
}

/* SPIN */
@keyframes spinLoader{
    100%{
        transform: rotate(360deg);
    }
}