*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#020617;
color:white;
padding-bottom:100px;
}
.hero{
min-height:60vh;

background:
linear-gradient(
rgba(0,0,0,.45),
rgba(0,0,0,.75)
),
url("stadium-bg.jpg.png");

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

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

text-align:center;
padding:20px;
}

.hero-content{
max-width:700px;
width:100%;
}

.tag{
font-size:14px;
letter-spacing:2px;
margin-bottom:15px;
color:#ffffff;
}

.hero h1{
font-size:clamp(48px,10vw,90px);
font-weight:800;
line-height:1;
margin-bottom:15px;
text-align:center;
}


.gold{
background:linear-gradient(
90deg,
#FFD700,
#F59E0B
);
display:inline-block;
text-align:center;

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

text-shadow:
0 0 15px rgba(255,215,0,.7),
0 0 30px rgba(255,215,0,.4);
}

.hero p{
font-size:18px;
color:#e2e8f0;
margin-bottom:30px;
}

.predict-btn{
display:inline-block;

padding:16px 32px;

border-radius:50px;

text-decoration:none;

font-weight:700;

color:white;

background:
linear-gradient(
90deg,
#22c55e,
#16a34a
);

box-shadow:
0 0 30px
rgba(34,197,94,.5);

transition:.3s;
}

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

@media(max-width:480px){

}

.stats{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
padding:25px;
background:#020617;
}

.stat-card{
background:rgba(255,255,255,.08);
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,.1);
border-radius:20px;
padding:18px;
}

.stat-card:hover{
transform:translateY(-5px);
}

.stat-card h2{
color:#facc15;
font-size:28px;
margin-bottom:5px;
}

.stat-card p{
color:#cbd5e1;
font-size:14px;
}

 .stages{
padding:25px;
background:transparent;
}

.stages h2{
margin-bottom:20px;
font-size:24px;
}

.stage{
background:rgba(255,255,255,.06);
padding:18px;
border-radius:20px;
margin-bottom:15px;

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

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

.stage h3{
margin-bottom:5px;
}

.stage p{
color:#cbd5e1;
font-size:14px;
}

.active{
border:1px solid #22c55e;
box-shadow:0 0 20px rgba(34,197,94,.25);
}

.stage-btn{
background:#22c55e;
color:white;
padding:10px 16px;
border-radius:12px;
text-decoration:none;
font-weight:600;
}

#leaderboardPage h2{
text-align:center;
margin-top:20px;
color:#facc15;
}

.locked{
background:#475569;
padding:8px 14px;
border-radius:10px;
font-size:12px;
}
.stage{
transition:.3s;
}

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

.bottom-nav{
position:fixed;
bottom:30px;
z-index:9999;
left:50%;
transform:translateX(-50%);

width:90%;
max-width:420px;

background:rgba(15,23,42,.9);

backdrop-filter:blur(15px);

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

border-radius:25px;

padding:12px;

display:flex;
justify-content:space-around;


}

.nav-btn{
background:none;
border:none;
color:#cbd5e1;
font-size:16px;
font-weight:600;
cursor:pointer;
}

.active-nav{
color:#facc15;
}

.podium-card{
background:rgba(255,255,255,.08);
padding:25px;
border-radius:25px;
text-align:center;
margin-bottom:20px;
border:1px solid rgba(255,255,255,.1);
}

.first{
border:2px solid gold;
box-shadow:0 0 25px rgba(255,215,0,.4);
}

.second{
border:2px solid silver;
box-shadow:0 0 20px rgba(192,192,192,.3);
}

.third{
border:2px solid #cd7f32;
box-shadow:0 0 20px rgba(205,127,50,.3);
}

.podium-card h1{
font-size:50px;
margin-bottom:10px;
}

.podium-card h2{
font-size:28px;
margin-bottom:10px;
}

.podium-card p{
color:#cbd5e1;
margin-bottom:10px;
}

.points{
font-size:24px;
font-weight:700;
color:#facc15;
}

.podium-row{
display:flex;
align-items:flex-end;
justify-content:center;
gap:15px;
margin-bottom:25px;
}

.podium{
background:rgba(255,255,255,.08);
border-radius:20px;
padding:20px;
text-align:center;
border:1px solid rgba(255,255,255,.1);
}

.podium.first{
flex:1.4;
min-height:220px;
border:2px solid gold;
box-shadow:0 0 25px rgba(255,215,0,.4);
}

.podium.second{
flex:1;
min-height:180px;
border:2px solid silver;
box-shadow:0 0 20px rgba(192,192,192,.3);
}

.podium.third{
flex:.9;
min-height:150px;
border:2px solid #cd7f32;
box-shadow:0 0 20px rgba(205,127,50,.3);
}

.podium h1{
font-size:40px;
margin-bottom:10px;
}

.podium h2{
font-size:24px;
margin-bottom:10px;
}

.podium p{
color:#cbd5e1;
}

@media(max-width:700px){

.podium-row{
gap:8px;
}

.podium.first{
min-height:180px;
}

.podium.second{
min-height:150px;
}

.podium.third{
min-height:130px;
}

.podium h2{
font-size:18px;
}

.logo-container{
gap:10px;
}

.logo-container{
gap:10px;
}

}

#leaderboardPage{
background:
linear-gradient(
rgba(2,6,23,.85),
rgba(2,6,23,.95)
),
url("leaderboard-bg.png");

background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;

min-height:100vh;
}

.container{
    width:90%;
    max-width:900px;
    margin:auto;
    padding:20px;
}

.header{
text-align:center;
margin-top:20px;
padding:20px 10px;
}

.logo-container{
display:flex;
justify-content:center;
align-items:center;
gap:8px;
margin-bottom:8px;
}

.logo{
width:90px;
height:90px;
object-fit:contain;

background:rgba(255,255,255,.08);
padding:5px;
border-radius:50%;
}

.union-title{
font-size:12px;
font-weight:600;
margin:5px 0;
color:white;
}

.header h2{
font-size:18px;
font-weight:600;
margin-bottom:2px;
}

.header p{
font-size:12px;
margin-bottom:8px;
}


.header p{
color:#94a3b8;
font-size:14px;
}

.header::after{
content:"LEADERBOARD";
display:block;

margin-top:18px;

font-size:clamp(24px,5vw,38px);
font-weight:800;

color:#facc15;

text-shadow:
0 0 15px rgba(250,204,21,.4);
}