/* リール：縦に1本ずつ。ダーク基調のサイトに合わせる（色は子テーマの --mf-* があれば使う） */
.mfgc-reel { max-width: 600px; margin: 0 auto; }
.mfgc-reel__note { font-size: .85em; opacity: .8; margin: 0 0 12px; }

.mfgc-reel__feed {
	height: 80vh;
	height: 80svh;
	overflow-y: auto;
	scroll-snap-type: y proximity;
	overscroll-behavior: contain;
	border-radius: 12px;
	outline-offset: 2px;
}

.mfgc-reel__item {
	scroll-snap-align: start;
	min-height: 80vh;
	min-height: 80svh;
	box-sizing: border-box;
	padding: 12px 8px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.mfgc-reel__head,
.mfgc-reel__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mfgc-reel__name { font-weight: 700; font-size: 1.05em; }
.mfgc-reel__count { font-size: .8em; opacity: .7; white-space: nowrap; }
.mfgc-reel__foot { font-size: .9em; }

.mfgc-reel__embed {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	min-height: 320px;
}
.mfgc-reel__embed .twitter-tweet,
.mfgc-reel__embed .twitter-tweet-rendered { margin: 0 auto !important; max-width: 100%; }
.mfgc-reel__fallback { align-self: center; opacity: .85; }

.mfgc-reel__nav { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.mfgc-reel__btn {
	padding: 8px 20px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .25);
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.mfgc-reel__btn:hover { border-color: #ff4d8d; }

@media (prefers-reduced-motion: reduce) {
	.mfgc-reel__feed { scroll-behavior: auto; }
}

/* 作品記事のページに埋め込むXの投稿 */
.mfgc-x-embed { margin: 16px 0; display: flex; flex-direction: column; align-items: center; }
.mfgc-x-embed .twitter-tweet { margin: 0 auto !important; }
.mfgc-x-embed__note { font-size: .8em; opacity: .7; margin: 6px 0 0; text-align: center; }

/* リールの見出し：作品名とクリエイター名 */
.mfgc-reel__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mfgc-reel__creator { font-size: .85em; opacity: .8; }

/* 埋め込みが出ないとき（センシティブ判定など）でもXで見られるボタン */
.mfgc-x-embed__open { margin: 10px 0 0; text-align: center; }
.mfgc-x-embed__btn,
.mfgc-reel__fallback {
	display: inline-block;
	padding: 10px 24px;
	border-radius: 999px;
	background: linear-gradient(90deg, #ff4d8d, #a855f7);
	color: #fff !important;
	font-weight: 700;
	text-decoration: none;
}
.mfgc-reel__fallback { margin-top: 24px; }

/* 動画ファイルのプレーヤー */
.mfgc-video { display: block; width: 100%; max-height: 70vh; background: #000; border-radius: 12px; object-fit: contain; }
.mfgc-x-embed--video { width: 100%; }
.mfgc-reel__embed .mfgc-video { max-height: 100%; }

/* bunny.net のプレーヤー */
.mfgc-bunny { position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.mfgc-bunny__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mfgc-reel__embed .mfgc-bunny { max-height: 100%; }