.tk-goalie-properties {
	box-sizing: border-box;
	width: 100%;
	max-width: 42rem;
	margin: 1.25rem 0;
	padding: 1rem;
	border: 1px solid #d9dee5;
	border-radius: 0.75rem;
	background: #fff;
	color: #242933;
}

.tk-goalie-properties[hidden] { display: none !important; }

.tk-goalie-properties__title {
	margin: 0 0 0.85rem;
	font-size: 1.05rem;
	line-height: 1.35;
}

.tk-goalie-properties__list {
	display: grid;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tk-goalie-properties__row {
	display: grid;
	grid-template-columns: minmax(6.5rem, 1fr) auto 3.25rem;
	align-items: center;
	gap: 0.7rem;
	min-height: 1.55rem;
}

.tk-goalie-properties__label { font-size: 0.92rem; }

.tk-goalie-properties__scale {
	display: flex;
	align-items: center;
	gap: clamp(0.08rem, 0.3vw, 0.2rem);
}

.tk-goalie-icon {
	display: block;
	flex: 0 0 auto;
	width: clamp(0.95rem, 2.3vw, 1.35rem);
	aspect-ratio: 1;
	background-color: #e8ebef;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.tk-goalie-icon.is-full { background-color: var(--tk-goalie-color); }
.tk-goalie-icon.is-half { background: linear-gradient(90deg, var(--tk-goalie-color) 0 50%, #e8ebef 50% 100%); }

.tk-goalie-icon--protection {
	--tk-goalie-color: #d65243;
	-webkit-mask-image: url('../icons/protection.svg');
	mask-image: url('../icons/protection.svg');
}
.tk-goalie-icon--agility {
	--tk-goalie-color: #287fbd;
	-webkit-mask-image: url('../icons/agility.svg');
	mask-image: url('../icons/agility.svg');
}
.tk-goalie-icon--foam {
	--tk-goalie-color: #36a879;
	-webkit-mask-image: url('../icons/foam.svg');
	mask-image: url('../icons/foam.svg');
}
.tk-goalie-icon--durability {
	--tk-goalie-color: #7154a3;
	-webkit-mask-image: url('../icons/durability.svg');
	mask-image: url('../icons/durability.svg');
}

.tk-goalie-properties__value {
	text-align: right;
	font-size: 0.92rem;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
	.tk-goalie-properties { padding: 0.8rem; }
	.tk-goalie-properties__row {
		grid-template-columns: 4rem minmax(0, 1fr) 2.8rem;
		gap: 0.35rem;
	}
	.tk-goalie-properties__scale { justify-content: space-between; }
	.tk-goalie-icon { width: clamp(0.78rem, 4vw, 1.05rem); }
}