/* ===== RPG 剧情演出（头像 + 对话框） ===== */
body.story-playing {
  overflow: hidden;
}
.story-stage {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: auto;
}
.story-stage.hidden {
  display: none !important;
}
.story-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(40, 28, 55, 0.35), transparent 55%),
    linear-gradient(180deg, rgba(12, 10, 18, 0.55) 0%, rgba(12, 10, 18, 0.78) 45%, rgba(12, 10, 18, 0.92) 100%);
}
.story-scene {
  position: relative;
  width: min(920px, 100%);
  height: min(100%, 720px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 16px 18px;
  box-sizing: border-box;
}
.story-portrait-slot {
  position: absolute;
  bottom: 132px;
  width: min(38vw, 260px);
  height: min(52vh, 380px);
  transition: opacity 0.28s ease, transform 0.28s ease, filter 0.28s ease;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.story-portrait-slot.left {
  left: 2%;
  transform-origin: bottom left;
}
.story-portrait-slot.right {
  right: 2%;
  transform-origin: bottom right;
}
.story-portrait-slot.empty {
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  pointer-events: none;
}
.story-portrait-slot.dim {
  opacity: 0.38;
  filter: grayscale(0.4) brightness(0.82);
}
.story-portrait-slot.active {
  opacity: 1;
  filter: none;
  transform: translateY(0) scale(1.04);
  z-index: 2;
}
.story-portrait {
  width: 100%;
  height: 100%;
  border-radius: 18px 18px 8px 8px;
  box-shadow: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  overflow: visible;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
}
.story-portrait-name {
  margin-top: -6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(20, 16, 28, 0.72);
  color: #f5eef8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.story-portrait-name.hidden {
  display: none;
}

/* 中央出场卡（旁白时多人） */
.story-cast {
  position: absolute;
  left: 50%;
  top: 10%;
  bottom: 150px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: clamp(10px, 2.5vw, 22px);
  align-items: flex-end;
  justify-content: center;
  max-width: min(94vw, 780px);
  pointer-events: none;
}
.story-cast.empty {
  display: none;
}
.story-cast-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: story-cast-in 0.4s ease both;
  animation-delay: calc(var(--i, 0) * 0.07s);
}
.story-cast-face {
  width: min(26vw, 168px);
  height: min(40vh, 280px);
  border-radius: 16px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5));
}
.story-cast-label {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(18, 22, 36, 0.78);
  color: #eef4ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
@keyframes story-cast-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.story-dialog {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 820px;
  min-height: 118px;
  padding: 22px 24px 28px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 250, 245, 0.96), rgba(245, 236, 255, 0.94));
  border: 2px solid rgba(90, 60, 110, 0.28);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  color: #2c2436;
}
.story-nameplate {
  display: inline-block;
  margin: -36px 0 10px;
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #5a3d6e, #7a4f8a);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 12px rgba(60, 30, 80, 0.35);
}
.story-nameplate.hidden {
  display: none;
}
.story-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 600;
  min-height: 2.8em;
  white-space: pre-wrap;
  word-break: break-word;
}
.story-stage.narration .story-dialog {
  background: linear-gradient(180deg, rgba(28, 24, 38, 0.92), rgba(18, 16, 28, 0.94));
  border-color: rgba(255, 255, 255, 0.12);
  color: #f3eef8;
}
.story-stage.narration .story-text {
  font-weight: 500;
  font-style: italic;
  text-align: center;
}
.story-stage.narration .story-nameplate {
  background: linear-gradient(90deg, #3a5070, #5a6a88);
}
.story-continue {
  position: absolute;
  right: 18px;
  bottom: 10px;
  font-size: 12px;
  opacity: 0.7;
  animation: story-blink 1s steps(2, end) infinite;
}
.story-continue.hidden {
  visibility: hidden;
}
@keyframes story-blink {
  50% {
    opacity: 0.15;
  }
}
.story-toolbar {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6;
  display: flex;
  gap: 8px;
}
.story-toolbar .btn {
  opacity: 0.9;
}
.story-toolbar #story-auto.on {
  border-color: rgba(120, 180, 255, 0.55);
  color: #dcecff;
}

.story-bg {
  position: absolute;
  inset: 0;
  background-color: #1a1520;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(1.05) brightness(0.92);
  transform: scale(1.02);
}
.story-bg.scene-world {
  background-color: #0d2a48;
  background-image: radial-gradient(ellipse at 50% 40%, #1a4a72 0%, #0c2438 70%);
  background-size: cover;
  filter: none;
  transform: none;
}
.story-stage.map-mode .story-veil {
  background:
    linear-gradient(180deg, rgba(6, 16, 28, 0.15) 0%, rgba(6, 16, 28, 0.05) 40%, rgba(6, 16, 28, 0.72) 100%);
  pointer-events: none;
}

/* 地图剧情层：头像钉点 */
.story-map-stage {
  position: absolute;
  inset: 0 0 0 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 8px 132px;
  box-sizing: border-box;
  pointer-events: none;
}
.story-map-stage.hidden {
  display: none !important;
}
.story-map-frame {
  position: relative;
  width: min(96vw, calc(100vh - 150px), 820px);
  height: min(96vw, calc(100vh - 150px), 820px);
  max-width: 100%;
  aspect-ratio: 1;
}
.story-map-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.35));
}
.story-map-marks,
.story-map-pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.story-map-mark {
  position: absolute;
  transform: translate(-50%, -120%);
  z-index: 2;
  opacity: 0;
  animation: story-mark-in 0.45s ease forwards;
  animation-delay: calc(var(--i, 0) * 0.05s);
}
.story-map-mark span {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(12, 28, 48, 0.78);
  border: 1px solid rgba(180, 220, 255, 0.45);
  color: #eaf4ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.story-map-mark.focus span {
  background: rgba(255, 196, 72, 0.92);
  border-color: #fff3c4;
  color: #3a2a10;
}
.story-map-mark.pulse span {
  animation: story-mark-pulse 1.1s ease;
}
@keyframes story-mark-in {
  from {
    opacity: 0;
    transform: translate(-50%, -80%) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -120%) scale(1);
  }
}
@keyframes story-mark-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.08);
  }
}

