/* ============================================================================
   FEELIN' COLLECTIVE — Custom Video Player
   Scoped stylesheet. Everything lives under .fc-video-player so it can be
   dropped into the main site without colliding with existing styles.

   Themes:  .fc-theme-bright-pop   (hot-pink frame, flat Y2K vector)
            .fc-theme-dark-stealth (cinematic field-monitor, glow)
   Formats: .fc-format-horizontal  (16:9)
            .fc-format-vertical     (9:16)
   ========================================================================== */

/* ---- Brand fonts (already loaded by the main site; imported here so the
        standalone demo looks correct on its own). Safe to remove on
        integration since the site provides Syne / Space Mono / Lora. ------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@600;700;800&family=Lora:ital@0;1&display=swap');

/* ---- Design tokens (shared) ---------------------------------------------- */
.fc-video-player {
  /* brand palette pulled from the live site */
  --fc-pink:        #FF2D9B;
  --fc-lime:        #C6FF3F;
  --fc-purple:      #B026FF;
  --fc-cream:       #FBF8F0;
  --fc-cream-2:     #F4F0E6;
  --fc-ink:         #0B0A12;

  --fc-font-display: 'Syne', 'Segoe UI', system-ui, sans-serif;
  --fc-font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --fc-font-body:    'Lora', Georgia, 'Times New Roman', serif;

  --fc-radius:   14px;
  --fc-radius-s: 8px;
  --fc-idle-fade: 2700ms; /* controlled from JS too; keeps CSS in sync */

  /* theme hooks (overridden per theme) */
  --fc-frame:        var(--fc-pink);
  --fc-frame-w:      14px;
  --fc-chrome-bg:    #14121c;
  --fc-chrome-text:  var(--fc-cream);
  --fc-chrome-dim:   rgba(251,248,240,.62);
  --fc-surface:      #17151f;
  --fc-accent:       var(--fc-lime);
  --fc-accent-2:     var(--fc-pink);
  --fc-on-accent:    #0B0A12;
  --fc-btn-bg:       rgba(255,255,255,.06);
  --fc-btn-bg-hover: rgba(255,255,255,.14);
  --fc-track:        rgba(255,255,255,.18);
  --fc-focus:        var(--fc-lime);
  --fc-drawer-bg:    #14121c;
  --fc-drawer-line:  rgba(255,255,255,.12);
  --fc-shadow:       0 24px 60px -28px rgba(0,0,0,.8);
  --fc-scan:         rgba(0,0,0,.16);

  display: block;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  font-family: var(--fc-font-body);
  color: var(--fc-chrome-text);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.fc-video-player *,
.fc-video-player *::before,
.fc-video-player *::after { box-sizing: border-box; }

.fc-format-vertical { max-width: 460px; }

/* =====================  THEME · BRIGHT POP  ================================ */
.fc-theme-bright-pop {
  --fc-frame:        var(--fc-pink);
  --fc-frame-w:      16px;
  --fc-chrome-bg:    var(--fc-pink);
  --fc-chrome-text:  var(--fc-ink);
  --fc-chrome-dim:   rgba(11,10,18,.66);
  --fc-surface:      var(--fc-cream);
  --fc-accent:       var(--fc-lime);
  --fc-accent-2:     var(--fc-ink);
  --fc-on-accent:    var(--fc-ink);
  --fc-btn-bg:       var(--fc-cream);
  --fc-btn-bg-hover: var(--fc-lime);
  --fc-track:        rgba(11,10,18,.22);
  --fc-focus:        var(--fc-ink);
  --fc-drawer-bg:    var(--fc-cream);
  --fc-drawer-line:  rgba(11,10,18,.16);
  --fc-shadow:       0 0 0 3px var(--fc-ink), 0 26px 60px -30px rgba(0,0,0,.9);
  --fc-scan:         rgba(11,10,18,.10);
}

/* =====================  THEME · DARK STEALTH  ============================= */
.fc-theme-dark-stealth {
  --fc-frame:        #26232f;
  --fc-frame-w:      12px;
  --fc-chrome-bg:    linear-gradient(180deg,#1a1824 0%,#100e18 100%);
  --fc-chrome-text:  var(--fc-cream);
  --fc-chrome-dim:   rgba(251,248,240,.55);
  --fc-surface:      #100e18;
  --fc-accent:       var(--fc-lime);
  --fc-accent-2:     var(--fc-pink);
  --fc-on-accent:    #0B0A12;
  --fc-btn-bg:       rgba(255,255,255,.05);
  --fc-btn-bg-hover: rgba(198,255,63,.16);
  --fc-track:        rgba(255,255,255,.14);
  --fc-focus:        var(--fc-lime);
  --fc-drawer-bg:    #100e18;
  --fc-drawer-line:  rgba(198,255,63,.14);
  --fc-shadow:
     0 0 0 1px rgba(198,255,63,.10),
     0 0 0 1px rgba(255,45,155,.08),
     0 30px 70px -30px rgba(0,0,0,.95),
     0 0 60px -20px rgba(176,38,255,.35);
  --fc-scan:         rgba(255,45,155,.10);
}

/* =====================  OUTER FRAME / CHROME  ============================= */
.fc-player {
  position: relative;
  border-radius: var(--fc-radius);
  background: var(--fc-frame);
  padding: var(--fc-frame-w);
  box-shadow: var(--fc-shadow);
}
.fc-theme-dark-stealth .fc-player {
  background:
     linear-gradient(180deg,#2a2733,#171521) padding-box,
     var(--fc-frame);
  border: 1px solid rgba(255,255,255,.05);
}
.fc-theme-bright-pop .fc-player {
  /* flat sticker look: hard black keyline, no gloss */
  background: var(--fc-pink);
}

/* header + stage share an inner cinematic panel */
.fc-player__panel {
  position: relative;
  border-radius: calc(var(--fc-radius) - 6px);
  overflow: hidden;
  background: #000;
}
.fc-theme-dark-stealth .fc-player__panel {
  box-shadow: inset 0 0 0 1px rgba(198,255,63,.12), inset 0 0 40px rgba(0,0,0,.6);
}
.fc-theme-bright-pop .fc-player__panel {
  box-shadow: inset 0 0 0 3px var(--fc-ink);
}

/* =====================  HEADER STRIP  ==================================== */
.fc-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 100%);
  transform: translateY(0);
  transition: opacity .35s ease, transform .35s ease;
}
.fc-theme-bright-pop .fc-header {
  background: linear-gradient(180deg, rgba(11,10,18,.78) 0%, rgba(11,10,18,0) 100%);
}
/* hidden before first play, and while idle */
.fc-player:not(.is-started) .fc-header,
.fc-player.is-idle .fc-header {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.fc-brand { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.fc-brand__badge {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  color: var(--fc-pink);
  background: rgba(255,255,255,.08);
}
.fc-theme-bright-pop .fc-brand__badge {
  background: var(--fc-lime);
  color: var(--fc-ink);
  box-shadow: inset 0 0 0 2px var(--fc-ink);
  border-radius: 7px;
}
.fc-theme-dark-stealth .fc-brand__badge {
  background: rgba(255,45,155,.12);
  color: var(--fc-pink);
  box-shadow: inset 0 0 0 1px rgba(255,45,155,.4), 0 0 18px -4px rgba(255,45,155,.5);
}
.fc-brand__badge svg { width: 62%; height: 62%; display: block; }
.fc-brand__word {
  font-family: var(--fc-font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .14em;
  line-height: 1;
  color: var(--fc-chrome-text);
  white-space: nowrap;
}
.fc-theme-dark-stealth .fc-brand__word { text-shadow: 0 0 18px rgba(198,255,63,.25); }

/* title / role strip — integrated into the header, not a floating box */
.fc-titlestrip {
  min-width: 0;
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 1px;
  border-left: 2px solid var(--fc-accent-2);
  padding-left: 12px;
}
.fc-theme-bright-pop .fc-titlestrip {
  border-left: 0;
  align-self: center;
  flex: 0 1 auto;
  background: var(--fc-cream);
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--fc-ink);
}
.fc-titlestrip__title {
  font-family: var(--fc-font-display);
  font-weight: 800; font-size: 14px; line-height: 1.05;
  letter-spacing: .02em;
  color: var(--fc-chrome-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fc-titlestrip__role {
  font-family: var(--fc-font-mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fc-chrome-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fc-timecode {
  flex: 0 0 auto;
  font-family: var(--fc-font-mono);
  font-weight: 700; font-size: 12px; letter-spacing: .08em;
  color: var(--fc-accent);
  padding: 4px 8px; border-radius: 6px;
  background: rgba(0,0,0,.4);
}
.fc-theme-bright-pop .fc-timecode {
  color: var(--fc-lime); background: var(--fc-ink);
}
.fc-theme-dark-stealth .fc-timecode {
  color: var(--fc-lime);
  box-shadow: inset 0 0 0 1px rgba(198,255,63,.3);
  text-shadow: 0 0 10px rgba(198,255,63,.5);
}

/* =====================  STAGE / VIDEO  ================================== */
.fc-stage {
  position: relative;
  width: 100%;
  background: #000;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.fc-format-vertical .fc-stage { aspect-ratio: 9 / 16; }
.fc-stage__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

/* poster (pre-play) — thumbnail only, nothing else */
.fc-poster {
  position: absolute; inset: 0;
  z-index: 4;
  border: 0; padding: 0; margin: 0;
  width: 100%; height: 100%;
  cursor: pointer;
  background: #000 center/cover no-repeat;
  transition: opacity .4s ease;
}
.fc-poster::after { /* gentle vignette so the play affordance reads */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 100%);
}
.fc-player.is-started .fc-poster { opacity: 0; pointer-events: none; }

/* big central play affordance (only meaningful before/at pause) */
.fc-bigplay {
  position: absolute; z-index: 4;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 84px; height: 84px; border-radius: 999px;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  background: var(--fc-pink);
  color: #fff;
  box-shadow: 0 12px 40px -8px rgba(255,45,155,.7);
  transition: transform .18s ease, opacity .25s ease, background .2s;
}
.fc-bigplay svg { width: 34px; height: 34px; margin-left: 4px; }
.fc-bigplay:hover { transform: translate(-50%,-50%) scale(1.06); }
.fc-theme-bright-pop .fc-bigplay {
  background: var(--fc-lime); color: var(--fc-ink);
  box-shadow: 0 0 0 4px var(--fc-ink), 0 14px 40px -10px rgba(198,255,63,.7);
}
.fc-theme-dark-stealth .fc-bigplay {
  background: rgba(20,18,28,.72); color: var(--fc-lime);
  box-shadow: inset 0 0 0 2px rgba(198,255,63,.55), 0 0 46px -6px rgba(198,255,63,.5);
  backdrop-filter: blur(3px);
}
/* hide big play once playing */
.fc-player.is-playing .fc-bigplay { opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.8); }

/* side vertical audio / level meter (field-monitor detail) */
.fc-meter {
  position: absolute; z-index: 5;
  left: 10px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column-reverse; gap: 3px;
  padding: 8px 6px; border-radius: 8px;
  background: rgba(0,0,0,.42);
  opacity: 0; transition: opacity .35s ease;
}
.fc-theme-bright-pop .fc-meter { background: var(--fc-ink); }
.fc-meter__bar {
  width: 6px; height: 7px; border-radius: 2px;
  background: rgba(255,255,255,.16);
  transition: background .09s linear;
}
.fc-meter__bar.on   { background: var(--fc-lime); }
.fc-meter__bar.peak { background: var(--fc-pink); }
.fc-player.is-started:not(.is-idle) .fc-meter { opacity: 1; }
.fc-player.is-playing .fc-meter { opacity: 1; } /* meter can stay while playing */

/* subtle apostrophe watermark indent (the ONLY in-frame mark) */
.fc-watermark {
  position: absolute; z-index: 4;
  right: 12px; bottom: 12px;
  width: 34px; height: 34px;
  color: #fff; opacity: 0;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
  transition: opacity .4s ease;
  pointer-events: none;
}
.fc-watermark svg { width: 100%; height: 100%; display: block; }
.fc-player.is-started .fc-watermark { opacity: .34; }
.fc-theme-bright-pop .fc-watermark { color: var(--fc-lime); opacity: 0; }
.fc-theme-bright-pop .fc-player.is-started .fc-watermark,
.fc-player.is-started.fc-theme-bright-pop .fc-watermark { opacity: .5; }

/* central status flash on toggle */
.fc-flash {
  position: absolute; z-index: 6; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(.7);
  width: 74px; height: 74px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.55); color: #fff;
  opacity: 0; pointer-events: none;
}
.fc-flash svg { width: 30px; height: 30px; }
.fc-flash.show { animation: fc-flash .5s ease forwards; }
@keyframes fc-flash {
  0%   { opacity: .9; transform: translate(-50%,-50%) scale(.7); }
  100% { opacity: 0;  transform: translate(-50%,-50%) scale(1.25); }
}

/* CRT scanline overlay on the stage */
.fc-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, var(--fc-scan) 0 1px, transparent 1px 3px);
  mix-blend-mode: soft-light; opacity: .5;
}

/* =====================  CONTROLS  ====================================== */
.fc-controls {
  position: absolute; inset: auto 0 0 0; z-index: 5;
  padding: 26px 12px 12px;
  background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,0) 100%);
  transition: opacity .35s ease, transform .35s ease;
  display: flex; flex-direction: column; gap: 8px;
}
.fc-theme-bright-pop .fc-controls {
  background: linear-gradient(0deg, rgba(11,10,18,.9) 0%, rgba(11,10,18,0) 100%);
}
.fc-player:not(.is-started) .fc-controls,
.fc-player.is-idle .fc-controls {
  opacity: 0; transform: translateY(8px); pointer-events: none;
}

/* scrubber row */
.fc-scrub {
  position: relative;
  height: 20px; display: flex; align-items: center;
  cursor: pointer;
}
.fc-scrub__track {
  position: relative; width: 100%; height: 5px; border-radius: 999px;
  background: var(--fc-track); overflow: hidden;
}
.fc-scrub__buffer {
  position: absolute; inset: 0 auto 0 0; height: 100%;
  width: 0%; background: rgba(255,255,255,.22);
}
.fc-scrub__fill {
  position: absolute; inset: 0 auto 0 0; height: 100%;
  width: 0%; background: var(--fc-accent);
}
.fc-theme-bright-pop .fc-scrub__fill { background: var(--fc-lime); }
.fc-theme-dark-stealth .fc-scrub__fill {
  background: linear-gradient(90deg, var(--fc-pink), var(--fc-lime));
  box-shadow: 0 0 12px rgba(198,255,63,.6);
}
.fc-scrub__knob {
  position: absolute; top: 50%; left: 0;
  width: 14px; height: 14px; border-radius: 999px;
  transform: translate(-50%,-50%);
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5);
  opacity: 0; transition: opacity .15s;
}
.fc-theme-bright-pop .fc-scrub__knob { background: var(--fc-lime); box-shadow: 0 0 0 2px var(--fc-ink); }
.fc-scrub:hover .fc-scrub__knob, .fc-scrub:focus-within .fc-scrub__knob { opacity: 1; }

