Scripts/resources/[hp]/hp_mechanic/html/css/style.css

@charset "UTF-8";
@font-face {
  font-family: Akrobat;
  src: url("../fonts/Akrobat-Regular.woff");
  font-weight: 400;
}
@font-face {
  font-family: Akrobat;
  src: url("../fonts/Akrobat-SemiBold.woff");
  font-weight: 600;
}
@font-face {
  font-family: Akrobat;
  src: url("../fonts/Akrobat-Bold.woff");
  font-weight: 700;
}
@font-face {
  font-family: Akrobat;
  src: url("../fonts/Akrobat-ExtraBold.woff");
  font-weight: 800;
}
@font-face {
  font-family: Akrobat;
  src: url("../fonts/Akrobat-Black.woff");
  font-weight: 900;
}
@font-face {
  font-family: caveat;
  src: url("../fonts/Caveat-Bold.woff");
  font-weight: 700;
}
* {
  user-select: none;
  margin: 0;
  padding: 0;
  user-select: none;
  box-sizing: border-box;
}

body {
  user-select: none;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
  color: #fff;
  font-family: Akrobat;
  font-size: var(--size-14);
  overflow: hidden;
}

.left-png {
  user-select: none;
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: -9999;
  background-image: url("../imgs/left.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.right-png {
  user-select: none;
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: -9999;
  background-image: url("../imgs/right.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bottom-png {
  user-select: none;
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: -9999;
  background-image: url("../imgs/bottom.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.changecamera {
  user-select: none;
  width: 67vw;
  height: 57vh;
  position: absolute;
  left: 15vw;
  top: 13vw;
}

::-webkit-scrollbar {
  display: none;
}

.top-section {
  user-select: none;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: var(--size-53) var(--size-40);
}
.top-section > div {
  user-select: none;
  width: 40%;
}

.l-top {
  user-select: none;
  width: max-content;
  animation: leftSide 0.7s ease-in-out;
}
.l-title {
  user-select: none;
  font-family: "Akrobat";
  font-weight: 900;
  font-size: var(--size-64);
  line-height: var(--size-77);
  letter-spacing: var(--size--3);
  text-transform: uppercase;
  background: linear-gradient(180deg, #41fff6 0%, #298ba2 96.87%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: var(--size-1) #41ffff;
  text-shadow: 0 var(--size-4) var(--size-72) rgb(65 255 222 / 52%);
}
.l-spell {
  user-select: none;
  font-family: caveat;
  font-size: var(--size-20);
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  margin-top: var(--size--5);
}
.l-desc {
  user-select: none;
  font-size: var(--size-15);
  color: rgba(255, 255, 255, 0.54);
  line-height: var(--size-24);
  width: var(--size-380);
  margin: var(--size-16) 0 var(--size-34);
  animation: leftSide 0.8s ease-in-out;
}
.l-items {
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: var(--size-16);
  margin-left: var(--size-20);
  height: calc((var(--size-90) + var(--size-14)) * 6);
  overflow-y: scroll;
  margin-left: var(--size--40);
  animation: leftSide 1s ease-in-out;
}

@keyframes leftSide {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }

  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes rightSide {
  0% {
    opacity: 0;
    transform: translateX(50%);
  }

  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.l-item {
  user-select: none;
  display: flex;
  align-items: center;
  gap: var(--size-14);
  width: max-content;
  cursor: pointer;
  position: relative;
  margin-left: var(--size-68);
  height: var(--size-90);
}
.l-item-tape {
  user-select: none;
  width: var(--size-80);
  height: var(--size-80);
  position: absolute;
  top: var(--size--10);
  left: var(--size--68);
  opacity: 0;
  transition: opacity 0.4s;
}
.l-item-tape img {
  user-select: none;
  width: 100%;
}

.l-item.active .l-item-tape,
.l-item:hover .l-item-tape {
  user-select: none;
  opacity: 1;
}
.l-item-img {
  user-select: none;
  width: var(--size-90);
  height: var(--size-90);
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../imgs/item-bg-un.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 var(--size-4) var(--size-60) rgba(194, 255, 65, 0));
  transition: background-image 0.4s, filter 0.4s;
}
.l-item-img img {
  user-select: none;
  width: 55%;
}

.l-item.active .l-item-img,
.l-item:hover .l-item-img {
  user-select: none;
  background-image: url("../imgs/item-bg.svg");
  filter: drop-shadow(0 var(--size-4) var(--size-60) rgba(194, 255, 65, 0.55));
}
.l-item-top {
  user-select: none;
  color: rgba(255, 255, 255, 0.27);
  text-transform: uppercase;
}
.l-item-title {
  user-select: none;
  font-size: var(--size-20);
  font-weight: 800;
  text-transform: uppercase;
}

.close-btn {
  user-select: none;
  display: flex;
  gap: var(--size-16);
  align-items: center;
  position: relative;
  cursor: pointer;
  animation: rightSide 0.7s ease-in-out;
}

.cb-icon {
  user-select: none;
  width: var(--size-40);
  height: var(--size-40);
  background: linear-gradient(0deg, #ff275b 0%, rgba(182, 18, 58, 0) 100%);
  border: var(--size-1) solid #ff275b;
  box-shadow: inset 0 0 var(--size-37) #ff275b,
    0 var(--size-4) var(--size-54) rgba(182, 18, 58, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
}
.cb-icon img {
  user-select: none;
  width: var(--size-20);
  height: var(--size-20);
}
.cb-title {
  user-select: none;
  text-transform: uppercase;
}
.cb-blur {
  user-select: none;
  width: var(--size-0);
  height: var(--size-60);
  border-radius: 50%;
  box-shadow: 0 0 var(--size-50) var(--size-20) #ff275b;
  position: absolute;
  right: var(--size--50);
  top: 0;
}

.right-section {
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.helper {
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: var(--size-12);
  align-items: flex-end;
  margin-top: var(--size-24);
  margin-bottom: var(--size-60);
  animation: rightSide 0.8s ease-in-out;
}
.helper div {
  user-select: none;
  display: flex;
  align-items: center;
  gap: var(--size-14);
}
.helper img {
  user-select: none;
  width: var(--size-14);
  height: var(--size-19);
}
.helper span {
  user-select: none;
  color: rgba(255, 255, 255, 0.6);
}

.progresses {
  user-select: none;
  width: var(--size-280);
  display: flex;
  flex-direction: column;
  gap: var(--size-25);
  animation: rightSide 0.9s ease-in-out;
}

.p-top {
  user-select: none;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  margin-bottom: var(--size-16);
}
.p-title {
  user-select: none;
  text-transform: uppercase;
}
.p-value {
  user-select: none;
  gap: var(--size-8);
  display: flex;
  justify-content: space-between;
}
.p-extra {
  user-select: none;
  color: #c2ff41;
}
.p-val {
  user-select: none;
  font-weight: 400;
}
.p-bar {
  user-select: none;
  height: var(--size-5);
  border: var(--size-1) solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.084) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  display: flex;
  align-items: center;
  box-sizing: content-box;
  padding: var(--size-1);
}
.p-percent {
  user-select: none;
  height: var(--size-5);
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.27) 100%
  );
  border: var(--size-1) solid rgba(255, 255, 255, 0.26);
}

.total-price {
  user-select: none;
  width: var(--size-280);
  margin-top: var(--size-128);
  animation: rightSide 1s ease-in-out;
}

.tp-top {
  user-select: none;
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--size-16);
}
.tp-price {
  user-select: none;
  font-size: var(--size-20);
  font-weight: 800;
}
.tp-btn {
  user-select: none;
  font-size: var(--size-15);
  text-transform: uppercase;
  height: var(--size-64);
  line-height: var(--size-64);
  text-align: center;
  background: linear-gradient(0deg, #c2ff41 0%, rgba(98, 135, 21, 0) 100%);
  border: var(--size-1) solid #c2ff41;
  box-shadow: inset 0 0 var(--size-37) #c2ff41,
    0 var(--size-4) var(--size-56) rgba(98, 135, 21, 0.25);
  cursor: pointer;
}

.bottom-section {
  user-select: none;
  position: absolute;
  width: calc(100% - var(--size-40) * 2);
  overflow-x: scroll;
  margin: 0 auto var(--size-40);
  bottom: -0.85vw;
  left: 2vw;
}

@keyframes bottomSide {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.b-items {
  user-select: none;
  display: flex;
  gap: var(--size-20);
  height: var(--size-130);
}
.b-item {
  user-select: none;
  flex-shrink: 0;
  width: var(--size-283);
  border: var(--size-1) solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-20);
  position: relative;
  overflow: hidden;
  --color: #a36bff;
  animation: bottomSide 0.8s ease-in-out;
}
.b-item.red {
  user-select: none;
  --color: #ff3566;
}
.b-item.green {
  user-select: none;
  --color: #ffc46b;
}
.b-item.gray {
  user-select: none;
  --color: #bebebe;
}
.b-item::before,
.b-item::after {
  user-select: none;
  content: "";
  display: block;
  background-color: var(--color);
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translate(50%);
}
.b-item::before {
  user-select: none;
  transition: 0.5s;
  width: var(--size-62);
  height: var(--size-4);
}
.b-item::after {
  user-select: none;
  width: 95%;
  height: var(--size-0);
  border-radius: 50%;
  bottom: var(--size--10);
  box-shadow: 0 0 var(--size-80) var(--size-10) var(--color);
}

.newwidth::before {
  user-select: none;
  width: 80%;
}
.b-item-img {
  user-select: none;
  width: var(--size-80);
  height: var(--size-80);
  display: flex;
  align-items: center;
}
.b-item-img img {
  user-select: none;
  width: 80%;
}
.b-item-tp {
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: var(--size-8);
}
.b-item-tp-title {
  user-select: none;
  font-size: var(--size-15);
}
.b-item-tp-price {
  user-select: none;
  font-size: var(--size-16);
  font-weight: 600;
  padding: var(--size-4);
  text-align: center;
  background: linear-gradient(0deg, #ff9c27 0%, rgba(167, 101, 23, 0) 100%);
  border: var(--size-1) solid #ff9c27;
  box-shadow: inset 0 0 var(--size-37) #ff9c27,
    0 var(--size-4) var(--size-56) rgba(98, 135, 21, 0.25);
  cursor: pointer;
}

:root {
  user-select: none;
  --size-14: 0.729vw;
  --size-53: 2.76vw;
  --size-40: 2.083vw;
  --size-64: 3.333vw;
  --size-77: 4.01vw;
  --size--3: -0.156vw;
  --size-1: 0.052vw;
  --size-4: 0.208vw;
  --size-72: 3.75vw;
  --size-20: 1.042vw;
  --size--5: -0.26vw;
  --size-15: 0.781vw;
  --size-24: 1.25vw;
  --size-380: 19.792vw;
  --size-16: 0.833vw;
  --size-34: 1.771vw;
  --size-90: 4.688vw;
  --size--40: -2.083vw;
  --size-68: 3.542vw;
  --size-80: 4.167vw;
  --size--10: -0.521vw;
  --size--68: -3.542vw;
  --size-60: 3.125vw;
  --size-37: 1.927vw;
  --size-54: 2.813vw;
  --size-0: 0vw;
  --size-50: 2.604vw;
  --size--50: -2.604vw;
  --size-12: 0.625vw;
  --size-19: 0.99vw;
  --size-280: 14.583vw;
  --size-25: 1.302vw;
  --size-8: 0.417vw;
  --size-5: 0.26vw;
  --size-128: 6.667vw;
  --size-56: 2.917vw;
  --size-130: 6.771vw;
  --size-283: 14.74vw;
  --size-62: 3.229vw;
  --size-10: 0.521vw;
}