/* ============================================================
   JACKPOT 시네마틱 연출 — 시안 기준 (보라 모달 · 골드 · 픽셀)
   GPU 친화: transform/opacity만 애니메이션, will-change 최소 사용
   ============================================================ */

.jp-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 26, 0);
  transition: background .5s ease;
}
.jp-overlay.is-dim { background: rgba(8, 6, 26, .65); }   /* 1단계: 암전 */
.jp-overlay.is-out { opacity: 0; transition: opacity .25s ease; }

.jp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* 2단계: 금빛 폭발 */
.jp-flash {
  position: absolute; left: 50%; top: 46%;
  width: 900px; height: 900px; margin: -450px 0 0 -450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 216, 90, .55) 0%, rgba(255, 190, 60, .25) 30%, transparent 65%);
  opacity: 0; transform: scale(0);
  pointer-events: none;
}
.s-flash .jp-flash { opacity: 1; transform: scale(1.2); transition: transform .4s ease-out, opacity .4s ease-out; }

/* 화면 셰이크 0.2초 */
@keyframes jpShake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-7px, 4px); }
  50% { transform: translate(6px, -5px); }
  75% { transform: translate(-4px, -3px); }
}
.s-shake .jp-wrap { animation: jpShake .2s linear 2; }

.jp-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* ---------- 닫기(X) 버튼 ---------- */
.jp-close {
  position: absolute; top: 12px; right: 14px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .1);
  color: #cfc4f5; font-size: 15px; font-weight: 900; line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.jp-close:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.jp-close:active { transform: scale(.92); }

/* ---------- 텍스트 선명도 (디자인 불변, 렌더링 품질만) ----------
   텍스트 요소에는 transform/scale/filter 없음 — opacity로만 등장 */
.jp-overlay {
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
.jp-ribbon, .jp-modal, .jp-amount-num, .jp-amount-sub, .jp-notice, .jp-btn {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- 모달 (보라 프레임) ---------- */
.jp-modal {
  position: relative;
  width: min(620px, 92vw);
  border-radius: 26px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .06) 0 2px, transparent 3px),
    radial-gradient(circle at 75% 30%, rgba(255, 255, 255, .07) 0 1.5px, transparent 3px),
    radial-gradient(circle at 40% 70%, rgba(255, 255, 255, .05) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 80%, rgba(255, 255, 255, .06) 0 1.5px, transparent 3px),
    linear-gradient(180deg, #322a5e 0%, #241d49 55%, #1c163b 100%);
  border: 2px solid #7a5be8;
  box-shadow: 0 0 34px rgba(124, 92, 235, .55), 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1);
  padding: 34px 30px 22px;
  display: flex; flex-direction: column; align-items: center;
}

