.shinydex,
.shinydex * {
	box-sizing: border-box;
}

.shinydex-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: 1.25rem;
}

/* グループはレイアウトを持たず、カードを直接グリッドへ流す */
.shinydex-form-group,
.shinydex-form-cards {
	display: contents;
}

.shinydex-tabs,
.shinydex-filter-types {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.shinydex-tabs {
	margin-bottom: 1rem;
}

.shinydex-tab,
.shinydex-filter-type {
	padding: 0.45rem 0.8rem;
	border: 1px solid #b8c1cc;
	border-radius: 999px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.shinydex-tab.is-current,
.shinydex-filter-type[aria-pressed="true"] {
	border-color: #1d4ed8;
	background: #1d4ed8;
	color: #fff;
}

.shinydex-filter {
	display: grid;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	padding: 1rem;
	border: 1px solid #d7dce2;
	border-radius: 0.75rem;
}

.shinydex-filter label,
.shinydex-filter fieldset,
.shinydex-result {
	margin: 0;
}

.shinydex-search {
	display: block;
	width: 100%;
	margin-top: 0.25rem;
	padding: 0.5rem;
}

/* タイプ条件は2択なので、常に両方見せて1タップで切り替えられる形にする */
.shinydex-filter-modes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.35rem;
}

.shinydex-filter-mode-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.8rem;
	border: 2px solid #b8c1cc;
	border-radius: 999px;
	background: #fff;
	cursor: pointer;
}

.shinydex-filter-mode-item:has(.shinydex-filter-mode-input:checked),
.shinydex-filter-mode-item:has(.shinydex-sort-input:checked) {
	border-color: #1d4ed8;
	background: #eaf0ff;
	font-weight: 700;
}

.shinydex-filter-mode-input:checked + span,
.shinydex-sort-input:checked + span {
	font-weight: 700;
	color: #1d4ed8;
}

.shinydex-filter-mode-input:focus-visible,
.shinydex-sort-input:focus-visible {
	outline: 2px solid #1d4ed8;
	outline-offset: 2px;
}

.shinydex-filter-reset {
	justify-self: start;
}

.shinydex-card[hidden],
.shinydex-form-toggle[hidden],
.shinydex-kana-jump[hidden],
.shinydex-number-jump[hidden],
.shinydex-no-results[hidden] {
	display: none;
}

.shinydex-kana-jump,
.shinydex-number-jump {
	position: fixed;
	right: max(0.2rem, env(safe-area-inset-right));
	top: 50%;
	transform: translateY(-50%);
	z-index: 999;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	max-height: calc(100vh - 7rem - env(safe-area-inset-bottom));
	padding: 0.25rem;
	border-radius: 0.55rem 0 0 0.55rem;
	background: rgba(255,255,255,0.82);
	box-shadow: 0 2px 10px rgba(0,0,0,0.16);
	backdrop-filter: blur(4px);
}

.shinydex-kana-jump button,
.shinydex-number-jump button {
	min-width: 1.8rem;
	min-height: 1.7rem;
	padding: 0.05rem 0.2rem;
	border: 0;
	border-radius: 0.25rem;
	background: transparent;
	color: #1d4ed8;
	font-size: clamp(0.65rem, 2.2vh, 0.82rem);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.shinydex-kana-jump button:disabled,
.shinydex-number-jump button:disabled {
	opacity: 0.25;
	cursor: default;
}

.shinydex-kana-jump button:not(:disabled):focus-visible,
.shinydex-kana-jump button:not(:disabled):hover,
.shinydex-number-jump button:not(:disabled):focus-visible,
.shinydex-number-jump button:not(:disabled):hover {
	background: #1d4ed8;
	color: #fff;
}

/* display: contents を上書きして、グループ全体を隠せるようにする */
.shinydex-form-group[hidden] {
	display: none !important;
}

.shinydex-form-toggle {
	/* ポケモン名の右に小さく置く（1枚目カードの中に入っている） */
	grid-area: toggle;
	justify-self: end;
	align-self: center;
	max-width: 100%;
	margin: 0;
	padding: 0.15rem 0.5rem;
	border: 1px solid #1d4ed8;
	border-radius: 999px;
	background: #fff;
	color: #1d4ed8;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
}

.shinydex-form-toggle:hover,
.shinydex-form-toggle:focus-visible {
	background: #1d4ed8;
	color: #fff;
}

/* 固定ヘッダーにジャンプ先が隠れないようにする */
.shinydex-card,
.shinydex-filter,
.shinydex-jump-anchor {
	scroll-margin-top: 6rem;
}

.shinydex-jump-anchor {
	display: block;
	/* カード先頭の number 領域へ重ねる。高さ0なので見た目は変わらないが、
	   自動配置で最終行へ回ってジャンプ先がカード下端になるのを防ぐ */
	grid-area: number;
	align-self: start;
	width: 100%;
	height: 0;
	pointer-events: none;
}

.shinydex-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"number number"
		"name toggle"
		"english types"
		"images images";
	column-gap: 0.75rem;
	align-items: center;
	min-width: 0;
	padding: 1rem;
	border: 1px solid #d7dce2;
	border-radius: 0.75rem;
	background: #fff;
}

