body{
background:#111;
color:white;
font-family:Arial, sans-serif;
text-align:center;
margin:0;
padding:0;
overflow-x:hidden;
}

h1{
margin-top:20px;
font-size:32px;
}

.wheel-container{
position:relative;
width:500px;
margin:40px auto;
}

canvas{
border-radius:50%;
background:#222;
box-shadow:0 0 25px cyan;
transition:box-shadow 0.3s;
}

canvas.spinning{
box-shadow:0 0 40px cyan,0 0 80px blue;
}

.pointer{
position:absolute;
top:calc(50% - 250px - 20px);
left:50%;
transform:translateX(-50%);
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:35px solid red;
filter:drop-shadow(0 0 6px red);
}

button{
padding:12px 35px;
font-size:18px;
cursor:pointer;
background:cyan;
border:none;
font-weight:bold;
border-radius:6px;
transition:0.2s;
margin-top:10px;
}

button:hover{
transform:scale(1.05);
background:#00e5ff;
}

button:active{
transform:scale(0.98);
}

#result{
margin-top:20px;
font-size:24px;
min-height:30px;
}

#winnerPopup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.85);
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
font-size:60px;
font-weight:bold;
opacity:0;
pointer-events:none;
transition:opacity 0.5s;
z-index:1000;
}

#winnerPopup.show{
opacity:1;
pointer-events:auto;
}

#winnerPopup span{
font-size:80px;
color:cyan;
margin-top:20px;
text-shadow:0 0 20px cyan;
}

/* Extra neon känsla */
@keyframes glow{
0%{box-shadow:0 0 20px cyan;}
50%{box-shadow:0 0 50px cyan;}
100%{box-shadow:0 0 20px cyan;}
}

canvas.spinning{
animation:glow 1.5s infinite;
}