/* ============================================================
   中奖弹窗 · 话费券定制模板（layout = coupon）
   对齐设计稿：中奖弹出框设计需求.png
   ============================================================ */

:root {
  --cp-gold-1: #fffaea;
  --cp-gold-2: #f9e0a8;
  --cp-gold-3: #dfa94e;
  --cp-gold-4: #a9741f;
  --cp-cream-1: #fdf7e9;
  --cp-cream-2: #f0dfbe;
  /* 抛光金属渐变：亮金主体 + 细反射带 + 底部反弹光 */
  --cp-metal-text: linear-gradient(180deg,
    #fffdf4 0%, #fff0bd 14%, #fbdd96 30%, #f0c469 44%,
    #e3b052 52%, #f5d07a 62%, #ffeeb6 76%, #eebb57 90%, #fff8dd 100%);
  --cp-metal-rim: linear-gradient(168deg,
    #fff8de 0%, #f7dc9a 16%, #e8bd66 30%, #d5a247 42%,
    #b9812a 52%, #eec072 64%, #ffeec0 80%, #d09a34 100%);
}

/* ---------- 容器 ---------- */
.dsp-coupon {
  --cp-w: 348px;
  --cut-r: 15px;
  --cut-y: 50%;
  position: relative;
  width: var(--cp-w);
  max-width: 92vw;
  margin: 0 auto;
  isolation: isolate;
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 背景光效 ---------- */
.cp-halo {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 180%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 220, 160, .5) 0%,
    rgba(255, 190, 120, .25) 30%,
    rgba(255, 170, 90, .08) 55%,
    rgba(255, 170, 90, 0) 70%);
  z-index: 0;
  pointer-events: none;
  animation: cpHaloEnter 1.4s ease-out .15s both;
}

@keyframes cpHaloEnter {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.cp-rays {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 340%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    rgba(255, 216, 150, .5) 0deg 3deg, rgba(255, 216, 150, 0) 3deg 12deg,
    rgba(255, 216, 150, .5) 12deg 15deg, rgba(255, 216, 150, 0) 15deg 24deg,
    rgba(255, 216, 150, .5) 24deg 27deg, rgba(255, 216, 150, 0) 27deg 36deg,
    rgba(255, 216, 150, .5) 36deg 39deg, rgba(255, 216, 150, 0) 39deg 48deg,
    rgba(255, 216, 150, .5) 48deg 51deg, rgba(255, 216, 150, 0) 51deg 60deg,
    rgba(255, 216, 150, .5) 60deg 63deg, rgba(255, 216, 150, 0) 63deg 72deg,
    rgba(255, 216, 150, .5) 72deg 75deg, rgba(255, 216, 150, 0) 75deg 84deg,
    rgba(255, 216, 150, .5) 84deg 87deg, rgba(255, 216, 150, 0) 87deg 96deg);
  filter: blur(1.2px);
  opacity: .8;
  z-index: 0;
  pointer-events: none;
  animation:
    cpRaysBurst 1.2s cubic-bezier(.12, .9, .2, 1) .2s both,
    cpSpin 30s linear 1.4s infinite;
}

@keyframes cpRaysBurst {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-30deg); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: .8; }
}

@keyframes cpSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---------- 卡片 ---------- */
.cp-card {
  position: relative;
  z-index: 2;
  padding: 12px;
  border-radius: 28px;
  background:
    linear-gradient(154deg,
      #fff8e2 0%, #f2d091 9%, #c8933e 20%, #ffeec4 31%,
      #dcab57 45%, #fff3d2 58%, #cf9a43 72%, #f8e2b0 86%, #c08b34 100%);
  box-shadow:
    0 30px 64px rgba(0, 0, 0, .68),
    0 0 0 1px rgba(255, 246, 214, .55),
    0 0 80px rgba(255, 168, 76, .5),
    0 0 120px rgba(255, 140, 50, .2);
  animation: cpPunch .75s cubic-bezier(.16, 1.3, .3, 1) .1s both;
}

.cp-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 23px;
  border: 1.5px solid rgba(255, 248, 222, .85);
  box-shadow:
    inset 0 0 18px rgba(255, 216, 152, .5),
    0 0 0 1px rgba(120, 74, 16, .25);
  pointer-events: none;
  z-index: 5;
}