/* button row */
.fc-btns { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fc-spacer { flex: 1 1 auto; }

.fc-btn {
  appearance: none; border: 0; cursor: pointer;
  height: 38px; min-width: 38px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--fc-radius-s);
  background: var(--fc-btn-bg);
  color: var(--fc-chrome-text);
  font-family: var(--fc-font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .03em;
  transition: background .16s ease, color .16s ease, transform .1s ease;
}
.fc-btn svg { width: 20px; height: 20px; display: block; }
.fc-btn:hover { background: var(--fc-btn-bg-hover); }
.fc-theme-bright-pop .fc-btn { color: var(--fc-ink); box-shadow: inset 0 0 0 2px var(--fc-ink); }
.fc-theme-bright-pop .fc-btn:hover { color: var(--fc-ink); }
.fc-btn:active { transform: translateY(1px); }
.fc-btn[aria-pressed="true"] { background: var(--fc-accent); color: var(--fc-on-accent); }
.fc-btn.is-primary { background: var(--fc-accent-2); color: #fff; }
.fc-theme-bright-pop .fc-btn.is-primary { background: var(--fc-ink); color: var(--fc-cream); box-shadow: none; }
.fc-theme-dark-stealth .fc-btn.is-primary {
  background: var(--fc-pink); box-shadow: 0 0 20px -4px rgba(255,45,155,.7);
}

.fc-time {
  font-family: var(--fc-font-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--fc-chrome-text); padding: 0 6px; white-space: nowrap;
}
.fc-time b { color: var(--fc-accent); font-weight: 700; }
.fc-time span { color: var(--fc-chrome-dim); }

/* volume */
.fc-vol { display: flex; align-items: center; gap: 6px; }
.fc-vol__slider {
  width: 74px; height: 5px; border-radius: 999px;
  -webkit-appearance: none; appearance: none;
  background: var(--fc-track); cursor: pointer;
}
.fc-vol__slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; border-radius: 999px;
  background: var(--fc-accent); border: 0; cursor: pointer;
}
.fc-vol__slider::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 999px; border: 0;
  background: var(--fc-accent); cursor: pointer;
}

