/* プロスピAデータ: 選手一覧と詳細。色は SWELL のメインカラー（--color_main）に合わせる。見出し（h2/h3）には触らない */

:root {
	--psl-line: #dde3ea;
	--psl-soft: #f4f7fa;
	--psl-ink: #1d2733;
	--psl-sub: #5b6876;
	--psl-main: var(--color_main, #0b3a6e);
	--psl-rank-s: #8a6400;
	--psl-rank-a: #c2410c;
	--psl-rank-b: #b45309;
	--psl-rank-c: #4d7c0f;
	--psl-rank-d: #0f766e;
	--psl-rank-e: #1d4ed8;
	--psl-rank-f: #6b7280;
	--psl-rank-g: #6b7280;
}
.psl-list,
.psl-detail {
	color: var(--psl-ink);
}

/* ---------- 絞り込み ---------- */
.psl-filters {
	margin: 0 0 1em;
	padding: 14px;
	border: 1px solid var(--psl-line);
	border-radius: 8px;
	background: var(--psl-soft);
}
.psl-filters__role {
	display: inline-flex;
	margin-bottom: 12px;
	border: 1px solid var(--psl-main);
	border-radius: 6px;
	overflow: hidden;
}
.psl-seg input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.psl-seg span {
	display: block;
	min-width: 5.5em;
	padding: 8px 16px;
	font-weight: 700;
	text-align: center;
	color: var(--psl-main);
	background: #fff;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.psl-seg + .psl-seg span {
	border-left: 1px solid var(--psl-main);
}
.psl-seg input:checked + span {
	color: #fff;
	background: var(--psl-main);
}
.psl-seg input:focus-visible + span {
	outline: 3px solid #f5b400;
	outline-offset: -3px;
}
.psl-filters__row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}
.psl-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--psl-sub);
}
.psl-field--q {
	grid-column: 1 / -1;
}
.psl-field input,
.psl-field select {
	width: 100%;
	min-height: 40px;
	padding: 6px 10px;
	font-size: 16px; /* iOS のズームを防ぐ */
	color: var(--psl-ink);
	background: #fff;
	border: 1px solid #b9c3cf;
	border-radius: 6px;
}
.psl-field input:focus-visible,
.psl-field select:focus-visible {
	outline: 3px solid #f5b400;
	outline-offset: 1px;
}
.psl-count {
	margin: 0 0 .6em;
	font-size: 14px;
	font-weight: 700;
	color: var(--psl-sub);
}

/* ---------- カード ---------- */
.psl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 8px;
	margin: 0 0 1em !important;
	padding: 0 !important;
	list-style: none !important;
}
.psl-grid.is-loading {
	opacity: .5;
	transition: opacity .15s ease;
}
.psl-card {
	margin: 0 !important;
	padding: 0 !important;
}
.psl-card::before {
	content: none !important;
}
.psl-card__link {
	display: grid;
	grid-template-columns: 56px 1fr;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: 8px 10px;
	color: inherit !important;
	text-decoration: none !important;
	background: #fff;
	border: 1px solid var(--psl-line);
	border-radius: 8px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.psl-card__link:hover {
	border-color: var(--psl-main);
	box-shadow: 0 2px 8px rgba(11, 58, 110, .12);
}
.psl-card__link:focus-visible {
	outline: 3px solid #f5b400;
	outline-offset: 2px;
}
.psl-card__icon,
.psl-profile__icon {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: contain;
	border-radius: 6px;
	background: var(--psl-soft);
}
.psl-card__icon.is-empty,
.psl-profile__icon.is-empty {
	display: grid;
	place-items: center;
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	background: var(--psl-main);
}
.psl-card__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.psl-card__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}
.psl-card__name {
	font-weight: 700;
	line-height: 1.3;
}
.psl-card__meta {
	font-size: 12px;
	color: var(--psl-sub);
}
.psl-card__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
	font-size: 12px;
}
.psl-stat abbr {
	margin-right: 2px;
	color: var(--psl-sub);
	text-decoration: none;
	border: 0;
}
.psl-card__spirits {
	margin-left: auto;
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--psl-main);
}
.psl-card__spirits small {
	margin-right: 3px;
	font-size: 10px;
	color: var(--psl-sub);
}
.psl-profile__spirits {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--psl-main);
	line-height: 1.2;
}
.psl-profile__spirits small {
	font-size: 10px;
	font-weight: 700;
	color: var(--psl-sub);
}
.psl-tag {
	display: inline-block;
	padding: 0 6px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--psl-main);
	background: #e8eef6;
	border-radius: 4px;
}
.psl-tag--strong {
	color: #fff;
	background: var(--psl-main);
}
.psl-pos {
	display: inline-grid;
	place-items: center;
	width: 1.7em;
	height: 1.7em;
	font-weight: 700;
	color: #fff;
	background: var(--psl-main);
	border-radius: 4px;
}

