@font-face {
  font-family: "QSheepStory";
  src: url("./assets/fonts/qsheep-story-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

[hidden] { display: none !important; }

#screen-story {
  background: #1B1630; color: #3F2415; overflow: hidden;
  --story-beam-top: 30%;
  --story-beam-h: 45%;
}
.story-bg { position: absolute; inset: 0; background: #1B1630 url("./assets/game/ui/game-bg.webp") center / cover no-repeat; }
.story-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }

.story-stars { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ss-far, .ss-near { position: absolute; inset: 0; }
.story-stars i {
  position: absolute; display: block;
  animation: starDrift var(--drift-dur, 2s) ease-in-out var(--drift-delay, 0s) infinite alternate;
  will-change: transform;
}
.story-stars i b {
  display: block;
  width: var(--size, 2px); height: var(--size, 2px);
  border-radius: 50%;
  background: #FFF6CE;
  box-shadow: 0 0 6px rgba(255, 244, 190, .75);
  opacity: .5;
  animation: starTwinkle var(--blink-dur, 3.6s) ease-in-out var(--blink-delay, 0s) infinite;
  will-change: transform, opacity;
}
.ss-far i b { opacity: .42; }
.ss-near i b { background: #FFF0B0; box-shadow: 0 0 10px rgba(255, 238, 160, .9); }

@keyframes starDrift {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-1 * var(--drift, 10px))); }
}
@keyframes starTwinkle {
  0%, 100% { opacity: .28; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

.story-ship {
  position: absolute; left: 14%; top: calc(4% + env(safe-area-inset-top));
  width: 72%;
  z-index: 2;
  animation: ssFloat 3s ease-in-out infinite alternate;
}
.ss-glow { position: absolute; left: 0; top: 0; width: 100%; opacity: .85; }
.ss-body { position: relative; z-index: 3; display: block; width: 100%; }
.ss-pilot { z-index: 2; animation: none; }
.story-ship.talking .ss-pilot { animation: ssNod 1.6s ease-in-out; }

@keyframes ssFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}
@keyframes ssNod {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  35%      { transform: rotate(6deg) translateY(2px); }
  70%      { transform: rotate(-3deg) translateY(0); }
}

.story-beam {
  position: absolute; left: 12.5%; top: var(--story-beam-top);
  width: 75%; height: var(--story-beam-h);
  z-index: 1; pointer-events: none;
  background: url("./assets/game/ship/beam-gold.webp") center top / 100% 100% no-repeat;
}

.story-stage {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 4% calc(60px + env(safe-area-inset-bottom));
  pointer-events: none;
}

.dialog-box {
  position: relative; flex: 0 0 auto;
  width: 100%;
  /* 高度固定为「正文安全区（上下各留 23% / 17%）里放得下 3 行 + 12px」，
   * 与引导框共用同一条公式（styles-tutorial.css 的 .game-dialog .gd-box），
   * 台词长短不再改变框高。正文区占框高 60%，所以反推框高时要 ÷0.6。
   * 下限 168px 兜住矮屏；25dvh 与引导框同单位，避免两套框在 375/390/320 上差 4~10px。
   * 超过 3 行由 fitDialogText() 逐级缩字号兜底。
   * 光柱高度由 title.js 读实际几何重算，不受影响 */
  height: max(clamp(168px, 25dvh, 226px),
             calc((var(--dialog-line-height) * 3 * var(--dialog-font-size) + 12px) / 0.6));
  pointer-events: none;                 /* 只有「跳过」可点，其它点击交给剧情推进 */
}

.story-text { flex: 1; min-height: 0; overflow: hidden; }

.story-line {
  margin: 0;
  animation: storyIn .22s ease-out;
}
.story-line.story-guide { color: #A24E15; }
@keyframes storyIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

#story-skip {
  position: absolute; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border-radius: 12px;
  background: rgba(255, 249, 236, .55);
  color: #7A2E12;
  font-family: var(--font-dialog);
  font-weight: var(--weight-dialog);
  font-size: 15px; line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 249, 236, .7);
  z-index: 6; pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .story-ship, .story-ship.talking .ss-pilot { animation: none; }
  .story-line { animation: none; }
  .story-stars i, .story-stars i b { animation: none; }
}