/**
 * サンプル動画の自前プレイヤー
 *
 * 今どきの動画サイトの見え方に寄せる。
 *   ・操作バーは黒のぼかしを下から重ねる
 *   ・止めているときと、マウスを乗せているときだけ出す
 *   ・シークバーは触ると太くなる
 *
 * h タグは使わない（テーマと干渉するため。サイト全体の決まり）。
 */

.avc-vp {
	--avc-vp-accent: #ff2d55;
	position: relative;
	width: 100%;
	margin: 0 0 18px;
	background: #000;
	border-radius: 10px;
	overflow: hidden;
	outline: none;
}
.avc-vp:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 45, 85, .55);
}

.avc-vp__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	cursor: pointer;
}

.avc-vp__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
}

/* ------------------------------------------------------------
   真ん中の大きな再生ボタン

   自動再生が止められたときと、一時停止しているときに出す。
   ------------------------------------------------------------ */
.avc-vp__big {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border: 0;
	background: rgba(0, 0, 0, .28);
	cursor: pointer;
	padding: 0;
}
.avc-vp:not(.is-playing) .avc-vp__big { display: flex; }

.avc-vp__bigicon {
	display: block;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	box-shadow: 0 2px 18px rgba(0, 0, 0, .45);
	position: relative;
	transition: transform .12s ease, background .12s ease;
}
.avc-vp__bigicon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 26px;
}
/* 三角は見た目の重心が左に寄るので、少しだけ右へ寄せる */
.avc-vp__bigicon > * { transform: translateX(2px); }
.avc-vp__big:hover .avc-vp__bigicon {
	transform: scale(1.07);
	background: var(--avc-vp-accent);
}

/* ------------------------------------------------------------
   音を出すボタン

   ミュートで流している間だけ出す。
   出しておかないと「音が無い動画」だと思われる。
   ------------------------------------------------------------ */
.avc-vp__unmute {
	position: absolute;
	top: 12px;
	right: 12px;
	display: none;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, .62);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background .12s ease;
}
.avc-vp.is-playing.is-muted .avc-vp__unmute { display: inline-flex; }
.avc-vp__unmute:hover { background: var(--avc-vp-accent); }

/* ------------------------------------------------------------
   操作バー
   ------------------------------------------------------------ */
.avc-vp__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 26px 12px 8px;
	background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .45) 55%, transparent 100%);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease;
	pointer-events: none;
}
/* 止めているとき、または触っているときだけ出す */
.avc-vp:not(.is-playing) .avc-vp__bar,
.avc-vp.is-ui .avc-vp__bar {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* --- シークバー --- */
.avc-vp__seek {
	position: relative;
	height: 16px;
	display: flex;
	align-items: center;
	cursor: pointer;
}
.avc-vp__seek::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .28);
	transition: height .12s ease;
}
.avc-vp__buffered,
.avc-vp__played {
	position: absolute;
	left: 0;
	height: 4px;
	border-radius: 2px;
	pointer-events: none;
	transition: height .12s ease;
}
.avc-vp__buffered { background: rgba(255, 255, 255, .45); width: 0; }
.avc-vp__played   { background: var(--avc-vp-accent); width: 0; }

.avc-vp__knob {
	position: absolute;
	top: 50%;
	left: 0;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	border-radius: 50%;
	background: #fff;
	transform: translateY(-50%) scale(0);
	transition: transform .12s ease;
	pointer-events: none;
}
.avc-vp__seek:hover::before,
.avc-vp__seek:hover .avc-vp__buffered,
.avc-vp__seek:hover .avc-vp__played { height: 6px; }
.avc-vp__seek:hover .avc-vp__knob { transform: translateY(-50%) scale(1); }

/* 実際に触るのはこの range。見た目は上の要素が担う */
.avc-vp__range {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	height: 16px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
}
.avc-vp__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
}

/* --- ボタンの並び --- */
.avc-vp__row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
}
.avc-vp__spacer { flex: 1 1 auto; }

.avc-vp__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background .12s ease;
}
.avc-vp__btn:hover { background: rgba(255, 255, 255, .16); }

/* ------------------------------------------------------------
   アイコン（Font Awesome）

   【状態はクラスで見せ分ける。JS でアイコンを差し替えない】
   Font Awesome を JS 版で読み込んでいると、<i> は起動時に <svg> へ
   置き換えられる。そのあと JS で className を書き換えても絵は変わらず、
   付けたクラスだけが残って壊れる。
   再生中／停止中の両方を置いておき、外側のクラスで出し分ける。
   こうしておくと「再生中なのに再生アイコンのまま」が起きない。
   ------------------------------------------------------------ */
