/* ============================================================
   迭代1 · 氛围与沉浸底座样式
   三模式星光 / 温柔toast / 连击分层 / 剧情弹窗 / 休憩提醒
   ============================================================ */

/* ---------- 三模式星光特效 ---------- */
.fx-layer{ position:fixed; z-index:2000; pointer-events:none; transform:translate(-50%,-50%); }
.fx-bit{
  position:absolute; left:0; top:0; font-size:20px; line-height:1;
  transform:translate(-50%,-50%); opacity:0;
  animation:fxFly 1.05s cubic-bezier(.2,.7,.3,1) forwards;
  filter:drop-shadow(0 2px 4px rgba(255,150,200,.4));
}
.fx-quill{ filter:drop-shadow(0 0 6px rgba(180,150,255,.8)); }
.fx-note{ filter:drop-shadow(0 0 6px rgba(120,200,255,.8)); }
@keyframes fxFly{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.4) rotate(0deg); }
  25%{ opacity:1; }
  100%{ opacity:0; transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) rotate(30deg); }
}

/* ---------- 温柔 toast ---------- */
.fx-toast{
  position:fixed; left:50%; bottom:22%; transform:translate(-50%,16px);
  z-index:2100; max-width:82vw; padding:11px 20px; border-radius:999px;
  font-size:14px; font-weight:700; color:#8a4670; white-space:nowrap;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,240,248,.96));
  box-shadow:0 8px 24px rgba(255,130,185,.3); border:1px solid rgba(255,180,215,.6);
  opacity:0; transition:opacity .3s, transform .3s;
}
.fx-toast.show{ opacity:1; transform:translate(-50%,0); }
.fx-toast.shield{ color:#5b7fd8; border-color:rgba(150,180,255,.7); }
.fx-toast.gentle{ color:#c07aa0; }

/* ---------- 连击分层显示（沿用 .combo-display，加分层皮肤） ---------- */
.combo-display.combo-hot{
  background:linear-gradient(135deg,#ff7fb8,#c98cf0) !important;
  box-shadow:0 8px 30px rgba(201,140,240,.55) !important;
}
.combo-display.combo-nova{
  background:linear-gradient(135deg,#ffd76a,#ff7fb8,#9fd8ff) !important;
  box-shadow:0 10px 40px rgba(255,150,210,.7) !important;
  animation:novaPulse .7s ease-in-out infinite alternate !important;
}
@keyframes novaPulse{ from{ transform:translate(-50%,-50%) scale(1) } to{ transform:translate(-50%,-50%) scale(1.12) } }

/* ---------- 剧情弹窗（星梦主线） ---------- */
.story-overlay{
  position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
  background:rgba(60,30,70,.5); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .35s; padding:20px;
}
.story-overlay.show{ opacity:1; }
.story-card{
  width:min(440px,92vw); max-height:88vh; overflow-y:auto; border-radius:26px; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,242,250,.97));
  box-shadow:0 20px 60px rgba(150,70,130,.4); border:1px solid rgba(255,200,230,.7);
  transform:translateY(18px) scale(.96); transition:transform .4s cubic-bezier(.2,1.3,.5,1);
  padding:0 0 22px;
}
.story-overlay.show .story-card{ transform:none; }
.story-illus{
  height:190px; border-radius:26px 26px 0 0; overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(165deg,#ffd7ee,#e6b7f0 60%,#cdb6ff);
}
.story-illus img{ width:100%; height:100%; object-fit:cover; }
.story-illus .story-emoji{ font-size:76px; filter:drop-shadow(0 6px 14px rgba(150,80,150,.35)); animation:storyFloat 3s ease-in-out infinite; }
@keyframes storyFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
.story-chapter{ margin:16px 20px 4px; font-size:13px; font-weight:800; letter-spacing:1px; color:#c98cf0; }
.story-title{ margin:0 20px 10px; font-size:21px; font-weight:900; color:#8a4670; }
.story-text{ margin:0 22px 18px; font-size:14.5px; line-height:1.75; color:#7a5566; white-space:pre-line; }
.story-btn{
  margin:0 auto; padding:12px 40px; border:none; border-radius:16px; cursor:pointer;
  font-size:15px; font-weight:800; color:#fff;
  background:linear-gradient(180deg,#ffa6cf,#ff7fb8); box-shadow:0 8px 20px rgba(255,127,184,.45);
}
.story-btn:active{ transform:translateY(1px); }

/* 星光飘落装饰（剧情插图区） */
.story-illus .sparkle{ position:absolute; color:#fff; opacity:.85; animation:storySpark linear infinite; }
@keyframes storySpark{ 0%{ transform:translateY(-10px); opacity:0 } 20%{ opacity:.9 } 100%{ transform:translateY(180px); opacity:0 } }

@media (prefers-reduced-motion: reduce){
  .fx-bit{ animation-duration:.5s; }
  .story-illus .story-emoji, .story-illus .sparkle, .combo-display.combo-nova{ animation:none !important; }
}