/* <feedee-story-player> shell — v2 project playback.
   Mirrors the v1 preview look (feedee-story.css) with player-scoped classes.
   Import alongside feedee-scene.css. */

feedee-story-player {
  --fsp-bg: #09080a;
  --fsp-surface: #171019;
  --fsp-line: rgba(255, 255, 255, 0.13);
  --fsp-ink: #f4f0ea;
  --fsp-muted: #b4a9b6;
  --fsp-pink: #ff1a75;
  --fsp-pink-soft: #ff8eb9;
  --fsp-warm: #e6a56a;

  display: block;
  color: var(--fsp-ink);
  background: var(--fsp-bg);
  border: 1px solid var(--fsp-line);
  border-radius: 0.9rem;
  overflow: hidden;
}

.feedee-player__stage {
  position: relative;
}

.feedee-player__art {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #060509;
  overflow: hidden;
}

.feedee-player__layers,
.feedee-player__layer-set {
  position: absolute;
  inset: 0;
}

.feedee-player__layer-set { z-index: 1; opacity: 0; }
.feedee-player__layer-set--active { z-index: 2; opacity: 1; }
.feedee-player__layer-set--outgoing { z-index: 1; opacity: 1; }
.feedee-player__layer-set--incoming { z-index: 2; opacity: 0; }
.feedee-player__layer-set--active.is-crossfade { transition: opacity 320ms ease; }
.feedee-player__layer-set--active.is-fade { animation: fplayer-fade 260ms ease both; }
.feedee-player__layer-set--active.is-cut { transition: none; }

@keyframes fplayer-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.feedee-player__hotspots {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

.feedee-player__hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  min-height: 44px;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--fsp-pink-soft);
  border-radius: 999px;
  background: rgba(9, 8, 10, 0.8);
  color: var(--fsp-ink);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.feedee-player__hotspot:hover,
.feedee-player__hotspot:focus-visible {
  border-color: var(--fsp-pink);
  color: var(--fsp-pink-soft);
}

.feedee-player__dock {
  display: grid;
  gap: 0.7rem;
  padding: 0.95rem 1.1rem 1.1rem;
  border-top: 1px solid var(--fsp-line);
  background: var(--fsp-surface);
}

.feedee-player__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.feedee-player__scene-label { color: var(--fsp-warm); }
.feedee-player__speaker { color: var(--fsp-pink-soft); }

.feedee-player__copy-status {
  padding: 0.18rem 0.5rem;
  border: 1px dashed var(--fsp-pink-soft);
  border-radius: 999px;
  color: var(--fsp-pink-soft);
  font-size: 0.6rem;
}

.feedee-player__voice-chip {
  color: var(--fsp-warm);
  font-size: 0.8rem;
}

.feedee-player__text {
  margin: 0;
  min-height: 3.2em;
  color: var(--fsp-ink);
  font-size: 0.98rem;
  line-height: 1.55;
}

.feedee-player__text--time-card {
  color: var(--fsp-warm);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.feedee-player__text--dialogue {
  color: var(--fsp-pink-soft);
  font-style: italic;
}

.feedee-player__text:focus { outline: none; }
.feedee-player__text:focus-visible { outline: 2px solid var(--fsp-pink-soft); outline-offset: 4px; }

.feedee-player__actions,
.feedee-player__utilities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.feedee-player__choice {
  min-height: 44px;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--fsp-line);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  color: var(--fsp-ink);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease;
}

.feedee-player__choice:hover,
.feedee-player__choice:focus-visible {
  border-color: var(--fsp-pink-soft);
  transform: translateY(-1px);
}

.feedee-player__choice--primary {
  border-color: var(--fsp-pink);
  background: linear-gradient(135deg, rgba(255, 26, 117, 0.22), rgba(255, 26, 117, 0.08));
}

.feedee-player__utility {
  min-height: 40px;
  padding: 0.4rem 0.8rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--fsp-muted);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

.feedee-player__utility:hover,
.feedee-player__utility:focus-visible {
  color: var(--fsp-ink);
  background: rgba(255, 255, 255, 0.06);
}

