.assetlog-character {
	--assetlog-character-ao: #075f92;
	--assetlog-character-ao-soft: #e7f5fc;
	--assetlog-character-momo: #9b315c;
	--assetlog-character-momo-soft: #fff0f5;
	--assetlog-character-border: #cbd5e1;

	box-sizing: border-box;
	clear: both;
	display: grid;
	gap: 0.75rem;
	margin: 2rem auto;
	max-width: 48rem;
	padding: 0.25rem;
}

.assetlog-character *,
.assetlog-character *::before,
.assetlog-character *::after {
	box-sizing: inherit;
}

.assetlog-character__turn {
	align-items: end;
	display: grid;
	gap: 0.65rem;
	grid-template-columns: 4.75rem minmax(0, 1fr);
}

.assetlog-character__turn--ao {
	grid-template-columns: minmax(0, 1fr) 4.75rem;
}

.assetlog-character__turn--ao .assetlog-character__portrait {
	grid-column: 2;
	grid-row: 1;
}

.assetlog-character__turn.assetlog-character__turn--ao .assetlog-character__bubble {
	grid-column: 1;
	grid-row: 1;
}

.assetlog-character__portrait {
	align-items: end;
	display: flex;
	height: 4.75rem;
	justify-content: center;
	overflow: hidden;
	width: 4.75rem;
}

.assetlog-character__image {
	display: block;
	height: auto;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

.assetlog-character__bubble {
	background: var(--assetlog-character-momo-soft);
	border: 1px solid #d9a2b8;
	border-radius: 1rem 1rem 1rem 0.25rem;
	color: #1e293b;
	min-width: 0;
	padding: 0.75rem 0.9rem;
}

.assetlog-character__turn--ao .assetlog-character__bubble {
	background: var(--assetlog-character-ao-soft);
	border-color: #8bbbd3;
	border-radius: 1rem 1rem 0.25rem;
}

.assetlog-character__name,
.assetlog-character__text {
	margin: 0;
}

.assetlog-character__name {
	color: var(--assetlog-character-momo);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
	margin-bottom: 0.15rem;
}

.assetlog-character__turn--ao .assetlog-character__name {
	color: var(--assetlog-character-ao);
}

.assetlog-character__text {
	font-size: 0.96rem;
	line-height: 1.75;
	overflow-wrap: anywhere;
}

@media (width <= 30rem) {
	.assetlog-character {
		gap: 0.65rem;
		margin: 1.5rem auto;
		padding-inline: 0;
	}

	.assetlog-character__turn {
		gap: 0.45rem;
		grid-template-columns: 3.5rem minmax(0, 1fr);
	}

	.assetlog-character__turn--ao {
		grid-template-columns: minmax(0, 1fr) 3.5rem;
	}

	.assetlog-character__portrait {
		height: 3.5rem;
		width: 3.5rem;
	}

	.assetlog-character__bubble {
		padding: 0.65rem 0.7rem;
	}

	.assetlog-character__text {
		font-size: 0.91rem;
		line-height: 1.68;
	}
}

@media (forced-colors: active) {
	.assetlog-character__bubble,
	.assetlog-character__turn--ao .assetlog-character__bubble {
		background: Canvas;
		border: 2px solid CanvasText;
		color: CanvasText;
	}

	.assetlog-character__name,
	.assetlog-character__turn--ao .assetlog-character__name {
		color: CanvasText;
	}
}

@media print {
	.assetlog-character {
		break-inside: avoid;
	}
}