/*
 * ==========================================================
 * BOOM TRAINER OS
 * POKEMONIZATION V3
 *
 * External visual layer.
 * Core League and Achievement JS remain untouched.
 * ==========================================================
 */


/* ==========================================================
   TROPHY VAULT HERO
   ========================================================== */

.portal-trophy-real .pt-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  min-height: 390px;

  padding-right:
    clamp(320px, 30vw, 500px);
}


.portal-trophy-real .pt-hero::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: -1;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 84% 34%,
      rgba(49, 225, 197, .14),
      transparent 27%
    ),
    radial-gradient(
      circle at 92% 25%,
      rgba(255, 210, 67, .08),
      transparent 18%
    );
}


.portal-trophy-real .pt-hero > h1,
.portal-trophy-real .pt-hero > p,
.portal-trophy-real .pt-user,
.portal-trophy-real .pt-stats {
  position: relative;
  z-index: 4;
}


.pt-pokemon-hero {
  position: absolute;

  z-index: 1;

  top: 22px;
  right: 24px;

  width: 410px;
  height: 255px;

  pointer-events: none;
}


.pt-pokemon-hero__orbit i {
  position: absolute;

  border:
    1px solid
    rgba(70, 225, 201, .14);

  border-radius: 50%;
}


.pt-pokemon-hero__orbit i:nth-child(1) {
  width: 235px;
  height: 235px;

  top: 4px;
  right: 35px;
}


.pt-pokemon-hero__orbit i:nth-child(2) {
  width: 174px;
  height: 174px;

  top: 35px;
  right: 66px;

  border-style: dashed;
}


.pt-pokemon-hero__orbit i:nth-child(3) {
  width: 108px;
  height: 108px;

  top: 68px;
  right: 99px;

  border-color:
    rgba(255, 211, 72, .17);
}


.pt-pokemon-hero__mon {
  position: absolute;

  object-fit: contain;

  filter:
    drop-shadow(
      0 18px 24px
      rgba(0,0,0,.44)
    )
    drop-shadow(
      0 0 18px
      rgba(56,224,197,.14)
    );
}


.pt-pokemon-hero__mon--a {
  width: 112px;
  height: 112px;

  left: 8px;
  bottom: 27px;
}


.pt-pokemon-hero__mon--b {
  width: 148px;
  height: 148px;

  right: 178px;
  top: 12px;
}


.pt-pokemon-hero__mon--c {
  width: 190px;
  height: 190px;

  right: 0;
  top: 27px;
}


.pt-pokemon-hero > span {
  position: absolute;

  right: 36px;
  bottom: 1px;

  color:
    rgba(107, 221, 201, .52);

  font-size: .47rem;
  font-weight: 1000;
  letter-spacing: .14em;
}


/* ==========================================================
   TROPHY VAULT CARDS
   ========================================================== */

.portal-trophy-real .pt-card {
  position: relative;

  overflow: hidden;

  min-height: 365px;

  isolation: isolate;
}


.portal-trophy-real .pt-card::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: -1;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(47, 218, 193, .07),
      transparent 35%
    );
}


.portal-trophy-real .pt-card.unlocked {
  border-color:
    rgba(70, 220, 190, .32);
}


.portal-trophy-real .pt-card.claimable {
  border-color:
    rgba(255, 208, 68, .62);

  box-shadow:
    0 0 0 1px
      rgba(255, 206, 65, .07),
    0 0 28px
      rgba(255, 205, 61, .075);
}


.pt-icon.pt-pokemon-icon {
  position: relative;

  overflow: hidden;

  display: grid;
  place-items: center;

  width: 100%;
  height: 150px;

  margin:
    10px 0 14px;

  border:
    1px solid
    rgba(70, 177, 181, .16);

  border-radius: 15px;

  background:
    radial-gradient(
      circle,
      rgba(43, 217, 191, .09),
      rgba(4, 18, 27, .25) 53%,
      rgba(3, 13, 21, .58)
    );
}


.pt-pokemon-art {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;
}


.pt-pokemon-art__orbit {
  position: absolute;

  width: 120px;
  height: 120px;
}


.pt-pokemon-art__orbit i {
  position: absolute;
  inset: 0;

  border:
    1px solid
    rgba(68, 217, 193, .14);

  border-radius: 50%;
}


.pt-pokemon-art__orbit i:nth-child(2) {
  inset: 18px;

  border-style: dashed;
}


.pt-pokemon-art img {
  position: relative;

  z-index: 2;

  width: 116px;
  height: 116px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 10px 14px
      rgba(0,0,0,.4)
    );

  transition:
    transform .18s ease,
    filter .18s ease;
}


.pt-card:hover
.pt-pokemon-art img {
  transform:
    translateY(-3px)
    scale(1.05);
}


.pt-card.locked
.pt-pokemon-art img {
  opacity: .21;

  filter:
    brightness(.06)
    grayscale(1)
    drop-shadow(
      0 9px 12px
      rgba(0,0,0,.35)
    );
}


