*{box-sizing:border-box}
body{
 margin:0;
 font-family:Arial,Helvetica,sans-serif;
 background:linear-gradient(135deg,#0a2a43,#f39c12);
 color:#fff;
 min-height:100vh;
 display:flex;
 align-items:center;
 justify-content:center;
 text-align:center;
}
.container{
 background:rgba(0,0,0,.75);
 padding:30px;
 border-radius:20px;
 width:100%;
 max-width:420px;
}
.logo{max-width:180px;margin-bottom:10px}

.roleta-wrapper{
 position:relative;
 width:260px;
 height:260px;
 margin:25px auto;
}
canvas{
 border-radius:50%;
 border:6px solid #fff;
 transition:transform 4s cubic-bezier(.33,1,.68,1);
}
.seta{
 position:absolute;
 top:-20px;
 left:50%;
 transform:translateX(-50%);
 border-left:14px solid transparent;
 border-right:14px solid transparent;
 border-bottom:26px solid #fff;
 z-index:10;
}
button{
 width:100%;
 padding:16px;
 font-size:20px;
 border:none;
 border-radius:12px;
 background:#f39c12;
 font-weight:bold;
 cursor:pointer;
}
button:disabled{opacity:.6}
#resultado{margin-top:15px;font-size:20px}
.cupom{
 display:inline-block;
 margin-top:8px;
 padding:8px 14px;
 background:#fff;
 color:#000;
 font-weight:bold;
 border-radius:8px;
 letter-spacing:2px;
}