/* 关卡系统：过场动画 / 关卡目标追踪 / 关卡选择 / 结算星级 */

/* ---------- 过场（web/js/ui/transition.js） ---------- */
.tr-layer { position: fixed; inset: 0; z-index: 70; pointer-events: auto; cursor: pointer; }
.tr-layer.out { opacity: 0; transition: opacity .22s; pointer-events: none; }
.tr-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.tr-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.92); width: min(680px, 92vw); text-align: center; opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .45s cubic-bezier(.2,1.4,.4,1); }
.tr-card.in { opacity: 1; transform: translate(-50%, -50%); }
.tr-card.leave { opacity: 0; transform: translate(-50%, -58%); transition: opacity .25s, transform .35s; }
.tr-kicker { font-size: 13px; letter-spacing: .5em; color: var(--tc); text-shadow: 0 0 10px var(--tc); margin-bottom: 6px; }
.tr-title { font-size: clamp(30px, 7vw, 58px); letter-spacing: .22em; color: #fff; text-shadow: 0 4px 0 #0a0716, 0 0 26px var(--tc); animation: trTitle .7s cubic-bezier(.2,1.6,.4,1); }
.tr-sub { margin-top: 6px; font-size: clamp(13px, 2.6vw, 17px); letter-spacing: .25em; color: #e6dcff; text-shadow: 0 2px 0 #000; }
.tr-stars { margin-top: 10px; display: flex; gap: 10px; justify-content: center; font-size: 26px; }
.tr-stars i { font-style: normal; color: #3a3352; text-shadow: 0 2px 0 #000; }
.tr-stars i.on { color: #ffd84a; text-shadow: 0 2px 0 #000, 0 0 12px #ffb84a; }
.tr-lines { margin: 14px auto 0; display: inline-flex; flex-direction: column; gap: 4px; text-align: left; font-size: 14px; color: #f2ecff; background: rgba(10,6,24,.55); padding: 8px 14px; box-shadow: 0 0 0 2px rgba(255,255,255,.08); }
.tr-lines div::before { content: '◆ '; color: var(--tc); }
.tr-card.in .tr-kicker { animation: trFade .45s .05s backwards; }
.tr-card.in .tr-sub { animation: trFade .45s .35s backwards; }
.tr-card.in .tr-stars i { animation: trPop .45s cubic-bezier(.2,1.8,.4,1) backwards; }
.tr-card.in .tr-stars i:nth-child(1) { animation-delay: .45s; } .tr-card.in .tr-stars i:nth-child(2) { animation-delay: .55s; } .tr-card.in .tr-stars i:nth-child(3) { animation-delay: .65s; }
.tr-card.in .tr-lines { animation: trFade .4s .6s backwards; }
.tr-card.in .tr-lines div { animation: trSlide .4s backwards; }
.tr-card.in .tr-lines div:nth-child(1) { animation-delay: .7s; } .tr-card.in .tr-lines div:nth-child(2) { animation-delay: .82s; } .tr-card.in .tr-lines div:nth-child(3) { animation-delay: .94s; } .tr-card.in .tr-lines div:nth-child(4) { animation-delay: 1.06s; }
.tr-card.in .tr-chips span { animation: trFade .4s 1.1s backwards; }
@keyframes trFade { 0% { opacity: 0; transform: translateY(8px); } }
@keyframes trSlide { 0% { opacity: 0; transform: translateX(-16px); } }
@keyframes trPop { 0% { opacity: 0; transform: scale(2.2) rotate(-30deg); } }
.tr-chips { margin-top: 10px; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.tr-chips span { font-size: 12px; padding: 2px 8px; color: #fff; background: rgba(10,6,24,.7); box-shadow: inset 0 0 0 1px var(--cc); text-shadow: 0 0 6px var(--cc); }
.tr-boss .tr-title { color: #ffe0e0; letter-spacing: .3em; }
.tr-boss .tr-kicker { color: #ff5a6a; }
@keyframes trTitle { 0% { opacity: 0; letter-spacing: .7em; filter: blur(4px); } 100% { opacity: 1; } }

/* ---------- 关卡目标追踪（HUD） ---------- */
.stg-obj { position: fixed; left: 50%; top: calc(64px + var(--safe-t, 0px)); transform: translateX(-50%); z-index: 22; min-width: 240px; max-width: min(440px, 80vw); pointer-events: none;
  background: linear-gradient(180deg, rgba(26,18,52,.88), rgba(12,8,28,.88)); box-shadow: 0 0 0 2px var(--ink, #0a0716), inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 0 rgba(0,0,0,.35); padding: 5px 10px 6px; font-size: 13px; color: #f2ecff; }
.stg-obj.hidden { display: none; }
.stg-obj .so-row { display: flex; gap: 8px; align-items: stretch; }
.stg-obj .so-col { flex: 1; min-width: 0; }
.stg-obj .so-exit { pointer-events: auto; flex: none; align-self: center; cursor: pointer; font: inherit; font-size: 12px; color: #ffd0d8; padding: 5px 8px; border: 0;
  background: linear-gradient(180deg, #5a2236, #3a1424); box-shadow: 0 0 0 1px #0a0716, inset 0 0 0 1px rgba(255,138,154,.35), 0 2px 0 rgba(0,0,0,.4); }
.stg-obj .so-exit:hover { color: #fff; background: linear-gradient(180deg, #7a2a44, #4a1a2c); }
.stg-obj .so-exit:active { transform: translateY(1px); }
.stg-obj .so-top { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 11px; color: #b8acd8; letter-spacing: .08em; }
.stg-obj .so-top b { color: var(--sc, #ffd84a); font-weight: normal; }
.stg-obj .so-main { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.stg-obj .so-main img { width: 18px; height: 18px; image-rendering: pixelated; }
.stg-obj .so-txt { flex: 1; text-shadow: 0 1px 0 #000; }
.stg-obj .so-bar { height: 5px; margin-top: 4px; background: rgba(0,0,0,.5); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.stg-obj .so-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sc, #ffd84a), #fff); transition: width .2s; }
.stg-obj .so-stars { display: flex; gap: 2px; }
.stg-obj .so-stars i { font-style: normal; color: #4a4266; }
.stg-obj .so-stars i.on { color: #ffd84a; }
.stg-obj .so-stars i.fail { color: #7a3a4a; }
.stg-obj.pulse { animation: soPulse .5s; }
@keyframes soPulse { 0% { transform: translateX(-50%) scale(1.08); box-shadow: 0 0 0 2px var(--ink, #0a0716), 0 0 24px var(--sc, #ffd84a); } 100% { transform: translateX(-50%); } }
.stg-hint { position: fixed; left: 50%; bottom: calc(150px + var(--safe-b, 0px)); transform: translateX(-50%); z-index: 23; pointer-events: none; display: flex; gap: 8px; align-items: center;
  background: rgba(12,8,28,.9); box-shadow: 0 0 0 2px var(--hc, #b48cff), 0 0 18px var(--hc, #b48cff); padding: 6px 12px; font-size: 14px; color: #fff; max-width: 86vw; animation: hintIn .4s cubic-bezier(.2,1.5,.4,1), hintOut .4s 4.2s forwards; }
.stg-hint img { width: 24px; height: 24px; image-rendering: pixelated; }
.stg-hint b { color: var(--hc, #b48cff); font-weight: normal; margin-right: 4px; }
@keyframes hintIn { 0% { opacity: 0; transform: translate(-50%, 16px); } }
@keyframes hintOut { to { opacity: 0; transform: translate(-50%, -10px); } }
@media (max-width: 700px) and (orientation: portrait) {
  /* 竖屏：放在操作区上方，避开左上角的任务追踪 */
  .stg-obj { top: auto; bottom: calc(236px + var(--safe-b, 0px)); font-size: 12px; min-width: 0; width: min(300px, 80vw); padding: 4px 8px 5px; }
  .stg-obj.pulse { animation: none; }
  .stg-hint { bottom: calc(300px + var(--safe-b, 0px)); font-size: 12px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* 横屏：放在顶部菜单行下方居中，避开左侧任务追踪与右侧小地图 */
  .stg-obj { top: calc(58px + var(--safe-t, 0px)); min-width: 0; width: min(300px, 40vw); font-size: 12px; padding: 4px 8px 5px; }
  .stg-obj.pulse { animation: none; }
  .stg-hint { bottom: calc(110px + var(--safe-b, 0px)); }
}

/* ---------- 关卡选择 ---------- */
.stg-sel { width: min(460px, 94vw); }
.stg-sel .ss-head { display: flex; gap: 12px; align-items: center; }
.stg-sel .ss-badge { width: 64px; height: 64px; flex: none; display: grid; place-items: center; background: radial-gradient(circle, var(--sc) -60%, #140c2e 70%); box-shadow: 0 0 0 2px var(--ink, #0a0716), 0 0 16px var(--sc); }
.stg-sel .ss-badge img { width: 48px; height: 48px; image-rendering: pixelated; }
.stg-sel .ss-k { font-size: 12px; color: #b8acd8; letter-spacing: .15em; }
.stg-sel .ss-name { font-size: 22px; letter-spacing: .1em; color: #fff; text-shadow: 0 2px 0 #000, 0 0 12px var(--sc); }
.stg-sel .ss-stars { font-size: 22px; letter-spacing: 4px; }
.stg-sel .ss-stars i { font-style: normal; color: #3a3352; }
.stg-sel .ss-stars i.on { color: #ffd84a; text-shadow: 0 0 10px #ffb84a; }
.stg-sel .ss-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.stg-sel .ss-chip { display: inline-flex; gap: 4px; align-items: center; padding: 3px 8px; font-size: 12px; background: rgba(10,6,24,.6); box-shadow: inset 0 0 0 1px var(--cc, #6a5a9a); }
.stg-sel .ss-chip img { width: 16px; height: 16px; image-rendering: pixelated; }
.stg-sel .ss-obj { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 13px; }
.stg-sel .ss-obj div { display: flex; gap: 6px; align-items: center; }
.stg-sel .ss-obj i { font-style: normal; color: #4a4266; }
.stg-sel .ss-obj i.on { color: #ffd84a; }
.stg-sel .ss-lv.low { color: #ff8a8a; }
.stg-sel .ss-lv.ok { color: #7dff8a; }
.stg-sel .ss-note { font-size: 12px; color: #b8acd8; }

/* ---------- 结算 ---------- */
.stg-res { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(560px, 94vw); }
.stg-res .sr-stars { display: flex; gap: 14px; margin: 4px 0 2px; }
.stg-res .sr-stars i { font-style: normal; font-size: 54px; color: #2e2846; text-shadow: 0 4px 0 #000; transform: scale(.4); opacity: .4; transition: transform .45s cubic-bezier(.2,1.8,.4,1), opacity .2s; }
.stg-res .sr-stars i.on { color: #ffd84a; transform: scale(1); opacity: 1; text-shadow: 0 4px 0 #6a3a00, 0 0 22px #ffb84a; }
.stg-res .sr-stars i.off { transform: scale(.85); opacity: 1; }
.stg-res .sr-obj { display: flex; flex-direction: column; gap: 4px; font-size: 14px; background: rgba(10,6,24,.6); padding: 8px 14px; box-shadow: 0 0 0 2px rgba(255,255,255,.06); min-width: min(360px, 86vw); }
.stg-res .sr-obj div { display: flex; justify-content: space-between; gap: 12px; }
.stg-res .sr-obj .ok { color: #7dff8a; } .stg-res .sr-obj .no { color: #ff8a9a; }
.stg-res .sr-bonus { color: #ffd84a; font-size: 13px; text-align: center; }
@media (max-height: 560px) { .stg-res .sr-stars i { font-size: 36px; } .stg-res { gap: 6px; } }

/* ---------- 首领登场卡 ---------- */
.stg-bosscard { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.stg-bosscard .bar { position: absolute; left: 0; right: 0; height: 11vh; background: #05030a; animation: bcBar .45s cubic-bezier(.2,1,.4,1); }
.stg-bosscard .bar.t { top: 0; } .stg-bosscard .bar.b { bottom: 0; }
.stg-bosscard .bc-in { position: absolute; left: 0; right: 0; bottom: 15vh; text-align: center; animation: bcIn .7s .15s cubic-bezier(.2,1.5,.4,1) backwards; }
.stg-bosscard .bc-k { font-size: 14px; letter-spacing: .8em; color: var(--bc); text-shadow: 0 0 10px var(--bc); }
.stg-bosscard .bc-n { font-size: clamp(28px, 6.5vw, 54px); letter-spacing: .18em; color: #fff; text-shadow: 0 4px 0 #0a0716, 0 0 30px var(--bc); }
.stg-bosscard .bc-s { margin-top: 4px; font-size: 14px; letter-spacing: .3em; color: #e6dcff; text-shadow: 0 2px 0 #000; }
.stg-bosscard.out { opacity: 0; transition: opacity .45s; }
@keyframes bcBar { 0% { transform: scaleY(0); } }
@keyframes bcIn { 0% { opacity: 0; transform: translateX(-40px); letter-spacing: .6em; } }