/* Page styles for index.html (extracted from the old inline <style> block).
 * Shared widgets live in ui.css.
 */

	@font-face {
		font-family: 'Josefin Sans';
		font-style: normal;
		font-weight: 300;
		font-display: swap;
		src: url('/fonts/josefin-sans-v34-latin-300.woff2') format('woff2');
	}
	@font-face {
		font-family: 'Josefin Sans';
		font-style: normal;
		font-weight: 400;
		font-display: swap;
		src: url('/fonts/josefin-sans-v34-latin-regular.woff2') format('woff2');
	}
	@font-face {
		font-family: 'Josefin Sans';
		font-style: normal;
		font-weight: 500;
		font-display: swap;
		src: url('/fonts/josefin-sans-v34-latin-500.woff2') format('woff2');
	}
	@font-face {
		font-family: 'Josefin Sans';
		font-style: normal;
		font-weight: 600;
		font-display: swap;
		src: url('/fonts/josefin-sans-v34-latin-600.woff2') format('woff2');
	}
	@font-face {
		font-family: 'Poiret One';
		font-style: normal;
		font-weight: 400;
		font-display: optional;
		src: url('/fonts/poiret-one-v18-latin-regular.woff2') format('woff2');
	}

	:root {
		--font-body:  "Josefin Sans", system-ui, sans-serif;
		--font-title: "Poiret One", sans-serif;

		--ui-panel: 12, 35, 75;
		--ui-panel-2: 14, 42, 88;
		--ui-text: 125, 211, 252;
		--ui-muted: 168, 212, 255;
		--ui-border: 120, 170, 230;
		--ui-glow: 6, 182, 212;
		--ui-active: 202, 138, 4;
		--ui-active-2: 234, 179, 8;
		--ui-highlight: 254, 249, 195;
		--ui-well: 8, 22, 48;
		--ui-title: 254, 249, 195;
		--ui-title-core: 165, 243, 252;
		--ui-on-active: 254, 249, 195;
		--ui-on-panel: 254, 249, 195;
		--ui-on-solid-active: 254, 249, 195;
		--ui-canvas-chip: 14, 42, 88;
		--ui-on-canvas-chip: 125, 211, 252;
		--ui-canvas-active: 202, 138, 4;
		--ui-on-canvas-active: 254, 249, 195;
		--ui-song: 125, 211, 252;
		--ui-song-muted: 168, 212, 255;
		--ui-song-play: 234, 179, 8;
		--ui-song-rest: 254, 249, 195;
		--ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
		--ui-motion: 200ms;
	}

	* {
		-webkit-tap-highlight-color: transparent !important;
		-webkit-touch-callout: none;
	}

	::selection {
		background: rgba(var(--ui-active), 0.55);
		color: rgb(var(--ui-on-solid-active));
	}
	::-moz-selection {
		background: rgba(var(--ui-active), 0.55);
		color: rgb(var(--ui-on-solid-active));
	}
	input::selection,
	textarea::selection {
		background: rgba(var(--ui-active), 0.55);
		color: rgb(var(--ui-on-solid-active));
	}
	input::-moz-selection,
	textarea::-moz-selection {
		background: rgba(var(--ui-active), 0.55);
		color: rgb(var(--ui-on-solid-active));
	}
	button, a, input, label, .hide-label, .nav-btn, .reset-btn, .start-btn,
	#btn-restart, #btn-theme, #now-playing, .theme-btn, .fps-switch button {
		-webkit-tap-highlight-color: transparent !important;
		outline: none !important;
	}

  body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    background: #030308;
    font-family: var(--font-body);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 11vh;

    touch-action: none;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: none;
  }

	#main-title,
	.nav,
	.panel-stack,
	#pilot-score {
		pointer-events: auto;
	}

	#main-title {
		transition: opacity 2.8s ease;
		transform: translateZ(0);
		will-change: opacity;
		-webkit-text-stroke: 0.4px rgba(var(--ui-title), 0.4);
		letter-spacing: 0.04em;
		min-height: 3.6rem;
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgb(var(--ui-title));
		cursor: pointer;
		user-select: none;

		text-shadow:
			0 0 4px  #030308,
			0 0 12px #030308,
			0 0 28px rgba(3, 3, 8, 0.85),
			0 0 1px  rgba(var(--ui-title-core), 0.95),
			0 0 10px rgba(var(--ui-active-2), 0.7),
			0 0 22px rgba(var(--ui-active-2), 0.45),
			0 0 44px rgba(var(--ui-active), 0.28),
			0 0 80px rgba(var(--ui-active-2), 0.16);
	}

	#main-title.fading {
		opacity: 0;
		pointer-events: none;
	}

	#main-title,
	.content h1 {
		font-family: var(--font-title);
	}

	#c {
		position: fixed;
		inset: 0;
		z-index: 1;
		touch-action: none;
		pointer-events: none;
	}

	#waveform-container {
		background: rgba(0, 0, 0, 0.25);
		border-radius: 6px;
	}

	.content {
		position: relative;
		z-index: 10;
		text-align: center;
		transition: none;
		margin-top: 0;
		padding: 0 1rem;
		width: 100%;
		box-sizing: border-box;
		align-items: center;

		display: flex;
		flex-direction: column;
		max-height: calc(100dvh - 11vh - 2.6rem);
		overflow: hidden;
		pointer-events: none;

		will-change: transform;
		transform-style: preserve-3d;
		backface-visibility: hidden;
		-webkit-font-smoothing: antialiased;
	}

  @media (max-width: 600px) {
    .content {
      margin-top: 8vh;
    }
  }

  .content h1 {
    font-size: 3rem;
    margin: 0 0 8px;
    text-shadow:
      0 0 12px rgba(3, 3, 8, 0.95),
      0 0 28px rgba(3, 3, 8, 0.8),
      0 0 50px rgba(3, 3, 8, 0.6),
      0 0 4px #030308,
      0 0 25px rgba(var(--ui-active-2), 0.45);
  }

	.about-text,
	.contacts {	
		font-size: 1.15rem;
	}

  .contacts .label {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.85rem;
    letter-spacing: 0.02em;
  }

  .entry {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.7rem;
    margin: 0.35rem 0;
    text-decoration: none;
    transition: all 0.25s ease;
  }

	.contacts .entry:hover {
		text-shadow: 0 0 18px rgba(103, 232, 249, 0.7);
	}

  .platform {
    min-width: 4.6em;
    text-align: right;
    opacity: 0.9;
  }

  .sep {
    opacity: 0.55;
    font-weight: 300;
  }

  .value {
    min-width: 18em;
    text-align: left;
  }

	.nav {
		display: flex !important;
		justify-content: center;
		gap: 0.85rem;
		max-width: none;
		width: auto;
		margin: 1.4rem auto 1.1rem;
	}

  .nav-btn {
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		max-width: 44px !important;
		padding: 0 !important;
		border-radius: 999px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 0;
		transform: none !important; /* kill old Josefin text offset */

		background: rgba(var(--ui-canvas-chip), 0.94);
		border: 1px solid rgba(var(--ui-border), 0.32);
		color: rgb(var(--ui-on-canvas-chip));
		text-shadow: 0 0 10px rgba(var(--ui-glow), 0.5);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		box-shadow: 0 0 12px rgba(var(--ui-glow), 0.22);
  }

	.nav-btn svg {
		width: 20px;
		height: 20px;
		fill: currentColor;
		flex-shrink: 0;
	}

	.panel {
		position: relative;
		max-width: 29rem;
		margin: 0 auto;
		padding: 1rem 1.15rem 1.5rem;
		padding-bottom: 1.7rem !important;
		margin-bottom: 0.8rem;
		box-sizing: border-box;
		flex: 0 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: auto;
		border-radius: 18px;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		scrollbar-width: thin;
		scrollbar-color: rgba(var(--ui-active-2), 0.45) transparent;
		background: rgba(var(--ui-panel), 0.90);
		border: 1px solid rgba(var(--ui-border), 0.32);
		box-shadow: 0 0 12px rgba(var(--ui-glow), 0.22);

		pointer-events: none;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		max-width: none;
		margin: 0;
		opacity: 0;
		visibility: hidden;
		transform: none;
		transform-origin: top center;
		transition:
			opacity var(--ui-motion) var(--ui-ease),
			visibility 0s linear var(--ui-motion);
	}

	.panel.open {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		max-height: 100%;
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		transition:
			opacity var(--ui-motion) var(--ui-ease),
			visibility 0s;
	}

	.panel:not(.open),
	.panel:not(.open) * {
		pointer-events: none !important;
	}

	.panel-stack {
		position: relative;
		width: min(29rem, 100%);
		max-width: 100%;
		margin: 0 auto;
		flex: 0 1 auto;
		min-height: 0;
		transform-origin: top center;
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	@media (prefers-reduced-motion: reduce) {
		.panel,
		.panel-stack,
		.seg-pill,
		.config-group,
		.config-group-body,
		.config-group-toggle::after {
			transition: none !important;
		}
		.panel {
			transform: none !important;
		}
	}

	.panel:hover {
		background: rgba(var(--ui-panel-2), 0.95);
		box-shadow:
			0 0 12px rgba(var(--ui-glow), 0.32),
			0 0 48px rgba(var(--ui-border), 0.18);
	}
	
	/* Desktop – never blur the centre content for the small top-right panels */
	@media (min-width: 721px) {
		body.control-panel-open .content,
		body.control-panel-open #main-title,
		body.control-panel-open .nav {
			filter: none !important;
			opacity: 1 !important;
			pointer-events: auto !important;
		}
	}

	/* Mobile / touch – blur the main content when any floating panel is open
		 (the panels are centred and do cover the content) */
	@media (max-width: 720px) {
		body.control-panel-open #main-title,
		body.control-panel-open .nav {
			filter: blur(2.5px);
			opacity: 0.45;
			pointer-events: none;
			transition: filter var(--ui-motion) var(--ui-ease), opacity var(--ui-motion) var(--ui-ease);
		}

		body.control-panel-open .panel.open,
		body.control-panel-open #version-wrap {
			filter: blur(2.5px);
			/* keep opacity: 1 so the panel background still fully covers the canvas nodes */
			pointer-events: none;
			transition: filter var(--ui-motion) var(--ui-ease);
		}
	}

	/* Modal-style pilot hints still blur everything behind them */
	body.hint-open #main-title,
	body.hint-open .nav {
		filter: blur(2.5px);
		opacity: 0.45;
		pointer-events: none;
		transition: filter var(--ui-motion) var(--ui-ease), opacity var(--ui-motion) var(--ui-ease);
	}

	body.hint-open .panel.open,
	body.hint-open #control-stack,
	body.hint-open #now-playing,
	body.hint-open #version-wrap {
		filter: blur(2.5px);
		pointer-events: none;
		transition: filter 0.15s ease;
	}

	/* Color-picker / confirm overlay inside the theme panel stays as-is */
	#theme-panel.has-overlay > *:not(#color-picker-panel):not(#theme-confirm-panel):not(#theme-kw-pop) {
		filter: blur(2.5px);
		opacity: 0.4;
		pointer-events: none;
		transition: filter 0.15s ease, opacity 0.15s ease;
	}
	
	#panel-play {
		display: flex;
		flex-direction: column;
		overflow: hidden !important;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		flex: 0 1 auto;
		min-height: 0;
	}
	.play-chrome,
	.play-footer {
		flex: 0 0 auto;
		position: relative;
		z-index: 2;
	}
	.play-scroll {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: auto;
		overscroll-behavior: contain;
		touch-action: pan-y;
		scrollbar-width: thin;
		scrollbar-color: rgba(var(--ui-active-2), 0.55) transparent;
	}
	.play-scroll.is-scrollable {
		overflow-y: scroll;
	}
	.play-scroll::-webkit-scrollbar {
		width: 6px;
	}
	.play-scroll::-webkit-scrollbar-track {
		background: transparent;
	}
	.play-scroll::-webkit-scrollbar-thumb {
		background: rgba(var(--ui-active-2), 0.55);
		border-radius: 99px;
	}
	.play-footer {
		padding-top: 0.55rem;
	}
	#panel-play .about-text {
		max-width: none;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	#pilot-score {
		min-height: 0;
		flex-shrink: 0;
		margin-top: 0.4rem;
	}

	@media (min-width: 721px) {
		.content {
			height: calc(100dvh - 11vh - 2.6rem);
			max-height: calc(100dvh - 11vh - 2.6rem);
		}
		.panel-stack {
			flex: 1 1 0%;
			min-height: 0;
			max-height: none;
			overflow: hidden;
			pointer-events: none;
			display: flex;
			flex-direction: column;
			align-items: stretch;
			width: min(29rem, 100%);
		}
		.panel.open,
		#panel-play {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			flex: none;
			min-height: 0;
			width: 100%;
			max-width: 100%;
			max-height: 100% !important;
			overflow-y: auto;
			pointer-events: auto;
			transform: none;
		}
		#panel-play {
			overflow: hidden !important;
			height: auto;
			width: 23rem;
			max-width: 100%;
			left: 50%;
			right: auto;
			transform: translateX(-50%);
		}
		.ctrl-btn {
			width: 36px;          /* was 48px */
			height: 36px;
		}
		.ctrl-btn svg {
			width: 18px;          /* was 26px */
			height: 18px;
		}
		#btn-3d {
			font-size: 0.78rem;
		}
		#btn-3d svg {
			width: 28px !important;
			height: 20px !important;
		}
		#btn-restart svg {
			width: 20px !important;
			height: 20px !important;
		}
		#pilot-score {
			margin-top: 0.3rem;
			margin-bottom: 0.2rem;
			font-size: 1.25rem;
		}
		#btn-theme {
			position: static !important;
			display: flex !important;
			visibility: visible !important;
			opacity: 1 !important;
			bottom: auto !important;
			left: auto !important;
			right: auto !important;
			margin: 0 !important;
			transform: none !important;
			z-index: auto !important;
			color: rgb(var(--ui-text)) !important;
		}
	}

	#btn-restart svg {
		width: 28px;
		height: 28px;
		flex-shrink: 0;
	}

	@keyframes song-marquee {
		0%, 15%   { transform: translateX(0); }
		85%, 100% { transform: translateX(var(--marquee-shift, 0px)); }
	}

	@media (max-width: 720px) {
		.hide-label {
			right: 10px;
			white-space: nowrap !important;
			font-size: 0.72rem !important;
			gap: 0.3rem !important;
			padding: 4px 0;
		}

		#current-song-title {
			display: inline-block;
			white-space: nowrap;
		}
		#current-song-title.marquee {
			animation: song-marquee 8s ease-in-out infinite alternate;
		}

		.hide-label input {
			width: 16px !important;
			height: 16px !important;
			flex-shrink: 0;
		}
		.hide-label input:checked::after {
			left: 4px;
			top: 1px;
		}
		/* All icons (incl. play) in one horizontal stack – top left */
		#control-stack {
			position: fixed !important;
			top: 8px !important;
			left: 0 !important;
			right: 0 !important;
			height: 40px !important;
			gap: 0.45rem !important;
			flex-direction: row !important;
			justify-content: center !important;   /* center instead of full-width spread */
			align-items: center !important;
			z-index: 110;
		}
		#control-stack .ctrl-btn {
			width: 36px !important;
			height: 36px !important;
			flex-shrink: 0;
		}
		#control-stack #btn-3d {
			width: 36px !important;    /* same as the other buttons */
		}
		#btn-3d svg {
			width: 26px !important;
			height: 18px !important;
		}

		#now-playing {
			position: fixed !important;
			top: 50px !important;
			left: 0 !important;
			right: 0 !important;
			height: 28px !important;
			margin: 0 !important;
			padding: 0 !important;
			display: flex !important;
			justify-content: center !important;
			align-items: center !important;
			background: transparent !important;
			border: none !important;
			z-index: 110;
			text-align: center !important;          /* was missing / overridden */
			max-width: none !important;             /* kill desktop max-width */
			width: 100% !important;
		}
		#now-playing #btn-music {
			display: none !important;
		}
		#current-song-title-wrap {
			display: flex !important;
			justify-content: center !important;
			align-items: center !important;
			width: 100% !important;
			max-width: 100% !important;
			margin: 0 auto !important;
			text-align: center !important;
			overflow: hidden;
		}
		#current-song-title {
			display: inline-block !important;
			text-align: center !important;
			margin: 0 auto !important;
			max-width: 100%;
		}

		#btn-3d {
			font-size: 0.9rem !important;
			font-weight: 600;
		}

		#btn-theme {
			position: static !important;
			bottom: auto !important;
			left: auto !important;
			margin: 0 !important;
			transform: none !important;
		}

    #audio-panel,
    #settings-panel,
    #theme-panel {
			top: 60px !important;
			left: 50% !important;
			right: auto !important;
			bottom: auto !important;
			transform: translateX(-50%) !important;
			width: min(300px, calc(100vw - 24px)) !important;
			min-width: min(300px, calc(100vw - 24px)) !important;
			max-width: min(300px, calc(100vw - 24px)) !important;
    }

		#audio-play,
		#audio-mute,
		#audio-prev,
		#audio-rewind,
		#audio-forward,
		#audio-next {
			background: transparent !important;
			border: none !important;
			box-shadow: none !important;
			-webkit-appearance: none !important;
			appearance: none !important;
			padding: 0 !important;
			margin: 0 !important;
			width: 36px;           /* larger hit target */
			height: 36px;
			display: flex !important;
			align-items: center;
			justify-content: center;
		}

		#audio-play svg,
		#audio-mute svg,
		#audio-prev svg,
		#audio-rewind svg,
		#audio-forward svg,
		#audio-next svg {
			width: 26px !important;
			height: 26px !important;
			fill: currentColor !important;
		}

		#audio-volume {
			width: 70px !important;
			opacity: 1 !important;
		}
		
		#btn-theme {
			position: static !important;
			bottom: auto !important;
			left: auto !important;
			margin: 0 !important;
			transform: none !important;
		}
	}

	@media (max-width: 420px) {
		.hide-label {
			right: 8px;
			font-size: 0.68rem;
		}
	}

	.panel::-webkit-scrollbar {
			width: 6px;
			height: 6px;
	}

	.panel::-webkit-scrollbar-track {
			background: transparent;
	}

	.panel::-webkit-scrollbar-thumb {
		background: rgba(var(--ui-active-2), 0.45);
		border-radius: 99px;
	}

	.panel::-webkit-scrollbar-thumb:hover {
		background: rgba(var(--ui-active-2), 0.7);
	}

  .about-text {
    margin: 0;
    line-height: 1.6;
    font-size: 1.15rem;
  }

	@media (max-width: 720px) {
		body {
			padding-top: 7vh;
			padding-bottom: env(safe-area-inset-bottom, 0px);
			height: 100dvh;
		}

		#main-title {
			transition: opacity 3.3s ease;
			filter: none !important;
			-webkit-text-stroke: 0 !important;
			color: rgb(var(--ui-title))   !important;
			text-shadow:
				0 0 6px rgba(var(--ui-active-2), 0.55),
				0 0 12px rgba(var(--ui-active), 0.3) !important;
		}

		#main-title.fading {
			opacity: 0;
		}

		/* ===== Kill expensive effects only on mobile ===== */
		.hide-label,
		.fps-switch button,
		#now-playing,
		#current-song-title,
		#btn-music,
		.about-text,
		.contacts,
		.entry,
		.config-row,
		.nav-btn,
		.pilot-hint,
		.reset-btn,
		.mode-switch button,
		.config-row input[type="number"],
		#link-count,
		#btn-restart,
		#audio-panel,
		#audio-panel * {
			text-shadow: none !important;
		}

		#audio-panel,
		#theme-panel,
		.fps-switch,
		.pilot-hint {
			backdrop-filter: none !important;
			-webkit-backdrop-filter: none !important;
		}

		.content {
			will-change: auto;
			transform-style: flat;
			backface-visibility: visible;
			margin-top: 4vh;
			max-height: calc(100svh - 15vh - env(safe-area-inset-bottom, 12px));
			padding: 0 0.6rem;
		}

		.content h1,
		#main-title {
			font-size: 1.7rem !important;   /* was 1.45rem */
			padding: 0 1.5rem !important;
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			min-height: 2.4rem !important;
		}

		.nav {
			gap: 0.55rem;
			width: auto;
			max-width: none;
			margin: 0.15rem auto 0.45rem;          /* was 0 auto 0.35rem */
			transform: translateY(0.0rem);        /* was -0.65rem – now slightly lower */
			position: relative;
			z-index: 55;
		}
		.nav-btn {
			width: 40px !important;
			height: 40px !important;
			min-width: 40px !important;
			max-width: 40px !important;
			padding: 0 !important;
			font-size: 0; /* no text */
		}
		.nav-btn svg {
			width: 18px;
			height: 18px;
		}

		.nav-btn,
		.reset-btn {
			/* only cheap properties – colors change instantly */
			transition: none;
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
		}
		.nav-btn::before,
		.reset-btn::before {
			display: none;
		}

		.panel,
		.panel.open,
		#panel-about,
		#panel-contacts,
		#panel-support {
			width: min(88vw, 26rem) !important;
			max-width: min(88vw, 26rem) !important;
		}

		.panel {
			position: fixed !important;
			left: 50% !important;
			right: auto !important;
			top: calc(11vh + 7.2rem) !important;
			bottom: auto !important;
			height: auto;
			max-height: calc(100svh - 11vh - 7.2rem - 2.4rem - env(safe-area-inset-bottom, 0px)) !important;
			margin: 0 !important;
			z-index: 50 !important;

			display: block !important;
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
			transform: translateX(-50%) translateZ(0);

			transition:
				opacity var(--ui-motion) var(--ui-ease),
				visibility 0s linear var(--ui-motion);

			will-change: opacity;
			contain: layout style paint;
			backdrop-filter: none !important;
			-webkit-backdrop-filter: none !important;
			box-shadow: 0 0 8px rgba(var(--ui-glow), 0.18) !important;
		}

		.panel.open {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
			transform: translateX(-50%) translateZ(0);
			transition:
				opacity var(--ui-motion) var(--ui-ease),
				visibility 0s;
		}

		#panel-play {
			display: flex !important;
			width: min(80vw, 24rem) !important;
			max-width: min(80vw, 24rem) !important;
			height: auto;
			min-height: calc(100svh - 11vh - 7.2rem - 2.4rem - env(safe-area-inset-bottom, 0px));
			max-height: calc(100svh - 11vh - 7.2rem - 2.4rem - env(safe-area-inset-bottom, 0px)) !important;
		}

		.contacts .value,
		.contacts .platform {
			min-width: 0;
		}

		#audio-panel,
		#settings-panel {
			max-height: calc(100svh - 60px - 2.4rem - env(safe-area-inset-bottom, 0px)) !important;
			overflow-x: hidden !important;
			overflow-y: auto !important;
		}
		#theme-panel {
			max-height: calc(100svh - 64px - env(safe-area-inset-bottom, 0px)) !important;
			overflow: hidden !important;
		}

		.play-chrome {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			gap: 0.4rem;
		}
		.play-chrome .play-start-wrap {
			margin: 0 0 0.35rem !important;
		}
		.play-chrome .mode-separator {
			margin: 0.15rem auto 0;
		}
		#panel-play .start-btn {
			width: auto;
			min-width: 10.8rem;
			max-width: calc(100% - 0.4rem);
			height: auto;
			box-sizing: border-box;
			padding: 0.72em 2.2em 0.38em !important;
			font-size: 1.34rem !important;
			margin: 0 auto;
		}
		#panel-play .reset-btn {
			width: auto;
			min-width: 11.5rem;
			max-width: calc(100% - 0.4rem);
			height: auto;
			box-sizing: border-box;
			padding: 0.70em 1.6em 0.58em !important;
			font-size: 1.02rem !important;
			margin: 0 auto;
		}
		#panel-play .mode-switch {
			width: 100%;
			min-width: 0;
			margin: 0;
			height: 2.35rem;
			box-sizing: border-box;
		}
		#panel-play .mode-switch button {
			min-height: 0 !important;
			height: 100%;
			padding: 0 0.6rem !important;
		}
		#panel-play .play-scroll {
			padding-right: 2px;
		}
		.play-footer {
			padding-top: 0.4rem;
		}
		#panel-play .config-row label {
			white-space: nowrap;
		}

		@media (prefers-reduced-motion: reduce) {
			.panel,
			.panel.open {
				transition: none !important;
				transform: translateX(-50%) translateZ(0) !important;
			}
		}

		.about-text {
			font-size: 0.95rem;
			line-height: 1.5;
			margin-bottom: 0;
		}

		.contacts {
			font-size: 0.9rem;
			margin-bottom: 0;
		}
		.entry {
			flex-wrap: wrap;
			gap: 0.3rem 0.5rem;
			margin: 0.45rem 0;
		}
		.entry:last-child {
			margin-bottom: 0;
		}
		.platform { min-width: 0; }
		.value {
			min-width: 0;
			max-width: 100%;
			text-align: left;
			word-break: break-word;
		}

		.config-fields { max-width: 100%; }
		.config-row {
			font-size: 0.88rem;
			gap: 0.5rem;
		}

		.config-row label,
		.config-row input[type="checkbox"]:checked + label,
		.config-row label:has(+ input:checked) {
			color: rgb(var(--ui-text)) !important;
			text-shadow: 0 0 10px rgba(var(--ui-border), 0.4) !important;
		}

		.config-row input[type="number"] {
			width: 5rem;
			font-size: 0.85rem;
		}

		.config-row input[type="number"]:focus {
			color: rgb(var(--ui-on-panel)) !important;
		}

		.reset-btn {
			padding: 0.5rem 1.2rem;
			font-size: 0.95rem;
		}

		.hide-label {
			min-height: 44px;
			padding: 10px 4px;
			font-size: 0.80rem;
			gap: 0.4rem;
		}

		.hide-label input {
			width: 22px;
			height: 22px;
		}

		.hide-label input:checked::after {
			left: 6px;
			top: 2px;
			width: 5px;
			height: 9px;
		}
	}

	/* Reduce expensive effects on any touch-primary device (phones + tablets) */
	@media (hover: none), (pointer: coarse) {
		#main-title {
			filter: none !important;
			-webkit-text-stroke: 0 !important;
			color: rgb(var(--ui-title)) !important;
			text-shadow:
				0 0 6px rgba(var(--ui-active-2), 0.55),
				0 0 12px rgba(var(--ui-active), 0.3) !important;
		}
		#main-title.fading {
			opacity: 0;
		}

		.hide-label,
		.fps-switch button,
		#now-playing,
		#current-song-title,
		#btn-music,
		.about-text,
		.contacts,
		.entry,
		.config-row,
		.nav-btn,
		.pilot-hint,
		.reset-btn,
		.mode-switch button,
		.config-row input[type="number"],
		#link-count,
		#btn-restart,
		#audio-panel,
		#audio-panel * {
			text-shadow: none !important;
		}

		#audio-panel,
		#theme-panel,
		.fps-switch,
		.pilot-hint {
			backdrop-filter: none !important;
			-webkit-backdrop-filter: none !important;
		}
		
		.ctrl-btn:hover,
		.ctrl-btn:active,
		.ctrl-btn:focus {
			background: rgba(var(--ui-panel-2), 0.90) !important;
			border-color: rgba(var(--ui-border), 0.32) !important;
			color: rgb(var(--ui-text)) !important;
			box-shadow: none !important;
		}
		.ctrl-btn:hover svg,
		.ctrl-btn:active svg,
		.ctrl-btn:focus svg {
			fill: rgb(var(--ui-text)) !important;
			background: none !important;
			filter: none !important;
		}

		/* strong gold ONLY when the panel is actually open / active / playing */
		.ctrl-btn.open,
		.ctrl-btn.active,
		#btn-3d.active,
		#btn-music.playing {
			background: rgba(var(--ui-canvas-active), 0.40) !important;
			border-color: rgba(var(--ui-active-2), 0.55) !important;
			color: rgb(var(--ui-on-canvas-active)) !important;
		}
		.ctrl-btn.open svg,
		.ctrl-btn.active svg,
		#btn-3d.active svg,
		#btn-music.playing svg {
			fill: rgb(var(--ui-highlight)) !important;
			background: none !important;
		}

		/* permanently kill any blue rectangle on the SVG itself */
		.ctrl-btn svg {
			background: none !important;
			border: none !important;
			box-shadow: none !important;
			filter: none !important;
		}
	}

	#fps-switch,
	#theme-scope-switch {
			display: flex;
			position: relative !important;
			overflow: hidden;
			border-radius: 999px;
			padding: 3px;
			background: rgba(var(--ui-well), 0.75);
			border: none;
			width: fit-content;
			top: auto !important;
			right: auto !important;
			transform: none !important;
	}
	#fps-switch {
			background: rgba(var(--ui-canvas-chip), 0.88);
	}
	.fps-switch button {
		position: relative;
		z-index: 1;
		flex: 1 1 0;
		background: transparent;
		border: none;
		font-family: inherit;
		font-size: 0.82rem;
		font-weight: 500;
		padding: 0.32rem 0.9rem;
		border-radius: 999px;
		cursor: pointer;
		transition: color var(--ui-motion) var(--ui-ease), text-shadow var(--ui-motion) var(--ui-ease);
		min-width: 3.2em;
	}

	.fps-switch button.active {
		background: transparent !important;
		color: rgb(var(--ui-on-active)) !important;
		text-shadow: 0 0 10px rgba(var(--ui-active-2), 0.55) !important;
		box-shadow: none;
	}

	.seg-pill {
		position: absolute;
		top: 3px;
		bottom: 3px;
		left: 3px;
		width: calc((100% - 6px) / 2);
		border-radius: 999px;
		background: rgba(var(--ui-active), 0.40);
		border: 1px solid rgba(var(--ui-active-2), 0.55);
		box-shadow: 0 0 10px rgba(var(--ui-active), 0.2);
		transform: translateX(0);
		transition: transform var(--ui-motion) var(--ui-ease);
		pointer-events: none;
		z-index: 0;
	}
	.fps-switch[data-seg="60"] .seg-pill,
	.fps-switch[data-seg="ui"] .seg-pill {
		transform: translateX(100%);
	}

	.hide-label {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 0.45rem;
		padding: 3px 4px;
		min-height: 0;
		font-size: 0.82rem;
		font-family: inherit;
		line-height: 1;
		cursor: pointer;
		user-select: none;
		transition: color 0.22s ease;
		text-shadow: 0 0 10px rgba(var(--ui-glow), 0.5);
	}

	.hide-label input {
		appearance: none;
		-webkit-appearance: none;
		width: 16px;
		height: 16px;
		margin: 0;
		border: 1.5px solid rgba(var(--ui-border), 0.55);
		border-radius: 4px;
		background: transparent;
		cursor: pointer;
		position: relative;
		flex-shrink: 0;
		transition: all 0.2s ease;
		border-color: rgba(var(--ui-border), 0.6);
	}

	.hide-label input:checked {
		background: rgba(var(--ui-active), 0.45);
		border-color: rgba(var(--ui-active-2), 0.9);
	}

	.hide-label input:checked::after {
		content: '';
		position: absolute;
		left: 4.5px;
		top: 1px;
		width: 4px;
		height: 8px;
		border: solid #eaf4ff;
		border-width: 0 2px 2px 0;
		transform: rotate(45deg);
	}

	/* Match the rest of the UI checkboxes */
	#color-picker-panel input[type="checkbox"] {
			appearance: none;
			-webkit-appearance: none;
			width: 15px;
			height: 15px;
			margin: 0;
			border: 1.5px solid rgba(var(--ui-border), 0.65);
			border-radius: 4px;
			background: transparent;
			cursor: pointer;
			position: relative;
			flex-shrink: 0;
			transition: all 0.2s ease;
			vertical-align: middle;
	}
	#color-picker-panel input[type="checkbox"]:checked {
			background: rgba(var(--ui-active), 0.45);
			border-color: rgba(var(--ui-active-2), 0.95);
	}
	#color-picker-panel input[type="checkbox"]:checked::after {
			content: '';
			position: absolute;
			left: 4px;
			top: 1px;
			width: 4px;
			height: 8px;
			border: solid #eaf4ff;
			border-width: 0 2px 2px 0;
			transform: rotate(45deg);
	}
	#color-picker-panel label:has(input[type="checkbox"]:checked) {
			color: rgb(var(--ui-on-panel));
	}

	#color-picker-panel label {
			display: inline-flex !important;
			align-items: center !important;
			gap: 5px !important;
			line-height: 1 !important;
			cursor: pointer;
			user-select: none;
			color: rgb(var(--ui-muted));
	}

	/* hover only on real mouse/trackpad */
	@media (hover: hover) and (pointer: fine) {
			#color-picker-panel label:has(input[type="checkbox"]):hover {
					color: rgb(var(--ui-on-panel)) !important;
			}
			#color-picker-panel input[type="checkbox"]:hover {
					border-color: rgba(var(--ui-active-2), 0.9) !important;
					background: rgba(var(--ui-active), 0.22) !important;
			}
	}

	/* force clean blue when unchecked on touch (no sticky hover) */
	@media (hover: none), (pointer: coarse) {
			#color-picker-panel label:has(input[type="checkbox"]:not(:checked)) {
					color: rgb(var(--ui-muted)) !important;
			}
			#color-picker-panel input[type="checkbox"]:not(:checked) {
					border-color: rgba(var(--ui-border), 0.65) !important;
					background: transparent !important;
			}
	}

	.config-row input[type="checkbox"] {
		appearance: none;
		-webkit-appearance: none;
		width: 16px;
		height: 16px;
		margin: 0;
		border: 1.5px solid rgba(var(--ui-border), 0.6);
		border-radius: 4px;
		background: transparent;
		cursor: pointer;
		position: relative;
		flex-shrink: 0;
		transition: all 0.2s ease;
	}

	.config-row input[type="checkbox"]:checked {
		background: rgba(var(--ui-active), 0.45) !important;
		border-color: rgba(var(--ui-active-2), 0.9) !important;
	}

	.config-row input[type="checkbox"]:checked::after {
		content: '';
		position: absolute;
		left: 4px;
		top: 1px;
		width: 4px;
		height: 8px;
		border: solid #eaf4ff;
		border-width: 0 2px 2px 0;
		transform: rotate(45deg);
	}

	@media (max-width: 720px) {
		.hide-label {
			padding: 6px 2px;
			font-size: 0.72rem;
			gap: 0.35rem;
		}

		.hide-label input {
			width: 18px;
			height: 18px;
		}

		.hide-label input:checked::after {
			left: 5px;
			top: 1.5px;
			width: 4px;
			height: 8px;
		}
	}

	@media (max-width: 420px) {
		.hide-label {
			font-size: 0.76rem;
		}
	}

	.reset-btn {
			position: relative;
			overflow: hidden;
			background: rgba(3, 3, 8, 0.35);
			border: 1px solid rgba(var(--ui-border), 0.35);
			padding: 0.55rem 1.6rem;
			border-radius: 999px;
			font-size: 1.05rem;
			font-family: inherit;
			cursor: pointer;
			transition: all 0.25s ease;
			backdrop-filter: blur(6px);
			-webkit-backdrop-filter: blur(6px);
			text-shadow:
					0 0 8px rgba(3, 3, 8, 0.95),
					0 0 18px rgba(3, 3, 8, 0.8);
	}

	.mode-switch {
		display: flex;
		justify-content: center;
		position: relative;
		overflow: hidden;
		border-radius: 999px;
		padding: 2px;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		margin: 0 auto 0.9rem;
		width: 100%;
		max-width: none;
		min-width: 0;
		box-sizing: border-box;
		background: rgba(var(--ui-well), 0.75);
		border: none;
		box-shadow: none;
	}

	.mode-switch .seg-pill {
		top: 2px;
		bottom: 2px;
		left: 2px;
		width: calc((100% - 4px) / 2);
	}

	.mode-switch[data-mode="sim"] .seg-pill {
		transform: translateX(100%);
	}

	.mode-switch button {
		position: relative;
		z-index: 1;
		flex: 1 1 0;
		background: transparent;
		border: none;
		font-family: inherit;
		font-size: 0.95rem;
		font-weight: 500;
		border-radius: 999px;
		cursor: pointer;
		transition: color var(--ui-motion) var(--ui-ease), text-shadow var(--ui-motion) var(--ui-ease);
		min-width: 0;
	}

	.mode-switch button.active {
			background: transparent !important;
			border: none !important;
			color: rgb(var(--ui-highlight)) !important;
			text-shadow: 0 0 10px rgba(var(--ui-active-2), 0.55) !important;
			box-shadow: none !important;
	}

	.mode-switch.locked {
		opacity: 0.5;
		filter: grayscale(0.35);
		pointer-events: none;
		cursor: not-allowed;
	}

	.mode-switch.locked button {
		background: transparent !important;
		color: #6a8aaa !important;
		box-shadow: none !important;
		text-shadow: none !important;
		cursor: not-allowed !important;
	}

	.mode-switch.locked .seg-pill {
		background: rgba(100, 180, 255, 0.12);
		border-color: transparent;
		box-shadow: none;
	}

	.mode-switch.locked button.active {
		background: transparent !important;
		color: #8ab0d0 !important;
	}

	.mode-separator {
			height: 1px;
			background: rgba(var(--ui-border), 0.18);
			margin: 0.9rem auto;
			max-width: 18rem;
	}

	.start-btn {
		position: relative;
		overflow: hidden;
		padding: 0.62rem 2.1rem;
		border-radius: 999px;
		font-size: 1.18rem;
		font-weight: 600;
		font-family: inherit;
		cursor: pointer;
		transition: all 0.25s ease;
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		background: rgba(var(--ui-active), 0.40) !important;
		border: 1px solid rgba(var(--ui-active-2), 0.55) !important;
		color: rgb(var(--ui-highlight)) !important;
		text-shadow: 0 0 10px rgba(var(--ui-active-2), 0.35) !important;
		box-shadow: 0 0 14px rgba(var(--ui-active), 0.18) !important;
	}

	.reset-btn {
			background: rgba(var(--ui-panel-2), 0.45);
			border: 1px solid rgba(var(--ui-border), 0.4);
			color: rgb(var(--ui-text)) !important;
			text-shadow: 0 0 8px rgba(var(--ui-glow), 0.35) !important;
	}

	.config-row input:disabled {
			opacity: 0.4;
			cursor: not-allowed;
	}
	.config-row input:disabled + label,
	.config-row label:has(+ input:disabled) {
			opacity: 0.55;
			cursor: not-allowed;
	}

	.config-fields {
		text-align: left;
		margin: 0 0 1.35rem;
		max-width: none;
		width: 100%;
		box-sizing: border-box;
	}
	.config-group {
		display: grid;
		grid-template-rows: minmax(2.35rem, max-content) 0fr;
		align-items: start;
		margin: 0.35rem 0 0.55rem;
		border: none;
		border-radius: 12px;
		overflow: visible;
		transition: grid-template-rows var(--ui-motion) var(--ui-ease);
	}
	.config-group.open {
		grid-template-rows: minmax(2.35rem, max-content) 1fr;
	}
	.config-group-toggle {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.6rem;
		background: rgba(0, 0, 0, 0.16);
		border: none;
		border-radius: 12px;
		color: rgb(var(--ui-text));
		font-family: inherit;
		font-size: 0.9rem;
		font-weight: 500;
		letter-spacing: 0.02em;
		padding: 0.48rem 0.7rem;
		min-height: 2.35rem;
		box-sizing: border-box;
		line-height: 1.2;
		cursor: pointer;
		text-align: left;
		flex-shrink: 0;
	}
	.config-group.open .config-group-toggle {
		border-radius: 12px 12px 0 0;
	}
	@supports (background: color-mix(in srgb, white, black)) {
		.config-group-toggle {
			background: color-mix(in srgb, rgb(var(--ui-panel)) 78%, black);
		}
	}
	.config-group-toggle::after {
		content: '';
		box-sizing: border-box;
		width: 1em;
		height: 1em;
		flex: 0 0 1em;
		margin: 0;
		padding: 0;
		border: none;
		background-color: rgb(var(--ui-muted));
		clip-path: polygon(38% 18%, 78% 50%, 38% 82%, 30% 73%, 60% 50%, 30% 27%);
		transform: rotate(0deg);
		transform-origin: 50% 50%;
		transition: transform var(--ui-motion) var(--ui-ease);
	}
	.config-group.open .config-group-toggle::after {
		transform: rotate(90deg);
	}
	.config-group-body {
		display: block;
		min-height: 0;
		overflow: hidden;
		padding: 0;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity var(--ui-motion) var(--ui-ease), padding var(--ui-motion) var(--ui-ease), visibility var(--ui-motion) var(--ui-ease);
	}
	.config-group.open .config-group-body {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		padding: 0 0.7rem 0.35rem;
	}

	.config-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		margin: 0.42rem 0;
		font-size: 0.98rem;
	}

	.config-row label {
			flex: 1;
			text-align: left;
			cursor: pointer;
			user-select: none;
	}

	.config-row input[type="checkbox"] {
			appearance: none;
			-webkit-appearance: none;
			width: 16px;
			height: 16px;
			margin: 0;
			border: 1.5px solid rgba(var(--ui-border), 0.55);
			border-radius: 4px;
			border-color: rgba(var(--ui-border), 0.6);
			background: transparent;
			cursor: pointer;
			position: relative;
			flex-shrink: 0;
			transition: all 0.2s ease;
	}

	.config-row input[type="checkbox"]:checked {
		background: rgba(8, 145, 178, 0.45);
		border-color: rgba(103, 232, 249, 0.9);
	}

	.config-row input[type="checkbox"]:checked::after {
			content: '';
			position: absolute;
			left: 4px;
			top: 1px;
			width: 4px;
			height: 8px;
			border: solid #eaf4ff;
			border-width: 0 2px 2px 0;
			transform: rotate(45deg);
	}

	@media (max-width: 480px) {
			.config-fields { max-width: 100%; }
			.config-row { font-size: 0.92rem; }
			.config-row input[type="number"] { width: 5.8rem; font-size: 0.9rem; }
	}

	#version-wrap {
		position: fixed;
		bottom: 10px;
		right: 14px;
		z-index: 40;
		pointer-events: auto;
		text-align: right;
		max-width: min(280px, calc(100vw - 28px));
	}
	#version-label {
		color: rgba(var(--ui-muted), 0.5);
		font-size: 0.72rem;
		font-family: var(--font-body);
		user-select: none;
		cursor: default;
		text-shadow: 0 0 8px rgba(3, 3, 8, 0.9);
		white-space: nowrap;
	}
	#changelog-panel {
		display: none;
		margin-bottom: 8px;
		text-align: left;
		padding: 10px 12px 11px;
		border-radius: 12px;
		background: rgba(var(--ui-panel), 0.92);
		border: 1px solid rgba(var(--ui-border), 0.32);
		box-shadow: 0 0 12px rgba(var(--ui-glow), 0.18);
		color: rgb(var(--ui-text));
		font-size: 0.74rem;
		font-family: var(--font-body);
		line-height: 1.4;
		user-select: none;
	}
	#changelog-panel.open {
		display: block;
	}
	@media (hover: hover) and (pointer: fine) {
		#version-wrap:hover #changelog-panel {
			display: block;
		}
	}
	.changelog-row {
		margin: 0.28em 0;
	}
	.changelog-row:first-child {
		margin-top: 0;
	}
	.changelog-row:last-child {
		margin-bottom: 0;
	}
	.changelog-ver {
		color: rgb(var(--ui-highlight));
		font-weight: 600;
		margin-right: 0.35em;
		white-space: nowrap;
	}

	.hint-good {
		color: rgb(var(--ui-active-2));
		text-shadow: 0 0 10px rgba(var(--ui-active-2), 0.95);
	}
	.hint-bad {
		color: #ff8a70;
		text-shadow: 0 0 10px rgba(255, 100, 70, 0.95);
	}

	.pilot-hint {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 200;
		max-width: 22rem;
		padding: 1.4rem 1.6rem;

		/* Match the panel glass style */
		background: rgba(var(--ui-panel-2), 0.95);
		border: 1px solid rgba(var(--ui-border), 0.35);
		border-radius: 18px;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		box-shadow: 0 0 24px rgba(var(--ui-glow), 0.25);

		font-size: 1.15rem;
		line-height: 1.55;
		text-align: center;
		pointer-events: auto;
		cursor: pointer;
		user-select: none;
	}

	#theme-panel {
		right: 70px !important;
	}

	.theme-btn {
		padding: 5px 10px;
		border-radius: 6px;
		cursor: pointer;
		font-size: 0.84rem;
		transition: background 0.15s, color 0.15s;
		background: transparent;
		border: none;
		color: rgb(var(--ui-text));
		text-align: left;
		width: 100%;
		font-family: inherit;
		line-height: 1.3;
		display: flex;
		align-items: center;
		gap: 0.35rem;
	}

	.theme-btn.active {
		background: rgba(var(--ui-active), 0.38) !important;
		color: rgb(var(--ui-on-active)) !important;
		text-shadow: 0 0 8px rgba(var(--ui-active-2), 0.4);
	}

	/* Tighter gap between entries (same as song list) */
	#theme-panel .theme-list {
		display: flex;
		flex-direction: column;
		gap: 2px;               /* was 6px */
		margin-bottom: 0;
	}
	.theme-pane {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}
	.theme-search-row {
		flex-shrink: 0;
	}
	.theme-custom-block {
		flex: 0 0 auto;
		flex-shrink: 0;
		margin-top: 6px;
	}
	.theme-custom-extras {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 280ms cubic-bezier(0.22, 1, 0.36, 1);
	}
	.theme-pane.custom-open .theme-custom-extras {
		grid-template-rows: 1fr;
	}
	.theme-custom-extras-inner {
		overflow: hidden;
		min-height: 0;
	}
	@media (prefers-reduced-motion: reduce) {
		.theme-custom-extras { transition: none; }
	}

	.theme-search-row {
		display: flex;
		align-items: stretch;
		gap: 6px;
		margin: 0 0 8px;
		flex-shrink: 0;
	}
	.theme-search {
		flex: 1;
		width: auto;
		min-width: 0;
		box-sizing: border-box;
		border-radius: 8px;
		padding: 0.38rem 0.6rem;
		margin: 0;
		font-family: inherit;
		font-size: 0.82rem;
		background: rgba(var(--ui-well), 0.75);
		border: 1px solid rgba(var(--ui-border), 0.4);
		color: rgb(var(--ui-text));
		outline: none;
	}
	.theme-search-filter {
		flex: 0 0 36px;
		width: 36px;
		border-radius: 8px;
		border: 1px solid rgba(var(--ui-border), 0.4);
		background: rgba(var(--ui-well), 0.75);
		color: rgb(var(--ui-text));
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}
	.theme-search-filter svg {
		width: 16px;
		height: 16px;
		fill: currentColor;
	}
	.theme-search-filter.is-open {
		border-color: rgba(var(--ui-active-2), 0.75);
		background: rgba(var(--ui-active), 0.28);
	}
	#theme-panel {
		overflow: hidden;
		flex-direction: column;
	}
	#theme-panel > div:first-child {
		flex-shrink: 0;
	}
	@media (min-width: 721px) {
		#theme-panel {
			height: min(38rem, calc(100dvh - 70px));
			max-height: calc(100dvh - 70px);
		}
	}
	@media (max-width: 720px) {
		#theme-panel {
			height: min(38rem, calc(100svh - 64px - env(safe-area-inset-bottom, 0px)));
			max-height: calc(100svh - 64px - env(safe-area-inset-bottom, 0px));
			overflow: hidden;
		}
	}
	#theme-kw-pop {
		display: none;
		position: absolute;
		left: 16px;
		right: 16px;
		width: auto;
		z-index: 160;
		background: rgba(var(--ui-panel), 0.98);
		border: 1px solid rgba(var(--ui-border), 0.4);
		border-radius: 12px;
		padding: 10px 12px 12px;
		box-shadow: 0 8px 28px rgba(0,0,0,0.45);
		box-sizing: border-box;
	}
	#theme-kw-pop.is-open { display: block; }
	.theme-kw-heading {
		font-size: 0.78rem;
		opacity: 0.75;
		letter-spacing: 0.02em;
		margin: 0 0 8px;
	}
	.theme-kw-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 6px 10px;
		margin: 0 0 10px;
	}
	.theme-kw-grid label {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 0.82rem;
		cursor: pointer;
		user-select: none;
		color: rgb(var(--ui-text));
	}
	#theme-kw-save {
		width: 100%;
		padding: 0.4rem 0.6rem;
		border-radius: 8px;
		border: 1px solid rgba(var(--ui-active-2), 0.55);
		background: rgba(var(--ui-active), 0.38);
		color: rgb(var(--ui-on-active));
		font-family: inherit;
		font-size: 0.85rem;
		font-weight: 500;
		cursor: pointer;
	}
	.theme-search::placeholder {
		color: rgb(var(--ui-muted));
		opacity: 0.7;
	}
	.theme-search:hover,
	.theme-search-filter:hover {
		border-color: rgba(var(--ui-active-2), 0.75);
	}
	.theme-search:focus {
		border-color: rgba(var(--ui-active-2), 0.75);
	}
	.theme-kw-hit {
		margin-left: 0;
		font-size: 0.68rem;
		font-weight: 500;
		letter-spacing: 0.02em;
		color: rgb(var(--ui-on-active));
		background: rgba(var(--ui-active), 0.38);
		border-radius: 999px;
		padding: 0.12em 0.45em;
		flex-shrink: 0;
	}
	.theme-list-empty {
		font-size: 0.78rem;
		opacity: 0.65;
		padding: 0.45rem 0.2rem 0.6rem;
		text-align: center;
	}
	.theme-list {
		flex: 1 1 auto;
		min-height: 0;
		max-height: none;
		overflow-y: auto;
		overflow-x: hidden;
		padding-right: 4px;
		margin-bottom: 0;
		scrollbar-width: thin;
		scrollbar-color: rgba(var(--ui-active-2), 0.45) transparent;
		-webkit-overflow-scrolling: auto;
	}
	@media (max-width: 720px) {
		.theme-list {
			max-height: none !important;
			flex: 1 1 auto;
		}
		.theme-pane.custom-open .theme-list {
			max-height: none !important;
			flex-basis: auto;
		}
	}
	.sync-linked-row {
		justify-content: space-between !important;
		align-items: center;
		width: 100%;
		margin: 2px 0 10px;
		min-height: 0;
		padding: 4px 2px 6px;
		font-size: 0.78rem;
		flex-shrink: 0;
		position: relative;
		z-index: 0;
	}
	#theme-scope-switch {
		flex-shrink: 0;
		position: relative;
		z-index: 1;
		overflow: hidden;
		margin-bottom: 4px !important;
	}
	.theme-list .mode-separator {
		display: block !important;
		opacity: 1 !important;
	}
	.theme-list::-webkit-scrollbar {
		width: 5px;
	}
	.theme-list::-webkit-scrollbar-track {
		background: transparent;
	}
	.theme-list::-webkit-scrollbar-thumb {
		background: rgba(var(--ui-active-2), 0.45);
		border-radius: 99px;
	}

	/* Previous colors */
	.theme-prev-colors {
		display: flex;
		gap: 6px;
		max-height: 56px;
		flex-wrap: wrap;
		margin-top: 8px;
	}

	.theme-current-row {
		display: inline-flex;          /* shrink-wraps to the swatches */
		gap: 6px;
		flex-wrap: wrap;
		align-items: center;
		margin: 6px 0 14px;
		padding-bottom: 4px;
		outline: 1.5px solid transparent;
		outline-offset: 3px;
		border-radius: 6px;
		transition: outline-color 0.15s ease;
		max-width: 100%;
	}
	.theme-current-row.is-full {
		outline-color: rgba(239, 68, 68, 0.9);
	}

	.theme-prev-swatch {
		width: 22px;
		height: 22px;
		border-radius: 4px;
		cursor: pointer;
		border: 1px solid rgba(255,255,255,0.25);
		transition: transform 0.15s, border-color 0.15s;
	}

	.theme-prev-swatch.active {
					border: 2px solid rgba(var(--ui-active-2), 0.95) !important;
					box-shadow: 0 0 8px rgba(var(--ui-active-2), 0.45);
					position: relative;
	}

	/* Current: thin golden underscore with a tiny gap (panel shows through) */
	.theme-current-swatch.active {
					border: 1px solid rgba(255,255,255,0.25) !important; /* keep normal border */
					box-shadow: none;
					position: relative;
	}
	.theme-current-swatch.active::after {
					content: '';
					position: absolute;
					left: 1px;
					right: 1px;
					bottom: -5px;          /* tiny gap under the box */
					height: 2px;
					border-radius: 1px;
					background: rgba(var(--ui-active-2), 0.95);
					box-shadow: 0 0 6px rgba(var(--ui-active-2), 0.55);
					pointer-events: none;
	}
	.theme-prev-swatch .role-badge,
	.theme-current-swatch .role-badge {
			position: absolute;
			top: -6px;
			right: -6px;
			width: 14px;
			height: 14px;
			border-radius: 50%;
			background: rgba(var(--ui-active), 0.95);
			color: rgb(var(--ui-on-solid-active));
			font-size: 0.65rem;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1;
			pointer-events: none;
			box-shadow: 0 0 4px rgba(0,0,0,0.5);
	}

	.theme-current-swatch {
			width: 22px;
			height: 22px;
			border-radius: 4px;
			cursor: pointer;
			border: 1px solid rgba(255,255,255,0.25);
			transition: transform 0.15s, border-color 0.15s;
			position: relative;
			flex-shrink: 0;
	}
	.theme-current-swatch:hover {
			transform: scale(1.15);
			border-color: rgba(255,255,255,0.7);
	}

	.theme-add-btn {
			width: 22px;
			height: 22px;
			border-radius: 4px;
			border: 1.5px dashed rgba(var(--ui-active-2), 0.7);
			background: transparent;
			color: rgb(var(--ui-highlight));
			font-size: 1.1rem;
			font-weight: 600;
			line-height: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: background 0.15s, border-color 0.15s;
			flex-shrink: 0;
			padding: 0;
			font-family: inherit;
	}
	.theme-add-btn:hover {
			background: rgba(var(--ui-active), 0.25);
			border-color: rgba(var(--ui-active-2), 0.95);
	}

	@keyframes swatch-shake {
			0%, 100% { transform: translateX(0); }
			20% { transform: translateX(-3px); }
			40% { transform: translateX(3px); }
			60% { transform: translateX(-2px); }
			80% { transform: translateX(2px); }
	}
	.theme-prev-swatch.shake {
			animation: swatch-shake 0.35s ease;
	}

	.theme-row-actions {
		display: flex;
		align-items: center;
		gap: 5px;
		flex-shrink: 0;
		margin-left: auto;
	}
	.theme-btn:has(.theme-kw-hit) .theme-row-actions {
		margin-left: 0;
	}
	.theme-btn .theme-kw-hit:first-of-type {
		margin-left: auto;
	}
	.theme-btn .theme-delete {
					display: flex;
					position: static;
					transform: none;
					width: 16px;
					height: 16px;
					cursor: pointer;
					background: none;
					border: none;
					padding: 0;
					flex-shrink: 0;
					background-image:
							linear-gradient(45deg, transparent 42%, #ef4444 42%, #ef4444 58%, transparent 58%),
							linear-gradient(-45deg, transparent 42%, #ef4444 42%, #ef4444 58%, transparent 58%);
					background-size: 11px 11px;
					background-position: center;
					background-repeat: no-repeat;
	}
	.theme-btn .theme-delete:hover {
					filter: brightness(1.25);
	}
	.theme-btn.custom-theme {
			position: relative;
			padding-right: 6px;
	}

	.theme-btn.builtin-theme {
		position: relative;
		padding-right: 6px;
	}
	.theme-btn .theme-load {
		position: static;
		transform: none;
		width: 16px;
		height: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		padding: 0;
		border: none;
		background: none;
		color: rgb(var(--ui-text));
		opacity: 0.7;
		border-radius: 4px;
		flex-shrink: 0;
	}
	.theme-btn.builtin-theme:hover .theme-load,
	.theme-btn.builtin-theme.active .theme-load,
	.theme-btn.custom-theme:hover .theme-load,
	.theme-btn.custom-theme.active .theme-load {
		opacity: 0.95;
	}
	.theme-btn .theme-load:hover {
		opacity: 1;
		color: rgb(var(--ui-highlight));
		background: rgba(var(--ui-active), 0.28);
	}
	.theme-btn .theme-load svg {
		display: block;
		pointer-events: none;
		width: 15px;
		height: 15px;
	}

	/* Confirm / overwrite popup (same glass style as color picker) */
	#theme-confirm-panel {
			display: none;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: calc(100% - 24px);
			padding: 18px 16px;
			background: rgba(var(--ui-panel), 0.97);
			border: 1px solid rgba(var(--ui-border), 0.35);
			border-radius: 18px;
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
			box-shadow: 0 0 12px rgba(var(--ui-glow), 0.22);
			z-index: 140;
			box-sizing: border-box;
			text-align: center;
	}
	#theme-confirm-panel .cp-btn {
			min-width: 70px;
	}
	#theme-confirm-yes {
			background: rgba(var(--ui-active), 0.40) !important;
			border: 1px solid rgba(var(--ui-active-2), 0.55) !important;
			color: rgb(var(--ui-highlight)) !important;
	}

	.theme-prev-swatch:hover {
		transform: scale(1.15);
		border-color: rgba(255,255,255,0.7);
	}

	.nav-btn.active {
		background: rgba(var(--ui-active), 0.40) !important;
		border: 1px solid rgba(var(--ui-active-2), 0.55) !important;
		color: rgb(var(--ui-highlight)) !important;
		text-shadow: 0 0 10px rgba(var(--ui-active-2), 0.35) !important;
	}

	.nav-btn:not(.active) {
			background: rgba(var(--ui-canvas-chip), 0.94) !important;
			border: 1px solid rgba(var(--ui-border), 0.32) !important;
			color: rgb(var(--ui-on-canvas-chip)) !important;
			text-shadow: 0 0 10px rgba(var(--ui-glow), 0.5) !important;
	}

	#song-list .song-item.active {
		background: rgba(var(--ui-active), 0.38) !important;
		color: rgb(var(--ui-on-active)) !important;
	}
	#song-list .song-item:hover:not(.active) {
		background: rgba(var(--ui-active), 0.22);
		color: rgb(var(--ui-on-panel));
	}

	#theme-scope-switch {
		width: 100%;
		justify-content: stretch;
		box-sizing: border-box;
	}
	#theme-scope-switch button {
		flex: 1;
		min-width: 0;
	}
	.ui-color-rows {
		margin-top: 8px;
		margin-bottom: 10px;
	}
	.ui-color-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 6px 4px;
		font-size: 0.82rem;
		color: rgb(var(--ui-text));
	}
	.ui-color-row .theme-current-swatch {
		flex-shrink: 0;
	}

	.cp-btn {
					flex:1;
					padding:6px 0;
					border-radius:8px;
					border:1px solid rgba(var(--ui-border), 0.35);
					background:rgba(var(--ui-well), 0.7);
					color:rgb(var(--ui-muted));
					font-size:0.78rem;
					cursor:pointer;
					transition:all .2s;
					font-family: inherit;
	}

	#theme-name-save,
	#ui-theme-name-save {
			transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
	}

	@media (hover: hover) and (pointer: fine) {
			.cp-btn:hover {
					background:rgba(var(--ui-panel-2), 0.85);
					color:rgb(var(--ui-muted));
			}
			#theme-name-save:hover,
			#ui-theme-name-save:hover {
					background: rgba(var(--ui-active-2), 0.25) !important;
					border-color: rgba(var(--ui-active-2), 0.9) !important;
					color: rgb(var(--ui-highlight)) !important;
					box-shadow: 0 0 8px rgba(var(--ui-active-2), 0.35);
			}
	}

	@media (hover: none), (pointer: coarse) {
			#theme-name-save,
			#ui-theme-name-save {
					background: rgba(var(--ui-well), 0.7) !important;
					border-color: rgba(var(--ui-border), 0.35) !important;
					color: rgb(var(--ui-muted)) !important;
					box-shadow: none !important;
			}
	}
	#cp-hex {
		transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
	}
	#cp-hex:hover {
		color: rgb(var(--ui-on-panel)) !important;
		border-color: rgba(var(--ui-active-2), 0.55) !important;
		box-shadow: 0 0 8px rgba(var(--ui-active-2), 0.25);
	}
	#cp-hex:focus {
		outline: none;
		color: rgb(var(--ui-on-panel)) !important;
		border-color: rgba(var(--ui-active-2), 0.85) !important;
		box-shadow: 0 0 10px rgba(var(--ui-active-2), 0.3);
	}
	#cp-save {
					background: rgba(var(--ui-active), 0.40) !important;
					border: 1px solid rgba(var(--ui-active-2), 0.55) !important;
					color: rgb(var(--ui-on-active)) !important;
					text-shadow: 0 0 10px rgba(var(--ui-active-2), 0.35) !important;
					box-shadow: 0 0 10px rgba(var(--ui-active), 0.2) !important;
	}
	#cp-save:hover {
					background: rgba(var(--ui-active-2), 0.52) !important;
					border-color: rgba(var(--ui-active-2), 0.75) !important;
					box-shadow: 0 0 16px rgba(var(--ui-active-2), 0.28) !important;
					color: rgb(var(--ui-on-active)) !important;
	}
	#cp-cancel {
			color:rgb(var(--ui-muted)) !important;      /* force same as everywhere else */
	}

	#cp-hue {
		-webkit-appearance: none;
		appearance: none;
		height: 14px;
		border-radius: 7px;
		background: linear-gradient(to right,
			#c45c5c 0%,
			#c4a35c 16%,
			#8bc45c 33%,
			#5cc4a3 50%,
			#5c8bc4 66%,
			#a35cc4 83%,
			#c45c8b 100%);
		outline: none;
		cursor: pointer;
		box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
	}
	#cp-hue::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: rgb(var(--ui-highlight));
		border: none;
		box-shadow: 0 0 0 1.5px rgba(var(--ui-active-2), 0.45),
								0 0 8px rgba(var(--ui-active-2), 0.4);
		cursor: pointer;
		margin-top: -2px;
	}
	#cp-hue::-moz-range-thumb {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: rgb(var(--ui-highlight));
		border: none;
		box-shadow: 0 0 0 1.5px rgba(var(--ui-active-2), 0.45),
								0 0 8px rgba(var(--ui-active-2), 0.4);
		cursor: pointer;
	}

	#color-picker-panel input[type="radio"] {
		appearance: none;
		-webkit-appearance: none;
		width: 14px;
		height: 14px;
		margin: 0;
		border: 1.5px solid rgba(var(--ui-border), 0.65);
		border-radius: 50%;
		background: transparent;
		cursor: pointer;
		position: relative;
		flex-shrink: 0;
		transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
		vertical-align: middle;
	}
	#color-picker-panel input[type="radio"]:checked {
		background: rgba(var(--ui-active), 0.55);
		border-color: rgba(var(--ui-active-2), 0.95);
		box-shadow: 0 0 6px rgba(var(--ui-active-2), 0.45);
	}
	#color-picker-panel input[type="radio"]:checked::after {
		content: '';
		position: absolute;
		left: 3px;
		top: 3px;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: rgb(var(--ui-on-solid-active));
	}
	#color-picker-panel label:has(input[type="radio"]):hover {
		color: rgb(var(--ui-on-panel)) !important;
	}
	#color-picker-panel label:has(input[type="radio"]):hover input[type="radio"] {
		border-color: rgba(var(--ui-active-2), 0.9) !important;
		background: rgba(var(--ui-active), 0.22) !important;
		box-shadow: 0 0 6px rgba(var(--ui-active-2), 0.35);
	}

	#color-picker-panel input[type="radio"]:checked + span,
	#color-picker-panel label:has(input[type="radio"]:checked) {
		color: rgb(var(--ui-on-panel));
	}

	#color-picker-panel input[type="number"] {
		width: 42px;
		border-radius: 6px;
		padding: 0.25rem 0.3rem;
		font-family: inherit;
		font-size: 0.82rem;
		text-align: center;
		outline: none;
		background: rgba(var(--ui-panel-2), 0.55);
		border: 1px solid rgba(var(--ui-border), 0.4);
		color: rgb(var(--ui-text));
		text-shadow: 0 0 8px rgba(var(--ui-border), 0.35);
		transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
		-webkit-appearance: none;
		appearance: none;
	}

	#color-picker-panel input[type="number"]:hover {
		color: rgb(var(--ui-on-panel)) !important;
		border-color: rgba(var(--ui-active-2), 0.55) !important;
		box-shadow: 0 0 8px rgba(var(--ui-active-2), 0.25);
	}

	#color-picker-panel input[type="number"]:focus {
		border-color: rgba(var(--ui-active-2), 0.85) !important;
		box-shadow: 0 0 10px rgba(var(--ui-active-2), 0.3);
		color: rgb(var(--ui-on-panel));
	}

	input[type="number"]::-webkit-inner-spin-button,
	input[type="number"]::-webkit-outer-spin-button {
		opacity: 0;                                   /* hidden by default */
		filter: invert(0.78) sepia(1) saturate(6) hue-rotate(6deg) brightness(1.4);
		cursor: pointer;
		transition: opacity 0.15s ease, filter 0.15s ease;
	}
	input[type="number"]:hover::-webkit-inner-spin-button,
	input[type="number"]:hover::-webkit-outer-spin-button {
		opacity: 0.95;
		filter: invert(0.9) sepia(1) saturate(8) hue-rotate(4deg) brightness(1.6);
	}

	#control-stack {
		position: fixed;
		top: 18px;
		right: 18px;
		z-index: 100;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 0.55rem;
	}

	.ctrl-btn {
		width: 36px;
		height: 36px;
		padding: 0;
		border-radius: 999px;
		background: rgba(var(--ui-canvas-chip), 0.94);
		border: 1px solid rgba(var(--ui-border), 0.32);
		color: rgb(var(--ui-on-canvas-chip));
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.22s ease;
		font-size: 0.78rem;
		font-family: inherit;
		box-shadow: none;
		flex-shrink: 0;
	}
	.ctrl-btn svg {
		width: 18px;
		height: 18px;
		fill: currentColor;
		/* NEVER give the svg a background or border */
		background: none !important;
		border: none !important;
		box-shadow: none !important;
		filter: none !important;
	}

	#btn-3d {
		width: 36px;               /* same as every other ctrl-btn */
		font-size: 0.68rem;        /* slightly tighter so “3D” still fits */
		font-weight: 600;
	}
	#btn-3d svg {
		width: 30px !important;
		height: 18px !important;
	}
	#btn-restart svg {
		width: 20px !important;
		height: 20px !important;
	}

	/* Only real mouse/trackpad devices get the weak hover */
	@media (hover: hover) and (pointer: fine) {
			.ctrl-btn:hover {
					background: rgba(var(--ui-active), 0.22) !important;
					border-color: rgba(var(--ui-active-2), 0.40) !important;
					color: rgb(var(--ui-highlight)) !important;
			}
			.ctrl-btn:hover svg {
					fill: rgb(var(--ui-highlight)) !important;
			}
	}

	/* Open / active / playing = the strong gold used by the tabs */
	.ctrl-btn.open,
	.ctrl-btn.active,
	#btn-3d.active,
	#btn-music.playing,
	.nav-btn.active {
		background: rgba(var(--ui-canvas-active), 0.40) !important;
		border-color: rgba(var(--ui-active-2), 0.55) !important;
		color: rgb(var(--ui-on-canvas-active)) !important;
		box-shadow: none !important;
	}
	html.ui-light-canvas .ctrl-btn.open,
	html.ui-light-canvas .ctrl-btn.active,
	html.ui-light-canvas #btn-3d.active,
	html.ui-light-canvas #btn-music.playing,
	html.ui-light-canvas .nav-btn.active {
		background: rgba(var(--ui-canvas-active), 0.96) !important;
		border-color: rgba(var(--ui-active), 0.7) !important;
		color: rgb(var(--ui-on-canvas-active)) !important;
	}
	html.ui-light-canvas .ctrl-btn.open svg,
	html.ui-light-canvas .ctrl-btn.active svg,
	html.ui-light-canvas #btn-3d.active svg,
	html.ui-light-canvas #btn-music.playing svg,
	html.ui-light-canvas .nav-btn.active svg {
		fill: rgb(var(--ui-on-canvas-active)) !important;
	}
	.ctrl-btn.open svg,
	.ctrl-btn.active svg,
	#btn-3d.active svg,
	#btn-music.playing svg {
		fill: rgb(var(--ui-highlight)) !important;
		filter: none !important;
	}

	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
	
	.start-btn,
	.reset-btn,
	.mode-switch,
	.mode-switch button,
	.nav-btn,
	.fps-switch,
	.fps-switch button,
	.panel,
	.pilot-hint,
	#settings-panel,
	#audio-panel,
	#theme-panel,
	#changelog-panel,
	#color-picker-panel {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}
	
	#now-playing {
		position: fixed;
		top: 18px;
		right: 70px;                      /* sits cleanly left of the stack */
		z-index: 110;
		display: flex;
		align-items: center;
		height: 36px;
		gap: 8px;
		font-size: 0.82rem;
		cursor: pointer;
		user-select: none;
		background: transparent !important;
		border: none !important;
		max-width: calc(100vw - 150px);
		text-align: right;
	}
	#now-playing #btn-music {
		display: none !important;
	}

	input[type="range"] {
		-webkit-appearance: none;
		appearance: none;
		height: 6px;
		border-radius: 99px;
		background: rgba(var(--ui-border), 0.25);   /* soft track */
		outline: none;
	}

	input[type="range"]::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background: rgb(var(--ui-text));
		cursor: pointer;
		box-shadow: 0 0 8px rgba(103, 232, 249, 0.6);
	}

	input[type="range"]::-moz-range-track {
		height: 6px;
		border-radius: 99px;
		background: rgba(var(--ui-border), 0.25);
	}

	input[type="range"]::-moz-range-thumb {
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background: rgb(var(--ui-text));
		border: none;
		cursor: pointer;
		box-shadow: 0 0 8px rgba(103, 232, 249, 0.6);
	}

	/* Panel / body text */
	.about-text,
	.contacts,
	.entry,
	.config-row,
	.config-row label,
	.hide-label,
	.pilot-hint,
	.mode-switch button:not(.active),
	.fps-switch button:not(.active),
	#audio-panel,
	#settings-panel,
	#theme-panel,
	#audio-time,
	#song-list,
	.theme-btn {
		color: rgb(var(--ui-text));
		text-shadow: 0 0 8px rgba(var(--ui-glow), 0.28);
	}

	#audio-progress,
	#audio-volume,
	#audio-panel	{
		accent-color: rgb(var(--ui-text));
	}

	#audio-volume {
		accent-color: rgb(var(--ui-active-2)) !important;
	}

	/* WebKit */
	#audio-volume::-webkit-slider-runnable-track {
		height: 6px;
		border-radius: 99px;
		background: linear-gradient(to right,
			rgb(var(--ui-active-2)) 0%,
			rgb(var(--ui-active-2)) var(--val, 50%),
			rgba(var(--ui-border), 0.25) var(--val, 50%),
			rgba(var(--ui-border), 0.25) 100%);
	}
	#audio-volume::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background: rgb(var(--ui-highlight)) !important;
		box-shadow: 0 0 8px rgba(var(--ui-active-2), 0.6) !important;
		margin-top: -4px; /* centers the thumb on the 6px track */
	}

	/* Firefox */
	#audio-volume::-moz-range-track {
		height: 6px;
		border-radius: 99px;
		background: rgba(var(--ui-border), 0.25);
	}
	#audio-volume::-moz-range-progress {
		height: 6px;
		border-radius: 99px;
		background-color: rgb(var(--ui-active-2)) !important;
	}
	#audio-volume::-moz-range-thumb {
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background: rgb(var(--ui-highlight)) !important;
		box-shadow: 0 0 8px rgba(var(--ui-active-2), 0.6) !important;
		border: none;
	}

	.hide-label:has(input:checked) {
		color: rgb(var(--ui-highlight));
		text-shadow: 0 0 10px rgba(var(--ui-active-2), 0.55);
	}

	#audio-panel button {
		transition: color 0.18s ease, filter 0.18s ease, transform 0.18s ease;
	}

	#audio-time {
		font-size: 0.78rem;
		opacity: 0.85;
		white-space: nowrap;
		font-variant-numeric: tabular-nums;   /* makes all digits the same width */
		min-width: 5.4em;          /* still prevents jumping */
		text-align: right;
		display: inline-block;
	}

	#current-song-title {
		display: inline-block;
		background: linear-gradient(to right,
			rgb(var(--ui-song)) 0%,
			rgb(var(--ui-song)) var(--progress, 0%),
			rgb(var(--ui-song-muted)) var(--progress, 0%),
			rgb(var(--ui-song-muted)) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent !important;
		text-shadow: none !important;
		opacity: 0.85;
		transition: opacity 0.25s ease;
	}

	#now-playing.playing #current-song-title {
			opacity: 1 !important;
			background: linear-gradient(to right,
					rgb(var(--ui-song-play)) 0%,
					rgb(var(--ui-song-play)) var(--progress, 0%),
					rgb(var(--ui-song-rest)) var(--progress, 0%),
					rgb(var(--ui-song-rest)) 100%);
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			filter: drop-shadow(0 0 6px rgba(var(--ui-song-play), 0.55));
	}
	/* solid accent only when panel open AND not playing */
	#now-playing.open:not(.playing) #current-song-title {
			opacity: 1 !important;
			background: none !important;
			-webkit-background-clip: unset !important;
			background-clip: unset !important;
			-webkit-text-fill-color: rgb(var(--ui-song-rest)) !important;
			color: rgb(var(--ui-song-rest)) !important;
			text-shadow: 0 0 10px rgba(var(--ui-song-play), 0.7) !important;
			filter: none !important;
	}

	#audio-panel #audio-play.playing,
	#audio-panel #audio-play.playing svg,
	#audio-panel button#audio-play.playing,
	#audio-panel button#audio-play.playing svg {
		color: rgb(var(--ui-active-2)) !important;
		fill: rgb(var(--ui-active-2)) !important;
		filter: drop-shadow(0 0 4px rgba(var(--ui-active-2), 0.45)) !important;
	}

	#audio-play.playing {
		color: rgb(var(--ui-song-play)) !important;
	}
	
	#audio-panel:hover,
	#settings-panel:hover,
	#theme-panel:hover {
			background: rgba(var(--ui-panel-2), 0.95);
			box-shadow:
					0 0 12px rgba(var(--ui-glow), 0.32),
					0 0 48px rgba(var(--ui-border), 0.18);
	}
	
	#theme-name-input,
	#ui-theme-name-input {
		color: rgb(var(--ui-text)) !important;
		border-color: rgba(var(--ui-border), 0.4);
	}
	#theme-name-input:focus,
	#ui-theme-name-input:focus {
		outline: none;
		color: rgb(var(--ui-on-panel)) !important;
		border-color: rgba(var(--ui-active-2), 0.9) !important;
		box-shadow: 0 0 0 1px rgba(var(--ui-active-2), 0.35);
	}
	@media (hover: hover) and (pointer: fine) {
		#theme-name-input:hover,
		#ui-theme-name-input:hover {
			color: rgb(var(--ui-on-panel)) !important;
			border-color: rgba(var(--ui-active-2), 0.55) !important;
			box-shadow: 0 0 8px rgba(var(--ui-active-2), 0.25);
		}
	}
	
	#audio-panel #audio-mute:not(.muted),
	#audio-panel #audio-mute:not(.muted) svg {
		color: rgb(var(--ui-active-2)) !important;
		fill: rgb(var(--ui-active-2)) !important;
		filter: drop-shadow(0 0 3px rgba(var(--ui-active-2), 0.4));
	}
	#audio-panel #audio-mute.muted,
	#audio-panel #audio-mute.muted svg {
		color: rgb(var(--ui-text)) !important;
		fill: rgb(var(--ui-text)) !important;
		filter: none !important;
	}
	
	/* ========== Vertical centering fix for Josefin Sans ========== */
	button.nav-btn,
	button.start-btn,
	button.reset-btn,
	.mode-switch button,
	.fps-switch button,
	.hide-label,
	.config-row label,
	#link-count,
	#btn-restart {
			line-height: 1 !important;
	}

	button.nav-btn {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 !important;
		transform: none !important;
		line-height: 1 !important;
	}

	button.start-btn {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0.72em 2.1em 0.38em !important;
		color: rgb(var(--ui-highlight)) !important;
	}

	.mode-switch button {
					display: inline-flex !important;
					align-items: center !important;
					justify-content: center !important;
					padding: 0.68em 1.4em 0.42em !important;
					min-height: 2.1em !important;
					transform: none !important;
					line-height: 1 !important;
	}

	button.reset-btn {
			display: inline-flex !important;
			align-items: center !important;
			justify-content: center !important;
			padding: 0.70em 1.6em 0.58em !important;
	}

	.config-row label {
			padding-top: 0.20em !important;
			line-height: 1 !important;
	}

	.hide-label {
			padding-top: 0.18em !important;
	}
	#btn-restart {
			padding-top: 0.25em !important;
	}

	button.reset-btn,
	.config-row input[type="number"],
	.config-row label {
					transform: translateY(1.5px) !important;
	}

	#audio-panel button {
			display: inline-flex !important;
			align-items: center !important;
			justify-content: center !important;
			line-height: 1 !important;
	}
	/* ========== End of Vertical centering fix for Josefin Sans ========== */

