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

body{
font-family:'Orbitron',sans-serif;
background:#07070c;
color:white;
overflow-x:hidden;
min-height:100vh;
display:flex;
flex-direction:column;
opacity:1;
transition:opacity .5s ease;
}

.siteLoading{
opacity:0;
}

body::before{

content:'';

position:fixed;
inset:0;

background:
linear-gradient(rgba(0,0,0,.84),rgba(0,0,0,.94)),
url('https://images.unsplash.com/photo-1542751371-adc38448a05e?q=80&w=1974&auto=format&fit=crop');

background-size:cover;
background-position:center;

z-index:-2;
}

main{
flex:1;
}

/* TOPBAR */

.topbar{

position:fixed;

top:0;
left:0;

width:100%;

height:70px;

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

padding:0 24px;

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

backdrop-filter:blur(14px);

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

z-index:9999;
}

.logo{

font-size:28px;
font-weight:900;

background:
linear-gradient(90deg,#ff36bf,#9340ff);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.topNav{

display:flex;
align-items:center;

gap:10px;
}

.navBtn{

height:38px;

min-width:108px;

padding:0 16px;

border:none;

border-radius:12px;

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

color:white;

cursor:pointer;

font-size:12px;

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

transition:.25s;
}

.navBtn:hover{
transform:translateY(-2px);
}

.activeBtn{

background:
linear-gradient(
90deg,
#ff36bf,
#9340ff)!important;
}

.steamBtn{

height:44px;

padding:0 18px;

border:none;

border-radius:12px;

background:
linear-gradient(
90deg,
#223b5d,
#304d77);

color:white;

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

cursor:pointer;

font-size:12px;
font-weight:900;
}

/* HERO */

.hero{

padding-top:120px;

text-align:center;
}

.heroTitle{

font-size:58px;
font-weight:900;

line-height:.95;

max-width:900px;

margin:auto;

background:
linear-gradient(
180deg,
#ffe4f8,
#ff41c5);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.heroText{

margin-top:18px;

font-size:16px;

color:#d7d7df;
}

.eventLine{

margin-top:34px;

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

gap:26px;

flex-wrap:wrap;
}

.eventCard{

min-width:260px;

padding:18px 22px;

border-radius:20px;

display:flex;
align-items:center;

gap:18px;

background:
linear-gradient(
180deg,
rgba(18,18,28,.92),
rgba(10,10,16,.96));

border:
1px solid rgba(255,0,180,.18);

backdrop-filter:blur(14px);

box-shadow:
0 0 30px rgba(255,0,180,.12);

transition:.3s;
}

.eventCard:hover{

transform:translateY(-4px);

box-shadow:
0 0 42px rgba(255,0,180,.22);
}

.eventIcon{

font-size:30px;

filter:
drop-shadow(0 0 14px #ff36bf);
}

.eventCard span{

display:block;

margin-bottom:6px;

font-size:13px;

letter-spacing:1px;

color:#ff87e5;
}

.countdownBox{

margin-top:22px;

font-size:24px;
font-weight:900;
}

#eventTimer{
color:#ff87e5;
}

/* STREAM */

.streamSection{

max-width:1380px;

margin:24px auto 0;

padding:0 16px;
}

.streamGrid{

display:grid;

grid-template-columns:minmax(0,1fr) 290px;

gap:16px;

align-items:start;
}

.streamerBar{

height:62px;

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

padding:0 16px;

border-radius:18px 18px 0 0;

background:
rgba(12,12,18,.96);

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

border-bottom:none;
}

.streamerLeft{

display:flex;
align-items:center;

gap:10px;
}

.streamerAvatar{

width:42px;
height:42px;

overflow:hidden;

border-radius:50%;
}

.streamerAvatar img{

width:100%;
height:100%;

object-fit:cover;
}

.streamerName{

font-size:13px;
font-weight:900;
}

.streamerGame{

margin-top:3px;

font-size:10px;

color:#cfcfe0;
}

.streamStatus{

height:32px;

padding:0 12px;

border-radius:999px;

display:flex;
align-items:center;

gap:8px;

font-size:10px;
font-weight:900;

background:
rgba(0,210,106,.14);

color:#00d26a;
}

.statusDot{

width:8px;
height:8px;

border-radius:50%;

background:#ff3b3b;
}

.playerBox{

overflow:hidden;

border-radius:
0 0 18px 18px;

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

border-top:none;

height:500px;

background:black;
}

.chatBox{

overflow:hidden;

border-radius:18px;

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

background:black;

height:594px;
}

.chatHeader{

height:50px;

display:flex;
align-items:center;

padding:0 16px;

font-weight:900;

font-size:14px;

background:
linear-gradient(
90deg,
#6d24ff,
#9137ff);
}

/* PROGRESS */

.progressPanel{

margin-top:12px;

padding:12px;

border-radius:16px;

display:grid;

grid-template-columns:
66px 1fr 96px;

gap:12px;

align-items:center;

background:
rgba(10,10,16,.96);

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

.currentDrop{

width:62px;
height:62px;

overflow:hidden;

border-radius:12px;

border:
2px solid #ff36bf;
}

.currentDrop img{

width:100%;
height:100%;

object-fit:cover;
}

.progressTitle{

font-size:16px;
font-weight:900;
}

.mainProgress{

width:100%;
height:10px;

margin-top:10px;

overflow:hidden;

border-radius:999px;

background:
rgba(255,255,255,.08);
}

.mainProgressFill{

width:0%;
height:100%;

background:
linear-gradient(
90deg,
#ff36bf,
#9340ff);
}

.progressText{

margin-top:8px;

font-size:11px;

color:#cfcfe2;
}

.minutesBlock{

text-align:right;

font-size:12px;
font-weight:900;
}

/* DROPS */

.skinsSection{

max-width:1380px;

padding:90px 16px 60px;

margin:auto;
}

.featuredSection{
padding-top:28px!important;
}

.skinsTitle{

text-align:center;

font-size:40px;
font-weight:900;

margin-bottom:24px;
}

.skinsTitle span{
color:#ff88e5;
}

.skinsGrid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:16px;
}

.skinCard{

overflow:hidden;

border-radius:18px;

background:
linear-gradient(
180deg,
rgba(20,20,28,.97),
rgba(10,10,16,.99));

border:
1px solid rgba(255,0,180,.16);

transition:.25s;

min-height:430px;
}

.skinCard:hover{
transform:translateY(-3px);
}

.skinTop{

height:52px;

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

padding:0 12px;
}

.creator{

display:flex;
align-items:center;

gap:8px;
}

.creator img{

width:30px;
height:30px;

border-radius:50%;
}

.creatorName{

font-size:11px;
font-weight:900;
}

.liveDot{

width:8px;
height:8px;

border-radius:50%;

background:#ff3b3b;
}

.skinImage{

width:100%;

height:170px;

object-fit:contain;

padding:22px;

display:block;

margin:auto;

image-rendering:auto;
}

.skinInfo{
padding:14px;
}

.skinRarity{

width:max-content;

margin:0 auto 12px;

padding:7px 14px;

border-radius:999px;

font-size:9px;
font-weight:900;
}

.common{
background:linear-gradient(90deg,#666,#888);
}

.rare{
background:linear-gradient(90deg,#2b6fff,#49a2ff);
}

.epic{
background:linear-gradient(90deg,#b12bff,#ff36bf);
}

.legendary{

background:
linear-gradient(
90deg,
#ff8a00,
#ffd000);

color:black;
}

.skinName{

text-align:center;

font-size:20px;
font-weight:900;

line-height:1.1;

min-height:52px;

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

.skinHours{

margin-top:10px;

text-align:center;

font-size:12px;

color:#ff87e5;
}

.skinStatus{

margin-top:10px;

text-align:center;

font-size:10px;

color:#d5d5df;
}

.skinProgress{

width:100%;
height:8px;

margin-top:12px;

overflow:hidden;

border-radius:999px;

background:
rgba(255,255,255,.08);
}

.skinProgressFill{

width:0%;
height:100%;

background:
linear-gradient(
90deg,
#ff36bf,
#9340ff);
}

.lockText{

margin-top:10px;

text-align:center;

font-size:11px;

line-height:1.5;

color:#ffb0e7;
}

.claimBtn{

width:100%;
height:42px;

margin-top:12px;

border:none;

border-radius:10px;

background:
linear-gradient(
90deg,
#34343f,
#44444f);

color:white;

font-size:11px;

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

cursor:pointer;
}

/* FAQ */

.faqAccordion{

max-width:1000px;

margin:auto;

display:flex;
flex-direction:column;

gap:16px;
}

.faqCard{

overflow:hidden;

border-radius:16px;

background:
rgba(10,10,16,.96);

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

.faqBtn{

width:100%;

height:64px;

padding:0 20px;

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

border:none;

background:none;

color:white;

font-size:14px;
font-family:'Orbitron',sans-serif;
font-weight:900;

cursor:pointer;
}

.faqBtn::after{

content:'+';

font-size:22px;

color:#ff87e5;
}

.faqContent{

max-height:0;

overflow:hidden;

padding:0 20px;

font-size:13px;

line-height:1.8;

color:#d7d7e4;

transition:.3s;
}

.faqCard.active .faqContent{

max-height:260px;

padding-bottom:18px;
}

.faqCard.active .faqBtn::after{

content:'−';
}


.roundsBar{
display:flex;
align-items:center;
gap:10px;
margin-top:18px;
flex-wrap:wrap;
}

.roundLabel{
font-size:12px;
font-weight:900;
color:#cfcfe0;
letter-spacing:1px;
}

.roundBtn{
width:42px;
height:42px;
border-radius:12px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.04);
color:#777;
font-family:'Orbitron',sans-serif;
font-weight:900;
cursor:not-allowed;
}

.roundBtn.active{
background:linear-gradient(90deg,#ff36bf,#9340ff);
color:white;
cursor:pointer;
border:none;
}

.roundBtn.locked{
opacity:.55;
}

.tradeWarning{

margin-bottom:24px;

padding:18px;

border-radius:18px;

background:
linear-gradient(
180deg,
rgba(40,18,18,.95),
rgba(18,10,10,.96));

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

display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
flex-wrap:wrap;

}

.tradeWarningTitle{

font-size:18px;
font-weight:900;

color:#ff8f8f;
}

.tradeWarningText{

margin-top:6px;

font-size:12px;

color:#ffd2d2;
line-height:1.7;
}

.tradeBtn{

height:42px;

padding:0 18px;

border:none;

border-radius:12px;

background:
linear-gradient(
90deg,
#ff36bf,
#9340ff);

color:white;

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

font-size:11px;
font-weight:900;

cursor:pointer;
}

.claimBtn.farming{

background:
linear-gradient(
90deg,
#ff36bf,
#9340ff);

}

.claimBtn.claim{

background:
linear-gradient(
90deg,
#00c853,
#00e676);

color:black;
font-weight:900;
}

.claimBtn.claimed{

background:
linear-gradient(
90deg,
#555,
#777);

}

/* FOOTER */

.footer{

padding:26px 20px;

text-align:center;

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

background:
rgba(8,8,14,.96);
}

.footerLogo{

font-size:34px;
font-weight:900;

background:
linear-gradient(
90deg,
#ff36bf,
#9340ff);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.footerText{

margin-top:16px;

font-size:13px;
font-weight:900;

color:#d4d4df;
}

.footerSub{

margin-top:10px;

font-size:10px;

letter-spacing:2px;

color:#8f8fa3;
}



/* DESKTOP STREAM FIX */

.streamGrid{
align-items:start;
}

.playerBox iframe{
display:block;
}

/* INVENTORY EXTRA */

.activityBox{
padding:18px;
border-radius:18px;
background:rgba(10,10,16,.95);
border:1px solid rgba(255,255,255,.08);
}

/* MOBILE MENU */

.burgerBtn{
display:none;
}

@media(max-width:950px){

.topbar{
height:70px;
padding:0 12px;
display:grid;
grid-template-columns:44px 1fr 44px;
align-items:center;
gap:10px;
}

.logo{
font-size:20px;
text-align:center;
}

.burgerBtn{
display:flex;
width:44px;
height:44px;
border:none;
border-radius:12px;
background:rgba(255,255,255,.08);
color:white;
font-size:24px;
align-items:center;
justify-content:center;
cursor:pointer;
}

.topNav{

display:none;

position:absolute;

top:78px;
right:12px;

width:180px;

padding:10px;

border-radius:16px;

background:rgba(10,10,16,.96);

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

backdrop-filter:blur(12px);

grid-template-columns:1fr;

gap:8px;

z-index:99999;

}

.topNav.mobileOpen{
display:grid;
}

.navBtn{
width:100%;
min-width:auto;
}

.steamBtn{

width:auto;
height:40px;

padding:0 12px;

font-size:9px;

justify-self:end;

margin-right:6px;

}

.hero{
padding-top:85px;
}

.streamGrid{
grid-template-columns:1fr;
}

.playerBox{
height:240px;
}

.playerBox iframe{
height:240px;
}

.chatBox{
height:420px;
}

.chatBox iframe{
height:370px;
}

.skinsGrid{
grid-template-columns:repeat(2,minmax(0,1fr));
}

#steamLogin{
grid-column:2;
grid-row:1;
}

.burgerBtn{
grid-column:3;
grid-row:1;
justify-self:end;
}

.logo{

grid-column:1;
grid-row:1;

font-size:0;

width:150px;

overflow:visible;

display:flex;
align-items:center;

}

.logo::after{

content:'F1EXTOR DROPS';

font-size:15px;

white-space:nowrap;

background:
linear-gradient(90deg,#ff36bf,#9340ff);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

font-weight:900;

}

}

@media(max-width:950px) and (orientation:landscape){

.streamGrid{
grid-template-columns:1fr 280px;
}

.playerBox{
height:390px;
}

.playerBox iframe{
height:390px;
}

.chatBox{
height:390px;
}

.chatBox iframe{
height:340px;
}

.skinsGrid{
grid-template-columns:repeat(4,minmax(0,1fr));
}

.hero{
padding-top:120px;
}

}

.streamerAvatar,
.creator img{

box-shadow:
0 0 18px #ff008c,
0 0 34px rgba(255,0,140,.55);

border:2px solid #ff36bf;

}

.streamerAvatar img,
.creator img{

object-fit:cover;

}

#dropsTab .streamSection{

margin-top:-35px;
padding-bottom:28px;

}

#dropsTab .progressPanel{
margin-bottom:40px;
}

.offlineStatus{

background:
rgba(255,70,70,.12);

color:#ff5c5c;

}

.offlineStatus .statusDot{
background:#ff3b3b;
}

/* LIVE COUNTER */

.liveStats{
display:flex;
justify-content:center;
gap:18px;
margin-top:22px;
flex-wrap:wrap;
}

.liveBadge{
padding:12px 18px;
border-radius:14px;
background:rgba(12,12,18,.92);
border:1px solid rgba(255,255,255,.08);
font-size:12px;
font-weight:900;
display:flex;
align-items:center;
gap:10px;
backdrop-filter:blur(12px);
}

.livePulse{
width:10px;
height:10px;
border-radius:50%;
background:#ff2d55;
animation:pulse 1.2s infinite;
}

@keyframes pulse{
0%{transform:scale(1);opacity:1;}
50%{transform:scale(1.5);opacity:.5;}
100%{transform:scale(1);opacity:1;}
}

/* SOCIALS */

.socialsBar{
display:flex;
justify-content:center;
gap:14px;
margin-top:26px;
flex-wrap:wrap;
}

.socialBtn{
height:46px;
padding:0 18px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
color:white;
font-size:12px;
font-weight:900;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
transition:.25s;
backdrop-filter:blur(10px);
}

.socialBtn:hover{
transform:translateY(-3px);
box-shadow:0 0 24px rgba(255,54,191,.35);
}

/* FLOATING */

.skinCard{
animation:floatCard 5s ease-in-out infinite;
}

@keyframes floatCard{
0%{transform:translateY(0px);}
50%{transform:translateY(-6px);}
100%{transform:translateY(0px);}
}


/* PARTICLES */

#particlesCanvas{
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;
opacity:.8;
}

/* TAB TRANSITIONS */

.tabFade{
animation:tabFade .35s ease;
}

@keyframes tabFade{
0%{
opacity:0;
transform:translateY(8px);
}
100%{
opacity:1;
transform:translateY(0);
}
}

/* NOTIFICATIONS */

.notifyContainer{
position:fixed;
top:90px;
right:20px;
display:flex;
flex-direction:column;
gap:12px;
z-index:999999;
}

.notifyBox{
padding:14px 18px;
border-radius:14px;
background:rgba(12,12,18,.95);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(14px);
font-size:11px;
font-weight:900;
color:#fff;
transform:translateX(120%);
opacity:0;
transition:.4s;
box-shadow:0 0 28px rgba(180,80,255,.25);
}

.notifyVisible{
transform:translateX(0);
opacity:1;
}

/* EXTRA GLOW */

.heroTitle{
filter:drop-shadow(0 0 24px rgba(255,54,191,.45));
}

.progressPanel,
.skinCard,
.chatBox,
.playerBox,
.activityBox{
box-shadow:
0 0 24px rgba(180,80,255,.08);
}


/* LIVE STATUS */

.liveStatus{
animation:liveGlow 1.5s infinite;
}

@keyframes liveGlow{
0%{box-shadow:0 0 0 rgba(255,0,90,.2);}
50%{box-shadow:0 0 22px rgba(255,0,90,.45);}
100%{box-shadow:0 0 0 rgba(255,0,90,.2);}
}

/* STEAM DROPDOWN */

.steamDropdown{
position:absolute;
top:58px;
right:0;
width:220px;
padding:14px;
border-radius:16px;
background:rgba(12,12,18,.96);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(12px);
display:none;
flex-direction:column;
gap:10px;
z-index:999999;
}

.steamBtn{
position:relative;
overflow:visible;
}

.steamDropdown.active{
display:flex;
}

.steamDropItem{
padding:10px 12px;
border-radius:12px;
background:rgba(255,255,255,.05);
font-size:11px;
font-weight:900;
}

@media(max-width:950px){

.notifyContainer{
right:12px;
left:12px;
top:82px;
}

.notifyBox{
font-size:10px;
}

#particlesCanvas{
opacity:.45;
}

}


/* IFRAME FALLBACK */

.iframeFallback{
padding:12px;
font-size:11px;
color:#cfcfe0;
background:rgba(12,12,18,.96);
border-top:1px solid rgba(255,255,255,.06);
text-align:center;
}

/* MOBILE SAFE AREA */

body{
padding-left:env(safe-area-inset-left);
padding-right:env(safe-area-inset-right);
}

/* PERFORMANCE */

.playerBox iframe,
.chatBox iframe{
will-change:transform;
}


/* BUTTON UX */

.claimBtn{
transition:.25s;
}

.claimBtn:hover{
transform:translateY(-2px);
filter:brightness(1.08);
}

/* MOBILE PLAYER */

@media(max-width:950px){

.playerBox{
height:260px;
}

.playerBox iframe{
height:260px;
}

}


/* FINAL MOBILE HERO FIX */

@media(max-width:650px){

.heroTitle{
font-size:38px;
line-height:1.05;
}

}

/* CLAIM BUTTON MOBILE FIX */

.claimBtn{
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}

/* PARTICLE GPU OPTIMIZATION */

#particlesCanvas{
transform:translateZ(0);
}

/* MOBILE OVERSCROLL */

body{
overscroll-behavior:none;
}


/* LOADING SCREEN */

.loadingOverlay{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
gap:18px;
background:#07070c;
z-index:9999999;
transition:.6s ease;
}

.loadingOverlay.hidden{
opacity:0;
pointer-events:none;
}

.loadingLogo{
font-size:42px;
font-weight:900;
background:linear-gradient(90deg,#ff36bf,#9340ff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:logoPulse 1.8s infinite;
}

.loadingBar{
width:240px;
height:10px;
overflow:hidden;
border-radius:999px;
background:rgba(255,255,255,.08);
}

.loadingFill{
height:100%;
width:0%;
background:linear-gradient(90deg,#ff36bf,#9340ff);
animation:loadingBar 2.4s ease forwards;
}

.loadingPercent{
font-size:12px;
font-weight:900;
color:#ff87e5;
}

.loadingSub{
font-size:11px;
letter-spacing:2px;
color:#bdbdd3;
animation:loadingText 2s ease-in-out infinite;
}

@keyframes loadingBar{
0%{width:0%;}
100%{width:100%;}
}

@keyframes logoPulse{
0%{filter:drop-shadow(0 0 0 rgba(255,54,191,.2));}
50%{filter:drop-shadow(0 0 18px rgba(255,54,191,.55));}
100%{filter:drop-shadow(0 0 0 rgba(255,54,191,.2));}
}

@keyframes loadingText{
0%{opacity:.4;}
50%{opacity:1;}
100%{opacity:.4;}
}

@media(max-width:650px){

.loadingLogo{
font-size:28px;
}

.loadingBar{
width:180px;
}

}


.footerMail{

margin-top:14px;

font-size:13px;

color:#cfcfe0;

letter-spacing:1px;
}

.footerMail a{

color:#ff4fc3;

text-decoration:none;

font-weight:700;

transition:.25s;
}

.footerMail a:hover{

color:#ffffff;

text-shadow:
0 0 12px #ff36bf;
}


.socialBtn i{

margin-right:10px;

font-size:20px;

transition:.25s;
}

.twitchBtn i{
color:#9147ff;
}

.telegramBtn i{
color:#29a9eb;
}

.youtubeBtn i{
color:#ff2a2a;
}

.kickBtn i{
color:#53fc18;
}

.socialBtn:hover i{

transform:scale(1.12);

filter:
drop-shadow(0 0 10px currentColor);
}

.twitchBtn:hover{
box-shadow:0 0 28px rgba(145,70,255,.45);
}

.telegramBtn:hover{
box-shadow:0 0 28px rgba(0,170,255,.45);
}

.youtubeBtn:hover{
box-shadow:0 0 28px rgba(255,0,0,.35);
}

.kickBtn:hover{
box-shadow:0 0 28px rgba(0,255,90,.35);
}