body{

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;

    width: 99vw !important;
    
    
}

  body {
  filter: saturate(1.2);
}



.top-boundary {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  /* or transparent */
}

/*

.top-wrapper {
    margin-top: 330px;
  position: absolute !important;
  z-index: 2147483647 !important;
  top: 2px !important;
}

*/

#map:focus {
  outline: none;
}

#map {
	top: 25px !important;
	height: 96vh !important; /* Adjusted height for map */
	background: #0b0b0b;

}

#map { /* there is also a #map ih game_1.css */
	margin-top: 12px !important;
transform: translateY(-40px) !important;

position: sticky !important;

}

#map:hover {
	cursor: default;        
}




.leaflet-proxy.leaflet-zoom-animated {
  transform: none !important;
}



path {
  	z-index: 2147483647 !important;

}

.selected-path {
  /* go to game 2 html */
} 


.leaflet-tooltip.reveal-all-tooltip,
.leaflet-tooltip.selected-tooltip.leaflet-zoom-animated{
	/* this includes both selected and correct tooltip css*/

	font-size: px !important; /* TOOLTIP FONT SIZE */
  	line-height: 11px !important;  /* Reduce line height to fit text */

    padding: 1px 2px !important; /* DONT CHANGE - MAY BREAK CODE */
    min-height: auto !important; /* Prevent unnecessary height */
}	





.leaflet-tooltip-left{
	left: -4.2px !important;
 
}
	


.leaflet-tooltip-right{
left: 4.2px !important;

}
.leaflet-tooltip-right:before {

    content: "";
    position: absolute;
    top: 50%;

    width: 0;
    height: 0;
    border: 6px solid transparent; /* DONT CHANGE - MAY BREAK CODE */
    border-right-color: rgba(120, 120, 120,0.8); /* ← tooltip triangle */
}

.leaflet-tooltip-left:before {

    content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-left-color: rgba(120, 120, 120,0.8); /* ← tooltip triangle color */
}


.leaflet-tooltip::before {
    display: none !important;

}

.leaflet-tooltip {
    margin-top: 0px;
    margin-left: -0.2px;
    
}

.toggle-map, .toggle-map-1, .toggle-map-2, .toggle-map-3, .toggle-map-4, .toggle-map-5 {
 height: 31px !important;
 width: 24px !important;
}


.toggle-map-1 {top: 105px !important; left: 0px !important; z-index: 211111 !important;} /* baige */

.toggle-map-3{ top: 35px  !important; left: 0px !important; } /* rivers */

.toggle-map-4{top: 70px !important; left: 0px !important;} /* night & districts */


.toggle-map-5{display: none;}

.toggle-map-2 {display:none;} /* white & states */
.toggle-map {display:none;} /* disable */



.sidebar {
    position: fixed;
    right: 0;
    top: 2px;
	z-index: 999 !important;
    width: 280px;
    height: 93vh;
	color: #3b3b3b;
    background-color: #f1f1f1;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;

    padding-top: 20px;
    padding-bottom: 20px;

    transition: transform 0.3s ease-in-out;

	cursor: pointer;
    user-select: none; 
        font-size: 13px !important;
        
        opacity: 0.92;

}



.map-data-list {
  margin-top:25px;
}


.sidebar {

  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
  z-index: 9999;
}




.sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
}

.sidebar ul li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.sidebar ul li:hover {
    background-color: #eee;
}





.point_leaflet.leaflet-interactive {
  pointer-events: stroke !important;    /* allow interaction on stroke only */
    pointer-events: visibleFill !important; 
  cursor: pointer !important;
}


.leaflet-zoom-animated g {
  transform: none !important;
}

.point_leaflet {

  transform: none !important;
  will-change: auto;
}


.leaflet-tooltip {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  pointer-events: auto !important;
}

.leaflet-pane,
.leaflet-pane.leaflet-tooltip-pane {
  perspective: 1000px !important;
}



div[id^="leaflet-tooltip-"]:focus,
div[id^="leaflet-tooltip-"]:hover,
div[role="tooltip"]:focus,
div[role="tooltip"]:hover,
.leaflet-tooltip.reveal-all-tooltip.leaflet-zoom-animated.leaflet-tooltip-right:focus,
.leaflet-tooltip.reveal-all-tooltip.leaflet-zoom-animated.leaflet-tooltip-right:hover,
.leaflet-tooltip.reveal-all-tooltip.leaflet-zoom-animated.leaflet-tooltip-left:focus,
.leaflet-tooltip.reveal-all-tooltip.leaflet-zoom-animated.leaflet-tooltip-left:hover,
.leaflet-tooltip.reveal-all-tooltip:hover,
.leaflet-tooltip.reveal-all-tooltip:focus {
z-index: 2147483647 !important;
font-weight: 490;
z-index: 2147483647 !important;
padding-bottom: 2.4px !important;
}

