/*
 * 比牌特效：报到横幅、打枪（准星、枪口闪光、抖动、弹孔）、全垒打横幅。
 * 时间由 app.js 按 rules.js 的 revealPlan 控制（负的 animation-delay 让重绘时不会从头播放）。
 */

/* ---------- 中间大特效的图层 ---------- */
.fx-layer { position: absolute; inset: 0; z-index: 25; pointer-events: none; overflow: hidden; }

/* 横幅：报到 / 全垒打 */
.fx-banner {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: max-content; max-width: 92%; min-width: 40%; padding: 14px 40px 12px; text-align: center; border-radius: 22px;
  background: radial-gradient(ellipse at center, rgba(90, 30, 150, .95), rgba(25, 8, 60, .95));
  border: 2px solid #ffd76a; box-shadow: 0 0 40px rgba(255, 184, 0, .55), 0 0 0 8px rgba(255, 215, 106, .12);
  overflow: visible;
}
.fx-banner.hr { border-color: #ff5ad2; box-shadow: 0 0 50px rgba(255, 90, 210, .7), 0 0 0 10px rgba(255, 90, 210, .15); }
.fx-title {
  position: relative; white-space: nowrap; font-size: clamp(28px, calc(var(--gh) * .12), 46px); font-weight: 900; font-style: italic; letter-spacing: 6px; line-height: 1.1;
  background: linear-gradient(#fffbe0, #ffd34d 45%, #ff9a1a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #7a3b00) drop-shadow(0 0 14px rgba(255, 184, 0, .8));
}
.fx-banner.hr .fx-title { font-size: clamp(32px, calc(var(--gh) * .14), 54px); background: linear-gradient(#fff, #ffb3e6 40%, #ff4fa0); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 0 #6a0b40) drop-shadow(0 0 16px rgba(255, 90, 210, .9)); }
.fx-sub { position: relative; white-space: nowrap; margin-top: 4px; font-size: 14px; font-weight: 700; color: #ffe9b0; letter-spacing: 1px; }
/* 背后旋转的光芒 */
.fx-rays {
  position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 215, 106, .28) 0deg 9deg, transparent 9deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%);
  animation: spin 6s linear infinite;
}
.fx-banner.hr .fx-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 90, 210, .32) 0deg 8deg, transparent 8deg 18deg); animation-duration: 3s; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes banner {
  0% { transform: translate(-50%, -50%) scale(.2) rotate(-8deg); opacity: 0; }
  14% { transform: translate(-50%, -50%) scale(1.12) rotate(2deg); opacity: 1; }
  24% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  82% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.08); opacity: 0; }
}

