.wheel{width:300px;height:300px;isolation:isolate;background:#0e120e;filter:drop-shadow(0 17px 27px #000c)}.wheel:before{display:block;z-index:0;inset:2px;border:1px solid #3b4438;border-radius:50%;background:repeating-conic-gradient(from -1deg,#697263 0 .6deg,transparent .8deg 5deg);-webkit-mask:radial-gradient(circle,transparent 0 85%,#000 86%);mask:radial-gradient(circle,transparent 0 85%,#000 86%);content:''}.wheel:after{z-index:2;inset:19px;border-radius:50%;background:conic-gradient(from calc(180deg - var(--half)*1deg),#d4ff67 0deg,#a6ff00 calc(var(--chance)*3.6deg - 1.2deg),#5caf09 calc(var(--chance)*3.6deg),#202720 calc(var(--chance)*3.6deg + .9deg),#171d17 360deg);-webkit-mask:radial-gradient(circle,transparent 0 56%,#000 57% 84%,transparent 85%);mask:radial-gradient(circle,transparent 0 56%,#000 57% 84%,transparent 85%);box-shadow:inset 0 0 0 1px #3b4938}.wheel-fill{display:none}.wheel-center{z-index:7;width:142px;height:88px;border:0;background:transparent;box-shadow:none}.wheel-center:before{display:none}.wheel-center .chevrons{display:none}.wheel-center>*{position:relative;z-index:1}.wheel-center strong{margin:0;color:#f0f8e9;font-size:27px;letter-spacing:-1.2px;text-shadow:0 2px 10px #000,0 0 10px #0b1309}.wheel-center small{margin-top:4px;color:#d7e3d0;font-size:7px;letter-spacing:1.5px;text-shadow:0 1px 4px #000}.ticks{position:absolute;z-index:6;inset:0;pointer-events:none}.ticks span{position:absolute;color:#a9b3a5;font-size:8px;font-weight:900;letter-spacing:.2px;text-shadow:0 1px 3px #000}.ticks .deg-0{top:11px;left:50%;transform:translateX(-50%)}.ticks .deg-45{top:29px;right:28px}.ticks .deg-90{top:calc(50% - 4px);right:7px}.ticks .deg-135{right:25px;bottom:29px}.ticks .deg-180{bottom:11px;left:50%;transform:translateX(-50%)}.ticks .deg-225{bottom:29px;left:25px}.ticks .deg-270{top:calc(50% - 4px);left:7px}.ticks .deg-315{top:29px;left:28px}.pointer{z-index:10;filter:drop-shadow(0 3px 4px #000) drop-shadow(0 0 3px #fff8)}.zone-label{margin-top:8px;color:#baff30;font-size:9px;letter-spacing:1.8px}.wheel.spinning:after{filter:brightness(1.08)}@media(max-width:480px){.wheel{width:286px;height:286px}.ticks span{font-size:7px}.ticks .deg-90{right:5px}.ticks .deg-270{left:5px}}