/* Nettoge Cine Quote — 映像つきの引用（2026-10-02）。
   引用のすぐ下の再生ボタンと、押したときに画面いっぱいに出る映像の舞台（.ntg-cine-stage）。
   ボタンは物語パートの羊皮紙の上に置くので、TES の「雰囲気を合わせる」ボタン（tes-mood-nettoge.css）と同じ色にする:
   ライトはインクの地 #1f1b16 に紙の字 #efe6d2、ダーク（羊皮紙が濃い茶）は紙の地 #e9e0cb にインクの字。再生の丸は赤 #a12a1c。
   舞台は黒の上に、横いっぱいの帯を置き、動画をその帯に合わせて少し拡大する（上下に黒帯。端は少し見切れる）。
   依頼主「上下黒帯にして、もう少し引きで」「少し拡大されて見切れてもいい。横幅ぴったりは見づらい」「黒帯がでかすぎる。半分にして」
   「帯ふとくするか、スマホで Oblivion の title 見えるくらいに」。題字（The Elder Scrolls IV・OBLIVION）は画面の左 15〜42% に出るので、
   縦長の画面では拡大を 1.35 倍まで（帯の高さ 76vw）にして題字を入れる。横長の画面は黒帯を細く（帯の高さ 88vh）。
   字幕（日本語＋小さく英語）は映像のすぐ下。黒帯に入りきらない画面だけ、映像の下の方に重ねる。字はサイトの Noto Sans JP。 */
.ntg-cine {
	display: flex;
	justify-content: center;
	margin: -.2em 0 1.6em;
}

.ntg-cine__cues {
	display: none;
}

.ntg-cine__play {
	align-items: center;
	appearance: none;
	background: #1f1b16;
	border: 1px solid #1f1b16;
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(40, 25, 10, .28);
	color: #efe6d2;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	gap: .7em;
	line-height: 1.35;
	padding: .45em 1.3em .45em .45em;
	text-align: left;
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.ntg-cine__play:hover,
.ntg-cine__play:focus-visible {
	box-shadow: 0 0 0 1px #1f1b16, 0 0 14px rgba(255, 160, 70, .45);
	transform: translateY(-1px);
}

.ntg-cine__play:focus-visible {
	outline: 2px solid #b08a3e;
	outline-offset: 3px;
}

html[data-nettoge-theme="dark"] .ntg-cine__play {
	background: #e9e0cb;
	border-color: #e9e0cb;
	color: #1f1b16;
}

html[data-nettoge-theme="dark"] .ntg-cine__play:hover,
html[data-nettoge-theme="dark"] .ntg-cine__play:focus-visible {
	box-shadow: 0 0 0 1px #e9e0cb, 0 0 14px rgba(255, 160, 70, .45);
}

.ntg-cine__tri {
	background: #a12a1c;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
	flex: none;
	height: 2.4em;
	position: relative;
	width: 2.4em;
}

.ntg-cine__tri::after {
	border-bottom: .5em solid transparent;
	border-left: .8em solid #f6efe0;
	border-top: .5em solid transparent;
	content: "";
	left: 56%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.ntg-cine__lbl {
	display: block;
	font-weight: 700;
	letter-spacing: .04em;
}

.ntg-cine__meta {
	display: block;
	font-size: .74em;
	opacity: .78;
}

/* 演出のもとになる引用。舞台が出るあいだはフェードして消え、終わると戻る */
.ntg-cine-src {
	transition: opacity .8s ease;
}

.ntg-cine-src.is-out {
	opacity: 0;
}

html.ntg-cine-lock,
html.ntg-cine-lock body {
	overflow: hidden;
}

/* 舞台（画面いっぱいの黒）。映像の帯は横いっぱいで、高さは「画面の 88%」と「幅の 76%（16:9 の 1.35 倍）」の小さいほう */
.ntg-cine-stage {
	--cine-h: min(88vh, 76vw);
	--cine-sub: clamp(16px, min(2.2vw, 3.6vh), 30px); /* 字幕の字の大きさ */
	-webkit-tap-highlight-color: transparent;
	background: #000;
	cursor: pointer;
	inset: 0;
	opacity: 0;
	position: fixed;
	transition: opacity 1.4s ease;
	z-index: 100000;
}

.ntg-cine-stage.is-on {
	opacity: 1;
}

.ntg-cine-stage.is-off {
	opacity: 0;
	transition-duration: 1.8s;
}

@supports (height: 100dvh) {
	.ntg-cine-stage {
		--cine-h: min(88dvh, 76vw);
	}
}

.ntg-cine-stage__video {
	background: #000;
	height: var(--cine-h);
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
}

/* 字幕。映像のすぐ下（帯の下端＋1.2vh）から下へ書く。下に 2 行＋英語の入る余地（字の 4.4 倍）が無い画面では、
   その分だけ上へ寄せて映像の下の方に重ねる。行は同じ場所に重ね、入れ替わるときは前の行が消えながら次の行が出る */
.ntg-cine-stage__sub {
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: min(calc(50% + var(--cine-h) / 2 + 1.2vh), calc(100% - max(2.4vh, calc(env(safe-area-inset-bottom, 0px) + 12px)) - var(--cine-sub) * 4.4));
	transform: translateX(-50%);
	width: min(94vw, 1200px);
}

.ntg-cine-stage__line {
	left: 0;
	margin: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
	transform: translateY(-4px);
	transition: opacity .6s ease, transform .6s ease;
}

.ntg-cine-stage__line.is-in {
	opacity: 1;
	transform: none;
}

.ntg-cine-stage__ja {
	color: #fff;
	display: block;
	font-family: "Noto Sans JP", sans-serif;
	font-size: var(--cine-sub);
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.55;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .95);
	text-wrap: balance;
	word-break: auto-phrase; /* 「オブ／リビオン」のように語の途中で折らない（対応していない端末はふつうの折り返し） */
}

.ntg-cine-stage__en {
	color: rgba(255, 255, 255, .72);
	display: block;
	font-size: clamp(11px, min(1.15vw, 1.9vh), 16px);
	font-style: italic;
	letter-spacing: .02em;
	margin-top: .45em;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .95);
}

