body{
margin:0;
font-family:system-ui;
background:#0f172a;
color:white;
text-align:center;
}

header{
padding:30px;
}

h1{
margin:0;
font-size:40px;
}

.container{
display:flex;
justify-content:center;
align-items:center;
gap:40px;
flex-wrap:wrap;
padding:20px;
}

/* wheel */
.wheel-box{
position:relative;
width:420px;
height:420px;
display:flex;
justify-content:center;
align-items:center;
background:rgba(255,255,255,0.04);
border-radius:20px;
}

.arrow{
position:absolute;
right:-18px;
top:50%;
transform:translateY(-50%);
font-size:50px;
color:red;
z-index:10;
}

#wheel{
width:420px;
height:420px;
border-radius:50%;
transition:6s cubic-bezier(.17,.67,.17,1);
}

/* panel */
.panel{
width:260px;
background:rgba(255,255,255,0.05);
padding:20px;
border-radius:15px;
}

textarea{
width:100%;
height:140px;
border:none;
border-radius:10px;
padding:10px;
background:#0b1220;
color:white;
outline:none;
resize:none;
}

button{
width:100%;
margin-top:10px;
padding:12px;
border:none;
border-radius:10px;
background:#ff0055;
color:white;
font-weight:bold;
cursor:pointer;
}

#result{
margin-top:15px;
font-size:18px;
color:#00ffb3;
font-weight:bold;
}

/* mobile */
@media(max-width:768px){
.wheel-box,#wheel{
width:300px;
height:300px;
}
}