:root{--wheel-size:240px;--wheel-slice-spacing:50px;--wheel-border-size:5px;--wheel-color:#3b3b3b;--neutral-color:white;--PI:3.14159;--nb-item:0;--item-nb:0;--selected-item:0;--nb-turn:5;--spinning-duration:4s;--reset-duration:.25s;--wheel-item-color:#cc1512}.wheel-container{box-sizing:content-box;width:calc(var(--wheel-size) + 2*var(--wheel-border-size));height:calc(var(--wheel-size) + 2*var(--wheel-border-size));background-color:var(--neutral-color);border:solid var(--wheel-color)3px;-webkit-user-select:none;user-select:none;border-radius:50%;margin:auto;padding:3px;display:block;position:relative;transform:rotate(-90deg)}.wheel-container:before,.wheel-container:after{content:"";z-index:2;border:20px solid #0000;border-left-width:0;width:0;height:0;display:block;position:absolute;top:50%;transform:translateY(-50%)}.wheel-container:before{border-right-color:var(--wheel-color);right:0}.wheel-container:after{border-right-color:var(--neutral-color);right:-5px}.wheel{box-sizing:content-box;width:var(--wheel-size);height:var(--wheel-size);border:solid var(--wheel-color)var(--wheel-border-size);background-color:var(--wheel-color);background:radial-gradient(circle,var(--wheel-item-color)0%,#0e0e0e 100%);transition:transform var(--reset-duration);cursor:pointer;border-radius:50%;margin:auto;display:block;position:relative;overflow:hidden;transform:rotate(0)}.wheel.spinning{transition:transform var(--spinning-duration);transform:rotate(calc(var(--nb-turn)*360deg + (-360deg*var(--selected-item)/var(--nb-item,1))))}.wheel.resetting{transition:none}.wheel:after{content:"";background-color:var(--neutral-color);z-index:2;border-radius:50%;width:25px;height:25px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.wheel-item{box-sizing:border-box;transform-origin:0;width:50%;transform:translateY(-50%)rotate(calc(var(--item-nb)*(360deg/var(--nb-item,1))));color:var(--neutral-color);text-align:right;white-space:nowrap;padding:0 50px;display:block;position:absolute;top:50%;left:50%}.wheel-item:before{content:" ";box-sizing:border-box;z-index:-1;opacity:.1;--slice-max-width:calc(var(--PI)*var(--wheel-size) + var(--wheel-size)/1);--slice-width:calc((var(--slice-max-width)/var(--nb-item)) - var(--wheel-slice-spacing));border:solid transparent calc(var(--slice-width)/2);border-left:0 solid #0000;border-right:solid var(--neutral-color)calc(var(--wheel-size)/2);width:0;height:0;padding-left:0;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}