@import "https://fonts.googleapis.com/css2?family=Aleo&display=swap";

* {
  font-family: Aleo, sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
}
html,
body {
  color: #9d988a;
  font-size: 0.9em;
  overflow: hidden;
}
.webgl {
  position: fixed;
  top: 0;
  left: 0;
  outline: none;
}

#container {
  background-image: url(../262181/intro-bg.jpg);
  background-size: cover;
  background-position: center;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 101;
  position: absolute;
}

#lottie {
  height: 40vh;
  max-height: 400px;
  z-index: 102;
  display: flex;
}

#explanation {
  display: flex;
  width: 66vw;
  max-width: 300px;
  background-color: #00000040;
  padding: 16px;
}

#enter {
  width: auto;
}
button {
  cursor: pointer;
  margin-top: 4px;
  padding: 4px;
  background-color: #9d988a;
  color: #6b2414;
  border-radius: 4px;
  border: none;
}

	/* 像素风格按钮 */
	.more-games-btn {
	  position: fixed;
	  top: 20px;
	  right: 20px;
	  z-index: 9999;
	  display: block;
	  width: 48px;
	  height: 48px;
	  background: #4cc9f0;
	  border: 4px solid #2b2d42;
	  border-radius: 8px;
	  color: white;
	  font-size: 24px;
	  text-align: center;
	  line-height: 48px;
	  text-decoration: none;
	  box-shadow: 4px 4px 0 #2b2d42;
	  transition: all 0.2s ease;
	  cursor: pointer;
	}
	
	.more-games-btn::after {
	  content: "更多游戏";
	  position: absolute;
	  right: 60px;
	  top: 50%;
	  transform: translateY(-50%); /* 这已经确保整体框垂直居中 */
	  white-space: nowrap;
	  background: #2b2d42;
	  color: white;
	  padding: 8px 12px; /* 调整上下padding使文字居中 */
	  border-radius: 4px;
	  font-size: 14px;
	  line-height: 1; /* 关键：重置行高为1 */
	  opacity: 0;
	  transition: opacity 0.3s ease;
	  pointer-events: none;
	  border: 2px solid #4cc9f0;
	  display: flex; /* 新增：使用flex布局确保完美居中 */
	  align-items: center; /* 新增：垂直居中 */
	  justify-content: center; /* 新增：水平居中 */
	  height: auto; /* 移除固定高度 */
	}
	
	.more-games-btn:hover {
	  transform: translate(2px, 2px);
	  box-shadow: 2px 2px 0 #2b2d42;
	  background: #4895ef;
	}
	
	.more-games-btn:hover::after {
	  opacity: 1;
	}