/*
 * ============================================================
 * BOOM BADGE VAULT V2
 * Clean League Trophy Room
 * ============================================================
 */


/* ------------------------------------------------------------
   MAIN VAULT
   ------------------------------------------------------------ */

.trainer-hq--vault .trainer-badge-case {
  position: relative !important;

  overflow: hidden !important;

  padding:
    clamp(18px, 2vw, 28px) !important;

  border:
    1px solid
    rgba(113, 180, 226, .18) !important;

  border-radius:
    18px !important;

  clip-path:
    none !important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255, 215, 94, .07),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(10, 18, 34, .96),
      rgba(5, 10, 22, .98)
    ) !important;

  box-shadow:
    0 24px 70px rgba(0, 0, 0, .25),
    inset 0 1px rgba(255, 255, 255, .035) !important;
}


/* Kill giant LEAGUE ARCHIVE watermark */

.trainer-hq--vault
.trainer-badge-case::before {
  content:
    none !important;

  display:
    none !important;
}


/* ------------------------------------------------------------
   TITLE + 8/8
   ------------------------------------------------------------ */

.trainer-hq--vault
.trainer-badge-case > header {
  position:
    relative;

  z-index:
    5;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    20px;

  margin:
    0 0 16px;

  padding:
    0 0 16px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, .08);
}


.trainer-hq--vault
.trainer-badge-case > header h2 {
  margin:
    5px 0 0;

  font-size:
    clamp(1.35rem, 2vw, 1.85rem);

  line-height:
    1;

  letter-spacing:
    -.025em;
}


.trainer-hq--vault
.trainer-badge-case > header
.portal-kicker {
  color:
    #ff6577;

  font-size:
    .62rem;

  font-weight:
    900;

  letter-spacing:
    .16em;
}


.trainer-hq--vault
.trainer-badge-case > header > strong {
  display:
    inline-flex;

  align-items:
    baseline;

  gap:
    3px;

  margin:
    0;

  color:
    #ffe074;

  font-size:
    clamp(2rem, 3vw, 2.8rem);

  font-weight:
    950;

  line-height:
    .9;

  text-shadow:
    0 0 22px
    rgba(255, 224, 116, .18);
}


.trainer-hq--vault
.trainer-badge-case > header > strong small {
  display:
    inline !important;

  margin:
    0 !important;

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

  font-size:
    .82rem !important;

  font-weight:
    800;

  letter-spacing:
    0;
}


/* ------------------------------------------------------------
   REGION SELECTOR
   ------------------------------------------------------------ */

.trainer-hq--vault
.trainer-badge-regions {
  position:
    relative;

  z-index:
    5;

  display:
    grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap:
    10px !important;

  margin:
    0 0 20px !important;
}


.trainer-hq--vault
.trainer-badge-region {
  position:
    relative;

  min-width:
    0;

  min-height:
    70px !important;

  display:
    grid !important;

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

  grid-template-rows:
    auto auto;

  align-items:
    center;

  gap:
    5px 10px;

  padding:
    12px 14px !important;

  border:
    1px solid
    rgba(132, 170, 215, .13) !important;

  border-radius:
    11px !important;

  background:
    linear-gradient(
      145deg,
      rgba(17, 27, 46, .88),
      rgba(8, 14, 27, .92)
    ) !important;

  color:
    rgba(236, 244, 255, .92) !important;

  text-align:
    left !important;

  transform:
    none !important;

  box-shadow:
    none !important;

  overflow:
    hidden;

  cursor:
    pointer;
}


.trainer-hq--vault
.trainer-badge-region::before,
.trainer-hq--vault
.trainer-badge-region::after {
  content:
    none !important;

  display:
    none !important;
}


.trainer-hq--vault
.trainer-badge-region > span {
  grid-column:
    1;

  grid-row:
    1;

  font-size:
    .72rem;

  font-weight:
    900;

  letter-spacing:
    .08em;
}


.trainer-hq--vault
.trainer-badge-region > b {
  grid-column:
    2;

  grid-row:
    1;

  color:
    #ffffff;

  font-size:
    .9rem;

  line-height:
    1;
}