.pt-pokemon-art small {
  position: absolute;

  z-index: 4;

  left: 8px;
  bottom: 7px;

  padding: 4px 6px;

  border:
    1px solid
    rgba(68, 217, 193, .19);

  border-radius: 999px;

  background:
    rgba(3, 15, 22, .86);

  color: #63dfc5;

  font-size: .44rem;
  font-weight: 1000;
  letter-spacing: .08em;
}


.pt-pokemon-icon__legacy {
  position: absolute;

  z-index: 6;

  top: 8px;
  right: 8px;

  display: grid;
  place-items: center;

  width: 29px;
  height: 29px;

  border:
    1px solid
    rgba(123, 165, 175, .19);

  border-radius: 50%;

  background:
    rgba(4, 16, 23, .86);

  font-size: .9rem;
}


/* ==========================================================
   ELITE FOUR HERO
   ========================================================== */

.bl-hero {
  position: relative;

  overflow: hidden;

  isolation: isolate;
}


.bl-pokemon-hero-art {
  position: absolute;

  z-index: 0;

  top: 24px;
  right: 28px;

  width: 400px;
  height: 250px;

  pointer-events: none;
}


.bl-pokemon-hero-art img {
  position: absolute;

  object-fit: contain;

  filter:
    drop-shadow(
      0 18px 25px
      rgba(0,0,0,.42)
    );
}


.bl-pokemon-hero-art__a {
  width: 130px;
  height: 130px;

  left: 5px;
  bottom: 15px;
}


.bl-pokemon-hero-art__b {
  width: 155px;
  height: 155px;

  left: 118px;
  top: 6px;
}


.bl-pokemon-hero-art__c {
  width: 190px;
  height: 190px;

  right: 0;
  top: 27px;
}


.bl-pokemon-hero-art__ring {
  position: absolute;

  width: 210px;
  height: 210px;

  right: 24px;
  top: 13px;

  border:
    1px solid
    rgba(98, 223, 203, .12);

  border-radius: 50%;
}





/* ==========================================================
   LEAGUE REGION CARDS
   ========================================================== */

.bl-region {
  position: relative;

  overflow: hidden;

  isolation: isolate;
}


.bl-region-pokemon-art {
  position: absolute;

  z-index: 0;

  right: -4px;
  bottom: -18px;

  width: 112px;
  height: 112px;

  object-fit: contain;

  opacity: .15;

  pointer-events: none;

  filter:
    drop-shadow(
      0 8px 15px
      rgba(0,0,0,.4)
    );
}


.bl-region > *:not(
  .bl-region-pokemon-art
) {
  position: relative;
  z-index: 2;
}


/* ==========================================================
   REAL ELITE FOUR TEAMS
   ========================================================== */

.bl-team {
  display: grid;

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

  gap: 8px;

  margin-top: 11px;
}


.bl-team-title {
  margin-top: 20px;
  padding-top: 12px;

  border-top:
    1px solid
    rgba(88, 162, 177, .11);
}


.bl-team-title span::before {
  content: "◉ ";

  color:
    var(
      --boss-accent,
      #62dfc5
    );
}


.bl-pokemon-slot {
  position: relative;

  overflow: hidden;

  min-width: 0;
  min-height: 158px;

  padding:
    9px 7px;

  border:
    1px solid
    rgba(91, 154, 168, .15);

  border-radius: 12px;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(53, 209, 188, .065),
      transparent 48%
    ),
    rgba(4, 15, 22, .72);

  text-align: center;
}


.bl-pokemon-orb {
  position: relative;

  display: grid;
  place-items: center;

  min-height: 96px;
}


.bl-pokemon-orb::before {
  content: "";

  position: absolute;

  width: 84px;
  height: 84px;

  border:
    1px solid
    rgba(81, 204, 191, .11);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(53, 220, 197, .07),
      transparent 68%
    );
}


.bl-pokemon-orb img {
  position: relative;

  z-index: 2;

  width: 90px;
  height: 90px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 9px 11px
      rgba(0,0,0,.4)
    );

  transition:
    transform .18s ease;
}


.bl-pokemon-slot:hover
.bl-pokemon-orb img {
  transform:
    translateY(-3px)
    scale(1.06);
}


.bl-trainer.is-current
.bl-pokemon-slot:first-child {
  border-color:
    var(
      --boss-accent,
      #61e0c5
    );

  background:
    radial-gradient(
      circle at 50% 44%,
      rgba(90, 225, 195, .12),
      rgba(4, 15, 22, .72) 64%
    );

  box-shadow:
    0 0 23px
    rgba(72, 221, 190, .075);
}


.bl-trainer.is-current
.bl-pokemon-slot:first-child::before {
  content: "ACE";

  position: absolute;

  z-index: 5;

  top: 6px;
  left: 6px;

  padding:
    4px 6px;

  border:
    1px solid
    var(
      --boss-accent,
      #61e0c5
    );

  border-radius: 999px;

  background:
    rgba(3, 13, 19, .86);

  color:
    var(
      --boss-accent,
      #61e0c5
    );

  font-size: .4rem;
  font-weight: 1000;
  letter-spacing: .08em;
}


