:root {
  --进度条颜色-已填充: rgb(41, 126, 78);
  --进度条颜色-未填充: rgba(224, 224, 224, 0.85);
  --拇指宽度: 16px;
  --边框色: #fff5;
  --栈内容高度: 50px;
  --栈内容间距: 10px;
  --指针垂直偏移: calc(var(--栈内容高度) + var(--栈内容间距));
}

.总区 {
  align-items: center;
}

.交互容器 {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: max(100px, 2vw);
}

.方法区 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.模式区 {
  display: flex;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 20px;
}

.单选标签:hover,
.单选:hover {
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
}

.单选标签 {
  position: relative;
  background-color: #222;
  color: gray;
}

.单选文本 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 15px;
}

.单选 {
  position: absolute;
  appearance: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.单选标签:not(:has(.单选:checked)):hover {
  background-color: #2a2a2a;
}

.单选标签:has(.单选:checked) {
  background-color: #264;
  color: white;
}

.按钮 {
  position: relative;
  font-family: "JetBrains Mono", Consolas, "Noto Sans SC", sans-serif;
  width: 100px;
  height: 45px;
  border-radius: 999px;
  background-color: #345;
  outline: solid 2px transparent;
  color: silver;
  box-shadow: 2px 2px 5px #0007;
}

.按钮:hover {
  outline: solid 2px #fff6;
  background-color: #123;
  font-size: 15px;
  color: #d5d5d5;
}

.按钮:active {
  background-color: #456;
  outline: solid 2px #fffc;
  color: white;
}

.真假 {
  position: absolute;
  width: 35px;
  height: 35px;
  top: 50%;
  right: 0;
  translate: 50px -50%;
  opacity: 0;
  pointer-events: none;
}

.真假 > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.标题 {
  color: gold;
  padding: 10px 15px;
  background-color: #354;
  border-radius: 5px;
  box-shadow: 1px 1px 5px 0 #000a;
  text-align: center;
  font-weight: normal;
}

.栈区 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
}

.栈容器 {
  position: relative;
}

.栈 {
  position: relative;
  width: 75px;
  height: 490px;
  border-left: solid 2px var(--边框色);
  border-bottom: solid 2px var(--边框色);
  border-right: solid 2px var(--边框色);
  border-radius: 0 0 10px 10px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 0;
}

.栈动画元素 {
  position: absolute;
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.push动画元素 {
  top: 0;
  left: 50%;
  translate: -50% -150px;
  transition: 500ms;
}

.pop动画元素 {
  top: 0;
  left: 50%;
  translate: -50% 0;
}

.栈内容 {
  width: var(--栈内容高度);
  height: var(--栈内容高度);
  flex-shrink: 0;
}

.栈内容.已删除 {
  opacity: 0;
}

.栈内容 > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.资源池区 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 25px;
}

.控件容器 {
  position: absolute;
  top: -50px;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  border-radius: 9999px;
  padding: 7px 15px;
}

.控件标签 {
  padding-right: 5px;
  font-family: var(--中文字体);
  user-select: none;
  text-wrap: nowrap;
}

.复选框 {
  scale: 1.1;
  filter: invert(1) sepia(1) hue-rotate(90deg);
}

.复选框:hover,
.控件标签:hover {
  cursor: var(--光标-手指);
}

.控件容器:has(.复选框:hover, .控件标签:hover) {
  background-color: #def2;
}

.资源池 {
  width: 160px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 5px;
}

.资源 {
  width: 75px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.资源.当前资源 {
  background-color: #fff3;
  border: solid 2px #afda;
}

.资源:hover {
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
}

.资源:not(.当前资源):hover {
  background-color: #ffffff1a;
}

.资源 > img {
  width: var(--栈内容高度);
  height: var(--栈内容高度);
  object-fit: contain;
}

.索引区 {
  position: absolute;
  width: 25px;
  height: 100%;
  top: 0;
  left: -50px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  gap: var(--栈内容间距);
  padding-bottom: var(--栈内容间距);
}

.索引容器 {
  height: var(--栈内容高度);
  width: var(--栈内容高度);
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.索引 {
  width: 45%;
  height: 45%;
  border-radius: 999px;
  outline: solid 2px #fff3;
  text-align: center;
  align-content: center;
  font-size: 12px;
  font-family: var(--代码字体);
  opacity: 0;
  transition: 250ms;
}

.索引.已添加 {
  opacity: 1;
}

.索引.当前索引 {
  outline: solid 2px green;
  color: greenyellow;
  scale: 1.1;
}

.指针区 {
  position: absolute;
  height: 100%;
  top: 0;
  left: -60px;
  padding-bottom: var(--栈内容间距);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.指针 {
  color: yellowgreen;
  height: var(--栈内容高度);
  text-align: center;
  align-content: center;
  translate: 0 var(--指针垂直偏移);
  transition: 500ms;
}