#upper_nav_block {
	text-align: left;
}

#upperTable {
    width: 1000px;
    border: 5px solid #714f23;
    background-color: #fadfad;
    text-align: center;
	padding: 10px;

}


#infoTable {
background-color: #f3f3f3; /* Just for visibility */
z-index: 2;

}

#upperTableButtons {
	display: flex ; 
	height: 40px; 
	gap: 10px;
	align-items: center ;      /* Vertically center items */
}

.InfoButton {
	cursor: url('../main/cursor/cursorD.gif') 6 2, pointer;	
	
	padding: 5px ;
	display: inline-flex;
    align-items: center ;      /* Vertically center items */
    justify-content: center;    /* Horizontally center items */  
	font-size: 14px;

	text-wrap: nowrap;
	border-radius: 10px; /* Rounded corners */
	border: 1px solid #333; /* Border color */
	background-color: #f3f3f3;
}

.InfoButton:hover {
	background-color: #dad0ff; /*#ffffff;*/
}

.InfoButton#InfoButton {
	width: 120px;
	height: 30px;
}

.InfoButton#QuickLinksMode {
	width: 110px;
	height: 30px
	
}

.NavButton {
	height: 30px;

	cursor: url('../main/cursor/cursorD.gif') 6 2, pointer;	
	display: inline-flex;
    align-items: center ;      /* Vertically center items */
    justify-content: center;    /* Horizontally center items */  
	font-size: 14px;

	text-wrap: nowrap;
	border-radius: 10px; /* Rounded corners */
	border: 1px solid #333; /* Border color */
	background-color: #f3f3f3;
} 
.NavButton:hover { background-color: #dad0ff; /*#ffffff;*/ }
.NavButton:active { background-color: #333333; }
.Button-left   { border-radius: 10px 0px 0px 10px; /* Rounded corners */  width: 40px; }
.Button-Right  { border-radius: 0px 10px 10px 0px; /* Rounded corners */ width: 40px; }
.Button-Middle { border-radius: 0px 0px 0px 0px; /* Rounded corners */ width: 40px; }
.Button-Active { background-color: #333333; }

/* Hide elements dynamically */
.hidden {
    display: none;
}

.fadeUP {
    opacity: 0;
    transform: scale(100%,90%) translateY(20px); 
    /*transform: translateY(20px); /* slide in from bottom */
    transition: opacity 1.5s ease, transform 1.5s ease;
}
.fadeDN {
    opacity: 0;
    transform: scale(100%,50%) translateY(-20px); 
    /*transform: translateY(20px); /* slide in from bottom */
    transition: opacity 1.5s ease, transform 1.5s ease;
}

.showUP {
    opacity: 1;
	z-index: 1;
    transform: scale(100%,100%) translateY(0);/* slide in from bottom */
    /*transform:  translateY(0); /* */
	
    transition: opacity 0.5s ease, transform 1.0s ease;
}


.fadeUPcards {
    opacity: 0;
	z-index: 0;
    transform:  translateY(20px); /*scale(100%,98%)*/
    /*transform: translateY(20px); /* slide in from bottom */
    transition: opacity 1.5s ease, transform 1.5s ease;
}

.showUPcards {
  opacity: 1;
  z-index: 1;
  transform:  translateY(0px); /*scale(100%,100%)*/
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.containerCards {
  /*width: 800px;*/
position: absolute;
}

  .deckLink-container {
    position: relative; /* so hover layer can be positioned inside */
    display: inline-block;
  }
  .hover-layer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0; /* behind */
    display: none; /* hidden by default */
  }

  .disabled-layer {
    position: relative;
    z-index: 1; /* above hover */
	cursor: url('../main/cursor/cursorD.gif') 6 2, pointer;	
  }



#cardsListLinksMenu { 
  list-style: none;
  padding: 0;
}

#cardsListLinksMenu li {
  cursor: pointer;
  padding: 5px;
  font-size: 12px;
  display: inline-block;
  margin-right: 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

#cardsListLinksMenu li:hover {
  background-color: #eee;
}




/* Hide elements dynamically */
.bordered {
    border: 5px solid #ddd;

}

.bordered#InfoContainer {
	display: flex; /* Enables Flexbox */
	align-items: flex-start; /* Aligns items at the top */
	gap: 10px; /* Adds space between elements */
	padding: 10px;  /*Adds some padding */
}


