.rotate-device-hint {
	display: none;
}

@media (max-width: 1180px) and (orientation: portrait) {
	.rotate-device-hint {
		position: relative;
		isolation: isolate;
		display: flex;
		align-items: center;
		width: 90%;
		max-width: calc(16 / 9 * 90vh);
		height: clamp(124px, 30vw, 200px);
		margin-top: clamp(16px, 2.2vw, 24px);
		overflow: hidden;
		border: 1px solid rgba(139, 210, 255, 0.62);
		border-radius: 18px;
		background:
			linear-gradient(
				90deg,
				rgba(5, 11, 39, 0.98) 0%,
				rgba(8, 20, 62, 0.94) 48%,
				rgba(15, 35, 84, 0.48) 72%,
				rgba(12, 25, 63, 0.18) 100%
			)
				0 0 / 100% 100% no-repeat,
			url(./rotate-device-catgirl-v2.png) right center / auto 100% no-repeat,
			#050b27;
		box-shadow:
			0 14px 34px rgba(0, 0, 0, 0.42),
			inset 0 0 24px rgba(74, 172, 255, 0.2);
		color: #fff;
		font-family: "Moderustic", "Inter", Arial, sans-serif;
		text-align: left;
	}

	.rotate-device-hint::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;
		background:
			radial-gradient(circle at 18% 18%, rgba(126, 218, 255, 0.28), transparent 32%),
			linear-gradient(110deg, transparent 45%, rgba(120, 190, 255, 0.12));
		pointer-events: none;
	}

	.rotate-device-hint__content {
		display: flex;
		align-items: center;
		gap: clamp(10px, 1.5vw, 18px);
		width: 62%;
		padding: clamp(16px, 2.2vw, 26px);
		text-shadow: 0 2px 8px rgba(0, 0, 0, 0.86);
	}

	.rotate-device-hint__icon {
		flex: 0 0 clamp(43px, 5vw, 64px);
		width: clamp(43px, 5vw, 64px);
		fill: none;
		stroke: #8fe8ff;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 3;
		filter: drop-shadow(0 0 8px rgba(82, 205, 255, 0.72));
		animation: rotate-device-hint-rock 2.8s ease-in-out infinite;
	}

	.rotate-device-hint__content p {
		margin: 0;
		font-size: clamp(20px, 4.7vw, 30px);
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0.01em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rotate-device-hint__icon {
		animation: none;
	}
}

@keyframes rotate-device-hint-rock {
	0%,
	100% {
		transform: rotate(0deg);
	}
	35% {
		transform: rotate(-9deg);
	}
	70% {
		transform: rotate(9deg);
	}
}