/*
 * キャラ・弧盤の詳細ページ。common.css の後に読む。
 *
 * ヒーローは eFootball攻略Lab の選手詳細（player-detail.css の .efpd-hero）と同じ考え方:
 * 同じ画像をぼかして薄く敷き、左右は mask-image、上下は疑似要素のグラデで地の色へ溶かす。
 * NTE の立ち絵は背景が透過の切り抜きなので、ぼかすとキャラの色だけがにじんだ下地になる。
 *
 * 幅の切り替えはビューポートではなく本文の実幅（コンテナクエリ）で行う。
 * SWELL はサイドバーの有無で本文幅が変わり、ビューポート幅と一致しないため。
 * しきい値は px（SWELL は画面幅で html の font-size を変えるので rem だと狙った幅で切り替わらない）。
 */

.ntl-detail-root {
	container-type: inline-size;
	container-name: ntldetail;
	margin: 0 0 2em;
}

/* the_content に先に差し込むので wpautop が空の段落を挟むことがある。グリッドの升目を取らせない */
.ntl-detail-root p:empty {
	display: none;
}

/* ---------- ヒーロー（登録簿の1件） ---------- */

/* ぼかした背景は敷かない。絵と、見出しの下の一本の罫（属性の色）だけで持たせる。
   絵より前に出る面をつくらないのがこのサイトの決め事。
   狭い幅でも絵と登録の見出しを横に並べ、基本情報の行はその下に全幅で出す（絵の右に空白を残さない）。 */
.ntl-hero {
	display: grid;
	grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
	grid-template-areas:
		"art id"
		"record record";
	align-items: end;
	gap: 1.1rem 1rem;
	margin: 0 0 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--ntl-border);
}

.ntl-hero__art {
	grid-area: art;
	min-width: 0;
}

.ntl-hero__art img,
.ntl-hero__art .ntl-icon {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 0;
	background: transparent;
}

/* 立ち絵の無いもの（弧盤）はアイコンを出す。薄い面を敷いて浮かせない */
.ntl-hero--icon {
	grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
}

.ntl-hero--icon .ntl-hero__art {
	padding: 0.75rem;
	border-radius: 2px;
	background: var(--ntl-surface-muted);
}

/* 登録の見出し。下の罫だけ属性の色（色＝情報。弧盤は属性が無いので墨） */
.ntl-hero__id {
	grid-area: id;
	min-width: 0;
	padding-bottom: 0.7rem;
	border-bottom: 3px solid var(--el, var(--ntl-text));
}

.ntl-hero__record {
	grid-area: record;
	min-width: 0;
}

.post_content .ntl-hero p,
.ntl-hero p {
	margin: 0;
}

.ntl-hero__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.7rem;
}

/* 英語名は記録の見出し。バッジの上に小さく置く */
.ntl-hero__en {
	margin: 0 0 0.3rem;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	color: var(--ntl-muted);
	overflow-wrap: anywhere;
}

/* 異能名はゲーム世界の固有名詞なので明朝 */
.post_content .ntl-hero p.ntl-hero__ability,
.ntl-hero p.ntl-hero__ability {
	margin-top: 0.7rem;
	line-height: 1.4;
}

.ntl-hero__ability-label {
	display: block;
	font-size: 0.7rem;
	color: var(--ntl-muted);
}

.ntl-hero__ability-name {
	font-family: var(--ntl-display);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.post_content ul.ntl-hero__tags,
ul.ntl-hero__tags.ntl-hero__tags {
	margin: 0.7rem 0 0;
	padding: 0;
	list-style: none;
}

.post_content .ntl-hero__tags .ntl-chip,
.ntl-hero__tags .ntl-chip.ntl-chip {
	margin: 0;
	padding: 0.05rem 0.45rem;
	font-size: 0.72rem;
	list-style: none;
}

.post_content .ntl-hero__tags .ntl-chip::before,
.ntl-hero__tags .ntl-chip.ntl-chip::before {
	content: none;
}

.ntl-hero__record .ntl-facts {
	margin-bottom: 1rem;
}

.post_content .ntl-hero p.ntl-hero__intro,
.ntl-hero p.ntl-hero__intro {
	font-size: 0.92rem;
	line-height: 1.95;
	color: var(--ntl-muted);
}

@container ntldetail (min-width: 560px) {
	.ntl-hero {
		grid-template-columns: 15rem minmax(0, 1fr);
		grid-template-areas:
			"art id"
			"art record";
		grid-template-rows: auto 1fr;
		align-items: start;
		gap: 1.2rem 2rem;
	}

	.ntl-hero--icon {
		grid-template-columns: 11rem minmax(0, 1fr);
	}
}

/* ---------- ステータス ---------- */

/* 数値は「読み取り値」。罫で区切って明朝で大きく組む */
.ntl-stats {
	margin: 0 0 1.5em;
}

.post_content ul.ntl-stats__list,
ul.ntl-stats__list.ntl-stats__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
	gap: 0 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ntl-text);
}