/* popover menus (speed) */
.fc-pop { position: relative; }
.fc-pop__menu {
  position: absolute; bottom: calc(100% + 8px); right: 0;
  min-width: 96px; padding: 6px; border-radius: 10px;
  background: var(--fc-drawer-bg);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.8);
  display: none; flex-direction: column; gap: 2px; z-index: 20;
}
.fc-theme-bright-pop .fc-pop__menu { box-shadow: 0 0 0 3px var(--fc-ink); }
.fc-theme-dark-stealth .fc-pop__menu { box-shadow: 0 0 0 1px rgba(198,255,63,.2), 0 18px 40px -18px rgba(0,0,0,.9); }
.fc-pop.is-open .fc-pop__menu { display: flex; }
.fc-pop__item {
  border: 0; background: transparent; cursor: pointer;
  text-align: left; padding: 7px 10px; border-radius: 7px;
  font-family: var(--fc-font-mono); font-size: 12px; font-weight: 700;
  color: var(--fc-chrome-text);
}
.fc-theme-bright-pop .fc-pop__item { color: var(--fc-ink); }
.fc-pop__item:hover { background: var(--fc-btn-bg-hover); }
.fc-pop__item[aria-checked="true"] { background: var(--fc-accent); color: var(--fc-on-accent); }

