/* M99 H5 Red Packet Rain — 1:1 复刻 App 视觉 (红包+福字+暗红HUD)
   独立文件, 不依赖 app.js。挂载点 #rp-root, 由 redpacket.js 注入。 */
#rp-root, #rp-root * { box-sizing: border-box; }
#rp-root{
  position: fixed; inset: 0; z-index: 99999;
  display: none;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: contain;
}
#rp-root.rp-open{ display: block; }

/* 半透明暗红/黑遮罩 (盖住页面) */
.rp-overlay{
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(120,10,10,.62) 0%, rgba(20,3,3,.86) 60%, rgba(0,0,0,.9) 100%);
  backdrop-filter: blur(1px);
  animation: rp-fade .25s ease-out;
}
@keyframes rp-fade{ from{opacity:0} to{opacity:1} }

/* 顶部 HUD: 暗红圆角条 + 金黄标题 */
.rp-hud{
  position: absolute; top: env(safe-area-inset-top, 0); left: 50%;
  transform: translateX(-50%);
  margin-top: 14px; width: min(92%, 420px);
  background: linear-gradient(180deg, #7a1414 0%, #4a0c0c 100%);
  border: 1px solid rgba(255,210,120,.55);
  border-radius: 16px;
  box-shadow: 0 6px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,220,150,.25);
  padding: 12px 16px 13px; text-align: center; color:#fff;
  z-index: 3;
}
.rp-title{
  font-size: 15px; font-weight: 800; letter-spacing:.5px;
  color:#ffd766; text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.rp-title-cn{ font-size: 20px; font-weight: 900; color:#ffe08a; margin-top:2px; }
.rp-sub{ font-size: 11px; color:#f4d0a8; opacity:.85; margin-top:3px; }
.rp-hud-row{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:9px; gap:8px;
}
.rp-timer{ font-size:13px; font-weight:700; color:#ffe8b0; }
.rp-count{ font-size:13px; font-weight:700; color:#fff; }
.rp-amount{
  font-size:15px; font-weight:900; color:#fff;
  background: rgba(0,0,0,.28); border:1px solid rgba(255,210,120,.4);
  border-radius:10px; padding:3px 10px; min-width:92px;
}
.rp-close{
  position:absolute; top:8px; right:10px; width:26px; height:26px;
  border:none; border-radius:50%; background:rgba(0,0,0,.35);
  color:#ffd; font-size:16px; line-height:24px; cursor:pointer;
}

/* 红包本体 (纯CSS画: 红身+金盖+福字) */
.rp-env{
  position:absolute; top:-90px;
  width:56px; height:74px; will-change:transform;
  cursor:pointer; user-select:none;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.45));
  z-index:2;
}
.rp-env-body{
  position:absolute; inset:0;
  background: linear-gradient(160deg,#e23b34 0%,#c31f1a 55%,#a01512 100%);
  border-radius:9px 9px 10px 10px;
  border:1px solid rgba(120,10,8,.6);
}
/* 顶部金色盖 (半圆) */
.rp-env-flap{
  position:absolute; left:-1px; right:-1px; top:-1px; height:34px;
  background: linear-gradient(180deg,#ffdf7e 0%,#f4b842 70%,#e39c1f 100%);
  border-radius:9px 9px 60% 60%/9px 9px 42% 42%;
  border:1px solid rgba(200,140,20,.6);
}
/* 金色圆扣 */
.rp-env-coin{
  position:absolute; left:50%; top:28px; transform:translateX(-50%);
  width:24px; height:24px; border-radius:50%;
  background: radial-gradient(circle at 38% 32%, #fff2c0 0%, #ffd766 40%, #e0a52a 100%);
  border:1px solid rgba(180,120,20,.7);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:900; color:#b5300f;
  text-shadow:0 1px 0 rgba(255,240,200,.6);
  z-index:2;
}
.rp-env.rp-pop{ animation: rp-pop .32s ease-out forwards; }
@keyframes rp-pop{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.35); filter:brightness(1.6) drop-shadow(0 0 12px #ffd766); }
  100%{ transform: scale(0); opacity:0; }
}

/* 中奖飘字 (点中后从红包位置向上飘) */
.rp-float{
  position:absolute; z-index:4; pointer-events:none;
  font-weight:900; font-size:18px; color:#ffe08a;
  text-shadow:0 2px 6px rgba(0,0,0,.7), 0 0 10px rgba(255,180,60,.6);
  animation: rp-floatup 1s ease-out forwards; white-space:nowrap;
}
@keyframes rp-floatup{
  0%{ transform:translate(-50%,0) scale(.6); opacity:0; }
  20%{ opacity:1; transform:translate(-50%,-8px) scale(1.1); }
  100%{ transform:translate(-50%,-70px) scale(1); opacity:0; }
}

/* 结束/中奖总弹窗 */
.rp-result{
  position:absolute; inset:0; z-index:5;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); animation:rp-fade .2s;
}
.rp-result-card{
  width:min(84%,320px); text-align:center; color:#fff;
  background: linear-gradient(180deg,#8a1717 0%,#5a0d0d 100%);
  border:1px solid rgba(255,210,120,.6); border-radius:20px;
  box-shadow:0 12px 40px rgba(0,0,0,.6);
  padding:26px 22px 22px;
}
.rp-result-emoji{ font-size:44px; }
.rp-result-title{ font-size:19px; font-weight:900; color:#ffe08a; margin-top:6px; }
.rp-result-amt{ font-size:34px; font-weight:900; color:#fff; margin:10px 0 4px; }
.rp-result-note{ font-size:12px; color:#f0c8a0; opacity:.85; }
.rp-result-btn{
  margin-top:18px; width:100%; padding:12px; border:none; border-radius:12px;
  background: linear-gradient(180deg,#ffd766,#e0a52a); color:#6a1010;
  font-size:15px; font-weight:800; cursor:pointer;
}

/* Non-blocking in-game red packet prompt */
.rp-notice{position:fixed;left:14px;right:14px;top:calc(14px + env(safe-area-inset-top,0));z-index:2147483646;padding:14px 14px 13px;border-radius:18px;background:linear-gradient(135deg,rgba(95,0,0,.96),rgba(25,0,0,.94));border:1px solid rgba(255,211,109,.55);box-shadow:0 12px 34px rgba(0,0,0,.45),0 0 20px rgba(255,0,0,.16);color:#fff;font-family:Arial,Helvetica,sans-serif;pointer-events:auto;max-width:460px;margin:0 auto;animation:rpNoticeIn .22s ease-out}
.rp-notice-kicker{font-size:11px;font-weight:900;color:#ffd36d;letter-spacing:.16em;margin-bottom:3px}.rp-notice-title{font-size:17px;font-weight:950;line-height:1.15;padding-right:30px}.rp-notice-body{font-size:12px;color:rgba(255,255,255,.86);line-height:1.35;margin-top:5px;padding-right:8px}.rp-notice-x{position:absolute;right:9px;top:8px;width:30px;height:30px;border:0;border-radius:50%;background:rgba(0,0,0,.28);color:#fff;font-size:22px;line-height:28px}.rp-notice-play{margin-top:10px;border:0;border-radius:999px;background:linear-gradient(180deg,#ffe28a,#ffb629);color:#321500;font-weight:950;padding:9px 16px;box-shadow:0 6px 14px rgba(0,0,0,.25)}
@keyframes rpNoticeIn{from{transform:translateY(-12px);opacity:0}to{transform:translateY(0);opacity:1}}