.home-link-button, .switcher-button {
 /* HOME button and Switcher button */ 
 

 height: 31px;
 width: 24px !important;
 

  
  background-color: #f5f5f5;
  border: 1px solid #ccc !important;
  border-radius: 6px;
  padding: 2px 5px;
  
  cursor: pointer;
  transition: all 0.2s ease-in-out;

  font-family: system-ui, sans-serif;

  width: fit-content;
  display: inline-flex;          /* inline-flex for better centering */
  align-items: center;           /* vertically center content */
  justify-content: center;
  z-index: 2147483647 !important;
}

.home-link-button:hover, .switcher-button:hover {
  background-color: #e0e0e0;
  color: #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#font-switcher {
  position: fixed;
  margin-left: 5px;
  margin-top: -0px !important;

}


.info-br {  /* ⓘ */
	position: absolute !important;

	top:0px !important;

  z-index: 1999;

  right: 40px !important;

  color: #999999;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 5px 4px;
  
  cursor: pointer;
  transition: all 0.2s ease-in-out;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  font-family: system-ui, sans-serif;


  font-size: 11px !important;

   height: 31px !important;
 width: 24px !important;

}


.info-br:hover {
  background-color: #e0e0e0;
  color: #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}


.info-br-active{
opacity: 1 !important;	
}




/* Remove absolute positioning */

.home-link {
	color: #9f9e9e !important;
}

.home-link, .switcher {
  all: unset;
  font-size: 1.22rem; /* adjust as needed */
  opacity: 0.5;
  cursor: pointer;
  z-index: 2147483647 !important;
}

.home-link:hover, .switcher:hover {
  opacity: 1;
}

.switcher-text {
font-size: 14px;
  opacity: 0.4;
}

.switcher-text:hover {
  opacity: 1;
}




.toggle-map, .toggle-map-1, .toggle-map-2, .toggle-map-3, .toggle-map-4, .toggle-map-5 {
    position: fixed;  /* instead of absolute */
    top: 0px;
    right: 10px;      /* pinned to right edge */
    z-index: 999;
 
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  
  border-radius: 6px;
  padding: 5px 4px;
  transition: all 0.2s ease-in-out;
  z-index: 1147483647 !important;

}


.toggle-map > img, .toggle-map-1 > img, .toggle-map-2 > img, .toggle-map-3 > img, .toggle-map-4 > img, .toggle-map-5 > img  {
	z-index:9999;


 width: 20px !important;

 z-index: 2147483647 !important;
 opacity: 0.5;
 transform: translateX(-2px) translateY(-2px);
}

.toggle-map:hover, .toggle-map-1:hover, .toggle-map-2:hover, .toggle-map-3:hover, .toggle-map-4:hover, .toggle-map-5:hover{
	z-index:9999;
	opacity:1;
  
  color: #000;
}

.toggle-map > img:hover, .toggle-map-1 > img:hover, .toggle-map-2 > img:hover, .toggle-map-3 > img:hover, .toggle-map-4 > img:hover, .toggle-map-5 > img:hover  {
  	opacity:1;
  transition: all 0.2s ease-in-out;

}













.leaflet-tooltip.selected-tooltip.leaflet-zoom-animated, 
.leaflet-tooltip.correct-tooltip.leaflet-zoom-animated{
	/* this includes both selected and correct tooltip css*/
	font-size: 10pt;
	opacity:0.9;

	line-height: 1 !important;  /* Reduce line height to fit text */
   
	user-select: text !important;
	
}
	
.leaflet-tooltip-left{
	left: -4.2px !important;
}
	
.leaflet-tooltip-right{
left: 4.2px !important;
}











			 


.slider-container{
	margin-top:-20px;
	text-align: right;
	margin-right: 10px;
	opacity:0.5; 
	z-index:9999;
}

#Advance {
	position: sticky;
    bottom: -30px;

    margin-bottom: 10px; /* Optional: Adds some spacing from the edge */
    
    width: 72rem !important;
    height: 7rem !important;
    transform: translateX(23rem);

    opacity: 0.2;
    

	background-color: rgba(148, 221, 237, 0.8);
	border:1px solid rgb(82, 82, 82);
    text-align: center;
    line-height: 26px;
    font-weight: bold;
   
    cursor: pointer;

	border-radius: 12px;

	filter: drop-shadow(0px 12px 12px rgba(0, 0, 0, 0.2));
    
transition: opacity 0.2s ease-in;
}

#Advance:hover {
    opacity: 0.52;
}

#auto_next_label, .auto_next_label, #auto_next{
	color:#000000;
	position: relative !important;
	bottom: 0.2rem !important;
}