.feedee-player__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.feedee-player__error {
  margin: 0;
  color: var(--fsp-pink-soft);
  font-size: 0.85rem;
}

/* ---- Comic reader ------------------------------------------------------ */

.feedee-player--comic {
  display: grid;
  gap: 0.6rem;
}

.feedee-player__page {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #060509;
  border-radius: 0.6rem;
  overflow: hidden;
}

.feedee-player__panel {
  position: absolute;
  overflow: hidden;
  container-type: size;
  background: #0c0b10;
}

.feedee-player__panel--plain {
  border: 2px solid #101014;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.feedee-player__panel--borderless {
  border: 0;
}

.feedee-player__panel--jagged {
  border: 0;
  clip-path: polygon(
    0% 3%, 4% 0%, 23% 2%, 46% 0%, 71% 2%, 96% 0%, 100% 4%, 98% 26%,
    100% 49% , 98% 73%, 100% 96%, 96% 100%, 72% 98%, 48% 100%, 24% 98%, 3% 100%, 0% 97%, 2% 74%, 0% 51%, 2% 27%
  );
}

/* The stage is always a 16:9 composition (WYSIWYG with the editor canvas);
   the panel's own aspect meets it per fit: cover fills and crops (the demo's
   full-bleed strips), contain letterboxes. Sized with container units against
   the panel; older browsers fall back to a stretched fill. */
.feedee-player__panel-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 16 / 9;
  width: 100%;
}

@supports (width: 1cqw) {
  .feedee-player__panel--fit-cover .feedee-player__panel-stage {
    width: max(100cqw, calc(100cqh * 16 / 9));
  }

  .feedee-player__panel--fit-contain .feedee-player__panel-stage {
    width: min(100cqw, calc(100cqh * 16 / 9));
  }
}

/* renderSceneInto adds .feedee-scene (position:absolute; inset:0) — the
   panel stage centers itself instead, so neutralize the inset. */
.feedee-player__panel-stage.feedee-scene,
.feedee-player__panel-stage .feedee-scene {
  position: absolute;
}

.feedee-player__panel-stage.feedee-scene {
  /* `inset: auto` clears .feedee-scene's inset:0, but the shorthand also
     wipes the centering left/top — re-assert them AFTER it, or the
     translate(-50%,-50%) shifts the stage's bottom-right quadrant into the
     panel's top-left corner (S10 regression, caught at S15 visual QA). */
  inset: auto;
  left: 50%;
  top: 50%;
}

.feedee-player__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.feedee-player__page-counter {
  min-width: 7rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--fsp-muted, #a99fac);
}

/* ---- Scroll-story reader ----------------------------------------------- */

.feedee-player--scroll {
  display: block;
}

.feedee-player__settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--fsp-line, rgba(255, 255, 255, 0.13));
  border-radius: 0.7rem;
  background: rgba(20, 14, 26, 0.65);
}

.feedee-player__settings-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fsp-pink-soft, #ff8eb9);
}

.feedee-player__settings label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  text-transform: capitalize;
}

.feedee-player__settings select {
  min-height: 2.1rem;
  border: 1px solid var(--fsp-line, rgba(255, 255, 255, 0.2));
  border-radius: 0.45rem;
  background: #0e0b10;
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
}

.feedee-player__scroll {
  display: grid;
  gap: 1.1rem;
  container-type: inline-size;
}

.feedee-player__block--text {
  position: relative;
  margin: 0;
}

.feedee-player__voice-chip {
  position: absolute;
  top: 0.4rem;
  inset-inline-end: 0.5rem;
  font-size: 0.9rem;
  color: var(--fsp-pink-soft, #ff8eb9);
  opacity: 0.75;
}

/* ---- E3: image blocks, dialogues, and line-level karaoke ---------------- */

.feedee-player__block--image {
  margin: 0;
  display: grid;
  gap: 0.5rem;
  justify-items: center;
}

.feedee-player__block--image .feedee-player__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.7rem;
}

.feedee-player__block--image-normal {
  max-width: 34rem;
  margin-inline: auto;
}