/* =====================  VERSION SELECTOR (trailer / full) ============== */
.fc-versions {
  display: flex; align-items: center; gap: 8px;
  padding: 10px var(--fc-frame-w) 2px;
}
.fc-versions__label {
  font-family: var(--fc-font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .16em; color: var(--fc-chrome-dim);
}
.fc-theme-bright-pop .fc-versions__label { color: var(--fc-cream); }
.fc-seg {
  display: inline-flex; padding: 3px; border-radius: 999px;
  background: rgba(0,0,0,.35);
}
.fc-theme-bright-pop .fc-seg { background: var(--fc-ink); }
.fc-theme-dark-stealth .fc-seg { box-shadow: inset 0 0 0 1px rgba(198,255,63,.18); }
.fc-seg__btn {
  border: 0; cursor: pointer; background: transparent;
  padding: 7px 16px; border-radius: 999px;
  font-family: var(--fc-font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .04em; color: var(--fc-cream);
}
.fc-seg__btn[aria-pressed="true"] { background: var(--fc-lime); color: var(--fc-ink); }
.fc-seg__btn small { font-family: var(--fc-font-mono); font-weight: 400; opacity: .7; margin-left: 6px; }

/* =====================  INFO DRAWER  ================================== */
.fc-drawer {
  margin-top: 12px;
  border-radius: var(--fc-radius);
  background: var(--fc-drawer-bg);
  color: var(--fc-chrome-text);
  overflow: hidden;
}
.fc-theme-bright-pop .fc-drawer { color: var(--fc-ink); box-shadow: 0 0 0 3px var(--fc-ink); }
.fc-theme-dark-stealth .fc-drawer { box-shadow: 0 0 0 1px rgba(198,255,63,.14); }
.fc-drawer[hidden] { display: none; }

.fc-drawer__grid {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 0;
}
.fc-drawer__col { padding: 20px 22px; }
.fc-drawer__col + .fc-drawer__col { border-left: 1px solid var(--fc-drawer-line); }

.fc-sect { border-top: 1px solid var(--fc-drawer-line); }
.fc-sect:first-child { border-top: 0; }
.fc-sect__head {
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; padding: 14px 0;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--fc-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--fc-accent-2);
}
.fc-theme-bright-pop .fc-sect__head { color: var(--fc-pink); }
.fc-sect__head::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px;
  background: var(--fc-accent);
}
.fc-sect__chev { margin-left: auto; transition: transform .2s ease; }
.fc-sect__head[aria-expanded="false"] .fc-sect__chev { transform: rotate(-90deg); }
.fc-sect__body {
  padding-bottom: 16px;
  font-family: var(--fc-font-body); font-size: 15px; line-height: 1.55;
  color: var(--fc-chrome-text);
}
.fc-theme-bright-pop .fc-sect__body { color: var(--fc-ink); }
.fc-sect__body[hidden] { display: none; }

