.nxt_console_peek_layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 9999; opacity: .7; }
.nxt_console_peek_pivot { position: absolute; width: 0; height: 0; }
.nxt_console_peek_pad {
	position: absolute;
	width: clamp(56px, 7.06vw, 96px);
	aspect-ratio: 240 / 170;
	transform-origin: 50% 100%;
	will-change: transform;
}
.nxt_console_peek_pad img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18)); }
.nxt_console_peek_puff { position: absolute; border-radius: 50%; background: #fff; border: 2px solid #d8d4cc; }
.nxt_console_peek_line { position: absolute; width: 3px; border-radius: 3px; background: #1d1d1f; opacity: 0; }

/* Comic speech bubble, its tail points at the edge where the controller left */
.nxt_console_peek_bubble {
	position: absolute;
	padding: 10px 14px;
	background: #fff;
	color: #1d1d1f;
	border: 3px solid #1d1d1f;
	border-radius: 14px;
	box-shadow: 4px 4px 0 #1d1d1f;
	/* Termina is the brand font: global.css declares it */
	font: 600 12px/1.5 "Termina", sans-serif;
	text-align: center;
	white-space: nowrap;
}
.nxt_console_peek_bubble::before,
.nxt_console_peek_bubble::after { content: ""; position: absolute; border: solid transparent; }
.nxt_console_peek_bubble::before { border-width: 13px; }
.nxt_console_peek_bubble::after { border-width: 9px; }

.nxt_console_peek_bubble[data-edge="bottom"]::before { top: 100%; left: calc(50% - 13px); border-top-color: #1d1d1f; }
.nxt_console_peek_bubble[data-edge="bottom"]::after { top: 100%; left: calc(50% - 9px); border-top-color: #fff; }
.nxt_console_peek_bubble[data-edge="top"]::before { bottom: 100%; left: calc(50% - 13px); border-bottom-color: #1d1d1f; }
.nxt_console_peek_bubble[data-edge="top"]::after { bottom: 100%; left: calc(50% - 9px); border-bottom-color: #fff; }
.nxt_console_peek_bubble[data-edge="left"]::before { right: 100%; top: calc(50% - 13px); border-right-color: #1d1d1f; }
.nxt_console_peek_bubble[data-edge="left"]::after { right: 100%; top: calc(50% - 9px); border-right-color: #fff; }
.nxt_console_peek_bubble[data-edge="right"]::before { left: 100%; top: calc(50% - 13px); border-left-color: #1d1d1f; }
.nxt_console_peek_bubble[data-edge="right"]::after { left: 100%; top: calc(50% - 9px); border-left-color: #fff; }

/* Mobile: bubble and text 10 % smaller */
@media (max-width: 767px) {
	.nxt_console_peek_bubble { padding: 9px 13px; border-radius: 13px; font-size: 10.8px; }
}