@keyframes cpPunch {
  0% { transform: scale(.25) rotate(-4deg); opacity: 0; }
  40% { opacity: 1; }
  65% { transform: scale(1.06) rotate(1deg); }
  82% { transform: scale(.97) rotate(-.5deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* 深酒红卡面 */
.cp-inner {
  position: relative;
  border-radius: 20px;
  padding: 52px 18px 22px;
  overflow: hidden;
  background:
    radial-gradient(78% 46% at 50% 2%, rgba(255, 176, 120, .38) 0%, rgba(255, 140, 90, 0) 62%),
    radial-gradient(96% 62% at 50% -4%, #b12a3d 0%, #91182a 32%, #6d0f1d 64%, #4d0812 100%),
    linear-gradient(180deg, #81121f 0%, #47060f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 180, .5),
    inset 0 3px 16px rgba(255, 208, 150, .22),
    inset 0 -52px 66px rgba(0, 0, 0, .4);
}

.cp-inner::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 15px;
  border: 1px solid rgba(255, 228, 176, .3);
  pointer-events: none;
  z-index: 4;
}

.cp-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(112% 50% at 50% 0%, rgba(255, 246, 218, .3) 0%, rgba(255, 246, 218, 0) 60%),
    linear-gradient(146deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 22%, rgba(255, 255, 255, 0) 42%),
    radial-gradient(78% 34% at 50% 106%, rgba(255, 176, 96, .22) 0%, rgba(255, 176, 96, 0) 62%);
  z-index: 1;
}

/* 卡内放射光 */
.cp-beams {
  position: absolute;
  left: 50%;
  top: -34%;
  width: 200%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(from 196deg,
    rgba(255, 198, 132, .22) 0deg 2.2deg, rgba(255, 198, 132, 0) 2.2deg 8.6deg,
    rgba(255, 198, 132, .22) 8.6deg 10.8deg, rgba(255, 198, 132, 0) 10.8deg 17deg,
    rgba(255, 198, 132, .22) 17deg 19.2deg, rgba(255, 198, 132, 0) 19.2deg 25.6deg,
    rgba(255, 198, 132, .22) 25.6deg 27.8deg, rgba(255, 198, 132, 0) 27.8deg 34deg);
}

/* ---------- 皇冠 ---------- */
.cp-crown {
  --cw: 196px;
  position: absolute;
  top: calc(8px - var(--cw) * .4803);
  left: 50%;
  width: var(--cw);
  transform: translateX(-50%);
  z-index: 7;
  filter:
    drop-shadow(0 0 9px rgba(255, 206, 128, .5))
    drop-shadow(0 4px 7px rgba(50, 6, 8, .42));
  animation:
    cpCrownDrop .65s cubic-bezier(.34, 1.56, .64, 1) .4s both,
    cpCrownBob 3.8s ease-in-out 1.05s infinite;
}

.cp-crown svg {
  display: block;
  width: 100%;
  height: auto;
}

.cp-crown::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 56%;
  width: calc(var(--cw) * 1.51);
  height: calc(var(--cw) * 1.16);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 200, .68) 0%, rgba(255, 196, 116, .28) 35%, transparent 65%);
  z-index: -1;
  pointer-events: none;
}

@keyframes cpCrownDrop {
  0% { transform: translateX(-50%) translateY(-50px) scale(.6); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}

@keyframes cpCrownBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}