.fc-collab { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fc-collab li { display: flex; flex-direction: column; }
.fc-collab__name { font-family: var(--fc-font-display); font-weight: 700; font-size: 14px; }
.fc-collab__role {
  font-family: var(--fc-font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fc-chrome-dim);
}
.fc-theme-bright-pop .fc-collab__role { color: rgba(11,10,18,.6); }

.fc-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fc-link {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 10px;
  text-decoration: none;
  background: var(--fc-btn-bg);
  color: var(--fc-chrome-text);
  transition: background .16s, transform .1s;
}
.fc-theme-bright-pop .fc-link { background: transparent; box-shadow: inset 0 0 0 2px var(--fc-ink); color: var(--fc-ink); }
.fc-link:hover { background: var(--fc-btn-bg-hover); transform: translateX(2px); }
.fc-theme-bright-pop .fc-link:hover { background: var(--fc-lime); }
.fc-link__label { font-family: var(--fc-font-display); font-weight: 700; font-size: 14px; }
.fc-link__type {
  font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fc-chrome-dim); margin-left: auto;
}
.fc-theme-bright-pop .fc-link__type { color: rgba(11,10,18,.55); }
.fc-link__ext { flex: 0 0 auto; opacity: .8; }
.fc-link__ext svg { width: 15px; height: 15px; display: block; }

