/* nettoge model-3d（2026-09-27）: 回して見られる 3D モデルと弱点の丸 */
.ntg-m3d { margin: 0 0 1.6em; }
.ntg-m3d__stage {
	position: relative;
	aspect-ratio: 16 / 10;
	max-height: 520px;
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
	background: radial-gradient(ellipse at 50% 40%, #3b4049 0%, #22252b 60%, #17191d 100%);
}
.ntg-m3d__viewer { display: block; width: 100%; height: 100%; --poster-color: transparent; }
.ntg-m3d__viewer:focus-visible { outline: 2px solid #ffcc00; outline-offset: -2px; }

/* 読み込み中の細い帯 */
.ntg-m3d__progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255, 255, 255, .08); transition: opacity .4s; }
.ntg-m3d__progress span { display: block; height: 100%; background: #ffcc00; transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.ntg-m3d__progress.-done { opacity: 0; }

/* 弱点の札。赤枠＝いちばんダメージが通る部位、黄枠＝ほかの弱点。押すとその部位に寄って説明を出す */
.ntg-m3d__tag {
	display: flex; flex-direction: column; align-items: flex-start; gap: 0;
	padding: 2px 7px; border: 1px solid rgba(255, 238, 170, .75); border-radius: 5px;
	background: rgba(12, 14, 18, .72); color: #fff;
	font: inherit; font-size: 11px; line-height: 1.35; text-align: left; white-space: nowrap;
	transform: translate(-50%, -100%); cursor: pointer; opacity: .92;
}
.ntg-m3d__tag b { font-weight: 700; }
.ntg-m3d__tag.-main { border-color: rgba(255, 90, 80, .85); }
@media (hover: hover) { .ntg-m3d__tag:hover { background: rgba(40, 44, 52, .95); opacity: 1; } }

/* 札を押したときの説明（下に重ねる） */
.ntg-m3d__info {
	position: absolute; left: 12px; right: 12px; bottom: 58px;
	padding: 8px 12px; border-radius: 8px;
	background: rgba(12, 14, 18, .86); color: #eee; font-size: 13px; line-height: 1.6;
	opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.ntg-m3d__info.-on { opacity: 1; visibility: visible; }
.ntg-m3d__info b { display: block; color: #fff; }

/* 全体を見る／装甲を外す */
.ntg-m3d__tools { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.ntg-m3d__btn {
	padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
	background: rgba(12, 14, 18, .78); color: #fff;
	font: inherit; font-size: 13px; font-weight: 700; line-height: 1.3; cursor: pointer;
	transition: background-color .2s, border-color .2s;
}
.ntg-m3d__btn[aria-pressed="true"] { border-color: #ffcc00; color: #ffcc00; }
@media (hover: hover) { .ntg-m3d__btn:hover { background: rgba(40, 44, 52, .9); } }

/* 余白の説明（左上）。色の意味と、部品をいつ漁れるか */
.ntg-m3d__legend {
	position: absolute; left: 10px; top: 10px; max-width: min(46%, 300px);
	padding: 6px 9px; border-radius: 7px; background: rgba(12, 14, 18, .62); color: #e8e8e8;
	font-size: 11px; line-height: 1.5; pointer-events: none;
}
.ntg-m3d__legend-row { display: flex; gap: 6px; align-items: flex-start; }
.ntg-m3d__legend-row + .ntg-m3d__legend-row { margin-top: 3px; }
.ntg-m3d__legend i { flex: none; width: 10px; height: 10px; margin-top: 3px; border-radius: 3px; }
.ntg-m3d__legend i.-main { background: #ff5a4f; }
.ntg-m3d__legend i.-sub { background: #fff1a8; }
.ntg-m3d__legend i.-loot { background: #a8dcff; }
@media (max-width: 599px) { .ntg-m3d__legend { max-width: 62%; font-size: 10px; } }

.ntg-m3d__note { margin: .5em 0 0; font-size: 13px; line-height: 1.6; color: var(--ntg2-text-sub, #666); }

/* 目の光り（モノアイ。青。2026-09-27 依頼主）。model-3d.js が目の位置に置く。向こうを向くと model-viewer が data-visible を外す */
.ntg-m3d__eye {
	display: block; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle, rgba(225, 245, 255, .95) 0, rgba(70, 170, 255, .85) 22%, rgba(20, 110, 255, .35) 48%, rgba(0, 80, 255, 0) 72%);
	mix-blend-mode: screen; transition: opacity .25s; animation: ntg-m3d-eye 2.6s ease-in-out infinite;
}
.ntg-m3d__eye:not([data-visible]) { opacity: 0; animation: none; }
@keyframes ntg-m3d-eye { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.25); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .ntg-m3d__eye { animation: none; } }

/* 順番待ち・読み込み中のくるくる（2026-09-27 依頼主「ローディングのとき負荷高いから、ゆっくり読み込むように」で、
   1 体ずつ順番に読むようにした。待っている間もここが回る） */
.ntg-m3d__spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ntg-m3d__spinner span {
	width: 34px; height: 34px; border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, .18); border-top-color: #ffcc00;
	animation: ntg-m3d-spin .9s linear infinite;
}
@keyframes ntg-m3d-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ntg-m3d__spinner span { animation-duration: 2.4s; } }