/* Nettoge Board Walk — すごろく型の攻略ナビ（FF14 闘獣練）。地図（SVG）を左、マスごとの攻略を右に。スマホは縦に並べる */
.ntg-board {
	border: 1px solid var(--color_border, #e3dccd);
	border-radius: 6px;
	display: grid;
	gap: 12px 18px;
	grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
	margin: 1.2em 0 1.6em;
	padding: 12px;
}

@media (max-width: 781px) {
	.ntg-board {
		grid-template-columns: 1fr;
	}

	/* スマホは幅いっぱいだと縦に長すぎる（依頼主の指摘）。300px に抑えて中央に */
	.ntg-board__map {
		max-inline-size: 300px;
		margin-inline: auto;
	}
}

/* 地図は幅いっぱい（高さは比率のまま）。高さを制限すると縮んで文字が読めない（スマホの指摘 2026-09-16） */
.ntg-board__map {
	background: #f4efe4;
	border-radius: 6px;
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.ntg-board__edge {
	stroke: #b9ad94;
	stroke-width: 4;
	stroke-linecap: round;
}

.ntg-board__edge.is-chosen {
	stroke: #bf1313;
	stroke-width: 6;
}

.ntg-board__edge.is-next {
	stroke: #d98a1a;
	stroke-dasharray: 6 5;
	stroke-width: 5;
}

.ntg-board__node {
	cursor: pointer;
	outline: none;
	transition: opacity .15s;
}

.ntg-board__node circle {
	fill: #fffdf7;
	stroke: #a8967a;
	stroke-width: 2;
}

.ntg-board__node text {
	fill: #3f3c38;
	font-size: 14px;
	font-weight: 700;
	paint-order: stroke;
	pointer-events: none;
	stroke: #f4efe4;
	stroke-width: 3px;
	text-anchor: middle;
}

.ntg-board__node:hover circle,
.ntg-board__node:focus-visible circle {
	stroke: #bf1313;
	stroke-width: 3;
}

.ntg-board__node.is-active circle {
	fill: #ffe9e6;
	stroke: #bf1313;
	stroke-width: 4;
}

.ntg-board__node.is-chosen circle {
	stroke: #bf1313;
	stroke-width: 3;
}

.ntg-board__node.is-next circle {
	animation: ntg-board-pulse 1.2s ease-in-out infinite;
	stroke: #d98a1a;
	stroke-width: 3;
}

.ntg-board__node.is-dim {
	opacity: .32;
}

@keyframes ntg-board-pulse {
	0%, 100% { stroke-opacity: 1; }
	50% { stroke-opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
	.ntg-board__node.is-next circle {
		animation: none;
	}
}

.ntg-board__panel {
	min-inline-size: 0;
}

.ntg-board__hint {
	color: var(--text-comment-muted, #5a554c);
	font-size: .92em;
	margin: 0 0 .6em;
}

.ntg-board__step {
	background: #fffdf9;
	border: 1px solid #e3dccd;
	border-radius: 6px;
	padding: 12px 14px;
}

.ntg-board__step-title {
	font-size: 1.05em;
	font-weight: 700;
	margin: 0 0 .5em;
}

.ntg-board__step-title img {
	vertical-align: middle;
}

.ntg-board__step p,
.ntg-board__step ul {
	font-size: .95em;
	margin: 0 0 .5em;
}

.ntg-board__step ul {
	padding-inline-start: 1.3em;
}

.ntg-board__step li {
	margin: .15em 0;
}

/* 敵は1体ずつ1行（絵の右に名前と弱点。文字はふつうに折り返す） */
.ntg-board__foe {
	align-items: center;
	display: flex;
	gap: .35em;
	margin: 0 0 .3em;
}

.ntg-board__foe > span {
	min-inline-size: 0;
}

.ntg-board__foe img {
	border-radius: 4px;
}

.ntg-board__jump {
	background: #fff;
	border: 1px solid #bf1313;
	border-radius: 4px;
	color: #bf1313;
	cursor: pointer;
	display: inline-block;
	font-size: .9em;
	margin: .2em 0 .4em;
	padding: .25em .7em;
	text-decoration: none;
}

.ntg-board__jump:hover {
	background: #bf1313;
	color: #fff;
}

.ntg-board__next {
	align-items: center;
	border-block-start: 1px dashed #e3dccd;
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	margin-block-start: .6em;
	padding-block-start: .6em;
}

.ntg-board__next-label {
	color: var(--text-comment-muted, #5a554c);
	font-size: .9em;
}

.ntg-board__next-btn {
	background: #fff4e5;
	border: 1px solid #d98a1a;
	border-radius: 999px;
	color: #7a4b00;
	cursor: pointer;
	font-size: .92em;
	font-weight: 600;
	padding: .3em .9em;
}

.ntg-board__next-btn:hover {
	background: #d98a1a;
	color: #fff;
}

/* JS が無いときは全パネルを縦に並べて見せる */
.no-js .ntg-board__step,
.ntg-board__step:not([hidden]) {
	display: block;
}

/* ダークテーマ（サイトの切り替えは html[data-nettoge-theme="dark"]）。地図の紙色、マスの丸、パネルの枠を暗い側に */
html[data-nettoge-theme="dark"] .ntg-board {
	border-color: #3a3f4a;
}

html[data-nettoge-theme="dark"] .ntg-board__map {
	background: #23262e;
}

html[data-nettoge-theme="dark"] .ntg-board__edge {
	stroke: #5d6270;
}

html[data-nettoge-theme="dark"] .ntg-board__edge.is-chosen {
	stroke: #ff6b6b;
}

html[data-nettoge-theme="dark"] .ntg-board__edge.is-next {
	stroke: #f0a83a;
}

html[data-nettoge-theme="dark"] .ntg-board__node circle {
	fill: #2e323c;
	stroke: #7b8190;
}

html[data-nettoge-theme="dark"] .ntg-board__node text {
	fill: #e6e3dc;
	stroke: #23262e;
}

html[data-nettoge-theme="dark"] .ntg-board__node:hover circle,
html[data-nettoge-theme="dark"] .ntg-board__node:focus-visible circle,
html[data-nettoge-theme="dark"] .ntg-board__node.is-chosen circle {
	stroke: #ff6b6b;
}

html[data-nettoge-theme="dark"] .ntg-board__node.is-active circle {
	fill: #4a2a2a;
	stroke: #ff6b6b;
}

html[data-nettoge-theme="dark"] .ntg-board__node.is-next circle {
	stroke: #f0a83a;
}

html[data-nettoge-theme="dark"] .ntg-board__step {
	background: #262a33;
	border-color: #3a3f4a;
}

html[data-nettoge-theme="dark"] .ntg-board__hint,
html[data-nettoge-theme="dark"] .ntg-board__next-label {
	color: #b8b4aa;
}

html[data-nettoge-theme="dark"] .ntg-board__jump {
	background: transparent;
	border-color: #ff6b6b;
	color: #ff8a8a;
}

html[data-nettoge-theme="dark"] .ntg-board__jump:hover {
	background: #ff6b6b;
	color: #1d1f25;
}

html[data-nettoge-theme="dark"] .ntg-board__next {
	border-color: #3a3f4a;
}

html[data-nettoge-theme="dark"] .ntg-board__next-btn {
	background: #3a2f1e;
	border-color: #f0a83a;
	color: #f5d7a6;
}

html[data-nettoge-theme="dark"] .ntg-board__next-btn:hover {
	background: #f0a83a;
	color: #1d1f25;
}