/* YouTube click-to-play block (RichTextInput YouTube button + lib/YouTubeEmbed.js).
   Same look inside the editor and on public pages; the play badge is pure CSS. */
.gaimon-youtube{
	position: relative;
	display: block;
	width: 100%;
	max-width: 720px;
	aspect-ratio: 16 / 9;
	margin: 10px 0;
	background: #000;
	border-radius: 6px;
	overflow: hidden;
}
.gaimon-youtube .gaimon-youtube-link{
	position: absolute;
	inset: 0;
	display: block;
	cursor: pointer;
	outline-offset: -3px;
}
.gaimon-youtube .gaimon-youtube-thumb{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: filter .2s;
}
.gaimon-youtube .gaimon-youtube-play{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 68px;
	height: 48px;
	margin: -24px 0 0 -34px;
	border-radius: 12px;
	background: rgba(33, 33, 33, .85);
	transition: background .2s;
}
.gaimon-youtube .gaimon-youtube-play::after{
	content: "";
	position: absolute;
	left: 27px;
	top: 14px;
	border-style: solid;
	border-width: 10px 0 10px 18px;
	border-color: transparent transparent transparent #fff;
}
.gaimon-youtube .gaimon-youtube-link:hover .gaimon-youtube-play,
.gaimon-youtube .gaimon-youtube-link:focus .gaimon-youtube-play{
	background: #f00;
}
.gaimon-youtube .gaimon-youtube-link:hover .gaimon-youtube-thumb{
	filter: brightness(1.08);
}
.gaimon-youtube iframe{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
/* editor only (.ql-container = a live Quill; public pages reuse .ql-editor for styling): selectable, not playable */
.ql-container .ql-editor .gaimon-youtube .gaimon-youtube-link{
	pointer-events: none;
}
.ql-container .ql-editor .gaimon-youtube.ql-selected,
.ql-container .ql-editor .gaimon-youtube:focus-within{
	outline: 2px solid #06c;
}