/**
 * lolPing 复刻版 · 轮盘与 ping 的样式
 *
 * 逐值移植自 lolPing 的 src/renderer/overlay/overlay.css 与 site/site.css（MIT）。
 * 两处刻意的改动：
 *   1. 所有选择器都收在 .lp-fx 之下，@keyframes 一律加 lp- 前缀，
 *      直接丢进任何主页都不会和自己的样式打架；
 *   2. 去掉原版假设「整页就是一块透明覆盖层」的 html/body 规则，
 *      改成绝对定位、铺满文档的 .lp-fx。动画时长、颜色、缓动函数完全照抄。
 */

/* ---------- 覆盖层 ---------- */
.lp-fx {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  z-index: 50;
  --wheel-scale: 1;
}
.lp-fx .lp-pings {
  position: absolute;
  left: 0;
  top: 0;
}

/* ---------- 轮盘 ---------- */
.lp-fx .lp-wheel {
  position: absolute;
  left: 0;
  top: 0;
  width: 600px;
  height: 600px;
  margin: -300px 0 0 -300px;
  pointer-events: none;
  opacity: 0;
  transform: scale(calc(var(--wheel-scale) * 0.85));
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}
.lp-fx .lp-wheel.open {
  opacity: 1;
  transform: scale(var(--wheel-scale));
}
.lp-fx .lp-wedge {
  transition: fill-opacity 0.08s;
}
/* 未悬停的图标压成暗金色，悬停时恢复原色并放大。 */
.lp-fx .lp-icon {
  transition: filter 0.1s, transform 0.1s;
  transform-box: fill-box;
  transform-origin: center;
  filter: grayscale(1) sepia(0.75) saturate(1.3) brightness(1.15);
}
.lp-fx .lp-icon.hot {
  filter: none;
  transform: scale(1.18);
}
.lp-fx .lp-centerTxt {
  font: 600 15px 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 1px;
  fill: #1fa9e0;
}
.lp-fx .lp-backTxt {
  font: 600 9px 'Segoe UI', system-ui, sans-serif;
  fill: #6c7a7c;
  letter-spacing: 0.5px;
}

/* ---------- ping（尺寸随 --size 缩放，节奏随 --dur） ---------- */
.lp-fx .lp-ping {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  --size: 110px;
  --dur: 3.2s;
}
.lp-fx .lp-ping .lp-ground {
  position: absolute;
  left: calc(var(--size) * -0.42);
  top: calc(var(--size) * 0.2);
  width: calc(var(--size) * 0.84);
  height: calc(var(--size) * 0.24);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent);
  opacity: 0;
  animation: lp-ground var(--dur) ease-out forwards;
}
.lp-fx .lp-ping .lp-ring {
  position: absolute;
  left: calc(var(--size) * -0.545);
  top: calc(var(--size) * -0.545);
  width: calc(var(--size) * 1.09);
  height: calc(var(--size) * 1.09);
  box-sizing: border-box;
  border-radius: 50%;
  border: 3px solid var(--c);
  box-shadow: 0 0 18px var(--c), inset 0 0 12px var(--c);
  opacity: 0;
  animation: lp-ring 0.65s ease-out forwards;
}
.lp-fx .lp-ping .lp-ring.lp-r2 {
  animation-delay: 0.22s;
}
.lp-fx .lp-ping .lp-ring.lp-r3 {
  animation-delay: 1.4s;
}
.lp-fx .lp-ping .lp-art {
  position: absolute;
  left: calc(var(--size) * -0.5);
  top: calc(var(--size) * -0.73);
  width: var(--size);
  height: var(--size);
  animation: lp-life var(--dur) linear forwards;
}
.lp-fx .lp-ping .lp-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px var(--c));
}
.lp-fx .lp-ping .lp-pop {
  position: absolute;
  inset: 0;
  animation: lp-pop 0.28s cubic-bezier(0.2, 1.6, 0.4, 1) both, lp-bob 1.6s ease-in-out 0.3s infinite;
}
/* 「全员进攻」：两张图对撞 + 一次白闪。 */
.lp-fx .lp-ping .lp-clash {
  position: absolute;
  inset: 0;
  animation: lp-shake 0.25s linear 0.22s both, lp-bob 1.6s ease-in-out 0.5s infinite;
}
.lp-fx .lp-ping .lp-a1 {
  animation: lp-slide1 0.22s cubic-bezier(0.5, 0, 0.9, 0.5) both;
}
.lp-fx .lp-ping .lp-a2 {
  animation: lp-slide2 0.22s cubic-bezier(0.5, 0, 0.9, 0.5) both;
}
.lp-fx .lp-ping .lp-flash {
  position: absolute;
  left: 25%;
  top: 25%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff, var(--c) 40%, transparent);
  opacity: 0;
  animation: lp-flash 0.35s ease-out 0.2s forwards;
}
.lp-fx .lp-ping .lp-tag {
  position: absolute;
  left: 0;
  top: calc(var(--size) * 0.5);
  transform: translateX(-50%);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(8, 12, 16, 0.62);
  color: var(--tag);
  font: 600 13px/18px 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 2px #000;
  animation: lp-tagIn 0.25s ease-out both, lp-life var(--dur) linear forwards;
}
@keyframes lp-tagIn {
  from { transform: translate(-50%, 4px); }
}
@keyframes lp-pop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes lp-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}
@keyframes lp-ring {
  0% { transform: scale(0.25); opacity: 0.95; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes lp-ground {
  0% { opacity: 0; }
  10% { opacity: 0.75; }
  85% { opacity: 0.55; }
  100% { opacity: 0; }
}
@keyframes lp-life {
  0%, 87% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes lp-slide1 {
  0% { transform: translate(calc(var(--size) * 0.64), calc(var(--size) * -0.64)); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes lp-slide2 {
  0% { transform: translate(calc(var(--size) * -0.64), calc(var(--size) * -0.64)); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes lp-shake {
  0%, 100% { transform: none; }
  25% { transform: translate(-3px, 2px); }
  50% { transform: translate(3px, -2px); }
  75% { transform: translate(-2px, -1px); }
}
@keyframes lp-flash {
  0% { opacity: 0; transform: scale(0.3); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(2.2); }
}

/* ---------- 自动演示用的假光标 ---------- */
.lp-fx .lp-cursor {
  position: absolute;
  left: 0;
  top: 0;
  margin: -1px 0 0 -1px;
  opacity: 0;
  transition: opacity 0.2s;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.lp-fx .lp-cursor.on {
  opacity: 1;
}
.lp-fx .lp-cursor svg {
  transition: transform 0.08s;
  transform-origin: 2px 2px;
}
.lp-fx .lp-cursor.down svg {
  transform: scale(0.88);
}

/* 系统开了「减少动态效果」时，ping 仍然要给反馈，但不做循环浮动。 */
@media (prefers-reduced-motion: reduce) {
  .lp-fx .lp-ping .lp-pop,
  .lp-fx .lp-ping .lp-clash {
    animation: lp-pop 0.2s ease-out both;
  }
}