.wheel-wrap_v1{
  position:relative;
  width:min(720px,88vw);
  aspect-ratio:1;
  margin:0 auto 28px;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 26px 50px rgba(0,0,0,.28));
}

.wheel-wrap{
  position:relative;
  width:min(720px,88vw);
  aspect-ratio:1;
  margin:0 auto 28px;
  display:grid;
  place-items:center;
}

.pointer{
  position:absolute;
  top:-8px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:24px solid transparent;
  border-right:24px solid transparent;
  border-top:44px solid #fff;
  z-index:6;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));
}

.pointer::after{
  content:"";
  position:absolute;
  left:-15px;
  top:-39px;
  width:0;
  height:0;
  border-left:15px solid transparent;
  border-right:15px solid transparent;
  border-top:28px solid #c8ac56;
}

#wheel{
  position:absolute;
  inset:0;
  border-radius:50%;
  overflow:hidden;
  border:14px solid #05070a;
  background:conic-gradient(
	#f2cb63 0deg 36deg,
	#bca25a 36deg 72deg,
	#ff3571 72deg 108deg,
	#ffc000 108deg 144deg,
	#3fc2bd 144deg 180deg,
	#7b31f9 180deg 216deg,
	#ff8600 216deg 252deg,
	#1da0e2 252deg 288deg,
	#f6258d 288deg 324deg,
	#79d98d 324deg 360deg
  );
  transition:transform 15s cubic-bezier(.08,.82,.18,1);
}

#wheel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 55%);
  pointer-events:none;
}

#wheel::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:78px;
  height:78px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#05070a;
  border:12px solid #c8ac56;
  box-shadow:0 0 0 10px rgba(255,255,255,.12);
  z-index:4;
}

#labelsLayer{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  transition:transform 15s cubic-bezier(.08,.82,.18,1);
}

.segment-label2{
  position:absolute;
  left:0;
  top:0;
  width:150px;
  text-align:center;
  color:#fff;
  font-weight:900;
  font-size:clamp(14px,2vw,20px);
  text-transform:uppercase;
  letter-spacing:.02em;
  white-space:nowrap;
  text-shadow:0 3px 7px rgba(0,0,0,.35);
  transform-origin:center center;
}

.segment-label{
  position:absolute;
  left:0;
  top:0;
  width:150px;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  font-weight:900;
  font-size:clamp(12px,1.8vw,18px);
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:.02em;
  white-space:normal;
  word-break:break-word;
  text-shadow:0 3px 7px rgba(0,0,0,.35);
  transform-origin:center center;
  padding:4px 6px;
}

.controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

button{
  appearance:none;
  border:0;
  cursor:pointer;
  padding:18px 44px;
  border-radius:999px;
  background:linear-gradient(135deg,#c2a550,#e8c96b,#c2a550);
  color:#09111b;
  font-size:20px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  box-shadow:0 16px 30px rgba(0,0,0,.24);
  transition:transform .18s ease,opacity .18s ease,filter .18s ease;
}

button:hover{transform:translateY(-2px);filter:brightness(1.03)}
button:disabled{opacity:.6;cursor:not-allowed;transform:none}

#result{
  min-height:36px;
}

.confetti{
  position:fixed;
  top:-20px;
  width:10px;
  height:16px;
  opacity:.95;
  animation:fall linear forwards;
  z-index:1;
}

.pnl_claim { margin-top:100px; }
.font80 {font-size:80%;}
.voorwaarden { padding-left:35px; margin:30px 0px 60px 0px; }
.voorwaarden li { list-style-position:outside; padding-left:10px; margin-bottom:0px; }

@keyframes fall{
  to{transform:translateY(110vh) rotate(720deg);opacity:0}
}

@media(max-width:600px){
  .wheel-wrap{width:92vw; left:-8vw;}
  .segment-label{width:110px;font-size:12px}
  button{font-size:18px;padding:16px 32px}
}