/* 축하 리본 — 실제 HTML 텍스트 (이미지 아님, transform은 위치용 translate만) */
.jp-ribbon {
  position: absolute; top: -24px; left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 3;
}
.is-dim .jp-ribbon { opacity: 1; }
.jp-ribbon span {
  display: block;
  padding: 10px 28px;
  background: linear-gradient(180deg, #9a6cf5 0%, #7443e0 100%);
  border: 2px solid #5b2fc4;
  border-radius: 10px;
  color: #fff; font-size: 18px; font-weight: 900; line-height: 1;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
/* 리본 접힌 양끝 */
.jp-ribbon::before, .jp-ribbon::after {
  content: ""; position: absolute; top: 9px; width: 26px; height: 30px; z-index: -1;
  background: linear-gradient(180deg, #6a3fd8, #4d27a6);
}
.jp-ribbon::before { left: -17px; clip-path: polygon(100% 0, 100% 100%, 0 100%, 32% 50%, 0 0); }
.jp-ribbon::after  { right: -17px; clip-path: polygon(0 0, 0 100%, 100% 100%, 68% 50%, 100% 0); }

/* 4단계: JACKPOT 타이틀 */
.jp-title {
  width: min(500px, 88%);
  image-rendering: auto;
  margin: 14px 0 2px;
  opacity: 0; transform: scale(0);
  backface-visibility: hidden;
}
@keyframes jpTitleIn {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
.s-title .jp-title {
  animation: jpTitleIn .45s cubic-bezier(.2, 1.2, .4, 1) forwards;
  filter: drop-shadow(0 0 18px rgba(255, 200, 60, .65)) drop-shadow(0 4px 0 rgba(120, 70, 0, .4));
}

/* ---------- 무대: 글로우 + 오리 + 금화 더미 ---------- */
.jp-stage { position: relative; width: 100%; height: 240px; display: flex; justify-content: center; }
.jp-glow {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(0);
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 80, .5) 0%, rgba(255, 190, 60, .18) 45%, transparent 70%);
  opacity: 0;
}
.s-flash .jp-glow { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: all .4s ease-out; }

/* 3단계: 왕관 오리 낙하 + 바운스 */
.jp-duck {
  position: relative; z-index: 2;
  width: 138px;
  image-rendering: pixelated;
  opacity: 0; transform: translateY(-200px);
}
@keyframes jpDuckDrop {
  0%   { opacity: 0; transform: translateY(-200px); }
  55%  { opacity: 1; transform: translateY(0); }
  72%  { transform: translateY(-26px); }
  88%  { transform: translateY(0); }
  94%  { transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.s-duck .jp-duck { animation: jpDuckDrop .6s cubic-bezier(.3, 0, .4, 1) forwards; opacity: 1; transform: translateY(0); }

/* 9단계: 숨쉬기 Idle (1 → 1.03 → 1, 0.8초 반복) */
@keyframes jpBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.03); }
}
.s-idle .jp-duck { animation: jpBreathe .8s ease-in-out infinite; transform-origin: 50% 90%; }

/* 착지 먼지 */
.jp-dust { position: absolute; left: 50%; bottom: 52px; width: 0; height: 0; z-index: 1; }
.jp-dust::before, .jp-dust::after {
  content: ""; position: absolute; bottom: 0;
  width: 26px; height: 12px; border-radius: 50%;
  background: rgba(230, 210, 160, .55);
  opacity: 0;
}
@keyframes jpDustL { 0% { opacity: .8; transform: translate(-12px, 0) scale(.4); } 100% { opacity: 0; transform: translate(-58px, -14px) scale(1.4); } }
@keyframes jpDustR { 0% { opacity: .8; transform: translate(-12px, 0) scale(.4); } 100% { opacity: 0; transform: translate(34px, -14px) scale(1.4); } }
.s-dust .jp-dust::before { animation: jpDustL .5s ease-out; }
.s-dust .jp-dust::after  { animation: jpDustR .5s ease-out; }

/* 금화 더미 (오리 발밑) */
.jp-pile {
  position: absolute; bottom: 8px; left: 50%; transform: translate(-50%, 20px);
  width: 96%;
  image-rendering: pixelated;
  z-index: 1;
  opacity: 0;
  transition: opacity .4s ease, transform .4s ease;
}
.s-duck .jp-pile { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 6단계: 당첨금 카운트업 ---------- */
.jp-amount {
  width: 92%;
  border-radius: 14px;
  background: linear-gradient(180deg, #241a08 0%, #171006 100%);
  border: 2px solid #c9992e;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .7), 0 0 16px rgba(240, 190, 70, .25);
  padding: 14px 10px 12px;
  text-align: center;
  margin-top: 6px;
  opacity: 0;
  transition: opacity .35s ease;        /* 텍스트는 Fade만 — 트랜스폼 블러 방지 */
}
.s-amount .jp-amount { opacity: 1; }
.jp-amount-num {
  font-size: 38px; font-weight: 900; letter-spacing: 1px;
  color: #ffd23e;
  text-shadow: 0 0 14px rgba(255, 200, 60, .8), 0 2px 0 rgba(120, 70, 0, .6);
}
.jp-amount-sub { margin-top: 4px; font-size: 13px; font-weight: 700; color: #e8d9a8; }

/* ---------- 7단계: 버튼 Fade Up ---------- */
.jp-btns {
  display: flex; gap: 14px; width: 92%; margin-top: 16px;
  opacity: 0; transform: translateY(20px);
  transition: opacity .4s ease, transform .4s ease;
}
.s-btns .jp-btns { opacity: 1; transform: translateY(0); }
.jp-btn {
  flex: 1; height: 52px; border: none; border-radius: 14px; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 900;
  transition: filter .2s ease, transform .15s ease;
}
.jp-btn:hover { filter: brightness(1.1); }
.jp-btn:active { transform: translateY(2px); }
.jp-btn-share {
  background: linear-gradient(180deg, #3f8dfa 0%, #1d63e8 100%);
  color: #fff;
  box-shadow: 0 4px 0 #1345a8, 0 8px 16px rgba(0, 0, 0, .35);
}
.jp-btn-claim {
  background: linear-gradient(180deg, #ffd54a 0%, #f0a90f 100%);
  color: #4a3000;
  box-shadow: 0 4px 0 #a87508, 0 8px 16px rgba(0, 0, 0, .35);
}


/* ---------- 8단계: 전서버 공지바 ---------- */
.jp-notice {
  min-width: min(640px, 92vw);
  border-radius: 999px;
  background: rgba(14, 11, 32, .92);
  border: 1px solid rgba(255, 210, 90, .35);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  color: #fff; font-size: 15px; font-weight: 700;
  padding: 13px 26px; text-align: center;
  opacity: 0;
  transition: opacity .45s ease;        /* 텍스트는 Fade만 */
}
.s-notice .jp-notice { opacity: 1; }
.jp-notice-gold { color: #ffd23e; font-weight: 900; }


/* ---------- 모바일 ---------- */
@media (max-width: 640px) {
  .jp-modal { padding: 26px 16px 16px; }
  .jp-stage { height: 200px; }
  .jp-duck { width: 112px; }
  .jp-amount-num { font-size: 28px; }
  .jp-btn { height: 46px; font-size: 14px; }
  .jp-notice { font-size: 13px; padding: 11px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .jp-overlay *, .jp-overlay { animation: none !important; transition: none !important; }
}