body {
			margin: 0;
			background-color: #000;
			background-image: url('../bg.jpg');
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			height: 100vh;
			overflow: hidden;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			user-select: none;
			-webkit-tap-highlight-color: transparent;

			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
			font-weight: bold;
			letter-spacing: 0.06em;
			color: rgba(255, 255, 255, 0.75);
		}

		#c {
			display: block;
			touch-action: none;
			transform: translateZ(0);
			touch-action: manipulation;
		}
			
			
			/*/////////////////////
			//        HUD        //
			/////////////////////*/
			
			
			.hud__score,
		.pause-btn {
			position: fixed;
			font-size: calc(14px + 2vw + 1vh);
		}

		.hud__score {
			top: 0.65em;
			left: 0.65em;
			pointer-events: none;
			user-select: none;
		}

		.cube-count-lbl {
			font-size: 0.46em;
		}

		.pause-btn {
			position: fixed;
			top: 0;
			right: 0;
			padding: max(1em, 2vh) max(1em, 2vw);
		}

		.pause-btn > div {
			position: relative;
			width: max(0.8em, 24px);
			height: max(0.8em, 24px);
			opacity: 0.75;
		}

		.pause-btn > div::before,
		.pause-btn > div::after {
			content: '';
			display: block;
			width: 34%;
			height: 100%;
			position: absolute;
			background-color: #fff;
		}

		.pause-btn > div::after {
			right: 0;
		}

		/* Touch target area for pause button */
		.touch-target {
			position: relative;
		}

		.touch-target::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: max(48px, 8vw);
			height: max(48px, 8vw);
			background: transparent;
			border-radius: 50%;
		}

		/* Touch hint overlay */
		.touch-hint {
			position: fixed;
			bottom: max(80px, 15vh);
			left: 50%;
			transform: translateX(-50%);
			background: rgba(0, 0, 0, 0.7);
			padding: max(15px, 3vw);
			border-radius: 16px;
			text-align: center;
			pointer-events: none;
			opacity: 0;
			transition: opacity 0.5s;
			z-index: 100;
		}

		.touch-hint.show {
			opacity: 1;
		}

		.touch-hint-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 10px;
		}

		.swipe-icon {
			font-size: min(48px, 10vw);
			animation: swipeHint 1.5s ease-in-out infinite;
		}

		.touch-hint p {
			margin: 0;
			font-size: min(1rem, 4vw);
			color: #fff;
		}

		@keyframes swipeHint {
			0%, 100% { transform: translateY(0); }
			50% { transform: translateY(-10px); }
		}
			
			.slowmo {
				position: fixed;
				bottom: 0;
				width: 100%;
				pointer-events: none;
				opacity: 0;
				transition: opacity 0.4s;
				will-change: opacity;
			}
			
			.slowmo::before {
				content: 'SLOW-MO';
				display: block;
				font-size: calc(8px + 1vw + 0.5vh);
				margin-left: 0.5em;
				margin-bottom: 8px;
			}
			
			.slowmo::after {
				content: '';
				display: block;
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 1.5vh;
				background-color: rgba(0, 0, 0, 0.25);
				z-index: -1;
			}
			
			.slowmo__bar {
				height: 1.5vh;
				background-color: rgba(255, 255, 255, 0.75);
				transform-origin: 0 0;
			}
			
			
			
			/*/////////////////////
			//       MENUS       //
			/////////////////////*/
			
			.menus::before {
				content: '';
				pointer-events: none;
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background-color: #000;
				opacity: 0;
				transition: opacity 0.2s;
				transition-timing-function: ease-in;
			}
			
			.menus.has-active::before {
				opacity: 0.08;
				transition-duration: 0.4s;
				transition-timing-function: ease-out;
			}
			
			.menus.interactive-mode::before {
				opacity: 0.02;
			}
			
			
			
			/* Menu containers */
			.menu {
				pointer-events: none;
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				user-select: none;
				text-align: center;
				color: rgba(255, 255, 255, 0.9);
				opacity: 0;
				visibility: hidden;
				transform: translateY(30px);
				transition-property: opacity, visibility, transform;
				transition-duration: 0.2s;
				transition-timing-function: ease-in;
			}
			
			.menu.active {
				opacity: 1;
				visibility: visible;
				transform: translateY(0);
				transition-duration: 0.4s;
				transition-timing-function: ease-out;
			}
			
			.menus.interactive-mode .menu.active {
				opacity: 0.6;
			}
			
			.menus:not(.interactive-mode) .menu.active > * {
				pointer-events: auto;
			}
			
			
			/* Common menu elements */
			
			h1 {
				font-size: 4rem;
				line-height: 0.95;
				text-align: center;
				font-weight: bold;
				margin: 0 0.65em 1em;
			}
			
			h2 {
				font-size: 1.2rem;
				line-height: 1;
				text-align: center;
				font-weight: bold;
				margin: -1em 0.65em 1em;
			}
			
			.final-score-lbl {
				font-size: 5rem;
				margin: -0.2em 0 0;
			}
			
			.high-score-lbl {
				font-size: 1.2rem;
				margin: 0 0 2.5em;
			}
			
			button {
				display: block;
				position: relative;
				width: min(280px, 70vw);
				padding: max(14px, 2.5vh) max(20px, 4vw);
				background: transparent;
				border: none;
				outline: none;
				user-select: none;
				-webkit-user-select: none;
				font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
				font-weight: bold;
				font-size: min(1.4rem, 4vw);
				color: #fff;
				opacity: 0.75;
				transition: opacity 0.3s, transform 0.1s;
				touch-action: manipulation;
				-webkit-tap-highlight-color: transparent;
			}

			button::before {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background-color: rgba(255, 255, 255, 0.15);
				transform: scale(0, 0);
				opacity: 0;
				transition: opacity 0.3s, transform 0.3s;
			}

			button:active {
				opacity: 1;
				transform: scale(0.95);
			}

			button:active::before {
				transform: scale(1, 1);
				opacity: 1;
			}

		/* Landscape phone */
		@media (max-height: 500px) and (orientation: landscape) {
			button {
				width: min(200px, 40vw);
				padding: max(8px, 1.5vh) max(15px, 3vw);
				font-size: min(1rem, 3vw);
			}
		}

		/* Tablets */
		@media (min-width: 768px) and (max-width: 1024px) {
			button {
				width: min(320px, 50vw);
				padding: max(18px, 3vh) max(25px, 5vw);
				font-size: min(1.6rem, 3vw);
			}
		}
			
			.credits {
				position: fixed;
				width: 100%;
				left: 0;
				bottom: 20px;
			}
			
			a {
				color: white;
			}
			
			/* Only enable hover state on large screens */
		@media (min-width: 1025px) {
			button:hover {
				opacity: 1;
			}

			button:hover::before {
				transform: scale(1, 1);
				opacity: 1;
			}
		}

		/* ====================
		   TOUCH DEVICE ADJUSTMENTS
		   ==================== */

		/* Portrait phone */
		@media (max-width: 600px) and (orientation: portrait) {
			.hud__score {
				top: 0.5em;
				left: 0.5em;
			}

			.pause-btn {
				padding: max(1.2em, 3vh) max(1.2em, 3vw);
			}

			h1 {
				font-size: min(3rem, 12vw);
			}

			h2 {
				font-size: min(1rem, 5vw);
			}

			.final-score-lbl {
				font-size: min(4rem, 15vw);
			}

			.touch-hint {
				bottom: max(120px, 20vh);
			}
		}

		/* Landscape phone */
		@media (max-height: 500px) and (orientation: landscape) {
			.hud__score {
				top: 0.3em;
				left: 0.3em;
				font-size: 0.7em;
			}

			.pause-btn {
				padding: max(0.5em, 1vh) max(0.8em, 2vw);
			}

			h1 {
				font-size: min(2.5rem, 8vh);
				margin-bottom: 0.5em;
			}

			.menu button {
				margin: 0.3em 0;
			}

			.credits {
				bottom: 10px;
				font-size: 0.8em;
			}
		}

		/* Tablets */
		@media (min-width: 601px) and (max-width: 1024px) {
			h1 {
				font-size: min(3.5rem, 8vw);
			}

			.final-score-lbl {
				font-size: min(4.5rem, 12vw);
			}
		}

		/* High DPI / Retina displays */
		@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
			#c {
				image-rendering: auto;
			}
		}

		/* Reduce motion for users who prefer it */
		@media (prefers-reduced-motion: reduce) {
			.swipe-icon {
				animation: none;
			}

			.menu {
				transition: none;
			}
		}