.post_content .ntl-stats__item,
.ntl-stats__list .ntl-stats__item {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0.7rem 0.1rem;
	border-bottom: 1px solid var(--ntl-border);
	list-style: none;
}

.post_content .ntl-stats__item::before,
.ntl-stats__list .ntl-stats__item::before {
	content: none;
}

.ntl-stats__name {
	font-size: 0.72rem;
	color: var(--ntl-muted);
}

.ntl-stats__max {
	margin-top: 0.15rem;
	font-family: var(--ntl-display);
	font-size: 1.85rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}

.ntl-stats__base {
	margin-top: 0.15rem;
	font-size: 0.74rem;
	color: var(--ntl-muted);
	font-variant-numeric: tabular-nums;
}

/* ---------- スキル ---------- */

/* 見出し（h3）は SWELL のデザインのまま。アイコンは本文側の左の列に置く */
.ntl-skill {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	column-gap: 0.85rem;
	margin: 0 0 1.75em;
}

.ntl-skill--noicon {
	grid-template-columns: minmax(0, 1fr);
}

/* スキルのアイコンはゲーム内の白い線画（透過）。明るい下地だと見えないので暗い面に載せる */
.ntl-skill__icon {
	grid-column: 1;
	align-self: start;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0.35rem;
	border-radius: 0.6rem;
	background: var(--ntl-text);
	object-fit: contain;
}

.ntl-skill__body {
	grid-column: 2;
	min-width: 0;
}

.ntl-skill--noicon .ntl-skill__body {
	grid-column: 1;
}

.ntl-skill__body > *:last-child {
	margin-bottom: 0;
}

/* 説明の定義リスト（覚醒でも使う） */
.post_content dl.ntl-desc,
dl.ntl-desc.ntl-desc {
	margin: 0 0 1em;
}

.ntl-desc dt {
	margin-top: 0.9em;
	font-weight: 700;
}

.ntl-desc dt:first-child {
	margin-top: 0;
}

.ntl-desc dd {
	margin: 0.25em 0 0;
	padding-left: 0.7em;
	border-left: 3px solid var(--ntl-border);
	line-height: 1.9;
}

/* ---------- 覚醒 ---------- */

.ntl-awaken__step {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

/* 覚醒のアイコンは縦長（75×96）なので、丸く抜くときは contain だと左右に隙間ができる */
.ntl-awaken__icon {
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--ntl-surface-soft);
	object-fit: cover;
	object-position: 50% 30%;
}

/* スキルのアイコン列は狭い幅だと本文を削るので、アイコンを本文の上に出して本文を全幅にする */
@container ntldetail (max-width: 479px) {
	.ntl-skill {
		grid-template-columns: minmax(0, 1fr);
	}

	.ntl-skill__icon {
		width: 2.25rem;
		height: 2.25rem;
		margin-bottom: 0.6rem;
	}

	.ntl-skill__body {
		grid-column: 1;
	}
}

/* ---------- 使い方（ゲーム内のキャラ解説） ---------- */

/* 左の罫は属性の色。解説文そのものは本文と同じゴシックで読ませる */
.ntl-guide {
	margin: 0 0 0.6em;
	padding: 0.1rem 0 0.1rem 1rem;
	border-left: 3px solid var(--el, var(--ntl-text));
}

.post_content .ntl-guide p,
.ntl-guide p {
	margin: 0 0 0.9em;
	line-height: 2;
}

.post_content .ntl-guide p:last-child,
.ntl-guide p:last-child {
	margin-bottom: 0;
}

