/* 💎 儲值成功慶祝畫面（js/paydone.js）：暗幕＋中央大卡；金色 #f3d48a、亮金 #ffe9a8、深金 #b7791f（同 shop.css），藍鑽 #5cb2ff
   時間軸：0 暗幕 → .1s 卡片彈出 → .3s 藍鑽落下＋粒子炸開 → .55～2.35s 數字跳 → 跳完 .pd-done（數字叮一下、第二圈光環、按鈕亮起）；彩帶 0～4s 飄完 */

.pd-ov { position: fixed; inset: 0; z-index: 2147483200; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, rgba(30,40,80,.72) 0%, rgba(6,6,14,.9) 60%, rgba(0,0,0,.95) 100%);
  animation: pdFade .35s ease-out both; -webkit-tap-highlight-color: transparent; cursor: pointer; }
@keyframes pdFade { from { opacity: 0; } to { opacity: 1; } }

/* 卡片 */
.pd-card { position: relative; width: min(360px, 100%); padding: 18px 20px 20px; border-radius: 16px; text-align: center; cursor: default;
  border: 1px solid #f3d48a; background: linear-gradient(170deg, rgba(58,40,14,.96) 0%, rgba(20,14,8,.97) 48%, rgba(14,18,36,.97) 100%);
  box-shadow: inset 0 1px 0 rgba(255,233,168,.35), inset 0 0 0 3px rgba(18,13,8,.9), inset 0 0 0 4px rgba(183,121,31,.6), 0 0 40px rgba(92,178,255,.25), 0 0 80px rgba(242,193,78,.18), 0 12px 40px #000;
  animation: pdPop .55s cubic-bezier(.2,1.6,.4,1) .1s both; }
@keyframes pdPop { from { opacity: 0; transform: scale(.6) translateY(20px); } to { opacity: 1; transform: none; } }
.pd-card::before, .pd-card::after { content: ""; position: absolute; top: 8px; width: 14px; height: 14px; border-top: 2px solid #f3d48a; }   /* 上面兩個金角 */
.pd-card::before { left: 8px; border-left: 2px solid #f3d48a; border-top-left-radius: 6px; }
.pd-card::after { right: 8px; border-right: 2px solid #f3d48a; border-top-right-radius: 6px; }

/* 藍鑽舞台：光芒（旋轉）、光暈、粒子、光環、藍鑽 */
.pd-stage { position: relative; width: 180px; height: 170px; margin: -4px auto 2px; }
.pd-rays { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,226,140,.34) 0deg 7deg, rgba(255,226,140,0) 7deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0,0,0,.6) 30%, transparent 62%); mask: radial-gradient(circle, #000 0%, rgba(0,0,0,.6) 30%, transparent 62%);
  animation: pdRayIn .8s ease-out .3s both, pdSpin 14s linear .3s infinite; }
@keyframes pdRayIn { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes pdSpin { to { rotate: 360deg; } }
.pd-glow { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,235,255,.95) 0%, rgba(92,178,255,.55) 30%, rgba(92,178,255,0) 70%);
  animation: pdGlow 2.4s ease-in-out .3s infinite; }
