src/views/component/gacha/gacha.css
@font-face {
  src: url("../../../../data/font/HYWenHei-85W.ttf");
  font-family: GenshinUsedFont;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  -webkit-text-stroke: 0.018em currentColor;
  width: 1286px;
  color: #fff;
  font-family: GenshinUsedFont, monospace;
}

#particles-js {
  position: fixed;
  z-index: -999;
  background: linear-gradient(45deg, #272b38, #2b2b35);
  width: 100vw;
  height: 100vh;
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gacha-title {
  align-self: flex-start;
  z-index: 999;
  margin-top: 20px;
  margin-left: 40px;
  width: 1120px;
  font-size: 35px;
  text-shadow: 0 0 6px #333333;
  overflow-wrap: anywhere;
}

.container-gacha-box {
  grid-column-gap: 10px;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-rows: 570px;
  align-items: center;
  margin-top: 20px;
}

.gacha-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("http://localhost:9934/resources/etc/image/gacha-background.png");
  background-position: center;
  background-size: 112px 652px;
  width: 112px;
  height: 100%;
}

.item-image {
  -webkit-mask-image: url("http://localhost:9934/resources/etc/image/gacha-card.svg");
  -webkit-mask-position: center;
  -webkit-mask-size: 108px 470px;
  -webkit-mask-repeat: no-repeat;
}

.item-image.character {
  -webkit-mask-position: bottom;
}

svg {
  position: absolute;
  z-index: 999;
  width: 134px;
  height: 600px;
}

.flame {
  filter: blur(6px);
}

.flame.Five {
  fill: url(#Five);
}

.flame.Four {
  fill: url(#Four);
}

.flame.Three {
  fill: url(#Three);
}

.frame,
.halo {
  fill: none;
  transform: translate(-8px, -35px) scale(0.82);
  transform-origin: 50% 50%;
  width: 108px;
  height: 484px;
}

.frame {
  stroke: #feffff;
  stroke-width: 3px;
}

.halo {
  stroke-width: 10px;
  filter: blur(8px);
}

.halo.Five {
  stroke: #fdf497;
}

.halo.Four {
  stroke: #c49ff9;
}

.frame.Three {
  stroke: #dae9fd;
}

.halo.Three {
  stroke: #b9d7fc;
  opacity: 0.5;
}

.item-image.weapon {
  width: 145px;
}

.item-image.character {
  width: 145px;
}

.container-item-image.character {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: 5px;
  height: 464px;
}

.container-item-props {
  display: grid;
  position: absolute;
  grid-template-rows: 271px 26px 46px 65px 8px 21px 75px;
  grid-template-areas:
    "."
    "label"
    "."
    "type-image"
    "."
    "rarity"
    ".";
  justify-items: center;
  width: 112px;
  height: 484px;
}

.item-label {
  display: flex;
  grid-area: label;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #5a5a5acc;
  width: 112px;
  font-size: 20px;
}

.item-type-image {
  grid-area: type-image;
  width: 65px;
  height: 65px;
}

.item-rarity-image {
  grid-area: rarity;
  height: 21px;
}

.info-footer {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-areas: "epitome credit";
  align-items: end;
  justify-items: end;
  margin-bottom: 20px;
  width: 1220px;
  font-size: 20px;
  text-shadow: 0 0 6px #333333;
}

.epitome {
  grid-column-gap: 4px;
  display: grid;
  grid-template-columns: auto 70px auto;
  grid-template-areas:
    "status status status"
    "label progress data";
  grid-area: epitome;
  align-items: center;
  text-shadow: 0 0 6px #333333;
}

.path-name {
  margin-left: 4px;
}

.epitome-status {
  grid-area: status;
}

.epitome-label {
  grid-area: label;
}

.bar-full,
.bar-progress {
  grid-area: progress;
}

.container-epitome-data {
  grid-area: data;
  justify-self: end;
}

.bar-full {
  box-sizing: border-box;
  box-shadow: 0 0 6px #333333;
  border: 1px solid #ede8e1;
  border-radius: 5px;
  background-color: #282b3738;
  width: 70px;
  height: 10px;
}

.bar-progress {
  box-sizing: border-box;
  margin-left: 2px;
  border-radius: 5px;
  background-color: #ede8e1;
  height: 6px;
}

.credit {
  grid-area: credit;
}

.deco-username,
.deco-time,
.deco-type,
.deco-count {
  margin: 0 8px;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
