.wrap { position:relative; display:grid; place-items:center; gap:16px; user-select:none; }

.stage {
  position:relative; border-radius:50%;
  box-shadow:
    0 24px 60px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.04) inset;
  background: radial-gradient(120% 120% at 50% 0%, #0f172a 0%, #0b1120 60%, #0a0f1e 100%);
}
.canvas { display:block; border-radius:50%; }

.svg { position:absolute; inset:0; border-radius:50%; pointer-events:none; }
.label {
  font: 700 14px/1 ui-sans-serif, system-ui, -apple-system, 'Cairo', Segoe UI, Roboto, Arial;
  fill: #fff;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.55);
  stroke-width: 3px;
  letter-spacing: .25px;
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
}

/* 🔥 كونفيتي فوق الكل */
.confetti {
  position: fixed; inset: 0; pointer-events: none;
  z-index: 1000; /* أعلى من المودال (اللي z-index: 50) */
}

/* المؤشر */
.pointerTop, .pointerBottom {
  position:absolute; width:0; height:0;
  border-left:16px solid transparent; border-right:16px solid transparent;
  filter: drop-shadow(0 6px 16px rgba(225,29,72,.45));
  z-index: 5;
}
.pointerTop   { top:20px; border-top:26px solid #e11d48; transform-origin:50% 100%; }
.pointerBottom{ bottom:8px; border-top:26px solid #e11d48; transform-origin:50% 100%; }
.pointerBuzz { animation:buzz .9s ease-in-out infinite; }
@keyframes buzz { 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(1.2px)} }

/* زرار */
.btn {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:34%; aspect-ratio:1/1; border-radius:999px; border:none; cursor:pointer;
  font-weight:900; letter-spacing:.12em; color:#0b1020;
  background: radial-gradient(70% 100% at 50% 0%, #ffffff 0%, #f1f5ff 40%, #e3e8ff 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 -10px 20px rgba(0,0,0,.08) inset,
    0 16px 30px rgba(0,0,0,.18);
  transition:transform .12s ease, box-shadow .12s ease, filter .25s ease;
  z-index: 3;
}
.btn:hover { transform:translate(-50%,-50%) scale(1.03); filter:brightness(1.05); }
.btn:active { transform:translate(-50%,-50%) scale(.98); }
.btnDisabled, .btn:disabled { opacity:.65; cursor:not-allowed; }

.result {
  position:absolute; bottom:12px; opacity:0; transform:translateY(8px) scale(.98);
  transition:all .35s cubic-bezier(.2,.8,.2,1); text-align:center; color:#fff; pointer-events:none;
}
.result.show { opacity:1; transform:translateY(0) scale(1); }
.badge {
  display:inline-block; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#22d3ee,#8b5cf6);
  padding:6px 12px; border-radius:999px; box-shadow:0 6px 18px rgba(139,92,246,.35); margin-bottom:8px;
}
.winText { font-size:16px; font-weight:800; text-shadow:0 2px 8px rgba(0,0,0,.35); }

/* مودال */
.modalOverlay{
  position:fixed; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px); z-index:50;
}
.modal{
  width:min(92vw,520px);
  background:linear-gradient(180deg,#0f172a,#0b1224);
  color:#e5e7eb; border:1px solid rgba(255,255,255,.08); border-radius:16px;
  padding:20px; box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.modalTitle{ margin:0 0 6px; font-size:20px; font-weight:800; color:#fff;}
.modalText{ margin:0 0 14px; opacity:.95;}
.prizeName{ color:#fff; font-weight:900; }
.giftRow{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.05);
  padding:10px 12px; border-radius:12px; margin-bottom:14px;
}
.giftId{ font-size:18px; letter-spacing:.5px;}
.copyBtn{
  margin-inline-start:auto; border:0; border-radius:8px; padding:8px 12px;
  cursor:pointer; background:#1f2937; color:#e5e7eb;
}
.copyBtn:hover{ filter:brightness(1.08);}
.whatsappBtn{
  display:inline-block; text-align:center; width:100%; padding:12px 16px; border-radius:12px;
  background:#25D366; color:#0b1020; font-weight:900; letter-spacing:.04em; text-decoration:none;
  box-shadow:0 10px 24px rgba(37,211,102,.35);
}
.whatsappBtn:hover{ filter:brightness(1.05);}
.closeBtn{
  display:inline-block; width:100%; margin-top:10px; padding:10px 14px; border-radius:10px;
  border:1px solid rgba(255,255,255,.1); background:transparent; color:#e5e7eb; cursor:pointer;
}
.closeBtn:hover{ background:rgba(255,255,255,.06);}