.feedee-player__block--image figcaption {
  color: var(--fsp-muted, #a99fac);
  font-size: 0.82rem;
  font-style: italic;
  text-align: center;
}

.feedee-player__block--dialogue {
  display: grid;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border-inline-start: 3px solid var(--fsp-pink-soft, #ff8eb9);
  border-radius: 0.5rem;
  background: rgba(255, 26, 117, 0.05);
}

.feedee-player__exchange {
  display: grid;
  gap: 0.55rem;
}

.feedee-player__line {
  position: relative;
  margin: 0;
  padding-inline-end: 2.4rem;
  color: var(--fsp-ink);
  font-size: 0.96rem;
  line-height: 1.55;
  transition: background 200ms ease;
  border-radius: 0.4rem;
}

.feedee-player__line-speaker {
  display: block;
  color: var(--fsp-pink-soft, #ff8eb9);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.feedee-player__line.is-speaking {
  background: rgba(255, 26, 117, 0.12);
}

/* Duration-proportional word sweep: the whole line tints left-to-right in
   exactly the clip's duration — the "karaoke feel" until real word timings
   arrive through the wordTimings seam. */
.feedee-player__line.is-sweeping .feedee-player__line-text {
  background-image: linear-gradient(
    90deg,
    var(--fsp-pink, #ff1a75) 50%,
    currentColor 50%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fpl-word-sweep var(--fpl-sweep-duration, 2000ms) linear forwards;
}

@keyframes fpl-word-sweep {
  to {
    background-position: 0% 0;
  }
}

.feedee-player__line-play,
.feedee-player__exchange-play {
  border: 1px solid rgba(255, 142, 185, 0.4);
  border-radius: 999px;
  background: rgba(255, 26, 117, 0.1);
  color: var(--fsp-pink-soft, #ff8eb9);
  font: inherit;
  cursor: pointer;
}

.feedee-player__line-play {
  position: absolute;
  top: 50%;
  inset-inline-end: 0;
  width: 1.9rem;
  height: 1.9rem;
  transform: translateY(-50%);
  font-size: 0.7rem;
  line-height: 1;
}

.feedee-player__exchange-play {
  justify-self: start;
  min-height: 40px;
  padding: 0.4rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.feedee-player__line-play:hover,
.feedee-player__exchange-play:hover {
  color: #fff;
  background: rgba(255, 26, 117, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .feedee-player__line.is-sweeping .feedee-player__line-text {
    animation: none;
    background-image: none;
    color: inherit;
    -webkit-background-clip: initial;
    background-clip: initial;
  }
}

.feedee-player__block--scene {
  position: relative;
  border-radius: 0.7rem;
  overflow: hidden;
  background: #060509;
}

.feedee-player__block--inline {
  aspect-ratio: 16 / 9;
}

.feedee-player__block--inline .feedee-player__scroll-stage {
  position: absolute;
  inset: 0;
}

.feedee-player__block--tall {
  height: 150vh;
  overflow: visible;
}

.feedee-player__block--tall .feedee-player__scroll-stage {
  position: sticky;
  top: 10vh;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 0.7rem;
  overflow: hidden;
  background: #060509;
}

.feedee-player__block--full {
  min-height: 100dvh;
  display: grid;
  align-items: center;
  background: transparent;
  overflow: visible;
}

.feedee-player__block--full .feedee-player__scroll-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 0.7rem;
  overflow: hidden;
  background: #060509;
}

.feedee-player__block--spacer-sm { height: 2rem; }
.feedee-player__block--spacer-md { height: 5rem; }
.feedee-player__block--spacer-lg { height: 9rem; }

.feedee-player__block--reveals {
  opacity: 0;
  translate: 0 14px;
  transition:
    opacity var(--fsc-reveal-duration, 420ms) ease var(--fsc-reveal-delay, 0ms),
    translate var(--fsc-reveal-duration, 420ms) ease var(--fsc-reveal-delay, 0ms);
}

.feedee-player__block--reveals.is-revealed {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .feedee-player__layer-set,
  .feedee-player__choice {
    transition: none !important;
    animation: none !important;
  }

  .feedee-player__block--reveals {
    opacity: 1 !important;
    translate: 0 0 !important;
    transition: none !important;
  }
}