/* オーバーレイ */
.cf7-roulette-overlay { position: fixed; inset: 0; display: none; z-index: 9999; }
.cf7-roulette-overlay.is-open { display: block; }
.cf7-roulette-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.cf7-roulette-panel {
  position: relative; margin: 8vh auto 0; width: min(92vw, 440px); background: #fff;
  border-radius: 12px; padding: 24px 24px 28px; box-shadow: 0 10px 30px rgba(0,0,0,.25); text-align: center;
}
.cf7-roulette-close { position: absolute; right: 8px; top: 6px; border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; }

/* ルーレット本体 */
.cf7-roulette-wheel {
  --size: 300px;
  width: var(--size); height: var(--size); margin: 0 auto 14px; border-radius: 50%;
  position: relative; will-change: transform; transform: translateZ(0); /* iOSのGPU促進 */
  background: conic-gradient(
    #f44336 0deg 45deg, #e91e63 45deg 90deg, #9c27b0 90deg 135deg, #3f51b5 135deg 180deg,
    #2196f3 180deg 225deg, #4caf50 225deg 270deg, #ff9800 270deg 315deg, #795548 315deg 360deg
  );
  border: 8px solid #fff; box-shadow: 0 0 0 2px #eee inset, 0 6px 18px rgba(0,0,0,.25);
}
.cf7-roulette-wheel.is-loading { animation: cf7r-spin 1.1s linear infinite; }
@keyframes cf7r-spin { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

.cf7-roulette-pointer {
  width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent;
  border-bottom: 22px solid #222; margin: 0 auto 8px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
}
.cf7-roulette-label {
  position: absolute; left: 50%; top: 50%; transform-origin: center;
  width: 50%; text-align: right; padding-right: 12px; font: 700 20px/1.2 system-ui, sans-serif; color: #fff;
  transform: rotate(calc(45deg * var(--i))) translate(-50%, -50%) rotate(calc(-45deg * var(--i)));
}
.cf7-roulette-msg { font-size: 16px; margin: 8px 0 0; }