/* 光点炸开 */
.fx-sparks { position: absolute; left: 50%; top: 46%; width: 0; height: 0; }
.fx-sparks i {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, #ffd34d 40%, rgba(255, 90, 210, 0) 70%);
}
.fx-sparks i:nth-child(3n) { background: radial-gradient(circle, #fff 0 30%, #7af3ff 40%, transparent 70%); }
.fx-sparks i:nth-child(3n+1) { background: radial-gradient(circle, #fff 0 30%, #ff5ad2 40%, transparent 70%); }
@keyframes burst {
  0% { transform: translate(0, 0) scale(.3); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(1.4); opacity: 0; }
}

/* 打枪字幕 */
.fx-caption {
  position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); white-space: nowrap;
  padding: 6px 18px; border-radius: 999px; font-size: 15px; font-weight: 800;
  background: linear-gradient(90deg, rgba(255, 79, 160, .92), rgba(255, 154, 60, .92)); color: #fff;
  box-shadow: 0 0 20px rgba(255, 90, 210, .7); text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
@keyframes caption {
  0% { transform: translateX(-50%) translateY(20px); opacity: 0; }
  15% { transform: translateX(-50%) translateY(0); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(-50%) translateY(-6px); opacity: 0; }
}

/* 全垒打：全屏闪一下 */
.fx-screenflash { position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 180, 230, .6) 60%, rgba(255, 90, 210, .2)); }
@keyframes screenFlash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- 结算块上的特效 ---------- */
/* 打枪的人：倾斜的金红大字「打枪！」 */
.fx-shooter {
  position: absolute; z-index: 8; left: 50%; top: 4px; margin-left: -48px; white-space: nowrap;
  font-size: clamp(20px, calc(var(--gh) * .075), 30px); font-weight: 900; font-style: italic; letter-spacing: 2px;
  background: linear-gradient(#fff6c2, #ffb800 45%, #ff4f4f); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #6b0f1f) drop-shadow(0 0 10px rgba(255, 90, 90, .9));
}
@keyframes gunBadge {
  0% { transform: scale(.2) rotate(-25deg); opacity: 0; }
  14% { transform: scale(1.35) rotate(-6deg); opacity: 1; }
  26% { transform: scale(1) rotate(-8deg); }
  44% { transform: scale(1.12) rotate(-8deg); }
  52% { transform: scale(1) rotate(-8deg); }
  82% { opacity: 1; }
  100% { transform: scale(1) rotate(-8deg) translateY(-8px); opacity: 0; }
}

/* ---------- 动态手枪 ---------- */
/* 外层：定位 + 瞄准角度（JS 设置 --ang、--flip）；中层：出枪 / 收枪；内层：开枪后坐 */
.fx-gun {
  position: absolute; z-index: 9; width: calc(120px * var(--gunk, 1)); height: calc(70px * var(--gunk, 1));
  margin: calc(-35px * var(--gunk, 1)) 0 0 calc(-48px * var(--gunk, 1));
  transform-origin: 40% 50%; transform: rotate(var(--ang, 0rad)) scaleY(var(--flip, 1));
}
.gun-pop, .gun-recoil { position: absolute; inset: 0; transform-origin: 40% 50%; }
.gun-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px rgba(255, 215, 106, .7)) drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
@keyframes gunPop {
  0% { transform: scale(0) rotate(-40deg); opacity: 0; }
  16% { transform: scale(1.2) rotate(8deg); opacity: 1; }
  28% { transform: scale(1) rotate(0); }
  82% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.5) rotate(-10deg); opacity: 0; }
}
/* 后坐：往后一顿、枪口上扬再回来 */
@keyframes recoil {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-12%, 0) rotate(-24deg); }
  100% { transform: translate(0, 0) rotate(0); }
}
/* 枪口火光：星形 */
.gun-flash {
  position: absolute; left: 96%; top: 25.7%; width: 46%; height: 80%; margin: -40% 0 0 -6%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 10%, #fff3a0 18%, rgba(255, 170, 40, .9) 30%, rgba(255, 90, 20, .5) 45%, transparent 62%);
  clip-path: polygon(0 50%, 38% 38%, 50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%);
}
@keyframes muzzleStar { 0% { transform: scale(.2); opacity: 0; } 1% { transform: scale(.25); opacity: 1; } 40% { transform: scale(1.3) rotate(15deg); opacity: 1; } 100% { transform: scale(1.7) rotate(30deg); opacity: 0; } }
/* 烟 */
.gun-smoke {
  position: absolute; left: 96%; top: 25.7%; width: 26%; height: 44%; margin: -22% 0 0 -6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(230, 225, 240, .75), rgba(200, 190, 220, .3) 55%, transparent 72%);
}
@keyframes smoke { 0% { transform: scale(.3); opacity: 0; } 2% { transform: scale(.32); opacity: .85; } 100% { transform: translate(30%, -90%) scale(2.2); opacity: 0; } }
/* 弹壳：从抛壳口弹出，翻滚落下 */
.gun-shell {
  position: absolute; left: 60%; top: 18%; width: 5%; height: 12%; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, #fff1a8, #d39b17 60%, #8a5a00);
}
@keyframes shell {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  2% { transform: translate(0, 0) rotate(0); opacity: 1; }
  45% { transform: translate(-60%, -380%) rotate(380deg); opacity: 1; }
  100% { transform: translate(-150%, 260%) rotate(760deg); opacity: 0; }
}
/* 子弹轨迹：从枪口飞到被打的人 */
.fx-tracer { position: absolute; z-index: 8; height: 4px; margin-top: -2px; transform-origin: 0 50%; transform: rotate(var(--ang, 0rad)); pointer-events: none; }
.fx-tracer i {
  position: absolute; inset: 0; transform-origin: 0 50%; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff8c8 30%, #fff 90%, rgba(255, 255, 255, 0));
  box-shadow: 0 0 10px #ffd34d, 0 0 18px rgba(255, 140, 40, .8);
}
@keyframes tracer { 0% { transform: scaleX(0); opacity: 0; } 1% { transform: scaleX(.02); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* 被打的人：准星锁定 */
.fx-crosshair {
  position: absolute; z-index: 6; left: 50%; top: 50%; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%;
  border: 3px solid #ff3b5c; box-shadow: 0 0 12px rgba(255, 59, 92, .9), inset 0 0 12px rgba(255, 59, 92, .5);
}
.fx-crosshair::before, .fx-crosshair::after { content: ""; position: absolute; background: #ff3b5c; box-shadow: 0 0 6px #ff3b5c; }
.fx-crosshair::before { left: 50%; top: -14px; bottom: -14px; width: 3px; margin-left: -1.5px; }
.fx-crosshair::after { top: 50%; left: -14px; right: -14px; height: 3px; margin-top: -1.5px; }
@keyframes aim {
  0% { transform: scale(3) rotate(-120deg); opacity: 0; }
  55% { transform: scale(1) rotate(0); opacity: 1; }
  70% { transform: scale(.85); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* 枪口闪光 */
.fx-flash {
  position: absolute; z-index: 7; left: 50%; top: 50%; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 12%, rgba(255, 230, 120, .95) 22%, rgba(255, 120, 40, .6) 45%, transparent 70%);
}
/* 注意：用 both 填充的特效，第一帧必须透明，否则等待期间会以第一帧的样子提前露出来 */
@keyframes muzzle { 0% { transform: scale(.2); opacity: 0; } 1% { transform: scale(.25); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* 被打后整块抖一下 */
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-6px, 2px) rotate(-1deg); }
  35% { transform: translate(5px, -3px) rotate(1deg); }
  55% { transform: translate(-4px, 2px); }
  75% { transform: translate(3px, -1px); }
}

/* 弹孔：每道一个，一直留着 */
.fx-holes { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.fx-holes i {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle, #0a0410 0 28%, #3a2b45 34%, rgba(255, 255, 255, .55) 40%, rgba(255, 255, 255, 0) 62%);
}
/* 裂纹 */
.fx-holes i::before, .fx-holes i::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 1.5px; margin: -.75px 0 0 -13px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
}
.fx-holes i::before { transform: rotate(35deg); }
.fx-holes i::after { transform: rotate(-50deg); }
.fx-holes i:nth-child(1) { left: 24%; top: 30%; }
.fx-holes i:nth-child(2) { left: 58%; top: 52%; }
.fx-holes i:nth-child(3) { left: 36%; top: 74%; }
@keyframes holeIn { 0% { transform: scale(2.4); opacity: 0; } 60% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* 报到的人：结算块金色发光边框（一直保持） */
.fx-spglow {
  position: absolute; inset: -1px; z-index: 0; border-radius: inherit; pointer-events: none;
  border: 2px solid #ffd76a; box-shadow: 0 0 18px rgba(255, 184, 0, .65), inset 0 0 22px rgba(255, 184, 0, .25);
  animation: spPulse 2.4s ease-in-out infinite;
}
@keyframes spPulse { 50% { box-shadow: 0 0 28px rgba(255, 184, 0, .9), inset 0 0 26px rgba(255, 184, 0, .35); } }
.rblock.sp .spbadge { font-size: 20px; font-style: italic; }

/* 关掉动画时不显示这些特效（结算块上的弹孔、金边保留） */
.no-anim .fx-layer { display: none; }

/* ---------- 互动道具 ---------- */
#propfx { position: absolute; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
/* 飞行中的道具：位置全靠 JS 的 transform，自己居中 */
.pfly { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; font-size: 32px; line-height: 40px; text-align: center; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); will-change: transform; }
/* 落点：以对方头像中心为原点 */
.phit { position: absolute; width: 0; height: 0; }
.phit i { position: absolute; left: 0; top: 0; font-style: normal; line-height: 1; transform: translate(-50%, -50%); }
.phit .pmain { font-size: 36px; animation: pMain 900ms ease-out both; }
.phit .pbit { font-size: 16px; opacity: 0; animation: pBit 1100ms ease-out both; }
@keyframes pMain { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; } 60% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1.2); opacity: 0; } }
@keyframes pBit { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1) rotate(160deg); opacity: 0; } }

