/* 逄萌挂冠：挂冠前停帧的“向上送出、再松手”操作区。
   只作用于 #story-fengmeng，不改动星河、匡衡舞台或赵抃组件。
   视觉是一条轻操作带：提示、竖向送出轨道、继续观看出口；百分比只留给读屏。 */

#story-fengmeng { margin-top: 12px; color: #cfc3a1; }
#story-fengmeng[hidden] { display: none !important; }
#story-fengmeng .fm-story { --fm-progress: 0; }
#story-fengmeng .fm-hold {
  display: grid;
  width: min(100%, clamp(800px, 50vw, 960px));
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 26px;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid rgb(201 174 119 / .16);
  background: none;
}
#story-fengmeng .fm-copy { min-width: 0; grid-column: 1; grid-row: 1; }
#story-fengmeng .fm-eyebrow {
  margin: 0 0 5px;
  color: #8d9d90;
  font: 10px/1.4 var(--font-title);
  letter-spacing: .22em;
}
#story-fengmeng .fm-line {
  margin: 0;
  color: #d9cba6;
  font: clamp(15px, 1.45vw, 17px)/1.8 var(--font-title);
  letter-spacing: .05em;
}
#story-fengmeng .fm-hint {
  margin: 6px 0 0;
  color: #b6a67d;
  font: 14px/1.7 var(--font-title);
  letter-spacing: .14em;
}
#story-fengmeng .fm-gesture {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
#story-fengmeng .fm-gate {
  writing-mode: vertical-rl;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 4px 0;
  color: #73857a;
  font: 9px/1 var(--font-title);
  letter-spacing: .2em;
}
#story-fengmeng .fm-track {
  position: relative;
  width: 44px;
  height: 96px;
  touch-action: none;
  cursor: grab;
  border: 1px solid rgb(201 174 119 / .22);
  border-radius: 22px;
  background: linear-gradient(180deg, rgb(201 174 119 / .05), transparent 66%);
  user-select: none;
  -webkit-user-select: none;
}
#story-fengmeng .fm-track:active,
#story-fengmeng .fm-track.is-dragging { cursor: grabbing; }
#story-fengmeng .fm-track:focus-visible { outline: 1px solid #d7c18b; outline-offset: 3px; }
#story-fengmeng .fm-track-line,
#story-fengmeng .fm-track-fill {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 1px;
  transform: translateX(-50%);
}
#story-fengmeng .fm-track-line { top: 10px; background: rgb(201 174 119 / .14); }
#story-fengmeng .fm-track-fill {
  height: calc(var(--fm-progress, 0) * 64px);
  max-height: 64px;
  background: linear-gradient(0deg, #a98f63, #d9c28d);
  transition: height .12s linear;
}
#story-fengmeng .fm-track-mark {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: calc(16px + 41.6px);
  border-top: 1px dashed rgb(214 193 142 / .26);
  pointer-events: none;
}
#story-fengmeng .fm-track-mark::after { content: none; }
#story-fengmeng .fm-thumb {
  position: absolute;
  left: 50%;
  bottom: calc(16px + (var(--fm-progress, 0) * 64px));
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(203 180 126 / .55);
  border-radius: 50%;
  transform: translate(-50%, 50%);
  background: #15211d;
  transition: bottom .12s linear;
  pointer-events: none;
}
#story-fengmeng .fm-thumb b {
  color: #e0cfa2;
  font: 13px/1 var(--font-title);
  font-weight: normal;
}
#story-fengmeng .fm-track.is-dragging .fm-track-fill,
#story-fengmeng .fm-track.is-dragging .fm-thumb { transition: none; }
/* 数值仍保留在 aria-valuenow / aria-valuetext 与实时播报里，画面上只留轨道。 */
#story-fengmeng .fm-meter { display: none; }
#story-fengmeng .fm-actions {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  min-width: 0;
  margin-top: 2px;
}
#story-fengmeng button {
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid rgb(201 174 119 / .22);
  color: #aebaa9;
  background: none;
  cursor: pointer;
  font: 14px/1.5 var(--font-body);
  letter-spacing: .08em;
}
#story-fengmeng button:hover { border-color: #c9ae77; color: #f0dfb6; background: none; }
#story-fengmeng button:focus-visible { outline: 1px solid #d7c18b; outline-offset: 3px; }
#story-fengmeng .fm-primary { border-bottom-color: rgb(201 174 119 / .46); color: #dccb9f; background: none; }
#story-fengmeng .fm-primary:hover { background: none; color: #f0dfb6; }
#story-fengmeng .fm-quiet { color: #a8b6a2; }
#story-fengmeng .fm-live {
  grid-column: 1 / -1;
  min-height: 16px;
  margin: 0;
  color: #93a28e;
  font: 10px/1.7 var(--font-title);
  letter-spacing: .08em;
}
#story-fengmeng .fm-ended,
#story-fengmeng .fm-retry {
  display: flex;
  width: min(100%, clamp(800px, 50vw, 960px));
  margin-inline: auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 0;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid rgb(201 174 119 / .16);
  background: none;
}
#story-fengmeng .fm-ended p,
#story-fengmeng .fm-retry p {
  margin: 0;
  color: #d8c89f;
  font: 14px/1.7 var(--font-title);
  letter-spacing: .08em;
}
#story-fengmeng .fm-ended button,
#story-fengmeng .fm-retry button { flex: 0 0 auto; }
#story-fengmeng .fm-retry { flex-wrap: wrap; }