.shinydex-number,
.shinydex-name,
.shinydex-name-en {
	margin: 0;
	overflow-wrap: anywhere;
}

.shinydex-number {
	grid-area: number;
	margin-bottom: 0.2rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.shinydex-name {
	grid-area: name;
	margin-bottom: 0.1rem;
}

.shinydex-name-en {
	grid-area: english;
	color: #59636e;
}

.shinydex-images {
	grid-area: images;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 1rem 0;
}

.shinydex-img {
	margin: 0;
	text-align: center;
}

.shinydex-img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #f4f6f8;
	border-radius: 0.5rem;
}

.shinydex-img figcaption {
	margin-top: 0.35rem;
	font-size: 0.85rem;
}

.shinydex-types {
	grid-area: types;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.5rem;
}

.shinydex-type {
	display: inline-block;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	background: #edf1f5;
	font-size: 0.85rem;
}

.shinydex-empty {
	padding: 1rem;
	border: 1px solid #d7dce2;
	border-radius: 0.5rem;
}

@media (max-width: 480px) {
	.shinydex-grid {
		grid-template-columns: 1fr;
	}

	.shinydex-card {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"number"
			"name"
			"toggle"
			"english"
			"types"
			"images";
	}

	.shinydex-form-toggle {
		justify-self: start;
		margin: 0.3rem 0 0;
	}

	.shinydex-types {
		justify-content: flex-start;
		margin-top: 0.35rem;
	}
}

