:root {
  --进度条颜色-已填充: rgb(41, 126, 78);
  --进度条颜色-未填充: rgba(224, 224, 224, 0.85);
  --拇指宽度: 16px;
  --队列成员宽度: 75px;
  --头背景色: rgb(56, 141, 73);
  --尾背景色: rgb(225, 204, 81);
  --过渡时长: 400ms;
  --光标-手指: url("/Images/Common/鼠标-指向.cur"), pointer;
  --中文字体: "Noto Sans SC", 微软雅黑，sans-serif;
  --代码字体: "JetBrains Mono", Consolas, monospace;
  --中文代码混合字体: "JetBrains Mono", Consolas, "Noto Sans SC", 微软雅黑, sans-serif;;
}

.队列总区 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#展示区 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.控件容器 {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  border-radius: 9999px;
  padding: 7px 15px;
}

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

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

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

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

.角色区 {
  width: calc(75px * 8);
  height: calc(75px * 2);
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 200px;
}

.角色容器 {
  width: 12.5%;
  height: 50%;
  outline: solid 1px #ced1;
  border: solid 3px transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

.角色容器.当前角色,
.角色容器.当前角色:hover {
  background-color: #567;
  border: solid 3px #ced;
}

.角色容器:hover {
  background-color: #345;
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
}

.角色图 {
  width: 85%;
  height: 85%;
  object-fit: contain;
}

.队列容器 {
  display: flex;
  align-items: center;
  outline: solid 1px #fff4;
  position: relative;
  --头指针指示框水平偏移: -100%;
  --尾指针指示框水平偏移: -100%;
}

.队列容器::before,
.队列容器::after {
  width: var(--队列成员宽度);
  height: var(--队列成员宽度);
  position: absolute;
  top: 0;
  left: 0;
  border-width: 4px;
  border-style: solid;
  content: "";
  clip-path: inset(0 0 0 0);
  transition: var(--过渡时长);
}

.队列容器.空::before,
.队列容器.空::after {
  opacity: 0;
}

.队列容器.头尾相等::before {
  clip-path: inset(0 0 50% 0);
}

.队列容器.头尾相等::after {
  clip-path: inset(50% 0 0 0);
}

.队列容器::before {
  border-color: rgb(11, 199, 68);
  translate: var(--头指针指示框水平偏移) 0;
  z-index: 1;
}

.队列容器::after {
  border-color: var(--尾背景色);
  translate: var(--尾指针指示框水平偏移) 0;
}

.队列成员 {
  position: relative;
  width: var(--队列成员宽度);
  height: var(--队列成员宽度);
  background-color: #fff4;
  border: solid 1px #fff4;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: var(--过渡时长);
}

/* .队列成员::before {
  position: absolute;
  border: solid 4px transparent;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  content: "";
} */

.队列成员.无人 {
  filter: brightness(25%);
}

.队列容器:has(.队列成员.无人) {
  outline: solid 1px #fff2;
}

/* .队列成员.头::before {
  border: solid 4px rgb(74, 186, 96);
}

.队列成员.尾::before {
  border: solid 4px var(--尾背景色);
}

.队列成员.头.尾:before {
  border: none;
  background-image: linear-gradient(var(--头背景色) 50%, var(--尾背景色) 50%);
} */

.队列图像容器 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 500ms;
}

.队列图像容器.无人 {
  opacity: 0;
}

.队列图像 {
  width: 75%;
  height: 75%;
  object-fit: contain;
}

.序号容器 {
  color: lightgreen;
  font-size: 18px;
}

.索引容器 {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
}

.索引成员 {
  width: 20%;
  height: 100%;
  text-align: center;
  align-content: center;
  font-size: 14px;
  color: rgb(180, 197, 202);
  transition: var(--过渡时长), color 0;
}

.索引成员.无人 {
  filter: brightness(35%);
}

.索引成员.头,
.索引成员.尾 {
  font-weight: bold;
}

.索引成员.头 {
  color: rgb(68, 205, 95);
}

.索引成员.尾 {
  color: rgb(225, 204, 81);
}

.索引成员.头.尾 {
  background-image: linear-gradient(rgb(68, 205, 95) 50%, rgb(225, 204, 81) 50%);
  background-clip: text;
  color: transparent;
}

.警告容器 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.指针容器 {
  position: absolute;
  width: var(--队列成员宽度);
  height: var(--队列成员宽度);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  translate: -100% 0;
  transition: var(--过渡时长);
}

.头指针容器 {
  top: -130%;
}

.尾指针容器 {
  bottom: -100%;
}

.头指针容器 .指针标题 {
  color: rgb(119, 176, 33);
}

.头指针容器 .指针箭头 {
  color: greenyellow;
}

.尾指针容器 .指针标题 {
  color: darkgoldenrod;
}

.尾指针容器 .指针箭头 {
  color: gold;
}

#控制区 {
  margin-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
}

.按钮 {
  position: relative;
  font-family: var(--中文代码混合字体);
  border: none;
  padding: 10px 20px;
  background-color: #def3;
  backdrop-filter: blur(10px);
  color: white;
  border-radius: 5px;
  overflow: hidden;
}

.按钮:hover {
  background-color: #def5;
}

:is(#入队, #出队, #清空):active {
  background-color: #def7;
}

.函数动画层 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.正确层,
.错误层 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  align-content: center;
  font-size: 18px;
  pointer-events: none;
  opacity: 0;
}

.正确层 {
  color: rgb(102, 214, 126);
  background-color: rgb(38, 100, 51);
}

.错误层 {
  color: rgb(228, 78, 78);
  background-color: rgb(94, 20, 20);
}