.trainer-hq--vault
.trainer-badge-region > small {
  grid-column:
    1 / -1;

  grid-row:
    2;

  color:
    rgba(187, 199, 219, .52);

  font-size:
    .55rem;

  font-weight:
    800;

  letter-spacing:
    .08em;
}


.trainer-hq--vault
.trainer-badge-region:hover {
  border-color:
    rgba(107, 214, 255, .35) !important;

  background:
    linear-gradient(
      145deg,
      rgba(21, 38, 62, .94),
      rgba(9, 18, 34, .96)
    ) !important;
}


.trainer-hq--vault
.trainer-badge-region.is-complete
> b {
  color:
    #ffe074;
}


.trainer-hq--vault
.trainer-badge-region.is-active {
  border-color:
    rgba(255, 224, 116, .72) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 224, 116, .12),
      rgba(14, 23, 42, .96)
    ) !important;

  box-shadow:
    inset 3px 0
    #ffe074 !important;
}


.trainer-hq--vault
.trainer-badge-region.is-active
> span,
.trainer-hq--vault
.trainer-badge-region.is-active
> b {
  color:
    #ffe074 !important;
}


/* ------------------------------------------------------------
   BADGE GRID
   ------------------------------------------------------------ */

.trainer-hq--vault
.trainer-badge-case > ol {
  position:
    relative;

  z-index:
    4;

  display:
    grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap:
    12px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  list-style:
    none !important;

  perspective:
    none !important;
}


.trainer-hq--vault
.trainer-badge-case > ol > li {
  min-width:
    0;

  min-height:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;
}


.trainer-hq--vault
[data-trainer-badge] {
  position:
    relative;

  width:
    100%;

  min-height:
    158px !important;

  display:
    flex !important;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px !important;

  padding:
    14px 10px !important;

  border:
    1px solid
    rgba(126, 169, 215, .12) !important;

  border-radius:
    14px !important;

  background:
    linear-gradient(
      180deg,
      rgba(16, 27, 46, .72),
      rgba(7, 13, 25, .74)
    ) !important;

  color:
    inherit;

  transform:
    none !important;

  box-shadow:
    none !important;

  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease !important;
}


.trainer-hq--vault
[data-trainer-badge]:hover {
  transform:
    translateY(-2px) !important;

  border-color:
    rgba(116, 212, 255, .34) !important;

  background:
    linear-gradient(
      180deg,
      rgba(19, 34, 57, .88),
      rgba(8, 16, 31, .92)
    ) !important;
}


.trainer-hq--vault
[data-trainer-badge][aria-pressed="true"] {
  transform:
    translateY(-2px) !important;

  border-color:
    rgba(255, 224, 116, .66) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255, 224, 116, .10),
      rgba(10, 18, 33, .95)
    ) !important;

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, .18),
    inset 0 0 24px
    rgba(255, 224, 116, .035) !important;
}


/* Badge medal */

.trainer-hq--vault
[data-trainer-badge]
> .trainer-badge-art-shell {
  width:
    88px !important;

  height:
    88px !important;

  display:
    grid !important;

  place-items:
    center;

  position:
    relative;

  border:
    1px solid
    rgba(117, 180, 225, .24) !important;

  border-radius:
    50% !important;

  background:
    radial-gradient(
      circle,
      rgba(66, 137, 181, .13),
      rgba(9, 19, 34, .24) 62%,
      transparent 66%
    ) !important;

  transform:
    none !important;

  box-shadow:
    none !important;
}


.trainer-hq--vault
[data-trainer-badge]
> .trainer-badge-art-shell::before {
  inset:
    -6px !important;

  border:
    1px solid
    rgba(112, 174, 219, .14) !important;

  border-radius:
    50% !important;

  transform:
    none !important;

  animation:
    none !important;
}


.trainer-hq--vault
.is-earned
[data-trainer-badge]
> .trainer-badge-art-shell {
  border-color:
    rgba(255, 224, 116, .62) !important;

  background:
    radial-gradient(
      circle,
      rgba(255, 224, 116, .20),
      rgba(255, 224, 116, .045) 58%,
      transparent 70%
    ) !important;

  box-shadow:
    0 0 24px
    rgba(255, 224, 116, .12) !important;
}


