/* ================================================================
   スプラトゥーン3 ギアパワー計算機 スタイル
   - インクを思わせる高彩度2色（黄緑×マゼンタ）＋深いインクネイビー
   - 装飾はすべて自前CSS（疑似要素・radial-gradient・clip なし外部資源ゼロ）
   - .blob / .timer-fill / .inktank-fill / .eff-fill には
     transition / animation を掛けない（JSが毎フレーム更新するため）
   ================================================================ */

:root {
	--ink: #12111d;
	--ink-soft: #1c1a2b;
	--ink-deep: #0d0c16;
	--line: #37334f;
	--line-soft: #292640;
	--text: #f4f2fa;
	--muted: #a9a3c2;
	--accent: #e4ff3c;
	--accent-deep: #b8cf1a;
	--on-accent: #1c1f06;
	--accent-2: #ff3d8d;
	--on-accent-2: #2b0517;
	--up: #56d9ff;
	--down: #ffab47;
	--radius: 14px;
	/* 手でちぎったステッカーのような不揃いの角 */
	--blob-radius: 18px 8px 16px 10px / 10px 16px 8px 18px;
	--blob-radius-2: 8px 16px 10px 18px / 18px 10px 16px 8px;
}

* {
	box-sizing: border-box;
}

/* display 指定より hidden 属性を優先させる（入力モードの切り替えで使う） */
[hidden] {
	display: none !important;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background:
		/* うっすら見えるハーフトーンのドット（スプレーの粒） */
		radial-gradient(rgba(244, 242, 250, 0.028) 1px, transparent 1.4px),
		radial-gradient(rgba(244, 242, 250, 0.018) 1px, transparent 1.4px),
		var(--ink);
	background-size:
		26px 26px,
		26px 26px,
		auto;
	background-position:
		0 0,
		13px 13px,
		0 0;
	color: var(--text);
	font-family:
		"Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo,
		system-ui, sans-serif;
	line-height: 1.65;
	font-size: 15px;
}

a {
	color: var(--accent);
}

.wrap {
	width: 100%;
	max-width: 860px;
	margin: 0 auto;
	padding: 0 16px;
}

/* ---------------------------------------------------------------- ヘッダー */

