html, body {
		margin: 0;
		height: 100dvh;
		background: #00000000;
		overflow: hidden;
	}

	#dev-notes-button {
		position: fixed;
		top: 2vh;
		left: 2vh;
		z-index: 999999;

		height: 4vh;
		width: 14vh;
		padding: 0 1.5vh;

		border: 1px solid rgba(192, 255, 192, 0.7);
		border-radius: 0.6vh;

		background: rgba(0, 20, 0, 0.88);
		color: #c0ffc0;

		font-family:   "Cutive Mono",   monospace;
		font-size: 1.4vh;
		font-weight: bold;
		text-transform: uppercase;

		cursor: pointer;
		pointer-events: auto;

		box-shadow:
			0 0 4px rgba(127, 255, 127, 0.7),
			0 0 12px rgba(170, 255, 170, 0.35);

		transition: transform 0.2s ease;
	}
	#dev-notes-button:hover {
		transform: scale(1.06);
	}

	#dev-notes-button.has-unread-notes {
		animation: devNotesPulse 1.25s ease-in-out infinite;
	}

	@keyframes devNotesPulse {
		0%,
		100% {
			box-shadow:
				0 0 4px rgba(127, 255, 127, 0.7),
				0 0 12px rgba(170, 255, 170, 0.35);

			transform: scale(1);
		}

		50% {
			box-shadow:
				0 0 8px rgba(192, 255, 192, 1),
				0 0 24px rgba(170, 255, 170, 0.8),
				0 0 40px rgba(170, 255, 170, 0.45);

			transform: scale(1.06);
		}
	}

	#dev-notes-button.has-unread-notes:hover {
		transform: scale(1.06);
	}

	#dev-notes-backdrop {
		position: fixed;
		inset: 0;

		z-index: 10000000;

		display: none;
		align-items: center;
		justify-content: center;

		background: rgba(0, 0, 0, 0.72);

		pointer-events: auto;
	}

	#dev-notes-modal {
		width: 52vh;
		max-width: calc(100vw - 4vh);
		max-height: 76vh;

		padding: 2.4vh;
		box-sizing: border-box;

		display: flex;
		flex-direction: column;

		background: rgba(0, 18, 0, 0.96);
		color: #c0ffc0;

		border: 1px solid rgba(192, 255, 192, 0.8);
		border-radius: 1vh;

		box-shadow:
			0 0 8px rgba(127, 255, 127, 0.7),
			0 0 30px rgba(127, 255, 127, 0.25);

		font-family:   "Cutive Mono",   monospace;
	}

	#dev-notes-title {
		margin-bottom: 2vh;

		font-size: 2.2vh;
		font-weight: bold;
		text-align: center;
		text-transform: uppercase;
	}

	#dev-notes-content {
		flex: 1;
		min-height: 0;
		
		width: 100%;
		box-sizing: border-box;

		overflow-y: auto;
	}

	.dev-note-section {
		width: 100%;
		box-sizing: border-box;
		
		margin: 0 auto 2vh auto;
		padding: 1.4vh;

		border: 1px solid rgba(192, 255, 192, 0.32);
		border-radius: 0.6vh;

		background: rgba(0, 35, 0, 0.42);
	}

	.dev-note-section:last-child {
		margin-bottom: 0;
	}

	.dev-note-author {
		margin-bottom: 0.8vh;

		color: #c0ffc0;

		font-size: 1.5vh;
		font-weight: bold;
		text-transform: uppercase;
	}

	.dev-note-text {
		color: rgba(192, 255, 192, 0.82);

		font-size: 1.35vh;
		line-height: 1.45;

		user-select: text;
		-webkit-user-select: text;
	}

	#dev-notes-close-button {
		width: 100%;
		height: 3.8vh;
		box-sizing: border-box;

		margin-top: 1.5vh;

		border: 1px solid rgba(192, 255, 192, 0.55);
		border-radius: 0.5vh;

		background: rgba(0, 35, 0, 0.9);
		color: #c0ffc0;

		font-family:   "Cutive Mono",   monospace;
		font-size: 1.3vh;
		font-weight: bold;
		text-transform: uppercase;

		cursor: pointer;
	}

	#dev-notes-close-button:hover {
		background: rgba(0, 60, 0, 0.95);
	}

	#map-compass {
		position: absolute;
		right: 10vh;
		bottom: 10vh;

		width: 13.5vh;
		height: 13.5vh;

		z-index: 999998;
		pointer-events: none;
		user-select: none;

		display: block;
		opacity: 0;
		visibility: hidden;

		transition:
			opacity 3s ease,
			visibility 0s linear 3s;

		border-radius: 50%;

		clip-path: circle(50% at 50% 50%);
		-webkit-clip-path: circle(50% at 50% 50%);

		background: rgba(0, 0, 0, 0.42);

		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);

		box-shadow:
			inset 0 0 1.2vh rgba(255, 255, 255, 0.08),
			0 0 2.5vh rgba(0, 0, 0, 0.45);

		overflow: hidden;
	}

	#map-compass-ring,
	#map-compass-cross {
		position: absolute;
		top: 0;
		left: 0;

		display: block;
		width: 100%;
		height: 100%;

		object-fit: contain;
		pointer-events: none;
		user-select: none;
	}
	#map-compass-ring {
		z-index: 0;
		transform-origin: 50% 50%;
		transform: rotate(0deg);
	}
	#map-compass-cross {
		z-index: 0;
		transform: none;
	}



	#overlay-buttons {
		pointer-events: auto;
		z-index: 9999;
	}

	#btn-grid {
		pointer-events: auto;
		cursor: pointer;
		z-index: 9999;
	}

	#category-info-box {
		position: absolute;
		top: 27%;
		left: 2.2%;
		width: 16dvh;
		background: rgba(0, 0, 0, 0);
		color: rgba(171, 255, 171, 0.548);
		padding: 1dvh;
		font-family:   'Cutive Mono',   monospace;
		border-radius: 0.5dvh;
		font-size: 2.4dvh;
		z-index: 201;
		pointer-events: none;
		text-transform: uppercase;
		text-align: center;
	}

	#category-info-box span {
		display: block;
		font-size: 1.7dvh;
		font-weight: normal;
		text-transform: none;
		margin-top: 1.6dvh;
		text-align: left;
	}

	#category-info-box.align-left span {
		text-align: left;
		padding-left: 0.6dvh;
	}

	#category-info-box.align-right span {
		text-align: right;
		padding-right: 0.6dvh;
	}

	#control-panel-wrapper {
		position: fixed;
		top: 0;
		left: 50%;
		height: 100dvh;
		transform: translateX(-50%);
		z-index: 0;
		pointer-events: none;
	}

	#control-panel-base {
		height: 100dvh;
	}

	#tv-overlay {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 100dvh;
		height: 100dvh;
		transform: translate(-50%, -50%);
		pointer-events: none;
		z-index: 3;
		background: url('layers/tv-frame.png') center center no-repeat;
		background-size: contain;
	}
	
	#gap-fix-overlay {
		position: fixed;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		height: 100dvh;
		pointer-events: none;
		z-index: 99999;
		background-size: contain;
	}

	#floating-labels {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 99999;
	}

	.floating-label {
		position: absolute;
		color: #c0ffc0;
		
		font-family:   'Cutive Mono',   monospace;
		font-size: 2dvh;
		white-space: nowrap;
		text-shadow:
			0 0 2px #7fff7f,
			0 0 6px #aaffaa,
			0 0 12px #c0ffc0,
			0 0 18px #c0ffc0,
			0 0 24px #e0ffe0;
		pointer-events: none;
		z-index: 99999;
	}



	#boot-animation {
		position: absolute;
		inset: 0;

		width: 100%;
		height: 100%;
		object-fit: contain;

		z-index: 999999;
		pointer-events: none;

		display: none;
		opacity: 0;

		transition: opacity 0.8s ease;
	}

	#map-container.booting {
		background: #0000
	}

	#map-container.booting #map,
	#map-container.booting #background-overlay,
	#map-container.booting #map-compass,
	#map-container.booting #floating-labels {
		opacity: 0;
	}

	#map,
	#background-overlay {
		transition: opacity 1.2s ease;
	}

	.session-user-label {
		font-family:   "Cutive Mono",   monospace;
		font-size: 1.6dvh;
		font-weight: bold;
		white-space: nowrap;
		text-align: center;
		pointer-events: none;
		color: white;

		-webkit-text-stroke: 3px black;
		paint-order: stroke fill;
	}

	.session-live-dot {
		display: inline-block;
		margin-left: 0.001em;

		font-size: 1em;
		line-height: 1;

		color: #ff3030;

		-webkit-text-stroke: 1px black;
		paint-order: stroke fill;

		vertical-align: 0.04em;
	}

	#background {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 100vw;
		height: 100vw;
		transform: translate(-50%, -50%);
		pointer-events: none;
		z-index: -1;
		background: url('layers/background.png') center center no-repeat;
		background-size: contain;
	}
	#map-container {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 100dvh;
		height: 100dvh;
		transform: translate(-50%, -50%);
		max-width: 100dvh;
		max-height: 100dvh;
		overflow: hidden;
		opacity: 0;
		transition: opacity 1s ease-in;
		display: none;
		z-index: 1;
	}

	#map {
		width: 100%;
		height: 100%;
		z-index: 1;
		background: rgba(29, 69, 120, 0.729);
		position: relative;
	}

	#background-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url('layers/tv-background.png') center center no-repeat;
		background-size: cover;
		z-index: 0;
		pointer-events: none;
	}

	#btn-rp-mode-hitbox {
		position: absolute;
		top: 9%;
		left: 8.4%;
		width: 7dvh;
		height: 6dvh;
		transform: translate(-50%, -50%);
		border-radius: 50%;

		pointer-events: auto;
		cursor: pointer;

		z-index: 9999;
		overflow: visible;
	}

	#btn-rp-mode-toggle {
		position: absolute;
		top: 50%;
		left: 50%;
		height: 5dvh;
		width: auto;
		transform: translate(-48%, -54%) scale(2.5);
		pointer-events: none;
		opacity: 1 !important;
	}

	#rotate-warning {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.96);
		display: none;
		align-items: center;
		justify-content: center;
		z-index: 99999999;
		pointer-events: all;
	}

	.rotate-warning-inner {
		text-align: center;
		color: #c0ffc0;
		font-family:   'Cutive Mono',   monospace;
		text-shadow:
			0 0 2px #7fff7f,
			0 0 6px #aaffaa,
			0 0 12px #c0ffc0;
		padding: 3dvh;
	}

	.rotate-icon {
		font-size: 8dvh;
		line-height: 1;
		margin-bottom: 2dvh;
		animation: rotatePrompt 1.8s ease-in-out infinite;
	}

	.rotate-text {
		font-size: 2.4dvh;
		line-height: 1.5;
	}

	@keyframes rotatePrompt {
		0%   { transform: rotate(0deg) scale(1); opacity: 0.7; }
		25%  { transform: rotate(0deg) scale(1.05); opacity: 1; }
		50%  { transform: rotate(90deg) scale(1.1); opacity: 1; }
		75%  { transform: rotate(90deg) scale(1.05); opacity: 1; }
		100% { transform: rotate(0deg) scale(1); opacity: 0.7; }
	}


	#coord-input {
		position: absolute;
		top: 43.1%;
		left: 91.7%;
		transform: translate(-50%, -50%);
		background: rgba(0, 0, 0, 0);
		width: 18dvh;
		height: 3.8dvh;
		vertical-align: middle;
		font-size: 3.8dvh;
		padding: 0dvh;
		border-radius: 0.8dvh;
		font-family:   'Cutive Mono',   monospace;
		font-size: 1.8dvh;
		z-index: 9999;
		pointer-events: auto;
	}

	#coord-input input {
		width: 18dvh;
		height: 3.8h;
		font-size: 1.4dvh;
		font-family:   'Cutive Mono',   monospace;
		background: none;
		border: none;
		color: rgba(171, 255, 171, 0.74);
		outline: none;
		text-align: center;
		box-sizing: border-box;

		padding-top: 1dvh;
		padding-bottom: 0.2dvh;
		line-height: normal;
	}
	
	#control-panel-sticker {
		position: absolute;
		top: 74%;
		left: 0%;
		height: 30dvh;
		width: auto;
		pointer-events: none;
		z-index: 150;
		transform: rotate(-10deg);
		filter: brightness(0.9)
	}

	#service-date {
		position: absolute;
		top: 17%;
		right: 2%;

		height: 3.5dvh;
		width: auto;

		mix-blend-mode: hard-light;
		opacity: 0.8;

		pointer-events: auto;
		cursor: default;

		z-index: 10000;
	}


	.leaflet-base-pane img,
	.leaflet-base1-pane img,
	.leaflet-terrainUnder-pane img {
		image-rendering: pixelated;
		image-rendering: crisp-edges;
	}


	.leaflet-base-pane,
	.leaflet-base1-pane,
	.leaflet-terrainUnder-pane {
		filter: grayscale(0%) contrast(100%);
		transition: filter 3s ease;
	}

	#map.contrast-mode .leaflet-base-pane,
	#map.contrast-mode .leaflet-base1-pane,
	#map.contrast-mode .leaflet-terrainUnder-pane {
		filter: grayscale(100%) contrast(150%);
	}
	#map.contrast-mode .leaflet-topography-pane {
		mix-blend-mode: normal !important;
	}
	#coord-input input::placeholder {
		color: #c0ffc0;
		opacity: 0.7;
	}

	#map-container.rainbow-mode {
		animation: rainbowShift 8s linear infinite;
		filter: hue-rotate(0deg);
	}


	#map {
		cursor: grab;
	}

	#map:active {
		cursor: grabbing;
	}



	@keyframes rainbowShift {
		0%   { filter: hue-rotate(0deg); }
		100% { filter: hue-rotate(360deg); }
	}
	@keyframes topoPulse {
		0%   { opacity: 0.70; }
		50%  { opacity: 0.50; }
		100% { opacity: 0.70; }
	}
	.leaflet-topography-pulse {
		animation: topoPulse 2.5s ease-in-out infinite;
	}
			#overlay-buttons {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: auto;
		z-index: 200;
	}

	.map-toggle-btn {
		position: absolute;
		width: 4dvh;
		height: 4dvh;
		pointer-events: auto;
		transition: opacity 0.3s ease;
		cursor: pointer;
		opacity: 0.5;
	}

	.layer-toggle {
		width: 6.25dvh;
		height: 2.5dvh;
		opacity: 1;
	}

	.dummy-button {
		pointer-events: none;
		opacity: 1;
	}

	.onoff-toggle {
		opacity: 0.8 !important;
		height: 6.2dvh;
		width: auto;
		transform-origin: center center;
	}

	#btn-map-toggle {
		opacity: 1;
	}

	* {
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}

	.status-light {
		position: absolute;
		width: 4dvh;
		height: 4dvh;
		pointer-events: none;
	}
	#btn-grid {
		pointer-events: auto;
		cursor: pointer;
		z-index: 9999;
	}
	#btn-map-toggle { top: 82.5%; left: 90.52%; transform: scale(4); }
	#status-light   { top: 6.7%; left: 90.22%; pointer-events: none; transform: scale(2.6); }

	.pulse-marker {
		position: absolute;
		width: 20px;
		height: 20px;
		position: absolute;
		background: #c0ffc0;
		border-radius: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
	}

	.map-text-label {
		



		font-family:   'Cutive Mono',   monospace;
		color: #ffffff;
		font-size: 1.6dvh;
		text-align: center;
		white-space: nowrap;
		pointer-events: none;
		-webkit-text-stroke: 4px #000;
		paint-order: stroke fill;
		text-shadow:
			0 0 2px  #7fffee,
			0 0 6px  #7fffee,
			0 0 12px #aaffff,
			0 0 24px #c0ffff,
			0 0 40px #c0ffff,
			0 0 70px #c0ffff;
		z-index: 9999;
		text-align: center;
		white-space: nowrap;
		position: relative;
	}
	.map-text-label {
		position: relative;
	}

	.map-text-label .label-inner {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		white-space: nowrap;
	}
	.clear {
		height: 10dvh;
		width: auto;
		opacity: 0.8 !important;
	}

	.pulse-marker::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		background: #c0ffc0;
		border-radius: 50%;
		transform: translate(-50%, -50%);
		animation: pulse 1.5s ease-out infinite;
	}

	.faint-marker {
		width: 8px;
		height: 8px;
		background: rgba(255, 255, 255, 0.2);
		border: 1px solid white;
		border-radius: 50%;
		pointer-events: none;
		position: absolute;
	}

	.numpad-btn {
		width: 5.2dvh;
		height: auto;
		cursor: pointer;
		opacity: 1 !important;
	}

	.mode-toggle {
		height: 5dvh;
		width: auto;
		opacity: 1 !important;
	}

	.color-dodge-overlay {
		mix-blend-mode: color-dodge;
		pointer-events: none;
	}

	.color-multiply-overlay {
		mix-blend-mode: multiply;
		pointer-events: none;
	}

	.category-light {
		width: 2.2dvh;
		height: 2.2dvh;
		pointer-events: none;
		z-index: 9999;
	}

	.mode-light {
		width: 2.2dvh;
		height: 2.2dvh;
		pointer-events: none;
		z-index: 9999;
	}
	.measure-toggle {
		width: 16dvh;
		height: auto;
		opacity: 1 !important;
	}
	.leaflet-control-measure .leaflet-control-measure-toggle,
	.leaflet-control-measure .leaflet-control-measure-interaction {
		display: none !important;
	}
	@keyframes pulse {
		0% {
			transform: translate(-50%, -50%) scale(1);
			opacity: 0.8;
		}
		100% {
			transform: translate(-50%, -50%) scale(2.5);
			opacity: 0;
		}
	}

	.map-text-label.region-label {
		color: #fff;
		font-size: 2.6dvh;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		-webkit-text-stroke: 6px #000;
		paint-order: stroke fill;
		text-shadow:       
			0 0 2px  #fff,
			0 0 6px  #fff,
			0 0 12px #fff,
			0 0 24px #fff,
			0 0 40px #fff,
			0 0 70px #fff,
			0 0 110px #fff;

		z-index: 99998;

		}

	  
	#effects-button {
	  position: fixed;
	  bottom: 22vh;
	  right: 2vh;
	  z-index: 999999;

	  height: 4vh;
	  width: 14vh;
	  padding: 0 1.5vh;

	  border: 1px solid rgba(192, 255, 192, 0.7);
	  border-radius: 0.6vh;

	  background: rgba(0, 20, 0, 0.88);
	  color: #c0ffc0;
		font-family:   "Cutive Mono",   monospace;
	  font-size: 1.4vh;
	  font-weight: bold;
	  text-transform: uppercase;

	  cursor: pointer;
	  pointer-events: auto;

	  box-shadow:
		0 0 4px rgba(127, 255, 127, 0.7),
		0 0 12px rgba(170, 255, 170, 0.35);

	  transition: transform 0.2s ease;
	}

	#effects-button:hover {
	  transform: scale(1.06);
	}
	  
	  
	  
	#export-map-button {
		position: fixed;
		bottom: 7vh;
		right: 2vh;
		z-index: 999999;
		height: 4vh;
		width: 14vh;
		padding: 0 1.5vh;

		border: 1px solid rgba(192, 255, 192, 0.7);
		border-radius: 0.6vh;
		background: rgba(0, 20, 0, 0.88);
		color: #c0ffc0;
		font-family:   "Cutive Mono",   monospace;
		font-size: 1.4vh;
		font-weight: bold;
		text-transform: uppercase;

		cursor: pointer;
		pointer-events: auto;

		box-shadow:
			0 0 4px rgba(127, 255, 127, 0.7),
			0 0 12px rgba(170, 255, 170, 0.35);

		transition:
			transform 0.2s ease,
			opacity 0.2s ease;
	}

	#export-map-button:hover {
		transform: scale(1.06);
	}

	#export-map-button:disabled {
		cursor: wait;
		opacity: 0.55;
		transform: none;
	}

	#export-coords-button {
		position: fixed;
		bottom: 12vh;
		right: 2vh;
		z-index: 999999;

		height: 4vh;
		width: 14vh;
		padding: 0 1.5vh;

		border: 1px solid rgba(192, 255, 192, 0.7);
		border-radius: 0.6vh;

		background: rgba(0, 20, 0, 0.88);
		color: #c0ffc0;
		font-family:   "Cutive Mono",   monospace;
		font-size: 1.4vh;
		font-weight: bold;
		text-transform: uppercase;

		cursor: pointer;
		pointer-events: auto;

		box-shadow:
			0 0 4px rgba(127, 255, 127, 0.7),
			0 0 12px rgba(170, 255, 170, 0.35);

		transition:
			transform 0.2s ease,
			opacity 0.2s ease;
	}

	#export-coords-button:hover {
		transform: scale(1.06);
	}

	#export-coords-button:disabled {
		opacity: 0.55;
		cursor: default;
		transform: none;
	}

	#session-modal-backdrop {
		position: fixed;
		inset: 0;

		z-index: 10000000;

		display: none;
		align-items: center;
		justify-content: center;

		background: rgba(0, 0, 0, 0.72);

		pointer-events: auto;
	}

	#session-modal {
		width: 34vh;
		min-width: 280px;

		padding: 2.4vh;

		background: rgba(0, 18, 0, 0.96);

		border: 1px solid rgba(192, 255, 192, 0.8);
		border-radius: 1vh;

		box-shadow:
			0 0 8px rgba(127, 255, 127, 0.7),
			0 0 30px rgba(127, 255, 127, 0.25);

		color: #c0ffc0;
		font-family:   "Cutive Mono",   monospace;
	}

	#session-modal-title {
		margin-bottom: 2vh;

		font-size: 2.2vh;
		font-weight: bold;
		text-align: center;

		text-transform: uppercase;
	}

	.session-field {
		margin-bottom: 1.4vh;
	}

	.session-field label {
		display: block;
		margin-bottom: 0.5vh;

		font-size: 1.3vh;
		text-transform: uppercase;
	}

	.session-field input[type="text"] {
		width: 100%;
		height: 3.8vh;

		box-sizing: border-box;

		padding: 0 1vh;

		border: 1px solid rgba(192, 255, 192, 0.5);
		border-radius: 0.5vh;

		background: rgba(0, 0, 0, 0.6);
		color: #c0ffc0;
		font-family:   "Cutive Mono",   monospace;
		font-size: 1.5vh;

		outline: none;

		user-select: text;
		-webkit-user-select: text;
	}

	.session-field input[type="color"] {
		width: 100%;
		height: 4vh;

		padding: 0.2vh;

		border: 1px solid rgba(192, 255, 192, 0.5);
		border-radius: 0.5vh;

		background: rgba(0, 0, 0, 0.6);

		cursor: pointer;
	}

	#session-status {
		min-height: 2vh;

		margin: 1vh 0;

		font-size: 1.2vh;
		text-align: center;

		color: rgba(192, 255, 192, 0.8);
	}

	#session-modal-buttons {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1vh;
		margin-top: 1.5vh;
		align-items: stretch;
	}

	.session-modal-button {
		width: 100%;
		min-width: 0;
		height: 5.2vh;

		display: flex;
		align-items: center;
		justify-content: center;

		padding: 0 0.8vh;

		border: 1px solid rgba(192, 255, 192, 0.7);
		border-radius: 0.5vh;

		background: rgba(0, 35, 0, 0.9);
		color: #c0ffc0;
		font-family:   "Cutive Mono",   monospace;
		font-size: 1.3vh;
		font-weight: bold;
		line-height: 1.15;
		text-align: center;

		cursor: pointer;
		box-sizing: border-box;
	}

	.session-modal-button:hover {
		background: rgba(0, 60, 0, 0.95);
	}

	#session-close-button {
		width: 100%;
		height: 3.5vh;

		margin-top: 1vh;

		border: none;

		background: transparent;
		color: rgba(192, 255, 192, 0.65);
		font-family:   "Cutive Mono",   monospace;
		font-size: 1.2vh;

		cursor: pointer;
	}

	#session-button {
		position: fixed;
		bottom: 17vh;
		right: 2vh;
		z-index: 999999;

		height: 4vh;
		width: 14vh;
		padding: 0 1.5vh;

		border: 1px solid rgba(192, 255, 192, 0.7);
		border-radius: 0.6vh;

		background: rgba(0, 20, 0, 0.88);
		color: #c0ffc0;
		font-family:   "Cutive Mono",   monospace;
		font-size: 1.4vh;
		font-weight: bold;
		text-transform: uppercase;

		cursor: pointer;
		pointer-events: auto;

		box-shadow:
			0 0 4px rgba(127, 255, 127, 0.7),
			0 0 12px rgba(170, 255, 170, 0.35);

		transition:
			transform 0.2s ease,
			opacity 0.2s ease;
	}

	#session-button:hover {
		transform: scale(1.06);
	}

	#hints-button {
		position: fixed;
		bottom: 2vh;
		right: 2vh;
		z-index: 999999;

		height: 4vh;
		width: 14vh;
		padding: 0 1.5vh;

		border: 1px solid rgba(192, 255, 192, 0.7);
		border-radius: 0.6vh;

		background: rgba(0, 20, 0, 0.88);
		color: #c0ffc0;
		font-family:   "Cutive Mono",   monospace;
		font-size: 1.4vh;
		font-weight: bold;
		text-transform: uppercase;

		cursor: pointer;
		pointer-events: auto;

		box-shadow:
			0 0 4px rgba(127, 255, 127, 0.7),
			0 0 12px rgba(170, 255, 170, 0.35);

		transition:
			transform 0.2s ease,
			opacity 0.2s ease;
	}

	#hints-button:hover {
		transform: scale(1.06);
	}

	#discord-button {
		position: fixed;
		top: 2vh;
		right: 2vh;
		z-index: 999999;
		display: block;
		height: 4vh !important;
		width: auto;
		transition: transform 0.2s ease;
		pointer-events: auto;
	}
	#discord-button img {
		height: 4vh;
		width: auto;
		display: block;
	}
	#discord-button:hover {
		transform: scale(1.08);
	}

	#mode-console-text {
		position: absolute;
		top: 50%;
		left: 50%;

		transform: translate(-50%, -50%);

		z-index: 999997;
		pointer-events: none;
		user-select: none;

		font-family: "VT323", monospace;
		font-size: 10vh;
		font-weight: 400;
		letter-spacing: 0.12em;
		white-space: nowrap;

		opacity: 0;
		display: none;

		text-shadow:
			0 0 2px currentColor,
			0 0 5px currentColor,
			0 0 10px currentColor,
			0 0 18px currentColor;

		transition: opacity 0.7s ease;
	}

	#mode-console-text.renatus-mode {
		color: #7fff7f;
	}

	#mode-console-text.evrima-mode {
		color: #ffd84a;
	}

	.mode-console-cursor {
		display: inline-block;
		margin-left: 0.08em;
		animation: modeConsoleBlink 0.65s steps(1) infinite;
	}

	@keyframes modeConsoleBlink {
		0%, 49% {
			opacity: 1;
		}

		50%, 100% {
			opacity: 0;
		}
	}

	#hover-help-tooltip {
		position: fixed;
		z-index: 2147483647;

		max-width: 28vh;
		padding: 1vh 1.2vh;

		border: 1px solid rgba(192, 255, 192, 0.75);
		border-radius: 0.6vh;

		background: rgba(0, 18, 0, 0.94);
		color: #c0ffc0;

		



		font-family:   "Cutive Mono",   monospace;
		font-size: 1.35vh;
		line-height: 1.35;

		box-shadow:
			0 0 5px rgba(127, 255, 127, 0.65),
			0 0 18px rgba(127, 255, 127, 0.22);

		pointer-events: none;
		user-select: none;

		opacity: 0;
		visibility: hidden;

		transition:
			opacity 0.18s ease,
			visibility 0s linear 0.18s;
	}

	#hover-help-tooltip.visible {
		opacity: 1;
		visibility: visible;

		transition:
			opacity 0.18s ease,
			visibility 0s;
	}

	#hover-help-tooltip-title {
		display: block;
		margin-bottom: 0.45vh;

		font-weight: bold;
		text-transform: uppercase;
	}

	#hover-help-tooltip-text {
		display: block;
		color: rgba(192, 255, 192, 0.82);
	}

	#hover-help-tooltip.map-help {
		text-align: center;
	}

	#hover-help-tooltip.map-help #hover-help-tooltip-title,
	#hover-help-tooltip.map-help #hover-help-tooltip-text {
		text-align: center;
	}

	#hover-help-tooltip.map-help #hover-help-tooltip-text {
		white-space: pre-line;
	}

	#zone-info-tooltip,
	#zone-info-tooltip-2 {
		position: fixed;
		z-index: 1000000;

		max-width: 28vh;
		padding: 1vh 1.2vh;

		border: 1px solid rgba(192, 255, 192, 0.75);
		border-radius: 0.6vh;

		background: rgba(0, 18, 0, 0.94);
		color: #c0ffc0;

		font-family: "Cutive Mono", monospace;
		font-size: 1.35vh;
		line-height: 1.35;

		box-shadow:
			0 0 5px rgba(127, 255, 127, 0.65),
			0 0 18px rgba(127, 255, 127, 0.22);

		pointer-events: none;
		user-select: none;

		opacity: 0;
		visibility: hidden;

		transition:
			opacity 0.18s ease,
			visibility 0s linear 0.18s;
	}

	#zone-info-tooltip.visible,
	#zone-info-tooltip-2.visible {
		opacity: 1;
		visibility: visible;

		transition:
			opacity 0.18s ease,
			visibility 0s;
	}

	#zone-info-title,
	#zone-info-title-2 {
		display: block;
		margin-bottom: 0.6vh;

		font-weight: bold;
		text-transform: uppercase;
	}

	#zone-info-content,
	#zone-info-content-2 {
		display: flex;
		flex-direction: column;
		gap: 0.35vh;
	}

	.zone-info-row {
		display: flex;
		align-items: center;
		gap: 0.6em;
		white-space: nowrap;
	}

	.zone-info-row img {
		width: 1.4em;
		height: 1.4em;
		object-fit: contain;
		flex-shrink: 0;
	}

	.spawn-dinosaur-icon {
		display: block;
		object-fit: contain;
		background: transparent;
		border: none;
		pointer-events: none;
	}



	.grid-scan-pane svg {
		--grid-scan-speed: 20s;
		--grid-scan-frequency: 1;

		-webkit-mask-image:
			repeating-linear-gradient(
				to bottom,

				transparent 0%,

				transparent
					calc((100% / var(--grid-scan-frequency)) * 0.26),

				rgba(0, 0, 0, 0.08)
					calc((100% / var(--grid-scan-frequency)) * 0.32),

				rgba(0, 0, 0, 0.30)
					calc((100% / var(--grid-scan-frequency)) * 0.39),

				rgba(0, 0, 0, 0.70)
					calc((100% / var(--grid-scan-frequency)) * 0.45),

				black
					calc((100% / var(--grid-scan-frequency)) * 0.50),

				rgba(0, 0, 0, 0.70)
					calc((100% / var(--grid-scan-frequency)) * 0.55),

				rgba(0, 0, 0, 0.30)
					calc((100% / var(--grid-scan-frequency)) * 0.61),

				rgba(0, 0, 0, 0.08)
					calc((100% / var(--grid-scan-frequency)) * 0.68),

				transparent
					calc((100% / var(--grid-scan-frequency)) * 0.74),

				transparent
					calc(
						100% / var(--grid-scan-frequency)
					)
			);

		mask-image:
			repeating-linear-gradient(
				to bottom,

				transparent 0%,

				transparent
					calc(
						(100% / var(--grid-scan-frequency)) * 0.40
					),

				rgba(0, 0, 0, 0.08)
					calc(
						(100% / var(--grid-scan-frequency)) * 0.43
					),

				rgba(0, 0, 0, 0.30)
					calc(
						(100% / var(--grid-scan-frequency)) * 0.46
					),

				rgba(0, 0, 0, 0.70)
					calc(
						(100% / var(--grid-scan-frequency)) * 0.485
					),

				black
					calc(
						(100% / var(--grid-scan-frequency)) * 0.50
					),

				rgba(0, 0, 0, 0.70)
					calc(
						(100% / var(--grid-scan-frequency)) * 0.515
					),

				rgba(0, 0, 0, 0.30)
					calc(
						(100% / var(--grid-scan-frequency)) * 0.54
					),

				rgba(0, 0, 0, 0.08)
					calc(
						(100% / var(--grid-scan-frequency)) * 0.57
					),

				transparent
					calc(
						(100% / var(--grid-scan-frequency)) * 0.60
					),

				transparent
					calc(
						100% / var(--grid-scan-frequency)
					)
			);

		-webkit-mask-size: 100% 100dvh;
		mask-size: 100% 100dvh;

		-webkit-mask-repeat: repeat-y;
		mask-repeat: repeat-y;
	}



	@property --topo-scan-angle {
		syntax: "<angle>";
		inherits: false;
		initial-value: 0deg;
	}

	.topography-scan-pane img {
		--topo-scan-speed: 10s;
		--topo-scan-angle: 0deg;

		-webkit-mask-image:
			conic-gradient(
				from var(--topo-scan-angle) at 50% 50%,

				transparent 0deg,
				transparent 35deg,

				rgba(0, 0, 0, 0.03) 55deg,
				rgba(0, 0, 0, 0.09) 85deg,
				rgba(0, 0, 0, 0.20) 125deg,
				rgba(0, 0, 0, 0.35) 170deg,
				rgba(0, 0, 0, 0.52) 215deg,
				rgba(0, 0, 0, 0.70) 260deg,
				rgba(0, 0, 0, 0.85) 305deg,
				rgba(0, 0, 0, 0.95) 340deg,

				black 359deg,
				transparent 360deg
			);

		mask-image:
			conic-gradient(
				from var(--topo-scan-angle) at 50% 50%,

				transparent 0deg,
				transparent 35deg,

				rgba(0, 0, 0, 0.03) 55deg,
				rgba(0, 0, 0, 0.09) 85deg,
				rgba(0, 0, 0, 0.20) 125deg,
				rgba(0, 0, 0, 0.35) 170deg,
				rgba(0, 0, 0, 0.52) 215deg,
				rgba(0, 0, 0, 0.70) 260deg,
				rgba(0, 0, 0, 0.85) 305deg,
				rgba(0, 0, 0, 0.95) 340deg,

				black 359deg,
				transparent 360deg
			);

		animation:
			topoRadarSweep
			var(--topo-scan-speed)
			linear
			infinite;
	}

	@keyframes topoRadarSweep {
		from {
			--topo-scan-angle: 0deg;
		}

		to {
			--topo-scan-angle: 360deg;
		}
	}


	.crt-glitch-slice {
		position: absolute;
		inset: 0;

		width: 100%;
		height: 100%;

		pointer-events: none;

		z-index: 2;

		overflow: hidden;

		will-change:
			transform,
			clip-path;
	}

	.crt-glitch-map-copy {
		position: absolute;

		top: 0;
		left: 0;

		width: 100%;
		height: 100%;

		pointer-events: none;
	}

	.structure-map-icon {
		filter:
			drop-shadow(0 0 6px rgba(0, 145, 59, 1))
			drop-shadow(0 0 12px rgba(0, 145, 59, 0.8));
	}
	
	#hover-help-tooltip.icon-help {
		min-width: 0;
		width: auto;
		max-width: none;
		min-height: 0;
		padding: 0.5dvh 0.9dvh;

		display: flex;
		align-items: center;
		justify-content: center;

		text-align: center;
	}

	#hover-help-tooltip.icon-help
	#hover-help-tooltip-title {
		display: block;
		margin: 0;
		line-height: 1;
		text-align: center;
		white-space: nowrap;
	}

	#hover-help-tooltip.icon-help
	#hover-help-tooltip-text {
		display: none;
	}
	
	.help-control-row {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5em;
		margin: 0.25em 0;
	}
	
	.help-control-row img {
		display: none;
	}
	
	.help-control-row::before {
		content: "";
		width: 1em;
		height: 1em;
		flex-shrink: 0;
		background-color: currentColor;
		mask-size: contain;
		mask-repeat: no-repeat;
		mask-position: center;
		-webkit-mask-size: contain;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
	}
	
	.help-control-row.lmb::before {
		mask-image :url("icons/ui/lmb.png");
		-webkit-mask-image: url("icons/ui/lmb.png");
	}
	
	.help-control-row.rmb::before {
		mask-image :url("icons/ui/rmb.png");
		-webkit-mask-image: url("icons/ui/rmb.png");
	}
	
	.help-control-row.wheel::before {
		mask-image :url("icons/ui/wheel.png");
		-webkit-mask-image: url("icons/ui/wheel.png");
	}