/* =============================================================================
   주간 수확패스 (Weekly Harvest Pass) — 프리뷰 MOCK UI  ·  ROYAL ART
   기획: 주간수확패스_기획서.html + 주간패스_가챠팝업.html(FINAL ART, 왕국 보석함)
   - 창 = 두꺼운 왕국 금테두리(9-slice border-image) + 벨벳 내부 + 왕관 문장.
   - 개봉 연출 등급별 감정선: 일반=맥빠짐 / 풍년=팡! / 황금=대폭발(이게 뭐여?!).
   - 보상은 감자만. ⚠️ MOCK — 실잔액 미반영(미리보기). UTC 월요일 초기화.
   - z-index 4300대. 순수 시각연출은 prefers-reduced-motion 에서 정지(기능 불변).
   ============================================================================= */

:root {
  --wp-gold: #f4b316;
  --wp-gold-lt: #ffe39a;
  --wp-gold-hi: #fff3cf;
  --wp-ink: #1c1206;
  /* 왕국 보석함 9-slice 금테두리(FINAL ART) — 모서리 장식 + 가장자리 보석 */
  --wp-frame: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fff3cf'/><stop offset='.28' stop-color='%23ffe39a'/><stop offset='.5' stop-color='%23f4b316'/><stop offset='.74' stop-color='%23b07e16'/><stop offset='1' stop-color='%235c3c06'/></linearGradient></defs><rect x='6' y='6' width='288' height='288' rx='30' fill='none' stroke='url(%23g)' stroke-width='12'/><rect x='2.5' y='2.5' width='295' height='295' rx='33' fill='none' stroke='%23fff3cf' stroke-width='1.5' opacity='.7'/><g fill='url(%23g)' stroke='%235c3c06' stroke-width='1.4'><path d='M6 56 C6 30 30 6 56 6 L70 6 C44 8 24 26 18 52 C30 50 42 56 44 70 C30 70 18 60 16 46 C10 50 8 60 8 70 L6 70 Z'/><path d='M294 56 C294 30 270 6 244 6 L230 6 C256 8 276 26 282 52 C270 50 258 56 256 70 C270 70 282 60 284 46 C290 50 292 60 292 70 L294 70 Z'/><path d='M6 244 C6 270 30 294 56 294 L70 294 C44 292 24 274 18 248 C30 250 42 244 44 230 C30 230 18 240 16 254 C10 250 8 240 8 230 L6 230 Z'/><path d='M294 244 C294 270 270 294 244 294 L230 294 C256 292 276 274 282 248 C270 250 258 244 256 230 C270 230 282 240 284 254 C290 250 292 240 292 230 L294 230 Z'/></g><g fill='url(%23g)' stroke='%235c3c06' stroke-width='1'><circle cx='150' cy='9' r='5.5'/><circle cx='150' cy='291' r='5.5'/><circle cx='9' cy='150' r='5.5'/><circle cx='291' cy='150' r='5.5'/><circle cx='150' cy='9' r='2' fill='%23fff3cf' stroke='none'/><circle cx='150' cy='291' r='2' fill='%23fff3cf' stroke='none'/><circle cx='9' cy='150' r='2' fill='%23fff3cf' stroke='none'/><circle cx='291' cy='150' r='2' fill='%23fff3cf' stroke='none'/></g></svg>");
}

/* 홈 상단 🎁 아이콘 */
#weeklyPassBtn { position: relative; }
#weeklyPassBtn svg { display: block; width: 22px; height: 22px; }
#weeklyPassBtn.wp-dim { opacity: 0.55; }
#weeklyPassBtn.wp-active {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(244, 179, 22, 0.4), 0 0 16px rgba(244, 179, 22, 0.6);
  animation: wpIconPulse 1.7s ease-in-out infinite;
}
@keyframes wpIconPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(244, 179, 22, 0.3), 0 0 10px rgba(244, 179, 22, 0.45); }
  50%      { box-shadow: 0 0 0 2px rgba(244, 179, 22, 0.5), 0 0 22px rgba(244, 179, 22, 0.72); }
}