.site-head {
	position: relative;
	overflow: hidden;
	padding: 26px 0 20px;
	background:
		radial-gradient(circle at 88% -20%, rgba(255, 61, 141, 0.35), transparent 52%),
		radial-gradient(circle at -6% 120%, rgba(228, 255, 60, 0.14), transparent 40%),
		linear-gradient(135deg, #201d33 0%, #151322 62%);
	border-bottom: 3px solid var(--accent);
}

/* 右上のインク飛沫（円の集合でスプラッタを作る） */
.site-head::before {
	content: "";
	position: absolute;
	top: -14px;
	right: -10px;
	width: 240px;
	height: 130px;
	pointer-events: none;
	opacity: 0.85;
	background:
		radial-gradient(circle 34px at 176px 26px, var(--accent-2) 98%, transparent),
		radial-gradient(circle 15px at 132px 62px, var(--accent-2) 98%, transparent),
		radial-gradient(circle 9px at 112px 30px, var(--accent-2) 98%, transparent),
		radial-gradient(circle 5px at 96px 74px, var(--accent-2) 98%, transparent),
		radial-gradient(circle 20px at 214px 84px, var(--accent-2) 98%, transparent),
		radial-gradient(circle 7px at 158px 96px, var(--accent-2) 98%, transparent),
		radial-gradient(circle 4px at 78px 44px, var(--accent-2) 98%, transparent);
}

/* 左下に小さく黄緑の飛沫を散らす */
.site-head::after {
	content: "";
	position: absolute;
	bottom: -16px;
	left: -16px;
	width: 170px;
	height: 60px;
	pointer-events: none;
	opacity: 0.4;
	background:
		radial-gradient(circle 12px at 20px 46px, var(--accent) 98%, transparent),
		radial-gradient(circle 6px at 52px 30px, var(--accent) 98%, transparent),
		radial-gradient(circle 4px at 84px 48px, var(--accent) 98%, transparent),
		radial-gradient(circle 3px at 112px 26px, var(--accent) 98%, transparent);
}

.site-head .wrap {
	position: relative;
	z-index: 1;
}

.site-head h1 {
	display: inline-block;
	margin: 0;
	font-size: 1.6rem;
	font-weight: 900;
	letter-spacing: 0.01em;
	transform: rotate(-1.2deg);
	/* 蛍光ペンでなぞったようなインクの下線 */
	background: linear-gradient(
		to top,
		rgba(228, 255, 60, 0.32) 0,
		rgba(228, 255, 60, 0.32) 0.32em,
		transparent 0.32em
	);
	padding: 0 4px 2px;
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

.tagline {
	margin: 6px 0 0;
	color: var(--muted);
	font-size: 0.9rem;
}

.ver {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 10px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 900;
	font-size: 0.8rem;
	transform: rotate(-2deg);
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}

/* ------------------------------------------------------------------ パネル */

main {
	padding: 20px 16px 40px;
}

.panel {
	background: var(--ink-soft);
	border: 1px solid var(--line);
	border-radius: var(--blob-radius);
	padding: 16px;
	margin-bottom: 18px;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.32);
}

.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.field label,
.field-label {
	font-size: 0.85rem;
	font-weight: 900;
	color: var(--accent);
	letter-spacing: 0.04em;
}

select,
input[type="number"] {
	width: 100%;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1.5px solid var(--line);
	background: var(--ink-deep);
	color: var(--text);
	font-size: 1rem;
	font-family: inherit;
}

select:focus,
input:focus,
button:focus-visible {
	outline: 2.5px solid var(--accent);
	outline-offset: 1px;
}

/* ------------------------------------------------------------- ブキの情報 */

.kit {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 8px;
	margin-top: 14px;
}

.kit-item {
	background: var(--ink-deep);
	border: 1px solid var(--line-soft);
	border-radius: var(--blob-radius-2);
	padding: 8px 10px;
	border-left: 3px solid var(--accent-2);
}

.kit-key {
	display: block;
	font-size: 0.72rem;
	color: var(--muted);
}

.kit-val {
	display: block;
	font-weight: 700;
}

/* ------------------------------------------------------------ 入力モード */

.mode-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.modes {
	display: flex;
	gap: 6px;
}

.modes button {
	padding: 8px 14px;
	border-radius: 999px;
	border: 1.5px solid var(--line);
	background: var(--ink-deep);
	color: var(--muted);
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
}

.modes button.on {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
	font-weight: 900;
	transform: rotate(-1.5deg);
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}

.gear-slots {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.slot {
	background: var(--ink-deep);
	border: 1px solid var(--line-soft);
	border-radius: var(--blob-radius-2);
	padding: 10px;
}

/* あたま・ふく・くつ をステッカー風のラベルにする */
.slot-name {
	display: inline-block;
	font-size: 0.76rem;
	font-weight: 900;
	color: var(--on-accent-2);
	background: var(--accent-2);
	padding: 1px 10px;
	border-radius: 999px;
	transform: rotate(-2deg);
	margin-bottom: 8px;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

/* メイン枠は横幅いっぱい、サブ枠3つは1行に並べる */
.slot-line {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
}

.slot-line .gp-main {
	grid-column: 1 / -1;
}

.gp-sub {
	padding: 9px 2px 9px 6px;
	font-size: 0.8rem;
}

.gp-main {
	border-color: #55507a;
	border-left: 3px solid var(--accent);
	font-weight: 700;
}

.ap-inputs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 8px;
}

.ap-input {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--ink-deep);
	border: 1px solid var(--line-soft);
	border-radius: 10px;
	padding: 6px 10px;
}

.ap-input-name {
	flex: 1;
	font-size: 0.85rem;
}

.ap-input input {
	width: 74px;
	text-align: right;
	padding: 6px 8px;
}

.actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 12px;
}

.ghost {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1.5px solid var(--line);
	background: transparent;
	color: var(--text);
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
}

.ghost:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.ghost.off {
	color: var(--muted);
	border-style: dashed;
}

/* ------------------------------------------------------------------ 結果 */

.results {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.card {
	background: var(--ink-soft);
	border: 1px solid var(--line);
	border-radius: var(--blob-radius);
	padding: 14px 16px 16px;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.32);
}

.card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.card-head h2 {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 900;
	padding-left: 12px;
	position: relative;
}

/* 見出しの先頭に、傾いたインクのしずくを置く */
.card-head h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 7px;
	height: 0.95em;
	background: var(--accent-2);
	border-radius: 4px 2px 5px 2px;
	transform: rotate(8deg);
}

.card-badges {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
}

