Add comprehensive responsive scanline scaling system with anti-aliasing

- Attempt pixel-perfect scanline rendering for scaled displays and zoom scenarios
- Implement dynamic scanline thickness calculation to prevent sub-pixel rendering issues
- Add enhanced kiosk detection via isKioskLike for better fullscreen optimization
- Optimize scanlines for specific kiosk resolutions (1024x768, 1023x767)
- Add responsive SCSS media queries for different display densities
- Include extensive debugging utilities for scanline troubleshooting
- Improve noSleep error handling with proper promise rejection handling
- Update to modern fullscreen API method names
- Add async/await error handling for fullscreen requests
- Trigger resize after fullscreen engagement to apply optimal scaling

server/styles/scss/shared/_scanlines.scss

@@ -1,7 +1,8 @@
 /* REGULAR SCANLINES SETTINGS */
 
-// width of 1 scanline (min.: 1px)
+// width of 1 scanline (responsive units to prevent banding)
 $scan-width: 1px;
+$scan-width-scaled: 0.15vh; // viewport-relative unit for better scaling
 
 // emulates a damage-your-eyes bad pre-2000 CRT screen ♥ (true, false)
 $scan-crt: false;
@@ -75,7 +76,7 @@ $scan-opacity: .75;
 		@include scan-moving($scan-moving-line);
 	}
 
-	// the scanlines, so!
+	// the scanlines, so! - with responsive scaling for low-res displays
 	&:after {
 		top: 0;
 		right: 0;
@@ -87,6 +88,57 @@ $scan-opacity: .75;
 				$scan-color 51%);
 		background-size: 100% $scan-width*2;
 		@include scan-crt($scan-crt);
+
+		// Prevent sub-pixel aliasing on scaled displays
+		image-rendering: crisp-edges;
+		image-rendering: pixelated;
+	}
+
+	// Responsive scanlines for different display scenarios
+
+	// High DPI displays - use original sizing
+	@media (-webkit-min-device-pixel-ratio: 2),
+	(min-resolution: 192dpi) {
+		&:before {
+			height: $scan-width;
+		}
+
+		&:after {
+			background-size: 100% calc($scan-width * 2);
+		}
+	}
+
+	// Medium resolution displays (1024x768 and similar)
+	@media (max-width: 1200px) and (max-height: 900px) and (-webkit-max-device-pixel-ratio: 1.5) {
+		&:before {
+			height: calc($scan-width * 1.5);
+		}
+
+		&:after {
+			background-size: 100% calc($scan-width * 3);
+		}
+	}
+
+	// Low resolution displays - increase thickness to prevent banding
+	@media (max-width: 1024px) and (max-height: 768px) {
+		&:before {
+			height: calc($scan-width * 2);
+		}
+
+		&:after {
+			background-size: 100% calc($scan-width * 4);
+		}
+	}
+
+	// Very low resolution displays
+	@media (max-width: 800px) and (max-height: 600px) {
+		&:before {
+			height: calc($scan-width * 3);
+		}
+
+		&:after {
+			background-size: 100% calc($scan-width * 6);
+		}
 	}
 }
 
@@ -103,4 +155,4 @@ $scan-opacity: .75;
 		background-position: 0 50%;
 		// bottom: 0%; // to have a continuous scanline move, use this line (here in 0% step) instead of transform and write, in &:before, { position: absolute; bottom: 100%; }
 	}
-}
+}