#do_not_repeat_label, .do_not_repeat_label, #noRepeat, #slider-label {
	
	color:#000000;
	position: relative !important;
	bottom: 0.2rem !important;
}
 
input[type="checkbox"]#auto_next, input[type="checkbox"]#noRepeat{
	bottom: 0.4rem !important;
}

input[type="range"]#timeoutSlider {
	bottom: 0rem !important;
}


#timeoutSlider{
	position: relative !important;
	bottom: 4px !important;
	
}

.info-text {
	opacity:0;
	position: sticky;
	bottom: 30px;
	right: 20px;
	width: 300px;
	max-height: calc(100vh - 20px); /* Prevents overflow beyond the bottom */
	overflow-y: auto; /* Allows scrolling if content exceeds max-height */
	background: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
	color: white;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
	z-index: 9999; /* Ensures it appears above other elements */
	user-select: text; /* Allows text selection */
	
  }

  










.leaflet-interactive, .leaflet-interactive:hover {
	pointer-events: all; 
	touch-action: manipulation; 
	will-change: transform, stroke-width; 
	z-index: 99999 !important;
	}


	.leaflet-interactive {
		transition: stroke 0.5s;
	}
	

.leaflet-pane {
    user-select: text !important;
}



.leaflet-interactive:hover{
	cursor: crosshair;        
	stroke-width: 4;
	stroke: #FFE0C8 !important;  	
	
}
	

.leaflet-control-attribution.leaflet-control{
	display:none;
	opacity:0;
}

.leaflet-top  /* .leaflet-control-zoom.leaflet-bar.leaflet-control */
/* this controls the white zoom in zoom out leaflet option on left*/
{
  top: unset;
  left: 0vw;
  bottom: 40px;
  opacity: 1; 

}

.leaflet-container.leaflet-touch.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag.leaflet-touch-zoom
{
	user-select: none; 
    -webkit-user-select: none; 
    -ms-user-select: none; 
    -moz-user-select: none; 

	touch-action: pinch-zoom;
/*	height: 57.6rem !important;*/
/*		max-height:92vh !important; */
	will-change: transform !important;

	
}	















	



.correct-path{
	color:#00FFF0 !important;
}
.default-path{
	color:#60A6C2 !important;
}
.incorrect-path{
	color:#894545 !important;
}



	

#header { /* for Map 1 Test map */
  font-size: 16.4px !important;
  font-weight: 490 !important;
  color: #393939;

  z-index: 1999 !important;
  position: absolute !important;
  top: 8px !important;
  left: -200px;
  right: 0px;
  margin-left: auto;
  margin-right: auto;

  width: fit-content;
  padding: 2px 20px;
  background-color: #e6e6e6 !important;

  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 2000;

  background-color: #f5f5f5;
  color: #393939;
  font-size: 13px;
  font-family: system-ui, sans-serif;

  padding: 6px 16px;
  border-radius: 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

  width: fit-content;
  max-width: 90vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  transition: all 0.3s ease-in-out;
}



header{  /* for the Locate feature go to # header */
padding:5px;
position: sticky;
top: 0px;


width: 1090px;

z-index: 2147483647 !important;

background-color: #2a2a2a;
text-align: left;
display:none; 
	}
		

  .top-wrapper {
    display: grid !important;
  z-index: 2147483647 !important;
  }

.icons-container-left {
  z-index: 2147483647 !important;

}
.icons-container{
  z-index: 2147483647 !important;

}




.reveal-all { /* for Map 2 */
width: unset !important;
    top: 6px !important;
left: 42vw !important;
    font-size: 16px;
  color: #393939;


  position: absolute !important;


  margin-left: auto;
  margin-right: auto;

  width: fit-content;
  padding: 2px 20px;
  background-color: #e6e6e6 !important;

  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

  cursor: pointer;
  transition: all 0.3s ease;
  
}

.reveal-all:hover {
  background-color: #d4d4d4 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}





		#result {
			position: absolute;
			top: 60px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9999;
			background-color: rgba(0, 0, 0, 0.7);
			color: white;
			padding: 10px;
			border-radius: 5px;
			display: none;
			text-align: center;
			opacity:0.8;
		}
		
		#result2 {
			position: absolute;
			top: 60px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9999;
            background-color:#E2CA97; border: 1px solid #8D8D8D; margin-top:240px;
			color: #000000;
			padding: 10px;
			border-radius: 5px;
			display: none;
			text-align: center;
        }
		

		#result2 > button {
			background-color: #D0B06B;

		} 


		#resultSelect {          
			position: absolute;
            z-index: 9999;
            background-color: rgba(0, 0, 0, 1);
            color: #ffffff;
			font-size: 17px;
            padding: 10px;
            border-radius: 5px;
            display: none;
            text-align: center;
		 }

		#resultCorrect {          
			position: absolute;
            z-index: 9999;
            background-color: rgba(0, 0, 0, 1);
            color: #ffffff;
			font-size: 17px;
            padding: 10px;
            border-radius: 5px;
            display: none;
            text-align: center;
		 }




