/* R2 影像播放器：把播放控制放在影框外，避免浏览器原生控件压住烧录字幕。
   只作用于故事影片的控制带与全屏容器；不改影片、字幕、镜头或其他舞台。 */

#voyage .v-story-media {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

/* 与影框同宽：桌面 800–960px，窄屏占满故事栏。 */
#voyage .v-story[data-story-media="video"] .v-story-media {
  width: min(100%, clamp(800px, 50vw, 960px));
  margin-inline: auto;
}

#voyage .v-story[data-story-media="video"] .v-film {
  width: 100%;
  margin-inline: 0;
}

@media (max-width: 760px) {
  #voyage .v-story[data-story-media="video"] .v-story-media { width: 100%; }
}

#voyage .v-player {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin-top: 8px;
  padding: 5px 0 0;
  border-top: 1px solid rgb(201 174 119 / .16);
  color: #cfc3a1;
  font-family: var(--font-title);
}

#voyage .v-player[hidden],
#voyage .v-player [hidden] { display: none; }

#voyage .v-player button {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 7px;
  border: 0;
  background: none;
  color: #cfc3a1;
  font: 13px/1.2 var(--font-title);
  letter-spacing: .06em;
  white-space: nowrap;
  transition: color .16s ease, opacity .16s ease;
}

#voyage .v-player button:hover,
#voyage .v-player button:focus-visible { color: #f0dfb6; }

#voyage .v-player button:active { translate: none; }

#voyage .v-player button:focus-visible {
  outline: 1px solid #d7c18b;
  outline-offset: 2px;
}

#voyage .v-player button:disabled { cursor: default; opacity: .42; }

/* 极窄屏换行时把全屏键留在右侧，避免单独落在左下角。 */
#voyage .v-player [data-player="fullscreen"] { margin-left: auto; }

#voyage .v-player-icon {
  display: inline-block;
  min-width: 10px;
  color: #d9c48f;
  font-size: 11px;
  letter-spacing: 0;
}

#voyage .v-player-time {
  flex: 0 0 auto;
  color: #b8aa87;
  font: 12px/1.2 var(--font-title);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  white-space: nowrap;
}

#voyage .v-player-sep { color: #7f8f81; }

#voyage .v-player-progress {
  flex: 1 1 84px;
  min-width: 64px;
  height: 44px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

#voyage .v-player-progress:disabled { cursor: default; opacity: .42; }

#voyage .v-player-progress::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, #c9ae77 var(--player-progress, 0%), rgb(201 174 119 / .22) var(--player-progress, 0%));
}

#voyage .v-player-progress::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: #e4cf9d;
  box-shadow: 0 0 0 1px rgb(7 15 18 / .9);
}

#voyage .v-player-progress::-moz-range-track {
  height: 2px;
  border: 0;
  border-radius: 1px;
  background: rgb(201 174 119 / .22);
}

#voyage .v-player-progress::-moz-range-progress {
  height: 2px;
  border-radius: 1px;
  background: #c9ae77;
}

#voyage .v-player-progress::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: #e4cf9d;
  box-shadow: 0 0 0 1px rgb(7 15 18 / .9);
}

#voyage .v-player-status {
  display: flex;
  flex: 0 0 100%;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 1px 0 3px;
  color: #c3b183;
  font: 13px/1.7 var(--font-title);
  letter-spacing: .06em;
}

#voyage .v-player-status [data-player="status-text"] { min-width: 0; }

#voyage .v-player-status [data-player="status-text"]:focus-visible {
  outline: 1px solid #d7c18b;
  outline-offset: 2px;
}

#voyage .v-player button.v-player-retry {
  flex: 0 0 auto;
  border-bottom: 1px solid rgb(201 174 119 / .46);
  color: #e0ca96;
}

#voyage #story-video:focus-visible {
  outline: 1px solid #d7c18b;
  outline-offset: -3px;
}

/* 页内全屏没有浏览器顶层，需让故事文章高于诵读页页眉。 */
#voyage .v-story.is-player-fullscreen { z-index: 300; }

/* 全屏：影框与控制带一起进入，字幕不铺网页遮罩；控制带仍在影框外。 */
#voyage .v-story[data-story-media="video"] .v-story-media:fullscreen,
#voyage .v-story[data-story-media="video"] .v-story-media.is-faux-fullscreen,
#voyage .v-story-media:fullscreen,
#voyage .v-story-media.is-faux-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  width: 100vw;
  height: 100dvh;
  max-height: none;
  box-sizing: border-box;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 6px;
  margin: 0;
  padding:
    max(10px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  background: #050b0a;
}

#voyage .v-story-media:fullscreen .v-film,
#voyage .v-story-media.is-faux-fullscreen .v-film {
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  aspect-ratio: auto;
  margin: 0;
}

#voyage .v-story-media:fullscreen .v-player,
#voyage .v-story-media.is-faux-fullscreen .v-player {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

#voyage .v-story-media:fullscreen #story-video,
#voyage .v-story-media.is-faux-fullscreen #story-video { object-fit: contain; }

@media (max-width: 760px) {
  #voyage .v-player { gap: 1px 3px; }
  #voyage .v-player button { padding-inline: 5px; font-size: 12px; }
  #voyage .v-player-time { font-size: 11px; }
  #voyage .v-player-progress { min-width: 58px; }
  #voyage .v-player-status { font-size: 13px; }
}

html.lw-player-faux-lock,
html.lw-player-faux-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  #voyage .v-player button { transition-duration: .01ms; }
}