.MistMonsterSpawnMap {
	box-sizing: border-box;
	color: #2b2117;
	contain: inline-size;
	font-family: Arial, Helvetica, sans-serif;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	width: 100%;
}

.MistMonsterSpawnMap *,
.MistMonsterSpawnMap *::before,
.MistMonsterSpawnMap *::after {
	box-sizing: border-box;
}

.MistMonsterSpawnMap [data-spawn-map-data] {
	display: none;
}

.MistMonsterSpawnToolbar {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 8px;
}

.MistMonsterSpawnIdentity {
	align-items: center;
	display: flex;
	gap: 8px;
	min-width: 0;
}

.MistMonsterSpawnIdentity img,
.MistMonsterSpawnEmpty img {
	height: 48px;
	image-rendering: pixelated;
	object-fit: contain;
	width: 48px;
}

.MistMonsterSpawnIdentity span,
.MistMonsterSpawnEmpty span {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.MistMonsterSpawnIdentity strong {
	font-size: 14px;
}

.MistMonsterSpawnIdentity small,
.MistMonsterSpawnEmpty small {
	color: #5b4a39;
	line-height: 1.35;
}

.MistMonsterSpawnActions {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	justify-content: flex-end;
}

.MistMonsterSpawnActions button {
	background: linear-gradient(#f7e7bd, #d6bd82);
	border: 1px solid #7f6235;
	border-radius: 3px;
	color: #33220f;
	cursor: pointer;
	font: bold 12px Arial, Helvetica, sans-serif;
	min-height: 30px;
	padding: 5px 9px;
}

.MistMonsterSpawnActions button:hover {
	background: linear-gradient(#fff1c9, #e5ca8d);
}

.MistMonsterSpawnActions button:focus-visible {
	outline: 2px solid #8b1d13;
	outline-offset: 2px;
}

.MistMonsterSpawnActions button:disabled {
	cursor: default;
	opacity: 0.45;
}

.MistMonsterSpawnRoute {
	align-items: baseline;
	background: #efe1bd;
	border: 1px solid #a48a59;
	display: flex;
	gap: 10px;
	line-height: 1.4;
	margin-bottom: 8px;
	padding: 8px 9px;
}

.MistMonsterSpawnRoute strong {
	color: #4b3520;
	flex: 0 0 150px;
	font-size: 12px;
}

.MistMonsterSpawnRoute span {
	color: #4c3b2b;
	font-size: 11px;
}

.MistMonsterSpawnMap[data-route-confidence="verified"] .MistMonsterSpawnRoute strong {
	color: #275126;
}

.MistMonsterSpawnMap[data-route-confidence="likely"] .MistMonsterSpawnRoute strong {
	color: #795113;
}

.MistMonsterSpawnMap[data-route-confidence="unknown"] .MistMonsterSpawnRoute strong {
	color: #7b1c12;
}

.MistMonsterSpawnFloor {
	background: #4b3520;
	border: 1px solid #2f2013;
	border-radius: 3px 3px 0 0;
	color: #fff2cf;
	font-size: 12px;
	font-weight: bold;
	padding: 5px 9px;
}

.MistMonsterSpawnCanvasWrap {
	background: #191b1d;
	border: 2px solid #4d3824;
	box-sizing: border-box;
	contain: layout paint size;
	cursor: grab;
	height: 470px;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	position: relative;
	touch-action: none;
	width: 100%;
}

.MistMonsterSpawnCanvasWrap.is-dragging {
	cursor: grabbing;
}

.MistMonsterSpawnCanvasWrap.has-monster-selection:not(.is-dragging) {
	cursor: pointer;
}

.MistMonsterSpawnCanvasWrap canvas {
	display: block;
	height: 100% !important;
	inset: 0;
	max-width: 100%;
	min-width: 0;
	position: absolute;
	width: 100% !important;
}

.MistMonsterSpawnMapKey {
	background: rgba(28, 18, 10, 0.82);
	border-radius: 3px;
	bottom: 7px;
	color: #fff3ce;
	font-size: 11px;
	max-width: calc(100% - 14px);
	padding: 4px 7px;
	pointer-events: none;
	position: absolute;
	right: 7px;
	text-align: right;
}

.MistMonsterSpawnPreview {
	align-items: center;
	background: rgba(28, 18, 10, 0.94);
	border: 1px solid #d7b866;
	border-radius: 3px;
	color: #fff3ce;
	display: flex;
	gap: 7px;
	font-size: 11px;
	left: 7px;
	max-width: calc(100% - 14px);
	overflow: hidden;
	padding: 6px 7px;
	position: absolute;
	top: 7px;
}

.MistMonsterSpawnPreview[hidden] {
	display: none;
}

.MistMonsterSpawnPreview img {
	flex: 0 0 38px;
	height: 38px;
	image-rendering: pixelated;
	object-fit: contain;
	width: 38px;
}

.MistMonsterSpawnPreview span {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.MistMonsterSpawnPreview strong,
.MistMonsterSpawnPreview small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.MistMonsterSpawnPreview small {
	color: #dbc99d;
	font-size: 10px;
}

.MistMonsterSpawnPreview a {
	background: #f1d58f;
	border: 1px solid #fff0c3;
	border-radius: 3px;
	color: #35220e;
	flex: 0 0 auto;
	font-weight: bold;
	padding: 6px 8px;
	text-decoration: none;
}

.MistMonsterSpawnPreview a:hover {
	background: #fff0bd;
}

.MistMonsterSpawnPreview a:focus-visible {
	outline: 2px solid #fff3ce;
	outline-offset: 2px;
}

.MistMonsterSpawnHelp {
	color: #5b4a39;
	font-size: 11px;
	margin: 6px 2px 0;
	text-align: center;
}

.MistMonsterSpawnEmpty {
	align-items: center;
	background: #efe1bd;
	border: 1px solid #a48a59;
	display: flex;
	gap: 12px;
	padding: 12px;
}

.MistMonsterSpawnEmpty strong {
	color: #7b1c12;
	font-size: 15px;
	margin-bottom: 2px;
}

@media (max-width: 620px) {
	.MistMonsterSpawnToolbar {
		align-items: stretch;
		flex-direction: column;
	}

	.MistMonsterSpawnActions {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.MistMonsterSpawnActions button {
		padding-inline: 4px;
	}

	.MistMonsterSpawnRoute {
		align-items: stretch;
		flex-direction: column;
		gap: 3px;
	}

	.MistMonsterSpawnRoute strong {
		flex-basis: auto;
	}

	.MistMonsterSpawnCanvasWrap {
		height: 360px;
	}

	.MistMonsterSpawnPreview {
		align-items: stretch;
		flex-wrap: wrap;
	}

	.MistMonsterSpawnPreview span {
		justify-content: center;
	}

	.MistMonsterSpawnPreview a {
		flex-basis: 100%;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.MistMonsterSpawnActions button {
		scroll-behavior: auto;
	}
}