/* ---------- Basis ---------- */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Poppins',sans-serif;
  min-height:100vh;
  padding:2rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#fffff 0%,#ffffff 100%);
}

/* ---------- Rad + Pijl ---------- */
.wheel-container{position:relative;margin-bottom:3rem}
.wheel{
  width:400px;height:400px;border:8px solid #fff;border-radius:50%;
  background:#fff;box-shadow:0 20px 40px rgba(0,0,0,.35);
  transition:transform 4s cubic-bezier(.25,.46,.45,.94);
}
.wheel-pointer{
  position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  width:400;height:400;
  border-left:25px solid transparent;
  border-right:25px solid transparent;
  border-top:38px solid #ff7043;   /* ▼ wijst naar midden */
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));
  z-index:10;
}
.sector-text{
  font:600 14px/1 'Poppins',sans-serif;
  text-anchor:middle;dominant-baseline:middle;pointer-events:none;
}

/* ---------- Knop ---------- */
.spin-button{
  padding:1.2rem 2.5rem;font-size:24px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;border:none;border-radius:50px;cursor:pointer;
  color:#fff;background:linear-gradient(45deg,#2786E8,#2786E8);
  box-shadow:0 10px 30px rgba(0,0,0,.25);transition:.3s;
}
.spin-button:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.spin-button:active{transform:translateY(-1px)}
.spin-button:disabled{opacity:.6;cursor:not-allowed}

/* ---------- Modal ---------- */
.modal{
  display:none;position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.4);backdrop-filter:blur(4px);
  justify-content:center;align-items:center;padding:1rem;
}
.modal-content{
  background:#fff;max-width:480px;width:100%;
  padding:2rem 2.5rem;border-radius:1.25rem;text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.3);animation:fadeIn .35s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:translateY(0)}}
.modal p{font-size:1.2rem;margin-bottom:1.5rem;color:#333}
.modal-close{
  border:none;border-radius:25px;padding:.9rem 2rem;font-weight:600;cursor:pointer;
  background:#667eea;color:#fff;transition:.25s;
}
.modal-close:hover{background:#5664d4}

/* ---------- Responsive ---------- */
@media(max-width:480px){
  .wheel{width:300px;height:300px}
  .sector-text{font-size:12px}
  .spin-button{font-size:20px;padding:1rem 2rem}
}