@media (max-width: 760px) {
  #story-fengmeng { margin-top: 10px; }
  #story-fengmeng .fm-hold {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 11px 0 0;
  }
  #story-fengmeng .fm-copy { grid-column: 1; grid-row: 1; }
  #story-fengmeng .fm-gesture { grid-column: 1; grid-row: 2; justify-content: flex-start; }
  #story-fengmeng .fm-gate { max-height: 96px; }
  #story-fengmeng .fm-line { font-size: 16px; line-height: 1.75; }
  #story-fengmeng .fm-actions {
    grid-column: 1;
    grid-row: 3;
    flex-wrap: wrap;
    gap: 6px 20px;
  }
  #story-fengmeng .fm-actions button { flex: 0 1 auto; }
  #story-fengmeng .fm-live { grid-column: 1; min-height: 0; }
  #story-fengmeng .fm-ended,
  #story-fengmeng .fm-retry { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  #story-fengmeng .fm-track-fill,
  #story-fengmeng .fm-thumb { transition: none; }
}

/* 低高度停帧：影片和动作保持上下文；仅在实际hold时改变编排。 */
@media (max-height: 700px) {
  #voyage .v-story[data-story-kind="fengmeng"] .v-story-frame:has(#story-fengmeng[data-phase="hold"]) .v-story-media {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #071014;
  }
}
@media (min-width: 600px) and (max-height: 700px) {
  #voyage .v-story[data-story-kind="fengmeng"] .v-story-frame:has(#story-fengmeng[data-phase="hold"]) {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(235px, 1fr);
    gap: 20px;
    align-items: start;
  }
  #voyage .v-story[data-story-kind="fengmeng"] .v-story-frame:has(#story-fengmeng[data-phase="hold"]) .v-story-media { width: 100%; }
  #story-fengmeng[data-phase="hold"] { margin-top: 0; }
  #story-fengmeng .fm-hold { column-gap: 12px; }
}
@media (max-width: 599px) and (max-height: 700px) {
  #story-fengmeng .fm-hold { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  #story-fengmeng .fm-copy { grid-column: 1; grid-row: 1; }
  #story-fengmeng .fm-gesture { grid-column: 2; grid-row: 1; }
  #story-fengmeng .fm-actions { grid-column: 1 / -1; grid-row: 2; }
  #story-fengmeng .fm-live { grid-column: 1 / -1; }
}