.navContainer{
	width: 90%;
	align-items: center ; 
}

/*multiverse info block for images*/

		  /* Background container */
		.info_images_block_background {
			width: 800px;
			height: 350px;
			
			Background: url('../03-multiverse/back3.gif') no-repeat center/cover;
			position: relative;
			overflow: hidden;
			display: flex;
			/*align-items: center;*/
			flex-shrink: 0;
			 z-index: 2;
		}

		/* Image container */
		.info_images_block_scrolling-wrapper {
			display: flex;
			position: relative;
			flex-shrink: 0;
			z-index: 2;
			/*gap: 20px; /* Space between images */
			/*width: max-content; /* Ensures content width expands properly */
			/*border: 50px solid #111;*/
			/*align-items: center;*/
			animation: scrollImages 66s linear infinite; /*test 22s/66s*/
			margin-bottom: 130px;
		}

		/* Scrolling images */
		.info_images_block_scrolling-wrapper img, .info_images_block_scrolling-wrapper a  {
			z-index: 2;
			position: relative;
			flex-shrink: 0;
			align-self: end;
		}
		.info_images_block_scrolling-wrapper  img#emperor { margin-bottom: -100px; }
		.info_images_block_scrolling-wrapper  img#loveletter { margin-bottom: -50px; }
		.info_images_block_scrolling-wrapper  img#tmnt { margin-bottom: -30px; }
		
		@keyframes scrollImages {
			0% { transform: translateX(0); }
			100% { transform: translateX(calc(-50%)); /* Moves by half so the loop is seamless*/
		  }
		}
		
		
.navContainer {
    width: 100%;        /* Fixed width as per your setup */	
}
.linksContainer {
	display: flex;         /*Arrange children in a row */
	display: inline-flex;
    flex-wrap: wrap;      /* Allows wrapping to next line */
    /*gap: 10px;             Optional: space between items */
	
  /*text-align: center;*/
    align-items: center ;      /* Vertically center items */
    justify-content: center;    /* Horizontally center items */  
	  margin: 0.1em 0.3em 0em 0.3em;
}


.linksContainer a {   text-decoration: none;   /*Removes underline from the link */ }
.ql_sections {
 
  COLOR: #7d480f; 
  FONT-SIZE: 13pt; 
  FONT-FAMILY: 'PT Serif', serif, sans-serif;
  FONT-WEIGHT: normal;

  line-height: 2em;
  margin: 0.2em;
  padding: .2em 0.8em .2em 0.8em;
	
  border-radius: 15px 15px 3px 3px; 
  border: 2px solid #7b4e1e; 
  background-color: #edc091; /* ffcc99*/
  
}

.ql_sections:hover {
  background-color: #ffcc99; /* ffcc99*/
}



.ql_games, .ql_games_child {

  COLOR: #0d1417; /*of Text inside*/
  FONT-SIZE: 13pt; 
  FONT-FAMILY: 'PT Serif', serif, sans-serif;
  FONT-WEIGHT: normal;
  text-decoration: none;   /*Removes underline from the link */
   
  
  cursor: url('../main/cursor/cursorD.gif') 6 2, pointer;
  max-width: 18%; /*parseInt(100 / 7); // → 14*/
  min-width: 10%;
  display: flex;
     align-items: bottom ;      /*Vertically center items */
    justify-content: center;    /* Horizontally center items */  

    white-space: normal;      /* ✅ allows multi-line text */
    word-wrap: break-word;    /* ✅ breaks long words if needed */

height: 100%;
  min-height: 35px;
  max-height: 55px;
  
  /*flex: 1 0 auto;*/
  /*line-height: 1em;*/
  margin: -0.2em 0.1em -0.1em 0.2em; /* между блоками */
  /*padding: 2px 10px 2px 10px; /* от содержимого до рамки */
  
  border-radius: 15px 15px 3px 3px; 
  border: 3px solid #045376;/*04b6fe*/  
  background-color: #f3f3f3; /*f5ffff ffcc99*/
  
  transition: all 0.9s ease;
  
}
.ql_games_child {
	border: 3px solid #760465;
	background-color: #fbdff4;
	margin: -0.2em 0em -0.1em 0em; /* между блоками */
	height: 80%;
	max-height: 45px;
}



