* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: #eef4f7;
	color: #172026;
	font-family: Arial, Helvetica, sans-serif;
}

.app {
	width: min(820px, 100%);
	margin: 0 auto;
	padding: 12px 14px 32px;
}

h1 {
	margin: 0;
	font-size: clamp(20px, 5vw, 32px);
	line-height: 1.1;
}

.site-title {
	align-items: center;
	color: inherit;
	display: inline-flex;
	gap: 0.3em;
	text-decoration: none;
}

.site-logo {
	display: block;
	height: 1em;
	width: auto;
}

.page-header {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	justify-content: space-between;
	margin: 0 0 8px;
}

.panel {
	background: #fff;
	border: 1px solid #d8e3e8;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(22, 39, 50, 0.08);
	margin: 8px 0;
	padding: 12px;
}

.controls,
.iv-grid {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.iv-grid {
	align-items: start;
	grid-template-columns: repeat(3, minmax(0, 1fr)) 80px;
}

.iv-grid.is-showcase {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.iv-grid > label {
	display: flex;
	flex-direction: column;
}

.iv-grid > label[hidden] {
	display: none;
}

label span {
	display: block;
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	margin: 0 0 3px;
}

input,
select,
button {
	width: 100%;
	border: 1px solid #b8c8d0;
	border-radius: 6px;
	font: inherit;
	min-height: 36px;
	padding: 5px 10px;
}

.search-field {
	position: relative;
}

.suggestions {
	background: #fff;
	border: 1px solid #b8c8d0;
	border-radius: 6px;
	box-shadow: 0 10px 24px rgba(22, 39, 50, 0.16);
	left: 0;
	max-height: min(320px, 60vh);
	overflow-y: auto;
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	z-index: 20;
}

.suggestions[hidden] {
	display: none;
}

.suggestion {
	align-items: center;
	background: #fff;
	border: 0;
	border-bottom: 1px solid #e1eaee;
	border-radius: 0;
	color: #172026;
	cursor: pointer;
	display: flex;
	font-weight: 700;
	gap: 8px;
	justify-content: space-between;
	min-height: 38px;
	padding: 6px 10px;
	text-align: left;
}

.suggestion:last-child {
	border-bottom: 0;
}

.suggestion:hover,
.suggestion:focus-visible {
	background: #e8f1f5;
	outline: none;
}

.suggestion span {
	font-size: 15px;
	margin: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.suggestion small {
	color: #5b6b73;
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
}

button {
	background: #215a78;
	border-color: #215a78;
	color: #fff;
	cursor: pointer;
	font-weight: 700;
}

button:hover {
	background: #17445b;
}

.cup-section {
	margin: 8px 0;
}

.cup-results {
	display: grid;
	gap: 6px;
	grid-template-columns: 1fr;
}

@media (min-width: 721px) {
	.cup-results {
		grid-template-columns: 1fr 1fr;
	}
}

.cup-card {
	background: #f7fafb;
	border: 1px solid #d8e3e8;
	border-radius: 6px;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cup-card:hover {
	border-color: #7d9aaa;
}

.cup-card:focus-visible {
	outline: 3px solid rgba(45, 136, 181, 0.3);
	outline-offset: 2px;
}

.cup-card.is-selected {
	border-color: #2d88b5;
	box-shadow: 0 0 0 2px rgba(45, 136, 181, 0.22);
}

.cup-card.is-selected header {
	background: #215a78;
}

.cup-card header {
	align-items: center;
	background: #263842;
	color: #fff;
	display: flex;
	justify-content: space-between;
	padding: 7px 12px;
}

.cup-card h3 {
	font-size: 15px;
	margin: 0;
}

.cup-toggle {
	background: rgba(255, 255, 255, 0.12);
	border: none;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	display: none;
	flex: 0 0 auto;
	font-size: 14px;
	line-height: 1;
	min-height: 0;
	padding: 4px 8px;
	transition: transform 0.15s ease;
	width: auto;
}

.cup-toggle:hover {
	background: rgba(255, 255, 255, 0.22);
}

.cup-results.show-details .cup-toggle {
	transform: rotate(180deg);
}

.cup-ranks {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: 5px 10px 2px;
}

.rank-tile {
	align-items: center;
	background: #0eb084;
	border-radius: 6px;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 48px;
	padding: 4px 8px;
	text-align: center;
}

.rank-tile span {
	font-size: 12px;
	font-weight: 700;
}

.rank-tile strong {
	font-size: 16px;
	line-height: 1.2;
}

.rank-tile small {
	font-size: 11px;
	opacity: 0.88;
}

.cup-rank-tile {
	background: #6b4fa3;
}

.rank-tile.unavailable {
	background: #7b8790;
	color: #fff;
}

.cup-details {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: 3px 10px 8px;
}

.cup-details > div {
	align-items: center;
	background: #fff;
	border: 1px solid #e1eaee;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	justify-content: center;
	min-width: 0;
	padding: 6px 8px;
	text-align: center;
}

.cup-details span {
	color: #5b6b73;
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
}

.cup-details strong {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
	text-align: center;
}

.moveset-panel header {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: space-between;
	margin-bottom: 8px;
}

.moveset-panel h2 {
	font-size: 18px;
}

.moveset-cup {
	background: #215a78;
	border-radius: 999px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 3px 10px;
}

.moveset-empty {
	color: #7b8790;
	font-size: 13px;
	margin: 0;
}

.moveset-groups {
	display: grid;
	gap: 6px;
}

.moveset-group {
	align-items: center;
	display: grid;
	gap: 8px;
	grid-template-columns: 64px minmax(0, 1fr);
}

.moveset-label {
	color: #5b6b73;
	font-size: 12px;
	font-weight: 700;
}

.moveset-moves {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.moveset-moves li {
	align-items: center;
	display: flex;
	font-size: 13px;
	gap: 6px;
}

.moveset-moves .type {
	font-size: 11px;
	padding: 2px 8px;
}

.moveset-moves .is-elite {
	color: #c60b0b;
	font-weight: 700;
}

/* IV／選秀會的數值面板：左邊是圖片（屬性在左上角，像團體戰卡片）和名稱，右邊是數值 */
.stats {
	align-items: center;
	display: flex;
	gap: 16px;
}

.stats-pokemon {
	align-items: center;
	display: flex;
	flex: 0 0 120px;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.stats-pokemon > .stats-types {
	align-self: flex-start;
	gap: 4px;
	justify-content: flex-start;
	min-height: 18px;
}

.stats-types .type {
	font-size: 11px;
	padding: 2px 6px;
}

.stats-image {
	height: 96px;
	object-fit: contain;
	width: 96px;
}

.stats-thumb .ranking-shadow-icon {
	height: 26px;
	width: 26px;
}

.stats-pokemon > h2 {
	font-size: 18px;
	overflow-wrap: anywhere;
	text-align: center;
}

.stats-rows {
	flex: 1;
	min-width: 0;
}

h2 {
	margin: 0;
	font-size: 24px;
}

.types {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
}

.family {
	align-items: flex-start;
	border-top: 1px solid #e1eaee;
	display: flex;
	gap: 8px;
	grid-column: 1 / -1;
	margin-top: 2px;
	padding-top: 8px;
}

.family[hidden] {
	display: none;
}

.family > span {
	color: #5b6b73;
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	padding-top: 8px;
}

.family > div {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: 8px;
}

.family-member {
	align-items: center;
	background: #f7fafb;
	border: 1px solid #d8e3e8;
	border-radius: 8px;
	color: #172026;
	display: flex;
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	justify-content: center;
	line-height: 1.25;
	min-height: 36px;
	width: auto;
	padding: 5px 10px;
	text-align: center;
}

.family-member:hover {
	background: #e8f1f5;
	border-color: #9eb7c5;
}

.family-member.is-selected {
	background: #2d88b5;
	border-color: #2d88b5;
	box-shadow: 0 0 0 2px rgba(45, 136, 181, 0.28);
	color: #fff;
}

.family-member.is-selected:hover {
	background: #217aa5;
	border-color: #217aa5;
}

.family-member:focus-visible {
	outline: 3px solid rgba(45, 136, 181, 0.3);
	outline-offset: 2px;
}

.iv-pips {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 3px;
	margin-top: 6px;
}

.iv-pip {
	background: #f7fafb;
	border: 1px solid #d8e3e8;
	border-radius: 4px;
	color: #172026;
	font-size: 11px;
	font-weight: 700;
	min-height: 24px;
	padding: 2px 0;
	text-align: center;
	width: 100%;
}

.iv-pip:hover {
	background: #e8f1f5;
	border-color: #9eb7c5;
}

.iv-pip.is-active {
	background: #2d88b5;
	border-color: #2d88b5;
	color: #fff;
}

.iv-pip.is-active:hover {
	background: #217aa5;
	border-color: #217aa5;
}

/* IV quality colours: 0 gray, 1-5 red, 6-10 yellow, 11-15 green */
.iv-pip[data-value="0"] {
	background: #d8d8d8;
	border-color: #a0a0a0;
}
.iv-pip.is-active[data-value="0"] {
	background: #666666;
	border-color: #666666;
	color: #fff;
}
.iv-pip.is-active[data-value="0"]:hover {
	background: #555555;
	border-color: #555555;
}
.iv-pip[data-value="1"],.iv-pip[data-value="2"],.iv-pip[data-value="3"],.iv-pip[data-value="4"],.iv-pip[data-value="5"] {
	background: #fde8e6;
	border-color: #e07a73;
}
.iv-pip[data-value="6"],.iv-pip[data-value="7"],.iv-pip[data-value="8"],.iv-pip[data-value="9"],.iv-pip[data-value="10"] {
	background: #fef3cd;
	border-color: #d4a830;
}
.iv-pip[data-value="11"],.iv-pip[data-value="12"],.iv-pip[data-value="13"],.iv-pip[data-value="14"],.iv-pip[data-value="15"] {
	background: #e8f5e9;
	border-color: #5fa868;
}
.iv-pip.is-active[data-value="1"],.iv-pip.is-active[data-value="2"],.iv-pip.is-active[data-value="3"],.iv-pip.is-active[data-value="4"],.iv-pip.is-active[data-value="5"] {
	background: #c0392b;
	border-color: #c0392b;
	color: #fff;
}
.iv-pip.is-active[data-value="1"]:hover,.iv-pip.is-active[data-value="2"]:hover,.iv-pip.is-active[data-value="3"]:hover,.iv-pip.is-active[data-value="4"]:hover,.iv-pip.is-active[data-value="5"]:hover {
	background: #a93226;
	border-color: #a93226;
}
.iv-pip.is-active[data-value="6"],.iv-pip.is-active[data-value="7"],.iv-pip.is-active[data-value="8"],.iv-pip.is-active[data-value="9"],.iv-pip.is-active[data-value="10"] {
	background: #c9963a;
	border-color: #c9963a;
	color: #fff;
}
.iv-pip.is-active[data-value="6"]:hover,.iv-pip.is-active[data-value="7"]:hover,.iv-pip.is-active[data-value="8"]:hover,.iv-pip.is-active[data-value="9"]:hover,.iv-pip.is-active[data-value="10"]:hover {
	background: #b5852e;
	border-color: #b5852e;
}
.iv-pip.is-active[data-value="11"],.iv-pip.is-active[data-value="12"],.iv-pip.is-active[data-value="13"],.iv-pip.is-active[data-value="14"],.iv-pip.is-active[data-value="15"] {
	background: #2e7d32;
	border-color: #2e7d32;
	color: #fff;
}
.iv-pip.is-active[data-value="11"]:hover,.iv-pip.is-active[data-value="12"]:hover,.iv-pip.is-active[data-value="13"]:hover,.iv-pip.is-active[data-value="14"]:hover,.iv-pip.is-active[data-value="15"]:hover {
	background: #246427;
	border-color: #246427;
}

.mode-switch {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mode-switch .family-member {
	flex: 0 0 auto;
	justify-content: center;
	font-size: 14px;
}

.mode-menu {
	position: relative;
}

.mode-menu-button::after {
	border: 4px solid transparent;
	border-bottom-width: 0;
	border-top-color: currentColor;
	content: "";
	margin-left: 6px;
}

.mode-menu-list {
	background: #fff;
	border: 1px solid #b8c8d0;
	border-radius: 6px;
	box-shadow: 0 10px 24px rgba(22, 39, 50, 0.16);
	min-width: 100%;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	z-index: 20;
}

.mode-menu-list[hidden] {
	display: none;
}

#mode-more-list:not([hidden]) {
	display: grid;
	grid-template-columns: repeat(2, auto);
}

#mode-more-list .mode-menu-separator,
#mode-more-list .mode-menu-heading {
	grid-column: 1 / -1;
}

.mode-menu-item {
	background: #fff;
	border: 0;
	border-radius: 0;
	color: #172026;
	font-size: 14px;
	padding: 6px 14px;
	text-align: left;
	white-space: nowrap;
}

.mode-menu-item:hover,
.mode-menu-item:focus-visible {
	background: #e8f1f5;
	outline: none;
}

.mode-menu-item.is-selected {
	color: #2d88b5;
}

.mode-menu-separator {
	border-top: 1px solid #b8c8d0;
	margin: 4px 0;
}

.mode-menu-heading {
	background: #1f6a91;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 14px;
}

.mode-menu-heading:not(:first-child) {
	margin-top: 4px;
}

.settings-button svg {
	fill: currentColor;
	height: 18px;
	width: 18px;
}

.settings-dialog {
	border: 1px solid #b8c8d0;
	border-radius: 8px;
	box-shadow: 0 16px 40px rgba(22, 39, 50, 0.24);
	color: #172026;
	max-width: calc(100vw - 32px);
	padding: 0;
	width: 360px;
}

.settings-dialog::backdrop {
	background: rgba(22, 39, 50, 0.4);
}

.settings-dialog form {
	padding: 12px 16px 16px;
}

.settings-dialog header {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
}

.settings-dialog h2 {
	font-size: 18px;
	margin: 0;
}

.settings-close {
	background: none;
	border: 0;
	color: #5c6f7a;
	font-size: 24px;
	line-height: 1;
	padding: 0 4px;
	width: auto;
}

.settings-close:hover,
.settings-close:focus-visible {
	background: none;
	color: #172026;
}

.settings-field {
	display: grid;
	gap: 6px;
}

.settings-field span {
	font-size: 14px;
	font-weight: 700;
}

.settings-hint {
	color: #5c6f7a;
	font-size: 13px;
	margin: 8px 0 0;
}

.showcase-fields {
	margin-bottom: 14px;
}

.showcase-grid {
	align-items: start;
	grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

.showcase-max {
	color: #5f6f78;
	display: block;
	font-size: 12px;
	line-height: 16px;
	margin-top: 4px;
}

.showcase-max[hidden] {
	display: none;
}

#actual-height,
#actual-weight {
	-moz-appearance: textfield;
}

#actual-height::-webkit-inner-spin-button,
#actual-height::-webkit-outer-spin-button,
#actual-weight::-webkit-inner-spin-button,
#actual-weight::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.switch-field {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
}

.switch-field-label {
	align-items: center;
	display: flex;
	font-size: 12px;
	font-weight: 700;
	gap: 4px;
	line-height: 18px;
	margin: 0 0 3px;
}

.xxl-toggle {
	background: #b8c8d0;
	border-color: #b8c8d0;
	color: #fff;
	min-width: 64px;
	width: auto;
}

.xxl-toggle:hover {
	background: #9eb2bd;
	border-color: #9eb2bd;
}

.xxl-toggle.is-active {
	background: #2d88b5;
	border-color: #2d88b5;
}

.xxl-toggle.is-active:hover {
	background: #217aa5;
	border-color: #217aa5;
}

.xxl-toggle:focus-visible {
	outline: 3px solid rgba(45, 136, 181, 0.3);
	outline-offset: 2px;
}

.showcase-warning {
	background: #fef3cd;
	border: 1px solid #d4a830;
	border-radius: 6px;
	color: #5b4b12;
	font-size: 13px;
	font-weight: 700;
	margin: 10px 0 0;
	padding: 10px 12px;
	text-align: center;
}

/* 選秀會的規則說明 */
.showcase-rules ul {
	display: grid;
	gap: 4px;
	margin: 0;
	padding-left: 18px;
}

.showcase-total {
	margin: 14px 0 8px;
	min-height: 64px;
	transition: background 0.15s ease;
}

.showcase-total.is-average {
	background: #dca517;
}

.showcase-total.is-poor {
	background: #c60b0b;
}

.showcase-total strong {
	font-size: 30px;
}

.showcase-total-score {
	align-items: baseline;
	display: flex;
	gap: 6px;
}

.showcase-total-score small {
	font-size: 14px;
	font-weight: 700;
}

.showcase-breakdown {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.showcase-breakdown span {
	font-size: 10px;
}

.showcase-breakdown strong {
	font-size: 13px;
}

.shadow-toggle {
	background: #172026;
	border-color: #172026;
	flex: 0 0 auto;
	font-size: 13px;
	min-height: 36px;
	padding: 5px 14px;
	width: auto;
}

.shadow-toggle:hover,
.shadow-toggle.is-active {
	background: #6b4fa3;
	border-color: #6b4fa3;
}

.shadow-toggle:focus-visible {
	outline: 3px solid rgba(107, 79, 163, 0.32);
	outline-offset: 2px;
}

.controls[hidden],
.ranking-header[hidden],
.ranking-pager[hidden] {
	display: none;
}

.ranking-filters {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ranking-search {
	flex: 1 1 220px;
}

.ranking-type {
	flex: 0 0 120px;
}

/* 與 label span 相同的欄位標題（下拉選單是按鈕，不能包在 label 裡） */
.ranking-type > span {
	display: block;
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	margin: 0 0 3px;
}

.ranking-type .type-menu-button {
	min-width: 0;
	width: 100%;
}

/* 屬性欄靠右，選項清單向左展開才不會超出畫面 */
.ranking-type .type-menu-list {
	left: auto;
	right: 0;
}

.ranking-toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ranking-toolbar {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: space-between;
	margin: 10px 0 0;
}

.pokedex-toolbar {
	justify-content: flex-end;
}

/* 篩選按鈕依群組上色：未開啟為淡色底，開啟為實心 */
.ranking-toggles .xxl-toggle {
	--group: #2d88b5;
	--group-hover: #217aa5;
	--group-tint: #e4f1f7;
	background: var(--group-tint);
	border-color: var(--group);
	color: var(--group);
}

.ranking-toggles .xxl-toggle[data-group="form"] {
	--group: #6b4fa3;
	--group-hover: #5a4190;
	--group-tint: #ece6f6;
}

.ranking-toggles .xxl-toggle[data-group="rarity"] {
	--group: #a8650f;
	--group-hover: #8f550b;
	--group-tint: #f8ecd9;
}

.ranking-toggles .xxl-toggle[data-group="other"] {
	--group: #c0392b;
	--group-hover: #a52f23;
	--group-tint: #fae5e2;
}

.ranking-toggles .xxl-toggle[data-group="display"] {
	--group: #4a5a63;
	--group-hover: #3b4a52;
	--group-tint: #e9eef0;
}

.ranking-toggles .xxl-toggle:hover {
	border-color: var(--group-hover);
	color: var(--group-hover);
}

.ranking-toggles .xxl-toggle.is-active {
	background: var(--group);
	color: #fff;
}

.ranking-toggles .xxl-toggle.is-active:hover {
	background: var(--group-hover);
	color: #fff;
}

.ranking-header {
	margin-top: 10px;
}

.ranking-count {
	color: #5b6b73;
	font-size: 13px;
	margin: 0;
}

.ranking-page-size,
.ranking-page {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: 6px;
}

.ranking-page-size span,
.ranking-page span {
	margin: 0;
	white-space: nowrap;
}

.ranking-page-size select {
	width: auto;
}

.ranking-page select {
	width: auto;
}

.ranking-pager {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 10px;
}

.ranking-pager button {
	width: auto;
}

.ranking-pager button:disabled {
	background: #b8c8d0;
	border-color: #b8c8d0;
	cursor: default;
}

.ranking-list {
	display: grid;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ranking-row {
	align-items: center;
	background: #f7fafb;
	border: 1px solid #d8e3e8;
	border-radius: 8px;
	display: grid;
	gap: 10px;
	grid-template-columns: 52px 48px minmax(0, 1fr) minmax(0, 1.6fr);
	padding: 6px 10px;
}

.ranking-header {
	background: none;
	border-color: transparent;
	color: #5b6b73;
	font-size: 12px;
	font-weight: 700;
	padding-bottom: 2px;
	padding-top: 0;
}

.ranking-header-name {
	grid-column: 2 / span 2;
}

.ranking.no-images .ranking-row {
	grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1.6fr);
}

.ranking.no-images .ranking-header-name {
	grid-column: 2;
}

.ranking-rank {
	text-align: center;
}

.ranking-rank > span {
	color: #5b6b73;
	display: block;
	font-size: 13px;
	font-weight: 700;
}

.ranking-thumb {
	display: flex;
	position: relative;
}

.ranking-image {
	height: 48px;
	object-fit: contain;
	width: 48px;
}

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

.ranking-name strong {
	display: block;
	font-size: 15px;
	overflow-wrap: anywhere;
}

.ranking-shadow-icon {
	fill: #6b4fa3;
	height: 16px;
	margin-right: 3px;
	vertical-align: -2px;
	width: 16px;
}

.ranking-shadow-core {
	fill: #d9cdf0;
}

.ranking-thumb .ranking-shadow-icon {
	bottom: 0;
	filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
	left: 0;
	margin: 0;
	position: absolute;
}

.ranking-name small {
	color: #5b6b73;
	font-size: 12px;
	font-weight: 400;
}

.ranking-name .types {
	justify-content: flex-start;
	margin-top: 4px;
}

.ranking-moves {
	display: grid;
	font-size: 13px;
	gap: 4px 10px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	min-width: 0;
}

.ranking-header .ranking-moves {
	font-size: inherit;
}

.ranking-moves > div {
	align-items: center;
	display: flex;
	gap: 6px;
	min-width: 0;
}

.ranking-moves .type {
	flex: 0 0 auto;
}

.ranking-moves .is-elite {
	color: #c60b0b;
	font-weight: 700;
}

.ranking-elite {
	margin-left: 2px;
	text-decoration: none;
}

.ranking-dps strong {
	display: block;
	font-size: 16px;
	line-height: 1.2;
}

.ranking-dps span {
	color: #5b6b73;
	display: block;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
}

.raids-status {
	color: #5b6b73;
	font-size: 13px;
	margin: 0;
}

/* 圖鑑與地區限定的數量：色條標題，樣式同團體戰的星級標題 */
.raids-status.is-count {
	background: #2da5d6;
	border-radius: 8px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	margin: 12px 0 6px;
	padding: 8px 14px;
}

/* 屬性相剋的說明：淡色底加左側色條的備註框 */
.raids-status.is-note {
	background: #fff8e1;
	border-left: 4px solid #e0a800;
	border-radius: 6px;
	color: #5c4a00;
	margin: 12px 0 6px;
	padding: 8px 12px;
}

.raid-tier h2 {
	font-size: 16px;
	margin: 12px 0 6px;
}

.research-filter {
	margin-bottom: 10px;
}

.research-group {
	flex: 0 1 240px;
	min-width: 0;
}

.research-category {
	background: var(--category-tint);
	border-radius: 10px;
	break-inside: avoid;
	margin-bottom: 12px;
	padding: 10px;
}

.research-category h2 {
	background: var(--category);
	border-radius: 8px;
	color: #fff;
	font-size: 16px;
	margin: 0 0 6px;
	padding: 8px 14px;
}

.research-tasks {
	display: grid;
	gap: 6px;
}

/* 調查突破：橫跨兩欄，每列獎勵很多，從左側排起 */
.research-breakthrough {
	column-span: all;
}

/* 分欄的最後一個分類的 margin-bottom 不會留在欄底，另外留出間距 */
.research-category + .research-breakthrough {
	margin-top: 12px;
}

.research-breakthrough h2 {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
}

.research-breakthrough-meta {
	font-size: 13px;
	font-weight: 400;
}

.research-breakthrough .research-task-name {
	flex: 0 0 7em;
}

.research-breakthrough .research-icons {
	flex: 1 1 0;
	justify-content: flex-start;
}

.research-breakthrough .gym-note {
	margin: 8px 4px 0;
}

@media (min-width: 721px) {
	#research-list {
		column-gap: 12px;
		columns: 2;
	}

	/* 只選一個分類時不分欄，改由任務排成兩欄填滿整列 */
	#research-list.is-single {
		columns: auto;
	}

	#research-list.is-single .research-category:not(.research-breakthrough) .research-tasks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.research-task {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(20, 40, 60, 0.12);
	align-items: center;
	display: flex;
	gap: 10px;
	min-height: 56px;
	padding: 8px 14px;
}

.research-task-name {
	flex: 1 0 8em;
	font-size: 15px;
	font-weight: 700;
}

.research-icons {
	display: flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	gap: 6px 4px;
	min-width: 0;
	justify-content: flex-end;
}

.research-reward {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 42px;
}

.research-cp {
	color: #5b6b73;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.research-icon {
	align-items: center;
	background: #f4f6f7;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(20, 40, 60, 0.25);
	display: flex;
	height: 42px;
	justify-content: center;
	position: relative;
	width: 42px;
}

.research-icon img {
	height: 32px;
	object-fit: contain;
	width: 32px;
}

.research-quantity {
	background: #4a4a4a;
	border-radius: 8px;
	bottom: -6px;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	left: 50%;
	line-height: 1;
	padding: 2px 5px;
	position: absolute;
	transform: translateX(-50%);
	white-space: nowrap;
}

.route-rewards {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 8px;
	padding: 4px 2px 8px;
}

/* 數量標籤比圓形圖示寬，左右留空間避免蓋到旁邊的圖示 */
.route-rewards .has-quantity {
	margin: 0 16px;
}

.rocket-grid {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.rocket-card {
	background: #f7fafb;
	border: 1px solid #d8e3e8;
	border-radius: 8px;
	display: grid;
	align-content: start;
	min-width: 0;
	overflow: hidden;
}

/* 背景色預設為灰色，手下則由屬性 class（.fire、.water…）覆寫 */
.rocket-card-header {
	align-items: center;
	background: #4a5560;
	color: #fff;
	display: flex;
	font-size: 14px;
	font-weight: 700;
	gap: 8px;
	justify-content: space-between;
	padding: 6px 10px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.rocket-card-header strong {
	font-size: 15px;
}

/* 性別緊接在標題後面，建議屬性靠右 */
.rocket-gender {
	margin-right: auto;
}

.rocket-counters {
	align-items: center;
	display: flex;
	font-size: 12px;
	gap: 4px;
	margin-left: auto;
}

.rocket-counters .types {
	gap: 3px;
}

.rocket-counters .type {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
	font-size: 11px;
	padding: 1px 6px;
	text-shadow: none;
}

.event-grid {
	list-style: none;
	margin: 0;
	padding: 0;
}

.event-banner {
	aspect-ratio: 2 / 1;
	display: block;
	object-fit: cover;
	width: 100%;
}

.event-body {
	display: grid;
	gap: 6px;
	padding: 8px 10px;
}

.event-body > strong {
	font-size: 14px;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.event-body a {
	color: inherit;
	text-decoration: none;
}

.event-body a:hover {
	text-decoration: underline;
}

.event-time,
.event-note {
	color: #5b6b73;
	font-size: 13px;
	margin: 0;
}

.event-pokemon {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.event-pokemon .raid-image {
	height: 40px;
	width: 40px;
}

.event-bonuses {
	color: #5b6b73;
	font-size: 13px;
	margin: 0;
	padding-left: 18px;
}

/* 賽程表：每週一張卡片，標題色依狀態，已結束的變淡 */
.gbl-grid {
	grid-template-columns: 1fr;
}

/* 賽季標題用紫色，跟藍色的「即將開始」週次分開 */
/* 圖鑑：數量色條右側放顯示方式按鈕，沒有結果時不顯示按鈕 */
.pokedex-head.is-count,
.gbl-head.is-count {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	justify-content: space-between;
	padding-bottom: 6px;
	padding-top: 6px;
}

.pokedex-head:not(.is-count) .pokedex-display,
.gbl-head:not(.is-count) .xxl-toggle {
	display: none;
}

.pokedex-display {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pokedex-sort {
	align-items: center;
	display: flex;
	font-size: 13px;
	gap: 6px;
}

.pokedex-sort select {
	border-color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	min-height: 28px;
	padding: 2px 6px;
	width: auto;
}

#pokedex-sort-dir {
	min-width: 28px;
	padding: 2px 6px;
}

.pokedex-display .xxl-toggle,
.gbl-head .xxl-toggle {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	min-height: 28px;
	min-width: 0;
	padding: 2px 10px;
}

.pokedex-display .xxl-toggle:hover,
.gbl-head .xxl-toggle:hover {
	background: rgba(255, 255, 255, 0.35);
	border-color: #fff;
}

/* 賽季：顯示已結束放在紫色標題列右側 */
.gbl-head .xxl-toggle.is-active,
.gbl-head .xxl-toggle.is-active:hover {
	background: #fff;
	border-color: #fff;
	color: #5b2bd6;
}

.pokedex-display .xxl-toggle.is-active,
.pokedex-display .xxl-toggle.is-active:hover {
	background: #fff;
	border-color: #fff;
	color: #2d88b5;
}

/* 遭遇精靈：每個段位一列，精靈排成固定寬度的格子 */
.gbl-rank-row .level-head {
	flex-basis: 64px;
}

.gbl-rank-row .level-label {
	flex-basis: 6.5em;
}

.gbl-encounter-list {
	display: grid;
	flex: 1;
	gap: 6px 4px;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	min-width: 0;
}

@media (max-width: 720px) {
	.gbl-rank-row .level-section {
		align-items: stretch;
		flex-direction: column;
		gap: 2px;
	}

	.gbl-rank-row .level-head,
	.gbl-rank-row .level-label {
		flex-basis: auto;
	}

	/* 段位與結算表只有兩欄，窄螢幕也維持表格，不改成交換表那樣的卡片 */
	.gbl-table .trading-scroll {
		border: 1px solid #d8e3e8;
		overflow-x: auto;
	}

	.gbl-table .trading-table {
		display: table;
	}

	.gbl-table .trading-table thead {
		display: table-header-group;
	}

	.gbl-table .trading-table tbody {
		display: table-row-group;
	}

	.gbl-table .trading-table tr,
	.gbl-table .trading-table tbody tr,
	.gbl-table .trading-table tbody tr:nth-child(even) {
		border: 0;
		border-radius: 0;
		border-top: 1px solid #d8e3e8;
		display: table-row;
	}

	.gbl-table .trading-table tbody tr:nth-child(even) {
		background: #f7fafb;
	}

	.gbl-table .trading-table th,
	.gbl-table .trading-table td {
		display: table-cell;
	}

	.gbl-table .trading-table th[scope="row"] {
		background: transparent;
	}

	.gbl-table .trading-table td::before {
		content: none;
	}
}

/* 隨機道具：圖示、名稱（說明標籤在後）、數量靠右 */
.gbl-item-row {
	align-items: center;
}

.gbl-item-row img {
	flex: none;
	height: 40px;
	object-fit: contain;
	width: 40px;
}

.gbl-item-name {
	align-items: center;
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: 4px 8px;
	min-width: 0;
}

/* 窄螢幕的 .level-row 會改成直排，這裡維持橫排 */
@media (max-width: 720px) {
	.level-row.gbl-item-row {
		flex-direction: row;
	}
}

.raids-status.is-count.gbl-season {
	background: #5b2bd6;
}

.gbl-week.is-ongoing .rocket-card-header {
	background: #2e9e5b;
}

.gbl-week.is-upcoming .rocket-card-header {
	background: #2da5d6;
}

.gbl-week .event-status {
	white-space: nowrap;
}

.gbl-week.is-ended {
	opacity: 0.55;
}

.gbl-leagues {
	list-style: none;
	margin: 0;
	padding: 4px 10px;
}

.gbl-league {
	align-items: flex-start;
	display: flex;
	gap: 10px;
	padding: 8px 0;
}

.gbl-league + .gbl-league {
	border-top: 1px solid #e3eaee;
}

.gbl-league img {
	flex: none;
	height: 32px;
	object-fit: contain;
	width: 32px;
}

.gbl-league-name {
	flex: 1;
	min-width: 0;
}

.gbl-league strong {
	font-size: 14px;
}

/* CP 上限靠右 */
.gbl-cp {
	align-self: center;
	color: #5b6b73;
	flex: none;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.gbl-tags {
	gap: 4px;
	justify-content: flex-start;
	margin-top: 6px;
}

.gbl-tags .type {
	font-size: 11px;
	padding: 2px 8px;
}

.gbl-rule {
	background: #e8ebee;
	border-radius: 999px;
	color: #4a5560;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
}

.gbl-stardust {
	background: #fff8e1;
	border-top: 1px solid #f0e2b0;
	color: #8a6d00;
	font-size: 12px;
	font-weight: 700;
	padding: 6px 10px;
}

.gbl-stardust::before {
	content: "✨ ";
}

/* 兌換碼：每個兌換碼一張卡片，排成一欄，兌換碼本身放大，旁邊是複製與兌換按鈕 */
.redeem-grid {
	grid-template-columns: 1fr;
}

.redeem-card .rocket-card-header {
	background: #2e9e5b;
}

.redeem-card .event-status {
	flex: none;
	white-space: nowrap;
}

.raids-status.is-note a {
	color: inherit;
	font-weight: 700;
}

.redeem-code {
	align-items: center;
	display: flex;
	gap: 6px;
}

.redeem-code code {
	background: #fff;
	border: 1px dashed #9eb2bd;
	border-radius: 6px;
	flex: 1;
	font-size: 15px;
	font-weight: 700;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 6px 8px;
	user-select: all;
}

.redeem-copy,
.redeem-link {
	align-items: center;
	border-radius: 6px;
	display: inline-flex;
	flex: none;
	font-size: 14px;
	font-weight: 700;
	justify-content: center;
	min-height: 36px;
	min-width: 64px;
	padding: 5px 10px;
	width: auto;
}

.redeem-copy.is-copied {
	background: #2e9e5b;
	border-color: #2e9e5b;
}

.redeem-code .redeem-link {
	background: #e0a800;
	border: 1px solid #e0a800;
	color: #fff;
	text-decoration: none;
}

.redeem-code .redeem-link:hover {
	background: #c79500;
	border-color: #c79500;
}

/* 到期日：卡片底部的灰色橫條 */
.redeem-expiry {
	background: #eef2f4;
	border-top: 1px solid #d8e3e8;
	color: #5b6b73;
	font-size: 12px;
	font-weight: 700;
	margin: 0;
	padding: 6px 10px;
}

.redeem-rewards-title {
	font-size: 13px;
	font-weight: 700;
	margin: 4px 0 0;
}

/* 獎勵排成格狀，寬度夠時一列多項 */
.redeem-rewards {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.redeem-rewards li {
	align-items: center;
	display: flex;
	font-size: 13px;
	gap: 10px;
	min-width: 0;
	overflow-wrap: anywhere;
}

.redeem-rewards .research-icon {
	flex: none;
}

.cal-nav {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-bottom: 8px;
}

.cal-nav strong {
	font-size: 16px;
	min-width: 96px;
	text-align: center;
}

.cal-nav .xxl-toggle {
	min-width: 40px;
}

/* 月曆／列表切換開關：一顆按鈕裡併排兩個圖示，目前的顯示方式是綠色，按哪裡都會切換 */
.cal-switch,
.cal-switch:hover {
	background: none;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	overflow: hidden;
	padding: 0;
	width: auto;
}

.cal-switch span {
	align-items: center;
	background: #b8c8d0;
	display: flex;
	justify-content: center;
	padding: 5px 0;
	width: 40px;
}

.cal-switch:hover span {
	background: #9eb2bd;
}

.cal-switch span.is-active,
.cal-switch:hover span.is-active {
	background: #2e9e5b;
}

.cal-long {
	align-items: center;
	color: #5b6b73;
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	gap: 6px;
	margin: 0 0 8px;
}

.cal-chip,
.cal-bar {
	background: var(--category);
	border: 0;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	min-width: 0;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.cal-chip,
.cal-bar,
.cal-day {
	min-height: 0;
}

.cal-chip:hover,
.cal-bar:hover {
	background: var(--category);
	filter: brightness(1.1);
}

.cal-chip {
	border-radius: 999px;
	padding: 3px 10px;
	width: auto;
}

.cal-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	justify-content: center;
	margin-bottom: 8px;
}

.cal-type {
	font-size: 11px;
	padding: 3px 9px;
}

.cal-head .cal-type {
	white-space: nowrap;
}

/* 與篩選按鈕同高，星期那一列才會對齊 */
.cal-note {
	color: #5b6b73;
	font-size: 11px;
	line-height: 1.2;
	padding: 3px 0;
	white-space: nowrap;
}

.cal-type.is-off,
.cal-type.is-off:hover {
	background: #b8c8d0;
	filter: none;
	text-shadow: none;
}

.cal-head,
.cal-week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-head {
	align-items: end;
	color: #5b6b73;
	font-size: 13px;
	font-weight: 700;
	padding-bottom: 4px;
	text-align: center;
}

.cal-head > div {
	display: grid;
	gap: 4px;
	justify-items: center;
	min-width: 0;
}

.cal-week {
	border-left: 1px solid #d8e3e8;
	border-top: 1px solid #d8e3e8;
}

.cal-week:last-of-type {
	border-bottom: 1px solid #d8e3e8;
}

.cal-cell {
	align-content: start;
	background: #fff;
	border-right: 1px solid #d8e3e8;
	cursor: pointer;
	display: grid;
	gap: 2px;
	min-height: 84px;
	min-width: 0;
	padding: 2px 2px 4px;
}

.cal-cell:hover {
	background: #eef5f8;
}

.cal-cell.is-other {
	background: #f3f6f8;
}

.cal-cell.is-picked {
	background: #e4f1f7;
}

.cal-day,
.cal-day:hover {
	background: none;
	border: 0;
	color: #26343b;
	font: inherit;
	font-size: 13px;
	justify-self: end;
	padding: 1px 3px;
	width: auto;
}

.cal-cell.is-other .cal-day {
	color: #9aa8b0;
}

.cal-cell.is-today .cal-day span {
	background: #2d88b5;
	border-radius: 999px;
	color: #fff;
	display: inline-block;
	font-weight: 700;
	min-width: 20px;
	padding: 0 5px;
	text-align: center;
}

.cal-bar {
	align-items: center;
	border-radius: 6px;
	display: flex;
	gap: 3px;
	height: 26px;
	overflow: hidden;
	padding: 0 4px 0 2px;
	white-space: nowrap;
	width: 100%;
}

.cal-bar.is-ended {
	opacity: 0.55;
}

.cal-bar.is-picked,
.cal-chip.is-picked {
	box-shadow: inset 0 0 0 2px #26343b;
}

.cal-bar img {
	flex: none;
	height: 24px;
	object-fit: contain;
	width: 24px;
}

.cal-bar span {
	overflow: hidden;
	text-overflow: ellipsis;
}

.cal-list {
	display: grid;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cal-row.is-ended .cal-row-button {
	opacity: 0.55;
}

.cal-row-button,
.cal-row-button:hover {
	align-items: center;
	background: #f7fafb;
	border: 1px solid #d8e3e8;
	border-left: 6px solid var(--category);
	color: #26343b;
	display: flex;
	font-weight: 400;
	gap: 8px;
	padding: 4px 10px 4px 6px;
	text-align: left;
}

.cal-row.is-ongoing .cal-row-button,
.cal-row-button:hover,
.cal-row-button.is-picked {
	background: #e4f1f7;
}

.cal-row-icons {
	display: flex;
	flex: none;
}

.cal-row-icons img {
	height: 36px;
	object-fit: contain;
	width: 36px;
}

.cal-row-text {
	display: grid;
	flex: 1;
	min-width: 0;
}

.cal-row-text strong {
	font-size: 14px;
	overflow-wrap: anywhere;
}

.cal-row small {
	color: #5b6b73;
	font-size: 12px;
}

.cal-row-type {
	color: var(--category);
	display: grid;
	flex: none;
	font-size: 12px;
	font-weight: 700;
	text-align: right;
}

.cal-row-card {
	margin: 4px 0 8px;
	max-width: 420px;
}

/* 與活動頁「進行中」的標題列同色 */
.cal-detail-title {
	background: #0f766e;
	border-radius: 8px;
	color: #fff;
	font-size: 16px;
	margin: 0;
	padding: 8px 14px;
}

.cal-detail {
	display: grid;
	gap: 8px;
	margin-top: 12px;
}

.rocket-slot {
	align-items: center;
	display: flex;
	gap: 8px;
	padding: 8px 10px;
}

.rocket-slot + .rocket-slot {
	border-top: 1px solid #d8e3e8;
}

.rocket-ball {
	height: 18px;
	left: -4px;
	top: 0;
	position: absolute;
	width: 18px;
}

.rocket-slot-label {
	color: #5b6b73;
	flex: 0 0 3.2em;
	font-size: 12px;
	font-weight: 700;
}

.rocket-pokemon-list {
	display: grid;
	flex: 1;
	gap: 4px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rocket-pokemon {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	text-align: center;
}

/* 頭目與幹部：屬性、圖片、名稱三列與同一格的其他寶可夢共用高度，屬性換行時仍然對齊 */
.rocket-pokemon.has-types {
	display: grid;
	grid-row: span 3;
	grid-template-rows: subgrid;
	justify-items: center;
}

.rocket-pokemon > .raid-types {
	gap: 2px;
	justify-content: flex-start;
	justify-self: start;
	min-height: 16px;
}

.rocket-pokemon > .raid-types .type {
	font-size: 10px;
	padding: 1px 5px;
}

.rocket-pokemon-name {
	font-size: 12px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.level-list {
	border: 1px solid #d8e3e8;
	border-radius: 8px;
	list-style: none;
	margin: 6px 0 0;
	overflow: hidden;
	padding: 0;
}

.level-row {
	display: flex;
	gap: 12px;
	padding: 8px 10px;
}

.level-row:nth-child(even) {
	background: #f7fafb;
}

.level-row.is-high {
	background: #fff6cc;
}

.level-row.is-high:nth-child(even) {
	background: #ffe680;
}

.level-row + .level-row {
	border-top: 1px solid #d8e3e8;
}

.level-head {
	color: #5b6b73;
	display: grid;
	align-content: start;
	flex: 0 0 132px;
	font-size: 12px;
	font-weight: 700;
	gap: 2px;
}

.level-head strong {
	color: #172026;
	font-size: 15px;
}

.item-image {
	height: 48px;
	object-fit: contain;
	width: 48px;
}

.level-body {
	display: grid;
	flex: 1;
	gap: 6px;
	min-width: 0;
}

.level-section {
	align-items: start;
	display: flex;
	gap: 8px;
}

.level-label {
	color: #5b6b73;
	flex: 0 0 4.2em;
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
}

/* 數量標籤會超出圖示下緣，預留空間 */
.level-section .research-icons {
	justify-content: flex-start;
	padding-bottom: 6px;
}

/* 時時刻刻：標籤與獎勵圖示垂直置中（圖示下方預留了 6px 給數量標籤，標籤同樣預留） */
.adventure-row .level-section {
	align-items: center;
}

.adventure-row .level-label,
.adventure-row .adventure-none {
	padding-bottom: 6px;
}

/* 時時刻刻：較長距離另含的較短距離獎勵、沒有隨機獎勵時的說明 */
.adventure-include,
.adventure-none {
	align-self: center;
	color: #5b6b73;
	font-size: 13px;
	font-weight: 700;
}

.adventure-include {
	background: #e8f1f5;
	border-radius: 10px;
	padding: 2px 8px;
}

.adventure-none {
	line-height: 20px;
}

.friend-progress {
	display: grid;
	gap: 5px;
	justify-items: start;
}

.friend-head img {
	height: auto;
	margin-top: 4px;
	max-width: 120px;
}

.friend-condition {
	font-size: 13px;
	line-height: 20px;
}

.friend-rewards {
	list-style: disc;
	padding-left: 1.2em;
}

/* 亮晶晶交換：說明文字下方接年齡機率表或歷史額度表 */
.lucky-content {
	display: grid;
	flex: 1;
	gap: 6px;
	min-width: 0;
}

.lucky-content .level-tasks {
	font-weight: 400;
}

/* 社群大使：連結以各網站顏色的圓形圖示顯示 */
.ambassador-group {
	background: var(--category-tint);
	border: 2px solid var(--category);
	border-radius: 10px;
	margin-top: 18px;
	overflow: hidden;
}

.ambassador-group h2 {
	background: var(--category);
	color: #fff;
	font-size: 17px;
	margin: 0;
	padding: 8px 14px;
}

.ambassador-body {
	display: grid;
	gap: 10px;
	padding: 12px 14px 14px;
}

.ambassador-body .level-label {
	margin-bottom: -4px;
}

.ambassador-names {
	display: grid;
	font-size: 14px;
	gap: 8px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.ambassador-names li {
	background: #fff;
	border: 1px solid var(--category, #d8e3e8);
	border-radius: 6px;
	font-weight: 700;
	overflow-wrap: anywhere;
	padding: 8px 6px;
	text-align: center;
}

.ambassador-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ambassador-link {
	align-items: center;
	background: var(--site, #5b6b75);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	height: 34px;
	justify-content: center;
	transition: transform 0.15s, filter 0.15s;
	width: 34px;
}

.ambassador-link:hover,
.ambassador-link:focus-visible {
	filter: brightness(1.12);
	transform: translateY(-1px);
}

.ambassador-link svg {
	fill: none;
	height: 18px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 18px;
}

.ambassador-link.is-instagram {
	background: linear-gradient(45deg, #f9a03f, #e1306c 50%, #833ab4);
}

.ambassador-link.is-threads {
	--site: #101010;
}

.ambassador-link.is-youtube {
	--site: #e62117;
}

.ambassador-link.is-facebook {
	--site: #1877f2;
}

/* Youtuber：每個頻道一張可點的卡片 */
.youtuber-grid {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.youtuber-card {
	color: inherit;
	height: 100%;
	padding: 12px 6px;
	text-decoration: none;
	transition: border-color 0.15s, transform 0.15s;
}

.youtuber-card:hover,
.youtuber-card:focus-visible {
	border-color: #e62117;
	transform: translateY(-1px);
}

.youtuber-avatar {
	background: #e5ecef;
	border-radius: 50%;
	height: 72px;
	object-fit: cover;
	width: 72px;
}

.youtuber-handle {
	color: #5b6b75;
	font-size: 12px;
	overflow-wrap: anywhere;
}

.youtuber-button {
	align-items: center;
	background: #e62117;
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	gap: 4px;
	margin-top: auto;
	padding: 3px 10px;
}

.youtuber-button svg {
	fill: none;
	height: 14px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 14px;
}

.lucky-content .trading-scroll {
	margin-top: 0;
}

.trading-table.lucky-table {
	font-size: 13px;
}

.level-list + .trading-scroll {
	margin-top: 10px;
}

.gym-note {
	color: #5b6b73;
	font-size: 13px;
	margin: 6px 0 0;
}

.friend-notes {
	color: #5b6b73;
	font-weight: 400;
	list-style: circle;
	margin: 0;
	padding-left: 1.2em;
}

/* 夥伴心情：由低到高一排卡片 */
.buddy-moods {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}

.buddy-mood {
	align-items: center;
	background: #fff;
	border: 1px solid #d8e3e8;
	border-radius: 8px;
	color: #5b6b73;
	display: grid;
	font-size: 12px;
	font-weight: 700;
	gap: 2px;
	justify-items: center;
	padding: 8px 4px;
}

.buddy-mood img {
	height: 40px;
	width: 40px;
}

.buddy-mood strong {
	color: #172026;
	font-size: 14px;
}

.buddy-souvenirs {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}

.buddy-souvenir {
	align-items: center;
	background: #fff;
	border: 1px solid #d8e3e8;
	border-radius: 8px;
	display: flex;
	gap: 10px;
	padding: 8px 10px;
}

.buddy-souvenir img {
	flex: none;
	height: 56px;
	width: 56px;
}

.buddy-souvenir span {
	display: grid;
	gap: 2px;
}

.buddy-souvenir strong {
	color: #172026;
	font-size: 14px;
}

.buddy-souvenir small {
	color: #5b6b73;
	font-size: 12px;
	line-height: 1.4;
}

/* 心情點數表最後一列：沒有互動會扣點，整列紅字 */
.is-penalty .level-head strong,
.is-penalty .buddy-interactions,
.is-penalty .buddy-points {
	color: #c62828;
}

.buddy-interactions {
	display: grid;
	font-size: 13px;
	font-weight: 700;
	gap: 8px;
	line-height: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.buddy-interactions li {
	display: flex;
	gap: 12px;
	justify-content: space-between;
}

.buddy-battles {
	font-weight: 400;
	list-style: disc;
	margin: 2px 0 0;
	padding-left: 1.2em;
}

.level-body.buddy-shared {
	align-items: center;
	display: flex;
	gap: 12px;
}

.buddy-shared .buddy-interactions {
	flex: 1;
}

.buddy-shared > .buddy-points {
	font-size: 13px;
	font-weight: 700;
}

.buddy-item-note {
	color: #5b6b73;
	display: block;
	font-size: 12px;
	line-height: 18px;
}

.buddy-points {
	color: #5b6b73;
	flex: none;
	font-variant-numeric: tabular-nums;
}

.trading-scroll {
	border: 1px solid #d8e3e8;
	border-radius: 8px;
	margin-top: 6px;
	overflow-x: auto;
}

.trading-table {
	border-collapse: collapse;
	font-size: 14px;
	width: 100%;
}

.trading-table th,
.trading-table td {
	padding: 8px 10px;
	text-align: right;
	white-space: nowrap;
}

.trading-table th[scope="row"],
.trading-table thead th:first-child {
	text-align: left;
}

.trading-table thead th {
	background: #eef3f5;
	color: #5b6b73;
	font-size: 12px;
}

.trading-table tbody tr:nth-child(even) {
	background: #f7fafb;
}

.trading-table tbody tr + tr,
.trading-table tbody tr:first-child {
	border-top: 1px solid #d8e3e8;
}

.trading-table td {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.trading-table td.is-span {
	text-align: center;
}

/* mergeHeads 合併的第一格：寬螢幕以 rowspan 顯示一次，被合併列的重複格隱藏 */
.trading-table th.is-rowspan {
	background: #fff;
	border-right: 1px solid #d8e3e8;
	vertical-align: middle;
}

.trading-table th.is-merged {
	display: none;
}

/* 訓練對戰：勝負圖示，圓形底色內畫勾或叉 */
.battle-result {
	align-items: center;
	display: inline-flex;
	gap: 6px;
}

.battle-result svg {
	border-radius: 50%;
	fill: none;
	height: 18px;
	stroke: #fff;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.2;
	width: 18px;
}

.battle-result.is-win {
	color: #1f8a4c;
}

.battle-result.is-win svg {
	background: #27ae60;
}

.battle-result.is-loss {
	color: #c0392b;
}

.battle-result.is-loss svg {
	background: #e74c3c;
}

.medal-row {
	align-items: center;
}

/* 冒險效果頁：沿用交換的表格，文字靠左並可換行，說明欄最寬 */
.effect-table th,
.effect-table td {
	text-align: left;
	vertical-align: top;
}

.effect-table td {
	font-weight: 400;
}

.effect-table td strong {
	font-weight: 700;
}

.effect-pokemon {
	align-items: center;
	display: flex;
	gap: 8px;
}

.effect-pokemon img {
	flex: none;
	object-fit: contain;
}

.effect-pokemon .types {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: flex-start;
	margin-top: 4px;
}

.effect-costs {
	display: grid;
	gap: 2px;
}

.effect-table td.effect-description {
	min-width: 260px;
	white-space: normal;
}

.effect-description p {
	margin: 0;
}

.effect-levels {
	display: grid;
	gap: 4px;
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.effect-levels li {
	align-items: center;
	display: flex;
	gap: 8px;
}

.effect-level {
	background: #eef3f5;
	border-radius: 999px;
	color: #5b6b73;
	flex: none;
	font-size: 12px;
	padding: 2px 8px;
}

.effect-level-pokemon {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
}

.effect-level-pokemon span {
	align-items: center;
	display: inline-flex;
	font-size: 13px;
	gap: 2px;
}

/* 機率頁：左側為適用情況（每項一行）與小字說明，右側為機率；窄螢幕也維持左右排列 */
.probability-row {
	align-items: center;
}

.probability-cases {
	color: #5b6b73;
	display: grid;
	flex: 1;
	font-size: 12px;
	gap: 2px;
	min-width: 0;
}

.probability-cases strong {
	color: #172026;
	font-size: 14px;
}

.probability-cases strong + span {
	margin-top: 2px;
}

/* IV 保底欄與機率欄都固定寬度，讓各列與表頭對齊 */
.probability-floor {
	color: #172026;
	flex: 0 0 84px;
	font-size: 14px;
	text-align: center;
	white-space: nowrap;
}

/* 捕捉率計算：輸入欄位排成格狀，標籤在上 */
.capture-form {
	display: grid;
	gap: 8px 12px;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	margin-top: 6px;
}

.capture-form label {
	color: #5b6b73;
	display: grid;
	font-size: 12px;
	font-weight: 700;
	gap: 4px;
}

.capture-form input,
.capture-form select {
	min-width: 0;
	width: 100%;
}

/* 搜尋字串：標題列的語言與結合方式選單、右下角的浮動結果框 */
.searchtext-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.searchtext-head span {
	flex: 1;
}

.searchtext-head select {
	color: #1f2d33;
	flex: none;
	font-size: 14px;
	font-weight: 700;
	min-height: 30px;
	padding: 2px 8px;
	width: auto;
}

.searchtext-popup {
	background: #fff;
	border: 1px solid #dbe5ea;
	border-radius: 10px;
	bottom: 16px;
	box-shadow: 0 6px 24px rgba(20, 50, 70, 0.25);
	box-sizing: border-box;
	max-height: min(40vh, 420px);
	overflow-y: auto;
	padding: 10px 12px 12px;
	position: fixed;
	right: 16px;
	width: min(380px, calc(100vw - 32px));
	z-index: 20;
}

.searchtext-popup[hidden] {
	display: none;
}

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

.searchtext-popup-head strong {
	color: #2da5d6;
	font-size: 15px;
}

.searchtext-popup .searchtext-clear {
	background: #fae5e2;
	border-color: #c0392b;
	color: #c0392b;
	font-size: 13px;
	min-height: 28px;
	padding: 2px 10px;
	width: auto;
}

.searchtext-popup .searchtext-clear:hover {
	background: #c0392b;
	color: #fff;
}

.searchtext-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.searchtext-term {
	display: flex;
}

.searchtext-term button {
	background: #2d88b5;
	border-color: #2d88b5;
	font-size: 13px;
	min-height: 28px;
	padding: 2px 9px;
	width: auto;
}

.searchtext-term .searchtext-term-text {
	border-radius: 999px 0 0 999px;
}

.searchtext-term .searchtext-term-remove {
	border-left-color: rgba(255, 255, 255, 0.4);
	border-radius: 0 999px 999px 0;
	padding: 2px 8px 2px 6px;
}

.searchtext-term.is-exclude button {
	background: #c0392b;
	border-color: #c0392b;
}

.searchtext-term button:hover {
	filter: brightness(0.9);
}

.searchtext-output:not(:empty) {
	align-items: center;
	background: #f4f8fa;
	border: 1px solid #dbe5ea;
	border-radius: 8px;
	display: flex;
	gap: 10px;
	padding: 6px 8px 6px 12px;
}

.searchtext-output code {
	flex: 1;
	font-size: 15px;
	font-weight: 700;
	min-width: 0;
	overflow-wrap: anywhere;
	user-select: all;
}

/* 加入條件的小表單：標籤在上，欄位與加入按鈕排成一列 */
.searchtext-adds {
	display: grid;
	gap: 10px 12px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	margin-top: 6px;
}

.searchtext-add {
	align-content: start;
	display: grid;
	gap: 4px;
}

.searchtext-add > label {
	color: #5b6b73;
	font-size: 12px;
	font-weight: 700;
}

.searchtext-add-row {
	display: flex;
	gap: 6px;
}

.searchtext-add-row input,
.searchtext-add-row select {
	flex: 1;
	min-width: 0;
}

.searchtext-add-row button {
	flex: none;
	width: auto;
}

.searchtext-add .searchtext-check {
	align-items: center;
	display: flex;
	font-weight: 400;
	gap: 6px;
}

.searchtext-check input {
	min-height: 0;
	width: auto;
}

.searchtext-error {
	color: #c0392b;
	font-size: 13px;
	margin: 6px 0 0;
}

.searchtext-error:empty {
	display: none;
}

.searchtext-group-title {
	color: var(--category);
	font-size: 14px;
	margin: 14px 0 6px;
}

.searchtext-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* 條件按鈕：沒選為淡色底、包含為實心、排除為紅色 */
.searchtext-chip {
	background: #e4f1f7;
	border-color: #2d88b5;
	border-radius: 999px;
	color: #2d88b5;
	font-size: 13px;
	min-height: 30px;
	padding: 3px 12px;
	width: auto;
}

.searchtext-chip:hover {
	background: #d3e8f2;
}

.searchtext-chip.is-include,
.searchtext-chip.is-include:hover {
	background: #2d88b5;
	color: #fff;
}

.searchtext-chip.is-exclude,
.searchtext-chip.is-exclude:hover {
	background: #c0392b;
	border-color: #c0392b;
	color: #fff;
}

/* 屬性按鈕用屬性色，沒選時變淡 */
.searchtext-chip.type,
.searchtext-chip.type:hover {
	background: var(--type);
	border-color: var(--type);
	color: #fff;
}

.searchtext-chip.type:not(.is-include):not(.is-exclude) {
	opacity: 0.55;
}

.searchtext-chip.type:not(.is-include):not(.is-exclude):hover {
	opacity: 0.75;
}

.searchtext-chip.type.is-exclude {
	box-shadow: 0 0 0 2px #c0392b;
}

/* 手機快捷輸入說明：iOS 與 Android 兩欄，窄螢幕一欄 */
.searchtext-shortcut-intro {
	color: #5b6b73;
	font-size: 14px;
	margin: 8px 0 0;
}

.searchtext-shortcut {
	display: grid;
	gap: 0 16px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.searchtext-shortcut ol {
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
	padding-left: 22px;
}

.searchtext-convert-label {
	color: #5b6b73;
	display: block;
	font-size: 12px;
	font-weight: 700;
	margin: 6px 0 4px;
}

#searchtext-convert textarea {
	border: 1px solid #b8c8d0;
	border-radius: 6px;
	box-sizing: border-box;
	font: inherit;
	margin-bottom: 8px;
	padding: 6px 10px;
	resize: vertical;
	width: 100%;
}

.capture-note {
	color: #5b6b73;
	font-size: 12px;
	line-height: 1.6;
	margin: 8px 0 0;
}

/* 表頭：與交換表格的表頭同樣式 */
.probability-header {
	background: #eef3f5;
	color: #5b6b73;
	font-size: 12px;
	font-weight: 700;
	padding-bottom: 6px;
	padding-top: 6px;
}

.probability-header > span {
	color: inherit;
	font-size: inherit;
}

.probability-rows {
	border-top: 1px solid #d8e3e8;
	list-style: none;
	margin: 0;
	padding: 0;
}

.probability-chance {
	color: #5b6b73;
	display: grid;
	flex: 0 0 72px;
	font-size: 12px;
	font-weight: 700;
	gap: 2px;
	justify-items: end;
	text-align: right;
}

.probability-chance strong {
	color: #172026;
	font-size: 15px;
	white-space: nowrap;
}

.medal-head {
	align-items: center;
	display: flex;
	flex: 1;
	gap: 10px;
	min-width: 0;
}

.medal-head img {
	flex: none;
	height: 48px;
	object-fit: contain;
	width: 48px;
}

.medal-head div {
	display: grid;
	gap: 2px;
}

.medal-head strong {
	font-size: 15px;
}

.medal-head span {
	color: #5b6b73;
	font-size: 13px;
}

.medal-tiers {
	display: grid;
	flex: none;
	gap: 6px;
	grid-template-columns: repeat(4, 56px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.medal-tier {
	align-items: center;
	display: grid;
	font-size: 12px;
	font-weight: 700;
	justify-items: center;
}

.medal-tier img {
	height: 40px;
	object-fit: contain;
	width: 40px;
}

.medal-tier span {
	border-radius: 999px;
	padding: 0 6px;
}

.medal-tier.is-bronze span {
	background: #f1dcc8;
	color: #7a4a1f;
}

.medal-tier.is-silver span {
	background: #e3e8ec;
	color: #4a5660;
}

.medal-tier.is-gold span {
	background: #fbe7a1;
	color: #7a5c00;
}

.medal-tier.is-platinum span {
	background: #dfe7f5;
	color: #34507a;
}

.level-tasks,
.level-unlocks {
	font-size: 13px;
	font-weight: 700;
	list-style: none;
	margin: 0;
	padding: 0;
}

.level-tasks {
	display: grid;
	gap: 2px;
	line-height: 20px;
}

.level-unlocks {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
}

.level-unlocks li {
	align-items: center;
	display: flex;
	gap: 4px;
}

.level-unlocks img {
	flex: none;
	height: 20px;
	object-fit: contain;
	width: 20px;
}

.evolution-section {
	margin-top: 14px;
}

.evolution-section h2 {
	background: var(--category);
	border-radius: 8px;
	color: #fff;
	margin: 0 0 6px;
	padding: 8px 14px;
}

/* 團體戰頁底部的注意事項：標題列即 <summary>，預設收合，點擊展開 */
.raid-notice-title {
	border-bottom: 2px solid #d5dde2;
	color: #2c3a42;
	font-size: 18px;
	margin: 24px 0 0;
	padding-bottom: 6px;
}

/* 特定形態的名稱較長：桌面版加寬左欄，讓名稱排在同一行 */
@media (min-width: 721px) {
	.raid-form-list .level-head {
		flex-basis: 180px;
	}

	.raid-form-list .level-head strong {
		white-space: nowrap;
	}
}

.raid-notice > summary {
	cursor: pointer;
	list-style: none;
}

.raid-notice > summary::-webkit-details-marker {
	display: none;
}

.raid-notice > summary h2 {
	align-items: center;
	display: flex;
	gap: 8px;
}

.raid-notice > summary h2::before {
	content: "▸";
	transition: transform 0.15s;
}

.raid-notice[open] > summary h2::before {
	transform: rotate(90deg);
}

.raid-notice:not([open]) > summary h2 {
	margin-bottom: 0;
}

/* 極巨化頁表格的小標題：主標題列的縮小版，顏色較淡、與主標題同寬 */
.dynamax-subtitle {
	background: color-mix(in srgb, var(--category) 70%, #fff);
	border-radius: 6px;
	color: #fff;
	font-size: 14px;
	margin: 12px 0 6px;
	padding: 5px 12px;
}

.evolution-title {
	background: var(--category-tint);
	border-left: 4px solid var(--category);
	border-radius: 6px;
	color: var(--category);
	font-size: 14px;
	margin: 10px 0 0;
	padding: 5px 10px;
}

.evolution-note {
	margin: 6px 0;
	padding: 0 10px;
}

.evolution-row {
	align-items: center;
}

.evolution-from,
.evolution-to {
	align-items: flex-start;
	display: flex;
	flex: 0 0 168px;
	gap: 4px;
	justify-content: center;
}

.evolution-from {
	align-items: center;
	flex-basis: 84px;
	flex-direction: column;
}

.evolution-from .rocket-pokemon,
.evolution-to .rocket-pokemon {
	flex: 0 1 80px;
}

.evolution-form {
	background: #e3ecf0;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	padding: 1px 8px;
}

.evolution-condition {
	display: grid;
	flex: 1;
	font-size: 14px;
	font-weight: 700;
	gap: 2px;
	min-width: 0;
	text-align: center;
}

/* 箭頭獨立一行、橫跨整個條件欄：一條線加右端的箭頭 */
.evolution-condition::after {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M0 0l8 5-8 5z' fill='%235b6b73'/%3E%3C/svg%3E") right center / 8px 10px no-repeat,
		linear-gradient(#5b6b73, #5b6b73) left center / calc(100% - 6px) 2px no-repeat;
	content: "";
	height: 10px;
	margin-top: 2px;
}

.evolution-row.is-none .evolution-condition::after {
	content: none;
}

.evolution-condition small,
.evolution-none {
	color: #5b6b73;
	font-size: 12px;
	font-weight: 400;
}

/* 桌面版兩欄：底色改為每兩列（四格）交替，格線改由各格自己畫 */
@media (min-width: 721px) {
	.evolution-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.evolution-row:nth-child(n) {
		background: #fff;
		border-top: 0;
	}

	.evolution-row:nth-child(4n + 3),
	.evolution-row:nth-child(4n + 4) {
		background: #f7fafb;
	}

	.evolution-row:nth-child(n + 3) {
		border-top: 1px solid #d8e3e8;
	}

	.evolution-row:nth-child(odd) {
		border-right: 1px solid #d8e3e8;
	}

	.evolution-row {
		gap: 8px;
	}

	.evolution-from {
		flex-basis: 76px;
	}

	.evolution-to {
		flex: 0 0 auto;
		min-width: 76px;
	}

	.evolution-to .rocket-pokemon {
		flex: 0 0 72px;
	}

	.evolution-condition {
		font-size: 13px;
	}
}

.raid-grid {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.raid-card {
	align-items: center;
	background: #f7fafb;
	border: 1px solid #d8e3e8;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 8px 4px;
	position: relative;
	text-align: center;
}

.raid-card > strong {
	font-size: 14px;
	overflow-wrap: anywhere;
}

.raid-card .types {
	gap: 4px;
	justify-content: center;
}

.raid-card .type {
	font-size: 11px;
	padding: 3px 8px;
}

.raid-card > .raid-types {
	align-self: flex-start;
	justify-content: flex-start;
	min-height: 18px;
	padding-right: 18px;
}

.raid-card > .raid-types .type {
	padding: 2px 6px;
}

/* 團體戰卡片：屬性、圖片、名稱、CP 四列與同一排的卡片共用高度，屬性或天氣換行時仍然對齊 */
.raid-boss {
	display: grid;
	grid-row: span 4;
	grid-template-rows: subgrid;
	justify-items: center;
}

.raid-boss > .raid-types {
	justify-self: start;
}

.raid-boss > .raid-cp {
	align-self: end;
}

.region-grid {
	/* 換列後留下的空格由後面的卡片補上 */
	grid-auto-flow: dense;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* 地區限定：每個樣子一張卡片，同一隻寶可夢的樣子包在 .region-group 裡，佔相連的幾格、永遠排在同一列。
   欄和列都沿用外層格線（subgrid），所以每張卡片還是各佔一格，屬性與樣子、圖片、名稱、地區四列
   也和同一排的其他卡片對齊。一組不會比外層的欄數多：renderRegions 先量欄數，超過的拆成幾組 */
/* 量欄數用的空格線，不佔高度 */
.region-probe {
	height: 0;
	visibility: hidden;
}

.region-group {
	display: grid;
	gap: inherit;
	grid-column: span var(--forms, 1);
	grid-row: span 4;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
	min-width: 0;
}

.region-form {
	align-content: start;
	align-items: start;
	display: grid;
	grid-row: span 4;
	grid-template-rows: subgrid;
	justify-items: center;
}

/* 一張卡片的最上面一列：屬性貼在左上角（和團體戰卡片一樣），樣子貼在右上角；放不下時樣子換到下一行 */
.region-top {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: space-between;
	min-height: 18px;
	width: 100%;
}

.region-top .types {
	justify-content: flex-start;
}

.region-top .type {
	padding: 2px 6px;
}

.region-top .evolution-form {
	margin-left: auto;
}

/* 圖鑑編號：貼在卡片左上角的標籤 */
.pokedex-dex {
	background: #e3ecf0;
	border-radius: 7px 0 8px;
	color: #40525b;
	font-size: 11px;
	font-weight: 700;
	left: 0;
	line-height: 1;
	padding: 4px 7px;
	position: absolute;
	top: 0;
}

/* 屬性靠右、在最高 CP 標籤下面，左邊讓出夥伴距離標籤的寬度；放不下時換行 */
.raid-card > .pokedex-types {
	align-content: flex-start;
	align-items: flex-start;
	align-self: stretch;
	gap: 3px;
	justify-content: flex-end;
	margin-top: -4px;
	/* 留出編號與夥伴距離兩個標籤的高度，圖片才不會被蓋到 */
	min-height: 36px;
	padding-left: 44px;
	/* 屬性排在右上角的最高 CP 標籤下面，與夥伴距離同高 */
	padding-top: 17px;
}

/* 超極巨化精靈卡片沒有夥伴距離與最高 CP 標籤，屬性直接靠右上角，只讓出編號標籤 */
.raid-card > .pokedex-types.gmax-types {
	min-height: 18px;
	padding-left: 52px;
	padding-top: 0;
}

.raid-card > .pokedex-types .type {
	flex: none;
	padding: 2px 6px;
}

/* 超級進化精靈卡片：名稱下方的超級等級圖示，白色圖放在粉紅圓底上（有 Plus 招式的 4 個，其餘 3 個） */
.mega-levels {
	display: flex;
	gap: 3px;
	justify-content: center;
}

.mega-level {
	align-items: center;
	background: #e8559a;
	border-radius: 50%;
	display: inline-flex;
	height: 22px;
	justify-content: center;
	width: 22px;
}

.mega-level img {
	display: block;
}

.pokedex-card > strong small {
	display: block;
	font-size: 11px;
	font-weight: 400;
}

/* 夥伴距離（公里）：貼在編號標籤下方的標籤 */
.pokedex-buddy {
	background: #e3ecf0;
	border-radius: 0 8px 8px 0;
	color: #40525b;
	font-size: 11px;
	font-weight: 700;
	left: 0;
	line-height: 1;
	padding: 3px 7px;
	position: absolute;
	top: 21px;
}

/* 最高 CP（IV 100%、50 級）：右上角的標籤，與左上角的編號標籤左右對稱 */
.pokedex-cp {
	background: #e3ecf0;
	border-radius: 0 7px 0 8px;
	color: #40525b;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 4px 7px;
	position: absolute;
	right: 0;
	top: 0;
}

.pokedex-stats {
	display: grid;
	gap: 4px;
	grid-template-columns: auto repeat(3, minmax(0, 1fr));
	margin: auto 0 0;
	width: 100%;
}

.pokedex-stats dt {
	color: #5b6b73;
	font-size: 10px;
	line-height: 14px;
}

.pokedex-stats dd {
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	margin: 0;
}

/* 50 級、IV 100% 的能力值：種族值下一行，較小的藍字 */
.pokedex-stats .pokedex-max {
	color: #2d88b5;
	font-size: 12px;
	line-height: 16px;
}

/* 左側欄標示兩行是種族值與最高能力值 */
.pokedex-stats-labels dt {
	height: 14px;
}

.pokedex-stats-labels dd {
	color: #5b6b73;
	font-size: 10px;
	font-weight: 400;
	text-align: left;
}

.pokedex-stats-labels dd.pokedex-max {
	font-size: 10px;
}

/* 屬性下拉選單：按鈕與選項都用屬性色（--type 來自 .fire、.water… class），全部為白底 */
.type-filter {
	align-items: center;
	display: flex;
	gap: 8px;
}

.type-menu-label {
	color: #5b6b73;
	font-size: 13px;
	font-weight: 700;
}

.type-menu-button,
.type-menu-button:hover,
.type-menu-item,
.type-menu-item:hover {
	background: var(--type, #4a5560);
	border-color: var(--type, #4a5560);
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.type-menu[data-type=""] .type-menu-button,
.type-menu .type-menu-item[data-type=""] {
	background: #fff;
	border-color: #b8c8d0;
	color: #172026;
	text-shadow: none;
}

.type-menu-button {
	align-items: center;
	display: inline-flex;
	justify-content: space-between;
	min-width: 112px;
	width: auto;
}

.type-menu-list {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(3, minmax(76px, 1fr));
	left: 0;
	min-width: 0;
	padding: 8px;
	right: auto;
}

.type-menu-item:hover,
.type-menu-item:focus-visible {
	filter: brightness(0.92);
}

.type-menu-item.is-selected {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #172026;
}

.type-chart-block {
	display: grid;
	gap: 6px;
	padding: 8px 10px;
}

.type-chart-block + .type-chart-block {
	border-top: 1px solid #d8e3e8;
}

.type-chart-block h3 {
	color: #33434b;
	font-size: 14px;
	margin: 0;
}

.type-chart-row {
	align-items: flex-start;
	display: flex;
	gap: 8px;
}

.type-chart-label {
	color: #5b6b73;
	flex: 0 0 4.6em;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
}

.type-chart-label small {
	display: block;
	font-size: 11px;
	font-weight: 400;
}

.type-chart-row .types {
	flex: 1;
	gap: 4px;
	justify-content: flex-start;
}

.type-chart-row .type {
	font-size: 11px;
	padding: 3px 8px;
}

.type-chart-none {
	color: #8a979d;
	font-size: 12px;
}

.region-locations {
	border-top: 1px solid #d8e3e8;
	color: #33434b;
	font-size: 12px;
	line-height: 1.4;
	margin: 0;
	overflow-wrap: anywhere;
	padding: 6px 4px 0;
	width: 100%;
}

.raid-thumb {
	display: flex;
	position: relative;
}

.raid-image {
	height: 56px;
	object-fit: contain;
	width: 56px;
}

.raid-thumb .ranking-shadow-icon {
	bottom: 0;
	filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
	height: 20px;
	left: 0;
	margin: 0;
	position: absolute;
	width: 20px;
}

.raid-shiny {
	font-size: 14px;
	line-height: 1;
	position: absolute;
	right: -4px;
	top: 0;
}

.raid-card > .raid-shiny {
	right: 5px;
	top: 5px;
}

.raid-cp {
	display: grid;
	gap: 4px;
	margin: auto 0 0;
	width: 100%;
}

.raid-cp-pair {
	align-items: flex-end;
	display: flex;
	padding: 0 4px;
}

.raid-cp-pair > div:first-child {
	text-align: left;
}

.raid-cp-pair > div:last-child {
	/* 靠右對齊的 flex 直欄：天氣名稱比這一欄寬時往左伸到「CP」那一列，不換行 */
	align-items: flex-end;
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	text-align: right;
}

.raid-cp-pair > div:last-child dt {
	white-space: nowrap;
}

.egg-cp {
	align-self: flex-start;
	margin: 0;
	padding: 0 22px 0 4px;
	width: auto;
}

.egg-cp > div {
	align-items: baseline;
	display: flex;
	gap: 4px;
}

.raid-cp dt {
	color: #5b6b73;
	font-size: 11px;
	font-weight: 700;
}

.raid-cp dd {
	font-size: 13px;
	font-weight: 700;
	margin: 0;
}

.raid-cp small {
	color: #5b6b73;
	display: block;
	font-size: 11px;
	font-weight: 400;
}

.type {
	border-radius: 999px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	text-transform: uppercase;
}

.stat-row {
	margin: 10px 0;
}

.stat-row > div:first-child {
	align-items: baseline;
	display: flex;
	justify-content: space-between;
	margin-bottom: 5px;
}

.stat-row strong {
	font-size: 18px;
}

.stat-max {
	color: #5b6b73;
	font-size: 13px;
	white-space: pre;
}

.bar {
	background: #dfe8ec;
	border-radius: 999px;
	height: 6px;
	overflow: hidden;
}

/* 選秀會只顯示圖片、名稱和屬性，不顯示數值 */
.calculator.is-showcase .stats-rows {
	display: none;
}

.calculator.is-showcase .stats {
	flex-direction: column;
	justify-content: center;
}

.calculator.is-showcase .stats-pokemon {
	flex: none;
	width: 120px;
}

/* 選秀會的規則說明放在圖片下面，只在選秀會顯示 */
.calculator:not(.is-showcase) .showcase-rules {
	display: none;
}

.stats > .showcase-rules {
	align-self: stretch;
	margin: 0;
}

.bar span {
	background: #2d88b5;
	display: block;
	height: 100%;
	width: 0;
}

.status {
	color: #5b6b73;
	font-size: 14px;
	text-align: center;
}

.data-source {
	color: #5b6b73;
	font-size: 13px;
	text-align: center;
}

.data-source a {
	color: inherit;
}

.site-footer {
	margin-top: 24px;
	padding-top: 12px;
	border-top: 1px solid #dde3e6;
	color: #5b6b73;
	font-size: 12px;
	text-align: center;
}

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

.site-footer-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin-top: 8px !important;
}

.site-footer-links a {
	color: inherit;
}

.normal { --type: #AAB09F; background: var(--type); }
.fire { --type: #EA7A3C; background: var(--type); }
.water { --type: #539AE2; background: var(--type); }
.electric { --type: #E5C531; background: var(--type); }
.grass { --type: #71C558; background: var(--type); }
.ice { --type: #70CBD4; background: var(--type); }
.fighting { --type: #CB5F48; background: var(--type); }
.poison { --type: #B468B7; background: var(--type); }
.ground { --type: #CC9F4F; background: var(--type); }
.flying { --type: #7DA6DE; background: var(--type); }
.psychic { --type: #E5709B; background: var(--type); }
.bug { --type: #94BC4A; background: var(--type); }
.rock { --type: #B2A061; background: var(--type); }
.ghost { --type: #846AB6; background: var(--type); }
.dragon { --type: #6A7BAF; background: var(--type); }
.dark { --type: #736C75; background: var(--type); }
.steel { --type: #89A1B0; background: var(--type); }
.fairy { --type: #E397D1; background: var(--type); }

.iv-popup-overlay {
	align-items: center;
	background: rgba(22, 39, 50, 0.55);
	display: flex;
	inset: 0;
	justify-content: center;
	position: fixed;
	z-index: 200;
}

.iv-popup {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(22, 39, 50, 0.28);
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	padding: 16px;
	width: min(92vw, 400px);
}

.iv-popup .iv-pip {
	font-size: 16px;
	min-height: 44px;
}

.iv-popup .iv-pip.is-hover:not(.is-active) {
	background: #e8f1f5;
	border-color: #9eb7c5;
}

.iv-popup .iv-pip.is-active.is-hover {
	background: #217aa5;
	border-color: #217aa5;
}

/* 入場券價格：單價最低的禮包整列以綠色標示，單價前加上最划算標籤 */
.trading-table tbody tr.is-best,
.trading-table tbody tr.is-best:nth-child(even) {
	background: #e3f5e9;
	box-shadow: inset 4px 0 0 #27ae60;
}

.trading-table tr.is-best th,
.trading-table tr.is-best td {
	color: #1f7a43;
}

.ticket-best {
	background: #27ae60;
	border-radius: 999px;
	color: #fff;
	font-size: 11px;
	margin-right: 8px;
	padding: 2px 8px;
}

@media (max-width: 720px) {
	/* 交換星星沙子表在窄螢幕改成卡片：每種交換一張，每個友誼等級一列，等級名稱取自 data-label */
	.trading-scroll {
		border: 0;
		overflow: visible;
	}

	.trading-table,
	.trading-table tbody,
	.trading-table tr,
	.trading-table th,
	.trading-table td {
		display: block;
	}

	.trading-table thead {
		display: none;
	}

	.trading-table tbody {
		display: grid;
		gap: 8px;
	}

	.trading-table tbody tr,
	.trading-table tbody tr:nth-child(even) {
		background: #fff;
		border: 1px solid #d8e3e8;
		border-radius: 8px;
		overflow: hidden;
	}

	.trading-table tbody tr + tr,
	.trading-table tbody tr:first-child {
		border-top: 1px solid #d8e3e8;
	}

	.trading-table th[scope="row"] {
		background: #eef3f5;
		white-space: normal;
	}

	.trading-table th.is-merged {
		display: block;
	}

	.trading-table th.is-rowspan {
		border-right: 0;
	}

	.trading-table td {
		display: flex;
		gap: 12px;
		justify-content: space-between;
		padding: 6px 10px;
	}

	.trading-table td + td {
		border-top: 1px solid #eef3f5;
	}

	.trading-table tbody tr.is-best,
	.trading-table tbody tr.is-best:nth-child(even) {
		background: #e3f5e9;
		border-color: #27ae60;
		box-shadow: none;
	}

	.trading-table tr.is-best th[scope="row"] {
		background: #c8ecd5;
	}

	/* 友誼等級：名稱在左，愛心圖靠右，朋友點數在愛心圖下方 */
	.level-head.friend-head {
		align-items: flex-start;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.friend-progress {
		justify-items: end;
	}

	.friend-progress img {
		margin-top: 0;
	}

	.trading-table td::before {
		color: #5b6b73;
		content: attr(data-label);
		font-size: 12px;
		text-align: left;
		white-space: normal;
	}

	/* 冒險效果的說明太長，欄名放在上方而不是左邊 */
	.effect-table td.effect-description {
		display: block;
		min-width: 0;
	}

	.effect-table td.effect-description::before {
		display: block;
		margin-bottom: 4px;
	}

	.effect-costs {
		justify-items: end;
	}

	/* 格子太窄放不下名稱，只留寶可夢圖示 */
	.cal-bar {
		justify-content: center;
		padding: 0;
	}

	.cal-bar span {
		display: none;
	}

	.cal-note {
		font-size: 9px;
	}

	/* 欄寬不夠一行，讓名稱折成兩行 */
	.cal-head .cal-type {
		border-radius: 8px;
		font-size: 9px;
		line-height: 1.15;
		overflow-wrap: anywhere;
		white-space: normal;
		padding: 3px 1px;
		width: calc(100% - 2px);
	}

	.cal-cell {
		min-height: 64px;
		padding: 1px 1px 3px;
	}

	.app {
		padding: 8px 10px 16px;
	}

	/* 標題隨螢幕寬度縮小，讓標題與模式按鈕永遠排在同一列；真的放不下時以 … 截斷 */
	h1 {
		flex: 0 1 auto;
		font-size: clamp(9px, calc((100vw - 244px) / 8.4), 18px);
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.page-header {
		flex-wrap: nowrap;
		gap: 8px;
		margin: 0 0 6px;
	}

	.mode-switch {
		flex: 0 0 auto;
		flex-wrap: nowrap;
		gap: 4px;
	}

	.mode-switch .family-member {
		font-size: 12px;
		min-height: 30px;
		padding: 4px 6px;
		white-space: nowrap;
	}

	.panel {
		margin: 4px 0;
		padding: 6px;
	}

	input,
	select,
	button {
		min-height: 32px;
		padding: 4px 8px;
	}

	label span {
		font-size: 11px;
		line-height: 14px;
		margin: 0 0 2px;
	}

	.controls,
	.iv-grid {
		gap: 6px;
	}

	.iv-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) 64px;
	}

	.family {
		flex-direction: column;
		gap: 6px;
		margin-top: 0;
		padding-top: 6px;
	}

	.family > span {
		padding-top: 0;
	}

	.family > div {
		width: 100%;
		gap: 6px;
	}

	.family-member {
		font-size: 12px;
		min-height: 30px;
		padding: 4px 8px;
	}

	.shadow-toggle {
		width: 100%;
		min-height: 30px;
		padding: 4px 8px;
	}

	.iv-pips {
		grid-template-columns: 1fr;
	}

	.iv-pips .iv-pip:not(.is-active) {
		display: none;
	}

	.iv-pips .iv-pip.is-active {
		font-size: 12px;
		min-height: 30px;
		touch-action: none;
	}

	.showcase-grid {
		gap: 6px;
	}

	.switch-field-label {
		font-size: 11px;
	}

	.xxl-toggle {
		min-width: 52px;
		padding-left: 6px;
		padding-right: 6px;
	}

	.cup-section {
		margin: 4px 0;
	}

	.cup-results {
		gap: 3px;
	}

	.cup-card header {
		padding: 4px 8px;
	}

	.cup-card h3 {
		font-size: 13px;
	}

	.cup-toggle {
		display: block;
	}

	.cup-ranks {
		gap: 6px;
		padding: 3px 6px 2px;
	}

	.rank-tile {
		min-height: 32px;
		padding: 3px 6px;
	}

	.rank-tile span {
		font-size: 10px;
	}

	.rank-tile strong {
		font-size: 13px;
	}

	.rank-tile small {
		font-size: 10px;
	}

	.cup-results .cup-details {
		display: none;
	}

	.cup-results.show-details .cup-details {
		display: grid;
	}

	.moveset-moves li {
		font-size: 12px;
	}

	.ranking-filters,
	.ranking-toggles {
		gap: 6px;
	}

	.ranking-search {
		flex-basis: 140px;
	}

	.ranking-type {
		flex-basis: 96px;
	}

	.ranking-toggles {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: 100%;
	}

	.ranking-toggles .xxl-toggle {
		font-size: 13px;
		min-width: 0;
		white-space: nowrap;
		width: 100%;
	}

	.ranking-toggles .research-group {
		grid-column: 1 / -1;
	}

	.ranking-row {
		gap: 6px;
		grid-template-columns: 42px 36px minmax(0, 1fr) minmax(0, 1.2fr);
		padding: 4px 6px;
	}

	.ranking.no-images .ranking-row {
		grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1.2fr);
	}

	.ranking-rank > span {
		font-size: 11px;
	}

	.ranking-image {
		height: 36px;
		width: 36px;
	}

	.ranking-thumb .ranking-shadow-icon {
		height: 14px;
		width: 14px;
	}

	.ranking-name strong {
		font-size: 13px;
	}

	.ranking-moves {
		font-size: 12px;
		gap: 4px;
		grid-template-columns: minmax(0, 1fr);
	}

	.ranking-header {
		font-size: 11px;
	}

	.ranking-header .ranking-moves {
		display: flex;
		gap: 0;
	}

	.ranking-header .ranking-moves span + span::before {
		content: "／";
	}

	.ranking-moves .type,
	.ranking-name .type {
		font-size: 10px;
		padding: 2px 6px;
	}

	.ranking-dps strong {
		font-size: 14px;
	}

	.mode-menu-item {
		font-size: 12px;
	}

	.level-row {
		flex-direction: column;
		gap: 6px;
	}

	.medal-row {
		align-items: stretch;
	}

	.level-row.probability-row {
		flex-direction: row;
	}

	.medal-tiers {
		grid-template-columns: repeat(4, 1fr);
	}

	.evolution-row {
		flex-direction: row;
	}

	.evolution-from {
		flex-basis: 68px;
	}

	.evolution-to {
		flex-basis: 68px;
		flex-direction: column;
		align-items: center;
	}

	.evolution-condition {
		font-size: 13px;
	}

	.level-head {
		align-items: baseline;
		display: flex;
		flex: none;
		flex-wrap: wrap;
		gap: 4px 10px;
	}

	.item-row .level-head {
		align-items: flex-start;
		flex-direction: column;
	}

	.item-image {
		height: 36px;
		width: 36px;
	}

	.raid-tier h2 {
		font-size: 14px;
		margin: 8px 0 4px;
	}

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

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

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

	.region-locations {
		font-size: 11px;
	}

	.pokedex-dex,
	.pokedex-buddy,
	.pokedex-cp {
		font-size: 10px;
	}

	.pokedex-buddy {
		top: 20px;
	}

	.raid-card > .pokedex-types {
		padding-left: 36px;
	}

	.raid-card {
		gap: 4px;
		padding: 6px 4px;
	}

	.raid-card > strong {
		font-size: 12px;
	}

	.raid-card .type {
		font-size: 10px;
		padding: 2px 6px;
	}

	.raid-image {
		height: 48px;
		width: 48px;
	}

	.raid-cp-pair {
		padding: 0;
	}

	.raid-cp dt {
		font-size: 10px;
	}

	.raid-cp dd {
		font-size: 12px;
	}

	.raid-cp small {
		font-size: 10px;
	}

}

/* 強化頁：等級選單、總計與每次強化的表格 */
.powerup-level {
	align-items: center;
	color: #5b6b73;
	display: flex;
	flex: none;
	font-size: 14px;
	gap: 6px;
	white-space: nowrap;
}

.powerup-level .research-group {
	flex: none;
	width: 96px;
}

.powerup-totals {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}

.powerup-totals li {
	background: #f7fafb;
	border: 1px solid #d8e3e8;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 12px;
}

.powerup-totals .level-label {
	flex: none;
}

.powerup-totals strong {
	font-size: 20px;
	font-variant-numeric: tabular-nums;
}

.powerup-table {
	border-collapse: collapse;
	font-size: 14px;
	width: 100%;
}

.powerup-table th,
.powerup-table td {
	padding: 6px 10px;
	text-align: right;
	white-space: nowrap;
}

.powerup-table th[scope="row"],
.powerup-table thead th:first-child {
	text-align: left;
}

.powerup-table thead th {
	background: #eef3f5;
	color: #5b6b73;
	font-size: 12px;
}

.powerup-table tbody tr {
	border-top: 1px solid #d8e3e8;
}

.powerup-table tbody tr:nth-child(even) {
	background: #f7fafb;
}

.powerup-table td {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

@media (max-width: 720px) {
	.powerup-filter {
		display: flex;
	}

	.powerup-kinds {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.powerup-totals strong {
		font-size: 16px;
	}

	.powerup-table th,
	.powerup-table td {
		padding: 6px;
	}
}