/* "I own this" ticks, styled after the game's owned badge */

[data-mbb-card] {
	position: relative;
}

[data-mbb-card]:has(.mbb-own:not([hidden])) {
	cursor: pointer;
}

.mbb-found {
	display: inline-flex;
	align-self: flex-start;
	margin-top: 10px;
	/* Argentum sits high in its line box, so the top gets the extra pixels */
	padding: 9px 18px 6px;
	border-radius: 999px;
	background: var(--mbb-black);
	font-size: 18px;
	font-weight: 900;
	line-height: 1;
	color: var(--mbb-yellow);
}

.mbb-found[hidden],
.mbb-own[hidden],
.mbb-pill-heading__count[hidden] {
	display: none;
}

.mbb-pill-heading__count {
	opacity: 0.7;
	font-weight: 800;
}

.mbb-own {
	position: absolute;
	z-index: 3;
	top: -4%;
	left: -7%;
	width: 20%;
	aspect-ratio: 1;
	padding: 0;
	border: var(--mbb-stroke) dashed #9a9a9a;
	border-radius: 50%;
	background: var(--mbb-white);
	cursor: pointer;
	transition: transform 120ms ease;
}

.mbb-items-grid .mbb-own {
	width: 26%;
}

.mbb-own[aria-pressed="true"] {
	border: var(--mbb-stroke) solid var(--mbb-black);
	background: #6df800 url(../img/tick-white.png) center / 60% auto no-repeat;
	box-shadow: var(--mbb-shadow-sm);
}

@media (hover: hover) {
	.mbb-own:hover {
		transform: scale(1.1);
	}
}

.mbb-own:focus-visible {
	outline: 3px solid var(--mbb-cyan);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.mbb-own {
		transition: none;
	}
}