.character-points-widget {
	box-sizing: border-box;
	position: relative;
	width: min(100%, 520px);
	padding: 16px;
	border: 2px solid #2d4658;
	border-radius: 8px;
	background: #f8fbfc;
	color: #17242f;
	font-family: Arimo, Arial, sans-serif;
	box-shadow: 0 8px 24px rgba(23, 36, 47, 0.18);
	overflow: visible;
}

.character-points-widget *,
.character-points-widget *::before,
.character-points-widget *::after {
	box-sizing: border-box;
}

.cpw-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.cpw-title {
	font-family: Comfortaa, Arimo, Arial, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.15;
}

.cpw-earned {
	flex: 0 0 auto;
	min-width: 58px;
	padding: 5px 9px;
	border-radius: 999px;
	background: #276f48;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}

.cpw-active-reward {
	--cpw-badge-start-x: 0px;
	--cpw-badge-start-y: 16px;
	--cpw-badge-mid-x: 0px;
	--cpw-badge-mid-y: -20px;
	--cpw-badge-end-x: 0px;
	--cpw-badge-end-y: -30px;
	position: absolute;
	left: 50%;
	top: 56px;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	width: min(64%, 214px);
	min-height: 104px;
	padding: 18px 23px;
	clip-path: polygon(
		50% 0%, 58% 14%, 73% 7%, 77% 23%, 93% 24%, 86% 39%,
		100% 50%, 86% 61%, 93% 76%, 77% 77%, 73% 93%, 58% 86%,
		50% 100%, 42% 86%, 27% 93%, 23% 77%, 7% 76%, 14% 61%,
		0% 50%, 14% 39%, 7% 24%, 23% 23%, 27% 7%, 42% 14%
	);
	background: radial-gradient(circle at 35% 28%, #fff8ca 0%, #f4c54e 46%, #d48a1c 100%);
	color: #17242f;
	opacity: 0;
	pointer-events: none;
	text-align: center;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58);
	filter: drop-shadow(0 11px 16px rgba(23, 36, 47, 0.24));
	transform-origin: 50% 56%;
}

.cpw-active-reward::before {
	content: "";
	position: absolute;
	inset: 12px;
	clip-path: inherit;
	border: 2px dashed rgba(116, 72, 0, 0.38);
	pointer-events: none;
}

.cpw-active-reward.is-bonus {
	background: radial-gradient(circle at 35% 28%, #fff6bb 0%, #ffce39 42%, #e4512b 100%);
}

.cpw-active-reward.pop {
	animation: cpw-badge-pop 2360ms cubic-bezier(0.22, 1.18, 0.38, 1) both;
}

.cpw-active-kicker {
	position: relative;
	z-index: 1;
	color: #744800;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
}

.cpw-active-label {
	position: relative;
	z-index: 1;
	min-width: 0;
	font-family: Comfortaa, Arimo, Arial, sans-serif;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.08;
}

.cpw-active-points {
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: 24px;
	font-weight: 900;
	line-height: 1;
	text-shadow: 0 2px 3px rgba(89, 39, 0, 0.36);
}

.cpw-track {
	position: relative;
	overflow: hidden;
	height: 24px;
	border: 2px solid #293f4f;
	border-radius: 999px;
	background: #d8e3e8;
}

.cpw-fill {
	width: 0;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #1f8b69, #f2c14e);
	transition: box-shadow 180ms ease;
}

.cpw-animating .cpw-fill,
.cpw-level-up .cpw-fill {
	box-shadow: 0 0 18px rgba(242, 193, 78, 0.78);
}

.cpw-labels {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 7px;
	color: #415665;
	font-size: 13px;
	line-height: 1.25;
}

.cpw-awards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	margin-top: 14px;
}

.cpw-card {
	min-width: 0;
	padding: 10px;
	border: 1px solid #b9cad3;
	border-radius: 8px;
	background: #fff;
}

.cpw-card .character-card-display {
	margin: 0;
}

.cpw-card-image {
	display: block;
	width: 100%;
	height: 104px;
	object-fit: contain;
	margin-bottom: 8px;
}

.cpw-card-meta {
	color: #6b7c87;
	font-size: 12px;
	text-transform: uppercase;
}

.cpw-card-name {
	overflow-wrap: anywhere;
	font-family: Comfortaa, Arimo, Arial, sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
}

.cpw-card-family {
	margin-top: 3px;
	color: #4c6474;
	font-size: 13px;
}

.character-card-display {
	overflow: hidden;
	border: 1px solid #b9cad3;
	border-radius: 8px;
	background: linear-gradient(180deg, #f7fbfd 0%, #e9f2f5 100%);
	color: #17242f;
}

.ccd-stage {
	position: relative;
	height: 250px;
	width: 300px;
	background:
		linear-gradient(180deg, rgba(143, 194, 222, 0.34) 0%, rgba(143, 194, 222, 0) 58%),
		linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(111, 157, 82, 0.22) 100%);
}

.ccd-part {
	position: absolute;
	transform-origin: 50% 50%;
}

.ccd-part svg,
.ccd-part img {
	display: block;
	height: 100%;
	overflow: visible;
	width: 100%;
}

.ccd-meta {
	padding: 10px 12px 12px;
	background: rgba(255, 255, 255, 0.86);
}

.ccd-kicker {
	color: #6b7c87;
	font-size: 12px;
	text-transform: uppercase;
}

.ccd-name {
	overflow-wrap: anywhere;
	font-family: Comfortaa, Arimo, Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
}

.ccd-family {
	margin-top: 3px;
	color: #4c6474;
	font-size: 13px;
}

.cpw-auth-message {
	margin-top: 14px;
	padding: 10px 12px;
	border: 1px solid #d0a44a;
	border-radius: 8px;
	background: #fff7df;
	color: #5f4610;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

.character-points-overlay {
	position: fixed;
	inset: 0;
	z-index: 20000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(9, 18, 25, 0.56);
}

.cpw-overlay-panel {
	width: min(100%, 560px);
}

.cpw-overlay-panel .character-points-widget {
	width: 100%;
}

.cpw-close {
	display: block;
	min-height: 40px;
	margin: 12px auto 0;
	padding: 8px 18px;
	border: 0;
	border-radius: 6px;
	background: #263f53;
	color: #fff;
	font: 700 15px Arimo, Arial, sans-serif;
	cursor: pointer;
}

.cpw-close:hover,
.cpw-close:focus {
	background: #1c3143;
}

@keyframes cpw-badge-pop {
	0% {
		opacity: 0;
		transform: translate(calc(-50% + var(--cpw-badge-start-x)), var(--cpw-badge-start-y)) scale(0.28) rotate(-13deg);
	}

	42% {
		opacity: 1;
		transform: translate(calc(-50% + var(--cpw-badge-mid-x)), var(--cpw-badge-mid-y)) scale(1.2) rotate(8deg);
	}

	58% {
		opacity: 1;
		transform: translate(calc(-50% + var(--cpw-badge-end-x)), var(--cpw-badge-end-y)) scale(0.96) rotate(-5deg);
	}

	74% {
		opacity: 1;
		transform: translate(calc(-50% + var(--cpw-badge-end-x)), var(--cpw-badge-end-y)) scale(1.05) rotate(3deg);
	}

	100% {
		opacity: 0;
		transform: translate(calc(-50% + var(--cpw-badge-end-x)), var(--cpw-badge-end-y)) scale(0.86) rotate(0);
	}
}

@media (max-width: 520px) {
	.character-points-widget {
		padding: 13px;
	}

	.cpw-header,
	.cpw-labels {
		align-items: flex-start;
		flex-direction: column;
	}

	.cpw-earned {
		align-self: flex-start;
	}

	.cpw-active-reward {
		top: 62px;
		width: min(78%, 194px);
		min-height: 96px;
		padding: 16px 20px;
	}

	.cpw-active-label {
		font-size: 15px;
	}
}