/* ============================================
   Character Card Component (EM SYSTEM)
   --------------------------------------------
   Fully scalable UI card system.
   Resize everything by changing font-size.
   ============================================ */

.character-card {
  position: relative;
  font-size: 9px;
  width: 17.8em;
  height: 31em;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  box-shadow: 4px 6px 10px rgba(107, 114, 128, 0.4);
}

/* ---------- Responsive scaling ---------- */

/* @media (max-width: 768px) {
  .character-card {
    font-size: 8px;
  }
} */
/*
@media (max-width: 1200px) {
  .character-card {
    font-size: 8px;
  }
}

@media (max-width: 1440px) {
  .character-card {
    font-size: 8px;
  }
}
@media (max-width: 1680px) {
  .character-card {
    font-size: 10px;
  }
}

.character-card:hover {
  filter: brightness(1.05);
} */


/* ---------- Portrait ---------- */

.character-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 10;
}

/* ---------- Frame ---------- */

.character-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  width: 50%;
  height: 50%;
  transform: scale(2);
  transform-origin: top left;

  border-style: solid;
  border-image-slice: 60% 16% 28% 68% fill;
  border-image-width: 105px 30px 60px 110px;
  border-image-outset: 2px 5px 15px 6px;
  border-image-repeat: stretch stretch;
}

/* ---------- Faction ---------- */

.character-faction {
  position: absolute;
  inset: 0;
  left: 5.2em;
  top: 0;
  object-fit: cover;
  z-index: 6;
  pointer-events: none;
  filter: brightness(0.85);
}

/* ---------- Job Icon ---------- */

.character-job {
  position: absolute;
  left: 0.8em;
  top: 0.8em;

  width: 3.6em;
  height: 3.6em;

  overflow: hidden;
  border-radius: 0.125rem;
  z-index: 20;
  background: black;
}

.character-job img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- Element Icon ---------- */

.character-element {
  position: absolute;
  left: 0.8em;
  top: 5.2em;

  width: 3.6em;
  height: 3.6em;

  overflow: hidden;
  border-radius: 0.125rem;
  z-index: 20;
}

.character-element-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(2);
}

.character-element-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- Rarity ---------- */

.character-rarity {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6em;

  /* filter: brightness(1.1); */
  z-index: 20;
  pointer-events: none;
}

/* ---------- Bottom Shade ---------- */

.character-shade {
  position: absolute;
  top: 88%;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 15;
}

/* ---------- Name ---------- */

.character-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.7em;

  z-index: 25;
  text-align: center;
  color: white;

  font-size: 1.5em;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.9));
}