@charset "UTF-8";

@font-face {
  font-family: 'zzz';
  src: url('../fonts/inpinhongmengti.ttf');
}

@font-face {
  font-family: 'tttgbnumber';
  src: url('../../../../../genshin/resources/font/tttgbnumber.ttf');
}

@font-face {
  font-family: 'HYWenHei-55W';
  src: url('../../../../../genshin/resources/font/HYWenHei-55W.ttf');
}

.zzz-font {
  font-family: 'zzz', 'tttgbnumber', 'HYWenHei-55W', system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    'Open Sans', 'Helvetica Neue', sans-serif;
}

.no-zzz-font {
  font-family: 'tttgbnumber', 'HYWenHei-55W', system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    'Open Sans', 'Helvetica Neue', sans-serif;
  strong,
  b {
    font-family: 'zzz', 'tttgbnumber', 'HYWenHei-55W', system-ui, -apple-system,
      BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
      'Open Sans', 'Helvetica Neue', sans-serif;
  }
}

.rank-icon {
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  &.s,
  &.S {
    background-image: url('../images/RANK_S.png');
  }
  &.a,
  &.A {
    background-image: url('../images/RANK_A.png');
  }
  &.b,
  &.B {
    background-image: url('../images/RANK_B.png');
  }
}

.rarity-icon {
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  &.a,
  &.A {
    background-image: url('../images/Rarity_A.png');
  }
  &.b,
  &.B {
    background-image: url('../images/Rarity_B.png');
  }
  &.c,
  &.C {
    background-image: url('../images/Rarity_C.png');
  }
  &.s,
  &.S {
    background-image: url('../images/Rarity_S.png');
  }
  &.x,
  &.X {
    background-image: url('../images/Rarity_X.png');
  }
}

.property {
  aspect-ratio: 1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  &.fire {
    background-image: url('../images/IconFire.png');
  }
  &.ice {
    background-image: url('../images/IconIce.png');
  }
  &.physdmg {
    background-image: url('../images/IconPhysDmg.png');
  }
  &.thunder {
    background-image: url('../images/IconThunder.png');
  }
  &.dungeon {
    background-image: url('../images/IconDungeonBuffEther.png');
  }
  &.frost {
    background-image: url('../images/IconFrost.png');
  }
  &.auricink {
    background-image: url('../images/IconAuricInk.png');
  }
}

.prop-icon {
  aspect-ratio: 1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  &.attack {
    background-image: url('../images/property/IconAttack.png');
  }
  &.breakstun {
    background-image: url('../images/property/IconBreakStun.png');
  }
  &.crit {
    background-image: url('../images/property/IconCrit.png');
  }
  &.critdam {
    background-image: url('../images/property/IconCritDam.png');
  }
  &.def {
    background-image: url('../images/property/IconDef.png');
  }
  &.dungeonbuffether {
    background-image: url('../images/property/IconDungeonBuffEther.png');
  }
  &.elementabnormalpower {
    background-image: url('../images/property/IconElementAbnormalPower.png');
  }
  &.elementmystery {
    background-image: url('../images/property/IconElementMystery.png');
  }
  &.fire {
    background-image: url('../images/property/IconFire.png');
  }
  &.hpmax {
    background-image: url('../images/property/IconHpMax.png');
  }
  &.ice {
    background-image: url('../images/property/IconIce.png');
  }
  &.penratio {
    background-image: url('../images/property/IconPenRatio.png');
  }
  &.penvalue {
    background-image: url('../images/property/IconPenValue.png');
  }
  &.physdmg {
    background-image: url('../images/property/IconPhysDmg.png');
  }
  &.spgetratio {
    background-image: url('../images/property/IconSpGetRatio.png');
  }
  &.spmax {
    background-image: url('../images/property/IconSpMax.png');
  }
  &.sprecover {
    background-image: url('../images/property/IconSpRecover.png');
  }
  &.thunder {
    background-image: url('../images/property/IconThunder.png');
  }
  &.sheerforce {
    background-image: url('../images/property/IconSheerForce.png');
  }
}

.pro-icon {
  aspect-ratio: 1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  &.anomaly {
    background-image: url('../images/prop/IconAnomaly.png');
  }
  &.attack {
    background-image: url('../images/prop/IconAttack.png');
  }
  &.defense {
    background-image: url('../images/prop/IconDefence.png');
  }
  &.stun {
    background-image: url('../images/prop/IconStun.png');
  }
  &.support {
    background-image: url('../images/prop/IconSupport.png');
  }
}

.skill-icon {
  aspect-ratio: 1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  &.assist,
  &.Switch,
  &.switch {
    background-image: url('../images/skills/assist.webp');
  }
  &.basic,
  &.Normal,
  &.normal {
    background-image: url('../images/skills/basic.webp');
  }
  &.chain,
  &.Ultimate,
  &.UltimateReady,
  &.ultimateready {
    background-image: url('../images/skills/chain.webp');
  }
  &.core,
  &.Core,
  &.CoreSkill,
  &.coreskill {
    background-image: url('../images/skills/core.webp');
  }
  &.dodge,
  &.Evade,
  &.evade {
    background-image: url('../images/skills/dodge.webp');
  }
  &.special,
  &.Special,
  &.SpecialReady,
  &.specialready {
    background-image: url('../images/skills/special.webp');
  }
}

.special-title {
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: stretch;
  padding: 0 2.4em;
  position: relative;
  margin: 0.5em 0;
  .parallelograms {
    $pwidth: 0.7em;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    position: inherit;
    padding-bottom: 0.4em;
    z-index: 1;
    span {
      width: 1.3em;
      height: 80%;
      background-color: rgb(246, 202, 69);
      margin-right: -0.2em;
      -webkit-clip-path: polygon(
        $pwidth 0%,
        100% 0%,
        calc(100% - $pwidth) 100%,
        0% 100%
      );
      clip-path: polygon(
        $pwidth 0%,
        100% 0%,
        calc(100% - $pwidth) 100%,
        0% 100%
      );
    }
  }
  .bg-content {
    position: absolute;
    bottom: -0.1em;
    left: 0;
    transform: skewX(-8deg);
    color: rgba(255, 255, 255, 0.1);
    font-size: 2.7em;
    width: 100%;
    text-align: center;
  }
  .content {
    flex-grow: 1;
    flex-shrink: 1;
    font-size: 1.5em;
    text-align: center;
    position: inherit;
    z-index: 1;
  }
}