/* ============================================================
   css/story.css - 剧情模式（GB.Story）视觉
   设计目标：让玩家一眼看出「现在在看重播剧情，不是普通闲聊」。
   屏幕轻微暗角 + 放大的剧情框 + 章节标签 + 「剧情」标记 + 说话人高亮。
   ============================================================ */

/* 覆盖全屏的剧情层：本身捕获点击 → 实现 inputLock（点击场景其它处不会误触） */
.gb-story {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 8vh;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transition: opacity .26s ease;
}
.gb-story.show { opacity: 1; }

/* 暗角：四角压暗，画面中心亮 */
.gb-story-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(20,10,6,0) 38%, rgba(20,10,6,.46) 100%),
    linear-gradient(180deg, rgba(20,10,6,.30), rgba(20,10,6,.12) 40%, rgba(20,10,6,.30));
  backdrop-filter: blur(1.5px);
}

/* 放大的剧情框 */
.gb-story-box {
  position: relative;
  width: min(680px, 92vw);
  margin: 0 12px;
  background: linear-gradient(180deg, #fff7ef 0%, #ffeede 100%);
  border: 2px solid #f3c9a8;
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(80,40,20,.38), inset 0 0 0 4px rgba(255,255,255,.5);
  padding: 22px 22px 18px;
  transform: translateY(14px);
  transition: transform .26s cubic-bezier(.2,.8,.3,1);
}
.gb-story.show .gb-story-box { transform: translateY(0); }

/* 章节标签（剧情篇名） */
.gb-story-chapter {
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
  background: linear-gradient(90deg, #ff8fab, #e75a7c);
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(231,90,124,.35);
}

/* 剧情小标记，明确区分于普通对白 */
.gb-story-tag {
  position: absolute;
  top: -12px;
  right: 16px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: #fff;
  background: #6b4f3f;
  padding: 3px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
}

.gb-story-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #7a4a32;
  margin: 2px 0 10px;
  text-shadow: 0 1px 0 #fff;
}

.gb-story-speaker {
  min-height: 1.3em;
  font-size: 1rem;
  font-weight: 700;
  color: #e75a7c;
  margin-bottom: 4px;
}
.gb-story-speaker b { color: #c23e62; }

.gb-story-text {
  font-size: 1.18rem;
  line-height: 1.8;
  color: #4a342a;
  min-height: 3.4em;
  white-space: pre-wrap;
}

.gb-story-hint {
  margin-top: 12px;
  text-align: right;
  font-size: .82rem;
  color: #b08968;
  animation: story-hint 1.6s ease-in-out infinite;
}
@keyframes story-hint { 0%,100%{opacity:.45; transform:translateY(0)} 50%{opacity:1; transform:translateY(2px)} }

/* ============================================================
   人物 + 场景 舞台（2026-10-08）：复用现有手绘 SVG，仅作氛围演出
   ============================================================ */
.gb-story-box.has-stage { padding-top: 18px; }
.gb-story-stage {
  position: relative;
  height: 212px;
  margin: 6px 0 14px;
  border-radius: 16px;
  overflow: hidden;
  background: #eaf2f6;
  box-shadow: inset 0 2px 10px rgba(0,0,0,.08);
}
.gb-story-stage.no-actor .gb-story-actor { display: none; }

.gb-story-scene { position: absolute; inset: 0; }
.gb-story-scene.default {
  background: radial-gradient(120% 80% at 50% 0%, #fff7ef 0%, #ffe9d6 60%, #ffd9bf 100%);
}
.gb-story-scene.river {
  background: linear-gradient(180deg, #cfeefb 0%, #e7f7ff 45%, #bfe3f0 46%, #8fc6dd 100%);
}
.gb-story-scene.river::before {           /* 远岸草坡 */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(180deg, #a9cf8e 0%, #7fae6a 100%);
  border-radius: 60% 60% 0 0 / 22px 22px 0 0;
}
.gb-story-scene.river::after {            /* 河面波光 */
  content: ""; position: absolute; left: 0; right: 0; top: 46%; height: 16%;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 14px, rgba(255,255,255,.4) 14px 22px);
  opacity: .5;
}
.gb-story-scene.restaurant {
  background: linear-gradient(180deg, #fdf3e0 0%, #f4e2c4 54%, #d3a874 55%, #c09460 100%);
}
.gb-story-scene.restaurant::before {      /* 木台 */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: linear-gradient(180deg, #b5814f 0%, #96683c 100%);
}

.gb-story-actor {
  position: absolute;
  left: 50%; bottom: 0;
  width: 152px; height: 152px;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.18));
  pointer-events: none;       /* 点击穿透到 overlay，整屏可点继续 */
}
.gb-story-actor svg { width: 100%; height: 100%; display: block; overflow: visible; }
.gb-story-actor .dog-tail { animation: ra-tail .9s ease-in-out infinite; }  /* 狗宝尾巴也摆 */

/* 入场：从下方滑入 + 淡入（换人时） */
.gb-story-actor.enter { animation: story-actor-in .42s cubic-bezier(.2,.8,.3,1) both; }
@keyframes story-actor-in {
  0%   { opacity: 0; transform: translateX(-50%) translateY(26px) scale(.92); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1); }
}
/* 同人变情绪：轻微弹一下 */
.gb-story-actor.morph { animation: story-actor-morph .34s ease both; }
@keyframes story-actor-morph {
  0%{transform:translateX(-50%) scale(1)} 40%{transform:translateX(-50%) scale(1.07)} 100%{transform:translateX(-50%) scale(1)}
}

/* 轻量情绪动画（作用在角色 SVG 上，与容器入场/变脸互不冲突）
   基础呼吸（story-breathe）对所有角色常驻；表情 class 在其上「叠加」第二个动画。 */
.gb-story-actor .rs-cat-svg, .gb-story-actor .rs-player-svg { animation: story-breathe 3.2s ease-in-out infinite; }
.gb-story-actor.act-happy  .rs-cat-svg, .gb-story-actor.act-happy  .rs-player-svg { animation: story-breathe 3.2s ease-in-out infinite, story-happy 1.1s ease-in-out infinite; }
.gb-story-actor.act-annoyed .rs-cat-svg, .gb-story-actor.act-annoyed .rs-player-svg { animation: story-breathe 3.2s ease-in-out infinite, story-sway 2.6s ease-in-out infinite; }
.gb-story-actor.act-angry  .rs-cat-svg, .gb-story-actor.act-angry  .rs-player-svg { animation: story-breathe 3.2s ease-in-out infinite, story-shake .5s ease-in-out infinite; }
.gb-story-actor.act-think  .rs-cat-svg, .gb-story-actor.act-think  .rs-player-svg { animation: story-breathe 3.2s ease-in-out infinite, story-think 3s ease-in-out infinite; }
.gb-story-actor.act-surprised .rs-cat-svg, .gb-story-actor.act-surprised .rs-player-svg { animation: story-breathe 3.2s ease-in-out infinite, story-surprise 1.4s ease-in-out infinite; }
@keyframes story-breathe { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes story-happy { 0%,100%{transform:translateY(0) rotate(0)} 25%{transform:translateY(-7px) rotate(-3deg)} 75%{transform:translateY(-7px) rotate(3deg)} }
@keyframes story-sway { 0%,100%{transform:rotate(-2.5deg)} 50%{transform:rotate(2.5deg)} }
@keyframes story-shake { 0%,100%{transform:translateX(0) rotate(0)} 20%{transform:translateX(-3px) rotate(-2deg)} 60%{transform:translateX(3px) rotate(2deg)} }
@keyframes story-think { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-6deg) translateY(-2px)} }
@keyframes story-surprise { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08) translateY(-3px)} }

.gb-story-next {
  position: absolute;
  right: 18px;
  bottom: 14px;
  border: none;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #ffb05a, #ff8fab);
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(255,140,120,.4);
  transition: transform .12s ease;
}
.gb-story-next:active { transform: scale(.94); }

/* 窄屏适配 */
@media (max-width: 480px) {
  .gb-story-box { padding: 18px 16px 16px; border-radius: 18px; }
  .gb-story-text { font-size: 1.05rem; line-height: 1.7; }
  .gb-story-title { font-size: 1.15rem; }
  .gb-story-stage { height: 168px; margin: 4px 0 12px; }
  .gb-story-actor { width: 124px; height: 124px; }
}