.story-map-pin {
  position: absolute;
  left: 50%;
  top: 110%;
  transform: translate(-50%, -90%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition:
    left 0.85s cubic-bezier(0.22, 0.82, 0.24, 1),
    top 0.85s cubic-bezier(0.22, 0.82, 0.24, 1),
    opacity 0.35s ease,
    filter 0.3s ease;
  will-change: left, top;
}
.story-map-pin.enter {
  opacity: 0;
  filter: blur(2px);
}
.story-map-pin.leave {
  opacity: 0;
  transform: translate(-50%, -90%) scale(0.6);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.story-map-pin.dim {
  opacity: 0.55;
  filter: grayscale(0.25);
}
.story-map-pin.fallen {
  opacity: 0.28;
  filter: grayscale(1) brightness(0.55);
  transform: translate(-50%, -90%) scale(0.88);
}
.story-map-pin.fallen .story-map-av {
  box-shadow: none;
  border-color: rgba(180, 180, 180, 0.5);
}
.story-map-pin.active {
  opacity: 1;
  filter: none;
  z-index: 8;
}
.story-map-pin.active .story-map-av {
  box-shadow:
    0 0 0 3px rgba(255, 220, 120, 0.95),
    0 8px 18px rgba(0, 0, 0, 0.45);
  transform: scale(1.08);
}
.story-map-av {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
  background-repeat: no-repeat;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.story-map-name {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(10, 18, 32, 0.82);
  color: #f2f6ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-stage.map-mode .story-scene {
  height: auto;
  min-height: 0;
  align-items: flex-end;
  z-index: 5;
}
.story-stage.map-mode .story-scene.map-dialog-only .story-portrait-slot,
.story-stage.map-mode .story-scene.map-dialog-only .story-cast {
  display: none !important;
}
.story-stage.map-mode .story-dialog {
  background: linear-gradient(180deg, rgba(16, 28, 44, 0.92), rgba(10, 18, 30, 0.96));
  border-color: rgba(160, 200, 240, 0.28);
  color: #eef5ff;
}
.story-stage.map-mode.narration .story-dialog {
  background: linear-gradient(180deg, rgba(16, 28, 44, 0.92), rgba(10, 18, 30, 0.96));
  color: #eef5ff;
}
.story-stage.map-mode .story-text {
  font-style: normal;
  text-align: left;
}

.story-bg.scene-shore {
  background-color: #3d5a78;
  background-image: linear-gradient(180deg, #6a90b8 0%, #3d5a78 40%, #2a3540 70%, #1c242c 100%);
}
.story-bg.scene-forest {
  background-color: #163022;
  background-image: linear-gradient(180deg, #1e3a28 0%, #163022 35%, #0f1c14 70%, #0a120e 100%);
}
.story-bg.scene-hut {
  background-color: #2a1e18;
  background-image: linear-gradient(135deg, #3a2a22 0%, #2a1e18 50%, #1a1410 100%);
}
.story-bg.scene-cave {
  background-color: #12101a;
  background-image: linear-gradient(180deg, #1a1824 0%, #12101a 50%, #0a0810 100%);
}
.story-bg.scene-nest {
  background-color: #2a2218;
  background-image: linear-gradient(160deg, #2a2218 0%, #3a2818 40%, #1a120c 100%);
}
.story-bg.scene-gorge {
  background-color: #2a3848;
  background-image: linear-gradient(180deg, #4a6078 0%, #2a3848 45%, #1a2028 100%);
}
.story-bg.scene-throne {
  background-color: #2a1014;
  background-image: linear-gradient(180deg, #3a1818 0%, #2a1014 40%, #12080c 100%);
}
.story-bg.scene-battle {
  background-color: #182028;
  background-image: linear-gradient(180deg, #243040 0%, #182028 100%);
}

/* 战中气泡 */
.battle-bubble {
  position: fixed;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: min(520px, 92vw);
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 250, 245, 0.95);
  border: 2px solid rgba(90, 60, 110, 0.3);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  animation: bb-in 0.22s ease-out;
}
.battle-bubble.hidden {
  display: none !important;
}
.bb-face {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center top;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.bb-body {
  min-width: 0;
}
.bb-name {
  font-size: 12px;
  font-weight: 800;
  color: #5a3d6e;
  margin-bottom: 2px;
}
.bb-text {
  font-size: 14px;
  font-weight: 600;
  color: #2c2436;
  line-height: 1.45;
}
@keyframes bb-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 720px) {
  .story-portrait-slot {
    width: min(46vw, 200px);
    height: min(42vh, 280px);
    bottom: 150px;
  }
  .story-dialog {
    min-height: 132px;
    padding: 18px 16px 26px;
  }
  .story-text {
    font-size: 15px;
  }
  .story-nameplate {
    margin-top: -32px;
    font-size: 13px;
  }
  .battle-bubble {
    bottom: 22%;
  }
}