@keyframes drift {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}




.reveal-list{ /* ☰ button that reveals the sidebar   */

  color: #333;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  color: #9f9e9e !important;
  border-radius: 6px;
  padding: 4px 4px;
  
  font-size: 12px !important;
  cursor: pointer;
  transition: all 0.2s ease-in-out;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  font-family: system-ui, sans-serif;


  display: inline-flex;          /* inline-flex for better centering */
  align-items: center;           /* vertically center content */
  justify-content: center;
  position: absolute !important;
  right: 40px !important;
  top:0px !important;

  z-index: 2311111 !important;

 height: 31px !important;
 width: 24px !important;

}

.reveal-list:hover { 
background-color: #e0e0e0;
  color: #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

}


.reveal-list {
    position: fixed !important;  /* instead of absolute */
    top: 0 !important;
    right: 12px !important;
    /* keep other properties as-is */
}

.highlighted {

  background-image: linear-gradient(-90deg,
    rgba(229, 246, 255, 0.9),
    rgba(225, 253, 251, 0.85),
    rgba(234, 255, 251, 0.95),
    rgba(227, 252, 250, 0.85)
  );
  background-size: 300% 300%;
  animation: drift 2s ease infinite;
  z-index: 2147483647 !important;

  /* Text and subtle enhancement */
  color: #333;
  font-weight: 500;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);

  /* Optional: subtle border or inner outline */
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  padding: 0.25em 0.5em;
  border-radius: 4px;
}



/* FOR BAIGE THEME GO TO THEMEBAIGE.CSS */


li.highlighted {
 /* background-color: rgba(224, 247, 250, 0.7); */ /* light cyan base with lower opacity */
 /* background-image: linear-gradient(270deg,
    rgba(240, 255, 255, 0.91),
    rgba(250, 224, 246, 0.91),
    rgba(244, 240, 255, 0.91)  ); */ /* CHANGE THESE FOR ALTERING ANIMATION COLORS ON SIDEBAR*/
/*
  background-size: 400% 400%;
  animation: iridescent 3s ease-in-out infinite;
  */
   background-image: unset !important;
  z-index: 2147483647 !important;
}



.hidden {
    display: none !important;
}

* {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}



path{
	cursor: pointer;
    pointer-events: all;
}



.sidebar-popup { /* see Map_Game_2_dark.html */

    position: fixed;


     color: black;
background-color:  rgba(226, 226, 226, 0.5);
    padding: 5px 8px;
    z-index: 9999;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 
    min-width: 240px !important;
    	width: 240px !important;

    max-width: 240px !important;

}


.sidebar-popup .safe-nl .nl {

    display: block;
    color: black;
    font-weight: normal;
    visibility: visible;
    font-size: 11px !important;
    
}



















/* Portrait */
@media only screen 
and (min-device-width: 700px) 
  and (max-device-width: 1000px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

  /* Styles for portrait */
  .reveal-all { transform: translateX(52px) !important; }
}

/* Landscape */
@media only screen 
and (min-device-width: 800px) 
  and (max-device-width: 1220px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {


  /* Styles for landscape */


/*
.reveal-all { transform: translateX(76px) !important; }
*/

  .leaflet-top  /* .leaflet-control-zoom.leaflet-bar.leaflet-control | this controls the white zoom in zoom out leaflet option on left*/
{
  top: unset;
  left: -2vw;
  bottom: 42vw !important; 
  opacity: 0.35;
}

}

@media (max-width: 1108px) {

.sidebar-popup, 
.sidebar-popup .safe-nl .nl { 
  display:none !important;
  opacity: 0 !important;
}

}

/* General MOBILE Fixes */
@media (max-width: 768px) {



.toggle-map, .toggle-map-1, .toggle-map-2, .toggle-map-3, .toggle-map-4, .toggle-map-5 {
left: 8px !important;
}

  .sidebar {
    width: 140px;
    padding: 1px;
    font-size:10px !important ;
     height: 89vh !important;
  opacity: 0.8 !important;
  }

  .reveal-all {
  left:37vw !important; top: 1vw !important; 
}

  .leaflet-top  /* .leaflet-control-zoom.leaflet-bar.leaflet-control | this controls the white zoom in zoom out leaflet option on left*/
{
  top: unset;
  left: -2vw;
  bottom: 42vw !important; 
  opacity: 0.35;
}

}




/* //////////// REVIEW BELOW CSS /////////////////// */