.trainer-hq--vault
[data-trainer-badge]:hover
> .trainer-badge-art-shell,
.trainer-hq--vault
[data-trainer-badge][aria-pressed="true"]
> .trainer-badge-art-shell {
  transform:
    scale(1.04) !important;
}


.trainer-hq--vault
[data-trainer-badge]
> .trainer-badge-art-shell
> em {
  opacity:
    .48;

  bottom:
    -11px !important;
}


/* Badge labels */

.trainer-hq--vault
[data-trainer-badge]
> b {
  margin:
    6px 0 0;

  color:
    rgba(246, 249, 255, .94);

  font-size:
    .73rem;

  font-weight:
    850;

  line-height:
    1.15;

  text-align:
    center;
}


.trainer-hq--vault
[data-trainer-badge]
> small {
  color:
    rgba(172, 188, 210, .54);

  font-size:
    .50rem;

  font-weight:
    900;

  letter-spacing:
    .09em;
}


.trainer-hq--vault
.is-earned
[data-trainer-badge]
> small {
  color:
    rgba(255, 224, 116, .78);
}


.trainer-hq--vault
.is-locked
[data-trainer-badge] {
  opacity:
    .52;
}


/* ------------------------------------------------------------
   SELECTED TROPHY
   ------------------------------------------------------------ */

.trainer-hq--vault
.trainer-badge-intel {
  position:
    relative;

  z-index:
    5;

  display:
    grid !important;

  grid-template-columns:
    minmax(180px, .7fr)
    minmax(130px, .45fr)
    minmax(260px, 1fr) !important;

  align-items:
    center;

  gap:
    10px 20px !important;

  margin:
    18px 0 12px !important;

  padding:
    14px 16px !important;

  border:
    1px solid
    rgba(255, 224, 116, .14) !important;

  border-left:
    3px solid
    #ffe074 !important;

  border-radius:
    10px !important;

  background:
    linear-gradient(
      90deg,
      rgba(255, 224, 116, .075),
      rgba(11, 21, 37, .68) 45%,
      rgba(8, 15, 28, .46)
    ) !important;
}


.trainer-hq--vault
.trainer-badge-intel > span {
  color:
    rgba(255, 224, 116, .76) !important;

  font-size:
    .55rem !important;

  font-weight:
    900;

  letter-spacing:
    .11em;
}


.trainer-hq--vault
.trainer-badge-intel > strong {
  color:
    #f4f7fc;

  font-size:
    .82rem !important;

  white-space:
    nowrap;
}


.trainer-hq--vault
.trainer-badge-intel p {
  display:
    flex !important;

  align-items:
    center;

  gap:
    12px !important;

  margin:
    0 !important;

  min-width:
    0;
}


.trainer-hq--vault
.trainer-badge-intel p b {
  flex:
    0 0 auto;

  color:
    #ffe074 !important;

  font-size:
    .54rem !important;
}