.card-ap {
	flex: none;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 900;
	font-size: 0.8rem;
	transform: rotate(-2deg);
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

.card-ap.zero {
	background: #2b2839;
	color: var(--muted);
	transform: none;
	box-shadow: none;
	font-weight: 700;
}

.card-eff {
	padding: 2px 7px;
	border-radius: 999px;
	border: 1.5px solid var(--line);
	color: var(--muted);
	font-size: 0.68rem;
	font-weight: 700;
	white-space: nowrap;
}

/* 狭い画面では、いちばん長い「インク効率アップ(メイン)」まで1行に収める。
   カタカナが途中で折れると読みにくいため、字を詰めるほうを選んだ。 */
@media (max-width: 460px) {
	.card-head {
		gap: 6px;
	}

	.card-head h2 {
		font-size: 0.88rem;
		padding-left: 10px;
		/* 「スーパージャンプ時間短縮」の最後の1文字だけが次行に落ちるのを防ぐ */
		letter-spacing: -0.02em;
	}

	.card-badges {
		gap: 3px;
	}

	.card-ap {
		padding: 2px 8px;
		font-size: 0.74rem;
	}

	.card-eff {
		padding: 2px 6px;
		font-size: 0.64rem;
		letter-spacing: -0.01em;
	}
}

.card-note {
	margin: 0 0 10px;
	color: var(--muted);
	font-size: 0.8rem;
}

table.stat {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

table.stat thead th {
	font-size: 0.72rem;
	color: var(--accent);
	font-weight: 900;
	text-align: right;
	padding: 0 6px 6px;
	border-bottom: 2px solid var(--line);
	letter-spacing: 0.03em;
}

table.stat thead th:first-child {
	text-align: left;
}

table.stat tbody th {
	text-align: left;
	font-weight: 400;
	padding: 7px 6px;
	border-bottom: 1px solid var(--line-soft);
	font-size: 0.88rem;
}

table.stat tbody td {
	text-align: right;
	padding: 7px 6px;
	border-bottom: 1px solid var(--line-soft);
	white-space: nowrap;
}

td.base {
	color: var(--muted);
	font-size: 0.86rem;
}

td.value {
	font-weight: 700;
	color: var(--text);
}

/* 4列（項目 / 0AP / 現在 / 差）の表は幅を固定して、
   項目名が長くても数値の列が潰れないようにする */
table.stat-4 {
	table-layout: fixed;
}

table.stat-4 th:first-child {
	width: 40%;
}

table.stat-4 td.base {
	width: 16%;
}

table.stat-4 td.value {
	width: 19%;
}

table.stat-4 td.delta {
	width: 25%;
	padding-left: 8px;
}

td.delta {
	font-size: 0.76rem;
	color: var(--muted);
	white-space: normal;
	line-height: 1.35;
}

.d-abs {
	display: block;
}

.d-rel {
	display: block;
	font-size: 0.7rem;
	opacity: 0.75;
}

/* 増えた・減ったの2色（良し悪しの判定ではない） */
td.delta.up {
	color: var(--up);
}

td.delta.down {
	color: var(--down);
}

.row-note {
	display: block;
	color: var(--muted);
	font-size: 0.72rem;
}

.tank {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 2px dashed var(--line);
	overflow-x: auto;
}

.tank h3 {
	margin: 0 0 8px;
	font-size: 0.85rem;
	color: var(--muted);
}

.tank h3::before,
.chart h3::before,
.anim h3::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 6px;
	background: var(--accent);
	border-radius: 60% 40% 55% 45% / 45% 60% 40% 55%;
	transform: rotate(12deg);
}

.tank-table th {
	white-space: nowrap;
}

.muted {
	color: var(--muted);
	font-size: 0.85rem;
	margin: 0;
}

/* ------------------------------------------------------------------ 注記 */

.notes h2 {
	margin: 0 0 8px;
	font-size: 1rem;
	font-weight: 900;
	padding-left: 12px;
	position: relative;
}

.notes h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 7px;
	height: 0.95em;
	background: var(--accent);
	border-radius: 4px 2px 5px 2px;
	transform: rotate(8deg);
}

.notes ul {
	margin: 0;
	padding-left: 1.1em;
	font-size: 0.85rem;
	color: #dcd8ea;
}

.notes li {
	margin-bottom: 8px;
}

.notes li::marker {
	color: var(--accent-2);
}

.site-foot {
	border-top: 1px solid var(--line);
	padding: 18px 0 28px;
	color: var(--muted);
	font-size: 0.8rem;
}

.site-foot p {
	margin: 0 0 4px;
}

.fine {
	font-size: 0.74rem;
	color: #b6b1cc;
}

/* ------------------------------------------------------- 画面が広いとき */

@media (min-width: 620px) {
	.slot {
		display: grid;
		grid-template-columns: 72px 1fr;
		gap: 10px;
		align-items: center;
	}

	.slot-name {
		margin: 0;
		justify-self: start;
	}

	.slot-line {
		grid-template-columns: 1.3fr 1fr 1fr 1fr;
	}

	.slot-line .gp-main {
		grid-column: auto;
	}
}

/* ------------------------------------------------------------------ グラフ */

.chart {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 2px dashed var(--line);
}

.chart h3,
.anim h3 {
	margin: 0 0 8px;
	font-size: 0.85rem;
	color: var(--muted);
}

.chart-svg svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.c-grid {
	stroke: #322e48;
	stroke-width: 1;
}

