/* ── Share ──────────────────────────────────── */

.share-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	max-width: 100%;
	margin: 2rem auto;
}

.share-image {
	display: block;
	max-width: 100%;
	height: auto;
	cursor: zoom-in;
}

.share-image.zoomed {
	max-width: none;
	cursor: zoom-out;
	align-self: flex-start;
}

.share-image.plain {
	max-width: 100%;
	height: auto;
	cursor: default;
	align-self: center;
}

#date-and-tags {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 1100px;
}

#date {
	font-family: Georama;
	font-size: 1rem;
	letter-spacing: 0.05em;
	border-radius: 0.2rem;
	white-space: nowrap;
}

#tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

#tag-list .tag {
	padding: 0.25rem 0.5rem;
	font-family: Georama;
	font-size: 0.75rem;
	font-weight: bold;
	letter-spacing: 0.05em;
	border-radius: 0.2rem;
	white-space: nowrap;
	cursor: pointer;
}

.attributes {
	background-color: var(--paper-dark);
	color: var(--ink);
	border: 1px solid var(--ink);
}

.character {
	background-color: var(--accent-purple);
	color: var(--paper-dark);
}

.destination {
	background-color: var(--accent-yellow);
	color: var(--paper-dark);
}

/* ── Share Mobile ──────────────────────────── */
@media (max-width: 900px) {
	#date-and-tags {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}
}