/* Shared dialogue for the footer and playable character. */
/* A native button keeps the character usable with a pointer, touch or keyboard. */
body :is(.sj-footer, .sj-game) button.sj-character-poke,
body :is(.sj-footer, .sj-game) button.sj-character-poke:is(:hover, :focus, :focus-visible, :active, :disabled) {
	display: block;
	width: 84px;
	height: 96px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--color-white);
	box-shadow: none;
	transform: none;
	filter: none;
	transition: none;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
	touch-action: manipulation;
}
body :is(.sj-footer, .sj-game) button.sj-character-poke:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: -2px;
}

/* Compact RPG dialogue: a white/navy double frame, pixel tail and the same
   offset dither as the game. Positioning is paint-only, with no page reflow. */
:is(.sj-footer, .sj-game) .sj-character-speech {
	--sj-speech-tail-x: 40px;
	position: absolute;
	z-index: 5;
	left: 16px;
	width: 320px;
	max-width: calc(100% - 32px);
	margin: 0;
	padding: 3px;
	border: 4px solid var(--color-white);
	border-radius: 0;
	background: var(--color-navy);
	color: var(--color-navy);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-body);
	line-height: 1.6;
	text-align: left;
	pointer-events: none;
}
:is(.sj-footer, .sj-game) .sj-character-speech[hidden] { display: none; }
.sj-character-speech-text {
	display: block;
	min-height: calc(3.2em + 32px);
	padding: 12px 16px 20px;
	background: var(--color-white);
	overflow-wrap: break-word;
}
.sj-character-speech::before {
	position: absolute;
	left: calc(var(--sj-speech-tail-x) - 12px);
	top: calc(100% + 3px);
	width: 24px;
	height: 16px;
	background: var(--color-white);
	clip-path: polygon(0 0, 100% 0, 100% 4px, 20px 4px, 20px 8px, 16px 8px, 16px 12px, 12px 12px, 12px 16px, 8px 16px, 8px 8px, 4px 8px, 4px 4px, 0 4px);
	content: '';
}
.sj-character-speech-prompt {
	position: absolute;
	right: 19px;
	bottom: 13px;
	width: 10px;
	height: 6px;
	background: var(--color-navy);
	clip-path: polygon(0 0, 100% 0, 100% 2px, 8px 2px, 8px 4px, 6px 4px, 6px 6px, 4px 6px, 4px 4px, 2px 4px, 2px 2px, 0 2px);
}
.sj-character-speech-announcement {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
@media (forced-colors: active) {
	:is(.sj-footer, .sj-game) .sj-character-speech { border-color: CanvasText; background: CanvasText; color: CanvasText; }
	.sj-character-speech-text { background: Canvas; }
	.sj-character-speech::before, .sj-character-speech-prompt { background: CanvasText; }
	body :is(.sj-footer, .sj-game) button.sj-character-poke:focus-visible { outline-color: Highlight; }
}