* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #192627;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.widget {
  width: 500px;
  padding: 30px 24px 36px;
  text-align: center;
  background: transparent;
  color: #fff;
  position: relative;
}

h1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.3px;
  margin: 0 0 20px;
  background: linear-gradient(135deg, #FFD93D, #FF9F43);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: uppercase;
}

.step.hidden { display: none; }

/* Yükleme spinner'ı — "Yükleniyor" yazısı yerine sade bir dönen halka */
.spinner {
  width: 46px;
  height: 46px;
  margin: 90px auto;
  border: 4px solid rgba(212, 167, 44, 0.18);
  border-top-color: #D4A72C;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.error {
  color: #ff8080;
  font-size: 14px;
  line-height: 1.5;
  padding: 20px 8px;
}

button {
  position: relative;
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(255, 217, 61, 0.5);
  border-radius: 12px;
  background: linear-gradient(135deg, #FFE9A8, #D4A72C 55%, #9c7a1c);
  color: #14120a;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(212, 167, 44, 0.4), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(212, 167, 44, 0.55), inset 0 1px 0 rgba(255,255,255,0.5);
}

button:active:not(:disabled) {
  transform: translateY(0);
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

/* Durum (cooldown/kısıtlama) kontrol edilirken butonda küçük spinner */
#spinBtn.loading {
  opacity: 0.9;
  color: transparent;
  pointer-events: none;
}

#spinBtn.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 3px solid rgba(20, 18, 10, 0.3);
  border-top-color: #14120a;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.wheel-wrap {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 26px auto 24px;
}

/* Eski asimetrik conic "light-rays" arka planda blotchy gölge yapıyordu — kaldırıldı. */
.light-rays {
  display: none;
}

@keyframes rayRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Tek, eşit, yumuşak altın hale — çarkın etrafını simetrik sarar, leke yapmaz */
.wheel-glow {
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(212, 167, 44, 0.28) 0%,
    rgba(212, 167, 44, 0.10) 48%,
    transparent 70%
  );
  filter: blur(26px);
  animation: pulse 4.5s ease-in-out infinite;
  z-index: 0;
}

.wheel-sheen {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 214, 120, 0.05) 8deg,
    rgba(255, 224, 160, 0.4) 26deg,
    rgba(255, 246, 220, 0.65) 34deg,
    rgba(255, 224, 160, 0.4) 42deg,
    rgba(255, 214, 120, 0.05) 60deg,
    transparent 72deg,
    transparent 360deg
  );
  mix-blend-mode: screen;
  opacity: 0.85;
  z-index: 2;
  pointer-events: none;
  animation: rayRotate 11s linear infinite;
}

.wheel-gloss {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, rgba(255,255,255,0.4), rgba(255,255,255,0.06) 30%, transparent 55%);
  mix-blend-mode: screen;
  z-index: 1;
  pointer-events: none;
}

@keyframes pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.025); }
}

.wheel-glow.active {
  animation: pulseFast 0.5s ease-in-out infinite;
}

@keyframes pulseFast {
  0%, 100% { opacity: 0.7; transform: scale(1.02); }
  50% { opacity: 1; transform: scale(1.12); }
}

#spinBtn.spinning {
  animation: btnPulse 0.6s ease-in-out infinite;
}

@keyframes btnPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

.pointer {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 26px solid #FFD93D;
  z-index: 3;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.5));
  transform-origin: top center;
}

.pointer.ticking {
  animation: tick 0.11s linear infinite;
}

@keyframes tick {
  0%, 100% { transform: translateX(-50%) rotate(-9deg); }
  50% { transform: translateX(-50%) rotate(9deg); }
}

.pointer::after {
  content: "";
  position: absolute;
  top: -30px;
  left: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FFD93D;
  box-shadow: 0 0 10px rgba(255, 217, 61, 0.8);
}

.wheel-rotor {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.wheel-rotor.idle-spin {
  animation: idleRotate 26s linear infinite;
}

@keyframes idleRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#wheelCanvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 8px solid transparent;
  background-image:
    linear-gradient(#0f1626, #0f1626),
    linear-gradient(135deg, #FFD93D, #FF9F43, #FFD93D);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.4),
    0 10px 40px rgba(0,0,0,0.5),
    inset 0 0 36px rgba(0,0,0,0.55),
    inset 0 3px 8px rgba(255,255,255,0.08);
}

.hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 104px;
  height: 104px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px #1a1a2e, 0 0 0 6px rgba(212, 167, 44, 0.6), 0 4px 14px rgba(0,0,0,0.5);
  z-index: 2;
}

.hub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cooldown {
  font-size: 13px;
  color: #a9adc1;
  margin-top: 14px;
}

.modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 5, 12, 0.78);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  opacity: 0;
  animation: modalFadeIn 0.3s ease forwards;
}

.modal.hidden {
  display: none !important;
}

@keyframes modalFadeIn {
  to { opacity: 1; }
}

#confettiCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.modal-card {
  position: relative;
  width: 84%;
  padding: 30px 24px 24px;
  text-align: center;
  background: linear-gradient(160deg, #1a1a2e, #0b0d17);
  border: 1px solid rgba(255, 217, 61, 0.4);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 50px rgba(255, 217, 61, 0.15);
  transform: scale(0.6);
  opacity: 0;
  animation: cardPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}

@keyframes cardPopIn {
  to { transform: scale(1); opacity: 1; }
}

.burst {
  position: absolute;
  top: 62px;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 217, 61, 0.4), transparent 70%);
  z-index: 0;
  animation: burstPulse 1.8s ease-out infinite;
}

@keyframes burstPulse {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.5); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

.prize-icon {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFEC8B, #FFD93D 55%, #E8A317 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px rgba(255, 217, 61, 0.2), 0 8px 24px rgba(0,0,0,0.4);
  animation: iconBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes iconBounce {
  0% { transform: scale(0); }
  70% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.result-title {
  position: relative;
  font-size: 26px;
  font-weight: 800;
  color: #FFD93D;
  margin: 0 0 8px;
  text-shadow: 0 0 20px rgba(255, 217, 61, 0.5);
}

.result-text {
  position: relative;
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 4px;
}

.game-name {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  color: #a9adc1;
  margin: 0 0 16px;
}

.game-name.hidden {
  display: none;
}

.game-link {
  position: relative;
  display: block;
  width: 100%;
  padding: 14px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4ADE80, #22C55E);
  color: #062b13;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.35);
}

.game-link.hidden {
  display: none;
}

.secondary-btn {
  position: relative;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  background: transparent;
  color: #a9adc1;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: none;
}

.secondary-btn:hover {
  background: rgba(255,255,255,0.06);
  transform: none;
  box-shadow: none;
}