.multi-angle-player {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}

.multi-angle-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
}

.multi-angle-video.is-active {
	opacity: 1;
}

.multi-angle-video-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.multi-angle-video,
.multi-angle-video-wrap {
	pointer-events: none;
}

.multi-angle-play,
.multi-angle-controls,
.multi-angle-controls *,
.multi-angle-ui,
.multi-angle-ui * {
	touch-action: manipulation;
}

/* 中央再生ボタン */
.multi-angle-play {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	z-index: 6;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border: none;
	border-radius: 9999px;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
}

.multi-angle-play:hover {
	background: rgba(255, 255, 255, 0.10);
	transform: translate(-50%, -50%) scale(1.06);
}

.multi-angle-play svg {
	width: 26px;
	height: 26px;
	stroke-width: 2;
}

/* 下部コントロール */
.multi-angle-controls {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 34px;
	padding: 0 5px 0 10px;
	box-sizing: border-box;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.multi-angle-play-small {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	opacity: .9;
}

.multi-angle-play-small:hover {
	opacity: 1;
}

.multi-angle-play-small svg {
	width: 16px;
	height: 16px;
	stroke-width: 2;
}

.multi-angle-current-time,
.multi-angle-duration {
	flex: 0 0 auto;
	min-width: 36px;
	color: rgba(255, 255, 255, .9);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
}

/* シークバー */
.multi-angle-seek {
	flex: 1;
	min-width: 0;
	height: 12px;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	cursor: pointer;
}

.multi-angle-seek::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, .75) 0%,
		rgba(255, 255, 255, .75) var(--progress, 0%),
		rgba(255, 255, 255, .35) var(--progress, 0%),
		rgba(255, 255, 255, .35) 100%
	);
}

.multi-angle-seek::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 0;
	height: 0;
	border: none;
}

.multi-angle-seek::-moz-range-track {
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .35);
}

.multi-angle-seek::-moz-range-progress {
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .75);
}

.multi-angle-seek::-moz-range-thumb {
	width: 0;
	height: 0;
	border: none;
}

/* アングル切替 */
.multi-angle-ui {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 7;
	display: flex;
	gap: 6px;
	padding: 6px;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.multi-angle-ui button {
	height: 28px;
	padding: 0 10px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: rgba(255, 255, 255, 0.75);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	text-transform: uppercase;
}

.multi-angle-ui button.is-active {
	background: rgba(255, 255, 255, 0.9);
	color: #000;
}

/* MUTE / LOOP */
.multi-angle-mute,
.multi-angle-loop {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	height: 24px;
	padding: 0 8px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: rgba(255, 255, 255, .75);
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.multi-angle-mute.is-active,
.multi-angle-loop.is-active {
	background: rgba(255, 255, 255, .9);
	color: #000;
}

.multi-angle-mute {
	margin-right: -5px;
}

/* ==========================
   UI 表示 / 非表示
   ========================== */

.multi-angle-controls,
.multi-angle-play,
.multi-angle-ui {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity .22s ease,
		visibility 0s linear .22s;
}

.multi-angle-player.is-ui-gone .multi-angle-controls,
.multi-angle-player.is-ui-gone .multi-angle-play,
.multi-angle-player.is-ui-gone .multi-angle-ui {
	display: none;
}

.multi-angle-player.is-ui-visible .multi-angle-controls {
	display: flex;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity .22s ease,
		visibility 0s linear 0s;
}

.multi-angle-player.is-ui-visible .multi-angle-play {
	display: grid;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, -50%);
	transition:
		opacity .22s ease,
		transform .15s ease,
		background .2s ease;
}

.multi-angle-player.is-ui-visible .multi-angle-ui {
	display: flex;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity .22s ease,
		visibility 0s linear 0s;
}

@media (hover: hover) and (pointer: fine) {
	.multi-angle-player.is-ui-visible .multi-angle-play:hover {
		background: rgba(255, 255, 255, 0.10);
		transform: translate(-50%, -50%) scale(1.06);
	}
}

/* タッチ端末のhover無効化 */
@media (hover: none), (pointer: coarse) {
	.multi-angle-play:hover {
		background: rgba(0, 0, 0, 0.65);
		transform: translate(-50%, -50%);
	}

	.multi-angle-play-small:hover {
		opacity: .9;
	}
}

/* モバイル */
@media (max-width: 980px) {
	.multi-angle-player {
		width: 100vw;
		max-width: none;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		transform: none;
		border-radius: 0;
	}
}

.multi-angle-txt {
	color: rgba(255, 255, 255, .65);
	font-size: 80%;
	pointer-events: none;
	opacity: 0.6;
	margin-top: -32px;
	text-align: right;
}

/* Focus */
.multi-angle-player button:focus,
.multi-angle-player input:focus {
	outline: none;
	box-shadow: none;
}

.multi-angle-player button:focus-visible,
.multi-angle-player input:focus-visible {
	outline: none;
	box-shadow: none;
}