/* ランクの色（文字は白地で 4.5:1 以上） */
.psl-rank { font-weight: 700; font-variant-numeric: tabular-nums; }
.psl-rank--s { color: var(--psl-rank-s); }
.psl-rank--a { color: var(--psl-rank-a); }
.psl-rank--b { color: var(--psl-rank-b); }
.psl-rank--c { color: var(--psl-rank-c); }
.psl-rank--d { color: var(--psl-rank-d); }
.psl-rank--e { color: var(--psl-rank-e); }
.psl-rank--f,
.psl-rank--g { color: var(--psl-rank-f); }

.psl-more {
	margin: 0 0 1em;
	text-align: center;
}
.psl-btn {
	display: inline-block;
	padding: 10px 24px;
	font-weight: 700;
	color: #fff !important;
	text-decoration: none !important;
	background: var(--psl-main);
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}
.psl-btn:focus-visible {
	outline: 3px solid #f5b400;
	outline-offset: 2px;
}
.psl-note {
	font-size: 12px;
	color: var(--psl-sub);
}

/* ---------- 詳細 ---------- */
.psl-detail {
	margin-bottom: 1.5em;
}
/* 上部: 全身の画像（あれば左）と、名前・主な能力・基本情報 */
.psl-hero {
	display: grid;
	gap: 16px;
	padding: 16px;
	border: 1px solid var(--psl-line);
	border-radius: 10px;
	background: #fff;
}
.psl-hero--photo {
	grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
	align-items: start;
}
.psl-hero__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}
.psl-photo {
	margin: 0;
}
.psl-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	background: var(--psl-soft);
}
.psl-profile {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	align-items: center;
	gap: 14px;
}
.psl-hero--photo .psl-profile {
	grid-template-columns: 1fr auto;
	align-items: start;
}
.psl-profile__icon {
	width: 72px;
	height: 72px;
}
.psl-profile__main p {
	margin: 0;
}
.psl-profile__name {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}
.psl-profile__team {
	font-size: 13px;
	color: var(--psl-sub);
}
.psl-profile__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 6px !important;
}
.psl-profile__spirits {
	font-size: 22px;
}
.psl-key {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.psl-key__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 !important;
	padding: 8px 10px !important;
	background: var(--psl-soft);
	border-radius: 8px;
}
.psl-key__item::before {
	content: none !important;
}
.psl-key__label {
	font-size: 12px;
	font-weight: 700;
	color: var(--psl-sub);
}
.psl-key__value {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}
.psl-key__value .psl-rank {
	font-size: 28px;
	line-height: 1;
}
.psl-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	margin: 0;
	border: 1px solid var(--psl-line);
	border-radius: 8px;
	overflow: hidden;
}
.psl-facts div {
	padding: 8px 12px;
	border-top: 1px solid var(--psl-line);
	border-right: 1px solid var(--psl-line);
	margin-top: -1px;
	margin-right: -1px;
}
.psl-facts dt {
	font-size: 11px;
	font-weight: 700;
	color: var(--psl-sub);
}
.psl-facts dd {
	margin: 0;
	font-weight: 700;
}
.psl-screen {
	max-width: 560px;
	margin: 1em auto 1.5em;
}
.psl-screen img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}
.psl-screen figcaption {
	margin-top: 6px;
	font-size: 12px;
	color: var(--psl-sub);
	text-align: center;
}

