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; }




.w { width:100%; display:flex; }
.w > div:not(.content) { flex:1; }
.w > .content { width:450px; display:flex; flex-direction:column; }
.w > .content > div { }
.w > .content > .stage { position:relative; flex:1; display:flex; justify-content:center; align-items:center; }
.w > .content > .stage > .w { position:relative; width:350px; height:350px; border-radius:50%; background:#fff; display:flex; justify-content:center; align-items:center; border: 1px solid #000; overflow:hidden; --bg:#fff; }
.w > .content > .stage > .w:after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:200px; height:200px; border-radius:50%; background:#fff; border: 1px solid #000; background:var(--bg) center no-repeat; background-size:80px auto; }
.w > .content > .stage > .w > div { position:absolute; top:50%; left:0; transform:translateX(-50%); width:100%; height:100%; transform-origin:50% 0%; transform: rotate(var(--deg)); clip-path: polygon(50% 0%, 23% 100%, 77% 100%); padding-left:20px; padding-top:15px; overflow:hidden; }
.w > .content > .stage > .w > div.on { background:#FF0000; }
.w > .content > .stage > .w > div > span { position:absolute; left:50%; top:120px; width:60px; transform:translateX(-50%); transform:rotate( 180deg ); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px  1px 0 #000,1px  1px 0 #000; font-weight:bold; font-size:30px; color:#fff; margin-left:-30px; text-align:center; }
.w > .content > .stage > .w > i { position:absolute; width:2px; height:100%; background:#ccc; transform:rotate( var(--deg) ); }

.w > .content > .info { height:120px; display:flex; justify-content:center; align-items:center; }
.w > .content > .info > #infotext { width:100%; height:90px; display:flex; justify-content:center; align-items:center; font-size:20px; }
.w > .content > .info > #infotext.win1 { animation: win1 200ms steps(2, end) infinite; }
.w > .content > .controller { height:120px; display:flex; justify-content:center; align-items:center; gap:20px; }
.w > .content > .controller > button { width:100px; height:100px; border-radius:50%; background:#ccc; color:#fff; font-weight:bold; font-size:20px; }
.w > .content > .controller > button.on { background:#ff0000; }
.userbutton.on { background:#ff0000; }
.w > .setting { display:flex; justify-content:center; align-items:center; flex-direction:column; }
.w > .setting > button { width:100px; height:100px; border-radius:50%; background:#ff0000; color:#fff; font-weight:bold; font-size:20px; }
.w > .setting > button.on { background:#ccc; }


@keyframes win1 {
  0% {
	color:#fff;
	background: linear-gradient(45deg, orange 0%, yellow 100%);
	box-shadow: 0 0 20px orange;
  }
  100% {
	background: linear-gradient(45deg, grey 0%, lightgrey 100%);
	box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);
  }
}