/* ---------- おすすめ弧盤・モジュール ---------- */

.ntl-build {
	margin: 0 0 1.5em;
}

.post_content ul.ntl-build__forks,
ul.ntl-build__forks.ntl-build__forks {
	margin: 0 0 1.2rem;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ntl-text);
}

.post_content .ntl-build__fork,
.ntl-build__forks .ntl-build__fork {
	margin: 0;
	padding: 0.8rem 0.1rem;
	border-bottom: 1px solid var(--ntl-border);
	list-style: none;
}

.post_content .ntl-build__fork::before,
.ntl-build__forks .ntl-build__fork::before {
	content: none;
}

.ntl-build__fork-link,
.post_content a.ntl-build__fork-link {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	align-items: center;
	column-gap: 0.9rem;
	color: inherit;
	text-decoration: none;
}

.ntl-build__fork-icon {
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	object-fit: contain;
	border-radius: 2px;
	background: var(--ntl-surface-muted);
}

.ntl-build__fork-body {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.6rem;
	min-width: 0;
}

.ntl-build__fork-label {
	flex: 0 0 100%;
	font-size: 0.72rem;
	color: var(--ntl-muted);
}

.ntl-build__fork-name {
	font-family: var(--ntl-display);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.4;
}

.ntl-build__fork-buff {
	font-size: 0.78rem;
	color: var(--ntl-muted);
}

/* 効果の文は絵の列を空けて、名前の下にそろえる */
.post_content .ntl-build__fork p.ntl-build__fork-effect,
.ntl-build__fork p.ntl-build__fork-effect {
	margin: 0.4rem 0 0 4.4rem;
	font-size: 0.86rem;
	line-height: 1.8;
}

@media (hover: hover) and (pointer: fine) {
	.ntl-build__fork-link:hover .ntl-build__fork-name {
		color: var(--ntl-main);
	}
}

.ntl-build__fork-link:focus-visible {
	outline: 2px solid var(--ntl-main);
	outline-offset: 3px;
}

/* 推奨コア。アイコンはモジュール図鑑と同じもの */
.ntl-build__core {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	column-gap: 0.9rem;
	margin: 0 0 1.2rem;
}

.ntl-build__core--noicon {
	grid-template-columns: minmax(0, 1fr);
}

/* モジュールのアイコンは白い線画なので、モジュール図鑑と同じく墨の面に載せる */
.ntl-build__core-icon {
	grid-column: 1;
	grid-row: 1;
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	padding: 0.4rem;
	border-radius: 2px;
	background: var(--ntl-text);
	object-fit: contain;
}

.ntl-build__core-body {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}

.ntl-build__core--noicon .ntl-build__core-body {
	grid-column: 1;
}

.post_content .ntl-build__core p,
.ntl-build__core p {
	margin: 0;
}

.ntl-build__core-label {
	font-size: 0.72rem;
	color: var(--ntl-muted);
}

.ntl-build__core-name {
	font-family: var(--ntl-display);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.4;
}

.post_content dl.ntl-build__core-effects,
dl.ntl-build__core-effects.ntl-build__core-effects {
	margin: 0.4rem 0 0;
	font-size: 0.86rem;
	line-height: 1.8;
}

.ntl-build__core-row {
	display: grid;
	grid-template-columns: 4.2em minmax(0, 1fr);
	column-gap: 0.5rem;
}

.ntl-build__core-row dt {
	font-family: var(--ntl-display);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ntl-muted);
}

.ntl-build__core-row dd {
	margin: 0;
}

/* ラベルと値を縦に組む一覧（文の長い値向け） */
.post_content dl.ntl-spec,
dl.ntl-spec.ntl-spec {
	margin: 0;
	border-top: 1px solid var(--ntl-border);
}

.ntl-spec__row {
	display: grid;
	grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
	column-gap: 1rem;
	padding: 0.55rem 0.1rem;
	border-bottom: 1px solid var(--ntl-border);
}

.ntl-spec__row dt {
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.9;
	color: var(--ntl-muted);
}

.ntl-spec__row dd {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.8;
}

.ntl-spec__name {
	margin-right: 0.6em;
	font-family: var(--ntl-display);
	font-weight: 600;
}

