MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

.pxgq-shell {
	margin-top: 20px;
}

.pxgq-filters {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 18px;
	padding: 24px;
	border: 1px solid #e5e7f3;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(74, 84, 129, 0.08);
	margin-bottom: 22px;
}

.pxgq-filter-group label {
	display: block;
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #5c657d;
}

.pxgq-filter-group input,
.pxgq-filter-group select {
	width: 100%;
	box-sizing: border-box;
	height: 54px;
	padding: 0 18px;
	border: 1px solid #dde2ee;
	border-radius: 16px;
	background: #fafbff;
	font-size: 15px;
	color: #2d3447;
}

.pxgq-level-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.pxgq-account-toggle {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.pxgq-account-toggle button {
	height: 54px;
	padding: 0 20px;
	border: 1px solid #d9deea;
	border-radius: 16px;
	background: #f7f8fe;
	color: #5d6682;
	font-weight: 800;
	cursor: pointer;
	transition: all 0.18s ease;
}

.pxgq-account-toggle button.is-active {
	background: linear-gradient(135deg, #0b7aad, #096390);
	color: #fff;
	border-color: #096390;
	box-shadow: 0 8px 22px rgba(9, 99, 144, 0.25);
}

.pxgq-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 18px;
}

.pxgq-card {
	background: #fff;
	border: 1px solid #e6e8f2;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 10px 28px rgba(58, 67, 101, 0.08);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
	display: flex;
	flex-direction: column;
}

.pxgq-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(58, 67, 101, 0.14);
}

.pxgq-card-banner {
	height: 118px;
	overflow: hidden;
	background: linear-gradient(135deg, #d5e9f4, #eaf6fc);
}

.pxgq-card-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease;
}

.pxgq-card:hover .pxgq-card-banner img {
	transform: scale(1.04);
}

.pxgq-card-body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.pxgq-card-tags {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}

.pxgq-tag {  
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
}

.pxgq-tag-region {
	background: #d5e9f4;
	color: #096390;
}

.pxgq-tag-account {
	background: #096390;
	color: #fff;
}

.pxgq-card-title {
	margin: 0 0 14px;
	font-size: 20px;
	line-height: 1.2;
	color: #232a3d;
}

.pxgq-card-block {
	margin-bottom: 14px;
}

.pxgq-card-label {
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 800;
	color: #252d43;
}

.pxgq-card-box {
	padding: 12px 14px;
	border: 1px solid #e5e7f3;
	border-radius: 16px;
	background: #fbfcff;
	color: #57617a;
	line-height: 1.55;
}

.pxgq-card-spoiler {
	margin-bottom: 14px;
}

.pxgq-card-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: auto;
	padding-top: 8px;
}

.pxgq-card-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 16px;
	border: 0;
	border-radius: 14px;
	background: linear-gradient(135deg, #f4fafd, #eaf6fc);
	color: #096390;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.18s ease, transform 0.18s ease;
}

.pxgq-card-button:hover {
	filter: brightness(0.98);
	transform: translateY(-1px);
	text-decoration: none;
}

.pxgq-card.is-hidden {
	display: none;
}

@media (max-width: 1100px) {
	.pxgq-filters {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 700px) {
	.pxgq-filters {
		grid-template-columns: 1fr;
		padding: 18px;
	}

	.pxgq-cards {
		grid-template-columns: 1fr;
	}

	.pxgq-card-actions {
		grid-template-columns: 1fr;
	}
}

.hover-teams img {
	transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
	border-radius: 10px;
}

.hover-teams a:hover img {
	transform: translateY(-4px) scale(1.03);
	filter: brightness(1.03);
}

.team-portal-intro {
	background: linear-gradient(135deg, #f8fbff, #f1fafe);
	border: 1px solid #e6e8f2;
	border-radius: 20px;
	padding: 22px 24px;
	margin: 20px 0 26px;
	line-height: 1.8;
	color: #4d5872;
	box-shadow: 0 10px 26px rgba(58, 67, 101, 0.06);
}

.team-portal-title {
	font-size: 34px;
	font-weight: 800;
	color: #232a3d;
	margin: 18px 0 22px;
}

.team-portal-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin: 0 0 24px;
}

.team-portal-card {
	background: #fff;
	border: 1px solid #e6e8f2;
	border-radius: 24px;
	padding: 22px 18px 20px;
	box-shadow: 0 12px 30px rgba(58, 67, 101, 0.08);
	text-align: center;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.team-portal-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 38px rgba(58, 67, 101, 0.14);
}

.team-portal-card img {
	transition: transform 0.25s ease, filter 0.25s ease;
}

.team-portal-card:hover img {
	transform: scale(1.04);
	filter: brightness(1.03);
}

.team-portal-card-title {
	font-size: 28px;
	font-weight: 800;
	color: #232a3d;
	margin: 14px 0 10px;
}

.team-portal-card-text {
	color: #5b657d;
	line-height: 1.7;
	margin-bottom: 14px;
	min-height: 70px;
}

.team-portal-types {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 18px;
}

.team-portal-types span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	background: #f3f5fb;
	color: #5b657d;
	border: 1px solid #e1e6f0;
}

.team-portal-button {
	display: inline-block;
	padding: 11px 18px;
	border-radius: 999px;
	font-weight: 800;
	color: #fff;
	text-decoration: none;
}

