.adventure-card {
	width: 100%;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.avatar {
	width: 48px;
	height: 48px;
	font-weight: bold;
}

/* ── Live map ────────────────────────────────────────────────────────────── */
.map-container {
	min-height: 400px;
}

.live-marker {
	--marker-colour: #ff6b35;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--marker-colour);
	/* Thick white ring + dark shadow keeps it readable on any basemap */
	border: 3px solid #fff;
	box-shadow:
		0 0 0 2px rgba(0, 0, 0, 0.45),
		0 2px 6px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	transition: transform 0.15s ease;
}

.live-marker:hover {
	transform: scale(1.25);
}

.adventure-map-frame {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: #6c757d;
}

.adventure-map-image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.btn-trash {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
}

.btn-trash::before {
	content: "";
	width: 1rem;
	height: 1rem;
	display: block;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat var(--icon-trash);
	mask: center / contain no-repeat var(--icon-trash);
	--icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z'/%3E%3Cpath d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z'/%3E%3C/svg%3E");
}