/* =====================  FOCUS / A11Y  ================================= */
.fc-video-player :focus-visible {
  outline: 3px solid var(--fc-focus);
  outline-offset: 2px;
  border-radius: 6px;
}
.fc-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}

/* =====================  CAPTIONS STYLING  ============================ */
.fc-video-player video::cue {
  font-family: var(--fc-font-mono);
  background: rgba(0,0,0,.72); color: #fff;
}

/* =====================  RESPONSIVE  ================================== */
@media (max-width: 720px) {
  .fc-drawer__grid { grid-template-columns: 1fr; }
  .fc-drawer__col + .fc-drawer__col { border-left: 0; border-top: 1px solid var(--fc-drawer-line); }
  .fc-brand__word { display: none; }           /* keep just the badge on small screens */
  .fc-btn span.fc-btn__txt { display: none; }   /* icons only */
  .fc-vol__slider { display: none; }
}
@media (max-width: 460px) {
  .fc-btn { height: 34px; min-width: 34px; padding: 0 6px; }
  .fc-timecode { font-size: 10px; }
}

/* =====================  REDUCED MOTION  ============================== */
@media (prefers-reduced-motion: reduce) {
  .fc-video-player *,
  .fc-video-player *::before,
  .fc-video-player *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .fc-stage::after { opacity: .25; }
}

