/* ============================================================
   BOOM TRAINER ACTIVE PARTY V1
   Public Trainer Pokédex
   ============================================================ */

.dex-trainer-party-v1 {
  position: relative;
  z-index: 12;

  width:
    min(
      690px,
      52vw
    );

  max-width: 100%;

  margin:
    17px 0
    13px;

  padding-top: 10px;

  border-top:
    1px solid
    color-mix(
      in srgb,
      var(--region-accent) 24%,
      transparent
    );
}


.dex-trainer-party-v1__heading {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 12px;

  margin-bottom: 8px;
}


.dex-trainer-party-v1__heading span {
  color:
    var(
      --region-accent,
      #58d8ff
    );

  font-size: .59rem;

  font-weight: 950;

  letter-spacing: .18em;

  text-transform: uppercase;
}


.dex-trainer-party-v1__heading small {
  color:
    var(
      --text-muted,
      #8da0ae
    );

  font-size: .55rem;

  font-weight: 900;

  letter-spacing: .1em;
}


.dex-trainer-party-v1__grid {
  display: grid;

  grid-template-columns:
    repeat(
      6,
      minmax(0, 1fr)
    );

  gap: 7px;
}


.dex-trainer-party-v1__mon {
  position: relative;

  min-width: 0;

  min-height: 103px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content:
    flex-start;

  padding:
    7px 5px
    6px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--region-accent) 22%,
      rgba(255,255,255,.08)
    );

  border-radius: 10px;

  background:
    radial-gradient(
      circle at 50% 25%,
      color-mix(
        in srgb,
        var(--region-accent) 9%,
        transparent
      ),
      transparent 56%
    ),
    rgba(5,10,18,.57);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.025);

  transition:
    transform .15s ease,
    border-color .15s ease;
}


.dex-trainer-party-v1__mon:hover {
  transform:
    translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--region-accent) 55%,
      rgba(255,255,255,.1)
    );
}


.dex-trainer-party-v1__slot {
  position: absolute;

  top: 5px;
  left: 6px;

  z-index: 3;

  color:
    rgba(255,255,255,.32);

  font-size: .46rem;

  font-weight: 950;
}


.dex-trainer-party-v1__art {
  width: 60px;
  height: 60px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;
}


.dex-trainer-party-v1__art img {
  width: 58px;
  height: 58px;

  display: block;

  object-fit: contain;

  filter:
    drop-shadow(
      0 7px 8px
      rgba(0,0,0,.34)
    );
}


.dex-trainer-party-v1__missing {
  width: 44px;
  height: 44px;

  display: grid;

  place-items: center;

  border:
    1px dashed
    rgba(255,255,255,.15);

  border-radius: 50%;

  color:
    rgba(255,255,255,.24);
}


.dex-trainer-party-v1__info {
  width: 100%;

  min-width: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1px;

  text-align: center;
}


.dex-trainer-party-v1__info strong {
  width: 100%;

  overflow: hidden;

  color:
    var(
      --text-primary,
      #f4f8fb
    );

  font-size: .58rem;

  font-weight: 900;

  line-height: 1.15;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.dex-trainer-party-v1__info small {
  color:
    var(
      --text-muted,
      #93a5b3
    );

  font-size: .52rem;

  font-weight: 800;
}


.dex-trainer-party-v1__variant {
  margin-top: 2px;

  font-size: .39rem;

  font-weight: 950;

  letter-spacing: .055em;

  white-space: nowrap;
}


.dex-trainer-party-v1__variant[
  data-variant="shiny"
] {
  color: #ffd85f;
}


.dex-trainer-party-v1__variant[
  data-variant="diamond"
] {
  color: #91eaff;
}


.dex-trainer-party-v1__variant[
  data-variant="rainbow"
] {
  color: #ffd8f4;
}


.dex-trainer-party-v1__mon[
  data-variant="shiny"
] {
  border-color:
    rgba(
      255,
      211,
      74,
      .32
    );
}


.dex-trainer-party-v1__mon[
  data-variant="diamond"
] {
  border-color:
    rgba(
      111,
      224,
      255,
      .44
    );

  box-shadow:
    inset 0 0 18px
      rgba(91,210,255,.055);
}


.dex-trainer-party-v1__mon[
  data-variant="rainbow"
] {
  border-color:
    rgba(
      255,
      169,
      229,
      .42
    );

  box-shadow:
    inset 0 0 20px
      rgba(193,129,255,.06);
}


.dex-trainer-party-v1__empty {
  min-height: 46px;

  display: flex;

  align-items: center;

  padding: 0 13px;

  border:
    1px dashed
    rgba(255,255,255,.1);

  border-radius: 8px;

  color:
    var(
      --text-muted,
      #8496a4
    );

  background:
    rgba(5,10,18,.34);

  font-size: .58rem;

  font-weight: 850;

  letter-spacing: .09em;
}


.dex-trainer-party-v1__loading {
  height: 60px;

  display: flex;

  align-items: center;

  gap: 6px;
}


.dex-trainer-party-v1__loading i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(
      --region-accent,
      #58d8ff
    );

  animation:
    dex-party-pulse-v1
    .9s ease-in-out
    infinite alternate;
}


.dex-trainer-party-v1__loading i:nth-child(2) {
  animation-delay: .15s;
}


.dex-trainer-party-v1__loading i:nth-child(3) {
  animation-delay: .3s;
}


@keyframes dex-party-pulse-v1 {
  from {
    opacity: .2;
    transform: translateY(0);
  }

  to {
    opacity: 1;
    transform: translateY(-4px);
  }
}


/* ============================================================
   TABLET / MOBILE
   ============================================================ */

@media (
  max-width: 1000px
) {
  .dex-trainer-party-v1 {
    width: 100%;
  }

  .dex-trainer-party-v1__grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .dex-trainer-party-v1__mon {
    min-height: 98px;
  }
}


@media (
  max-width: 700px
) {
  .dex-trainer-party-v1 {
    margin-top: 13px;
  }

  .dex-trainer-party-v1__grid {
    gap: 6px;
  }

  .dex-trainer-party-v1__art {
    width: 54px;
    height: 54px;
  }

  .dex-trainer-party-v1__art img {
    width: 52px;
    height: 52px;
  }

  .dex-trainer-party-v1__mon {
    min-height: 91px;
  }
}


@media (
  prefers-reduced-motion: reduce
) {
  .dex-trainer-party-v1__mon {
    transition: none;
  }

  .dex-trainer-party-v1__loading i {
    animation: none;
  }
}