/* ================================ */
/*   基礎                           */
/* ================================ */
#title {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2000;
  background: #000;
}
#title:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#000e 50%, #000a);
  z-index: -1;
  filter: drop-shadow(0 8px 8px #FFF);
}
#title_text {
  position: absolute;
  color: #fff;
  top: 50px;
  left: 46px;
  font-weight: bold;
  font-size: 14px;
  line-height: 2;
  font-family: sans-serif;
  letter-spacing: 2px;
}
#title_text span:first-child {
  font-size: 26px;
  font-weight: normal;
  font-family: fantasy;
  letter-spacing: 8px;
  filter: drop-shadow(3px 3px 0 #000);
  background: linear-gradient(#fff 40%, #888);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* ================================ */
/*   名字                           */
/* ================================ */
#character_name {
  color: #fff;
  background: #111;
  font-size: 16px;
  position: absolute;
  left: 48px;
  bottom: 48px;
  padding: 2px 8px;
  width: 220px;
  border: #555 solid;
  border-width: 2px 6px;
  --len: 10px;
  height: 32px;
  text-align: center;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#character_name.lock span {
  display: flex;
  align-items: center;
  justify-content: center;
}
#character_name.lock span:after {
  content: "🔒";
  font-size: 0.8em;
  margin-left: 0.2em;
}
#character_name.clear span:after {
  content: "🏆";
  font-size: 1em;
  margin-left: 0.2em;
}

/* ================================ */
/*   選角動畫                       */
/* ================================ */
.move_ani {
  position: relative;
  --len: 0px;
  --len2: 0px;
  opacity: 1;
  transition: 0s;
  left: calc(var(--len) + var(--len2));
}
.left_hide {
  opacity: 0;
  --len: -5px;
  transition: --len .3s, opacity .3s;
}
.right_hide {
  opacity: 0;
  --len: 5px;
  transition: --len .3s, opacity .3s;
}
.left_show {
  opacity: 1;
  --len: -10px;
  --len2: 10px;
  transition: --len .3s, --len2 0s, opacity .3s;
}
.right_show {
  opacity: 1;
  --len: 10px;
  --len2: -10px;
  transition: --len .3s, --len2 0s, opacity .3s;
}

/* ================================ */
/*   名字箭頭                       */
/* ================================ */
#character_name:before, #character_name:after {
  content: "";
  position: absolute;
  top: 6px;
  width: 12px;
  height: 23px;
  clip-path: polygon(0 0, 10% 0, 100% 47%, 100% 53%, 10% 100%, 0 100%, 0 90%, 80% 50%, 0 10%);
  background: #fff;
  animation: .6s ease 0s infinite alternate arrow;
}
#character_name:before {
  right: -26px;
  transform: scaleX(1) translateX(var(--len));
}
#character_name:after {
  left: -26px;
  transform: scaleX(-1) translateX(var(--len));
}
@property --len {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}
@property --len2 {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}
@keyframes arrow {
  from { --len: 0px; }
  to { --len: 3px; }
}

/* ================================ */
/*   角色圖                         */
/* ================================ */
#character_image {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  pointer-events: none;
  user-select: none;
}
#character_image.lock {
  filter: sepia(1) brightness(0.2);
}

/* ================================ */
/*   通關頁                         */
/* ================================ */
#clear_page {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2000;
  background: #000;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 8px;
  transition: top .3s, opacity .3s;
  box-sizing: border-box;
  padding: 0 80px;
}
#clear_page.hidden {
  top: 20px;
  opacity: 0;
  pointer-events: none;
}
#clear_page:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#000e 50%, #000a);
  z-index: -1;
  filter: drop-shadow(0 8px 8px #FFF);
}
#clear_page:after {
  content: "「X」退回標題畫面";
  position: absolute;
  bottom: 8px;
  left: 4px;
  font-family: sans-serif;
  font-size: 12px;
  color: #aaa;
  letter-spacing: 2px;
  font-weight: bold;
}
#clear_page div {
  width: 96px;
  height: 160px;
  background-position: -288px -128px;
  background-color: #000;
  position: relative;
  overflow: hidden;
}
#clear_page div:after {
  content: var(--move_img);
  position: absolute;
  left: 0;
  top: 0;
}
#clear_page div.clear:before {
  content: "🏆";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  font-size: 0.8em;
}
#clear_page div[name="阿藤春樹"].unlock {
  background-image: url(./img/bg/鐵鏽水管.png);
  --move_img: url(./img/move/阿藤.gif);
}
#clear_page div[name="嘉納扇"].unlock {
  background-image: url(./img/bg/病房.png);
  --move_img: url(./img/move/嘉納.gif);
}
#clear_page div[name="磯井麗慈"].unlock {
  background-image: url(./img/bg/廢墟.png);
  --move_img: url(./img/move/麗慈.gif);
}
#clear_page div[name="信濃榮治"].unlock {
  background-image: url(./img/bg/收容室.png);
  --move_img: url(./img/move/信濃.gif);
}
#clear_page div[name="磯井實光"].unlock {
  background-image: url(./img/bg/河堤.png);
  --move_img: url(./img/move/實光.gif);
}
#clear_page div[name="宇津木德幸"].unlock {
  background-image: url(./img/bg/鐵鏽水管冰.png);
  --move_img: url(./img/move/宇津木.gif);
}
#clear_page div[name="宇津木德幸"].unlock:after {
  left: -128px;
  top: -30px;
  transform: scaleX(-1);
}
#clear_page div[name="磯井父子"].unlock {
  background-image: url(./img/bg/鱷魚河邊.png);
  --move_img: url(./img/move/小麗慈.gif);
  background-position: -400px -278px;
}