.c-marker {
	stroke: var(--accent-2);
	stroke-width: 1.5;
	stroke-dasharray: 3 3;
}

.c-line {
	fill: none;
	stroke: #6b6488;
	stroke-width: 1.6;
	stroke-linecap: round;
}

.c-line-on {
	stroke: var(--accent);
	stroke-width: 2.8;
}

.c-dot {
	fill: #6b6488;
}

.c-dot-on {
	fill: var(--accent);
	stroke: var(--ink-deep);
	stroke-width: 1.5;
}

.c-ylabel,
.c-xlabel,
.c-axis-name {
	fill: var(--muted);
	font-size: 9px;
	font-family: inherit;
}

.c-axis-name {
	font-weight: 700;
}

.chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-top: 8px;
}

.legend-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.76rem;
	color: var(--muted);
}

.legend-swatch {
	width: 14px;
	height: 3px;
	border-radius: 2px;
	background: #6b6488;
}

.legend-item.on {
	color: var(--text);
	font-weight: 700;
}

.legend-item.on .legend-swatch {
	background: var(--accent);
	height: 4px;
}

.legend-value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.breakpoints {
	margin-top: 10px;
	overflow-x: auto;
}

.breakpoints table {
	min-width: 100%;
}

.breakpoints tbody th {
	white-space: nowrap;
	color: var(--muted);
}

/* 現在の系列は蛍光マーカーでなぞったように光らせる */
.breakpoints tbody tr.on th,
.breakpoints tbody tr.on td {
	color: var(--accent);
	background: rgba(228, 255, 60, 0.09);
}

.breakpoints tbody tr.on th {
	border-left: 3px solid var(--accent);
}

.breakpoints td {
	font-size: 0.78rem;
	font-weight: 400;
}

.breakpoints tbody tr.on td {
	font-weight: 900;
}

/* -------------------------------------------------------- アニメーション */

.anim {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 2px dashed var(--line);
}

.anim-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.anim-clock {
	white-space: nowrap;
	font-size: 0.8rem;
	font-weight: 900;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}

.anim-note {
	margin: 0 0 10px;
	font-size: 0.74rem;
	color: var(--muted);
}

/* レース（移動速度） */

.lane {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	margin-bottom: 10px;
}

.lane-label {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 0.74rem;
	color: var(--muted);
}

.lane.on .lane-label {
	color: var(--text);
	font-weight: 700;
}

.lane-name {
	min-width: 0;
}

.lane-speed {
	font-variant-numeric: tabular-nums;
	font-size: 0.7rem;
}

.lane.on .lane-speed {
	color: var(--accent);
}

/* コースは薄い斜めストライプ、右端がゴールライン */
.lane-track {
	position: relative;
	height: 26px;
	border-radius: 6px;
	background:
		repeating-linear-gradient(
			-55deg,
			rgba(244, 242, 250, 0.025) 0 8px,
			transparent 8px 16px
		),
		var(--ink-deep);
	border: 1px solid var(--line-soft);
	border-right: 3px solid var(--accent-2);
	overflow: hidden;
}

.lane.on .lane-track {
	border-color: var(--accent);
	border-right-color: var(--accent-2);
	box-shadow:
		inset 0 0 10px rgba(228, 255, 60, 0.12),
		0 0 8px rgba(228, 255, 60, 0.22);
}

.blob {
	position: absolute;
	top: 50%;
	left: 0;
	width: 20px;
	height: 20px;
	transform: translate(0, -50%);
	color: #6b6488;
}

.lane.on .blob {
	color: var(--accent);
	filter: drop-shadow(0 0 4px rgba(228, 255, 60, 0.6));
}

.blob svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
}

.lane-dist {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.7rem;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	background: linear-gradient(90deg, transparent, var(--ink-deep) 40%);
	padding-left: 10px;
}

.lane.on .lane-dist {
	color: var(--text);
	font-weight: 700;
}

/* インクタンク（回復速度） */

.inktanks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
	gap: 8px;
}

.inktank {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}

.inktank-gauge {
	position: relative;
	width: 100%;
	max-width: 56px;
	height: 96px;
	border-radius: 10px 10px 12px 12px;
	background: var(--ink-deep);
	border: 1.5px solid var(--line-soft);
	overflow: hidden;
}

.inktank.on .inktank-gauge {
	border-color: var(--accent);
	box-shadow: 0 0 10px rgba(228, 255, 60, 0.28);
}

