/* ============================================================
   迭代三十四：激励动效与红包体系（签到金币 / 领红包 / 升级金币雨 / 红包卡片墙 / 票券）
   深海军蓝 + 红金，弹窗与红包为固定品牌配色（跨明暗主题一致）；类名统一 rfx- 前缀。
   ============================================================ */

/* ---------- 通用遮罩与弹窗 ---------- */
.rfx-overlay{position:fixed;inset:0;background:rgba(6,11,25,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:9999;padding:18px}
.rfx-overlay.rfx-show{display:flex;animation:rfxOvIn .25s}
@keyframes rfxOvIn{from{opacity:0}to{opacity:1}}
.rfx-modal{width:min(360px,92vw);border-radius:22px;position:relative;text-align:center;overflow:hidden}
.rfx-close{position:absolute;top:10px;right:12px;width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:18px;z-index:5;line-height:1;font-family:inherit}
.rfx-sound{position:absolute;top:12px;left:12px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#cdd8f5;
  font-size:11px;padding:3px 9px;border-radius:999px;cursor:pointer;font-family:inherit;z-index:5}
.rfx-sound.on{color:#f5c451;border-color:rgba(245,196,81,.6)}

/* ---------- 签到弹窗 ---------- */
.rfx-signin{background:linear-gradient(180deg,#1c2c52,#122044);border:1px solid rgba(245,196,81,.4);
  box-shadow:0 24px 60px rgba(0,0,0,.5);padding:34px 26px 28px}
.rfx-coinBig{width:96px;height:96px;margin:0 auto 14px;position:relative;animation:rfxCoinPop .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes rfxCoinPop{0%{transform:scale(0) rotate(-40deg)}60%{transform:scale(1.18) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.rfx-coinBig svg{width:100%;height:100%;filter:drop-shadow(0 8px 18px rgba(212,160,23,.5))}
.rfx-signin .rfx-ttl{font-size:20px;font-weight:900;color:#f5c451}
.rfx-roll{font-size:46px;font-weight:900;color:#fff;line-height:1.15;margin:6px 0;font-variant-numeric:tabular-nums}
.rfx-roll .plus{color:#f5c451;font-size:30px;vertical-align:6px;margin-right:2px}
.rfx-roll .unit{font-size:15px;color:#9fb0d6;font-weight:500;margin-left:4px}
.rfx-streak{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:#9fb0d6;
  background:rgba(245,196,81,.12);border:1px solid rgba(245,196,81,.3);padding:5px 14px;border-radius:999px;margin:4px 0 18px}
.rfx-streak b{color:#f5c451}
.rfx-know{width:100%;padding:12px;border:none;border-radius:12px;font-family:inherit;font-weight:700;font-size:16px;
  color:#3a2a00;background:linear-gradient(135deg,#ffe08a,#f5c451,#d4a017);cursor:pointer}

/* ---------- 红包弹窗 ---------- */
.rfx-rp{background:linear-gradient(180deg,#e8453c,#a01713);border:1px solid rgba(245,196,81,.55);
  box-shadow:0 24px 60px rgba(160,23,19,.55);padding:30px 26px 26px;color:#ffe9c7}
.rfx-rp .rfx-rpTtl{font-size:19px;font-weight:900;color:#ffe9c7}
.rfx-rp .rfx-rpSub{font-size:12.5px;color:#ffd9b0;opacity:.9;margin-top:4px}
.rfx-redpack{width:176px;height:224px;margin:18px auto 6px;position:relative}
.rfx-rpBody{position:absolute;inset:0;border-radius:16px;background:linear-gradient(180deg,#f0564b,#c81f1a 55%,#a01713);
  box-shadow:inset 0 0 0 1px rgba(245,196,81,.5),0 14px 34px rgba(0,0,0,.4);overflow:hidden}
.rfx-rpBody::before{content:"";position:absolute;top:66px;left:0;right:0;height:26px;background:rgba(0,0,0,.12)}
.rfx-rpFlap{position:absolute;top:0;left:0;right:0;height:96px;transform-origin:top;z-index:3;
  background:linear-gradient(180deg,#e8453c,#c62a22);border-radius:16px 16px 0 0;
  clip-path:ellipse(60% 100% at 50% 0);box-shadow:inset 0 0 0 1px rgba(245,196,81,.45);
  transition:transform .7s cubic-bezier(.5,-.3,.5,1.3)}
.rfx-rpSeal{position:absolute;top:60px;left:50%;transform:translateX(-50%);width:64px;height:64px;border-radius:50%;z-index:4;
  background:radial-gradient(circle at 35% 30%,#ffe08a,#d4a017);display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:900;color:#a01713;box-shadow:0 6px 16px rgba(0,0,0,.35);cursor:pointer;transition:transform .15s}
.rfx-rpSeal:active{transform:translateX(-50%) scale(.92)}
.rfx-redpack.opening .rfx-rpFlap{transform:rotateX(150deg);opacity:0;transition:transform .7s cubic-bezier(.5,-.3,.5,1.3),opacity .35s ease .32s}
.rfx-redpack.opening .rfx-rpSeal{opacity:0;transform:translateX(-50%) scale(.4);transition:.3s}
.rfx-rpAmount{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;
  opacity:0;transform:scale(.6);transition:.4s .45s}
.rfx-redpack.opening .rfx-rpAmount{opacity:1;transform:scale(1)}
.rfx-rpAmount .yuan{font-size:15px;color:#ffe9c7}
.rfx-rpAmount .big{font-size:52px;font-weight:900;color:#fff;line-height:1}
.rfx-rpAmount .cond{font-size:12px;color:#ffd9b0;margin-top:6px}
.rfx-rpHint{font-size:12.5px;color:#ffd9b0;margin:8px 0 16px;min-height:18px}
.rfx-rpKnow{width:100%;padding:11px;border:none;border-radius:12px;font-family:inherit;font-weight:700;font-size:15px;
  color:#a01713;background:linear-gradient(135deg,#ffe08a,#f5c451);cursor:pointer}

/* ---------- 金币粒子 ---------- */
.rfx-particle{position:absolute;top:44%;left:50%;pointer-events:none;z-index:6}
.rfx-particle.coin{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#ffe9a0,#f5c451 55%,#d4a017);
  box-shadow:0 2px 6px rgba(0,0,0,.35),inset 0 0 0 2px rgba(184,134,11,.55)}
.rfx-particle.coin::after{content:"\00A5";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:900;color:#8a5a00}

/* ---------- 升级全屏金币雨 ---------- */
.rfx-upgrade{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,rgba(30,52,104,.92),rgba(6,11,25,.96));overflow:hidden}
.rfx-upgrade.rfx-show{display:flex;animation:rfxOvIn .3s}
.rfx-rainCoin{position:absolute;top:-40px;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#ffe9a0,#f5c451 55%,#d4a017);
  box-shadow:0 2px 8px rgba(0,0,0,.4),inset 0 0 0 2px rgba(184,134,11,.55)}
.rfx-rainCoin::after{content:"\00A5";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:#8a5a00}
.rfx-upCard{position:relative;z-index:2;text-align:center;padding:24px;animation:rfxCoinPop .8s cubic-bezier(.2,1.4,.4,1)}
.rfx-upBadge{width:108px;height:108px;margin:0 auto 14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe9a0,#f5c451 55%,#d4a017);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 8px rgba(245,196,81,.15),0 0 60px rgba(245,196,81,.6)}
.rfx-upBadge svg{width:58px;height:58px}
.rfx-upCard .uTtl{font-size:26px;font-weight:900;color:#f5c451}
.rfx-upCard .uLv{font-size:20px;color:#fff;margin:6px 0 2px;font-weight:700}
.rfx-upCard .uTime{font-size:13px;color:#9fb0d6;margin-bottom:22px}
.rfx-upCard .rfx-know{width:220px;max-width:80vw}

/* ---------- 红包卡片墙（商城） ---------- */
.rfx-rpGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px}
.rfx-redCard{border-radius:16px;overflow:hidden;position:relative;background:linear-gradient(180deg,#f0564b,#c81f1a 60%,#a01713);
  box-shadow:0 12px 30px rgba(160,23,19,.28),inset 0 0 0 1px rgba(245,196,81,.45);display:flex;flex-direction:column}
.rfx-redCard .rcTop{padding:16px 14px 12px;text-align:center;position:relative}
.rfx-rcTag{position:absolute;top:10px;left:10px;font-size:10.5px;background:rgba(245,196,81,.92);color:#a01713;
  font-weight:700;padding:2px 8px;border-radius:999px}
.rfx-rcTag.ex{background:rgba(255,255,255,.2);color:#ffe9c7}
.rfx-rcAmount{display:flex;align-items:flex-start;justify-content:center;color:#fff;margin-top:8px}
.rfx-rcAmount .sym{font-size:20px;font-weight:900;margin-top:6px}
.rfx-rcAmount .num{font-size:52px;font-weight:900;line-height:.9}
.rfx-rcName{font-size:14px;font-weight:700;color:#ffeecf;margin-top:8px}
.rfx-rcCond{font-size:11.5px;color:#ffd9b0;margin-top:2px}
.rfx-rcMid{margin:0 12px;border-top:1px dashed rgba(255,220,160,.5);padding:10px 2px;font-size:11px;color:#ffd9b0;text-align:center;position:relative}
.rfx-rcMid::before,.rfx-rcMid::after{content:"";position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--rfx-page-bg,#0c1730)}
.rfx-rcMid::before{left:-21px}.rfx-rcMid::after{right:-21px}
.rfx-rcBot{padding:0 12px 14px;flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:7px}
.rfx-rcBtn{display:block;width:100%;text-align:center;padding:10px 0;border:none;border-radius:10px;font-family:inherit;font-weight:700;
  font-size:14px;cursor:pointer;text-decoration:none}
.rfx-rcBtn.free{color:#a01713;background:linear-gradient(135deg,#ffe08a,#f5c451)}
.rfx-rcBtn.ex{color:#fff;background:linear-gradient(135deg,#f06a5f,#d33)}
.rfx-rcBtn:disabled{opacity:.55;cursor:not-allowed}
.rfx-rcCost{font-size:11px;color:#ffd9b0;text-align:center}
.rfx-rcCost b{color:#f5c451;font-size:13px}

/* ---------- 我的红包：票券 ---------- */
.rfx-ticketList{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rfx-ticket{display:flex;border-radius:12px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.25);position:relative}
.rfx-ticket .tL{width:108px;flex:none;background:linear-gradient(180deg,#f0564b,#a01713);color:#fff;
  text-align:center;padding:16px 6px;display:flex;flex-direction:column;justify-content:center;position:relative}
.rfx-ticket .tL .sym{font-size:14px}.rfx-ticket .tL .n{font-size:34px;font-weight:900;line-height:1}
.rfx-ticket .tL .cond{font-size:10px;color:#ffd9b0;margin-top:4px}
.rfx-ticket .tR{flex:1;background:linear-gradient(180deg,#1e2d52,#16233f);padding:12px 14px;position:relative;
  border:1px solid rgba(148,178,255,.16);border-left:none;display:flex;flex-direction:column;justify-content:center}
.rfx-ticket .tR .tn{font-size:14px;font-weight:700;color:#eaf0ff}
.rfx-ticket .tR .tm{font-size:11.5px;color:#9fb0d6;margin-top:3px;word-break:break-all}
.rfx-ticket .tR .tuse{margin-top:8px;align-self:flex-start;font-size:12px;color:#f5c451;border:1px solid rgba(245,196,81,.5);
  padding:3px 12px;border-radius:999px;text-decoration:none}
.rfx-stamp{position:absolute;right:10px;top:10px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;z-index:2}
.rfx-stamp.soon{color:#ffb84d;border:1px solid #ffb84d}
.rfx-stamp.expired{color:#7e8db0;border:1px solid #4a5878}
.rfx-stamp.used{color:#5a6a90;border:1px solid #4a5878}
.rfx-stamp.frozen{color:#7fb0ff;border:1px solid #4a78c8}
.rfx-ticket.used .tL,.rfx-ticket.expired .tL{filter:grayscale(.7) brightness(.7)}
.rfx-ruleLine{font-size:12px;color:#9fb0d6;margin-top:16px;text-align:center;line-height:1.8}
.rfx-secTitle{font-size:15px;font-weight:700;margin:6px 2px 12px;display:flex;align-items:center;gap:8px;color:inherit}
.rfx-secTitle::before{content:"";width:4px;height:16px;border-radius:2px;background:#f5c451}

/* ---------- 轻提示 toast ---------- */
#rfxToast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);background:rgba(10,18,38,.94);color:#ffe9c7;
  border:1px solid rgba(245,196,81,.5);padding:10px 18px;border-radius:999px;font-size:13px;z-index:10001;
  opacity:0;transition:opacity .3s;max-width:88vw;text-align:center}
#rfxToast.show{opacity:1}

/* ---------- 通用提示 / 确认框（跟随主题，替代原生 alert/confirm） ---------- */
.rfx-dlg{background:var(--surface,#131f3a);color:var(--text,#eaf0ff);
  border:1px solid var(--line-strong,rgba(148,178,255,.18));box-shadow:0 24px 70px rgba(0,0,0,.55);
  padding:28px 24px 22px;animation:rfxDlgIn .28s cubic-bezier(.2,1.15,.4,1)}
@keyframes rfxDlgIn{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:none}}
.rfx-dlgIco{width:54px;height:54px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
  background:var(--brand-soft,rgba(79,140,255,.16));color:var(--brand,#4f8cff)}
.rfx-dlg.danger .rfx-dlgIco{background:rgba(232,69,60,.14);color:#ff7a70}
.rfx-dlgIco svg{width:27px;height:27px}
.rfx-dlgTtl{font-size:18px;font-weight:800;line-height:1.4;margin-bottom:8px;color:inherit}
.rfx-dlgTxt{font-size:14px;line-height:1.75;color:var(--text2,#aebad6);margin:0 0 22px;word-break:break-word;white-space:pre-wrap}
.rfx-dlgBtns{display:flex;gap:10px}
.rfx-dlgBtns button{flex:1;padding:11px 10px;border-radius:11px;font-family:inherit;font-size:15px;font-weight:700;
  cursor:pointer;border:1px solid transparent;transition:transform .08s,filter .15s}
.rfx-dlgBtns button:active{transform:scale(.97)}
.rfx-dlgCancel{background:transparent;color:var(--text2,#aebad6);border-color:var(--line-strong,rgba(148,178,255,.22))}
.rfx-dlgCancel:hover{color:var(--text,#eaf0ff)}
.rfx-dlgOk{background:var(--brand,#133ab3);color:var(--on-brand,#fff)}
.rfx-dlgOk:hover{filter:brightness(1.08)}
.rfx-dlg.danger .rfx-dlgOk{background:linear-gradient(135deg,#f06a5f,#d8352c);color:#fff}
[data-theme="light"] .rfx-dlg.danger .rfx-dlgIco{background:rgba(232,69,60,.1)}

/* ---------- 降级：减少动态效果 ---------- */
@media (prefers-reduced-motion: reduce){
  .rfx-coinBig,.rfx-upCard{animation:none}
  .rfx-rpFlap,.rfx-rpSeal,.rfx-rpAmount{transition-duration:.01s}
}

/* ---------- 响应式 ---------- */
@media (max-width:860px){.rfx-rpGrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .rfx-rpGrid{grid-template-columns:1fr 1fr;gap:10px}
  .rfx-rcAmount .num{font-size:40px}.rfx-rcAmount .sym{font-size:16px}
  .rfx-ticketList{grid-template-columns:1fr}
  .rfx-dlg{padding:24px 18px 18px}
  .rfx-dlgBtns{flex-direction:column}
  .rfx-dlgBtns button{width:100%}
}