/* =====================================================
   灵宠觉醒 · 升级登场特效
   星云底（与首页同一张图）+ 居中静态立绘
   按主人要求：取消全部光效（无光芒/光晕/光环/法阵/星屑）
   ===================================================== */

.lu-stage {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  opacity: 0;
  transition: opacity .22s ease;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  user-select: none;
  cursor: pointer;
  background: #0b1220;
}
.lu-stage.on { opacity: 1; }
.lu-stage.out { opacity: 0; transition: opacity .3s ease; }

/* ---------- 背景：主人提供的星云图（已裁剪为正方形） ---------- */
.lu-bg {
  position: absolute;
  inset: 0;
  /* 正方形星云图：短边铺满、长边裁切，任何屏幕都不拉伸变形 */
  background: url('../assets/bg/levelup-bg.jpg') center/cover no-repeat;
  animation: luBgIn .5s ease both;
}
/* 一层柔和宣纸罩：让深色文字看得清，同时透出星云 */
.lu-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(250,247,240,.46) 0%, rgba(250,247,240,.34) 100%);
}
@keyframes luBgIn { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: scale(1); } }

/* ---------- 主体：静态登场立绘 ---------- */
.lu-pet {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(62vmin, 460px);
  height: min(62vmin, 460px);
  margin-left: min(-31vmin, -230px);
  margin-top: min(-31vmin, -230px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 由小逐渐放大：贯穿整场 3 秒，平滑单调、不过冲、不模糊 */
  animation: luPetGrow 2.45s cubic-bezier(.13, .66, .3, 1) .22s both;
}
.lu-pet img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;          /* 完整不变形 */
  display: block;
  /* 无发光：只留一层很轻的投影，保证轮廓在星云上立得住 */
  filter: drop-shadow(0 6px 14px rgba(20, 30, 45, .22));
}
/* 小 → 大：0.26 起步，2.67s 长到原尺寸，末尾稳稳定住 */
@keyframes luPetGrow {
  0%   { opacity: 0; transform: scale(.26); }
  10%  { opacity: .35; }
  22%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

/* ---------- 文案层（深色墨字，适配浅色星云底） ---------- */
.lu-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 11%;
  text-align: center;
  font-size: clamp(18px, 3.4vmin, 30px);
  font-weight: 800;
  letter-spacing: .5em;
  text-indent: .5em;
  color: #2C3E40;
  text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 2px 12px rgba(255,255,255,.75);
  animation: luRise .6s cubic-bezier(.2, .8, .3, 1) 1.15s both;
}
.lu-lv {
  position: absolute;
  left: 0;
  right: 0;
  top: 18%;
  text-align: center;
  font-size: clamp(14px, 2.2vmin, 20px);
  font-weight: 700;
  letter-spacing: .22em;
  color: #5B8A8F;
  text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 2px 10px rgba(255,255,255,.8);
  animation: luRise .6s cubic-bezier(.2, .8, .3, 1) 1.3s both;
}
.lu-lv b {
  font-size: clamp(30px, 6vmin, 54px);
  margin-left: .1em;
  color: #1F2E30;
  text-shadow: 0 1px 0 rgba(255,255,255,.95), 0 3px 14px rgba(255,255,255,.85);
}
.lu-plaque {
  position: absolute;
  left: 50%;
  bottom: 21%;
  transform: translateX(-50%);
  min-width: 46%;
  padding: 10px 26px;
  border-radius: 999px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 252, 243, .97), rgba(246, 231, 190, .95));
  border: 1px solid rgba(212, 169, 78, .55);
  box-shadow: 0 10px 26px rgba(24, 38, 52, .22);
  color: #4A3413;
  animation: luRise .6s cubic-bezier(.2, .8, .3, 1) 1.5s both;
  white-space: nowrap;
}
.lu-plaque .pk-name { font-weight: 800; font-size: clamp(15px, 2.6vmin, 22px); }
.lu-plaque .pk-title {
  margin-left: 10px;
  font-size: clamp(12px, 2vmin, 16px);
  opacity: .78;
}
.lu-who {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  text-align: center;
  font-size: clamp(12px, 2vmin, 17px);
  font-weight: 700;
  color: #2C3E40;
  letter-spacing: .08em;
  text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 2px 10px rgba(255,255,255,.8);
  animation: luRise .6s ease 1.65s both;
}
@keyframes luRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.lu-plaque { animation-name: luRiseP; }
@keyframes luRiseP {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.lu-skip {
  position: absolute;
  right: 16px;
  bottom: 14px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(44, 62, 64, .7);
  background: rgba(255,255,255,.72);
  padding: 3px 10px; border-radius: 999px;
  letter-spacing: .06em;
}

/* 小屏适配 */
@media (max-width: 480px) {
  .lu-pet { width: 74vmin; height: 74vmin; margin-left: -37vmin; margin-top: -37vmin; }
  .lu-plaque { min-width: 70%; bottom: 19%; }
  .lu-top { top: 9%; }
}

/* 尊重系统「减弱动效」偏好 */
@media (prefers-reduced-motion: reduce) {
  .lu-bg { animation: none !important; }
  .lu-pet { animation: luPetGrow .5s ease both !important; }
}