.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.gacha-machine {
    position: relative;
    width: 360px;
    height: 650px
}

.top-cap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    height: 36px;
    background: #ccc;
    border-radius: 999px
}

.globe {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid rgba(255, 255, 255, .5)
}

.glass-highlight {
    position: absolute;
    left: 25px;
    top: 20px;
    width: 90px;
    height: 180px;
    background: linear-gradient(rgba(255, 255, 255, .8), transparent);
    border-radius: 50%
}

.machine-body {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: 360px;
    background: #a7e751;
    border-radius: 40px
}

.dial-panel {
    width: 150px;
    height: 150px;
    background: #fff;
    margin: 35px auto;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center
}

.dial {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #bbb;
    position: relative;
    touch-action: none;
    cursor: pointer;
}

.dial-handle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 18px;
    background: #fff;
    border-radius: 99px
}

.exit-slot {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    background: #7d7d7d;
    overflow: hidden
}

.prize-capsule {
    position: absolute;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    cursor: pointer
}

.overlay,
.modal {
    position: fixed;
    inset: 0
}

.hidden {
    display: none
}

.overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 72px;
    color: #fff;
    background: rgba(0, 0, 0, .3)
}

.modal .backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5)
}

.modal .content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 24px;
    border-radius: 12px
}

.modal .content h2,
.modal .content p {
    text-align: center;
}

.item {
	width: 200px;
    border: 2px solid #000;
}

.item.secret {
	border: 2px solid transparent;
    animation: gradation .7s infinite;
}

@keyframes gradation{
    0% {
        border-image: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet) 1;
    }
    14.3% {
        border-image: linear-gradient(45deg, orange, yellow, green, blue, indigo, violet, red) 1;
    }
    28.5% {
        border-image: linear-gradient(45deg, yellow, green, blue, indigo, violet, red, orange) 1;
    }
    42.8% {
        border-image: linear-gradient(45deg, green, blue, indigo, violet, red, orange, yellow) 1;
    }
    57.1% {
        border-image: linear-gradient(45deg, blue, indigo, violet, red, orange, yellow, green) 1;
    }
    71.4% {
        border-image: linear-gradient(45deg, indigo, violet, red, orange, yellow, green, blue) 1;
    }
    100%{
        border-image: linear-gradient(45deg, violet, red, orange, yellow, green, blue, indigo) 1;
    }
}

.modal .content button {
    width: 100%;
    height: 50px;
    font-size: 20px;
    border-radius: 20px;
    border: none;
    color: rgb(125, 134, 255);
}