.trainer-hq--vault
.trainer-badge-intel p small {
  min-width:
    0;

  color:
    rgba(184, 197, 217, .68) !important;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */

.trainer-hq--vault
.trainer-badge-case__footer {
  position:
    relative;

  z-index:
    5;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  padding-top:
    12px;

  border-top:
    1px solid
    rgba(255, 255, 255, .06);
}


.trainer-hq--vault
.trainer-badge-case__footer a {
  color:
    rgba(239, 245, 255, .88);

  font-size:
    .68rem;

  font-weight:
    850;

  letter-spacing:
    .03em;
}


.trainer-hq--vault
.trainer-badge-case__footer small {
  color:
    rgba(161, 175, 197, .48);

  font-size:
    .52rem;
}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (max-width: 980px) {

  .trainer-hq--vault
  .trainer-badge-regions {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }


  .trainer-hq--vault
  .trainer-badge-case > ol {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }


  .trainer-hq--vault
  .trainer-badge-intel {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;
  }


  .trainer-hq--vault
  .trainer-badge-intel p {
    grid-column:
      1 / -1;
  }
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 560px) {

  .trainer-hq--vault
  .trainer-badge-case {
    padding:
      14px !important;

    border-radius:
      12px !important;
  }


  .trainer-hq--vault
  .trainer-badge-case > header {
    align-items:
      center;

    gap:
      10px;
  }


  .trainer-hq--vault
  .trainer-badge-case > header h2 {
    font-size:
      1.25rem;
  }


  .trainer-hq--vault
  .trainer-badge-case > header
  > strong {
    font-size:
      1.8rem;
  }


  .trainer-hq--vault
  .trainer-badge-region {
    min-height:
      64px !important;

    padding:
      10px !important;
  }


  .trainer-hq--vault
  [data-trainer-badge] {
    min-height:
      145px !important;

    padding:
      12px 7px !important;
  }


  .trainer-hq--vault
  [data-trainer-badge]
  > .trainer-badge-art-shell {
    width:
      78px !important;

    height:
      78px !important;
  }


  .trainer-hq--vault
  .trainer-badge-intel {
    display:
      flex !important;

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      6px !important;
  }


  .trainer-hq--vault
  .trainer-badge-intel p {
    display:
      grid !important;

    gap:
      4px !important;
  }


  .trainer-hq--vault
  .trainer-badge-intel p small {
    white-space:
      normal;

    overflow:
      visible;
  }


  .trainer-hq--vault
  .trainer-badge-case__footer {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      8px;
  }
}

/* BOOM_BADGE_VAULT_CENTER_BADGES_V1_START */

/* Center all badge cards more tightly */
.trainer-hq--vault
.trainer-badge-case > ol > li {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
}

.trainer-hq--vault
[data-trainer-badge] {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}


/* Bigger main badge circle */
.trainer-hq--vault
[data-trainer-badge]
> .trainer-badge-art-shell {
  width: 100px !important;
  height: 100px !important;
  margin: 0 auto 6px !important;
}


/* Remove the lower split / mini extra piece that makes badges look divided */
.trainer-hq--vault
[data-trainer-badge]
> .trainer-badge-art-shell
> em {
  display: none !important;
}


/* Make the actual badge art larger and centered */
.trainer-hq--vault
[data-trainer-badge]
> .trainer-badge-art-shell
> img,
.trainer-hq--vault
[data-trainer-badge]
> .trainer-badge-art-shell
> svg,
.trainer-hq--vault
[data-trainer-badge]
> .trainer-badge-art-shell
> canvas,
.trainer-hq--vault
[data-trainer-badge]
> .trainer-badge-art-shell
> picture,
.trainer-hq--vault
[data-trainer-badge]
> .trainer-badge-art-shell
> span,
.trainer-hq--vault
[data-trainer-badge]
> .trainer-badge-art-shell
> i {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: 78px !important;
  height: 78px !important;
  max-width: 78px !important;
  max-height: 78px !important;

  margin: 0 !important;
  display: block !important;

  object-fit: contain !important;
}


/* If the art is wrapped, keep wrapper centered too */
.trainer-hq--vault
[data-trainer-badge]
> .trainer-badge-art-shell
> picture {
  overflow: visible !important;
}


/* Make the label stack tighter under the art */
.trainer-hq--vault
[data-trainer-badge]
> b {
  margin-top: 2px !important;
}

.trainer-hq--vault
[data-trainer-badge]
> small {
  margin-top: -2px !important;
}


/* Slightly bigger on desktop for better fill */
@media (min-width: 981px) {
  .trainer-hq--vault
  [data-trainer-badge]
  > .trainer-badge-art-shell {
    width: 106px !important;
    height: 106px !important;
  }

  .trainer-hq--vault
  [data-trainer-badge]
  > .trainer-badge-art-shell
  > img,
  .trainer-hq--vault
  [data-trainer-badge]
  > .trainer-badge-art-shell
  > svg,
  .trainer-hq--vault
  [data-trainer-badge]
  > .trainer-badge-art-shell
  > canvas,
  .trainer-hq--vault
  [data-trainer-badge]
  > .trainer-badge-art-shell
  > picture,
  .trainer-hq--vault
  [data-trainer-badge]
  > .trainer-badge-art-shell
  > span,
  .trainer-hq--vault
  [data-trainer-badge]
  > .trainer-badge-art-shell
  > i {
    width: 84px !important;
    height: 84px !important;
    max-width: 84px !important;
    max-height: 84px !important;
  }
}


/* Mobile safety */
@media (max-width: 560px) {
  .trainer-hq--vault
  [data-trainer-badge]
  > .trainer-badge-art-shell {
    width: 92px !important;
    height: 92px !important;
  }

  .trainer-hq--vault
  [data-trainer-badge]
  > .trainer-badge-art-shell
  > img,
  .trainer-hq--vault
  [data-trainer-badge]
  > .trainer-badge-art-shell
  > svg,
  .trainer-hq--vault
  [data-trainer-badge]
  > .trainer-badge-art-shell
  > canvas,
  .trainer-hq--vault
  [data-trainer-badge]
  > .trainer-badge-art-shell
  > picture,
  .trainer-hq--vault
  [data-trainer-badge]
  > .trainer-badge-art-shell
  > span,
  .trainer-hq--vault
  [data-trainer-badge]
  > .trainer-badge-art-shell
  > i {
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
  }
}

/* BOOM_BADGE_VAULT_CENTER_BADGES_V1_END */

/* BOOM_BADGE_VECTOR_FIX_V1_START */

/*
 * Stop using the combined 5-row PNG sprite.
 * Each active region now uses its own GitHub-sourced SVG.
 *
 * The SVG contains only one region row, so enlarging an icon
 * can never reveal artwork from another region.
 */

.trainer-hq--vault
.trainer-badge-art-shell {
  overflow: hidden !important;
}


/*
 * Important:
 * override every previous sprite-sheet declaration.
 */

.trainer-hq--vault
.trainer-badge-art {
  position: absolute !important;

  left: 50% !important;
  top: 50% !important;

  width: 92px !important;
  height: 92px !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  transform:
    translate(-50%, -50%) !important;

  background-repeat:
    no-repeat !important;

  /*
   * Eight badges horizontally.
   * Height stays proportional to the original SVG.
   * This removes the distortion from 800% x 500%.
   */
  background-size:
    800% auto !important;

  background-position-x:
    var(--badge-x) !important;

  background-position-y:
    center !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;

  filter:
    drop-shadow(
      0 5px 8px
      rgba(0, 0, 0, .42)
    );

  font-size:
    0 !important;
}


/* KANTO */

.trainer-hq--vault
.trainer-badge-art[data-badge-region="kanto"] {
  background-image:
    url("/portal/assets/badges/kanto.svg") !important;
}


/* JOHTO */

.trainer-hq--vault
.trainer-badge-art[data-badge-region="johto"] {
  background-image:
    url("/portal/assets/badges/johto.svg") !important;
}


/* HOENN */

.trainer-hq--vault
.trainer-badge-art[data-badge-region="hoenn"] {
  background-image:
    url("/portal/assets/badges/hoenn.svg") !important;
}


/* SINNOH */

.trainer-hq--vault
.trainer-badge-art[data-badge-region="sinnoh"] {
  background-image:
    url("/portal/assets/badges/sinnoh.svg") !important;
}


/*
 * Slightly larger medal ring.
 */

.trainer-hq--vault
[data-trainer-badge]
> .trainer-badge-art-shell {
  width: 112px !important;
  height: 112px !important;

  overflow: hidden !important;

  display: grid !important;
  place-items: center !important;
}


/*
 * The old shadow element is no longer needed.
 */

.trainer-hq--vault
[data-trainer-badge]
> .trainer-badge-art-shell
> em {
  display: none !important;
}


/*
 * No inherited pseudo sprite decorations.
 */

.trainer-hq--vault
.trainer-badge-art::before,
.trainer-hq--vault
.trainer-badge-art::after {
  content: none !important;
  display: none !important;
}


/*
 * Desktop.
 */

@media (min-width: 981px) {

  .trainer-hq--vault
  .trainer-badge-art {
    width: 96px !important;
    height: 96px !important;
  }

  .trainer-hq--vault
  [data-trainer-badge]
  > .trainer-badge-art-shell {
    width: 116px !important;
    height: 116px !important;
  }
}


/*
 * Mobile.
 */

@media (max-width: 560px) {

  .trainer-hq--vault
  .trainer-badge-art {
    width: 78px !important;
    height: 78px !important;
  }

  .trainer-hq--vault
  [data-trainer-badge]
  > .trainer-badge-art-shell {
    width: 94px !important;
    height: 94px !important;
  }
}

/* BOOM_BADGE_VECTOR_FIX_V1_END */

/* BOOM_BADGE_INDIVIDUAL_PNG_V1_START */

/*
 * Individual badge images.
 * No sprite positioning.
 * No region slicing.
 * No neighbouring badge bleed.
 */

.trainer-hq--vault
.trainer-badge-art {
  display: none !important;
}


.trainer-hq--vault
[data-trainer-badge]
> .trainer-badge-art-shell {
  position: relative !important;

  width: 116px !important;
  height: 116px !important;

  display: grid !important;
  place-items: center !important;

  margin:
    0 auto 7px !important;

  overflow: hidden !important;

  border-radius:
    50% !important;
}


.trainer-hq--vault
[data-trainer-badge]
> .trainer-badge-art-shell
> em {
  display: none !important;
}


.trainer-hq--vault
.trainer-badge-art-img {
  position: static !important;

  display: block !important;

  width: 90px !important;
  height: 90px !important;

  max-width: 90px !important;
  max-height: 90px !important;

  object-fit: contain !important;
  object-position: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  transform: none !important;

  filter:
    drop-shadow(
      0 5px 8px
      rgba(0, 0, 0, .38)
    ) !important;
}


.trainer-hq--vault
[data-trainer-badge]:hover
.trainer-badge-art-img,
.trainer-hq--vault
[data-trainer-badge][aria-pressed="true"]
.trainer-badge-art-img {
  transform:
    scale(1.06) !important;
}


@media (max-width: 560px) {

  .trainer-hq--vault
  [data-trainer-badge]
  > .trainer-badge-art-shell {
    width: 96px !important;
    height: 96px !important;
  }


  .trainer-hq--vault
  .trainer-badge-art-img {
    width: 74px !important;
    height: 74px !important;

    max-width: 74px !important;
    max-height: 74px !important;
  }
}

/* BOOM_BADGE_INDIVIDUAL_PNG_V1_END */

/* BOOM_BADGE_SELECTED_IMAGE_FIX_V1_START */

/*
 * FINAL badge positioning authority.
 *
 * Older Badge Vault layers positioned artwork absolutely at 50/50.
 * The selected-state scale previously replaced translate(-50%, -50%),
 * causing the image to jump down/right and be clipped.
 *
 * Keep translate + scale together in every state.
 */

.trainer-hq--vault
[data-trainer-badge]
> .trainer-badge-art-shell {
  position: relative !important;

  overflow: hidden !important;

  display: grid !important;
  place-items: center !important;
}


.trainer-hq--vault
[data-trainer-badge]
> .trainer-badge-art-shell
> img.trainer-badge-art-img {
  position: absolute !important;

  left: 50% !important;
  top: 50% !important;

  width: 90px !important;
  height: 90px !important;

  max-width: 90px !important;
  max-height: 90px !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center center !important;

  transform:
    translate(-50%, -50%) !important;

  transform-origin:
    center center !important;
}


/* Hover stays centered */

.trainer-hq--vault
[data-trainer-badge]:hover
> .trainer-badge-art-shell
> img.trainer-badge-art-img {
  transform:
    translate(-50%, -50%)
    scale(1.06) !important;
}


/* Selected stays centered */

.trainer-hq--vault
[data-trainer-badge][aria-pressed="true"]
> .trainer-badge-art-shell
> img.trainer-badge-art-img {
  transform:
    translate(-50%, -50%)
    scale(1.06) !important;
}


/* Selected + hover also stays centered */

.trainer-hq--vault
[data-trainer-badge][aria-pressed="true"]:hover
> .trainer-badge-art-shell
> img.trainer-badge-art-img {
  transform:
    translate(-50%, -50%)
    scale(1.09) !important;
}


@media (max-width: 560px) {

  .trainer-hq--vault
  [data-trainer-badge]
  > .trainer-badge-art-shell
  > img.trainer-badge-art-img {
    width: 74px !important;
    height: 74px !important;

    max-width: 74px !important;
    max-height: 74px !important;
  }
}

/* BOOM_BADGE_SELECTED_IMAGE_FIX_V1_END */