/* ---------- 主标题 ---------- */
.cp-headline {
  position: relative;
  z-index: 3;
  margin: 0;
  padding: 0 2px;
  text-align: center;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 1.5px;
  line-height: 1.18;
  white-space: nowrap;
  background: linear-gradient(180deg, #fffdf5 0%, #ffeec2 26%, #f6cd7d 52%, #d99f42 74%, #ffe9b6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: .8px rgba(104, 30, 6, .42);
  filter:
    drop-shadow(0 2px 0 rgba(112, 40, 10, .35))
    drop-shadow(0 5px 6px rgba(40, 2, 8, .55))
    drop-shadow(0 0 20px rgba(255, 190, 90, .5));
  background-size: 100% 220%;
  animation:
    cpHeadlineReveal .6s ease-out .65s both,
    cpShine 4.2s ease-in-out 1.25s infinite;
}

@keyframes cpHeadlineReveal {
  0% { opacity: 0; transform: translateY(18px) scale(.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cpShine {
  0%, 100% { background-position: 50% 4%; }
  50% { background-position: 50% 72%; }
}

/* ---------- 副标题缎带 ---------- */
.cp-ribbon {
  position: relative;
  z-index: 3;
  width: fit-content;
  max-width: 84%;
  margin: 14px auto 0;
  padding: 6px 26px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 4px;
  text-indent: 4px;
  color: #6b2a06;
  background: linear-gradient(180deg, #ffeec6 0%, #f2c87f 46%, #d2933a 100%);
  border-radius: 3px;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -6px 10px rgba(150, 96, 20, .28);
  text-shadow: 0 1px 0 rgba(255, 245, 218, .6);
  animation: cpRibbonIn .45s ease-out .8s both;
}

.cp-ribbon::before,
.cp-ribbon::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 15px;
  height: calc(100% - 2px);
  background: linear-gradient(180deg, #eab963 0%, #a8711f 100%);
  clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%, 42% 50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
}

.cp-ribbon::before { left: -13px; }
.cp-ribbon::after { right: -13px; transform: scaleX(-1); }

@keyframes cpRibbonIn {
  0% { opacity: 0; transform: scaleX(.3); }
  100% { opacity: 1; transform: scaleX(1); }
}

/* ---------- 券面整体 ---------- */
.cp-stage {
  position: relative;
  z-index: 3;
  margin-top: 14px;
  animation: cpStageIn .55s ease-out .85s both;
}

@keyframes cpStageIn {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 运营商胶囊 */
.cp-carriers {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: -14px;
}

.cp-carrier {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px 5px 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #fff3d9;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(176, 28, 46, .98), rgba(92, 8, 20, .98));
  border: 1px solid rgba(255, 216, 152, .8);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 226, 176, .35);
  white-space: nowrap;
}

.cp-carrier svg { width: 14px; height: 14px; display: block; }

/* 券面 */
.cp-ticket {
  position: relative;
  z-index: 3;
  border-radius: 13px;
  padding: 3px;
  background:
    linear-gradient(180deg, #fff3d2 0%, #f0cb8e 26%, #e3b165 62%, #f6dcaf 100%);
  box-shadow: none;
  -webkit-mask-image:
    radial-gradient(circle var(--cut-r) at 0 var(--cut-y), transparent calc(var(--cut-r) - 1px), #000 calc(var(--cut-r) + .5px)),
    radial-gradient(circle var(--cut-r) at 100% var(--cut-y), transparent calc(var(--cut-r) - 1px), #000 calc(var(--cut-r) + .5px));
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle var(--cut-r) at 0 var(--cut-y), transparent calc(var(--cut-r) - 1px), #000 calc(var(--cut-r) + .5px)),
    radial-gradient(circle var(--cut-r) at 100% var(--cut-y), transparent calc(var(--cut-r) - 1px), #000 calc(var(--cut-r) + .5px));
  mask-composite: intersect;
}

/* 咬口金色弧边 */
.cp-notch {
  position: absolute;
  top: calc(var(--notch-y, 0px) - var(--cut-r));
  width: calc(var(--cut-r) * 2);
  height: calc(var(--cut-r) * 2);
  box-sizing: border-box;
  border-radius: 50%;
  border: 2.5px solid #ffeec2;
  background: transparent;
  /* 不能用 inset 阴影：它会把挖空的半圆内部填实，看起来像贴在券面上的凸点 */
  box-shadow: 0 0 13px rgba(255, 198, 122, .5);
  z-index: 5;
  pointer-events: none;
}

.cp-notch.left { left: calc(var(--cut-r) * -1); clip-path: inset(0 0 0 50%); }
.cp-notch.right { right: calc(var(--cut-r) * -1); clip-path: inset(0 50% 0 0); }

/* 红区 */
.cp-ticket-top {
  position: relative;
  padding: 30px 20px 20px;
  border-radius: 10px 10px 0 0;
  background-image:
    radial-gradient(circle 3.2px at 0 50%, rgba(244, 226, 188, .72) 2.4px, rgba(0, 0, 0, 0) 3.1px),
    radial-gradient(circle 3.2px at 100% 50%, rgba(244, 226, 188, .72) 2.4px, rgba(0, 0, 0, 0) 3.1px),
    radial-gradient(104% 84% at 50% -10%, #cd3f4e 0%, #b02a3a 34%, #8d1526 70%, #6c0d19 100%),
    linear-gradient(180deg, #a01f2f 0%, #7b0f1d 100%);
  background-size: 6.4px 6.4px, 6.4px 6.4px, 100% 100%, 100% 100%;
  background-repeat: repeat-y, repeat-y, no-repeat, no-repeat;
  background-position: left top, right top, center, center;
  box-shadow: inset 0 1px 0 rgba(255, 226, 172, .45);
  overflow: hidden;
}

.cp-ticket-top::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(62% 46% at 46% 34%, rgba(255, 176, 130, .2) 0%, rgba(255, 176, 130, 0) 70%),
    linear-gradient(152deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .04) 24%, rgba(255, 255, 255, 0) 44%);
}

/* 金额 */
.cp-amount {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  line-height: 1;
  animation: cpAmountBounce .55s cubic-bezier(.34, 1.56, .64, 1) 1s both;
}

@keyframes cpAmountBounce {
  0% { opacity: 0; transform: scale(.4); }
  60% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

.cp-amount b {
  font-size: 62px;
  font-weight: 900;
  letter-spacing: -1.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background-image:
    linear-gradient(108deg,
      rgba(255, 255, 255, 0) 38%,
      rgba(255, 255, 255, .38) 45%,
      rgba(255, 251, 232, .82) 50%,
      rgba(255, 255, 255, .38) 55%,
      rgba(255, 255, 255, 0) 62%),
    var(--cp-metal-text);
  background-repeat: no-repeat, no-repeat;
  background-size: 260% 100%, 100% 100%;
  background-position: 0% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(96, 32, 5, .4);
  filter:
    drop-shadow(0 1px 0 rgba(255, 240, 200, .5))
    drop-shadow(0 3px 0 rgba(96, 36, 4, .5))
    drop-shadow(0 7px 9px rgba(40, 2, 8, .62))
    drop-shadow(0 0 16px rgba(255, 200, 100, .34));
  animation: cpMetalSweep 3.8s ease-in-out 1.7s infinite;
}

.cp-amount.is-long b { font-size: 50px; letter-spacing: -1px; }
.cp-amount.is-long i { font-size: 22px; padding-bottom: 3px; }

@keyframes cpMetalSweep {
  0%, 12% { background-position: 0% 0, 0 0; }
  60%, 100% { background-position: 100% 0, 0 0; }
}

.cp-amount i {
  font-style: normal;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .5px;
  white-space: nowrap;
  padding-bottom: 4px;
  background-image:
    linear-gradient(108deg,
      rgba(255, 255, 255, 0) 38%,
      rgba(255, 255, 255, .4) 46%,
      rgba(255, 251, 232, .82) 50%,
      rgba(255, 255, 255, .4) 54%,
      rgba(255, 255, 255, 0) 62%),
    var(--cp-metal-text);
  background-repeat: no-repeat, no-repeat;
  background-size: 260% 100%, 100% 100%;
  background-position: 0% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: .7px rgba(96, 32, 5, .36);
  filter:
    drop-shadow(0 2px 0 rgba(96, 36, 4, .45))
    drop-shadow(0 4px 6px rgba(40, 2, 8, .6));
  animation: cpMetalSweep 3.8s ease-in-out 1.95s infinite;
}

/* 标签 */
.cp-tags {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
  animation: cpTagsIn .4s ease-out 1.15s both;
}

@keyframes cpTagsIn {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.cp-tags span {
  padding: 4px 13px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .6px;
  color: #6d2a05;
  border-radius: 5px;
  background: linear-gradient(180deg, #fff0c9 0%, #f4cf88 46%, #dfa74b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -4px 8px rgba(150, 96, 20, .25),
    0 2px 5px rgba(0, 0, 0, .32);
}

/* 米色脚注区 */
.cp-ticket-foot {
  position: relative;
  padding: 20px 16px 16px;
  border-radius: 0 0 10px 10px;
  background:
    radial-gradient(120% 80% at 50% 0%, #fffdf7 0%, #f8eed8 46%, #ecdcb8 100%);
  animation: cpFootIn .4s ease-out 1.25s both;
}

@keyframes cpFootIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.cp-ticket-foot::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 7px;
  height: 1px;
  background: repeating-linear-gradient(90deg,
    rgba(176, 122, 44, .55) 0 4px, rgba(176, 122, 44, 0) 4px 9px);
}

.cp-ticket-foot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0 0 10px 10px;
  pointer-events: none;
  opacity: .45;
  background-image:
    radial-gradient(circle at 10% 84%, rgba(178, 120, 40, .12) 0 7px, transparent 8px),
    radial-gradient(circle at 90% 18%, rgba(178, 120, 40, .1) 0 6px, transparent 7px),
    radial-gradient(circle at 50% 98%, rgba(178, 120, 40, .08) 0 9px, transparent 10px);
}

.cp-chips {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 6px;
}

.cp-chips span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: #8a3a10;
  border-radius: 5px;
  background: linear-gradient(180deg, #fffdf7, #faf1de);
  border: 1px solid rgba(190, 132, 52, .5);
  box-shadow: 0 1px 2px rgba(120, 70, 20, .12);
  white-space: nowrap;
}

.cp-chips span b {
  color: #a3541a;
  font-weight: 800;
}

.cp-chips svg { width: 11px; height: 11px; display: block; color: #a3541a; }

.cp-note {
  position: relative;
  z-index: 2;
  margin: 11px 0 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.8;
  color: #9a4a1e;
  letter-spacing: .2px;
}

/* ---------- 按钮 ---------- */
.cp-btn {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 14px 0;
  font-family: inherit;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 3px;
  text-indent: 3px;
  cursor: pointer;
  border: 3px solid transparent;
  border-radius: 999px;
  background-image:
    linear-gradient(180deg, #d3293a 0%, #b11626 42%, #8b0c17 78%, #6f0810 100%),
    var(--cp-metal-rim);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 236, 196, .55),
    inset 0 -8px 14px rgba(70, 4, 10, .5),
    0 0 0 1px rgba(96, 44, 4, .35),
    0 0 0 4px rgba(255, 214, 140, .18);
  transition: transform .12s ease;
  animation:
    cpBtnEnter .5s cubic-bezier(.34, 1.56, .64, 1) 1.35s both,
    cpBtnGlow 2.2s ease-in-out 1.85s infinite;
}

.cp-btn span {
  position: relative;
  display: inline-block;
  background-image:
    linear-gradient(108deg,
      rgba(255, 255, 255, 0) 36%,
      rgba(255, 255, 255, .5) 45%,
      rgba(255, 251, 232, .84) 50%,
      rgba(255, 255, 255, .5) 55%,
      rgba(255, 255, 255, 0) 64%),
    var(--cp-metal-text);
  background-repeat: no-repeat, no-repeat;
  background-size: 260% 100%, 100% 100%;
  background-position: 0% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: .35px rgba(88, 22, 4, .32);
  filter:
    drop-shadow(0 1px 0 rgba(255, 240, 200, .55))
    drop-shadow(0 2px 0 rgba(78, 16, 6, .5))
    drop-shadow(0 0 10px rgba(255, 206, 118, .45))
    drop-shadow(0 3px 5px rgba(46, 2, 8, .7));
  animation: cpMetalSweep 3.8s ease-in-out 2.2s infinite;
}

.cp-btn::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 4px;
  height: 34%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.cp-btn:active { transform: scale(.97); }

@keyframes cpBtnEnter {
  0% { opacity: 0; transform: translateY(24px) scale(.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cpBtnGlow {
  0%, 100% {
    box-shadow:
      0 8px 20px rgba(0, 0, 0, .5),
      inset 0 1px 0 rgba(255, 236, 196, .55),
      inset 0 -8px 14px rgba(70, 4, 10, .5),
      0 0 0 1px rgba(96, 44, 4, .35),
      0 0 0 4px rgba(255, 214, 140, .18);
  }
  50% {
    box-shadow:
      0 8px 28px rgba(255, 120, 60, .5),
      inset 0 1px 0 rgba(255, 240, 208, .75),
      inset 0 -8px 14px rgba(70, 4, 10, .5),
      0 0 0 1px rgba(96, 44, 4, .4),
      0 0 0 5px rgba(255, 214, 140, .3),
      0 0 42px rgba(255, 170, 70, .28);
  }
}

/* ---------- 装饰星点 ---------- */
.cp-sparks { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.cp-sparks span {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #ffe9b5;
  box-shadow: 0 0 8px rgba(255, 226, 160, 1), 0 0 16px rgba(255, 200, 120, .5);
  animation: cpTwinkle var(--tw, 2.4s) ease-in-out var(--td, 0s) infinite;
  opacity: 0;
}

@keyframes cpTwinkle {
  0%, 100% { opacity: 0; transform: scale(.4); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* 四角星 */
.cp-star {
  position: absolute;
  z-index: 5;
  width: 22px;
  height: 22px;
  color: #ffd98d;
  filter: drop-shadow(0 0 10px rgba(255, 200, 120, .9));
  pointer-events: none;
  animation:
    cpStarEnter .5s ease-out .9s both,
    cpStarPulse 2.8s ease-in-out 1.4s infinite;
}

.cp-star svg { width: 100%; height: 100%; display: block; }
.cp-star.left { left: 1px; top: 46%; }
.cp-star.right { right: 1px; top: 46%; animation-delay: .9s, 1.4s; }

@keyframes cpStarEnter {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes cpStarPulse {
  0%, 100% { opacity: .5; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ---------- 礼花彩带层 ---------- */
.cp-confetti-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  perspective: 620px;
}

/* 金色缎带 */
.cp-confetti-layer .cp-ribbon-piece {
  position: absolute;
  left: 50%;
  top: 45%;
  width: var(--w, 8px);
  height: var(--h, 30px);
  background-image: linear-gradient(104deg,
    var(--c1, #9a6410) 0%,
    var(--c2, #e8b45e) 16%,
    var(--chi, #fff6da) 30%,
    var(--c2, #e8b45e) 44%,
    var(--c1, #9a6410) 58%,
    var(--c2, #e8b45e) 74%,
    var(--chi, #fff6da) 88%,
    var(--c1, #9a6410) 100%);
  background-size: 260% 100%;
  background-position: 0 0;
  border-radius: var(--br, 1.5px);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg) scale(0);
  box-shadow:
    0 0 7px rgba(255, 205, 115, .42),
    inset 0 0 1.5px rgba(255, 255, 255, .55);
  animation:
    cpBurst var(--bt, .9s) cubic-bezier(.12, .8, .25, 1) var(--d, 0s) both,
    cpFloat var(--ft, 3s) ease-in-out calc(var(--d, 0s) + var(--bt, .9s)) infinite,
    cpSheen var(--st, 1.7s) linear var(--d, 0s) infinite;
}

.cp-confetti-layer .cp-ribbon-piece.flake {
  background-image: linear-gradient(132deg,
    var(--c1, #9a6410) 0%, var(--chi, #fff6da) 34%,
    var(--c2, #e8b45e) 56%, var(--c1, #9a6410) 100%);
  box-shadow: 0 0 9px rgba(255, 216, 132, .55);
}

.cp-confetti-layer .cp-ribbon-piece.dot {
  background-image: radial-gradient(circle at 32% 26%,
    var(--chi, #fff6da) 0%, var(--c2, #e8b45e) 52%, var(--c1, #9a6410) 100%);
  box-shadow: 0 0 10px rgba(255, 216, 132, .6);
}

@keyframes cpSheen {
  0% { background-position: 0% 0; }
  100% { background-position: 260% 0; }
}

@keyframes cpBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(0); }
  12% { opacity: 1; transform: translate(-50%, -50%) rotate(30deg) scale(1); }
  100% { opacity: .95; transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) rotate(var(--r, 180deg)) scale(1); }
}

@keyframes cpFloat {
  0% { transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) rotate(var(--r, 180deg)) rotateX(0deg); }
  25% { transform: translate(calc(-50% + var(--tx, 0px) + var(--sw, 10px)), calc(-50% + var(--ty, 0px) + var(--fall, 20px))) rotate(calc(var(--r, 180deg) + 20deg)) rotateX(54deg); }
  50% { transform: translate(calc(-50% + var(--tx, 0px) - var(--sw, 10px)), calc(-50% + var(--ty, 0px) + calc(var(--fall, 20px) * 2))) rotate(calc(var(--r, 180deg) + 40deg)) rotateX(0deg); }
  75% { transform: translate(calc(-50% + var(--tx, 0px) + var(--sw2, -8px)), calc(-50% + var(--ty, 0px) + calc(var(--fall, 20px) * 3))) rotate(calc(var(--r, 180deg) + 60deg)) rotateX(-54deg); }
  100% { transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px) + calc(var(--fall, 20px) * 4))) rotate(calc(var(--r, 180deg) + 80deg)) rotateX(0deg); opacity: .6; }
}

/* 金色粒子 */
.cp-confetti-layer .cp-particle {
  position: absolute;
  left: var(--px, 50%);
  bottom: -5%;
  width: var(--sz, 4px);
  height: var(--sz, 4px);
  border-radius: 50%;
  background: radial-gradient(circle, #fff8e0 20%, #ffd76e 60%, rgba(255, 200, 80, 0) 100%);
  opacity: 0;
  animation: cpParticleRise var(--pt, 4s) ease-out var(--d, 0s) infinite;
  pointer-events: none;
}

@keyframes cpParticleRise {
  0% { opacity: 0; transform: translateY(0) translateX(0) scale(0); }
  10% { opacity: .9; transform: translateY(calc(var(--rise, -40vh) * .1)) translateX(var(--drift, 10px)) scale(1); }
  40% { opacity: .7; }
  100% { opacity: 0; transform: translateY(var(--rise, -40vh)) translateX(calc(var(--drift, 10px) * -1)) scale(.3); }
}

/* 顶部闪光 */
.cp-flash {
  position: absolute;
  inset: -20% -30%;
  z-index: 8;
  pointer-events: none;
  background: radial-gradient(circle at 50% 30%,
    rgba(255, 250, 230, 1) 0%,
    rgba(255, 230, 170, .8) 12%,
    rgba(255, 200, 120, .4) 30%,
    rgba(255, 170, 80, .1) 50%,
    transparent 70%);
  animation: cpFlash 1s ease-out both;
  mix-blend-mode: screen;
}

@keyframes cpFlash {
  0% { opacity: 0; transform: scale(.15); }
  18% { opacity: 1; transform: scale(.8); }
  40% { opacity: .7; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* ---------- 挂在弹窗里的容器 ---------- */
.result-card.is-coupon {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  max-width: none;
  width: auto;
  transform: none;
  transition: none;
}

.result-card.is-coupon > *:not(.dsp-coupon):not(.modal-close) { display: none !important; }

.result-card.is-coupon .modal-close {
  top: 18px;
  right: 16px;
  z-index: 9;
  width: 28px;
  height: 28px;
  line-height: 24px;
  font-size: 17px;
  color: #ffe6b8;
  background: rgba(62, 6, 12, .55);
  border: 1.5px solid rgba(255, 218, 154, .62);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

/* ---------- 小屏适配 ---------- */
@media (max-width: 380px) {
  .dsp-coupon { --cp-w: 322px; }
  .cp-headline { font-size: 38px; }
  .cp-amount b { font-size: 56px; }
  .cp-amount i { font-size: 23px; }
  .cp-btn { font-size: 18px; }
  .cp-crown { --cw: 176px; }
  .cp-inner { padding-top: 46px; }
}

/* 矮屏（如 iPhone SE）：收一档，保证皇冠不被屏幕顶边裁掉 */
@media (min-width: 381px) and (max-height: 820px) {
  .cp-crown { --cw: 172px; }
}

/* 中等偏矮屏：小幅收紧 */
@media (max-height: 800px) {
  .dsp-coupon { --cp-w: 312px; }
  .cp-headline { font-size: 34px; }
  .cp-amount b { font-size: 50px; }
  .cp-amount i { font-size: 20px; }
  .cp-inner { padding-top: 42px; }
  .cp-crown { --cw: 168px; }
}

/* 矮屏（如 iPhone SE）：整屏收紧，保证皇冠不被屏幕顶边裁掉 */
@media (max-height: 700px) {
  .dsp-coupon { --cp-w: 296px; }
  .cp-headline { font-size: 31px; }
  .cp-amount b { font-size: 46px; }
  .cp-amount i { font-size: 19px; }
  .cp-btn { font-size: 16px; }
  .cp-chips span { font-size: 9px; padding: 3px 5px; }
  .cp-carrier { font-size: 9px; padding: 3px 7px 3px 5px; }
  .cp-ticket-top { padding: 22px 14px 14px; }
  .cp-inner { padding-top: 40px; }
  .cp-crown { --cw: 150px; }
}

@media (max-width: 340px) {
  .dsp-coupon { --cp-w: 300px; }
  .cp-headline { font-size: 34px; }
  .cp-amount b { font-size: 50px; }
  .cp-amount i { font-size: 21px; }
  .cp-chips span { font-size: 9.5px; padding: 3px 6px; }
  .cp-carrier { font-size: 9.5px; padding: 4px 8px 4px 6px; }
  .cp-ticket-top { padding: 26px 16px 18px; }
}

/* 无障碍 */
@media (prefers-reduced-motion: reduce) {
  .cp-rays, .cp-crown, .cp-headline, .cp-btn, .cp-sparks span, .cp-star,
  .cp-card, .cp-halo, .cp-ribbon, .cp-stage, .cp-amount, .cp-tags,
  .cp-ticket-foot, .cp-flash {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .cp-confetti-layer { display: none; }
}