.bl-trainer.is-current
.bl-pokemon-slot:first-child
.bl-pokemon-orb img {
  width: 100px;
  height: 100px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1250px) {

  .portal-trophy-real .pt-hero {
    padding-right: 275px;
  }

  .pt-pokemon-hero {
    right: 5px;

    transform:
      scale(.82);

    transform-origin:
      right top;
  }

  .bl-pokemon-hero-art {
    opacity: .72;

    transform:
      scale(.82);

    transform-origin:
      right top;
  }

  .bl-team {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}


@media (max-width: 820px) {

  .portal-trophy-real .pt-hero {
    padding-right: inherit;
    padding-bottom: 245px;
  }

  .pt-pokemon-hero {
    top: auto;
    right: 50%;
    bottom: 8px;

    transform:
      translateX(50%)
      scale(.8);

    transform-origin:
      center bottom;
  }

  .bl-pokemon-hero-art {
    opacity: .28;
  }

  .bl-team {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 520px) {

  .portal-trophy-real .pt-hero {
    padding-bottom: 205px;
  }

  .pt-pokemon-hero {
    width: 280px;
    height: 200px;

    transform:
      translateX(50%)
      scale(.7);
  }

  .pt-icon.pt-pokemon-icon {
    height: 135px;
  }

  .bl-pokemon-hero-art {
    display: none;
  }

  .bl-pokemon-orb img {
    width: 76px;
    height: 76px;
  }
}


/*
 * ==========================================================
 * BOOM_LEAGUE_HERO_LAYOUT_FIX_V3_1
 *
 * Restore native Premium League positioning.
 * ==========================================================
 */


.bl-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}


/*
 * IMPORTANT:
 * Premium League originally positions this ring absolutely.
 * V3 accidentally placed it inside document flow.
 */

.bl-hero .bl-hero-rings {
  position: absolute !important;

  width: 410px !important;
  height: 410px !important;

  right: -50px !important;
  top: -85px !important;

  z-index: 0 !important;

  opacity: .20;
}


/*
 * Native copy returns to the foreground.
 */

.bl-hero .bl-hero-copy {
  position: relative !important;

  z-index: 4 !important;

  max-width: 760px;
}


/*
 * Keep native League badge above background artwork.
 */

.bl-hero .bl-hero-emblem {
  position: relative;

  z-index: 4;
}


/*
 * Pokémon are now a decorative League squad,
 * not part of the headline.
 */

.bl-pokemon-hero-art {
  position: absolute;

  z-index: 2;

  top: 34px;
  right: 34px;

  width: 325px;
  height: 190px;

  pointer-events: none;
}


.bl-pokemon-hero-art__ring {
  width: 170px;
  height: 170px;

  right: 12px;
  top: 4px;

  opacity: .7;
}


.bl-pokemon-hero-art__a {
  width: 82px !important;
  height: 82px !important;

  left: 5px !important;
  bottom: 18px !important;

  opacity: .86;
}


.bl-pokemon-hero-art__b {
  width: 105px !important;
  height: 105px !important;

  left: 78px !important;
  top: 12px !important;

  opacity: .9;
}


.bl-pokemon-hero-art__c {
  width: 140px !important;
  height: 140px !important;

  right: 0 !important;
  top: 24px !important;

  opacity: .96;
}


.bl-pokemon-hero-art img {
  filter:
    drop-shadow(
      0 13px 18px
      rgba(0,0,0,.44)
    )
    drop-shadow(
      0 0 12px
      rgba(112, 114, 235, .10)
    );
}


/*
 * Regional cards already work.
 * Make their Pokémon visible without dominating.
 */

.bl-region-pokemon-art {
  opacity: .19;
}


.bl-region.is-selected
.bl-region-pokemon-art {
  opacity: .29;

  filter:
    drop-shadow(
      0 8px 15px
      rgba(0,0,0,.42)
    )
    drop-shadow(
      0 0 9px
      var(--region-accent)
    );
}


/*
 * Desktop should keep headline and artwork
 * in separate visual zones.
 */

@media (min-width: 1251px) {

  .bl-hero .bl-hero-copy {
    padding-right: 30px;
  }
}


@media (max-width: 1250px) {

  .bl-pokemon-hero-art {
    width: 270px;
    right: 18px;

    opacity: .72;
  }

  .bl-hero .bl-hero-copy {
    max-width: 680px;
  }
}


@media (max-width: 900px) {

  .bl-pokemon-hero-art {
    opacity: .20;

    right: -25px;
  }

  .bl-hero .bl-hero-copy {
    max-width: none;
  }
}


@media (max-width: 620px) {

  .bl-pokemon-hero-art {
    display: none;
  }
}