.inktank-fill {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0;
	background: linear-gradient(180deg, #575170, #6b6488);
}

.inktank.on .inktank-fill {
	background: linear-gradient(180deg, #f4ff8a, var(--accent) 30%, var(--accent-deep));
}

.inktank-done {
	position: absolute;
	top: 5px;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 0.62rem;
	font-weight: 900;
	color: var(--on-accent);
	opacity: 0;
	transition: opacity 0.15s;
}

.inktank-done.shown {
	opacity: 1;
}

.inktank:not(.on) .inktank-done {
	color: var(--text);
}

.inktank-name {
	font-size: 0.7rem;
	color: var(--muted);
	text-align: center;
}

.inktank.on .inktank-name {
	color: var(--text);
	font-weight: 700;
}

.inktank-sec {
	font-size: 0.72rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

.inktank.on .inktank-sec {
	color: var(--accent);
	font-weight: 900;
}

@media (min-width: 620px) {
	.lane {
		grid-template-columns: 150px 1fr;
		align-items: center;
	}

	.lane-label {
		flex-direction: column;
		gap: 0;
		align-items: flex-start;
	}
}

/* 待ち時間バー（復活時間・ジャンプ・マーキングなど）とスペシャルゲージ */

.timer {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	margin-bottom: 9px;
}

.timer-label {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 0.74rem;
	color: var(--muted);
}

.timer.on .timer-label {
	color: var(--text);
	font-weight: 700;
}

.timer-name {
	min-width: 0;
}

.timer-sec {
	font-variant-numeric: tabular-nums;
	font-size: 0.7rem;
	font-weight: 400;
}

.timer.on .timer-sec {
	color: var(--accent);
	font-weight: 900;
}

.timer-track {
	position: relative;
	height: 20px;
	border-radius: 6px;
	background: var(--ink-deep);
	border: 1px solid var(--line-soft);
	overflow: hidden;
}

.timer.on .timer-track {
	border-color: var(--accent);
	box-shadow:
		inset 0 0 8px rgba(228, 255, 60, 0.1),
		0 0 8px rgba(228, 255, 60, 0.2);
}

.timer-fill {
	height: 100%;
	width: 0;
	background: #575170;
	border-radius: 5px 0 0 5px;
}

.timer.on .timer-fill {
	background: linear-gradient(90deg, var(--accent-deep), var(--accent));
}

.timer-fill.lost {
	background: #3c3852;
}

.timer.on .timer-fill.lost {
	background: linear-gradient(90deg, var(--accent-deep), var(--accent));
}

.timer-done {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.64rem;
	font-weight: 900;
	color: var(--muted);
	opacity: 0;
	transition: opacity 0.15s;
}

.timer-done.shown {
	opacity: 1;
}

.timer.on .timer-done.shown {
	color: var(--accent);
	text-shadow: 0 0 6px rgba(228, 255, 60, 0.5);
}

@media (min-width: 620px) {
	.timer {
		grid-template-columns: 150px 1fr;
		align-items: center;
	}

	.timer-label {
		flex-direction: column;
		gap: 0;
		align-items: flex-start;
	}
}

/* ------------------------------------------------------------ 効率指数 */

/* ボタン列と効率指数の間隔（JSがこの要素に中身を差し込む） */
.ap-summary {
	margin-top: 16px;
}

.eff-head {
	margin: 0 0 8px;
	font-size: 0.8rem;
	font-weight: 900;
	color: var(--accent);
	letter-spacing: 0.04em;
}

.eff-list {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.eff-row {
	display: grid;
	grid-template-columns: 1fr 46px;
	grid-template-areas: "label pct" "bar bar";
	gap: 3px 8px;
	align-items: center;
}

.eff-label {
	grid-area: label;
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.eff-name {
	font-size: 0.82rem;
	font-weight: 700;
}

.eff-ap {
	font-size: 0.7rem;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.eff-bar {
	grid-area: bar;
	height: 9px;
	border-radius: 999px;
	background: var(--ink-deep);
	border: 1px solid var(--line-soft);
	overflow: hidden;
}

.eff-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--accent-2), var(--accent));
	border-radius: 999px;
}

.eff-pct {
	grid-area: pct;
	text-align: right;
	font-size: 0.82rem;
	font-weight: 900;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}

/* 構成全体の効率（ギア枠モードのまとめ） */

.lo-main {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lo-bar {
	flex: 1;
	height: 12px;
}

.lo-pct {
	font-size: 1.2rem;
	font-weight: 900;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.lo-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin-top: 8px;
}

.lo-stat {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
}

.lo-stat-label {
	font-size: 0.7rem;
	color: var(--muted);
	white-space: nowrap;
}

.lo-stat-value {
	font-size: 0.86rem;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.lo-exp {
	margin: 8px 0 0;
	font-size: 0.74rem;
	line-height: 1.6;
	color: var(--muted);
}

/* 集中型の構成の説明。警告ではなく「選択の結果」として青系で示す */
.lo-note {
	margin: 10px 0 0;
	padding: 8px 11px;
	border: 1px solid var(--line-soft);
	border-left: 3px solid var(--up);
	border-radius: 8px;
	background: var(--ink-deep);
	font-size: 0.8rem;
	line-height: 1.6;
}

.lo-advice {
	margin-top: 12px;
}

.lo-advice-head {
	margin: 0 0 6px;
	font-size: 0.78rem;
	font-weight: 900;
	color: var(--accent);
	letter-spacing: 0.04em;
}

.lo-advice ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lo-advice li {
	padding: 7px 11px;
	background: var(--ink-deep);
	border: 1px solid var(--line-soft);
	border-radius: 8px;
	font-size: 0.8rem;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.lo-guide {
	margin: 10px 0 0;
	font-size: 0.78rem;
	color: var(--muted);
}

/* 積みすぎで効果が薄れる説明 */

.dim-note {
	margin-top: 14px;
	border: 1px solid var(--line-soft);
	border-radius: 10px;
	background: var(--ink-deep);
}

.dim-note summary {
	padding: 9px 12px;
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
	color: var(--accent);
}

.dim-body {
	padding: 0 12px 12px;
	font-size: 0.82rem;
	color: #dcd8ea;
}

.dim-body p {
	margin: 0 0 10px;
}

.dim-table {
	margin-bottom: 10px;
}

.dim-table tbody tr.on th,
.dim-table tbody tr.on td {
	color: var(--accent);
	background: rgba(228, 255, 60, 0.09);
	font-weight: 900;
}

.dim-caveat {
	color: var(--muted);
	font-size: 0.76rem;
}

/* --------------------------------------------------------------- まとめ */

.summary {
	position: relative;
	border-color: #47425f;
}

.summary h2 {
	margin: 0 0 10px;
	font-size: 1.02rem;
	font-weight: 900;
	padding-left: 12px;
	position: relative;
}

.summary h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 7px;
	height: 0.95em;
	background: var(--accent-2);
	border-radius: 4px 2px 5px 2px;
	transform: rotate(8deg);
}

.summary-body {
	background: var(--ink-deep);
	border: 1px solid var(--line-soft);
	border-radius: 10px;
	padding: 12px;
}

.summary-weapon {
	margin: 0;
	font-weight: 900;
	font-size: 1.02rem;
}

.summary-gear {
	margin: 2px 0 10px;
	font-size: 0.82rem;
	color: var(--muted);
}

.summary-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.summary-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	padding-top: 7px;
	border-top: 1px solid var(--line-soft);
	font-size: 0.85rem;
}

.summary-list li:first-child {
	border-top: 0;
	padding-top: 0;
}

.s-label {
	flex: 1 1 auto;
	min-width: 8em;
	color: #dcd8ea;
}

.s-value {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.s-base {
	color: var(--muted);
	font-size: 0.8rem;
}

.s-arrow {
	color: var(--accent-2);
	font-size: 0.75rem;
	font-weight: 700;
}

.s-now {
	font-weight: 900;
	color: var(--accent);
}

.s-delta {
	font-size: 0.75rem;
	color: var(--up);
}

.s-eff {
	font-size: 0.72rem;
	color: var(--muted);
	white-space: nowrap;
}

.summary-note {
	margin: 10px 0 0;
	font-size: 0.74rem;
	color: var(--muted);
}

a.ghost {
	text-decoration: none;
	line-height: 1.2;
}

a.share-x {
	border-color: var(--accent);
	color: var(--accent);
	font-weight: 900;
}

a.share-x:hover {
	background: var(--accent);
	color: var(--on-accent);
}

/* まとめを上に置いたので、そこから下が詳細だと分かるようにする */

.results-head {
	margin: 24px 0 12px;
	font-size: 0.92rem;
	font-weight: 900;
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 10px;
}

/* 見出しの後ろにインクをひと刷けしたようなラインを引く */
.results-head::after {
	content: "";
	flex: 1;
	height: 5px;
	border-radius: 3px 8px 3px 8px;
	background: linear-gradient(90deg, var(--accent-2), rgba(255, 61, 141, 0.08));
	transform: rotate(-0.4deg);
}

/* ------------------------------------------ 動きを減らす設定への配慮 */

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}

/* ------------------------------------------ 固有ギアパワーの発動スイッチ */

.conditions {
	margin-top: 12px;
	padding: 10px 12px;
	border: 1.5px dashed var(--accent-2);
	border-radius: 14px 8px 12px 10px;
	background: rgba(255, 61, 141, 0.06);
}

.cond-head {
	margin: 0 0 8px;
	font-size: 0.78rem;
	font-weight: 900;
	color: var(--accent-2);
}

.cond-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	padding: 4px 0;
}

.cond-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
	font-size: 0.84rem;
}

.cond-toggle input {
	width: 18px;
	height: 18px;
	accent-color: var(--accent-2);
	flex: none;
}

.cond-name {
	font-weight: 700;
}

.cond-when {
	font-size: 0.72rem;
	color: var(--muted);
}

.cond-count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.76rem;
	color: var(--muted);
	padding-left: 25px;
}

.cond-count select {
	width: auto;
	padding: 4px 8px;
	font-size: 0.8rem;
}

/* ------------------------------------------------- 固有ギアパワーのカード */

.unique h2 {
	margin: 0 0 12px;
	font-size: 1.02rem;
}

.uniq {
	background: #100f1a;
	border: 1px solid var(--line);
	border-radius: 14px 9px 13px 10px;
	padding: 12px;
	margin-bottom: 10px;
}

.uniq:last-child {
	margin-bottom: 0;
}

.uniq-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 6px;
}