@container ntldetail (max-width: 419px) {
	.ntl-spec__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- 育成素材・好感度の報酬（段階ごとの梯子） ---------- */

.post_content ol.ntl-ladder,
ol.ntl-ladder.ntl-ladder,
.ntl-ladder--single {
	margin: 0 0 1.5em;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ntl-border);
}

.post_content .ntl-ladder__row,
.ntl-ladder .ntl-ladder__row {
	display: grid;
	grid-template-columns: 5.6rem minmax(0, 1fr);
	column-gap: 0.9rem;
	margin: 0;
	padding: 0.7rem 0.1rem;
	border-bottom: 1px solid var(--ntl-border);
	list-style: none;
}

.post_content .ntl-ladder__row::before,
.ntl-ladder .ntl-ladder__row::before {
	content: none;
}

.post_content .ntl-ladder--bond .ntl-ladder__row,
.ntl-ladder--bond .ntl-ladder__row.ntl-ladder__row {
	grid-template-columns: 3.2rem minmax(0, 1fr);
}

.ntl-ladder--single .ntl-ladder__row {
	grid-template-columns: minmax(0, 1fr);
}

/* 合計は墨の罫で区切る */
.post_content .ntl-ladder__row--total,
.ntl-ladder .ntl-ladder__row--total {
	border-top: 1px solid var(--ntl-text);
	border-bottom-color: var(--ntl-text);
}

.post_content .ntl-ladder p.ntl-ladder__head,
.ntl-ladder p.ntl-ladder__head {
	display: flex;
	flex-direction: column;
	margin: 0;
	line-height: 1.4;
}

.ntl-ladder__step {
	font-family: var(--ntl-display);
	font-size: 1rem;
	font-weight: 600;
}

.ntl-ladder__sub {
	margin-top: 0.1rem;
	font-size: 0.72rem;
	color: var(--ntl-muted);
}

.post_content ul.ntl-mats,
ul.ntl-mats.ntl-mats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.post_content .ntl-mat,
.ntl-mats .ntl-mat {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	font-size: 0.84rem;
	line-height: 1.5;
	list-style: none;
}

.post_content .ntl-mat::before,
.ntl-mats .ntl-mat::before {
	content: none;
}

.ntl-mat__icon {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	object-fit: contain;
}

.ntl-mat__num {
	font-family: var(--ntl-display);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ntl-ladder__row--total .ntl-mat__num {
	font-size: 1rem;
}

/* ---------- プロフィール ---------- */

.post_content p.ntl-profile__bio,
p.ntl-profile__bio.ntl-profile__bio {
	margin: 0 0 1.5em;
	line-height: 2;
}

/* 折りたたみ（ストーリー・セリフ）。箱にせず罫で区切る。開閉は details に任せる */
.ntl-fold {
	margin: 0 0 1.5em;
	border-top: 1px solid var(--ntl-border);
}

.ntl-fold__item {
	border-bottom: 1px solid var(--ntl-border);
}

.ntl-fold__title {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	padding: 0.75rem 0.1rem;
	cursor: pointer;
	list-style: none;
}

.ntl-fold__title::-webkit-details-marker {
	display: none;
}

/* 開閉の印。開いているかどうかが文字で読める */
.ntl-fold__title::after {
	content: "＋";
	margin-left: auto;
	color: var(--ntl-muted);
}

.ntl-fold__item[open] > .ntl-fold__title::after {
	content: "－";
}

.ntl-fold__title:focus-visible {
	outline: 2px solid var(--ntl-main);
	outline-offset: 2px;
}

/* ストーリーの見出しはゲーム内の文なので明朝 */
.ntl-fold__label {
	font-family: var(--ntl-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
}

@media (hover: hover) and (pointer: fine) {
	.ntl-fold__title:hover .ntl-fold__label {
		color: var(--ntl-main);
	}
}

.ntl-badge--spoiler {
	flex: 0 0 auto;
}

.ntl-fold__body {
	padding: 0 0.1rem 1rem;
}

.post_content .ntl-fold__body p,
.ntl-fold__body p {
	margin: 0;
	line-height: 2;
}

/* セリフ: 場面（ラベル）と台詞 */
.post_content dl.ntl-lines,
dl.ntl-lines.ntl-lines {
	margin: 0;
}

.ntl-lines__row {
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--ntl-border);
}

.ntl-lines__row:last-child {
	border-bottom: 0;
}

.ntl-lines__row dt {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--ntl-muted);
}