/* 特徴: 紹介文と要点 */
.psl-points {
	margin: 0 0 1.5em;
	border-top: 1px solid var(--psl-line);
}
.psl-points div {
	display: grid;
	grid-template-columns: 11em 1fr;
	gap: 12px;
	padding: 10px 4px;
	border-bottom: 1px solid var(--psl-line);
}
.psl-points dt {
	font-size: 14px;
	font-weight: 700;
	color: var(--psl-sub);
}
.psl-points dd {
	margin: 0;
}

.psl-bars {
	display: grid;
	gap: 8px;
	margin-bottom: 1.5em;
}
.psl-bar {
	display: grid;
	grid-template-columns: 6em 1fr 4.5em;
	align-items: center;
	gap: 10px;
}
.psl-bar__label {
	font-size: 14px;
	font-weight: 700;
}
/* 50・70・90（D・B・S の境目）に薄い目盛り */
.psl-bar__track {
	height: 10px;
	background:
		linear-gradient(to right, transparent calc(50% - 1px), #c9d2dc calc(50% - 1px), #c9d2dc 50%, transparent 50%),
		linear-gradient(to right, transparent calc(70% - 1px), #c9d2dc calc(70% - 1px), #c9d2dc 70%, transparent 70%),
		linear-gradient(to right, transparent calc(90% - 1px), #c9d2dc calc(90% - 1px), #c9d2dc 90%, transparent 90%),
		var(--psl-soft);
	border-radius: 5px;
	overflow: hidden;
}
.psl-bar__fill {
	display: block;
	height: 100%;
	border-radius: 5px;
	background: var(--psl-main);
}
.psl-rank-bg--s { background: var(--psl-rank-s); }
.psl-rank-bg--a { background: var(--psl-rank-a); }
.psl-rank-bg--b { background: var(--psl-rank-b); }
.psl-rank-bg--c { background: var(--psl-rank-c); }
.psl-rank-bg--d { background: var(--psl-rank-d); }
.psl-rank-bg--e { background: var(--psl-rank-e); }
.psl-rank-bg--f,
.psl-rank-bg--g { background: var(--psl-rank-f); }
.psl-bar__value {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.psl-apt {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 6px;
	margin-bottom: 1.5em;
}
.psl-apt__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 4px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	background: #fff;
	border: 2px solid var(--psl-main);
	border-radius: 6px;
}
.psl-apt__cell span {
	font-size: 12px;
	color: var(--psl-sub);
}
.psl-apt__cell b {
	margin-right: 2px;
}
/* 守れないポジションは控えめに（文字色は背景に対して 4.5:1 を保つ） */
.psl-apt__cell.is-none {
	font-weight: 400;
	color: var(--psl-sub);
	background: var(--psl-soft);
	border-color: transparent;
}
.psl-apt__cell.is-none b {
	font-weight: 400;
}

.psl-abilities {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 8px;
	margin: 0 0 1.5em !important;
	padding: 0 !important;
	list-style: none !important;
}
.psl-ability {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	padding: 8px 14px !important;
	font-weight: 700;
	border: 1px solid var(--psl-line);
	border-radius: 6px;
}
.psl-ability::before {
	content: none !important;
}
.psl-ability small {
	font-size: 11px;
	color: var(--psl-sub);
}
.psl-ability__name {
	font-size: 15px;
}
.psl-ability__desc {
	margin-top: 4px;
	font-size: 13px;
	font-weight: 400;
}
.psl-ability__effect,
.psl-ability__items {
	font-size: 12px;
	font-weight: 400;
	color: var(--psl-sub);
}
.psl-ability--super {
	border-color: var(--psl-rank-s);
	background: #fdf8e8;
}

.psl-table-wrap {
	overflow-x: auto;
	margin-bottom: 1.5em;
}
.psl-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.psl-table th,
.psl-table td {
	padding: 8px 10px;
	text-align: left;
	border: 1px solid var(--psl-line);
	white-space: nowrap;
}
.psl-table thead th {
	color: #fff;
	background: var(--psl-main);
}
.psl-table tbody th small {
	font-weight: 400;
	color: var(--psl-sub);
}
.psl-table--lv td {
	font-variant-numeric: tabular-nums;
}
.psl-table--lv tr.is-max th,
.psl-table--lv tr.is-max td {
	font-weight: 700;
	background: var(--psl-soft);
}
.psl-amount {
	letter-spacing: -1px;
	color: var(--psl-main);
}
.psl-grid--compact {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.psl-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0 0 .5em !important;
	padding: 0 !important;
	list-style: none !important;
	font-weight: 700;
}
.psl-links li {
	margin: 0 !important;
}
.psl-links li::before {
	content: none !important;
}

@media (max-width: 599px) {
	.psl-filters__row {
		grid-template-columns: 1fr 1fr;
	}
	.psl-grid {
		grid-template-columns: 1fr;
	}
	.psl-hero {
		padding: 12px;
	}
	.psl-hero--photo {
		grid-template-columns: 1fr;
	}
	.psl-photo {
		width: 72%;
		max-width: 300px;
		margin: 0 auto;
	}
	.psl-profile {
		grid-template-columns: 56px 1fr;
	}
	.psl-hero--photo .psl-profile {
		grid-template-columns: 1fr;
	}
	.psl-profile__icon {
		width: 56px;
		height: 56px;
	}
	.psl-profile__spirits {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: baseline;
		justify-content: flex-start;
		gap: 8px;
	}
	.psl-key__value .psl-rank {
		font-size: 24px;
	}
	/* 基本情報は2列。数が奇数なら最後を横いっぱいにして空きマスを出さない */
	.psl-facts {
		grid-template-columns: 1fr 1fr;
	}
	.psl-facts div:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
	.psl-points div {
		grid-template-columns: 1fr;
		gap: 2px;
	}
	.psl-bar {
		grid-template-columns: 5.5em 1fr 4em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.psl-list *,
	.psl-detail * {
		transition: none !important;
	}
}

/* 攻略記事の表（Psl_Guide） */
.psl-table .psl-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.psl-table--wrap th,
.psl-table--wrap td {
	white-space: normal;
	vertical-align: top;
}
.psl-table--ability tbody th {
	min-width: 8em;
}
.psl-table--ability td:nth-child(2) {
	min-width: 16em;
}
.psl-table--ability small {
	color: var(--psl-sub);
}
.psl-player {
	display: flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}
.psl-player__icon {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 4px;
	object-fit: cover;
}
.psl-player__icon.is-empty {
	display: grid;
	place-items: center;
	font-weight: 700;
	color: var(--psl-main);
	background: #e8eef6;
}
.psl-player b {
	display: block;
	color: var(--color_link, #1565c0);
}
.psl-player small {
	display: block;
	font-weight: 400;
	color: var(--psl-sub);
}
.psl-player small span {
	white-space: nowrap;
}
.psl-more {
	text-align: right;
}
/* 選手の表は横に送っても選手名が見えるよう、選手の列を左に留める */
.psl-table--players tbody th[scope="row"],
.psl-table--players thead th:nth-child(2) {
	position: sticky;
	left: 0;
	z-index: 1;
}
.psl-table--players tbody th[scope="row"] {
	min-width: 10em;
	white-space: normal;
	background: #fff;
}
@media (max-width: 599px) {
	.psl-table--players th,
	.psl-table--players td {
		padding: 6px 8px;
	}
	.psl-player small {
		font-size: 11px;
	}
}