body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  min-width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
}
img[data-src="boy"] {
  content: var(--boy);
}
img[data-src="girl"] {
  content: var(--girl);
}
img[data-src="heart"] {
  content: var(--Heart);
}
img[data-src="enegry"] {
  content: var(--Enegry);
}
img[data-src="pageLeft"] {
  content: var(--PageLeft);
}
img[data-src="pageRight"] {
  content: var(--PageRight);
}
#GAMEAPP {
  position: relative;
  line-height: 0;
  border: 5px solid #8d6e63;
  border-radius: 5px;
  box-shadow: 0 10px 20px rgba(0 0 0 / 20%);
  overflow: hidden;
}
#player-select {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  left: var(--left);
  top: var(--top);
  width: var(--width);
  height: var(--height);
  border-radius: 2px;
  background-image: var(--backGround);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}
.player-select {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(var(--width) / 1.8);
  height: calc(var(--width) / 1.8 * (21 / 19));
  padding: 0.5rem;
  border-radius: 10px;
  background-color: #8d6e63;
  background-image: var(--Kuang);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.player-select-title {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -15px;
  left: 50%;
  width: 250px;
  height: 40px;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  transform: translateX(-50%);
  background-image: var(--Title);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 2;
}
.player-select {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.player-select-li {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.player-select-li img {
  width: calc((var(--height) / 12) * 4);
  height: calc((var(--height) / 12) * 6);
}
.player-select-change {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  outline: none;
  transition: all 0.3s ease-in-out;
}
.player-select-change.right {
  left: unset;
  right: 20px;
}
.player-select-name input[type="text"] {
  color: #fff;
  width: 290px;
  height: 45px;
  box-shadow: none;
  border: none;
  outline: 0;
  border-radius: 0;
  line-height: 1;
  text-align: center;
  font-weight: bold;
  font-size: 1.2rem;
  background-color: transparent;
  background-image: var(--Input);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 0.1s ease-in-out;
}
.player-select-name input[type="text"]:focus {
  border: none;
  outline: none;
  background-image: var(--InputHover);
}
.player-select-submit button {
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border: none;
  background-color: transparent;
  width: 300px;
  height: 60px;
  margin-bottom: 1rem;
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  letter-spacing: 2px;
  line-height: 1;
  font-weight: bold;
  background-image: var(--Button);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}
.user-bag-background {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--width);
  height: var(--height);
  background-color: rgba(0 0 0 / 20%);
  backdrop-filter: blur(10px);
  z-index: 99;
}
.user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.user-info-left {
  display: flex;
  flex: 1 0 auto;
}
.user-info-icon-li {
  display: flex;
  align-items: center;
  margin: 0.5rem;
  padding: 0.2rem 1rem 0.2rem 0.8rem;
  border-radius: 15px;
  font-size: 1rem;
  color: #fff;
  text-shadow: 0 2px 10px black;
  background-color: rgba(141 110 99 / 80%);
  backdrop-filter: blur(10px);
}
.user-info-right {
  display: flex;
  flex: 0 0 auto;
}
.user-info-right-button {
  display: flex;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 5px;
  background-color: #8d6e63;
  color: #fff;
  margin: 0.5rem;
  text-decoration: none;
}
.user-bag {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--width) / 2);
  height: calc(var(--width) / 2 * (21 / 19));
  padding: 0.5rem;
  border-radius: 10px;
  background-color: #8d6e63;
  background-image: var(--Kuang);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 100;
}
.user-bag-bar .user-bag-title,
.user-bag-alert-title {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -15px;
  left: 50%;
  width: 300px;
  height: 50px;
  color: #fff;
  font-weight: bold;
  transform: translateX(-50%);
  background-image: var(--Title);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.user-bag-close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -15px;
  right: -15px;
  width: 50px;
  height: 50px;
  font-weight: bold;
  background-image: var(--Close);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.user-bag-bar > a {
  color: #fff;
  text-decoration: none;
  font-size: 1.3rem;
}
.user-bag-items {
  display: flex;
  flex: 1 0 auto;
  margin: 2.5rem 1rem;
  gap: 0.5rem;
}
.user-bag-item {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  border: 2px solid rgba(0 0 0 / 20%);
  box-shadow: inset 5px 5px 10px rgba(0 0 0 / 20%);
}
.user-bag-item-count {
  position: absolute;
  right: 2px;
  bottom: 2px;
  color: #fff;
  text-shadow: 0 0 10px #000;
  line-height: 1;
  font-size: 0.8rem;
}
.user-bag-item:focus,
.user-bag-item:hover,
.user-bag-item.current {
  cursor: pointer;
  border: 2px solid #4caf50;
}
.user-bag-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-bag-toolbar-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 60px;
  margin: 2rem 0;
  color: #fff;
  text-decoration: none;
  letter-spacing: 2px;
  font-weight: bold;
  background-image: var(--Button);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.user-bag-alert {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--width);
  height: var(--height);
  background-color: rgba(0 0 0 / 20%);
  backdrop-filter: blur(10px);
  z-index: 100;
}
.user-bag-alert-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--width) / 1.9);
  height: calc(var(--height) / 2);
  padding: 0.5rem;
  border-radius: 10px;
  background-color: #8d6e63;
  background-image: var(--KuangSmall);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  line-height: 1.2;
}
.user-bag-alert-content {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  padding: 2rem;
}
.user-bag-alert-content .tips {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 1.2rem;
}
.user-bag-alert-content .user-bag-toolbar-button {
  margin: 0;
}
.dev {
  /* 图片变量 */
  --girl: url('./assets/image/girl-s.png');
  --boy: url('./assets/image/boy-s.png');
  --backGround: url('./assets/image/background-dark.png');
  --Kuang: url('./assets/image/components/kuang.png');
  --KuangSmall: url('./assets/image/components/Box.png');
  --Title: url('./assets/image/components/toubu.png');
  --Button: url('./assets/image/components/button.png');
  --Close: url('./assets/image/components/close.png');
  --Input: url('./assets/image/components/shurukuang1.png');
  --InputHover: url('./assets/image/components/shurukuang.png');
  --PageLeft: url('./assets/image/components/pageLeft.png');
  --PageRight: url('./assets/image/components/pageRight.png');
  --goldKey: url('/assets/goldKey.e73062ce.png');
  --lifeEssence: url('/assets/lifeEssence.ba22d93b.png');
  --intelligenceEssence: url('/assets/intelligenceEssence.57077ca3.png');
  --ppGreen: url('/assets/ppGreen.6c1d64f2.png');
  --Heart: url('./assets/image/heart.png');
  --Enegry: url('./assets/image/energy.png');
}
.prod {
  /* 图片变量 */
  --girl: url('./image/girl-s.png');
  --boy: url('./image/boy-s.png');
  --backGround: url('./image/background-dark.png');
  --Kuang: url('./image/components/kuang.png');
  --KuangSmall: url('./image/components/Box.png');
  --Title: url('./image/components/toubu.png');
  --Button: url('./image/components/button.png');
  --Close: url('./image/components/close.png');
  --Input: url('./image/components/shurukuang1.png');
  --InputHover: url('./image/components/shurukuang.png');
  --PageLeft: url('./image/components/pageLeft.png');
  --PageRight: url('./image/components/pageRight.png');
  --goldKey: url('./image/goldKey.png');
  --lifeEssence: url('./image/lifeEssence.png');
  --intelligenceEssence: url('./image/intelligenceEssence.png');
  --ppGreen: url('./image/ppGreen.png');
  --Heart: url('./image/heart.png');
  --Enegry: url('./image/energy.png');
}