/*
 * ARC Raiders マップコンディション（[nettoge_arc_conditions] と、ARC Raiders の記事の左下のボタンの窓）。
 * 依頼主「めちゃコンパクト、シンプル」「ARC Raidersの全記事、左下にボタンおいて、おすとこれコンパクトに展開する」（2026-10-12）。
 * サイトのモックの色（紙色の面・細い線・赤は強い印だけ）に合わせ、bl4-shift と同じ名前の変数をこの部品の中だけで定義する。
 * 本文の中では SWELL の ul・li・p の飾り（点・余白）を #body_wrap .post_content から指して打ち消す。
 * 窓はフッター（本文の外）に出るので .ntg-arccnd-pop から同じ形を当てる。!important は使わない。
 */
.ntg-arccnd,
.ntg-arccnd-fab,
.ntg-arccnd-pop {
	--ac-surface: var(--surface, #fff);
	--ac-paper: var(--paper, #f6f5f3);
	--ac-text: var(--text, #1a1714);
	--ac-sub: var(--sub, #5f5a55);
	--ac-muted: var(--muted, #8a847d);
	--ac-line: var(--line, #e3e0dc);
	--ac-red: var(--main, #b72305);
	--ac-amber: #e5a500; /* 危険度 4。危険度 5 の赤と見分けがつくよう黄色に（依頼主「色の違いぜんぜんわからん」2026-10-12） */
	--ac-r: var(--r, 6px);
}
html[data-nettoge-theme="dark"] .ntg-arccnd,
html[data-nettoge-theme="dark"] .ntg-arccnd-fab,
html[data-nettoge-theme="dark"] .ntg-arccnd-pop {
	--ac-surface: var(--surface, #1f2226);
	--ac-paper: var(--paper, #22252a);
	--ac-text: var(--text, #e8e4df);
	--ac-sub: var(--sub, #b5afa8);
	--ac-muted: var(--muted, #8d877f);
	--ac-line: var(--line, #33363b);
	--ac-red: var(--main, #e0583c);
	--ac-amber: #f2c230;
}

.ntg-arccnd {
	margin: 0 0 1.6em;
	color: var(--ac-text);
	font-size: 14px;
	line-height: 1.6;
	font-variant-numeric: tabular-nums;
}

/* ---------- 上の行（いまの時刻・日本時間・アジアのサーバー） ---------- */
#body_wrap .post_content .ntg-arccnd p.ntg-arccnd__bar,
.ntg-arccnd-pop .ntg-arccnd p.ntg-arccnd__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 8px;
	color: var(--ac-sub);
	font-size: 13px;
}

/* ---------- 「いま」「コンディションごとの次の回」の面 ---------- */
.ntg-arccnd__box {
	margin: 0 0 8px;
	padding: 10px 12px;
	border-radius: var(--ac-r);
	background: var(--ac-paper);
}
#body_wrap .post_content .ntg-arccnd p.ntg-arccnd__h,
.ntg-arccnd-pop .ntg-arccnd p.ntg-arccnd__h {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	align-items: baseline;
	margin: 0 0 4px;
	font-weight: 700;
	font-size: 14px;
}
.ntg-arccnd__t {
	color: var(--ac-sub);
	font-weight: 400;
	font-size: 13px;
}

#body_wrap .post_content .ntg-arccnd ul.ntg-arccnd__list,
.ntg-arccnd-pop .ntg-arccnd ul.ntg-arccnd__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
#body_wrap .post_content .ntg-arccnd ul.ntg-arccnd__list > li.ntg-arccnd__it,
.ntg-arccnd-pop .ntg-arccnd ul.ntg-arccnd__list > li.ntg-arccnd__it {
	display: grid;
	grid-template-columns: 10px 8.6em 1fr;
	gap: 0 8px;
	align-items: baseline;
	margin: 0;
	padding: 4px 0;
	border-top: 1px solid var(--ac-line);
}
#body_wrap .post_content .ntg-arccnd ul.ntg-arccnd__list > li.ntg-arccnd__it:first-child,
.ntg-arccnd-pop .ntg-arccnd ul.ntg-arccnd__list > li.ntg-arccnd__it:first-child {
	border-top: 0;
}
#body_wrap .post_content .ntg-arccnd ul.ntg-arccnd__list > li.ntg-arccnd__it::before,
.ntg-arccnd-pop .ntg-arccnd ul.ntg-arccnd__list > li.ntg-arccnd__it::before {
	content: none;
}
#body_wrap .post_content .ntg-arccnd ul.-each > li.ntg-arccnd__it,
.ntg-arccnd-pop .ntg-arccnd ul.-each > li.ntg-arccnd__it {
	grid-template-columns: 10px 8.6em 4.6em 1fr;
}

.ntg-arccnd__dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ac-line);
	transform: translateY(-1px);
}
.-d4 > .ntg-arccnd__dot,
.ntg-arccnd__dot.-d4 {
	background: var(--ac-amber);
}
.-d5 > .ntg-arccnd__dot,
.ntg-arccnd__dot.-d5 {
	background: var(--ac-red);
}
.ntg-arccnd__n {
	font-weight: 600;
}
.ntg-arccnd__w {
	color: var(--ac-text);
	white-space: nowrap;
}
.ntg-arccnd__m {
	color: var(--ac-sub);
	font-size: 13px;
}

#body_wrap .post_content .ntg-arccnd p.ntg-arccnd__none,
#body_wrap .post_content .ntg-arccnd p.ntg-arccnd__empty,
#body_wrap .post_content .ntg-arccnd p.ntg-arccnd__legend,
.ntg-arccnd-pop .ntg-arccnd p.ntg-arccnd__none,
.ntg-arccnd-pop .ntg-arccnd p.ntg-arccnd__empty,
.ntg-arccnd-pop .ntg-arccnd p.ntg-arccnd__legend {
	margin: 6px 0 0;
	color: var(--ac-muted);
	font-size: 12px;
}
.ntg-arccnd__legend .ntg-arccnd__dot {
	margin-right: 4px;
}

/* ---------- ARC Raiders の記事の左下のボタン ----------
 * 画面の下のドック（#ntg-fixdock。テーマの core.css、高さ 44px）の横に、上下の真ん中をそろえて並ぶ小さな札（高さ 32px）。
 * ドックの --ntg2-dock-bottom は #body_wrap の中だけの変数で、ボタンは本文の外（wp_footer）にあるので値を写す。
 * 下から出る広告（AdSense のアンカー）の分は、テーマの design.js が html に入れる --ntg2-dock-lift でドックと一緒に持ち上がる。
 * ドックが横に広がってボタンに届くときは、frontend.js が -mini（時計の印だけ）にする。
 * 依頼主「もっと小さくて良い」「下からの広告で隠れないようにして」（2026-10-12）。 */
.ntg-arccnd-fab,
.ntg-arccnd-pop {
	--ac-bottom: calc(12px + env(safe-area-inset-bottom, 0px) * .5 + var(--ntg2-dock-lift, 0px));
}
@media (min-width: 960px) {
	.ntg-arccnd-fab,
	.ntg-arccnd-pop {
		--ac-bottom: calc(20px + var(--ntg2-dock-lift, 0px));
	}
}
.ntg-arccnd-fab {
	position: fixed;
	left: 12px;
	bottom: calc(var(--ac-bottom) + 6px); /* ドック（44px）と上下の真ん中をそろえる */
	z-index: 99; /* 画面の下のドック #ntg-fixdock と同じ高さ */
	display: inline-flex;
	gap: 4px;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 32px;
	margin: 0;
	padding: 0 10px 0 8px;
	border: 1px solid var(--ac-line);
	border-radius: 16px;
	background: var(--ac-surface);
	box-shadow: 0 1px 6px rgba(0, 0, 0, .14);
	color: var(--ac-text);
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	transition: bottom .2s;
}
.ntg-arccnd-fab:hover,
.ntg-arccnd-fab[aria-expanded="true"] {
	border-color: var(--ac-red);
}
.ntg-arccnd-fab svg {
	flex: none;
	width: 15px;
	height: 15px;
	color: var(--ac-red);
}
.ntg-arccnd-fab.-mini {
	width: 32px;
	padding: 0;
}
.ntg-arccnd-fab.-mini .ntg-arccnd-fab__l {
	display: none;
}
.ntg-arccnd-fab[hidden],
.ntg-arccnd-pop[hidden] {
	display: none;
}

/* ---------- 押すと開く窓 ---------- */
.ntg-arccnd-pop {
	position: fixed;
	left: 12px;
	bottom: calc(var(--ac-bottom) + 52px); /* ドック（44px）の上に 8px 空ける */
	z-index: 999; /* 固定の見出し（998）より上、ヘッダー（1000）より下 */
	box-sizing: border-box;
	width: min(380px, calc(100vw - 24px));
	max-height: min(70vh, calc(100vh - 160px - var(--ntg2-dock-lift, 0px)));
	overflow-y: auto;
	padding: 10px 12px 12px;
	border-radius: 10px;
	background: var(--ac-surface);
	box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
	color: var(--ac-text);
	overscroll-behavior: contain;
}
.ntg-arccnd-pop__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 4px;
}
.ntg-arccnd-pop p.ntg-arccnd-pop__t {
	margin: 0;
	font-weight: 700;
	font-size: 15px;
}
.ntg-arccnd-pop__x {
	width: 32px;
	height: 32px;
	margin: 0 -6px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ac-sub);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.ntg-arccnd-pop__x:hover {
	background: var(--ac-paper);
}
.ntg-arccnd-pop .ntg-arccnd {
	margin: 0;
}
.ntg-arccnd-pop__more {
	display: block;
	margin: 4px 0 0;
	color: var(--ac-sub);
	font-size: 13px;
	text-align: right;
}