/* 鸡蛋：碎开，蛋清蛋黄糊在头像上往下流 */
.phit-egg .pmain, .phit-tomato .pmain { animation: pSmash 380ms ease-out both; }
@keyframes pSmash { 0% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; } 100% { transform: translate(-50%, -40%) scale(1.6, .5); opacity: 0; } }
.phit .pstain { width: 54px; height: 50px; border-radius: 48% 52% 45% 55% / 55% 45% 58% 42%; animation: pStain 4200ms ease-out both; }
.phit-egg .pstain { background: radial-gradient(circle at 50% 45%, #ffcc1e 0 22%, #ffe266 26%, rgba(255, 255, 240, .92) 30% 62%, rgba(255, 255, 240, 0) 66%); }
.phit-egg .pstain::after, .phit-tomato .pstain::after { content: ''; position: absolute; left: 44%; top: 70%; width: 10px; height: 22px; border-radius: 0 0 6px 6px; background: inherit; animation: pDrip 4200ms ease-in both; }
.phit-tomato .pstain { background: radial-gradient(circle at 50% 50%, #e8202f 0 30%, #ff4b4b 38%, rgba(255, 60, 60, .8) 52%, rgba(255, 60, 60, 0) 66%); }
.phit-tomato .pstain::before { content: ''; position: absolute; inset: -14px; background:
  radial-gradient(circle at 10% 30%, #ff3d3d 0 5px, transparent 6px), radial-gradient(circle at 85% 20%, #ff3d3d 0 4px, transparent 5px),
  radial-gradient(circle at 90% 80%, #ff3d3d 0 6px, transparent 7px), radial-gradient(circle at 15% 85%, #ff3d3d 0 4px, transparent 5px); }
@keyframes pStain { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 8% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 14% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -40%) scale(1); opacity: 0; } }
@keyframes pDrip { 0%, 10% { transform: scaleY(.2); transform-origin: top; } 70% { transform: scaleY(1.6); } 100% { transform: scaleY(1.8); } }

/* 飞吻：唇印留在头像上 */
.phit-kiss .pstain { width: 30px; height: 20px; background: none; animation: pStain 2200ms ease-out both; }
.phit-kiss .pstain::after { content: '💋'; position: absolute; left: 0; top: -4px; font-size: 26px; opacity: .85; transform: rotate(-12deg); }

/* 炸弹：白光、火球、黑烟 */
.phit-bomb .pmain { animation: pSmash 260ms ease-out both; }
.phit-bomb .pstain { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #fff 0 12%, #fff3a0 20%, #ff9a2e 34%, #ff4b1f 46%, rgba(80, 20, 10, .7) 58%, rgba(40, 30, 30, .5) 66%, transparent 72%); animation: pBoom 4200ms ease-out both; }
@keyframes pBoom { 0% { transform: translate(-50%, -50%) scale(.1); opacity: 0; } 4% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: none; } 18% { transform: translate(-50%, -50%) scale(1.3); opacity: .9; filter: grayscale(.6) brightness(.5); }
  40% { transform: translate(-50%, -62%) scale(.7); opacity: .7; filter: grayscale(1) brightness(.35); } 100% { transform: translate(-50%, -90%) scale(.9); opacity: 0; filter: grayscale(1) brightness(.3); } }

/* 干杯：杯子碰一下 */
.phit-beer .pmain { animation: pClink 900ms ease-out both; }
@keyframes pClink { 0% { transform: translate(-50%, -50%) scale(.5) rotate(-30deg); opacity: 0; } 30% { transform: translate(-50%, -50%) scale(1.4) rotate(18deg); opacity: 1; } 55% { transform: translate(-50%, -50%) scale(1.2) rotate(-10deg); } 100% { transform: translate(-50%, -70%) scale(1.1) rotate(0); opacity: 0; } }

/* ---------- 玩家资料卡 ---------- */
[data-action="profile"] { cursor: pointer; }
.profile { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
.profile .avatar { width: 52px; height: 52px; font-size: 22px; }
.profile .pinfo { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.profile .pinfo > b { font-size: 16px; color: var(--text); }
.propgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.propbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 12px; cursor: pointer; color: #fff; font-size: 11px; font-weight: 800;
  background: linear-gradient(180deg, #3b1b7a, #26105a); border: 1px solid rgba(255, 215, 106, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 0 rgba(0, 0, 0, .35); }
.propbtn i { font-style: normal; font-size: 24px; line-height: 1; }
.propbtn:active { transform: translateY(1px) scale(.96); box-shadow: none; }

/* ---------- 互动道具（第二版：更炫） ---------- */
.pfly { font-size: 34px; filter: drop-shadow(0 0 8px var(--glow, #fff)) drop-shadow(0 0 16px var(--glow, #fff)) drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
/* 光尾 */
#propfx .ptrail { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%;
  background: radial-gradient(circle, #fff 0 20%, var(--c) 45%, transparent 72%); box-shadow: 0 0 10px var(--c); animation: pTrail 600ms ease-out forwards; }
@keyframes pTrail { from { transform: scale(1.2); opacity: .95; } to { transform: scale(.2); opacity: 0; } }
/* 落点：光晕 + 两圈冲击波 */
.phit .pglow { width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 12%, var(--c) 30%, transparent 68%); animation: pGlow 650ms ease-out both; }
@keyframes pGlow { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; } }
.phit .pring { width: 70px; height: 70px; border-radius: 50%; border: 3px solid var(--c); box-shadow: 0 0 12px var(--c), inset 0 0 10px var(--c); animation: pRing 700ms ease-out both; }
.phit .pring.r2 { animation-delay: 140ms; border-width: 2px; }
@keyframes pRing { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } }
/* 点赞：一圈金色光芒转一下 */
.phit .prays { width: 140px; height: 140px; border-radius: 50%; animation: pRays 1100ms ease-out both;
  background: repeating-conic-gradient(rgba(255, 220, 90, .55) 0 10deg, transparent 10deg 30deg); -webkit-mask: radial-gradient(circle, transparent 18%, #000 30%, transparent 70%); mask: radial-gradient(circle, transparent 18%, #000 30%, transparent 70%); }
@keyframes pRays { 0% { transform: translate(-50%, -50%) scale(.3) rotate(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.2) rotate(90deg); opacity: 0; } }
/* 主体：弹出放大再消失 */
.phit .pmain { font-size: 40px; filter: drop-shadow(0 0 10px var(--c)); animation: pMain2 1000ms cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes pMain2 { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.6); opacity: 1; } 45% { transform: translate(-50%, -50%) scale(1.15); } 75% { opacity: 1; } 100% { transform: translate(-50%, -75%) scale(1.25); opacity: 0; } }
/* 碎片：四散飞出并旋转 */
.phit .pbit { opacity: 0; animation: pBit2 1200ms cubic-bezier(.15, .8, .3, 1) both; filter: drop-shadow(0 0 4px var(--c)); }
@keyframes pBit2 { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1) rotate(var(--r)); opacity: 0; } }
/* 鲜花：花瓣从上面飘落 */
.phit .prain { opacity: 0; font-size: 16px; animation: pRain var(--d) ease-in both; }
@keyframes pRain { 0% { transform: translate(calc(-50% + var(--x)), -90px) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--x) * 1.3), 50px) rotate(220deg); opacity: 0; } }
/* 干杯：两个杯子从两边撞到一起 */
.phit .pmug { font-size: 34px; filter: drop-shadow(0 0 8px var(--c)); }
.phit .pmug.l { animation: pMugL 1100ms ease-out both; }
.phit .pmug.r { animation: pMugR 1100ms ease-out both; }
@keyframes pMugL { 0% { transform: translate(-150%, -50%) rotate(-30deg); opacity: 0; } 30% { transform: translate(-85%, -55%) rotate(18deg); opacity: 1; } 45% { transform: translate(-100%, -50%) rotate(8deg); } 80% { opacity: 1; } 100% { transform: translate(-100%, -75%) rotate(0); opacity: 0; } }
@keyframes pMugR { 0% { transform: translate(50%, -50%) scaleX(-1) rotate(-30deg); opacity: 0; } 30% { transform: translate(-15%, -55%) scaleX(-1) rotate(18deg); opacity: 1; } 45% { transform: translate(0, -50%) scaleX(-1) rotate(8deg); } 80% { opacity: 1; } 100% { transform: translate(0, -75%) scaleX(-1) rotate(0); opacity: 0; } }
/* 字幕：漫画风的大字 */
.phit .pword { position: absolute; left: 0; top: -38px; white-space: nowrap; font-size: 18px; font-weight: 900; font-style: italic; color: #fff;
  -webkit-text-stroke: 1px rgba(0, 0, 0, .5); text-shadow: 0 0 8px var(--c), 0 2px 0 rgba(0, 0, 0, .5); animation: pWord 1300ms cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes pWord { 0% { transform: translate(-50%, 10px) scale(.3) rotate(-10deg); opacity: 0; } 22% { transform: translate(-50%, 0) scale(1.25) rotate(-6deg); opacity: 1; } 40% { transform: translate(-50%, 0) scale(1) rotate(-6deg); } 80% { opacity: 1; } 100% { transform: translate(-50%, -14px) scale(1) rotate(-6deg); opacity: 0; } }
/* 炸弹：全屏闪光 */
#propfx .pflash { position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 255, 255, .85), rgba(255, 170, 60, .45) 60%, rgba(255, 90, 30, .1)); animation: pFlash 650ms ease-out forwards; }
@keyframes pFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.phit-bomb .pglow { width: 150px; height: 150px; }
.phit-bomb .pring { border-width: 4px; }

/* ---------- 全垒打：聚光灯打在这个人身上 ---------- */
/* 全场变暗，只有主角头像那一圈亮 */
.hr-spot { position: absolute; inset: 0; --x: 50%; --y: 50%;
  background: radial-gradient(circle at var(--x) var(--y), transparent 0 46px, rgba(255, 200, 80, .18) 58px, rgba(6, 0, 18, .78) 150px); }
@keyframes hrSpot { 0% { opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.fx-screenflash.hr { background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 215, 106, .55) 55%, rgba(255, 90, 210, .15)); }

/* 主角：所有东西都以头像中心为原点 */
.hr-hero { position: absolute; width: 0; height: 0; }
.hr-hero > i { position: absolute; left: 0; top: 0; }
.hr-rays { width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 215, 106, .55) 0deg 7deg, transparent 7deg 16deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 66%); mask: radial-gradient(circle, #000 12%, transparent 66%); }
@keyframes hrRays {
  0% { transform: scale(.2) rotate(0); opacity: 0; } 10% { transform: scale(1.1) rotate(30deg); opacity: 1; }
  85% { transform: scale(1) rotate(250deg); opacity: 1; } 100% { transform: scale(1.2) rotate(290deg); opacity: 0; } }
.hr-glow { width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; border: 3px solid #ffd76a;
  box-shadow: 0 0 18px 6px rgba(255, 200, 60, .9), inset 0 0 14px rgba(255, 215, 106, .8); }
@keyframes hrGlow {
  0% { transform: scale(2.4); opacity: 0; } 10% { transform: scale(.9); opacity: 1; } 16% { transform: scale(1.06); }
  50% { transform: scale(1); } 60% { transform: scale(1.08); } 85% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
.hr-ring { width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 4px solid #ffe27a; box-shadow: 0 0 14px #ffb800; }
@keyframes hrRing { 0% { transform: scale(.4); opacity: 0; } 1% { transform: scale(.4); opacity: 1; } 100% { transform: scale(6); opacity: 0; border-width: 1px; } }
.hr-crown { width: 64px; margin: -88px 0 0 -32px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)) drop-shadow(0 0 10px rgba(255, 200, 60, .9)); }
.hr-crown svg { display: block; width: 100%; height: auto; }
@keyframes hrCrown {
  0% { transform: translateY(-160px) rotate(-25deg) scale(1.6); opacity: 0; } 14% { transform: translateY(6px) rotate(6deg) scale(1); opacity: 1; }
  20% { transform: translateY(-4px) rotate(-3deg); } 26% { transform: none; } 88% { transform: none; opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
.hr-sparks { left: 0; top: 0; }

/* 光柱：从主角打到每个对手 */
.hr-beam { position: absolute; height: 0; transform-origin: 0 0; transform: rotate(var(--ang)); }
.hr-beam i { position: absolute; left: 0; top: -5px; width: 100%; height: 10px; border-radius: 6px; transform-origin: left center;
  background: linear-gradient(90deg, rgba(255, 246, 176, .2), #fff 30%, #ffd34d 70%, #ff4fa0);
  box-shadow: 0 0 12px 4px rgba(255, 200, 60, .85), 0 0 26px 8px rgba(255, 90, 210, .5); }
@keyframes hrBeam { 0% { transform: scaleX(0); opacity: 0; } 1% { transform: scaleX(0); opacity: 1; } 35% { transform: scaleX(1); opacity: 1; } 70% { opacity: .9; } 100% { transform: scaleX(1) scaleY(.2); opacity: 0; } }

/* 被打的人：红圈炸开，头上「×2」 */
.hr-hit { position: absolute; width: 0; height: 0; }
.hr-hitring { position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; border-radius: 50%; border: 4px solid #ff4b6b; box-shadow: 0 0 16px #ff2d55; }
@keyframes hrHit { 0% { transform: scale(.3); opacity: 0; } 1% { transform: scale(.3); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
.hr-hit b { position: absolute; left: 0; top: -54px; transform: translateX(-50%); font-size: 22px; font-weight: 900; font-style: italic; color: #fff;
  text-shadow: 0 0 6px #ff2d55, 0 2px 0 #8a0020, 0 0 16px #ff2d55; white-space: nowrap; }
@keyframes hrX2 { 0% { transform: translateX(-50%) scale(3); opacity: 0; } 12% { transform: translateX(-50%) scale(.9); opacity: 1; } 20% { transform: translateX(-50%) scale(1); }
  85% { opacity: 1; } 100% { transform: translateX(-50%) translateY(-10px); opacity: 0; } }

/* 大字：放在主角旁边（朝桌子中间） */
.hr-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; }
.hr-title b { display: block; font-size: clamp(40px, calc(var(--gh) * .17), 78px); font-weight: 900; font-style: italic; letter-spacing: 8px; line-height: 1.05;
  background: linear-gradient(#fff, #ffe680 35%, #ffb800 60%, #ff4fa0); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 #6a0b40) drop-shadow(0 0 18px rgba(255, 184, 0, .95)); }
.hr-title span { display: inline-block; margin-top: 4px; padding: 3px 14px; border-radius: 999px; font-size: clamp(12px, calc(var(--gh) * .04), 17px); font-weight: 800; color: #fff;
  background: linear-gradient(90deg, rgba(255, 79, 160, .95), rgba(255, 154, 60, .95)); box-shadow: 0 0 16px rgba(255, 90, 210, .8); }
@keyframes hrTitle {
  0% { transform: translate(-50%, -50%) scale(4); opacity: 0; } 9% { transform: translate(-50%, -50%) scale(.88); opacity: 1; }
  14% { transform: translate(-50%, -50%) scale(1.06); } 19% { transform: translate(-50%, -50%) scale(1); }
  86% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; } }