/* 映像の出どころは上の黒帯の左（字幕と重ならないように。右は音量と閉じるボタン） */
.ntg-cine-stage__credit {
	color: rgba(255, 255, 255, .5);
	font-size: 11px;
	left: 16px;
	letter-spacing: .03em;
	line-height: 1.5;
	pointer-events: none;
	position: absolute;
	right: 236px;
	top: max(26px, calc(env(safe-area-inset-top, 0px) + 12px));
}

.ntg-cine-stage__bar {
	background: rgba(255, 255, 255, .12);
	bottom: 0;
	height: 3px;
	left: 0;
	position: absolute;
	right: 0;
}

.ntg-cine-stage__bar span {
	background: #b08a3e;
	display: block;
	height: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.ntg-cine-stage__close {
	appearance: none;
	background: rgba(0, 0, 0, .35);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	font-size: 22px;
	height: 44px;
	line-height: 1;
	opacity: .75;
	padding: 0;
	position: absolute;
	right: max(14px, env(safe-area-inset-right, 0px));
	top: max(14px, env(safe-area-inset-top, 0px));
	transition: opacity .2s ease;
	width: 44px;
}

.ntg-cine-stage__close:hover,
.ntg-cine-stage__close:focus-visible {
	opacity: 1;
}

/* 音量（2026-10-12）: 閉じるボタンの左に「消音＋つまみ」。値は BGM ブロックと同じサイト共通（frontend.js の NV）。
   iOS など音量を変えられない端末は消音ボタンだけ（.is-mute-only） */
.ntg-cine-stage {
	--cine-ico-vol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 6v12l-4.5-3.5H4z' fill='black'/%3E%3Cpath d='M15.5 9.2a4 4 0 0 1 0 5.6M18.2 6.5a7.8 7.8 0 0 1 0 11'/%3E%3C/svg%3E");
	--cine-ico-mute: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 6v12l-4.5-3.5H4z' fill='black'/%3E%3Cpath d='M16 9.5l5 5M21 9.5l-5 5'/%3E%3C/svg%3E");
}

.ntg-cine-stage__vol {
	align-items: center;
	background: rgba(0, 0, 0, .35);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 22px;
	box-sizing: border-box;
	cursor: default;
	display: flex;
	gap: 6px;
	height: 44px;
	opacity: .75;
	padding: 0 16px 0 3px;
	position: absolute;
	right: calc(max(14px, env(safe-area-inset-right, 0px)) + 54px);
	top: max(14px, env(safe-area-inset-top, 0px));
	transition: opacity .2s ease;
}

.ntg-cine-stage__vol:hover,
.ntg-cine-stage__vol:focus-within {
	opacity: 1;
}

.ntg-cine-stage__vol.is-mute-only {
	padding: 0 3px;
}

.ntg-cine-stage__mute {
	align-items: center;
	appearance: none;
	background: none;
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	height: 36px;
	justify-content: center;
	padding: 0;
	width: 36px;
}

.ntg-cine-stage__mute::before {
	background: currentColor;
	content: "";
	height: 20px;
	-webkit-mask: var(--cine-ico-vol) center / contain no-repeat;
	mask: var(--cine-ico-vol) center / contain no-repeat;
	width: 20px;
}

.ntg-cine-stage__mute.is-muted::before {
	-webkit-mask-image: var(--cine-ico-mute);
	mask-image: var(--cine-ico-mute);
}

/* サイト全体の入力欄の決まり（SWELL の input:not([type=checkbox]):not([type=radio])、詳細度 0,2,1）が灰色の地・枠・余白を付けて
   白い箱に見えるので（2026-11-01 依頼主のスクショ）、つまみ本体は舞台・音量の枠から書いて 0,3,0 にする */
.ntg-cine-stage .ntg-cine-stage__vol .ntg-cine-stage__range {
	--cine-vol: 100%;
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	height: 24px;
	margin: 0;
	padding: 0;
	width: 96px;
}

.ntg-cine-stage__range::-webkit-slider-runnable-track {
	background: linear-gradient(to right, #fff var(--cine-vol), rgba(255, 255, 255, .25) var(--cine-vol));
	border-radius: 2px;
	height: 4px;
}

.ntg-cine-stage__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	background: #fff;
	border: 0;
	border-radius: 50%;
	height: 13px;
	margin-top: -4.5px;
	width: 13px;
}

.ntg-cine-stage__range::-moz-range-track {
	background: rgba(255, 255, 255, .25);
	border-radius: 2px;
	height: 4px;
}

.ntg-cine-stage__range::-moz-range-progress {
	background: #fff;
	border-radius: 2px;
	height: 4px;
}

.ntg-cine-stage__range::-moz-range-thumb {
	background: #fff;
	border: 0;
	border-radius: 50%;
	height: 13px;
	width: 13px;
}

.ntg-cine-stage .ntg-cine-stage__vol .ntg-cine-stage__range:focus-visible {
	border-radius: 4px;
	outline: 2px solid rgba(255, 255, 255, .6);
	outline-offset: 2px;
}

.ntg-cine-stage__vol.is-muted .ntg-cine-stage__range {
	opacity: .45;
}

/* 狭い画面（縦のスマホ）は、音量を閉じるボタンの下へ（上の黒帯は広い）。出どころの字は前の幅のまま */
@media (max-width: 600px) {
	.ntg-cine-stage__credit {
		right: 72px;
	}

	.ntg-cine-stage__vol {
		right: max(14px, env(safe-area-inset-right, 0px));
		top: calc(max(14px, env(safe-area-inset-top, 0px)) + 54px);
	}
}

/* 一時停止中と、自動で再生できなかったときに出す再生の印 */
.ntg-cine-stage__hint {
	background: rgba(0, 0, 0, .45);
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	height: 88px;
	left: 50%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: opacity .3s ease;
	width: 88px;
}

.ntg-cine-stage__hint::after {
	border-bottom: 16px solid transparent;
	border-left: 26px solid #fff;
	border-top: 16px solid transparent;
	content: "";
	left: 54%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.ntg-cine-stage.is-paused .ntg-cine-stage__hint {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ntg-cine-src,
	.ntg-cine-stage,
	.ntg-cine-stage.is-off,
	.ntg-cine-stage__line {
		transition-duration: .2s;
	}
}