.uniq-head h3 {
	margin: 0;
	font-size: 0.94rem;
	font-weight: 900;
}

.uniq-slot {
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--accent-2);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 900;
	transform: rotate(-2deg);
}

.uniq-state {
	padding: 1px 8px;
	border-radius: 999px;
	border: 1.5px solid var(--line);
	color: var(--muted);
	font-size: 0.68rem;
	font-weight: 700;
}

.uniq-state.on {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}

.uniq-exp {
	margin: 0 0 8px;
	font-size: 0.8rem;
	color: #d8d4e2;
}

.uniq-list {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px 10px;
	font-size: 0.8rem;
}

.uniq-list dt {
	color: var(--muted);
	font-size: 0.74rem;
}

.uniq-list dd {
	margin: 0 0 6px;
}

.uniq-note {
	margin: 8px 0 0;
	font-size: 0.74rem;
	color: var(--muted);
}

@media (min-width: 620px) {
	.uniq-list {
		grid-template-columns: 10em 1fr;
	}

	.uniq-list dt {
		text-align: right;
	}

	.uniq-list dd {
		margin-bottom: 2px;
	}
}

/* 仮想APが乗っているギアパワーは名前をマゼンタ寄りにして区別する */
.eff-label.has-virtual .eff-name {
	color: var(--accent-2);
}