@media (any-hover: hover) and (any-pointer: fine) {
    .hide-label:hover,
    .fps-switch button:not(.active):hover,
    .nav-btn:hover,
    .contacts .entry:hover,
    #now-playing:hover,
    #btn-music:hover,
    #btn-restart:hover,
    .fps-switch button:not(.active):hover {
        color: rgb(var(--ui-highlight));
        text-shadow: 0 0 14px rgba(var(--ui-active-2), 0.7);
    }

		.ctrl-btn:hover {
			color: rgb(var(--ui-highlight)) !important;
		}
		.ctrl-btn:hover svg {
			fill: rgb(var(--ui-highlight)) !important;
		}

    .nav-btn:not(.active):hover {
        background: rgba(var(--ui-active), 0.22) !important;
        border-color: rgba(var(--ui-active-2), 0.40) !important;
        color: rgb(var(--ui-highlight)) !important;
        text-shadow: 0 0 14px rgba(var(--ui-active-2), 0.7) !important;
    }

    .reset-btn:hover {
        background: rgba(var(--ui-active), 0.22) !important;
        border-color: rgba(var(--ui-active-2), 0.40) !important;
        color: rgb(var(--ui-highlight)) !important;
        text-shadow: 0 0 14px rgba(var(--ui-active-2), 0.7) !important;
        box-shadow: 0 0 10px rgba(var(--ui-active-2), 0.22) !important;
    }

    .start-btn:hover {
        background: rgba(var(--ui-active-2), 0.52) !important;
        border-color: rgba(var(--ui-active-2), 0.75) !important;
        box-shadow: 0 0 20px rgba(var(--ui-active-2), 0.28) !important;
        color: rgb(var(--ui-highlight)) !important;
    }

    #btn-theme:hover,
    #btn-theme:hover svg {
        color: rgb(var(--ui-highlight)) !important;
        fill: rgb(var(--ui-highlight)) !important;
        text-shadow: 0 0 14px rgba(var(--ui-active-2), 0.7);
        filter: drop-shadow(0 0 6px rgba(var(--ui-active-2), 0.5));
    }

    .theme-btn:hover {
        background: rgba(var(--ui-active), 0.22) !important;
        color: rgb(var(--ui-highlight)) !important;
    }

    #song-list .song-item:hover:not(.active) {
        background: rgba(var(--ui-active), 0.22) !important;
        color: rgb(var(--ui-highlight)) !important;
    }

    #audio-panel #audio-prev:hover,
    #audio-panel #audio-prev:hover svg,
    #audio-panel #audio-rewind:hover,
    #audio-panel #audio-rewind:hover svg,
    #audio-panel #audio-play:hover,
    #audio-panel #audio-play:hover svg,
    #audio-panel #audio-forward:hover,
    #audio-panel #audio-forward:hover svg,
    #audio-panel #audio-next:hover,
    #audio-panel #audio-next:hover svg,
    #audio-panel #audio-mute:hover,
    #audio-panel #audio-mute:hover svg {
        color: rgb(var(--ui-highlight)) !important;
        fill: rgb(var(--ui-highlight)) !important;
        text-shadow: 0 0 14px rgba(var(--ui-active-2), 0.7) !important;
        filter: drop-shadow(0 0 6px rgba(var(--ui-active-2), 0.55)) !important;
        transform: scale(1.12);
        transition: color 0.18s ease, fill 0.18s ease, filter 0.18s ease, transform 0.18s ease;
    }

    .hide-label:hover input {
        border-color: rgba(var(--ui-active-2), 0.9) !important;
        background: rgba(var(--ui-active), 0.22) !important;
    }

    .config-row input[type="checkbox"]:hover {
        border-color: rgba(var(--ui-active-2), 0.9) !important;
        background: rgba(var(--ui-active), 0.22) !important;
    }

    .config-row input[type="number"]:hover {
        color: rgb(var(--ui-on-panel)) !important;
        border-color: rgba(var(--ui-active-2), 0.55) !important;
        box-shadow: 0 0 8px rgba(var(--ui-active-2), 0.25);
    }

    #color-picker-panel input[type="number"]:hover {
        color: rgb(var(--ui-on-panel)) !important;
        border-color: rgba(var(--ui-active-2), 0.55) !important;
        box-shadow: 0 0 8px rgba(var(--ui-active-2), 0.25);
    }

    .mode-switch button:not(.active):hover {
        color: rgb(var(--ui-on-panel)) !important;
        text-shadow: 0 0 10px rgba(var(--ui-active-2), 0.55) !important;
    }

    .nav-btn:not(.active):hover {
        background: rgba(var(--ui-active), 0.22) !important;
        border-color: rgba(var(--ui-active-2), 0.40) !important;
        color: rgb(var(--ui-on-panel)) !important;
        text-shadow: 0 0 14px rgba(var(--ui-active-2), 0.7) !important;
    }

    .nav-btn.active {
        background: rgba(var(--ui-active), 0.40) !important;
        border: 1px solid rgba(var(--ui-active-2), 0.55) !important;
        color: rgb(var(--ui-on-active)) !important;
    }
}

