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

body{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background: linear-gradient(135deg, #ff4d6d, #ff8fa3, #c9184a);
}

.container{
    width:90%;
    max-width:500px;
    text-align:center;
    background: rgba(255,255,255,0.15);
    padding:40px;
    border-radius:25px;
    backdrop-filter: blur(10px);
    box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

h1{
    color:white;
    font-size:2.5rem;
    margin-bottom:10px;
}

.subtitulo{
    color:white;
    margin-bottom:30px;
}

.ruleta-container{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:30px;
}

.ruleta{
    width:300px;
    height:300px;
    border-radius:50%;
    border:10px solid white;
    background: radial-gradient(circle, #fff0f3, #ff758f);
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:20px;
    font-size:1.8rem;
    font-weight:bold;
    color:#c9184a;
    transition: transform 4s cubic-bezier(0.17, 0.67, 0.25, 1);
    box-shadow:0 0 30px rgba(255,255,255,0.5);
}

.flecha{
    position:absolute;
    top:-20px;
    width:0;
    height:0;
    border-left:20px solid transparent;
    border-right:20px solid transparent;
    border-top:40px solid white;
    z-index:10;
}

button{
    padding:15px 40px;
    border:none;
    border-radius:50px;
    font-size:1.2rem;
    font-weight:bold;
    cursor:pointer;
    background:white;
    color:#c9184a;
    transition:0.3s;
}

button:hover{
    transform:scale(1.08);
    background:#ffe5ec;
}

@media(max-width:600px){

    .ruleta{
        width:240px;
        height:240px;
        font-size:1.3rem;
    }

    h1{
        font-size:2rem;
    }

}