/* =====================  STORY BUTTON (prominent)  ====================== */
.fc-btn.fc-btn--story { background: var(--fc-accent); color: var(--fc-on-accent); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.fc-btn.fc-btn--story:hover { background: var(--fc-accent); filter: brightness(1.05); }
.fc-theme-bright-pop .fc-btn.fc-btn--story { background: var(--fc-ink); color: var(--fc-lime); box-shadow: none; }
.fc-theme-dark-stealth .fc-btn.fc-btn--story { box-shadow: 0 0 22px -6px rgba(198,255,63,.6); }
.fc-btn--story .fc-btn__txt { display: inline-block !important; }  /* keep label visible, even on mobile */

/* fix bright-pop description contrast (dark text on cream drawer) */
.fc-theme-bright-pop .fc-sect__body,
.fc-theme-bright-pop .fc-collab__name { color: #141018; }

/* =====================  THEATRE VIEW  ================================= */
.fc-theatre {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(6,5,12,.88); backdrop-filter: blur(8px);
  overflow-y: auto; padding: min(5vh,44px) 16px 60px;
  animation: fc-theatre-in .28s ease;
}
@keyframes fc-theatre-in { from { opacity: 0; } to { opacity: 1; } }
.fc-theatre__inner { width: 100%; max-width: 1080px; margin: 0 auto; }
.fc-theatre__close {
  position: fixed; top: 16px; right: 16px; z-index: 10;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center;
  transition: background .2s, transform .2s;
}
.fc-theatre__close:hover { background: var(--fc-pink); transform: scale(1.06); }
.fc-theatre__close svg { width: 20px; height: 20px; }
.fc-theatre__stage { position: sticky; top: 0; z-index: 1; }  /* video pins while details scroll */
.fc-theatre__details {
  background: #141220; color: #f0eae0;
  border: 1px solid rgba(255,255,255,.1); border-top: 0;
  border-radius: 0 0 16px 16px;
}
.fc-theatre__head { padding: 26px 26px 4px; }
.fc-theatre__eyebrow { font-family: var(--fc-font-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #c6ff3f; margin-bottom: 8px; }
.fc-theatre__title { font-family: var(--fc-font-display); font-weight: 800; font-size: clamp(22px,3vw,34px); letter-spacing: -.01em; color: #fff; margin: 0 0 6px; }
.fc-theatre__role { font-family: var(--fc-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(240,234,224,.6); }
/* force readable detail text regardless of the player's theme */
.fc-theatre .fc-drawer { margin: 0; background: transparent; box-shadow: none; border-radius: 0; }
.fc-theatre .fc-drawer__col + .fc-drawer__col { border-left-color: rgba(255,255,255,.1); }
.fc-theatre .fc-sect { border-top-color: rgba(255,255,255,.1); }
.fc-theatre .fc-sect__head { color: #ff2f9a !important; }
.fc-theatre .fc-sect__head::before { background: #c6ff3f; }
.fc-theatre .fc-sect__body,
.fc-theatre .fc-collab__name,
.fc-theatre .fc-link__label { color: #f0eae0 !important; }
.fc-theatre .fc-collab__role,
.fc-theatre .fc-link__type { color: rgba(240,234,224,.55) !important; }
.fc-theatre .fc-link { background: rgba(255,255,255,.05) !important; box-shadow: none !important; color: #f0eae0 !important; }
.fc-theatre .fc-link:hover { background: rgba(198,255,63,.14) !important; }
@media (max-width: 720px){ .fc-theatre__details .fc-drawer__grid { grid-template-columns: 1fr; } }

/* theatre — desktop two-column so details are always visible beside the video */
.fc-theatre__stage .fc-player { max-width: 100%; }
@media (min-width: 900px) {
  .fc-theatre__inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; max-width: 1220px; align-items: start; }
  .fc-theatre__stage { position: sticky; top: 44px; }
  .fc-theatre__details { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; max-height: calc(100vh - 88px); overflow-y: auto; }
}