main { display:flex; justify-content:center; padding:100px 0; }
main > .container { width:100%; max-width:1280px; }

main > .container > h1 { margin-top:60px; display:flex; justify-content:center; align-items:center; }
main > .container > h1 span { position:relative; font-size:40px; font-weight:500; }
main > .container > h1 span::after { content:""; position:absolute; right:10px; top:0; transform:translateX(100%) rotate( 20deg ); width:25px; height:25px; border:2px solid #FE8130; border-radius:5px; z-index:-1; }



.slots_wrap { margin-top:60px; display:flex; justify-content:center; align-items:center; }

.slots {position: relative;width: 276.5px;height: 276.5px;display: flex;justify-content: space-between;padding: 23.7px;background: linear-gradient(45deg, grey 0%, lightgray 100%);border-top: 1px solid rgba(255, 255, 255, 0.6);border-right: 1px solid rgba(255, 255, 255, 0.6);border-left: 1px solid rgba(0, 0, 0, 0.4);border-bottom: 1px solid rgba(0, 0, 0, 0.4);box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);border-radius: 3px; } 
.slots::before, .slots::after {content: "";position: absolute;top: 50%;width: 10px;height: 2px;background-color: rgba(0, 0, 0, 0.5); } 
.slots::before {left: 0;transform: translate(-200%, -50%); } 
.slots::after {right: 0;transform: translate(200%, -50%); } 
@keyframes win1 {0% { background: linear-gradient(45deg, orange 0%, yellow 100%); box-shadow: 0 0 80px orange; } 
100% { background: linear-gradient(45deg, grey 0%, lightgrey 100%); box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3); } 
 }
 
@keyframes win2 {0% { background: linear-gradient(45deg, lightblue 0%, lightgreen 100%); box-shadow: 0 0 80px lightgreen; } 
100% { background: linear-gradient(45deg, grey 0%, lightgrey 100%); box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3); } 
 }
.slots.win1 {animation: win1 200ms steps(2, end) infinite; } 
.slots.win2 {animation: win2 200ms steps(2, end) infinite; } 
.slots .reel {position: relative;width: 79px;height: 237px;border: 1px solid rgba(0, 0, 0, 0.3);border-radius: 3px;overflow: hidden;background-image: url(https://assets.codepen.io/439000/slotreel.webp);background-position: 0 0;background-repeat: repeat-y; } 
.slots .reel::after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.4) 100%);box-shadow: inset 0 0 6px 2px rgba(0, 0, 0, 0.3); } 

.menu { display:flex; justify-content:center; align-items:center; gap:20px; }
.menu > button { width:100px; height:100px; border-radius:50%; background:#ccc; color:#fff; font-size:20px; font-weight:bold; }
.menu > button:active { background:#ff0000; }