/* The SVG pointer is a single short triangle, with its tip inside the ring. */
.pointer{
  z-index:15;
  width:26px;
  height:22px;
  transform:translate(-50%,-50%) rotate(180deg) translateY(-140px);
  filter:drop-shadow(0 3px 5px #000) drop-shadow(0 0 3px #f6fff2aa);
}

.pointer:before,
.pointer:after{
  display:none;
  content:none;
}
.pointer path{fill:#fff;}
.wheel:after{
  background:conic-gradient(from calc(180deg - var(--half)*1deg),#a6ff00 0deg calc(var(--chance)*3.6deg),#202720 calc(var(--chance)*3.6deg) 360deg);
}
.wheel.no-chance:after{background:#202720;}
.wheel.spinning:after{filter:none;}

/* A loss is revealed only after the arrow has stopped. */
.loss-stamp{
  position:absolute;
  z-index:11;
  top:calc(50% + 42px);
  left:50%;
  padding:6px 11px 5px;
  border:1px solid #ff745d91;
  border-radius:5px;
  color:#ff9a83;
  background:#261713f2;
  box-shadow:0 0 18px #ff4f332c,inset 0 1px #ffd0bc12;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.8px;
  white-space:nowrap;
  pointer-events:none;
  transform:translateX(-50%);
}
.loss-stamp[hidden]{display:none!important;}
.wheel.loss-reveal{animation:loss-wheel-impact .7s ease-out both;}
.wheel.loss-reveal .loss-stamp{animation:loss-stamp-appear .38s cubic-bezier(.17,.84,.26,1) both;}
#target-panel.loss-reveal{animation:loss-target-dim 1.05s ease-out both;}
@keyframes loss-wheel-impact{
  0%{transform:translateX(0);box-shadow:0 0 0 0 #ff5b3d00;}
  14%{transform:translateX(-3px);box-shadow:0 0 0 4px #ff5b3d54,0 0 25px #ff4d324d;}
  31%{transform:translateX(3px);box-shadow:0 0 0 2px #ff5b3d42,0 0 18px #ff4d3233;}
  48%{transform:translateX(-1px);box-shadow:0 0 0 1px #ff5b3d28;}
  100%{transform:translateX(0);box-shadow:0 0 0 0 #ff5b3d00;}
}
@keyframes loss-stamp-appear{
  0%{opacity:0;transform:translate(-50%,8px) scale(.84);}
  65%{opacity:1;transform:translate(-50%,-2px) scale(1.04);}
  100%{opacity:1;transform:translate(-50%,0) scale(1);}
}
@keyframes loss-target-dim{
  0%,100%{filter:brightness(1);}
  30%{filter:brightness(.52) saturate(.6);}
}
@media(prefers-reduced-motion:reduce){
  .wheel.loss-reveal,.wheel.loss-reveal .loss-stamp,#target-panel.loss-reveal{animation:none;}
}