/* SWELL の見出し装飾を図鑑カード内では打ち消す */
.shinydex-card .shinydex-name,
.shinydex-card h2.shinydex-name {
	margin: 0 0 0.15rem;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

.shinydex-card .shinydex-name::before,
.shinydex-card .shinydex-name::after {
	content: none;
	display: none;
}

.shinydex-card .shinydex-number {
	margin: 0 0 0.15rem;
	font-size: 0.9rem;
}

.shinydex-card .shinydex-name-en {
	margin: 0;
	line-height: 1.3;
}

.shinydex-card .shinydex-images {
	margin: 0.6rem 0 0;
}

/* タイプ別カラー（相性表の配色に準拠） */
.shinydex-type {
	color: #fff;
	font-weight: 700;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

/* タイプ名の前にアイコンを出す */
.shinydex-type::before {
	content: "";
	flex: none;
	width: 1.05em;
	height: 1.05em;
	background: currentColor;
	-webkit-mask: var(--shinydex-icon) no-repeat center / contain;
	mask: var(--shinydex-icon) no-repeat center / contain;
}
.shinydex-type-normal,
.shinydex-filter-type[data-type="normal"] { --shinydex-t: #9fa19f; }
.shinydex-type-fire,
.shinydex-filter-type[data-type="fire"] { --shinydex-t: #ff9d55; }
.shinydex-type-water,
.shinydex-filter-type[data-type="water"] { --shinydex-t: #5ac3f2; }
.shinydex-type-electric,
.shinydex-filter-type[data-type="electric"] { --shinydex-t: #e0c400; }
.shinydex-type-grass,
.shinydex-filter-type[data-type="grass"] { --shinydex-t: #92cc25; }
.shinydex-type-ice,
.shinydex-filter-type[data-type="ice"] { --shinydex-t: #5ce0e0; }
.shinydex-type-fighting,
.shinydex-filter-type[data-type="fighting"] { --shinydex-t: #ec6874; }
.shinydex-type-poison,
.shinydex-filter-type[data-type="poison"] { --shinydex-t: #a95fc4; }
.shinydex-type-ground,
.shinydex-filter-type[data-type="ground"] { --shinydex-t: #c2a94a; }
.shinydex-type-flying,
.shinydex-filter-type[data-type="flying"] { --shinydex-t: #5a9cea; }
.shinydex-type-psychic,
.shinydex-filter-type[data-type="psychic"] { --shinydex-t: #ea5ce0; }
.shinydex-type-bug,
.shinydex-filter-type[data-type="bug"] { --shinydex-t: #4dc47a; }
.shinydex-type-rock,
.shinydex-filter-type[data-type="rock"] { --shinydex-t: #f2c231; }
.shinydex-type-ghost,
.shinydex-filter-type[data-type="ghost"] { --shinydex-t: #6c5a9c; }
.shinydex-type-dragon,
.shinydex-filter-type[data-type="dragon"] { --shinydex-t: #f2803c; }
.shinydex-type-dark,
.shinydex-filter-type[data-type="dark"] { --shinydex-t: #5a6bbf; }
.shinydex-type-steel,
.shinydex-filter-type[data-type="steel"] { --shinydex-t: #8794a3; }
.shinydex-type-fairy,
.shinydex-filter-type[data-type="fairy"] { --shinydex-t: #f57ba8; }

.shinydex-type {
	background: var(--shinydex-t);
}

/* 検索のタイプボタンも同じ色で識別できるようにする */
.shinydex-filter-type {
	border-width: 2px;
	border-color: var(--shinydex-t);
	padding-left: 1.9rem;
	position: relative;
}

.shinydex-filter-type::before {
	content: "";
	position: absolute;
	left: 0.55rem;
	top: 50%;
	width: 1.05rem;
	height: 1.05rem;
	margin-top: -0.525rem;
	background: var(--shinydex-t);
	-webkit-mask: var(--shinydex-icon) no-repeat center / contain;
	mask: var(--shinydex-icon) no-repeat center / contain;
}

.shinydex-filter-type[aria-pressed="true"] {
	border-color: var(--shinydex-t);
	background: var(--shinydex-t);
	color: #fff;
	font-weight: 700;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.55);
}

.shinydex-filter-type[aria-pressed="true"]::before {
	background: #fff;
}

@media (prefers-reduced-motion: no-preference) {
	.shinydex-filter-type {
		transition: background-color 0.12s ease, color 0.12s ease;
	}
}

/* タイプアイコン（SVG、外部ファイル不要） */
.shinydex-type-normal,
.shinydex-filter-type[data-type="normal"] { --shinydex-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 3a9 9 0 1 1 0 18 9 9 0 0 1 0-18zm0 3.2a5.8 5.8 0 1 0 0 11.6 5.8 5.8 0 0 0 0-11.6z'/%3E%3Crect x='2.2' y='10.2' width='19.6' height='3.6' rx='1.8'/%3E%3C/svg%3E"); }
.shinydex-type-fire,
.shinydex-filter-type[data-type="fire"] { --shinydex-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c3 4 1 5 3 7 1.4 1.4 2.5 2.7 2.5 5A5.5 5.5 0 0 1 12 22a5.5 5.5 0 0 1-5.5-5.6c0-3.4 2.6-5 3.4-7.6.5 1 1.3 1.6 2.1 2 .6-2.6-.6-4.7 0-8.8z'/%3E%3C/svg%3E"); }
.shinydex-type-water,
.shinydex-filter-type[data-type="water"] { --shinydex-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c4 5.5 6.5 8.6 6.5 12A6.5 6.5 0 0 1 12 22a6.5 6.5 0 0 1-6.5-8C5.5 10.6 8 7.5 12 2z'/%3E%3C/svg%3E"); }
.shinydex-type-electric,
.shinydex-filter-type[data-type="electric"] { --shinydex-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 2 5 13.5h5L8.5 22 19 9.5h-5.5z'/%3E%3C/svg%3E"); }
.shinydex-type-grass,
.shinydex-filter-type[data-type="grass"] { --shinydex-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.2 22c-.6-6 .4-11 3.6-16 .6 6.2-.4 11.2-3.6 16z'/%3E%3Cpath d='M8 22c-1.8-4.4-1.7-8.4.4-12.4 1.7 4.4 1.6 8.4-.4 12.4z'/%3E%3Cpath d='M15 22c1.4-4.6 3.4-7.6 6-9.6-1.2 4.6-3.2 7.8-6 9.6z'/%3E%3C/svg%3E"); }
.shinydex-type-ice,
.shinydex-filter-type[data-type="ice"] { --shinydex-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2h2v20h-2z'/%3E%3Cpath d='M2.7 6.5 3.7 4.8l17.3 10-1 1.7z'/%3E%3Cpath d='M21 4.8l1 1.7-17.3 10-1-1.7z'/%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3C/svg%3E"); }
.shinydex-type-fighting,
.shinydex-filter-type[data-type="fighting"] { --shinydex-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9h14v7a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3z'/%3E%3Crect x='6' y='4' width='2.6' height='5' rx='1.3'/%3E%3Crect x='10.7' y='3' width='2.6' height='6' rx='1.3'/%3E%3Crect x='15.4' y='4' width='2.6' height='5' rx='1.3'/%3E%3C/svg%3E"); }
.shinydex-type-poison,
.shinydex-filter-type[data-type="poison"] { --shinydex-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21c1.5-5 4-7.5 9-7.5s7.5 2.5 9 7.5z'/%3E%3Ccircle cx='9' cy='6' r='3'/%3E%3Ccircle cx='16' cy='9.5' r='2'/%3E%3C/svg%3E"); }
.shinydex-type-ground,
.shinydex-filter-type[data-type="ground"] { --shinydex-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 8h20l-3 4H5z'/%3E%3Cpath d='M4.5 13.2h15l-3 4H7.5z'/%3E%3Cpath d='M8 18.4h8l-2.2 3h-3.6z'/%3E%3C/svg%3E"); }
.shinydex-type-flying,
.shinydex-filter-type[data-type="flying"] { --shinydex-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3c-6 .5-11 3.5-14 8.5C5.6 14 4.4 17 4 21c3-3.4 6-5.6 9-6.6-2 2-3.4 4-4.2 6.6 4.4-2.4 8-6 10-10.4C20 8.6 21 5.8 21 3z'/%3E%3C/svg%3E"); }
.shinydex-type-psychic,
.shinydex-filter-type[data-type="psychic"] { --shinydex-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2l3 4.5 5.2 1-3 4.3.8 5.2-6-2.2-6 2.2.8-5.2-3-4.3 5.2-1zm0 6.6a2.6 2.6 0 1 0 0 5.2 2.6 2.6 0 0 0 0-5.2z'/%3E%3C/svg%3E"); }
.shinydex-type-bug,
.shinydex-filter-type[data-type="bug"] { --shinydex-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='14' rx='4' ry='7'/%3E%3Cpath d='M8 7c-2.5 0-4.5 2-4.5 5S5.5 17 8 17z'/%3E%3Cpath d='M16 7c2.5 0 4.5 2 4.5 5S18.5 17 16 17z'/%3E%3Cpath d='M9.4 2.4 11 6h2l1.6-3.6z'/%3E%3C/svg%3E"); }
.shinydex-type-rock,
.shinydex-filter-type[data-type="rock"] { --shinydex-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.5 21 8v8l-9 5.5L3 16V8zm0 5L7 11v4.5l5 3 5-3V11z'/%3E%3C/svg%3E"); }
.shinydex-type-ghost,
.shinydex-filter-type[data-type="ghost"] { --shinydex-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a7 7 0 0 0-7 7v13l3-2.5 2 2.5 2-2.5 2 2.5 3-2.5V9a7 7 0 0 0-7-7zm-2.5 5.4a1.7 1.7 0 1 0 0 3.4 1.7 1.7 0 0 0 0-3.4zm5 0a1.7 1.7 0 1 0 0 3.4 1.7 1.7 0 0 0 0-3.4z'/%3E%3C/svg%3E"); }
.shinydex-type-dragon,
.shinydex-filter-type[data-type="dragon"] { --shinydex-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3c2 1.5 3.2 3.5 3.6 6L12 4l4.4 5c.4-2.5 1.6-4.5 3.6-6-.6 4-2 7-4 9 1.2 2.6 1 5.4-.6 8L12 16l-3.4 4c-1.6-2.6-1.8-5.4-.6-8-2-2-3.4-5-4-9z'/%3E%3C/svg%3E"); }
.shinydex-type-dark,
.shinydex-filter-type[data-type="dark"] { --shinydex-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 2A10 10 0 1 0 22 15.5 8 8 0 0 1 14.5 2z'/%3E%3C/svg%3E"); }
.shinydex-type-steel,
.shinydex-filter-type[data-type="steel"] { --shinydex-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 4h9l5 5v11H5zm5 7.4a2.6 2.6 0 1 0 0 5.2 2.6 2.6 0 0 0 0-5.2z'/%3E%3C/svg%3E"); }
.shinydex-type-fairy,
.shinydex-filter-type[data-type="fairy"] { --shinydex-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12 4 5.5C3 4.7 3.4 3 4.7 3c3.4 0 6 3 7.3 9z'/%3E%3Cpath d='M12 12 20 5.5c1-.8.6-2.5-.7-2.5-3.4 0-6 3-7.3 9z'/%3E%3Cpath d='M12 12c-1.3 6-3.9 9-7.3 9-1.3 0-1.7-1.7-.7-2.5z'/%3E%3Cpath d='M12 12c1.3 6 3.9 9 7.3 9 1.3 0 1.7-1.7.7-2.5z'/%3E%3C/svg%3E"); }
.shinydex-software-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1rem}.shinydex-software-card{padding:1.25rem;border:1px solid #d8dee6;border-radius:12px;background:#fff}.shinydex-software-name{font-size:1.1rem;font-weight:700}.shinydex-software-link{display:block;color:inherit;text-decoration:none}.shinydex-software-link:focus-visible{outline:3px solid #2271b1;outline-offset:4px}.shinydex-software-description,.shinydex-software-status{margin:.5rem 0 0}.shinydex-software-status{font-weight:700;color:#68717d}.shinydex-tab.is-disabled{cursor:not-allowed;opacity:.55}