.team-portal-card--valor {
	background: linear-gradient(180deg, #fff 0%, #fff6f6 100%);
	border-top: 4px solid #ef4444;
}

.team-portal-card--valor .team-portal-button {
	background: linear-gradient(135deg, #ef4444, #dc2626);
}

.team-portal-card--mystic {
	background: linear-gradient(180deg, #fff 0%, #f5faff 100%);
	border-top: 4px solid #3b82f6;
}

.team-portal-card--mystic .team-portal-button {
	background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.team-portal-card--instinct {
	background: linear-gradient(180deg, #fff 0%, #fffaf0 100%);
	border-top: 4px solid #f5b301;
}

.team-portal-card--instinct .team-portal-button {
	background: linear-gradient(135deg, #f5b301, #d89b00);
}

.team-portal-card a:hover {
	text-decoration: none;
}

@media (max-width: 700px) {
	.team-portal-title {
		font-size: 28px;
	}
}

.team-portal-button--info {
	background: linear-gradient(135deg, #096390, #085b84);
	color: #fff;
	box-shadow: 0 8px 20px rgba(103, 92, 255, 0.22);
}

.team-portal-info-box {
	background: linear-gradient(135deg, #f7f8ff, #f1fafe);
	border: 1px solid #e4e7f3;
	border-radius: 20px;
	padding: 22px 24px;
	margin: 0 0 24px;
	text-align: center;
	box-shadow: 0 10px 24px rgba(58, 67, 101, 0.06);
}

.team-portal-info-title {
	font-size: 24px;
	font-weight: 800;
	color: #232a3d;
	margin-bottom: 8px;
}

.team-portal-info-text {
	color: #5a657d;
	line-height: 1.7;
	margin-bottom: 16px;
}

.team-portal-button--info {
	background: linear-gradient(135deg, #096390, #085b84);
	color: #fff;
	box-shadow: 0 8px 20px rgba(103, 92, 255, 0.22);
}

.team-portal-button-wrap a {
	display: inline-block;
	padding: 11px 18px;
	border-radius: 999px;
	font-weight: 800;
	color: #fff !important;
	text-decoration: none !important;
}

.team-portal-button-wrap--info a {
	background: linear-gradient(135deg, #096390, #085b84);
	box-shadow: 0 8px 20px rgba(103, 92, 255, 0.22);
}

.team-portal-card--valor .team-portal-button-wrap a {
	background: linear-gradient(135deg, #ef4444, #dc2626);
}

.team-portal-card--mystic .team-portal-button-wrap a {
	background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.team-portal-card--instinct .team-portal-button-wrap a {
	background: linear-gradient(135deg, #f5b301, #d89b00);
}

.team-portal-button-wrap a:hover {
	text-decoration: none !important;
	filter: brightness(0.98);
}


.pst-mini-team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin: 18px 0 30px;
}

.pst-mini-team {
	background: #fff;
	border: 1px solid #e6e8f2;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 10px 28px rgba(58,67,101,.08);
	transition: transform .2s ease, box-shadow .2s ease;
}

.pst-mini-team:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(58,67,101,.14);
}

.pst-mini-team--valor {
	border-top: 4px solid #ef4444;
	background: linear-gradient(180deg,#fff 0%,#fff7f8 100%);
}

.pst-mini-team--mystic {
	border-top: 4px solid #3b82f6;
	background: linear-gradient(180deg,#fff 0%,#f6fbff 100%);
}

.pst-mini-team--instinct {
	border-top: 4px solid #f5b301;
	background: linear-gradient(180deg,#fff 0%,#fffaf0 100%);
}

.pst-mini-team-banner {
	padding: 14px 14px 0;
	text-align: center;
}

.pst-mini-team-banner img {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
	transition: transform .25s ease;
}

.pst-mini-team:hover .pst-mini-team-banner img {
	transform: scale(1.03);
}

.pst-mini-team-body {
	padding: 16px 18px 20px;
	text-align: center;
}

.pst-mini-team-title {
	font-size: 28px;
	font-weight: 800;
	color: #232a3d;
	margin-bottom: 10px;
}

.pst-mini-team-text {
	color: #5b657d;
	line-height: 1.7;
	margin-bottom: 14px;
	min-height: 72px;
}

.pst-mini-team-subtitle {
	font-size: 14px;
	font-weight: 800;
	color: #232a3d;
	margin: 14px 0 10px;
}

.pst-mini-team-types {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 14px;
}

.pst-mini-team-outfit img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
}

.team-image-grid {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 24px;
	flex-wrap: wrap;
	margin: 24px 0 10px;
}

.team-image-item {
	text-align: center;
}

.team-image-item img {
	display: block;
	border-radius: 16px;
	transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
	box-shadow: 0 10px 26px rgba(58, 67, 101, 0.10);
}

.team-image-item a:hover img {
	transform: translateY(-6px) scale(1.03);
	filter: brightness(1.03);
	box-shadow: 0 18px 38px rgba(58, 67, 101, 0.18);
}

.team-image-item img {
	width: 300px;
	height: 300px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
	border-radius: 16px;
	transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
	box-shadow: 0 10px 26px rgba(58, 67, 101, 0.10);
}

body {
	background-color: #daecf7;
	background-image: url("/index.php/Special:Redirect/file/Background.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}

#content {
	background: rgba(255, 255, 255, 0.86);
}

#mw-panel {
	background: rgba(255, 255, 255, 0.90);
}



.pst-kicker{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6b7692;margin-bottom:8px}
.pst-hero{background:linear-gradient(135deg,#f7fbff,#f0f9fe);border:1px solid #e6e8f2;border-radius:24px;padding:24px;box-shadow:0 10px 28px rgba(58,67,101,.08);margin:8px 0 18px}
.pst-hero-title{font-size:34px;font-weight:800;line-height:1.1;color:#232a3d;margin-bottom:12px}
.pst-hero p{margin:0 0 10px;line-height:1.75;color:#4f5973}
.pst-nav{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 28px}
.pst-nav a{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;background:#f7f8fe;border:1px solid #dfe4f0;color:#56627f;font-weight:700;text-decoration:none}
.pst-nav a:hover{text-decoration:none;background:#eef3ff}
.pst-team-list{display:grid;gap:22px;margin-bottom:30px}
.pst-team-card{background:#fff;border:1px solid #e6e8f2;border-radius:24px;overflow:hidden;box-shadow:0 10px 28px rgba(58,67,101,.08);transition:transform .2s ease,box-shadow .2s ease}
.pst-team-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(58,67,101,.14)}
.pst-team-card--valor{border-top:4px solid #ef4444;background:linear-gradient(180deg,#fff 0%,#fff7f8 100%)}
.pst-team-card--mystic{border-top:4px solid #3b82f6;background:linear-gradient(180deg,#fff 0%,#f6fbff 100%)}
.pst-team-card--instinct{border-top:4px solid #f5b301;background:linear-gradient(180deg,#fff 0%,#fffaf0 100%)}
.pst-team-banner{overflow:hidden;background:#eef2ff}
.pst-team-banner img{display:block;width:100%;height:auto;transition:transform .25s ease}
.pst-team-card:hover .pst-team-banner img{transform:scale(1.03)}
.pst-team-content{display:grid;grid-template-columns:1.2fr .85fr;gap:18px;padding:22px}
.pst-team-title{font-size:28px;font-weight:800;color:#232a3d;margin:0 0 10px}
.pst-team-copy p{margin:0 0 12px;line-height:1.7;color:#4f5973}
.pst-subtitle{font-size:14px;font-weight:800;color:#232a3d;margin:16px 0 8px}
.pst-type-list{display:flex;flex-wrap:wrap;gap:8px}
.pst-type{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:800;color:#fff}
.pst-type--fire{background:#ff8a3d}.pst-type--dark{background:#4b5563}.pst-type--flying{background:#7ea7ff}.pst-type--rock{background:#b89d62}.pst-type--bug{background:#7fbf2b}.pst-type--normal{background:#9aa5b1}
.pst-type--water{background:#4ea3ff}.pst-type--ice{background:#6dd5d2}.pst-type--steel{background:#6f93a7}.pst-type--ghost{background:#7c82d6}.pst-type--fighting{background:#d64d73}.pst-type--fairy{background:#ee8de3}
.pst-type--electric{background:#f4c20d}.pst-type--dragon{background:#2d7be8}.pst-type--poison{background:#a05ccf}.pst-type--grass{background:#61c45f}.pst-type--psychic{background:#ff7298}.pst-type--ground{background:#d58a52}
.pst-team-side{background:#fafbff;border:1px solid #e6e8f2;border-radius:20px;padding:16px}
.pst-team-side p{margin:0 0 10px;line-height:1.65;color:#4f5973}
.pst-team-side img{display:block;width:100%;height:auto;border-radius:14px;margin-top:10px}
.pst-section{background:#fff;border:1px solid #e6e8f2;border-radius:22px;padding:22px;box-shadow:0 10px 28px rgba(58,67,101,.06);margin:16px 0 28px}
.pst-section p{margin:0 0 12px;line-height:1.75;color:#4f5973}
.pst-section ul{margin:10px 0 0 20px}
.pst-section li{margin-bottom:8px;color:#3f4962}
.pst-section-grid{display:grid;grid-template-columns:1fr .9fr;gap:18px;align-items:start}
.pst-media-box img{display:block;width:100%;height:auto;border-radius:16px}
.pst-note{background:#fff8eb;border:1px solid #f0d598;border-radius:16px;padding:14px 16px;color:#6f5620;font-style:italic}
.pst-rank-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:16px}
.pst-rank-card{background:#fafbff;border:1px solid #e6e8f2;border-radius:18px;padding:16px}
.pst-rank-name{font-size:13px;font-weight:800;color:#6b7692;text-transform:uppercase;letter-spacing:.05em}
.pst-rank-title{font-size:20px;font-weight:800;color:#232a3d;margin:6px 0}
.pst-rank-bonus{font-size:26px;font-weight:900;color:#096390}
.pst-rank-unlock{font-size:13px;color:#59637c;margin-top:8px;line-height:1.5}
.pst-helper{margin-top:14px;color:#59637c;font-size:14px}
.pst-mission-grid{display:grid;gap:14px}
.pst-mission-card{position:relative;background:#fafbff;border:1px solid #e6e8f2;border-radius:18px;padding:16px 18px 16px 60px;line-height:1.7;color:#4f5973}
.pst-mission-number{position:absolute;left:16px;top:16px;width:30px;height:30px;border-radius:999px;background:linear-gradient(135deg,#0b77ad,#085b84);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center}
.pst-colored-name--valor{color:#d93c45;font-weight:800}.pst-colored-name--mystic{color:#2e7df4;font-weight:800}.pst-colored-name--instinct{color:#d8a100;font-weight:800}
@media (max-width:900px){.pst-team-content,.pst-section-grid{grid-template-columns:1fr}.pst-hero-title{font-size:28px}}

.page-Main_Page #firstHeading,
.page-Main_Page #siteSub {
    display: none;
}

.pstoryWelcome {
    max-width: 860px;
    margin: 2rem auto 1.4rem;
    padding: 0 1rem;
    box-sizing: border-box;
}

.pstoryWelcome__inner {
    padding: 1.55rem 1.4rem;
    border-radius: 18px;
    background: linear-gradient(90deg, rgba(214, 107, 196, 0.92), rgba(157, 92, 235, 0.94));
    box-shadow: 0 14px 32px rgba(112, 76, 166, 0.2);
    color: #fff;
    text-align: center;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1.15;
    text-transform: uppercase;
    text-shadow: 0 3px 0 rgba(57, 33, 85, 0.28);
}

.pstoryHome {
    max-width: 1650px;
    margin: 0 auto;
}

.pstoryHome__content {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 0 1rem 1rem;
    box-sizing: border-box;
}

.pstoryHome__main {
    width: 75%;
}

.pstoryHome__side {
    width: 25%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pstoryHome .pstoryCard {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 251, 254, 0.95));
    border: 1px solid #d4e9f4;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(74, 84, 129, 0.12);
    overflow: hidden;
}

.pstoryHome .pstoryCard + .pstoryCard {
    margin-top: 1.25rem;
}

.pstoryHome .pstoryCard__title {
    padding: 0.95rem 1.2rem;
    background: linear-gradient(90deg, #0b77ad, #085b84);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.96rem;
    font-weight: 800;
    text-align: center;
}

.pstoryHome .pstoryCard__body {
    padding: 1.15rem;
    box-sizing: border-box;
}

.pstoryHome .pstoryQuickNav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.pstoryHome .pstoryQuickNav__item {
    min-height: 100%;
    border-radius: 16px;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pstoryHome .pstoryQuickNav__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(58, 67, 101, 0.12);
    border-color: #a9dced;
}

.pstoryHome .pstoryQuickNav__item--text {
    padding: 1rem 1rem 1.1rem;
    background: linear-gradient(180deg, #f4fbfe, #fdfeff);
    border: 1px solid #d9ebf4;
}

.pstoryHome .pstoryQuickNav__eyebrow {
    display: block;
    margin-bottom: 0.55rem;
    color: #0a6a99;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pstoryHome .pstoryQuickNav__title,
.pstoryHome .pstoryQuickNav__title a,
.pstoryHome .pstoryQuickNav__title a:visited {
    color: #2a3148 !important;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
}

.pstoryHome .pstoryQuickNav__title a:hover {
    color: #096390 !important;
    text-decoration: none;
}

.pstoryHome .pstoryQuickNav__desc {
    margin-top: 0.65rem;
    color: #5f6884;
    font-size: 0.93rem;
    line-height: 1.55;
}

.pstoryHome .pstoryQuickNav__item--image {
    padding: 0.65rem;
    background: #fff;
    border: 1px solid #e0eef5;
    text-align: center;
}

.pstoryHome .pstoryQuickNav__item--image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(58, 67, 101, 0.12);
}

.pstoryHome .pstoryQuickNav__caption,
.pstoryHome .pstoryQuickNav__caption a,
.pstoryHome .pstoryQuickNav__caption a:visited {
    margin-top: 0.7rem;
    color: #096390 !important;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
}

.pstoryHome .pstoryQuickNav__caption a:hover {
    color: #085b84 !important;
}

.pstoryHome .pstoryIndex {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pstoryHome .pstoryIndex__group {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    padding-bottom: 1rem;
    border-bottom: 2px dotted #d3d7e6;
}

.pstoryHome .pstoryIndex__group:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.pstoryHome .pstoryIndex__icon {
    flex: 0 0 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0b77ad, #085b84);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 900;
}

.pstoryHome .pstoryIndex__title {
    color: #2a3148;
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.pstoryHome .pstoryIndex__links,
.pstoryHome .pstoryIndex__links a,
.pstoryHome .pstoryIndex__links a:visited {
    color: #59627d !important;
    line-height: 1.7;
    text-decoration: none;
}

.pstoryHome .pstoryIndex__links a:hover {
    color: #085b84 !important;
}

.pstorySocialPanel {
    padding: 1.25rem 0 0;
}

.pstorySocialPanel__title {
    margin-bottom: 1rem;
    color: #747176;
    font-size: 1.25rem;
    font-weight: 800;
    text-align: center;
}

.pstorySocialPanel__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.pstorySocialPanel__item {
    width: 100%;
    text-align: center;
}

.pstorySocialPanel__item img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 14px;
    filter: grayscale(.15);
    transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
    box-shadow: 0 10px 24px rgba(74, 84, 129, 0.14);
}

.pstorySocialPanel__item a:hover img {
    transform: translateY(-2px) scale(.985);
    filter: grayscale(0);
    box-shadow: 0 14px 28px rgba(74, 84, 129, 0.18);
}

@media screen and (max-width: 1180px) {
    .pstoryHome__content {
        flex-direction: column;
    }

    .pstoryHome__main,
    .pstoryHome__side {
        width: 100%;
    }
}

@media screen and (max-width: 860px) {
    .pstoryWelcome__inner {
        font-size: 1.55rem;
    }

    .pstoryHome .pstoryQuickNav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 620px) {
    .pstoryWelcome__inner {
        font-size: 1.25rem;
        padding: 1.15rem 1rem;
    }

    .pstoryHome .pstoryQuickNav {
        grid-template-columns: 1fr;
    }

    .pstoryHome .pstoryIndex__group {
        flex-direction: column;
    }
}

/* =========================================================================
   DESIGN SYSTEM — COMPONENTES DE SISTEMAS  (prefixo pst-)
   Adicionado para a pagina Champion's Path. Reutilizavel em qualquer pagina
   de sistema, boss, hunt ou quest. Nao altera nenhuma regra anterior.
   ========================================================================= */

/* --- Selos / badges do cabecalho ---------------------------------------- */
.pst-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.pst-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid #e1e6f0;
	color: #4f5973;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.pst-badge--brand {
	background: linear-gradient(135deg, #0b77ad, #085b84);
	border-color: transparent;
	color: #fff;
}

/* --- Linha de apoio do hero (usar no lugar de repetir o titulo) ---------- */
.pst-hero-tagline {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.3;
	color: #096390;
	margin: 0 0 12px;
}

/* --- Ficha rapida (infobox horizontal, responsiva) ----------------------- */
.pst-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	background: #fff;
	border: 1px solid #e6e8f2;
	border-radius: 22px;
	padding: 20px;
	box-shadow: 0 10px 28px rgba(58, 67, 101, .08);
	margin: 0 0 26px;
}

.pst-fact {
	background: #fafbff;
	border: 1px solid #e6e8f2;
	border-radius: 16px;
	padding: 14px 16px;
}

.pst-fact-label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #6b7692;
	margin-bottom: 6px;
}

.pst-fact-value {
	font-size: 16px;
	font-weight: 800;
	color: #232a3d;
	line-height: 1.35;
}

.pst-fact-value small {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #6b7692;
	margin-top: 3px;
}

/* --- Grid de bosses ------------------------------------------------------ */
.pst-boss-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 14px;
	margin: 16px 0 0;
}

.pst-boss-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: #fff;
	border: 1px solid #e6e8f2;
	border-top: 4px solid #0b77ad;
	border-radius: 18px;
	padding: 16px;
	box-shadow: 0 8px 22px rgba(58, 67, 101, .07);
	transition: transform .2s ease, box-shadow .2s ease;
}

.pst-boss-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(58, 67, 101, .13);
}

.pst-boss-name {
	font-size: 17px;
	font-weight: 800;
	color: #232a3d;
	line-height: 1.25;
}

/* Links para paginas ainda nao criadas nao devem gritar em vermelho dentro
   dos cards: mantem a leitura limpa sem esconder o link do editor. */
.pst-boss-name a,
.pst-boss-name a.new,
.pst-boss-name a.new:visited {
	color: #232a3d;
	text-decoration: none;
}

.pst-boss-name a:hover {
	color: #096390;
	text-decoration: none;
}

.pst-boss-meta {
	font-size: 13px;
	color: #6b7692;
	line-height: 1.5;
}

.pst-boss-card--locked {
	background: #f7f8fb;
	border-top-color: #c3c9d8;
	box-shadow: none;
	opacity: .85;
}

.pst-boss-card--locked .pst-boss-name {
	color: #6b7692;
}

.pst-boss-card--locked:hover {
	transform: none;
	box-shadow: none;
}

.pst-boss-tag {
	align-self: flex-start;
	margin-top: 2px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #f1f3f9;
	border: 1px solid #e1e6f0;
	color: #6b7692;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* --- Duas colunas: permitido x proibido ---------------------------------- */
.pst-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 16px 0 0;
}

.pst-split-col {
	border: 1px solid #e6e8f2;
	border-radius: 18px;
	padding: 18px 20px;
	background: #fff;
}

.pst-split-col h4 {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 800;
	color: #232a3d;
}

.pst-split-col ul {
	margin: 0 0 0 18px;
	padding: 0;
}

.pst-split-col li {
	margin-bottom: 7px;
	line-height: 1.6;
	color: #4f5973;
}

.pst-split-col--allow {
	background: linear-gradient(180deg, #fff 0%, #f4fbf6 100%);
	border-top: 4px solid #3fae6b;
}

.pst-split-col--deny {
	background: linear-gradient(180deg, #fff 0%, #fff6f6 100%);
	border-top: 4px solid #e05561;
}

/* --- Cards de classe / papel na equipe ----------------------------------- */
.pst-role-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
	margin: 16px 0 0;
}

.pst-role-card {
	background: #fafbff;
	border: 1px solid #e6e8f2;
	border-radius: 18px;
	padding: 18px;
	text-align: center;
}

.pst-role-count {
	font-size: 26px;
	font-weight: 900;
	line-height: 1;
	color: #0b77ad;
	margin-bottom: 8px;
}

.pst-role-name {
	font-size: 17px;
	font-weight: 800;
	color: #232a3d;
	margin-bottom: 8px;
}

.pst-role-text {
	font-size: 14px;
	color: #59637c;
	line-height: 1.6;
}

.pst-role-card--speedster { border-top: 4px solid #f0a53c; }
.pst-role-card--support   { border-top: 4px solid #3fae6b; }
.pst-role-card--defender  { border-top: 4px solid #3b82f6; }

/* --- Recompensas e conquistas -------------------------------------------- */
.pst-reward {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: linear-gradient(135deg, #f7f8ff, #f0f9fe);
	border: 1px solid #e4e7f3;
	border-radius: 18px;
	padding: 18px;
	margin: 16px 0;
	text-align: center;
	font-size: 15px;
	color: #4f5973;
	line-height: 1.6;
	flex-wrap: wrap;
}

.pst-reward strong {
	font-size: 22px;
	font-weight: 900;
	color: #096390;
}

.pst-ach-list {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.pst-ach-list li {
	background: #fafbff;
	border: 1px solid #e6e8f2;
	border-radius: 14px;
	padding: 13px 16px 13px 46px;
	position: relative;
	color: #4f5973;
	line-height: 1.6;
}

.pst-ach-list li::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	border: 2px solid #2e93bf;
	border-radius: 5px;
	background: #fff;
}

/* --- Fala de NPC ---------------------------------------------------------- */
.pst-quote {
	border-left: 3px solid #096390;
	padding: 2px 0 2px 16px;
	margin: 1em 0 1em 1.6em;
	color: #54595d;
	font-style: italic;
	line-height: 1.7;
}

.pst-quote cite {
	display: block;
	margin-top: 6px;
	font-style: normal;
	font-weight: bold;
	color: #202122;
}

/* --- Caixa de informacao pendente ---------------------------------------- */
.pst-todo {
	background: #f8f9fa;
	border: 1px solid #a2a9b1;
	border-left: 3px solid #096390;
	padding: 12px 16px;
	margin: 1em 0;
	color: #54595d;
	line-height: 1.7;
}

.pst-todo strong {
	color: #202122;
}

.pst-todo ul {
	margin: 6px 0 0 22px;
}

.pst-todo li {
	margin-bottom: 4px;
}

/* --- Figura com legenda --------------------------------------------------- */
.pst-figure {
	margin: 18px 0;
	text-align: center;
}

.pst-figure img {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 10px 26px rgba(58, 67, 101, .14);
}

.pst-figure-caption {
	margin-top: 10px;
	font-size: 13px;
	color: #6b7692;
	line-height: 1.5;
}

/* --- Tabela padrao dos sistemas ------------------------------------------- */
.pst-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 16px 0;
	border-radius: 16px;
}

table.pst-table {
	width: 100%;
	min-width: 480px;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	border: 1px solid #e6e8f2;
	border-radius: 16px;
	overflow: hidden;
	margin: 0;
}

table.pst-table th {
	background: linear-gradient(90deg, #0b77ad, #085b84);
	color: #fff;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: left;
	padding: 13px 16px;
	border: 0;
}

table.pst-table td {
	padding: 13px 16px;
	border-top: 1px solid #eef0f7;
	color: #4f5973;
	line-height: 1.6;
	vertical-align: top;
}

table.pst-table tr:nth-child(even) td {
	background: #fafbff;
}

/* --- Rodape de navegacao entre paginas ------------------------------------ */
.pst-related {
	margin: 26px 0 10px;
	padding-top: 18px;
	border-top: 2px dotted #d3d7e6;
}

.pst-related-title {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6b7692;
	margin-bottom: 10px;
}

/* --- Ajustes responsivos --------------------------------------------------- */
@media (max-width: 980px) {
	.pst-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.pst-split {
		grid-template-columns: 1fr;
	}

	.pst-facts {
		grid-template-columns: 1fr;
		padding: 14px;
		gap: 10px;
	}

	.pst-hero {
		padding: 18px;
	}

	.pst-section {
		padding: 16px;
	}

	.pst-mission-card {
		padding: 14px 16px 14px 54px;
	}
}

/* =========================================================================
   CAMADA DE VERBETE  (prefixo pst-)
   Para páginas de conteúdo: sistemas, quests, bosses, NPCs.
   Regra desta camada: sem sombra, sem gradiente, raio 0. O interesse visual
   vem do conteúdo e das imagens do jogo, não do CSS.
   A camada anterior (pst-hero, pst-boss-grid, pst-facts, pxgq-*) continua
   válida e serve para páginas de catálogo, que são outra coisa.
   ========================================================================= */

/* --- Infobox lateral ------------------------------------------------------
   Escrita como tabela wiki comum, então qualquer editor consegue mexer:

   {| class="pst-infobox"
   |+ Champion's Path
   ! Tipo
   | Desafio em equipe
   |-
   ...
   |}
   -------------------------------------------------------------------------- */
table.pst-infobox {
	float: right;
	clear: right;
	width: 300px;
	margin: 0 0 1.2em 1.6em;
	border: 1px solid #a2a9b1;
	border-collapse: collapse;
	background: #f8f9fa;
	font-size: 90%;
	line-height: 1.5;
}

table.pst-infobox > caption {
	padding: 9px 12px;
	background: #096390;
	color: #fff;
	font-size: 1.15em;
	font-weight: bold;
	text-align: center;
	caption-side: top;
}

table.pst-infobox th,
table.pst-infobox td {
	padding: 6px 10px;
	border-top: 1px solid #c8ccd1;
	text-align: left;
	vertical-align: top;
}

table.pst-infobox th {
	width: 38%;
	background: #dff2fb;
	font-weight: bold;
	color: #202122;
}

/* Faixa de subtítulo dentro da infobox: uma célula sozinha ocupando a linha */
table.pst-infobox td.pst-infobox-sub {
	background: #dff2fb;
	font-weight: bold;
	text-align: center;
	color: #54595d;
}

/* Célula de imagem: sem padding, imagem ocupando a largura toda */
table.pst-infobox td.pst-infobox-img {
	padding: 0;
	text-align: center;
	background: #fff;
}

table.pst-infobox td.pst-infobox-img img {
	display: block;
	width: 100%;
	height: auto;
}

table.pst-infobox td.pst-infobox-img .thumbcaption,
table.pst-infobox .pst-infobox-legenda {
	padding: 5px 10px;
	color: #54595d;
	font-size: 92%;
	line-height: 1.4;
	text-align: center;
}

/* --- Tabela de conteúdo do verbete ---------------------------------------
   Harmoniza a wikitable nativa com o tema translúcido do site, sem inventar
   uma tabela nova. Use class="wikitable" normalmente.
   -------------------------------------------------------------------------- */
#content table.wikitable {
	border-color: #a2a9b1;
	background: #fff;
}

#content table.wikitable > * > tr > th {
	background: #dff2fb;
	color: #202122;
}

#content table.wikitable > * > tr > td,
#content table.wikitable > * > tr > th {
	padding: 7px 11px;
}

/* Coluna estreita para sprite/arte na primeira coluna de uma wikitable */
#content table.wikitable td.pst-arte {
	width: 72px;
	padding: 4px;
	text-align: center;
	background: #f8f9fa;
}

/* Marcadores de permitido / proibido em tabela */
.pst-sim { color: #14866d; font-weight: bold; }
.pst-nao { color: #b32424; font-weight: bold; }

/* Estado secundário para linhas de conteúdo indisponível */
#content table.wikitable tr.pst-indisponivel td {
	color: #72777d;
	background: #f8f9fa;
}

/* --- Nota curta, no lugar de uma caixa ------------------------------------ */
.pst-hatnote {
	margin: 0 0 1em;
	padding: 8px 0 8px 14px;
	border-left: 3px solid #a2a9b1;
	color: #54595d;
	line-height: 1.7;
}

.pst-hatnote strong {
	color: #202122;
}

/* --- Ajuste da infobox em telas estreitas --------------------------------- */
@media (max-width: 720px) {
	table.pst-infobox {
		float: none;
		width: auto;
		margin: 0 0 1.2em;
	}
}

/* =========================================================================
   APRESENTACAO DO VERBETE — coluna e mobiliario
   O Vector legado nao limita a largura do conteudo, o que produzia tres
   alinhamentos concorrentes na mesma pagina: texto ate a borda, tabela presa
   a esquerda e imagem centralizada. Aqui a folha inteira passa a viver em uma
   coluna unica e centralizada, e os componentes nativos do MediaWiki ganham
   o acabamento da marca.
   ========================================================================= */

/* --- A coluna ------------------------------------------------------------- */
/* Sem teto de largura: o texto corre ate o fim do quadro, colado a margem,
   como na wiki de referencia. Quem fica centralizado sao os blocos visuais -
   imagens e tabelas - que tem largura natural e vivem no meio da coluna. */

/* Titulo da pagina alinhado com o conteudo */
#content > #firstHeading {
	color: #14303f;
	border-bottom: 1px solid #cbe4f1;
	padding-bottom: 6px;
}

/* --- Titulos de secao ----------------------------------------------------- */
#content .mw-parser-output h2 {
	color: #14303f;
	border-bottom: 2px solid #d5e9f4;
	padding-bottom: 5px;
	margin-top: 1.6em;
}

#content .mw-parser-output h3 {
	margin-top: 1.8em;
	margin-bottom: 0.5em;
	padding-left: 11px;
	border-left: 3px solid #8fd0e8;
	color: #14303f;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.3;
}

/* --- Blocos centrados na coluna ------------------------------------------
   Tabelas e imagens compartilham o mesmo eixo, em vez de cada uma parar
   em um lugar diferente.
   -------------------------------------------------------------------------- */
#content .mw-parser-output > table.wikitable {
	margin-left: auto;
	margin-right: auto;
}

/* --- Tabela ---------------------------------------------------------------- */
#content table.wikitable {
	border: 1px solid #cbe4f1;
	border-collapse: collapse;
	background: #fff;
	line-height: 1.5;
}

#content table.wikitable > * > tr > th,
#content table.wikitable > * > tr > td {
	border: 1px solid #dcedf7;
	padding: 9px 14px;
}

/* Linha de cabecalho: a primeira linha da tabela */
#content table.wikitable > * > tr:first-child > th {
	background: #096390;
	border-color: #085b84;
	color: #fff;
	font-weight: bold;
	text-align: left;
}

/* Celulas-titulo de linha (as que comecam com ! no wikitexto) */
#content table.wikitable > * > tr > th {
	background: #dff2fb;
	color: #14303f;
	text-align: left;
}

#content table.wikitable > * > tr:first-child > th {
	color: #fff;
}

/* Listras e realce de linha, para varrer tabelas longas */
#content table.wikitable > * > tr:nth-child(even) > td {
	background: #f4fbfe;
}

#content table.wikitable > * > tr:hover > td {
	background: #eaf6fd;
}

#content table.wikitable tr.pst-indisponivel:hover > td,
#content table.wikitable tr.pst-indisponivel > td {
	background: #f3f6f8;
	color: #5c7180;
}

/* --- Indice --------------------------------------------------------------- */
#content .toc {
	min-width: 280px;
	padding: 0 0 10px;
	border: 1px solid #cbe4f1;
	border-radius: 2px;
	background: #fff;
}

#content .toc .toctitle {
	margin-bottom: 8px;
	padding: 9px 16px;
	border-bottom: 1px solid #dcedf7;
	background: #dff2fb;
	text-align: left;
}

#content .toc .toctitle h2 {
	margin: 0;
	padding: 0;
	border: 0;
	color: #14303f;
	font-family: inherit;
	font-size: 15px;
	font-weight: bold;
}

#content .toc ul {
	margin: 0;
	padding: 0 16px;
	line-height: 1.9;
}

#content .toc ul ul {
	padding: 0 0 0 18px;
}

#content .toc .tocnumber {
	color: #5f7684;
	padding-right: 4px;
}

/* --- Imagem com legenda ---------------------------------------------------- */
#content .thumbinner,
#content figure[typeof~="mw:File/Thumb"],
#content figure[typeof~="mw:File/Frame"] {
	padding: 5px;
	border: 1px solid #cbe4f1;
	border-radius: 2px;
	background: #fff;
}

#content .thumbcaption,
#content figure > figcaption {
	padding: 8px 6px 4px;
	color: #4f6a7a;
	font-size: 92%;
	line-height: 1.5;
	text-align: left;
}

/* --- Fala de NPC ----------------------------------------------------------- */
.pst-quote {
	border-left-color: #096390;
	background: #f4fbfe;
	padding: 12px 16px;
	margin-left: 0;
}

.pst-quote cite {
	color: #0f5878;
}

/* --- Observacao curta ------------------------------------------------------ */
.pst-hatnote {
	border-left-color: #8fd0e8;
}

/* --- Caixa de pendencias --------------------------------------------------- */
.pst-todo {
	border: 1px solid #cbe4f1;
	border-left: 3px solid #096390;
	background: #f4fbfe;
}

/* --- Listas ---------------------------------------------------------------- */
#content .mw-parser-output > ul li,
#content .mw-parser-output > ol li {
	margin-bottom: 5px;
}

/* --- Rodape de categorias --------------------------------------------------- */
#content .catlinks {
	border: 1px solid #cbe4f1;
	background: #f4fbfe;
}

/* --- Grupo de imagens lado a lado -----------------------------------------
   Duas ou mais imagens que contam a mesma coisa (mapa + NPC, fora + dentro).
   Quebram sozinhas em telas estreitas, em vez de estourar a largura.

   <div class="pst-figs">
   [[File:A.png|450px|link=]]
   [[File:B.png|450px|link=]]
   </div>
   -------------------------------------------------------------------------- */
.pst-figs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 14px;
	margin: 1em 0;
}

.pst-figs > * {
	max-width: 100%;
}

.pst-figs img {
	max-width: 100%;
	height: auto;
	border: 1px solid #cbe4f1;
	/* sem isto a borda de 1px de cada lado fica FORA dos 100% e a imagem
	   estoura a coluna em 2px no celular */
	box-sizing: border-box;
}

/* Legenda de uma imagem avulsa ou de um par */
.pst-legenda {
	margin: 7px 0 1.5em;
	color: #4f6a7a;
	font-size: 92%;
	line-height: 1.5;
	text-align: center;
}

/* --- Tabela centralizada com largura natural ------------------------------
   Como na wiki de referencia: a tabela ocupa o que o conteudo pede e fica no
   eixo central, em vez de esticar ate as bordas.
   -------------------------------------------------------------------------- */
#content .mw-parser-output > table.wikitable {
	width: auto;
	max-width: 100%;
}

/* Celula de icone dentro de tabela */
#content table.wikitable td.pst-icone {
	width: 56px;
	padding: 4px;
	text-align: center;
}

/* Imagens nunca estouram a coluna */
#content .mw-parser-output img {
	max-width: 100%;
	height: auto;
}

/* Tabelas largas rolam em vez de esticar a pagina.
   A barra lateral do Vector legado ocupa 224px fixos e nao encolhe, entao a
   coluna util vale mais ou menos (viewport - 272px). Abaixo de ~1050px de
   viewport as tabelas maiores ja nao cabem, e e ai que o scroll precisa
   entrar - nao em 760px, que e tarde demais. */
@media (max-width: 1050px) {
	#content .mw-parser-output > table.wikitable {
		display: block;
		width: auto;
		max-width: 100%;
		overflow-x: auto;
	}
}


/* Ficha de boss: o titulo da pagina e redundante, porque a ficha ja mostra o
   nome no cabecalho. O Module:Campeao troca o titulo por um span com esta
   classe via DISPLAYTITLE, entao a regra e simples e funciona em qualquer
   navegador -- diferente de :has(), que exige Chrome 105+ ou Firefox 121+. */
.cp-h1-oculto {
	display: none;
}

#content:has(.cp-boss) #firstHeading {
	display: none;
}

/* Hover do banner da página inicial. Vivia só no MediaWiki:Vector.css,
   que não carrega no Vector 2022 — subiu para cá para valer em qualquer skin. */
.banner-hover img {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	border-radius: 8px;
}

.banner-hover img:hover {
	transform: scale(1.02);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* --- Retratos de boss ------------------------------------------------------
   Indice visual: uma grade de retratos que levam a pagina de cada boss.
   E o padrao da referencia na pagina Nightmare Terror, onde cada banner e um
   PNG pronto de 250x251 dentro de <a>, com `transition: transform .25s` e
   `transform: scale(.95)` no hover.
   Duas diferencas necessarias:
   - o circulo e a placa de nome sao CSS, porque nossa arte e o PNG oficial de
     fundo transparente e nao um banner composto. Havendo banner pronto um dia,
     troca-se a imagem e apaga-se o circulo;
   - o hover fica no bloco, nao no <a>: o `link=` do wikitext so envolve a
     imagem, entao animar o <a> deixaria a placa de nome parada.
   Sem sombra e sem gradiente de proposito: a moldura basta. */
.pst-retratos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22px;
	/* 3 por linha, como a referencia: 3x210 + 2x22 = 674. Sem esse teto a
	   coluna de 948px cabe 4 e sobra uma linha orfa de 2. */
	max-width: 674px;
	margin: 20px auto;
}

.pst-retrato {
	width: 210px;
	text-align: center;
	transition: transform 0.25s;
}

.pst-retrato:hover {
	/* encolhe em vez de crescer, como a referencia: da sensacao de clique e
	   nao empurra os vizinhos da grade */
	transform: scale(0.95);
}

.pst-retrato-arte {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 190px;
	height: 190px;
	margin: 0 auto;
	border: 3px solid #096390;
	border-radius: 50%;
	background: #d5e9f4;
}

#content .pst-retratos .pst-retrato-arte img {
	width: auto;
	height: auto;
	max-width: 165px;
	max-height: 165px;
}

.pst-retrato-nome {
	display: inline-block;
	position: relative;
	margin-top: -16px;
	padding: 5px 14px;
	border-radius: 8px;
	background: #096390;
	font-size: 13px;
	font-weight: bold;
}

.pst-retrato-nome a,
.pst-retrato-nome a:visited,
.pst-retrato-nome a:hover {
	color: #ffffff;
	text-decoration: none;
}

@media (max-width: 420px) {
	.pst-retratos {
		gap: 14px;
	}

	.pst-retrato {
		width: 150px;
	}

	.pst-retrato-arte {
		width: 134px;
		height: 134px;
	}
}


/* --- Veja mais -------------------------------------------------------------
   Ponteiro para outra pagina, colocado no ponto do texto onde o assunto
   aparece. E o padrao da referencia: eles nao tem secao "Ver tambem" em
   nenhum dos 4.670 artigos do dump, mas 48% deles carregam este bloco no meio
   do texto. Link no fim da pagina ninguem clica; link no paragrafo que
   levantou a duvida, sim. */
.pst-vejamais {
	margin: 14px auto;
	max-width: 60%;
	padding: 8px 14px;
	border: 1px solid #d5e9f4;
	border-left: 4px solid #096390;
	background: #f4fafd;
	font-size: 13px;
}

.pst-vejamais b {
	color: #096390;
}

@media (max-width: 720px) {
	.pst-vejamais {
		max-width: 100%;
	}
}

/* --- Espaco reservado de imagem ---------------------------------------------
   Caixa preta no lugar exato onde a imagem vai entrar, com a legenda do que
   falta. A regra normal da skill e deixar o markup dentro de comentario HTML,
   invisivel para o leitor; isto e a excecao para paginas em constru cao, onde
   o espaco reservado visivel ajuda quem vai produzir a arte a saber o que
   fazer e em que tamanho. Trocar por [[File:...]] assim que a imagem existir. */
.pst-vazio {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	margin: 14px auto 0;
	padding: 10px;
	background: #14181d;
	border-radius: 4px;
	color: #8b97a3;
	font-size: 12px;
	font-style: italic;
	text-align: center;
	box-sizing: border-box;
}