/* Showcase PoringSaga — visual alinhado à home, em todo o site */

/* —— Layout de conteúdo —— */
.page-box .info-layout-wrap {
	max-width: min(1240px, 100%);
}

.page-box > .container:not(.info-layout-wrap) {
	position: relative;
	max-width: min(1240px, 100%);
}

.page-box > .container:not(.info-layout-wrap)::before {
	content: "";
	position: absolute;
	inset: -1rem -0.5rem 1.5rem;
	background:
		radial-gradient(ellipse 90% 55% at 18% 0%, rgba(78, 172, 255, 0.1), transparent 52%),
		radial-gradient(ellipse 70% 45% at 92% 8%, rgba(78, 172, 255, 0.06), transparent 48%);
	pointer-events: none;
	z-index: 0;
}

.page-box > .container:not(.info-layout-wrap) > * {
	position: relative;
	z-index: 1;
}

/* —— Painéis (.info-panel) —— */
.page-box .info-panel {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 80% 55% at 50% -8%, rgba(78, 172, 255, 0.12) 0%, transparent 58%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #fff 42%, #f8fbff 100%);
	border: 1px solid rgba(78, 172, 255, 0.22);
	box-shadow:
		0 18px 52px rgba(15, 23, 42, 0.1),
		0 0 0 1px rgba(255, 255, 255, 0.75) inset;
}

.page-box .info-panel::before {
	height: 4px;
	background: linear-gradient(
		90deg,
		#1d4ed8 0%,
		#4eacff 35%,
		#7ec4ff 55%,
		#4eacff 75%,
		#6366f1 100%
	);
}

.page-box .info-panel::after {
	content: "";
	position: absolute;
	inset: auto -12% -35% -12%;
	height: 55%;
	background: radial-gradient(ellipse at 50% 0%, rgba(78, 172, 255, 0.1) 0%, transparent 68%);
	pointer-events: none;
	z-index: 0;
}

.page-box .info-panel__head,
.page-box .info-panel__body {
	position: relative;
	z-index: 1;
}

.page-box .wiki-booster .info-panel:hover {
	border-color: rgba(78, 172, 255, 0.38);
	box-shadow:
		0 22px 48px rgba(15, 23, 42, 0.12),
		0 0 0 1px rgba(78, 172, 255, 0.12),
		0 0 24px rgba(78, 172, 255, 0.1);
}

