/* =============================================================
   Jet Stream — ルーレットギミック CSS
   design: slot | wheel | card
   ============================================================= */

/* ── CSS 変数（ショートコード属性でオーバーライド可能） ── */
.js-roulette {
  --jsr-bg:       var(--js-color-white, #fff);
  --jsr-btn:      var(--js-color-accent, #F59E0B);
  --jsr-btn-text: var(--js-color-dark, #0F172A);
  --jsr-font:     var(--js-font-base, sans-serif);
}

/* ── テーマ非依存リセット ── */
.js-roulette,
.js-roulette * {
  box-sizing: border-box;
}

/* ── ラッパー共通 ── */
.js-roulette {
  box-sizing: border-box;
  max-width: 560px;
  margin-inline: auto;
  padding: var(--js-space-lg, 2.5rem) var(--js-space-md, 1.5rem);
  background: var(--jsr-bg);
  border-radius: var(--js-radius-lg, 16px);
  box-shadow: var(--js-shadow-lg, 0 10px 15px rgba(0,0,0,.10));
  font-family: var(--jsr-font);
  text-align: center;
}

/* wheel タイプは少し広めに */
.js-roulette--wheel {
  max-width: 420px;
}

/* ── タイトル ── */
.js-roulette__title {
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  font-weight: 700;
  color: var(--js-color-primary, #1E3A8A);
  margin: 0 0 1.25rem;
  line-height: 1.4;
}

/* ── フォームエリア ── */
.js-roulette__lead {
  font-size: 0.9rem;
  color: var(--js-color-gray, #64748B);
  margin: 0 0 1rem;
}

.js-roulette__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}

@media (min-width: 480px) {
  .js-roulette__form {
    flex-direction: row;
  }
}

.js-roulette__email {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid var(--js-color-border, #E2E8F0);
  border-radius: var(--js-radius, 8px);
  font-size: 1rem;
  font-family: inherit;
  color: var(--js-color-dark, #0F172A);
  background: var(--js-color-white, #fff);
  transition: border-color var(--js-transition, 0.25s ease);
  outline: none;
}

.js-roulette__email:focus {
  border-color: var(--js-color-primary, #1E3A8A);
}

/* ── ボタン共通 ── */
.js-roulette__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--js-radius, 8px);
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--js-transition, 0.25s ease),
              transform var(--js-transition, 0.25s ease),
              box-shadow var(--js-transition, 0.25s ease);
  white-space: nowrap;
}

.js-roulette__btn:active {
  transform: translateY(1px);
}

/* 「回す」ボタン — CSS変数で色を制御 */
.js-roulette__btn--spin {
  background: var(--jsr-btn);
  color: var(--jsr-btn-text);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

.js-roulette__btn--spin:hover:not(:disabled) {
  filter: brightness(0.92);
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
  transform: translateY(-1px);
}

.js-roulette__btn--spin:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* 「もう一度」ボタン */
.js-roulette__btn--retry {
  background: var(--js-color-primary, #1E3A8A);
  color: var(--js-color-white, #fff);
  margin-top: 1rem;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.3);
}

.js-roulette__btn--retry:hover {
  background: var(--js-color-primary-dark, #152a63);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(30, 58, 138, 0.4);
}

/* ── エラーメッセージ ── */
.js-roulette__error {
  color: #dc2626;
  font-size: 0.875rem;
  margin: 0.5rem 0 0;
}

/* ── ステージ共通 ── */
.js-roulette__stage {
  margin-top: 1.5rem;
}

.js-roulette__spinning-msg {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  color: var(--js-color-gray, #64748B);
  animation: jsr-pulse 1s ease-in-out infinite alternate;
}

@keyframes jsr-pulse {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}

/* =============================================================
   design: slot（横スクロールスロット）
   ============================================================= */
.js-roulette--slot .js-roulette__viewport {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 左右の矢印インジケーター */
.js-roulette__arrow {
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--js-color-primary, #1E3A8A);
  animation: jsr-blink 0.8s ease-in-out infinite alternate;
  line-height: 1;
}

@keyframes jsr-blink {
  from { opacity: 0.3; }
  to   { opacity: 1; }
}

/* スロットウィンドウ（マスク） */
.js-roulette__window {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 100px;
  border-radius: var(--js-radius, 8px);
  border: 3px solid var(--js-color-primary, #1E3A8A);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.8),
              var(--js-shadow-md, 0 4px 6px rgba(0,0,0,.07));

  /* 両端フェード */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 18%,
    black 82%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 18%,
    black 82%,
    transparent 100%
  );
}

/* 中央ハイライト（選択枠） */
.js-roulette__window::before,
.js-roulette__window::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--jsr-btn, #F59E0B);
  z-index: 2;
  pointer-events: none;
}

.js-roulette__window::before {
  left: calc(50% - 84px);
}

.js-roulette__window::after {
  left: calc(50% + 81px);
}

/* スロットバンド */
.js-roulette__band {
  display: flex;
  align-items: center;
  height: 100%;
  will-change: transform;
}

/* スロットアイテム */
.js-roulette__slot-item {
  flex-shrink: 0;
  width: 160px;
  height: 84px;
  margin-inline: 4px;
  border-radius: var(--js-radius, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: clamp(0.8rem, 2.5vw, 1rem);
  color: var(--js-color-white, #fff);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  box-shadow: var(--js-shadow-sm, 0 1px 3px rgba(0,0,0,.10));
}

.js-roulette__slot-item span {
  display: block;
  word-break: break-all;
  text-align: center;
  padding: 0 0.5rem;
  line-height: 1.3;
}

/* 8色デフォルトパレット */
.js-roulette__slot-item--c1 { background: linear-gradient(135deg, #1E3A8A, #3b5fc0); }
.js-roulette__slot-item--c2 { background: linear-gradient(135deg, #F59E0B, #fbbf24); }
.js-roulette__slot-item--c3 { background: linear-gradient(135deg, #10b981, #34d399); }
.js-roulette__slot-item--c4 { background: linear-gradient(135deg, #ef4444, #f87171); }
.js-roulette__slot-item--c5 { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.js-roulette__slot-item--c6 { background: linear-gradient(135deg, #ec4899, #f472b6); }
.js-roulette__slot-item--c7 { background: linear-gradient(135deg, #06b6d4, #22d3ee); }
.js-roulette__slot-item--c8 { background: linear-gradient(135deg, #f97316, #fb923c); }

/* =============================================================
   design: wheel（SVG 円形ルーレット）
   ============================================================= */
.js-roulette__wheel-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

/* ポインタ（上部固定▼） */
.js-roulette__wheel-pointer {
  font-size: 2rem;
  color: var(--js-color-primary, #1E3A8A);
  line-height: 1;
  margin-bottom: -0.25rem;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 4px rgba(0,0,0,0.18);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
}

/* 回転ディスク */
.js-roulette__wheel-disc {
  border-radius: 50%;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  will-change: transform;
  border: 4px solid var(--js-color-primary, #1E3A8A);
}

.js-roulette__wheel-svg {
  display: block;
  border-radius: 50%;
}

/* =============================================================
   design: card（カードフリップ）
   ============================================================= */
.js-roulette__cards-wrap {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 0;
  flex-wrap: wrap;
}

/* カード外枠 */
.js-roulette__card {
  perspective: 600px;
  width: 100px;
  height: 140px;
  cursor: default;
  outline: none;
  border-radius: 10px;
}

.js-roulette__card--selectable {
  cursor: pointer;
}

.js-roulette__card--selectable:hover .js-roulette__card-inner,
.js-roulette__card--selectable:focus .js-roulette__card-inner {
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

/* カード内側（3D フリップ軸） */
.js-roulette__card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s ease,
              translateY 0.25s ease;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* フリップ完了 */
.js-roulette__card--flipped .js-roulette__card-inner {
  transform: rotateY(180deg);
}

/* 裏面・表面 共通 */
.js-roulette__card-back,
.js-roulette__card-front {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 裏面 */
.js-roulette__card-back {
  background: linear-gradient(135deg, #1E3A8A 0%, #3b5fc0 50%, #1E3A8A 100%);
  border: 2px solid rgba(255,255,255,0.2);
}

.js-roulette__card-back-pattern {
  font-size: 2.5rem;
  color: rgba(255,255,255,0.25);
  user-select: none;
}

/* 表面 */
.js-roulette__card-front {
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  border: 2px solid var(--js-color-border, #E2E8F0);
  transform: rotateY(180deg);
}

.js-roulette__card-front-label {
  font-size: clamp(0.75rem, 2.5vw, 0.9rem);
  font-weight: 700;
  color: var(--js-color-primary, #1E3A8A);
  text-align: center;
  padding: 0.5rem;
  word-break: break-all;
  line-height: 1.3;
}

/* 当選カードのハイライト */
.js-roulette__card--winner.js-roulette__card--flipped .js-roulette__card-front {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-color: #F59E0B;
}

.js-roulette__card--winner.js-roulette__card--flipped .js-roulette__card-front-label {
  color: #92400e;
}

/* シャッフルアニメーション */
.js-roulette__card--shuffle {
  animation: jsr-card-shuffle 0.5s ease-out;
}

@keyframes jsr-card-shuffle {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-12px) rotate(-3deg); }
  50%  { transform: translateY(-6px) rotate(2deg); }
  75%  { transform: translateY(-10px) rotate(-1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* =============================================================
   結果エリア（共通）
   ============================================================= */
.js-roulette__result {
  margin-top: 1.5rem;
}

.js-roulette__result-badge {
  position: relative;
  overflow: visible;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1.25rem 2rem;
  border-radius: var(--js-radius-lg, 16px);
  background: linear-gradient(135deg, var(--js-color-primary, #1E3A8A), var(--js-color-primary-light, #3b5fc0));
  color: var(--js-color-white, #fff);
  box-shadow: var(--js-shadow-lg, 0 10px 15px rgba(0,0,0,.10));
  transform: scale(0.6);
  opacity: 0;
  transition: none;
}

.js-roulette__result-badge--show {
  animation: jsr-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.js-roulette__result-badge--blink {
  animation: jsr-flash 0.55s ease-in-out 3 forwards;
}

@keyframes jsr-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes jsr-flash {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    background: linear-gradient(135deg, var(--js-color-primary, #1E3A8A), var(--js-color-primary-light, #3b5fc0));
  }
  50% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 24px 8px rgba(245, 158, 11, 0.7);
    background: linear-gradient(135deg, var(--js-color-accent, #F59E0B), #f97316);
  }
}

.js-roulette__result-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin: 0;
  opacity: 0.85;
}

.js-roulette__result-prize {
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  font-weight: 800;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.js-roulette__result-msg {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  color: var(--js-color-gray, #64748B);
}

/* 紙吹雪エフェクト */
.js-roulette__result-badge--show::before,
.js-roulette__result-badge--show::after {
  content: '🎉';
  position: absolute;
  font-size: 1.5rem;
  animation: jsr-confetti 0.8s ease-out forwards;
  pointer-events: none;
}

.js-roulette__result-badge--show::before {
  left: -1rem;
  top: -0.5rem;
  animation-delay: 0.1s;
}

.js-roulette__result-badge--show::after {
  right: -1rem;
  top: -0.5rem;
  animation-delay: 0.2s;
}

@keyframes jsr-confetti {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-2rem) rotate(20deg); opacity: 0; }
}

/* =============================================================
   レスポンシブ調整
   ============================================================= */
@media (max-width: 480px) {
  .js-roulette {
    padding: 1.5rem 1rem;
  }

  /* slot */
  .js-roulette__slot-item {
    width: 120px;
    height: 72px;
    font-size: 0.8rem;
  }

  .js-roulette__window::before {
    left: calc(50% - 64px);
  }

  .js-roulette__window::after {
    left: calc(50% + 61px);
  }

  /* wheel */
  .js-roulette__wheel-svg {
    width: 240px;
    height: 240px;
  }

  /* card */
  .js-roulette__card {
    width: 80px;
    height: 112px;
  }

  .js-roulette__cards-wrap {
    gap: 0.75rem;
  }
}

/* =============================================================
   アクセシビリティ: モーション低減
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .js-roulette__btn,
  .js-roulette__card-inner,
  .js-roulette__wheel-disc,
  .js-roulette__band {
    transition: none !important;
    animation: none !important;
  }

  .js-roulette__arrow,
  .js-roulette__spinning-msg {
    animation: none !important;
    opacity: 1 !important;
  }

  .js-roulette__result-badge--show,
  .js-roulette__result-badge--blink,
  .js-roulette__result-badge--flash {
    animation: none !important;
    transform: scale(1) !important;
    opacity: 1 !important;
  }

  .js-roulette__result-badge--show::before,
  .js-roulette__result-badge--show::after {
    display: none;
  }

  .js-roulette__card--shuffle {
    animation: none !important;
  }
}