/* Links inside*/
.ql_games a , .ql_games_child a {
    /*white-space: nowrap;  Prevents text wrapping */
    color: #000;             /* Text color: black */
    /*display: block;          /* текст внутри не выравнивается по вертикали так как думает что этот блок полностью вписался*/
	display: inline-flex;
    text-decoration: none;   /* Removes underline from the link */
    width: 100%;             /* Makes sure it stretches to full cell width */
    height: 100%;            /* Stretches to fill height of the cell */
	min-height: 35px;
	align-items: center ;      /* Vertically center items */
	/*background-color: #04b6fe;*/
	justify-content: center;    /* Horizontally center items */
}

/* Hover effect for options */
.ql_games:hover, .ql_games_child:hover {
    background-color: #dad0ff; /*ffbfbf d6f1fd */
	/*border: 3px solid #04b6fe;*/ 
  /*min-height: 45px;
  max-height: 65px;	 /* */
	transform: translateY(-10px);  /*  вверх*/
	/*transform: translateY(-5px) scale(1,1.2); /* изменение масштаба по X, Y */
	/*z-index: 3;*/
}

.ql_games_child:hover {
	background-color: #fdb1f3;

}

.move_up {
	  transition: all 0.9s ease;
}
.move_up:hover {
	transform:  translateY(-6px);/* ;  вверх  растянуть вверх scale(1,1.2) */
	/*transform: translateY(-5px) scale(1,1.2); /* изменение масштаба по X, Y */
	/*z-index: 3;*/

}


.linksContainer#icon_container {
	display: flex;
	/* gap: 10px; */
	justify-content: center;
    flex-direction: row;
    align-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}
.linksContainer div#sectionName {
	display: flex;
}

.linksContainer#icons {
	display: flex;
    align-items: flex-start;
	/* gap: 10px; */
	margin: 10px 5px 10px 5px; /* между блоками */
	padding: 10px 5px 10px 5px; /* между блоками */
    align-items: bottom ;      /*Vertically center items */
	justify-content: center;
}


.ql_icons_child {

	COLOR: #491813;TEXT-DECORATION: none; FONT-WEIGHT: bold;
	
  	width: 115px;
	min-height: 145px;
	
	/*display: flex;*/
    flex-wrap: wrap;      /* Allows wrapping to next line */
	
    align-items: baseline;
    align-content: center;
	
    justify-content: center;    /* Horizontally center items */  
	
	margin: 10px 5px 10px 5px; /* между этими блоками */

    white-space: normal;      /* ✅ allows multi-line text */
    word-wrap: break-word;    /* ✅ breaks long words if needed */
	
	border: 3px solid #491813;
border-radius: 15px; 
	background-color: #fff;
	
	transition: all 0.9s ease;
}

.ql_icons_child a {

    width: 100%;             /* Makes sure it stretches to full cell width */
    height: 100%;    
}

/* Hover effect for options */
.ql_icons_child:hover  {
    background-color: #fdfa9c; /*fff3e5 ffbfbf d6f1fd */
	transform: translateY(-10px);  /*  вверх*/
	/*transform: translateY(-10px) scale(1,1.2); /* изменение масштаба по X, Y */
	  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}