* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 20px;
    background:
        radial-gradient(circle at top, #34206b, #120b25 65%);
    font-family: Arial, Helvetica, sans-serif;
}

.spin-widget {
    width: 100%;
    max-width: 520px;
    margin: 20px auto;
    padding: 25px;
    text-align: center;

    background: linear-gradient(
        145deg,
        #24153f,
        #10091d
    );

    border: 3px solid #ffd84d;
    border-radius: 25px;

    box-shadow:
        0 0 10px #ffd84d,
        0 0 30px rgba(255, 71, 214, .35),
        inset 0 0 30px rgba(255,255,255,.04);
}

.machine-title {
    font-size: 28px;
    font-weight: 900;
    color: #ffe45c;

    text-shadow:
        0 3px 0 #a76a00,
        0 0 15px #ffcf33;

    margin-bottom: 5px;
}

.machine-subtitle {
    color: #ff8eea;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.display-box {
    display: flex;
    justify-content: center;
    gap: 10px;

    padding: 18px;

    background: #07050c;
    border-radius: 18px;

    border: 2px solid #ff4fd8;

    box-shadow:
        inset 0 0 20px rgba(255, 0, 200, .25),
        0 0 15px rgba(255, 79, 216, .4);
}

.number-card {
    width: 70px;
    height: 90px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            180deg,
            #fff,
            #d9d9d9
        );

    border-radius: 12px;

    border: 3px solid #ffcc3d;

    box-shadow:
        0 5px 0 #8e6500,
        0 0 15px rgba(255, 205, 50, .35);

    overflow: hidden;
}

.number-card span {
    font-size: 55px;
    font-weight: 900;

    color: #29103d;

    text-shadow:
        2px 2px 0 #fff;
}

#spinButton {
    width: 100%;
    margin-top: 20px;

    padding: 15px 20px;

    border: 0;
    border-radius: 14px;

    cursor: pointer;

    font-size: 17px;
    font-weight: 900;

    color: #311000;

    background:
        linear-gradient(
            180deg,
            #ffe96a,
            #ffae19
        );

    box-shadow:
        0 5px 0 #a76000,
        0 0 20px rgba(255, 190, 30, .35);

    transition: .15s;
}

#spinButton:hover {
    transform: translateY(-2px);

    box-shadow:
        0 7px 0 #a76000,
        0 0 25px rgba(255, 220, 60, .6);
}

#spinButton:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #a76000;
}

#spinButton:disabled {
    opacity: .7;
    cursor: wait;
}

#status {
    margin-top: 15px;

    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

.small-note {
    margin-top: 12px;

    color: #8d849d;
    font-size: 10px;
}