/* ===== Clean number inputs – no spinners, proper style ===== */
.config-row input[type="number"] {
  -webkit-appearance: textfield !important;
  appearance: textfield !important;
  width: 6.8rem !important;
  border-radius: 8px;
  padding: 0.3rem 0.55rem;
  font-family: inherit;
  font-size: 0.95rem;
  text-align: right;
  outline: none;
  background: rgba(var(--ui-panel-2), 0.55);
  border: 1px solid rgba(var(--ui-border), 0.4);
  color: rgb(var(--ui-text));
  text-shadow: 0 0 8px rgba(var(--ui-border), 0.35);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  box-sizing: border-box;
}

#color-picker-panel input[type="number"] {
  -webkit-appearance: textfield !important;
  appearance: textfield !important;
  width: 42px !important;
  border-radius: 6px;
  padding: 0.25rem 0.3rem;
  font-family: inherit;
  font-size: 0.82rem;
  text-align: center;
  outline: none;
  background: rgba(var(--ui-panel-2), 0.55);
  border: 1px solid rgba(var(--ui-border), 0.4);
  color: rgb(var(--ui-text));
  text-shadow: 0 0 8px rgba(var(--ui-border), 0.35);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.config-row input[type="number"]:hover,
#color-picker-panel input[type="number"]:hover {
  color: rgb(var(--ui-on-panel)) !important;
  border-color: rgba(var(--ui-active-2), 0.55) !important;
  box-shadow: 0 0 8px rgba(var(--ui-active-2), 0.25);
}