.avc-vp__btn [data-when] {
	display: none;
	line-height: 1;
	font-size: 15px;
}
.avc-vp__btn [data-when] svg { display: block; }   /* JS 版で <svg> になったとき */

.avc-vp:not(.is-playing) .avc-vp__btn [data-when="paused"],
.avc-vp.is-playing       .avc-vp__btn [data-when="playing"],
.avc-vp.is-muted         .avc-vp__btn [data-when="muted"],
.avc-vp.is-lowvol        .avc-vp__btn [data-when="low"],
.avc-vp:not(.is-full)    .avc-vp__btn [data-when="windowed"],
.avc-vp.is-full          .avc-vp__btn [data-when="fullscreen"] {
	display: inline-flex;
}

/* 音が出ていて、絞ってもいないとき */
.avc-vp:not(.is-muted):not(.is-lowvol) .avc-vp__btn [data-when="high"] {
	display: inline-flex;
}

/* --- 音量 --- */
.avc-vp__vol {
	display: flex;
	align-items: center;
	gap: 2px;
}
.avc-vp__volrange {
	width: 0;
	opacity: 0;
	height: 4px;
	margin: 0;
	transition: width .16s ease, opacity .16s ease;
	-webkit-appearance: none;
	appearance: none;
	background: rgba(255, 255, 255, .3);
	border-radius: 2px;
	cursor: pointer;
}
.avc-vp__vol:hover .avc-vp__volrange,
.avc-vp__volrange:focus-visible {
	width: 74px;
	opacity: 1;
}
.avc-vp__volrange::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
}
.avc-vp__volrange::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border: 0;
	border-radius: 50%;
	background: #fff;
}

/* --- 時間 --- */
.avc-vp__time {
	margin-left: 4px;
	color: #fff;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.avc-vp__bigicon { width: 56px; height: 56px; font-size: 21px; }
	.avc-vp__bar { padding: 22px 8px 6px; }
	.avc-vp__btn { width: 30px; height: 30px; }
	.avc-vp__time { font-size: 11px; }
	/* 幅が足りないので、音量つまみは畳んだまま */
	.avc-vp__vol:hover .avc-vp__volrange { width: 54px; }
}

/* ------------------------------------------------------------
   見終わったあと

   ずっと回していると、終わりが来ない。
   サンプルは「続きが見たいかどうか」を決めるためのものなので、
   見終わったところで、続きのある場所を出す。

   ここまで見た人は、その先が気になっている。
   探しに行かせず、そのまま置く。
   ------------------------------------------------------------ */
.avc-vp__end {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 18px;
	text-align: center;
	/* 下の絵をうっすら残す。真っ黒だと、何を見ていたか分からなくなる */
	background: linear-gradient(180deg, rgba(12, 14, 18, .74), rgba(12, 14, 18, .93));
	animation: avc-vpend .28s ease-out both;
}
@keyframes avc-vpend {
	from { opacity: 0; }
	to   { opacity: 1; }
}
/* 終わりの口が出ているあいだは、大きい再生ボタンを出さない */
.avc-vp.is-ended .avc-vp__big { display: none; }

.avc-vp__endlead {
	margin: 0;
	font-size: 14px;
	font-weight: 800;
	color: #fff;
	letter-spacing: .02em;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
/*
 * 買える場所のボタン。
 * 暗い地の上なので、そのままだと沈む。
 * 少し大きく、白い縁を回して浮かせる。
 */
.avc-vp__end .avc-affs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
}
/*
 * 【幅を文字数で決めない】
 * 並べるだけだと「MGS」の3文字が一番小さいボタンになる。
 * 押させたい場所なので、押しやすさが名前の長さで決まるのはおかしい。
 * 同じ基準の幅を配って、狭いときだけ一緒に縮める。
 *
 * 上限を付けているのは、1つしか無いときに
 * 横いっぱいの帯になってボタンに見えなくなるため。
 */
.avc-vp__end .avc-aff {
	flex: 1 1 140px;
	max-width: 178px;
	padding: 13px 8px;
	transform: scale(1.04);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .38);
}
.avc-vp__again {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 18px;
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 999px;
	cursor: pointer;
}
.avc-vp__again:hover { background: rgba(255, 255, 255, .24); }

@media (max-width: 600px) {
	.avc-vp__end { gap: 11px; padding: 14px; }
	.avc-vp__endlead { font-size: 12.5px; }
	/* スマホは2つで1行に収まる幅まで落とす（3つ目からは折り返す） */
	.avc-vp__end .avc-aff {
		flex-basis: 118px;
		max-width: 150px;
		padding: 11px 6px;
		transform: none;
	}
}