/* ============================================================
   JACKPOT 연출 — 시안 이미지 그대로 + 카드 내부 폭죽 오버레이
   ⚠ 이미지에는 어떤 변형도 주지 않는다
      (crop / stretch / filter / 색보정 / blur 전부 금지)
   ============================================================ */

/* 연출이 떠 있는 동안 뒤 화면 스크롤 잠금 */
body.jp-open { overflow: hidden; }

/* ---------- 배경 암전 ---------- */
.jp-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(4, 10, 30, 0);
  opacity: 0;
  transition: opacity .22s ease, background .28s ease;
}
.jp-overlay.is-in { opacity: 1; background: rgba(4, 10, 30, .74); }
.jp-overlay.is-out { opacity: 0; background: rgba(4, 10, 30, 0); }

/* ---------- 카드 : 폭죽이 절대 밖으로 못 나가는 경계 ---------- */
.jp-card {
  position: relative;
  overflow: hidden;                 /* ← 폭죽 클리핑 (모서리 곡선까지 그대로 따라감) */
  border-radius: 22px;
  aspect-ratio: 3 / 4;              /* 시안 원본 1086×1448 = 정확히 3:4 */
  width: min(92vw, 430px);
  /* 세로가 모자란 화면에서는 높이에 맞춰 줄어들되 비율은 그대로 유지 */
  max-width: calc((100vh - 32px) * 0.75);
  max-width: calc((100dvh - 32px) * 0.75);
  isolation: isolate;               /* canvas 의 lighter 합성이 밖으로 새지 않도록 */
  container-type: inline-size;      /* 카드 폭 기준으로 금액 글자 크기 계산 */
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .55),
    0 0 0 3px rgba(255, 206, 64, .5),
    0 0 44px rgba(255, 190, 40, .3);
  transform: scale(.86);
  opacity: 0;
  transition: transform .3s cubic-bezier(.2, 1.3, .5, 1), opacity .25s ease;
}
.jp-overlay.is-in .jp-card { transform: scale(1); opacity: 1; }
.jp-overlay.is-out .jp-card { transform: scale(.94); opacity: 0; }

/* ---------- 시안 이미지 (원본 그대로) ---------- */
.jp-scene {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  object-fit: fill;                 /* 카드가 이미 3:4 라 왜곡·잘림 없음 */
  filter: none;                     /* 색보정·블러 금지 */
  image-rendering: auto;
  user-select: none; -webkit-user-drag: none;
}

/* ---------- 폭죽 레이어 : 카드와 완전히 같은 영역 ---------- */
.jp-fx {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  border-radius: inherit;           /* 카드 모서리와 동일 */
  z-index: 1;
}

/* ---------- 실제 당첨금 (이미지의 금액 칸 위에 정확히 겹침) ---------- */
.jp-amount {
  position: absolute;
  z-index: 2;                       /* 폭죽보다 위 — 금액은 항상 잘 보여야 함 */
  display: flex; align-items: center; justify-content: center;
  gap: 2.2%;
  padding: 0 2.4%;
  border-radius: 5px;
  /* 이미지의 남색 화면과 같은 톤 (원본에서 추출한 값) */
  background:
    radial-gradient(120% 150% at 60% 34%, rgba(46, 84, 214, .5) 0%, rgba(10, 26, 96, 0) 62%),
    linear-gradient(180deg, #16256e 0%, #0d2179 26%, #0a1a63 58%, #040d34 100%);
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, .55),
    inset 0 -3px 10px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.jp-amount-num, .jp-amount-unit {
  font-family: "Arial Black", "Pretendard", "Malgun Gothic", sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  /* 시안의 금색 글자 느낌 (위 밝은 금 → 아래 진한 금) */
  background: linear-gradient(180deg, #fff3b8 0%, #ffd54a 34%, #f5a800 72%, #d98600 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.05em #1a1206;
  paint-order: stroke fill;
  filter: drop-shadow(0 0.05em 0 rgba(0, 0, 0, .7));
}
/* 실제 크기는 JS 가 금액 칸에 맞춰 자동 계산 (아래는 로드 직후 기본값) */
.jp-amount-num { font-size: 8cqw; }
.jp-amount-unit {
  font-size: 4.3cqw;
  background: linear-gradient(180deg, #ffffff 0%, #f2f0e6 60%, #cfc9b4 100%);
  -webkit-background-clip: text; background-clip: text;
}
/* container query 미지원 브라우저 대비 (뷰포트 기준 근사값) */
@supports not (container-type: inline-size) {
  .jp-amount-num { font-size: clamp(20px, 8vw, 40px); }
  .jp-amount-unit { font-size: clamp(11px, 4.4vw, 22px); }
}

/* ---------- 닫기 ---------- */
.jp-close {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 38px; height: 38px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(10, 16, 40, .55);
  color: #fff; font-size: 17px; font-weight: 900; line-height: 1;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.jp-close:hover { background: rgba(10, 16, 40, .85); }
.jp-close:active { transform: scale(.92); }

/* ---------- 모션 최소화 설정 존중 ---------- */
@media (prefers-reduced-motion: reduce) {
  .jp-card { transition: opacity .2s ease; transform: none; }
  .jp-overlay.is-in .jp-card, .jp-overlay.is-out .jp-card { transform: none; }
}