@keyframes pdGlow { 0%, 100% { opacity: .75; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
.pd-gem { position: absolute; left: 50%; top: 50%; width: 104px; height: 104px; margin: -56px 0 0 -52px; perspective: 400px;
  filter: drop-shadow(0 0 10px rgba(140,210,255,.9)) drop-shadow(0 0 26px rgba(92,178,255,.6));
  animation: pdDrop .7s cubic-bezier(.3,1.5,.5,1) .3s both; }
@keyframes pdDrop { from { opacity: 0; transform: translateY(-90px) scale(.4); } to { opacity: 1; transform: none; } }
.pd-gem svg { width: 100%; height: 100%; overflow: visible; animation: pdTurn 3.2s ease-in-out 1s infinite; transform-origin: 50% 50%; }
@keyframes pdTurn { 0%, 100% { transform: rotateY(0) translateY(0); } 25% { transform: rotateY(25deg) translateY(-4px); } 50% { transform: rotateY(0) translateY(-6px); } 75% { transform: rotateY(-25deg) translateY(-4px); } }
.pd-gem svg .f { fill: url(#pdGemG); stroke: #f0faff; stroke-width: 1; stroke-linejoin: round; }
.pd-gem svg .s { fill: none; stroke: rgba(240,250,255,.85); stroke-width: 1; stroke-linejoin: round; }
.pd-gem::after { content: ""; position: absolute; left: 22%; top: 14%; width: 16px; height: 16px; opacity: 0;   /* 藍鑽上的閃光 */
  background: radial-gradient(circle, #fff 0 12%, transparent 13%), linear-gradient(#fff, #fff) center/2px 100% no-repeat, linear-gradient(#fff, #fff) center/100% 2px no-repeat;
  animation: pdTwinkle 2.2s ease-in-out 1.1s infinite; }
@keyframes pdTwinkle { 0%, 60%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 75% { opacity: 1; transform: scale(1.2) rotate(45deg); } }

.pd-sparks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.pd-spark { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fffbe6 0%, #ffd84d 50%, rgba(242,169,59,0) 100%); box-shadow: 0 0 6px #ffd84d;
  animation: pdBurst 1.1s cubic-bezier(.1,.7,.3,1) calc(.4s + var(--d)) both; }
@keyframes pdBurst { 0% { opacity: 1; transform: translate(0, 0) scale(1.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.4); } }
.pd-done .pd-spark { animation: pdBurst 1.1s cubic-bezier(.1,.7,.3,1) var(--d) both; }   /* 跳完再炸一次 */
.pd-ring { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 3px solid rgba(255,226,140,.9); opacity: 0;
  animation: pdRing .9s ease-out .4s both; }
.pd-done .pd-ring { animation: pdRing2 .9s ease-out both; }
@keyframes pdRing { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(2.2); } }
@keyframes pdRing2 { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(2.2); } }

/* 字 */
.pd-title { margin-top: 2px; font: 900 34px/1.15 "Microsoft JhengHei", "PingFang TC", serif; letter-spacing: 10px; padding-left: 10px;
  background: linear-gradient(180deg, #fffbe6 0%, #ffe38f 40%, #d99a26 72%, #fff0b4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 10px rgba(255,190,60,.55));
  animation: pdRise .5s ease-out .45s both; }
@keyframes pdRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pd-amt { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 6px; color: #e6f6ff; animation: pdRise .5s ease-out .55s both; }
.pd-amt b { font: 900 46px/1 "Segoe UI", "Microsoft JhengHei", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 1px;
  color: #fff; text-shadow: 0 0 12px rgba(92,178,255,.95), 0 0 2px #5cb2ff, 0 2px 0 #0b2a66; display: inline-block; }
.pd-amt span { font: 700 18px/1 "Microsoft JhengHei", "PingFang TC", sans-serif; color: #bfe3ff; letter-spacing: 2px; }
.pd-done .pd-amt b { animation: pdDing .45s cubic-bezier(.2,1.8,.4,1); }
@keyframes pdDing { 0% { transform: scale(1); } 40% { transform: scale(1.28); color: #fffbe6; } 100% { transform: scale(1); } }
.pd-sub { margin-top: 8px; min-height: 1.4em; color: #e9d9b0; font: 600 15px/1.4 "Microsoft JhengHei", "PingFang TC", sans-serif; animation: pdRise .5s ease-out .7s both; }

/* 按鈕：金底（同 .sh-cbuy 的金） */
.pd-ok { margin-top: 14px; min-width: 160px; padding: 10px 28px; border: 1px solid #fff0b4; border-radius: 10px; cursor: pointer; font: 900 18px/1.2 "Microsoft JhengHei", "PingFang TC", sans-serif; letter-spacing: 4px;
  color: #3a2406; background: linear-gradient(180deg, #fff3c4 0%, #f2c14e 45%, #b7791f 100%); box-shadow: inset 0 1px 0 #fff, 0 2px 0 #5a3a08, 0 4px 12px rgba(0,0,0,.6);
  animation: pdRise .5s ease-out .85s both; }
.pd-ok:active { transform: translateY(1px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 #5a3a08; }
.pd-done .pd-ok { animation: pdBtn 1.6s ease-in-out infinite; }
@keyframes pdBtn { 0%, 100% { box-shadow: inset 0 1px 0 #fff, 0 2px 0 #5a3a08, 0 0 0 0 rgba(255,215,110,.7); } 50% { box-shadow: inset 0 1px 0 #fff, 0 2px 0 #5a3a08, 0 0 0 8px rgba(255,215,110,0); } }

/* 彩帶：整個畫面從上面飄下來，飄完就停（不無限） */
.pd-confs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pd-conf { position: absolute; top: -20px; left: var(--l); width: var(--w); height: calc(var(--w) * 1.8); background: var(--c); border-radius: 1px; opacity: 0;
  animation: pdFall var(--t) cubic-bezier(.25,.4,.5,1) var(--d) both; }
.pd-conf:nth-child(3n) { border-radius: 50%; height: var(--w); }
@keyframes pdFall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--sx), 105vh) rotate(var(--r)); } }

/* 手機直式：卡片窄一點、字小一點 */
@media (max-width: 420px) {
  .pd-card { padding: 14px 14px 18px; }
  .pd-stage { width: 160px; height: 150px; }
  .pd-gem { width: 92px; height: 92px; margin: -50px 0 0 -46px; }
  .pd-title { font-size: 30px; letter-spacing: 8px; padding-left: 8px; }
  .pd-amt b { font-size: 42px; }
}
/* 矮螢幕（手機橫放）：藍鑽區縮小，整張卡放得下 */
@media (max-height: 460px) {
  .pd-stage { height: 110px; } .pd-gem { width: 72px; height: 72px; margin: -38px 0 0 -36px; }
  .pd-title { font-size: 26px; } .pd-amt b { font-size: 36px; } .pd-ok { margin-top: 8px; }
}

/* 不要動畫：直接是結果（JS 那邊也不撒粒子、不跳數字） */
@media (prefers-reduced-motion: reduce) {
  .pd-ov, .pd-card, .pd-rays, .pd-glow, .pd-gem, .pd-gem svg, .pd-gem::after, .pd-title, .pd-amt, .pd-amt b, .pd-sub, .pd-ok, .pd-done .pd-ok { animation: none !important; }
}
.pd-still .pd-rays, .pd-still .pd-glow, .pd-still .pd-gem svg, .pd-still .pd-gem::after { animation: none; }