.ntl-lines__row dd {
	margin: 0.15rem 0 0;
	line-height: 1.9;
}

/* ---------- 組みやすいキャラ（編成例・異能連環・チュートリアルの編成） ---------- */

.ntl-teams {
	margin: 0 0 0.8em;
	border-top: 1px solid var(--ntl-text);
}

.ntl-team {
	padding: 0.9rem 0.1rem;
	border-bottom: 1px solid var(--ntl-border);
}

.post_content .ntl-team p,
.ntl-team p {
	margin: 0;
}

/* 編成の名前はサイトの訳（ntebuild の命名）なのでゴシック */
.ntl-team__title {
	margin-bottom: 0.6rem;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--ntl-muted);
}

.post_content ul.ntl-team__members,
ul.ntl-team__members.ntl-team__members {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.post_content .ntl-team__member,
.ntl-team__members .ntl-team__member {
	margin: 0;
	padding: 0;
	list-style: none;
}

.post_content .ntl-team__member::before,
.ntl-team__members .ntl-team__member::before {
	content: none;
}

.ntl-team__link,
.post_content a.ntl-team__link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.ntl-team__icon {
	display: block;
	width: 100%;
	max-width: 4.5rem;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 2px;
	background: var(--ntl-surface-muted);
}

.ntl-team__name {
	margin-top: 0.35rem;
	font-family: var(--ntl-display);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.35;
}

/* 本人は名前の下に属性の色の罫（色＝情報） */
.ntl-team__member--self .ntl-team__name {
	align-self: flex-start;
	padding-bottom: 1px;
	border-bottom: 2px solid var(--el, var(--ntl-text));
}

.ntl-team__role {
	margin-top: 0.1rem;
	font-size: 0.7rem;
	line-height: 1.4;
	color: var(--ntl-muted);
}

.post_content .ntl-team p.ntl-team__note,
.ntl-team p.ntl-team__note {
	margin-top: 0.7rem;
	font-size: 0.88rem;
	line-height: 1.85;
}

@media (hover: hover) and (pointer: fine) {
	a.ntl-team__link:hover .ntl-team__name {
		color: var(--ntl-main);
	}
}

a.ntl-team__link:focus-visible {
	outline: 2px solid var(--ntl-main);
	outline-offset: 3px;
}

/* 異能連環。連環の名前はゲームの固有名詞なので明朝 */
.ntl-reactions {
	margin: 0 0 1.5em;
	border-top: 1px solid var(--ntl-border);
}

.ntl-reaction {
	padding: 0.9rem 0.1rem 0.2rem;
	border-bottom: 1px solid var(--ntl-border);
}

/* 本人のパッシブが強める連環だけ、上の罫を墨にして先頭に置く */
.ntl-reaction--own {
	border-top: 1px solid var(--ntl-text);
	margin-top: -1px;
}

.post_content .ntl-reaction p,
.ntl-reaction p {
	margin: 0 0 0.5rem;
}

.post_content .ntl-reaction p.ntl-reaction__head,
.ntl-reaction p.ntl-reaction__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.8rem;
}

.ntl-reaction__name {
	font-family: var(--ntl-display);
	font-size: 1.15rem;
	font-weight: 600;
}

.ntl-reaction__els {
	display: inline-flex;
	gap: 0.45rem;
}

.post_content .ntl-reaction p.ntl-reaction__desc,
.ntl-reaction p.ntl-reaction__desc {
	font-size: 0.88rem;
	line-height: 1.85;
}

.post_content .ntl-reaction p.ntl-reaction__boost,
.post_content .ntl-reaction p.ntl-reaction__label,
.ntl-reaction p.ntl-reaction__boost,
.ntl-reaction p.ntl-reaction__label {
	font-size: 0.78rem;
	color: var(--ntl-muted);
}

/* 組む相手は編成と同じ並び（4列）。人数が多ければ折り返す */
.post_content ul.ntl-reaction__partners,
ul.ntl-reaction__partners.ntl-reaction__partners {
	row-gap: 0.8rem;
	margin-bottom: 0.9rem;
}