.spray-hp {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #e8e6e2 center / cover no-repeat;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: pan-x pan-y;
	isolation: isolate;
}
.spray-hp.is-holding { cursor: none; }
.spray-hp.is-touch-painting { touch-action: none; }

.spray-hp__wall,
.spray-hp__paint,
.spray-hp__gl {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	display: block;
}
.spray-hp__gl { pointer-events: none; z-index: 2; }
.spray-hp__paint { z-index: 1; }

.spray-hp__ui {
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	cursor: default;
	max-width: calc(100% - 24px);
}
.spray-hp__swatches {
	display: flex;
	gap: 6px;
	padding: 6px 8px;
	background: rgba(17, 17, 17, 0.82);
	border-radius: 999px;
}
.spray-hp__swatch {
	width: 24px;
	height: 24px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.85);
	background: var(--sw);
	cursor: pointer;
	transition: transform 0.15s ease;
}
.spray-hp__swatch:hover { transform: scale(1.12); }
.spray-hp__swatch.is-active { box-shadow: 0 0 0 2px #111, 0 0 0 4px #fff; }

.spray-hp__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 0;
	border-radius: 999px;
	background: rgba(17, 17, 17, 0.88);
	color: #fff;
	font: 700 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.spray-hp__btn:hover { background: #000; transform: translateY(-1px); }
.spray-hp__btn svg { width: 16px; height: 16px; flex: none; }
.spray-hp__exit { display: none; }
.spray-hp.is-touch-painting .spray-hp__exit { display: inline-flex; }

.spray-hp__hint {
	position: absolute;
	left: 50%;
	top: 22px;
	transform: translateX(-50%);
	z-index: 4;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.88);
	color: #111;
	font: 600 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
	text-align: center;
	pointer-events: none;
	transition: opacity 0.6s ease;
	max-width: calc(100% - 32px);
}
.spray-hp.has-painted .spray-hp__hint { opacity: 0; }

.spray-hp__logo {
	position: absolute;
	right: 24px;
	bottom: 20px;
	z-index: 3;
	max-width: 45%;
	object-fit: contain;
	pointer-events: none;
}

@media (max-width: 600px) {
	.spray-hp.has-logo .spray-hp__ui { bottom: calc(20px + var(--sprayhp-logo-h, 0px) + 12px); }
	.spray-hp__logo { right: 16px; bottom: 16px; }
	.spray-hp__btn span { display: none; }
	.spray-hp__btn { padding: 11px; }
	.spray-hp__swatch { width: 22px; height: 22px; }
}