/* ------------------------------------------------ ギア枠のアイコンタイル */

/* 系統ごとの色。アイコンだけで見分けがつくように色も変える */
.fam-ink {
	--fam: #4fd1ff;
}
.fam-move {
	--fam: #7bff6a;
}
.fam-special {
	--fam: #ffd23c;
}
.fam-revive {
	--fam: #ff8a4c;
}
.fam-sub {
	--fam: #c48cff;
}
.fam-guard {
	--fam: #ff6fae;
}
.fam-unique {
	--fam: #ff3d8d;
}

.slot-line {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 7px;
}

.gp-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 8px 4px 6px;
	border-radius: 13px 8px 12px 9px;
	border: 1.5px solid var(--line);
	background: #0f0e18;
	color: var(--text);
	font-family: inherit;
	cursor: pointer;
	min-height: 66px;
}

.gp-tile-main {
	grid-column: 1 / -1;
	flex-direction: row;
	gap: 9px;
	min-height: 58px;
	border-width: 2px;
}

.gp-tile.filled {
	border-color: color-mix(in srgb, var(--fam) 55%, transparent);
	background: color-mix(in srgb, var(--fam) 9%, #0f0e18);
}

.gp-tile.empty {
	border-style: dashed;
	color: var(--muted);
}

.gp-tile.open {
	border-color: var(--accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

.gp-tile:hover {
	border-color: var(--accent);
}

.gp-tile-icon {
	display: block;
	width: 28px;
	height: 28px;
	color: var(--fam, var(--muted));
	flex: none;
}

.gp-tile-main .gp-tile-icon {
	width: 32px;
	height: 32px;
}

.gp-tile.empty .gp-tile-icon {
	color: #4b4560;
}

.gp-icon-svg {
	width: 100%;
	height: 100%;
	display: block;
}

.gp-tile-name {
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

.gp-tile-main .gp-tile-name {
	font-size: 0.92rem;
	text-align: left;
}

.gp-tile.empty .gp-tile-name {
	font-weight: 400;
}

/* ------------------------------------------------------------ ピッカー */

.gp-picker {
	grid-column: 1 / -1;
	margin-top: 9px;
	padding: 10px;
	border-radius: 14px 9px 13px 10px;
	border: 2px solid var(--accent);
	background: #14131f;
}

.gp-picker-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.gp-picker-title {
	font-size: 0.8rem;
	font-weight: 900;
	color: var(--accent);
}

.gp-picker-close {
	padding: 3px 10px;
	border-radius: 999px;
	border: 1.5px solid var(--line);
	background: transparent;
	color: var(--muted);
	font-family: inherit;
	font-size: 0.72rem;
	cursor: pointer;
}

.gp-picker-close:hover {
	border-color: var(--accent);
	color: var(--text);
}

.gp-picker-group {
	margin: 8px 0 6px;
	font-size: 0.7rem;
	color: var(--muted);
	font-weight: 700;
}

.gp-picker-group:first-of-type {
	margin-top: 0;
}

.gp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
	gap: 6px;
}

.gp-choice {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 7px 2px 5px;
	border-radius: 10px 6px 9px 7px;
	border: 1.5px solid var(--line);
	background: #0f0e18;
	color: var(--text);
	font-family: inherit;
	cursor: pointer;
}

.gp-choice:hover {
	border-color: var(--fam, var(--accent));
	background: color-mix(in srgb, var(--fam) 12%, #0f0e18);
}

.gp-choice.on {
	border-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 16%, #0f0e18);
}

.gp-choice-icon {
	width: 26px;
	height: 26px;
	color: var(--fam, var(--muted));
}

.gp-choice-name {
	font-size: 0.64rem;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
}

.gp-remove {
	display: block;
	width: 100%;
	margin-top: 9px;
	padding: 7px;
	border-radius: 999px;
	border: 1.5px dashed var(--line);
	background: transparent;
	color: var(--muted);
	font-family: inherit;
	font-size: 0.76rem;
	cursor: pointer;
}

.gp-remove:hover {
	border-color: var(--accent-2);
	color: var(--text);
}

@media (min-width: 620px) {
	.slot-line {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
	}

	.gp-tile-main {
		grid-column: auto;
	}

	.gp-grid {
		grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
	}
}

/* -------------------------------------------------- 構成のレーダーチャート */

.radar {
	margin: 4px 0 12px;
}

.radar-svg svg {
	display: block;
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
	height: auto;
	overflow: visible;
}

.rd-grid {
	fill: none;
	stroke: #2e2a40;
	stroke-width: 1;
}

.rd-axis {
	stroke: #262234;
	stroke-width: 1;
}

/* 理想の配分（同じ枠数で最も広く配ったとき）。この面積が効率100% */
.rd-ideal {
	fill: none;
	stroke: var(--muted);
	stroke-width: 1.2;
	stroke-dasharray: 3 2.5;
	opacity: 0.65;
}

/* いまの構成。系統の色（--fam）で塗る */
.rd-fill {
	fill: var(--fam, var(--accent));
	fill-opacity: 0.55;
	stroke: var(--fam, var(--accent));
	stroke-width: 1.2;
}

.rd-label {
	fill: #6f6889;
	font-size: 9.5px;
	font-family: inherit;
	font-weight: 700;
}

.rd-label.on {
	fill: var(--text);
}

.rd-pct {
	fill: var(--accent);
	font-size: 17px;
	font-weight: 900;
	font-family: inherit;
}

.rd-pct-label {
	fill: var(--muted);
	font-size: 9px;
	font-weight: 700;
	font-family: inherit;
}

.radar-note {
	margin: 6px 0 0;
	font-size: 0.72rem;
	color: var(--muted);
	display: flex;
	flex-wrap: wrap;
	gap: 2px 10px;
}

.radar-ideal-key::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 0;
	margin-right: 5px;
	vertical-align: 3px;
	border-top: 1.5px dashed var(--muted);
}

/* ------------------------------------------------------------------ 広告 */

/* ツールの一部と誤解されないよう、パネルの装飾は付けない。
   未配信のときは JS が hidden にするので、空白は残らない。 */
.ad-slot {
	display: block;
	margin: 18px 0;
	/* 高さは確保しない。広告の高さは配信内容で変わるため、先に多めに取ると
	   小さい広告のときに空白が残る。代わりに ads.js が画面の外で
	   読み込みを終わらせるので、見た目のズレは起きない。 */
	min-height: 28px;
}

.ad-slot[hidden] {
	display: none;
}

.ad-label {
	margin: 0 0 4px;
	font-size: 0.64rem;
	color: #5f5878;
	letter-spacing: 0.08em;
}

.ad-slot .adsbygoogle {
	display: block;
	width: 100%;
}

/* ギアパワー別ページ（静的生成）用 */
.ability-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 0.82rem;
}

.ability-list {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 7px;
}

.ability-list a,
.ability-nav a {
	color: var(--accent);
}

.panel h3 {
	margin: 16px 0 8px;
	font-size: 0.9rem;
}

/* 共有の状態表示 */
.share-status {
	margin: 8px 0 0;
	font-size: 0.78rem;
	color: var(--accent);
	min-height: 1.2em;
}