/* Subtítulo gradiente (reutilizável) */
.page-box .site-overtitle,
.page-box .home-bento-head__overtitle {
	font-family: "Roboto Condensed", "Open Sans", sans-serif;
	font-size: clamp(1.08rem, 2.6vw, 1.42rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: linear-gradient(105deg, #1d4ed8 0%, #4eacff 42%, #6366f1 78%, #7c3aed 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@supports not (background-clip: text) {
	.page-box .site-overtitle,
	.page-box .home-bento-head__overtitle {
		color: #2b8ae8;
		background: none;
	}
}

.page-box .site-overtitle::after,
.page-box .home-bento-head__overtitle::after {
	content: "";
	display: block;
	width: min(3.5rem, 18vw);
	height: 3px;
	margin: 0.65rem auto 0;
	border-radius: 3px;
	background: linear-gradient(90deg, #4eacff, #a78bfa);
	opacity: 0.85;
}

/* —— Listas / links em destaque —— */
.page-box .info-highlight-list li {
	padding: 0.9rem 1.05rem 0.9rem 1.15rem;
	border-radius: 12px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
	transition:
		background 0.25s ease,
		border-color 0.25s ease,
		box-shadow 0.25s ease,
		transform 0.25s ease;
}

.page-box .info-highlight-list li:hover {
	background: #fff;
	border-color: rgba(78, 172, 255, 0.35);
	box-shadow: 0 8px 24px rgba(78, 172, 255, 0.12);
	transform: translateY(-2px);
}

.page-box .info-highlight-list li::before {
	width: 3px;
	border-radius: 12px 0 0 12px;
	background: linear-gradient(180deg, #4eacff 0%, #6366f1 100%);
}

/* —— Cards de sistemas (wiki) —— */
.page-box .info-system-card {
	border: 1px solid rgba(78, 172, 255, 0.22);
	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.07);
}

.page-box .info-system-card::after {
	height: 3px;
	background: linear-gradient(90deg, #4eacff, #6366f1);
	opacity: 0.75;
}

.page-box .info-system-card:hover {
	transform: translateY(-4px);
	border-color: rgba(78, 172, 255, 0.45);
	box-shadow:
		0 16px 40px rgba(15, 23, 42, 0.1),
		0 0 22px rgba(78, 172, 255, 0.14);
}

/* —— Rankings e cartões legados —— */
.page-box .card-restart {
	position: relative;
	overflow: hidden;
	padding: 0 !important;
	border-radius: 16px !important;
	border: 1px solid rgba(78, 172, 255, 0.22) !important;
	background:
		radial-gradient(ellipse 80% 50% at 50% -5%, rgba(78, 172, 255, 0.1) 0%, transparent 55%),
		linear-gradient(180deg, #fff 0%, #f8fbff 100%) !important;
	box-shadow:
		0 14px 40px rgba(15, 23, 42, 0.09),
		0 0 0 1px rgba(255, 255, 255, 0.7) inset !important;
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.page-box .card-restart::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #1d4ed8 0%, #4eacff 35%, #7ec4ff 55%, #4eacff 75%, #6366f1 100%);
	z-index: 2;
	pointer-events: none;
}

.page-box .card-restart:hover {
	border-color: rgba(78, 172, 255, 0.38) !important;
	box-shadow:
		0 20px 44px rgba(15, 23, 42, 0.11),
		0 0 24px rgba(78, 172, 255, 0.1) !important;
}

.page-box .card-restart .card__header,
.page-box .card-restart .card__content {
	position: relative;
	z-index: 1;
}

.page-box .card-restart .card__header {
	padding: 1rem 1.15rem 0.5rem;
}

.page-box .card-restart .card__content {
	padding: 0 1rem 1.15rem;
}

.page-box .card-restart .h4-title.bg-title-char {
	display: inline-block;
	border-radius: 999px;
	padding: 0.35rem 0.9rem;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	background: linear-gradient(135deg, #4eacff 0%, #2b8ae8 100%) !important;
	box-shadow: 0 4px 14px rgba(78, 172, 255, 0.3);
}

/* Minha conta */
.page-box .painel-conta__card,
.page-box .painel-conta__char-card {
	border-radius: 16px !important;
	border: 1px solid rgba(78, 172, 255, 0.22) !important;
	background:
		radial-gradient(ellipse 80% 50% at 50% -5%, rgba(78, 172, 255, 0.08) 0%, transparent 55%),
		linear-gradient(180deg, #fff 0%, #f8fbff 100%) !important;
	box-shadow:
		0 14px 40px rgba(15, 23, 42, 0.09),
		0 0 0 1px rgba(255, 255, 255, 0.7) inset !important;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.page-box .painel-conta__card:hover,
.page-box .painel-conta__char-card:hover {
	box-shadow:
		0 18px 44px rgba(15, 23, 42, 0.11),
		0 0 20px rgba(78, 172, 255, 0.1) !important;
	transform: translateY(-2px);
}

.page-box .painel-conta__card-icon {
	background: linear-gradient(135deg, #4eacff 0%, #6366f1 100%) !important;
	box-shadow: 0 4px 14px rgba(78, 172, 255, 0.35);
}

/* Nav lateral / tabs */
.page-box .info-top-nav__tabs,
.page-box .info-sidebar {
	border-color: rgba(78, 172, 255, 0.28);
	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
}

.page-box .info-sidebar__link.is-active {
	box-shadow: 0 6px 20px rgba(78, 172, 255, 0.28);
}

/* Botões primários dentro de page-box */
.page-box .btn-primary {
	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		box-shadow 0.25s ease,
		transform 0.25s ease;
}

.page-box .btn-primary:hover,
.page-box .btn-primary:focus-visible {
	box-shadow: 0 4px 18px rgba(78, 172, 255, 0.35);
	transform: translateY(-1px);
}