/* Map cards: the maps page (maps/index.php, built in JS) and the home page map box (includes/mapcard.php, built in PHP).
   Cards narrower than 215px (phones, the home page's 6 across) switch to the compact layout below: smaller text, short ages. */
.mapCard { position: relative; display: flex; flex-direction: column; background: #252C34; border: 1px solid #333C47; border-radius: 12px; overflow: hidden; font-size: 1rem; line-height: 1.5; text-align: left; container-type: inline-size; container-name: mapcard; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.mapCard:hover { border-color: #7CAE7A; transform: translateY(-3px); box-shadow: 0 10px 24px rgb(0 0 0 / 35%); }
.mapCardThumb { position: relative; aspect-ratio: 2 / 1; overflow: hidden; }
.mapCardThumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: filter 0.15s; }
.mapCard:hover .mapCardThumb > img { filter: brightness(1.12); }
.mapCardNsfw .mapCardThumb > img, .mapCardNsfw:hover .mapCardThumb > img { filter: blur(10px); transform: scale(1.1); }
.mapCardSensitive { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(15 19 24 / 0.45); color: #E6EDF3; font-size: 0.85em; font-weight: 600; }
.mapCardSensitive i { font-size: 1.4em; }
.mapCardCat { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; background: rgba(15 19 24 / 0.8); color: #E6EDF3; font-size: 0.78em; font-weight: 600; }
.mapCardDot { width: 7px; height: 7px; border-radius: 50%; }
.mapCardLike { position: absolute; right: 8px; top: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border: 0; border-radius: 13px; background: rgba(15 19 24 / 0.8); color: #E6EDF3; font-size: 0.8em; font-weight: 600; font-variant-numeric: tabular-nums; }
.mapCardLike::before { content: ""; position: absolute; inset: -8px; }
.mapCardLike:hover { background: rgba(15 19 24 / 0.95); }
.mapCardLike.liked { background: #FFFFFF; color: #E5484D; }
.mapCardNew { position: absolute; left: 8px; bottom: 8px; padding: 1px 8px; border-radius: 6px; background: #7CAE7A; color: #14201A; font-size: 0.72em; font-weight: 700; letter-spacing: 0.06em; }
.mapCardBody { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; min-height: calc(52px + 2.6em); box-sizing: border-box; } /* room for a 2-line title, so every card is the same height */
.mapCardTitle { color: #FFFFFF; font-size: 1em; font-weight: 600; line-height: 1.3; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.mapCardTitle::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mapCardTitle:hover, .mapCard:hover .mapCardTitle { color: #9BC799; text-decoration: none; }
.mapCardAuthor { display: flex; align-items: center; gap: 7px; height: 20px; font-size: 0.86em; min-width: 0; }
.mapCardFlag { flex: none; width: 17px; height: 12px; object-fit: cover; border-radius: 2px; }
.mapCardName { color: #D5DCE3; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapCardXp { flex: none; display: inline-flex; align-items: center; gap: 4px; color: #9AA5B1; font-size: 0.93em; font-variant-numeric: tabular-nums; }
.mapCardXp i { font-size: 0.85em; }
.mapCardStats { margin-top: auto; display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-top: 1px solid #333C47; color: #9AA5B1; font-size: 0.8em; font-variant-numeric: tabular-nums; }
.mapCardStats > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mapCardStats .mapCardAge { margin-left: auto; }
.mapCardAgeShort { display: none; }

@container mapcard (max-width: 215px) {
	.mapCardCat { left: 6px; top: 6px; padding: 1px 6px; font-size: 0.7em; gap: 5px; }
	.mapCardDot { width: 6px; height: 6px; }
	.mapCardLike { right: 6px; top: 6px; height: 22px; padding: 0 7px; font-size: 0.72em; gap: 4px; }
	.mapCardNew { left: 6px; bottom: 6px; font-size: 0.66em; padding: 1px 6px; }
	.mapCardBody { padding: 9px 10px; gap: 6px; min-height: calc(41px + 2.304em); }
	.mapCardTitle { font-size: 0.9em; line-height: 1.28; }
	.mapCardAuthor { font-size: 0.8em; gap: 6px; height: 17px; }
	.mapCardFlag { width: 15px; height: 10px; }
	.mapCardStats { padding: 7px 9px; gap: 8px; font-size: 0.76em; }
	.mapCardStats > span { gap: 3px; }
	.mapCardAgeLong { display: none; }
	.mapCardAgeShort { display: inline; }
}

/* the narrowest cards (the home page on small phones, 360px wide and under) have no room for the clock icon beside downloads, views and age */
@container mapcard (max-width: 150px) {
	.mapCardAge > i { display: none; }
}

@media (max-width: 575px) {
	.mapCard { border-radius: 10px; }
	.mapCard:hover { transform: none; }
}