body {
    margin: 0;
    font-family: Arial, sans-serif;
    text-align: center;
    background: linear-gradient(135deg,#ff9966,#ff5e62);
    color: white;
}

.page { display:none; padding:20px; }
.active { display:block; }

button {
    padding:12px 20px;
    margin:10px;
    border:none;
    border-radius:8px;
    font-weight:bold;
    cursor:pointer;
}

button:disabled {
    opacity:0.5;
    cursor:not-allowed;
}

input {
    padding:10px;
    border-radius:8px;
    border:none;
}

.wheel-wrapper {
    position: relative;
    width: 320px;
    height: 320px;
    margin: 30px auto;
}

#wheel {
    width:100%;
    height:100%;
    border-radius:50%;
    border:8px solid white;
    position:relative;
    overflow:hidden;
    transition: transform 8s cubic-bezier(0.1,0.9,0.2,1);
}

.label {
    position:absolute;
    width:100%;
    top:50%;
    left:0;
    transform:translateY(-50%);
    text-align:center;
    font-weight:bold;
    color:black;
    font-size:14px;
    pointer-events:none;
}

.pointer {
    position:absolute;
    top:-18px;
    left:50%;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:18px solid transparent;
    border-right:18px solid transparent;
    border-top:35px solid black;
    z-index:10;
}