.config-row input[type="number"]:focus,
#color-picker-panel input[type="number"]:focus {
  color: rgb(var(--ui-on-panel)) !important;
  border-color: rgba(var(--ui-active-2), 0.85) !important;
  box-shadow: 0 0 14px rgba(var(--ui-active-2), 0.35);
  outline: none;
}

/* permanently kill spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
  display: none !important;
}

	/* Ink that stays readable on Active fills / panel chrome (Highlight stays for canvas title) */
	.theme-btn.active,
	.fps-switch button.active,
	.mode-switch button.active,
	.ctrl-btn.open,
	.ctrl-btn.active,
	#btn-3d.active,
	#btn-music.playing,
	.nav-btn.active,
	.start-btn,
	#theme-confirm-yes,
	#cp-save,
	#song-list .song-item.active {
		color: rgb(var(--ui-on-active)) !important;
	}
	.theme-btn.active svg,
	.start-btn svg {
		fill: rgb(var(--ui-on-active)) !important;
	}
	.ctrl-btn.open,
	.ctrl-btn.active,
	#btn-3d.active,
	#btn-music.playing,
	.nav-btn.active {
		background: rgba(var(--ui-canvas-active), 0.40) !important;
		border-color: rgba(var(--ui-active-2), 0.55) !important;
		color: rgb(var(--ui-on-canvas-active)) !important;
	}
	.ctrl-btn.open svg,
	.ctrl-btn.active svg,
	#btn-3d.active svg,
	#btn-music.playing svg,
	.nav-btn.active svg {
		fill: rgb(var(--ui-on-canvas-active)) !important;
	}
	html.ui-light-canvas .ctrl-btn.open,
	html.ui-light-canvas .ctrl-btn.active,
	html.ui-light-canvas #btn-3d.active,
	html.ui-light-canvas #btn-music.playing,
	html.ui-light-canvas .nav-btn.active {
		background: rgba(var(--ui-canvas-active), 0.96) !important;
		border-color: rgba(var(--ui-active), 0.7) !important;
		color: rgb(var(--ui-on-canvas-active)) !important;
	}
	html.ui-light-canvas .ctrl-btn.open svg,
	html.ui-light-canvas .ctrl-btn.active svg,
	html.ui-light-canvas #btn-3d.active svg,
	html.ui-light-canvas #btn-music.playing svg,
	html.ui-light-canvas .nav-btn.active svg {
		fill: rgb(var(--ui-on-canvas-active)) !important;
	}
	.theme-prev-swatch .role-badge,
	.theme-current-swatch .role-badge {
		color: rgb(var(--ui-on-solid-active));
	}
	#color-picker-panel input[type="radio"]:checked::after {
		background: rgb(var(--ui-on-solid-active));
	}
	.hide-label input:checked::after,
	.config-row input[type="checkbox"]:checked::after,
	#color-picker-panel input[type="checkbox"]:checked::after {
		border-color: rgb(var(--ui-on-solid-active));
	}
	.changelog-ver,
	.hide-label:has(input:checked),
	#color-picker-panel label:has(input[type="checkbox"]:checked),
	#color-picker-panel input[type="radio"]:checked + span,
	#color-picker-panel label:has(input[type="radio"]:checked) {
		color: rgb(var(--ui-on-panel));
	}
	.theme-add-btn {
		color: rgb(var(--ui-on-panel));
	}
	@media (hover: hover) and (pointer: fine) {
		.theme-btn:hover,
		.theme-btn:hover:not(.active),
		.fps-switch button:not(.active):hover,
		.mode-switch button:not(.active):hover,
		.nav-btn:not(.active):hover,
		.reset-btn:hover,
		.hide-label:hover,
		#song-list .song-item:hover:not(.active),
		.config-row input[type="number"]:hover,
		.config-row input[type="number"]:focus,
		#color-picker-panel input[type="number"]:hover,
		#color-picker-panel input[type="number"]:focus,
		#color-picker-panel label:has(input[type="checkbox"]):hover,
		#color-picker-panel label:has(input[type="radio"]):hover,
		#theme-name-save:hover,
		#ui-theme-name-save:hover,
		#theme-name-input:hover,
		#theme-name-input:focus,
		#ui-theme-name-input:hover,
		#ui-theme-name-input:focus,
		#cp-hex:hover,
		#cp-hex:focus {
			color: rgb(var(--ui-on-panel)) !important;
		}
		.ctrl-btn:hover,
		.ctrl-btn:hover svg,
		#btn-theme:hover,
		#btn-theme:hover svg {
			color: rgb(var(--ui-on-panel)) !important;
			fill: rgb(var(--ui-on-panel)) !important;
		}
		.start-btn:hover,
		#cp-save:hover {
			color: rgb(var(--ui-on-active)) !important;
		}
	}

	/* ---- Chrome that used to live as HTML style="" attributes ---- */
	#settings-panel,
	#audio-panel,
	#theme-panel {
		display: none;
		position: fixed;
		top: 58px;
		right: 70px;
		z-index: 101;
		background: rgba(var(--ui-panel), 0.90);
		border: 1px solid rgba(var(--ui-border), 0.32);
		border-radius: 18px;
		box-sizing: border-box;
		padding: 14px 16px;
		width: 300px;
		min-width: 300px;
		font-size: 0.9rem;
		box-shadow: 0 0 12px rgba(var(--ui-glow), 0.22);
		color: rgb(var(--ui-text));
	}
	#settings-panel {
		z-index: 120;
	}

	.float-title {
		font-weight: 600;
		margin-bottom: 12px;
		letter-spacing: 0.02em;
	}
	#theme-panel .float-title {
		margin-bottom: 10px;
	}

	#settings-panel .hide-label {
		justify-content: space-between;
		width: 100%;
	}
	#settings-panel .mode-separator {
		margin: 10px 0;
	}
	#fps-switch {
		margin-bottom: 14px;
		width: fit-content;
	}

	.audio-transport {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 4px;
		margin-bottom: 12px;
		height: 36px;
	}
	.audio-transport-btns {
		display: flex;
		align-items: center;
		gap: 2px;
	}
	#audio-prev,
	#audio-rewind,
	#audio-forward,
	#audio-next,
	#audio-play,
	#audio-mute {
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		color: inherit;
	}
	#audio-prev,
	#audio-rewind,
	#audio-forward,
	#audio-next {
		width: 28px;
		height: 28px;
	}
	#audio-play {
		width: 32px;
		height: 32px;
	}
	#volume-wrapper {
		display: flex;
		align-items: center;
		gap: 6px;
	}
	#audio-volume {
		width: 0;
		opacity: 0;
		transition: width 0.2s ease, opacity 0.2s ease;
	}
	.audio-wave-row {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 12px;
	}
	#waveform-container {
		flex: 1;
		height: 36px;
		position: relative;
		cursor: pointer;
		overflow: hidden;
	}
	#waveform {
		width: 100%;
		height: 100%;
		display: block;
	}
	#song-list {
		display: flex;
		flex-direction: column;
		gap: 5px;
		max-height: 210px;
		overflow-y: auto;
	}

	.panel-kicker {
		margin-top: 8px;
		font-size: 0.78rem;
		opacity: 0.75;
		letter-spacing: 0.02em;
	}
	.panel-kicker.tight {
		margin-top: 2px;
	}
	.theme-name-row {
		display: flex;
		gap: 6px;
		margin-bottom: 10px;
	}
	#theme-pane-ui .theme-name-row {
		margin-bottom: 4px;
	}
	#theme-name-input,
	#ui-theme-name-input {
		flex: 1;
	}
	#theme-name-save,
	#ui-theme-name-save {
		flex: 0 0 auto;
		padding: 0 12px;
	}
	.theme-custom-block > .mode-separator {
		margin: 8px 0;
	}
	#theme-pane-ui {
		display: none;
	}

	#color-picker-panel {
		display: none;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: calc(100% - 24px);
		height: auto;
		padding: 14px 14px 16px;
		background: rgba(var(--ui-panel), 0.95);
		border: 1px solid rgba(var(--ui-border), 0.35);
		border-radius: 18px;
		box-shadow: 0 0 12px rgba(var(--ui-glow), 0.22);
		z-index: 130;
		box-sizing: border-box;
	}
	#cp-sv {
		width: 100%;
		border-radius: 8px;
		cursor: crosshair;
	}
	#cp-hue {
		width: 100%;
		margin: 10px 0 8px;
		accent-color: rgb(var(--ui-text));
	}
	.cp-row {
		display: flex;
		gap: 6px;
		align-items: center;
		font-size: 0.78rem;
		color: rgb(var(--ui-muted));
	}
	.cp-row + .cp-row {
		margin-top: 6px;
	}
	#cp-hex {
		width: 7.5em;
		font-family: ui-monospace, monospace;
		text-transform: uppercase;
		border-radius: 6px;
		padding: 0.25rem 0.3rem;
		background: rgba(var(--ui-panel-2), 0.55);
		border: 1px solid rgba(var(--ui-border), 0.4);
		color: rgb(var(--ui-text));
		outline: none;
	}
	#cp-preview {
		margin-top: 10px;
		height: 22px;
		border-radius: 6px;
		border: 1px solid rgba(255, 255, 255, 0.2);
		background: #a9a51b;
	}
	#cp-anim-only .mode-separator {
		margin: 12px auto 10px;
		max-width: 90%;
	}
	.cp-roles {
		display: flex;
		gap: 12px;
		margin-top: 4px;
		font-size: 0.78rem;
		justify-content: center;
		align-items: center;
	}
	.cp-active-row {
		display: flex;
		justify-content: center;
		margin-top: 12px;
	}
	.cp-actions {
		display: flex;
		gap: 8px;
		margin-top: 12px;
	}
	#cp-remove {
		flex: 0 0 auto;
		width: 40px;
		padding: 0;
		background: rgba(180, 50, 50, 0.45);
		border-color: rgba(220, 80, 80, 0.7);
		color: #fecaca;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#theme-confirm-msg {
		margin-bottom: 14px;
		line-height: 1.4;
	}
	.theme-confirm-actions {
		display: flex;
		gap: 10px;
		justify-content: center;
	}
	#current-song-title {
		white-space: nowrap;
	}

	.play-start-wrap {
		display: flex;
		justify-content: center;
		margin: 0 0 0.9rem;
	}
	#play-sim-reset {
		justify-content: center;
	}
	#play-game-copy,
	#play-sim-copy {
		margin-bottom: 1.1rem;
	}
	#pilot-score {
		margin: 0.6rem 0 1.1rem;
		font-size: 1.35rem;
		color: rgb(var(--ui-text));
		text-shadow: 0 0 12px rgba(var(--ui-glow), 0.45);
	}
	.entry.is-hidden {
		display: none;
	}
	.mode-separator.hint-sep {
		margin: 1.1rem auto;
	}