/* ---- 공통 오버레이 ---- */
.wp-overlay {
  position: fixed; inset: 0; z-index: 4300;
  display: flex; align-items: center; justify-content: center; padding: 12px;
  background: rgba(0, 0, 0, 0); pointer-events: none; transition: background 0.25s ease;
  font-family: "Pretendard", "Malgun Gothic", "Segoe UI", system-ui, sans-serif;
}
.wp-overlay.open { background: rgba(4, 8, 12, 0.76); pointer-events: auto; }

/* ---- 패스 상세 팝업 ---- */
.wp-detail-box {
  width: min(100%, 320px);
  background: linear-gradient(180deg, #171a23, #0f1219);
  border: 1px solid rgba(244, 179, 22, 0.22);
  border-radius: 18px; padding: 20px 18px; color: #e8eaf0;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  transform: translateY(16px) scale(0.96); opacity: 0;
  transition: transform 0.26s ease, opacity 0.26s ease;
}
.wp-overlay.open .wp-detail-box { transform: translateY(0) scale(1); opacity: 1; }
.wp-detail-head { display: flex; align-items: center; gap: 8px; }
.wp-detail-title { font-size: 17px; font-weight: 900; color: var(--wp-gold); display: flex; align-items: center; gap: 7px; }
.wp-detail-title svg { width: 20px; height: 20px; }
.wp-preview-badge {
  margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
  color: #ffb27a; background: rgba(255, 178, 122, 0.12);
  border: 1px solid rgba(255, 178, 122, 0.35); border-radius: 6px; padding: 3px 8px;
}
.wp-close {
  width: 30px; height: 30px; border: none; border-radius: 9px;
  background: #111822; color: #fff; font-size: 15px; cursor: pointer; margin-left: 6px;
}
.wp-gauge-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin: 16px 0 8px; color: #9aa3b2; }
.wp-gauge-top b { color: var(--wp-gold); font-size: 15px; }
.wp-gauge { height: 14px; border-radius: 999px; background: #0c0e14; overflow: hidden; border: 1px solid #2a2f3d; }
.wp-gauge > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #4df83d, var(--wp-gold)); transition: width 0.4s ease; box-shadow: 0 0 12px rgba(244,179,22,.5); }
.wp-detail-hint { font-size: 12px; color: #8f939b; line-height: 1.5; margin: 10px 0; }
.wp-open-btn {
  display: block; width: 100%; border: none; border-radius: 13px; padding: 13px; margin-top: 4px;
  font-size: 15px; font-weight: 900; cursor: pointer; font-family: inherit;
  background: linear-gradient(180deg, #ffd24f, #e5a91e); color: var(--wp-ink); box-shadow: 0 6px 0 #7f4d05;
}
.wp-open-btn:disabled { opacity: 0.45; box-shadow: none; cursor: not-allowed; }
.wp-open-btn:not(:disabled):active { transform: translateY(3px); box-shadow: 0 3px 0 #7f4d05; }
.wp-open-btn:not(:disabled) { animation: wpCtaGlow 2s ease-in-out infinite; }
@keyframes wpCtaGlow {
  0%, 100% { box-shadow: 0 6px 0 #7f4d05, 0 0 14px rgba(255,203,43,.3); }
  50%      { box-shadow: 0 6px 0 #7f4d05, 0 0 26px rgba(255,225,110,.55); }
}
.wp-reset-note { text-align: center; font-size: 11px; color: #6f7683; margin-top: 12px; }
.wp-preview-note { font-size: 11px; color: #ffb27a; text-align: center; margin-top: 8px; line-height: 1.5; background: rgba(255, 178, 122, 0.08); border-radius: 8px; padding: 8px 10px; }
.wp-dev-row { display: flex; gap: 6px; margin-top: 12px; }
.wp-dev-row button { flex: 1; height: 32px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.1); background: #0b1016; color: #cfd3d9; font-size: 11px; font-weight: 800; cursor: pointer; font-family: inherit; }

/* =============================================================================
   가챠 창 — 왕국 금테두리(9-slice) + 벨벳 내부
   ============================================================================= */
.wp-gacha-box {
  position: relative;
  width: min(100%, 352px);
  border: 40px solid transparent;
  border-image: var(--wp-frame) 46 / 40px / 0 stretch;
  /* 벨벳을 border-box 까지 채워 프레임 뒤로 밀어넣음(테두리-내용 사이 틈 제거).
     border-radius 로 모서리를 금테 곡률에 맞춰 벨벳 사각 모서리가 삐져나오지 않게. */
  background: linear-gradient(180deg, #2c2114, #16100a 70%, #120c06) border-box;
  border-radius: 30px;
  padding: 6px 8px 14px; color: #f7f1e2; text-align: center;
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.72));
  transform: scale(0.94); opacity: 0; transition: transform 0.28s ease, opacity 0.28s ease;
  max-height: calc(100vh - 16px); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
}
.wp-overlay.open .wp-gacha-box { transform: scale(1); opacity: 1; }

/* 왕관 문장 */
.wp-crest { position: relative; z-index: 3; margin: -6px auto 0; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.wp-crest svg { display: block; margin: 0 auto; }
.wp-gacha-title { position: relative; z-index: 2; font-size: 21px; font-weight: 900; color: var(--wp-gold-hi); margin: 2px 0 2px; }
.wp-gacha-prompt { position: relative; z-index: 2; font-size: 13px; font-weight: 800; color: var(--wp-gold-lt); }
.wp-gacha-note {
  position: relative; z-index: 2; font-size: 11px; color: #b9a888; line-height: 1.5; margin: 8px auto 12px; max-width: 260px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 227, 154, 0.16); border-radius: 10px; padding: 7px 11px;
}

/* ---- 3택1 선물상자 ---- */
.wp-box-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wp-gift-card {
  position: relative; min-height: 148px; border-radius: 16px; cursor: pointer;
  border: 1px solid rgba(255, 227, 154, 0.22);
  background: radial-gradient(110% 60% at 50% 4%, rgba(255,243,207,.1), transparent 60%), linear-gradient(180deg, rgba(255, 209, 50, 0.05), rgba(0, 0, 0, 0.18));
  padding: 10px 4px 8px; font-family: inherit; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease, border-color 0.16s ease;
  -webkit-tap-highlight-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 16px rgba(0,0,0,.3);
}
.wp-gift-card::before { content: ""; position: absolute; left: 6px; right: 6px; top: 8px; height: 90px; border-radius: 12px; background: radial-gradient(75% 70% at 50% 40%, var(--niche, rgba(120,86,40,.42)), transparent 78%); }
.wp-gift-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 22px rgba(0,0,0,.38); }
.wp-gift-card.selected { transform: translateY(-4px) scale(1.04); border-color: rgba(255, 210, 74, 0.9); box-shadow: 0 0 0 2px rgba(255, 210, 74, 0.28), 0 0 26px rgba(255, 187, 42, 0.2); }
.wp-gift-card.dim { opacity: 0.42; filter: saturate(0.6); }
.wp-gift-card.locked { pointer-events: none; }
.wp-gift-svg { position: relative; z-index: 1; display: block; width: 74px; height: auto; margin: 0 auto 8px; overflow: visible; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5)); }
.wp-gift-shell { transform-origin: 50% 88%; transform-box: fill-box; will-change: transform; }
.wp-gift-lid { transform-origin: 50% 100%; transform-box: fill-box; will-change: transform; }
.wp-gift-flash { transform-origin: 50% 50%; transform-box: fill-box; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.wp-gift-card.red    { --bx-light:#ff7b6f; --bx-main:#d63a2e; --bx-dark:#6a1408; --bx-rib:#ffd9d4; --bx-rib-d:#ff5a4a; --bx-bow:#ffe6e1; --bx-eye:#3a1008; --bx-glow:rgba(255,128,108,.55); --niche:rgba(214,58,46,.42); }
.wp-gift-card.yellow { --bx-light:#ffe28a; --bx-main:#f4b91d; --bx-dark:#7a4708; --bx-rib:#fff5d3; --bx-rib-d:#ffcf5a; --bx-bow:#fff8e0; --bx-eye:#5a3a00; --bx-glow:rgba(255,210,76,.55); --niche:rgba(244,179,22,.42); }
.wp-gift-card.green  { --bx-light:#8fe65b; --bx-main:#4cb330; --bx-dark:#15440f; --bx-rib:#e9ffd0; --bx-rib-d:#86e85a; --bx-bow:#f1ffd6; --bx-eye:#14400d; --bx-glow:rgba(122,232,76,.55); --niche:rgba(76,179,48,.42); }
.wp-gift-name { position: relative; z-index: 2; min-width: 64px; padding: 5px 6px; border-radius: 999px; background: rgba(6, 8, 12, 0.8); border: 1px solid rgba(255, 227, 154, 0.28); color: var(--wp-gold-lt); font-size: 11px; font-weight: 900; line-height: 1; }
.wp-gift-cosm { position: relative; z-index: 2; font-size: 9px; font-weight: 800; color: #8a8067; margin-top: 3px; }
.wp-particles { position: absolute; left: 50%; top: 52px; width: 0; height: 0; pointer-events: none; z-index: 4; }
.wp-ptc { position: absolute; left: 0; top: 0; font-size: 22px; line-height: 1; transform: translate(-50%, -50%) scale(0); opacity: 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); will-change: transform, opacity; }
.wp-open-cta {
  position: relative; z-index: 2; width: 100%; height: 50px; border: none; border-radius: 15px; margin-top: 10px;
  background: linear-gradient(180deg, #ffd24f, #e5a91e); color: var(--wp-ink); font-family: inherit; font-size: 16px; font-weight: 900; cursor: pointer; box-shadow: 0 7px 0 #7f4d05;
}
.wp-open-cta:disabled { opacity: 0.45; box-shadow: none; cursor: not-allowed; }
.wp-select-foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 11px; color: #b9a888; }

/* =============================================================================
   개봉 연출 — 등급별 감정선 (일반=맥빠짐 / 풍년=팡! / 황금=대폭발)
   ============================================================================= */
.wp-gift-card.opening { overflow: visible; z-index: 6; }
/* 충격파 링 / 화면 플래시 */
.wp-shock { position: absolute; left: 50%; top: 48%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 3px solid var(--bx-rim, #ffd28a); pointer-events: none; opacity: 0; z-index: 5; }
.wp-screenflash { position: absolute; inset: 0; z-index: 20; pointer-events: none; background: radial-gradient(circle at 50% 44%, rgba(255,250,225,.96), rgba(255,232,150,.5) 40%, transparent 74%); animation: wpScreenFlash .62s ease-out forwards; }
@keyframes wpScreenFlash { 0% { opacity: 0; } 16% { opacity: 1; } 100% { opacity: 0; } }
.wp-royal-shake.wp-shake { animation: wpShake .5s ease-in-out; }
.wp-royal-shake.wp-shake-big { animation: wpShakeBig .82s ease-in-out; }
@keyframes wpShake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-4px,2px); } 40% { transform: translate(4px,-2px); } 60% { transform: translate(-3px,-1px); } 80% { transform: translate(3px,1px); } }
@keyframes wpShakeBig {
  0%,100% { transform: translate(0,0) rotate(0); }
  8% { transform: translate(-8px,4px) rotate(-.7deg); } 16% { transform: translate(8px,-4px) rotate(.7deg); }
  24% { transform: translate(-7px,-3px) rotate(-.5deg); } 32% { transform: translate(7px,3px) rotate(.6deg); }
  44% { transform: translate(-5px,2px); } 58% { transform: translate(4px,-2px); } 74% { transform: translate(-2px,1px); }
}

/* ── 일반: 맥빠짐 (뚜껑 힘없이 빠끔 + 감자 몇 개 시들 떨어짐, 플래시 없음) ── */
.opening-normal .wp-gift-shell { animation: wpShellWeak 1.25s ease-out forwards; }
.opening-normal .wp-gift-lid   { animation: wpLidWeak 1.25s ease-out forwards; }
.opening-normal .wp-gift-flash { display: none; }
.opening-normal .wp-ptc        { animation: wpPtcWeak 1s ease-out forwards; animation-delay: calc(.55s + var(--d, 0ms)); }
.opening-normal .wp-ptc:nth-child(n+4) { display: none; }
@keyframes wpShellWeak { 0% { transform: translateY(0) scale(1); } 22% { transform: translateY(-2px) scale(1.02); } 46% { transform: translateY(0) scaleY(.99); } 100% { transform: translateY(2px) scale(.994); } }
/* 맥빠짐이라도 '뚜껑이 확실히 열렸다'는 건 명확히 보이게 — 크게 들렸다가 힘없이 살짝 주저앉음(폭발·플래시 없음). */
@keyframes wpLidWeak { 0% { transform: translateY(0) rotate(0); } 34% { transform: translateY(-25px) rotate(-16deg); } 62% { transform: translateY(-29px) rotate(-20deg); } 100% { transform: translateY(-24px) rotate(-15deg); } }
@keyframes wpPtcWeak { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 0; } 35% { transform: translate(-50%,-60%) scale(.9); opacity: .85; } 100% { transform: translate(calc(-50% + var(--tx) * .35), calc(-50% + var(--ty) * .28 + 26px)) scale(.6) rotate(calc(var(--r) * .4)); opacity: 0; } }

/* ── 풍년: 팡! (흔들→터짐 + 플래시 + 충격파 1 + 감자 8개 시원하게) ── */
.opening-bumper .wp-gift-shell { animation: wpShellPop .95s cubic-bezier(.3,.1,.2,1.12) forwards; }
.opening-bumper .wp-gift-lid   { animation: wpLidPop .95s cubic-bezier(.18,.7,.28,1.2) forwards; }
.opening-bumper .wp-gift-flash { animation: wpFlash .55s ease-out .4s forwards; }
.opening-bumper .wp-ptc        { animation: wpPtcPop .85s cubic-bezier(.15,.7,.4,1) forwards; animation-delay: calc(.42s + var(--d, 0ms)); }
.opening-bumper .wp-shock      { animation: wpShockRing .7s ease-out .42s forwards; }
@keyframes wpShellPop { 0% { transform: translateX(0) scale(1); } 14% { transform: translateX(-4px) rotate(-6deg) scale(1.04); } 28% { transform: translateX(4px) rotate(6deg) scale(1.05); } 42% { transform: translateX(-3px) rotate(-3deg) scale(1.05); } 52% { transform: scale(1.16) scaleY(.86) scaleX(1.14); } 64% { transform: scale(1.04); } 100% { transform: translateY(-8px) scale(1.05); } }
@keyframes wpLidPop { 0%,44% { transform: translateY(0) rotate(0); } 56% { transform: translateY(-26px) rotate(-16deg); } 100% { transform: translateY(-36px) rotate(-24deg); } }
@keyframes wpFlash { 0% { opacity: 0; transform: scale(.3); } 20% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }
@keyframes wpPtcPop { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 0; } 16% { transform: translate(-50%,-50%) scale(1.25); opacity: 1; } 60% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) rotate(var(--r)); opacity: 1; } 100% { transform: translate(calc(-50% + var(--tx) * 1.35), calc(-50% + var(--ty) + 72px)) scale(.55) rotate(calc(var(--r) * 1.4)); opacity: 0; } }
@keyframes wpShockRing { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(3); opacity: 0; } }

/* ── 황금: 이게 뭐여?! (격렬한 흔들→초대형 폭발 + 큰 플래시 + 2중 충격파 + 감자 사방 폭발) ── */
.opening-golden .wp-gift-shell { animation: wpShellBlast 1.5s cubic-bezier(.28,.06,.2,1.15) forwards; }
.opening-golden .wp-gift-lid   { animation: wpLidBlast 1.5s cubic-bezier(.16,.7,.28,1.3) forwards; }
.opening-golden .wp-gift-flash { animation: wpFlashBig .9s ease-out .5s forwards; }
.opening-golden .wp-ptc        { animation: wpPtcBlast 1.1s cubic-bezier(.12,.72,.4,1) forwards; animation-delay: calc(.5s + var(--d, 0ms)); }
.opening-golden .wp-shock      { animation: wpShockRing .9s ease-out .5s forwards; border-color: #fff6d0; border-width: 4px; }
.opening-golden .wp-shock.wp-shock2 { animation: wpShockRing 1s ease-out .64s forwards; border-color: #ffd24f; }
@keyframes wpShellBlast {
  0% { transform: translateX(0) scale(1); }
  8% { transform: translateX(-5px) rotate(-7deg) scale(1.05); } 16% { transform: translateX(6px) rotate(8deg) scale(1.06); }
  24% { transform: translateX(-6px) rotate(-8deg) scale(1.07); } 32% { transform: translateX(5px) rotate(7deg) scale(1.07); }
  40% { transform: translateX(-4px) rotate(-4deg) scale(1.08); }
  50% { transform: scale(1.34) scaleY(.8) scaleX(1.24); } 60% { transform: scale(1.1); } 72% { transform: scale(1.18); }
  100% { transform: translateY(-10px) scale(1.08); }
}
@keyframes wpLidBlast { 0%,42% { transform: translateY(0) rotate(0); } 54% { transform: translateY(-42px) rotate(-26deg); } 70% { transform: translateY(-54px) rotate(-42deg); } 100% { transform: translateY(-48px) rotate(-34deg); } }
@keyframes wpFlashBig { 0% { opacity: 0; transform: scale(.3); } 16% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: scale(4.8); } }
@keyframes wpPtcBlast { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 0; } 12% { transform: translate(-50%,-50%) scale(1.4); opacity: 1; } 55% { transform: translate(calc(-50% + var(--tx) * 1.5), calc(-50% + var(--ty) * 1.5)) scale(1.1) rotate(var(--r)); opacity: 1; } 100% { transform: translate(calc(-50% + var(--tx) * 2.2), calc(-50% + var(--ty) * 1.6 + 90px)) scale(.5) rotate(calc(var(--r) * 1.8)); opacity: 0; } }

/* =============================================================================
   등급 결과 — 벨벳 내부(등급 틴트) + 왕관 + 보석함 장면
   ============================================================================= */
.wp-gacha-box.wp-result {
  background:
    radial-gradient(85% 62% at 50% 24%, var(--wp-vel-spot), transparent 72%) border-box,
    var(--wp-vel-bg) border-box;
}
.wp-tier-badge {
  position: relative; z-index: 2; display: inline-block; font-size: 12px; font-weight: 900; letter-spacing: 1px;
  padding: 5px 15px; border-radius: 999px; margin: 2px 0 2px; color: var(--wp-ink);
  background: linear-gradient(180deg, var(--wp-gold-hi), var(--wp-gold), #9a6a12);
  border: 1px solid rgba(92, 60, 6, 0.6); box-shadow: 0 3px 0 rgba(92, 60, 6, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.wp-tier-name { position: relative; z-index: 2; font-size: 24px; font-weight: 900; margin: 2px 0 1px; letter-spacing: -.5px; }
.wp-tier-sub { position: relative; z-index: 2; font-size: 12px; color: #b9a888; margin-bottom: 2px; }
.wp-scene { position: relative; z-index: 2; width: 200px; height: 138px; margin: 2px auto 2px; }
.wp-rays {
  position: absolute; left: 50%; top: 44%; width: var(--wp-ray-size, 250px); height: var(--wp-ray-size, 250px);
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 0;
  background: repeating-conic-gradient(from 0deg at 50% 50%, var(--wp-ray, rgba(214,178,108,.2)) 0deg, var(--wp-ray, rgba(214,178,108,.2)) 4deg, transparent 4deg, transparent 15deg);
  -webkit-mask-image: radial-gradient(circle, transparent 22%, #000 34%, #000 60%, transparent 76%);
          mask-image: radial-gradient(circle, transparent 22%, #000 34%, #000 60%, transparent 76%);
  animation: wpSpin var(--wp-ray-spin, 28s) linear infinite;
}
@keyframes wpSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.wp-glow-disc { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); width: var(--wp-disc-size, 180px); height: var(--wp-disc-size, 180px); border-radius: 50%; z-index: 0; pointer-events: none; background: radial-gradient(circle, var(--wp-disc, rgba(214,178,108,.2)) 0%, transparent 66%); }
.wp-box-svg { position: relative; z-index: 2; display: block; width: 150px; height: auto; margin: 2px auto 0; overflow: visible; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5)); }
.wp-sparkle { position: absolute; z-index: 3; color: var(--bx-rim, #e9cf95); font-weight: 900; filter: drop-shadow(0 0 4px var(--bx-glow, rgba(190,140,70,.5))); pointer-events: none; animation: wpTwinkle 2.4s ease-in-out infinite; }
@keyframes wpTwinkle { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
/* 감자: 결과 진입 시 중심에서 '팡' 튀어올랐다가(정점 --px/--py) 중력으로 떨어져 바닥에 더미로 착지(--lx/--ly).
   등급 오를수록 개수↑(수북). 착지 시 살짝 튕겼다 안착. */
.wp-spill {
  position: absolute; left: 50%; top: 46%; z-index: 3; font-size: 22px; line-height: 1;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5)); pointer-events: none; user-select: none;
  transform: translate(-50%, -50%) scale(0); opacity: 0;
  animation: wpSpillFall 1.05s both;
}
@keyframes wpSpillFall {
  0%   { transform: translate(-50%, -50%) scale(.2) rotate(0); opacity: 0; animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
  12%  { transform: translate(-50%, -50%) scale(1.15) rotate(0); opacity: 1; animation-timing-function: ease-out; }
  42%  { transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(calc(var(--sc, 1) * 1.03)) rotate(var(--r)); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .85, .5); }
  86%  { transform: translate(calc(-50% + var(--lx)), calc(-50% + var(--ly) + 6px)) scale(calc(var(--sc, 1) * 1.08)) rotate(var(--rl)); opacity: 1; animation-timing-function: ease-out; }
  100% { transform: translate(calc(-50% + var(--lx)), calc(-50% + var(--ly))) scale(var(--sc, 1)) rotate(var(--rl)); opacity: 1; }
}
.wp-amount { position: relative; z-index: 2; display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 2px 0 1px; }
.wp-amount .po { font-size: 40px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.wp-amount .num { font-size: 52px; font-weight: 900; line-height: 1; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, var(--amt-hi, #ffe9bf), var(--amt-mid, #ffc44f) 55%, var(--amt-lo, #e0951a)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 10px var(--bx-glow, rgba(255,210,70,.4))); }
.wp-amount .unit { font-size: 16px; font-weight: 900; color: var(--wp-gold-lt); }
.wp-range-hint { position: relative; z-index: 2; font-size: 11.5px; font-weight: 800; color: #b9a888; margin: 0 0 8px; }
.wp-range-hint .chip { display: inline-block; padding: 2px 9px; border-radius: 999px; margin-left: 4px; background: rgba(255, 243, 207, 0.07); border: 1px solid rgba(255, 227, 154, 0.22); color: var(--wp-gold-lt); }
.wp-reveal-title { position: relative; z-index: 2; font-size: 12px; color: #b9a888; margin: 8px 0 5px; }
.wp-reveal-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wp-reveal-item { padding: 10px 6px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); text-align: center; }
.wp-reveal-item small { display: block; font-size: 10px; color: #8f939b; margin-bottom: 4px; }
.wp-reveal-item b { display: block; font-size: 16px; color: #ffd24f; }
.wp-reveal-item.mine { border-color: rgba(255, 208, 71, 0.45); box-shadow: inset 0 0 0 1px rgba(255,208,71,.18); }

/* ---- 등급별 팔레트 & 상승 ---- */
.wp-tier-normal {
  --wp-vel-spot: rgba(120,86,40,.55); --wp-vel-bg: linear-gradient(180deg,#3a2a16,#22180c 70%,#160f07);
  --wp-ray: rgba(214,178,108,.2); --wp-ray-size: 240px; --wp-ray-spin: 30s; --wp-disc: rgba(214,178,108,.18); --wp-disc-size: 170px;
  --bx-light:#caa15f; --bx-main:#9a6f33; --bx-dark:#3c2710; --bx-rim:#e9cf95; --bx-rib:#e8d3a6; --bx-rib-d:#a9803f; --bx-glow:rgba(190,140,70,.42);
  --amt-hi:#ffe9bf; --amt-mid:#e6b864; --amt-lo:#a9742a; --wp-burst: .85;
}
.wp-tier-normal .wp-tier-name { color: #e9cf95; }
.wp-tier-bumper {
  --wp-vel-spot: rgba(214,58,46,.4); --wp-vel-bg: linear-gradient(180deg,#5a160f,#3a0f0a 68%,#220a07);
  --wp-ray: rgba(255,170,70,.3); --wp-ray-size: 300px; --wp-ray-spin: 22s; --wp-disc: rgba(255,150,60,.28); --wp-disc-size: 220px;
  --bx-light:#ff9a4a; --bx-main:#e2611f; --bx-dark:#5e1d05; --bx-rim:#ffd28a; --bx-rib:#ffe6b0; --bx-rib-d:#e08a2a; --bx-glow:rgba(255,140,50,.55);
  --amt-hi:#fff0c8; --amt-mid:#ffc44f; --amt-lo:#e2611f; --wp-burst: 1.08;
}
.wp-tier-bumper .wp-tier-name { color: #ffd28a; }
.wp-tier-golden {
  --wp-vel-spot: rgba(255,215,90,.5);
  /* 매끄러운 골드 벨벳(빛살은 .wp-rays 전담) */
  --wp-vel-bg: radial-gradient(120% 82% at 50% 22%, #6a4a08, transparent 62%), linear-gradient(180deg, #52390a, #33260a 66%, #211803);
  --wp-ray: rgba(255,221,110,.46); --wp-ray-size: 340px; --wp-ray-spin: 16s; --wp-disc: rgba(255,214,90,.5); --wp-disc-size: 250px;
  --bx-light:#fff0a8; --bx-main:#f4b316; --bx-dark:#6e4806; --bx-rim:#fff6d0; --bx-rib:#fffae0; --bx-rib-d:#e0a31a; --bx-glow:rgba(255,210,70,.75);
  --amt-hi:#fffbe6; --amt-mid:#ffd24f; --amt-lo:#e0951a; --wp-burst: 1.22;
}
.wp-tier-golden .wp-tier-name { background: linear-gradient(180deg,#fffbe6,#ffd24f 60%,#e0951a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wp-tier-golden.wp-result { filter: drop-shadow(0 20px 50px rgba(0,0,0,.72)) drop-shadow(0 0 30px rgba(255,210,70,.4)); }
.wp-tier-golden .wp-glow-disc { animation: wpDiscPulse 2.2s ease-in-out infinite; }
@keyframes wpDiscPulse { 0%, 100% { opacity: .82; } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.07); } }
.wp-tier-golden .wp-tier-badge { animation: wpBadgeShine 2.4s ease-in-out infinite; }
@keyframes wpBadgeShine {
  0%, 100% { box-shadow: 0 3px 0 rgba(110,72,6,.6), inset 0 1px 0 rgba(255,255,255,.7), 0 0 14px rgba(255,210,70,.4); }
  50%      { box-shadow: 0 3px 0 rgba(110,72,6,.6), inset 0 1px 0 rgba(255,255,255,.7), 0 0 28px rgba(255,225,110,.7); }
}
.wp-tier-golden .wp-open-cta { animation: wpCtaShine 2.4s ease-in-out infinite; }
@keyframes wpCtaShine {
  0%, 100% { box-shadow: 0 7px 0 #7f4d05, 0 0 22px rgba(255,210,70,.4); }
  50%      { box-shadow: 0 7px 0 #7f4d05, 0 0 44px rgba(255,225,110,.7); }
}
.wp-confetti { position: absolute; width: 6px; height: 9px; border-radius: 2px; z-index: 1; pointer-events: none; animation: wpFall 4.2s linear infinite; opacity: .9; }
@keyframes wpFall { 0% { transform: translateY(-20px) rotate(0); opacity: 0; } 12% { opacity: .95; } 100% { transform: translateY(420px) rotate(420deg); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  #weeklyPassBtn.wp-active, .wp-open-btn:not(:disabled) { animation: none !important; }
  .wp-overlay, .wp-detail-box, .wp-gacha-box, .wp-gauge > i { transition: none !important; }
  .wp-rays, .wp-glow-disc, .wp-sparkle, .wp-spill, .wp-confetti, .wp-screenflash,
  .wp-royal-shake, .wp-shock,
  .wp-tier-golden .wp-tier-badge, .wp-tier-golden .wp-open-cta, .wp-tier-golden .wp-glow-disc { animation: none !important; }
  /* 애니 정지 시 감자는 바닥 더미 최종 위치에 즉시 표시(안 보이는 문제 방지) */
  .wp-spill { opacity: 1 !important; transform: translate(calc(-50% + var(--lx)), calc(-50% + var(--ly))) scale(var(--sc, 1)) rotate(var(--rl)) !important; }
  .opening-normal .wp-gift-shell, .opening-normal .wp-gift-lid, .opening-normal .wp-ptc,
  .opening-bumper .wp-gift-shell, .opening-bumper .wp-gift-lid, .opening-bumper .wp-gift-flash, .opening-bumper .wp-ptc,
  .opening-golden .wp-gift-shell, .opening-golden .wp-gift-lid, .opening-golden .wp-gift-flash, .opening-golden .wp-ptc { animation: none !important; }
  .opening-normal .wp-gift-lid, .opening-bumper .wp-gift-lid, .opening-golden .wp-gift-lid { transform: translateY(-26px) rotate(-18deg); }
}