/* =========================================================
   育人帮 · 回报增强层（滚动自动播放 / 帮忙积分 / 职级晋升 / 玫瑰鲜花 + 掌声）
   只做视觉与反馈增强，不改动既有结构
   ========================================================= */

/* ---------- 1. 滚动自动播放：真实音视频 + 演示视频卡 ---------- */
.media video,.cm-media video{width:100%;display:block;border-radius:12px;background:#000}
/* 自动播放中的音视频：轻描边提示"正在播放" */
.cm-media video.auto-on,.cm-media audio.auto-on{outline:2px solid var(--accent2);outline-offset:2px;border-radius:12px}
/* 浏览器禁止带声自动播放时，给出"点一下开声音"的小提示 */
.ap-sound{position:absolute;right:8px;top:8px;z-index:3;background:rgba(0,0,0,.62);color:#fff;font-size:11.5px;font-weight:700;border-radius:99px;padding:4px 10px;border:none;display:flex;align-items:center;gap:4px;animation:apPulse 1.6s ease-in-out infinite}
@keyframes apPulse{0%,100%{opacity:.85}50%{opacity:1}}
.cm-media,.rw-media-wrap{position:relative}
/* 平铺在信息流里的音视频：进入视野才播放的进度条动画（演示卡片） */
.m-video .v-prog{transform-origin:left center;transform:scaleX(0)}
.m-video.auto-play .v-prog{animation:rwProg 30s linear forwards;background:var(--accent2)}
@keyframes rwProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.m-video.auto-play .v-play{opacity:0;transform:scale(.6);transition:.3s}
.m-voice.auto-play .bars i,.cm-media.auto-play .bars i{animation:rwBar 1.1s ease-in-out infinite alternate}
@keyframes rwBar{from{opacity:.35}to{opacity:.95}}
/* 自动播放中的角标提示 */
.ap-chip{position:absolute;left:8px;top:8px;z-index:3;background:rgba(0,0,0,.55);color:#fff;font-size:10.5px;font-weight:700;border-radius:99px;padding:3px 9px;letter-spacing:.2px}

/* ---------- 2. 我的页：职级 / 积分卡 ---------- */
.rw-rank{background:linear-gradient(135deg,#FFF3E6,#FFE7D6);border:1.5px solid #FFD3B0;border-radius:18px;padding:13px 14px;margin:0 0 14px}
.rw-rank-top{display:flex;align-items:center;gap:10px}
.rw-ic{width:42px;height:42px;flex:none;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;background:linear-gradient(135deg,#FFC46B,#F0902F);color:#fff;box-shadow:0 4px 12px rgba(240,144,47,.32)}
.rw-rank-name{font-weight:800;font-size:15px;line-height:1.3;display:flex;align-items:center;gap:6px}
.rw-lv{font-size:10.5px;font-weight:800;color:#B4691F;background:rgba(255,255,255,.85);border-radius:99px;padding:2px 8px}
.rw-rank-sub{font-size:11.5px;color:#8A6A4E;margin-top:3px}
.rw-pts{margin-left:auto;text-align:right;flex:none}
.rw-pts b{font-size:19px;color:#E0662A;line-height:1}
.rw-pts span{display:block;font-size:10.5px;color:#8A6A4E;margin-top:2px}
.rw-bar{height:8px;border-radius:99px;background:#fff;margin:11px 0 8px;overflow:hidden}
.rw-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#FFB25E,#F0543C);transition:width .6s cubic-bezier(.2,1,.3,1)}
.rw-tip{font-size:11.5px;color:#8A6A4E;line-height:1.7}
.rw-tip b{color:#C2552F}
#phone[data-elder="1"] .rw-rank-name{font-size:17px}
#phone[data-elder="1"] .rw-tip,#phone[data-elder="1"] .rw-rank-sub,#phone[data-elder="1"] .rw-pts span{font-size:13px}
#phone[data-elder="1"] .rw-pts b{font-size:22px}

/* ---------- 3. 大大的玫瑰鲜花 + 掌声（复用 #gift 层） ---------- */
#gift.rw-big .gift-inner{animation:rwPop .5s cubic-bezier(.2,1.3,.4,1)}
@keyframes rwPop{0%{transform:scale(.86)}100%{transform:scale(1)}}
/* 玫瑰本体是 SVG（容器 150px），放大要靠容器宽度 + 光晕，而不是 font-size */
#gift.rw-big .rose{width:236px;margin-bottom:16px;filter:drop-shadow(0 14px 30px rgba(231,93,124,.5));animation:sway 3.2s ease-in-out infinite,rwBloom .7s cubic-bezier(.2,1.4,.4,1)}
#gift.rw-big .rose svg{width:100%;height:auto}
@keyframes rwBloom{0%{transform:scale(.55) rotate(-14deg)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
#gift.rw-big .g-title{font-size:30px;text-shadow:0 4px 18px rgba(255,120,150,.55)}
/* 满屏大玫瑰：从下方升起 + 放大 + 摇摆 */
.rw-roses{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.rw-roses span{position:absolute;bottom:-90px;animation:rwRose 4.6s ease-out forwards;will-change:transform,opacity}
@keyframes rwRose{
  0%{transform:translateY(0) scale(.5) rotate(-8deg);opacity:0}
  18%{opacity:1}
  60%{transform:translateY(-46vh) scale(1.12) rotate(10deg);opacity:1}
  100%{transform:translateY(-86vh) scale(1.5) rotate(-12deg);opacity:0}
}
/* 积分飘字 */
.rw-gain{position:absolute;left:50%;top:52%;transform:translateX(-50%);font-size:15px;font-weight:800;color:#fff;background:linear-gradient(135deg,#FF8A5C,#F0543C);border-radius:99px;padding:8px 16px;box-shadow:0 8px 22px rgba(240,84,60,.36);animation:rwGain 2.6s ease-out forwards}
@keyframes rwGain{0%{transform:translate(-50%,10px) scale(.7);opacity:0}18%{transform:translate(-50%,0) scale(1);opacity:1}80%{opacity:1}100%{transform:translate(-50%,-30px) scale(1);opacity:0}}
/* 晋升：金色光环 + 肩章 */
#gift.rw-up .gift-inner{background:linear-gradient(160deg,#FFF9EC,#FFF1D6);border-color:#FFD98A}
#gift.rw-up .g-title{color:#B4691F}
.rw-up-badge{display:inline-flex;align-items:center;gap:6px;margin:8px auto 0;background:linear-gradient(135deg,#FFCB6B,#F0A22F);color:#fff;font-weight:800;font-size:13px;border-radius:99px;padding:6px 15px;box-shadow:0 6px 18px rgba(240,162,47,.4)}
.rw-rays{position:absolute;inset:-30% -30% auto auto;width:70%;height:70%;background:radial-gradient(circle at 50% 50%,rgba(255,203,107,.55),transparent 62%);animation:rwRays 2.4s ease-out infinite;pointer-events:none}
@keyframes rwRays{0%{transform:scale(.6);opacity:0}40%{opacity:.9}100%{transform:scale(1.25);opacity:0}}
/* 掌声提示（挂在 #gift 层底部，避开中央卡片；可点击立即停止） */
.rw-clap{position:absolute;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:5;font-size:11.5px;color:rgba(255,255,255,.92);background:rgba(0,0,0,.42);border-radius:99px;padding:6px 14px;pointer-events:auto;cursor:pointer;white-space:nowrap}

@media (prefers-reduced-motion: reduce){
  .rw-roses span,.rw-gain,.rw-rays{animation-duration:.01ms!important}
}