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

body{
background:#020617;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
color:white;
padding:20px;
}

.start-screen,
.vote-screen,
.end-screen,
.result-card{

width:420px;
padding:35px;
border-radius:25px;

background:#111827;

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

animation:fadeIn 1s ease;

}

.hidden{
display:none;
}

.title{
font-size:30px;
font-weight:700;
text-align:center;
margin-bottom:10px;
}

.subtitle{
text-align:center;
margin-bottom:25px;
color:#cbd5e1;
}

.countdown{
text-align:center;
font-size:40px;
font-weight:700;
margin-bottom:20px;
color:#38bdf8;
}

.btn{
width:100%;
padding:15px;
border:none;
border-radius:15px;
background:linear-gradient(135deg,#8b5cf6,#ec4899);
color:white;
font-size:18px;
cursor:pointer;
}

.option{
margin-bottom:20px;
}

.option input{
display:none;
}

.option label{
display:block;
padding:18px;
border-radius:15px;
background:#1e293b;
cursor:pointer;
transition:0.4s;
}

.option input:checked + label{
background:#3b82f6;
}

.popup{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);

background:white;
color:black;

padding:30px;
border-radius:25px;
text-align:center;

transition:0.4s;

z-index:999;
}

.popup.active{
transform:translate(-50%,-50%) scale(1);
}

.overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.6);

opacity:0;
visibility:hidden;

transition:0.4s;
}

.overlay.active{
opacity:1;
visibility:visible;
}

.ok-btn{
margin-top:20px;
padding:12px 20px;
border:none;
border-radius:12px;
background:#3b82f6;
color:white;
cursor:pointer;
}

.result-box{
padding:15px;
background:#1e293b;
margin-top:15px;
border-radius:12px;
font-size:20px;
}

@keyframes fadeIn{

from{
opacity:0;
transform:translateY(30px);
}

to{
opacity:1;
transform:translateY(0);
}

}