/* =========================================================
   BOOM LEAGUE
   CHAMPION GAUNTLET
   ========================================================= */

.boom-league-premium {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(20px,3vw,44px);

  color: #eef6f8;
  font-family: Rajdhani,system-ui,sans-serif;
}


/* =========================================================
   HERO
   ========================================================= */

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

  min-height: 390px;

  padding:
    clamp(30px,5vw,72px);

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

  gap: 40px;
  align-items: center;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--league-accent) 34%,
      #263c48
    );

  border-radius: 28px;

  background:
    linear-gradient(
      125deg,
      rgba(5,17,27,.99),
      rgba(7,20,32,.985) 48%,
      rgba(16,12,30,.985)
    );

  box-shadow:
    0 35px 110px rgba(0,0,0,.36),
    inset 0 1px rgba(255,255,255,.035);
}


.bl-hero::before {
  content: "";

  position: absolute;
  z-index: -2;

  width: 700px;
  height: 700px;

  top: -390px;
  right: -120px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--league-accent) 28%,
        transparent
      ),
      color-mix(
        in srgb,
        var(--league-secondary) 15%,
        transparent
      ) 40%,
      transparent 70%
    );
}


.bl-hero::after {
  content: "";

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

  opacity: .19;

  background-image:
    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    );

  background-size:
    44px 44px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      black 35%,
      black
    );
}


.bl-hero-rings {
  position: absolute;

  width: 410px;
  height: 410px;

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

  opacity: .26;
}


.bl-hero-rings i {
  position: absolute;
  inset: 0;

  border:
    1px solid
    var(--league-accent);

  border-radius: 50%;
}


.bl-hero-rings i:nth-child(2) {
  inset: 55px;

  border-color:
    var(--league-secondary);
}


.bl-hero-rings i:nth-child(3) {
  inset: 115px;

  border-style: dashed;
}


.bl-hero-copy {
  position: relative;
  z-index: 2;

  max-width: 910px;
}


.bl-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding: 7px 11px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--league-accent) 32%,
      transparent
    );

  border-radius: 999px;

  background:
    color-mix(
      in srgb,
      var(--league-accent) 6%,
      transparent
    );

  color:
    var(--league-accent);

  font:
    900 .53rem/1
    Orbitron,sans-serif;

  letter-spacing:
    .12em;
}


.bl-kicker::before {
  content: "";

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--league-accent);

  box-shadow:
    0 0 17px
    var(--league-accent);
}


.bl-hero h1 {
  margin:
    24px 0 14px;

  font:
    1000 clamp(3.8rem,8vw,8.3rem)/.79
    Orbitron,sans-serif;

  letter-spacing:
    -.07em;

  color: #f1f7f8;
}


.bl-hero h1 b {
  display: block;

  color:
    var(--league-accent);

  text-shadow:
    0 0 45px
    color-mix(
      in srgb,
      var(--league-accent) 25%,
      transparent
    );
}


.bl-hero-copy > p {
  max-width: 760px;

  margin: 0;

  color: #8aa0aa;

  font-size:
    clamp(.95rem,1.35vw,1.18rem);

  font-weight: 750;

  line-height: 1.5;
}


.bl-hero-tags {
  margin-top: 25px;

  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}


.bl-hero-tags span {
  padding:
    8px 10px;

  border:
    1px solid #284650;

  border-radius:
    8px;

  background:
    rgba(4,16,22,.72);

  color: #8399a1;

  font:
    900 .44rem/1
    Orbitron,sans-serif;
}


.bl-hero-emblem {
  position: relative;
  z-index: 2;

  width: 220px;
  height: 220px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--league-accent) 52%,
      transparent
    );

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--league-accent) 13%,
        #07131a
      ),
      #051017 68%
    );

  box-shadow:
    0 0 80px
    color-mix(
      in srgb,
      var(--league-accent) 12%,
      transparent
    ),
    inset 0 0 40px
    rgba(255,255,255,.025);
}


.bl-hero-emblem::before,
.bl-hero-emblem::after {
  content: "";

  position: absolute;

  border-radius: 50%;

  border:
    1px dashed
    color-mix(
      in srgb,
      var(--league-accent) 38%,
      transparent
    );
}


.bl-hero-emblem::before {
  inset: 11px;
}


.bl-hero-emblem::after {
  inset: 25px;
}


.bl-hero-emblem > span {
  color: #78909a;

  font:
    900 .45rem
    Orbitron,sans-serif;
}


.bl-hero-emblem > strong {
  margin-top: 5px;

  color:
    var(--league-accent);

  font:
    1000 1.25rem
    Orbitron,sans-serif;
}


.bl-hero-emblem > b {
  margin: 6px 0;

  color: #ffd458;

  font-size: 3rem;

  line-height: 1;
}


.bl-hero-emblem > small {
  color: #758a93;

  font:
    900 .4rem
    Orbitron,sans-serif;

  text-align: center;
}


/* =========================================================
   REGION SELECTOR
   ========================================================= */

.bl-regions {
  margin:
    14px 0;

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

  gap: 8px;
}


.bl-region {
  position: relative;
  overflow: hidden;

  min-height: 112px;

  padding:
    14px;

  display: grid;
  grid-template-columns:
    46px 1fr;

  gap: 11px;

  align-items: center;

  border:
    1px solid #213d48;

  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      #081821,
      #051117
    );

  color: #e3edef;

  text-align: left;

  cursor: pointer;
}


.bl-region::before {
  content: "";

  position: absolute;

  inset:
    auto 0 0 0;

  height: 2px;

  opacity: .23;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--region-accent),
      transparent
    );
}


.bl-region:hover,
.bl-region.is-selected {
  border-color:
    color-mix(
      in srgb,
      var(--region-accent) 65%,
      #28434e
    );
}


.bl-region.is-selected {
  background:
    radial-gradient(
      circle at 10% 50%,
      color-mix(
        in srgb,
        var(--region-accent) 11%,
        transparent
      ),
      transparent 50%
    ),
    linear-gradient(
      145deg,
      #091b24,
      #061219
    );

  box-shadow:
    inset 0 -3px
    var(--region-accent);
}


.bl-region-number {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--region-accent) 42%,
      #213d48
    );

  border-radius:
    50%;

  color:
    var(--region-accent);

  font:
    1000 .65rem
    Orbitron,sans-serif;
}


.bl-region span {
  display: block;

  color: #687f89;

  font:
    900 .4rem
    Orbitron,sans-serif;
}


.bl-region strong {
  display: block;

  margin-top: 4px;

  color:
    var(--region-accent);

  font:
    1000 .86rem
    Orbitron,sans-serif;
}


.bl-region small {
  display: block;

  margin-top: 6px;

  color: #81949c;

  font-size: .62rem;

  font-weight: 800;
}


/* =========================================================
   LEAGUE COMMAND
   ========================================================= */

.bl-command {
  padding:
    clamp(17px,2.5vw,30px);

  border:
    1px solid #203e49;

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 92% 0%,
      color-mix(
        in srgb,
        var(--league-accent) 8%,
        transparent
      ),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #071720,
      #050e14
    );

  box-shadow:
    0 25px 70px rgba(0,0,0,.22);
}


.bl-command-head {
  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap: 20px;
}


.bl-command-head > div:first-child > span {
  color:
    var(--league-accent);

  font:
    900 .51rem
    Orbitron,sans-serif;

  letter-spacing: .1em;
}


.bl-command-head h2 {
  margin:
    8px 0 7px;

  color: #edf5f7;

  font:
    1000 clamp(1.7rem,3vw,3.1rem)
    Orbitron,sans-serif;

  letter-spacing: -.035em;
}


.bl-command-head h2 b {
  color:
    var(--league-accent);
}


.bl-command-head p {
  max-width: 780px;

  margin: 0;

  color: #80959e;

  font-weight: 700;
}


.bl-command-status {
  min-width: 220px;

  padding:
    13px 14px;

  border:
    1px solid #274753;

  border-radius: 11px;

  background: #05151c;
}


.bl-command-status small {
  color: #677f89;

  font:
    900 .39rem
    Orbitron,sans-serif;
}


.bl-command-status strong {
  display: block;

  margin-top: 7px;

  color:
    var(--league-accent);

  font:
    1000 .63rem
    Orbitron,sans-serif;
}


.bl-command-status > span {
  display: block;

  margin-top: 7px;

  color: #81949d;

  font-size: .68rem;

  font-weight: 800;
}


/* =========================================================
   GAUNTLET PATH
   ========================================================= */

.bl-path {
  margin:
    23px 0 28px;

  padding:
    13px 15px;

  display: flex;
  align-items: center;

  overflow-x: auto;

  border:
    1px solid #1b3741;

  border-radius: 12px;

  background:
    rgba(4,15,21,.72);
}


.bl-path-step {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  gap: 7px;
}


.bl-path-step > span {
  width: 29px;
  height: 29px;

  display: grid;
  place-items: center;

  border:
    1px solid #294650;

  border-radius: 50%;

  background: #06151b;

  color: #71868e;

  font:
    900 .46rem
    Orbitron,sans-serif;
}


.bl-path-step > small {
  color: #6e838c;

  font:
    900 .42rem
    Orbitron,sans-serif;

  white-space: nowrap;
}


.bl-path-step.is-current > span {
  border-color:
    var(--league-accent);

  color:
    #061015;

  background:
    var(--league-accent);

  box-shadow:
    0 0 20px
    color-mix(
      in srgb,
      var(--league-accent) 32%,
      transparent
    );
}


.bl-path-step.is-current > small {
  color:
    var(--league-accent);
}


.bl-path-step.is-cleared > span {
  border-color:
    #4fdba6;

  color:
    #4fdba6;
}


.bl-path-line {
  flex:
    1 0 35px;

  min-width: 35px;
  max-width: 90px;

  height: 1px;

  margin: 0 9px;

  background:
    linear-gradient(
      90deg,
      #1c3943,
      #345560,
      #1c3943
    );
}


/* =========================================================
   TRAINER ROSTER
   ========================================================= */

.bl-roster {
  display: grid;
  gap: 13px;
}


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

  min-height: 275px;

  padding:
    17px;

  border:
    1px solid #203c47;

  border-radius: 16px;

  background:
    linear-gradient(
      120deg,
      #081923,
      #061119 56%,
      #07131b
    );

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


.bl-trainer:hover {
  transform:
    translateY(-2px);
}


.bl-trainer.is-current {
  border-color:
    var(--boss-accent);

  box-shadow:
    inset 4px 0
    var(--boss-accent),
    0 15px 45px
    color-mix(
      in srgb,
      var(--boss-accent) 8%,
      transparent
    );
}


.bl-trainer.is-cleared {
  border-color:
    rgba(77,218,165,.37);
}


.bl-trainer.is-locked {
  opacity: .67;
}


.bl-trainer-glow {
  position: absolute;
  z-index: -1;

  width: 430px;
  height: 260px;

  left: -130px;
  top: -120px;

  background:
    radial-gradient(
      ellipse,
      color-mix(
        in srgb,
        var(--boss-accent) 12%,
        transparent
      ),
      transparent 68%
    );
}


.bl-trainer-head {
  display: grid;

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

  gap: 12px;

  align-items: center;
}


.bl-boss-number {
  width: 51px;
  height: 51px;

  display: grid;
  place-items: center;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--boss-accent) 50%,
      #25424d
    );

  border-radius: 12px;

  background:
    #06151c;
}


.bl-boss-number span {
  color:
    var(--boss-accent);

  font:
    1000 .7rem
    Orbitron,sans-serif;
}


.bl-trainer-name small {
  color:
    var(--boss-accent);

  font:
    900 .42rem
    Orbitron,sans-serif;

  letter-spacing: .08em;
}


.bl-trainer-name h3 {
  margin: 4px 0;

  color: #edf4f6;

  font:
    1000 1.12rem
    Orbitron,sans-serif;
}


.bl-trainer-name p {
  margin: 0;

  color: #778c95;

  font-size: .69rem;

  font-weight: 750;
}


.bl-trainer-state {
  padding:
    7px 9px;

  border:
    1px solid #27434d;

  border-radius: 999px;

  color: #748990;

  font:
    900 .38rem
    Orbitron,sans-serif;
}


.bl-trainer-state.is-current {
  border-color:
    var(--boss-accent);

  color:
    var(--boss-accent);

  box-shadow:
    0 0 16px
    color-mix(
      in srgb,
      var(--boss-accent) 14%,
      transparent
    );
}


.bl-trainer-state.is-cleared {
  border-color:
    rgba(75,221,167,.35);

  color:
    #5ce1ad;
}


/* =========================================================
   TEAM
   ========================================================= */

.bl-team-title {
  margin-top: 18px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}


.bl-team-title span {
  color: #6f858e;

  font:
    900 .4rem
    Orbitron,sans-serif;

  letter-spacing: .08em;
}


.bl-team-title b {
  color:
    var(--boss-accent);

  font:
    900 .4rem
    Orbitron,sans-serif;
}


.bl-team {
  margin-top: 8px;

  display: grid;

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

  gap: 7px;
}


.bl-pokemon-slot {
  min-width: 0;

  padding:
    9px 6px 8px;

  display: flex;
  flex-direction: column;
  align-items: center;

  border:
    1px solid #1c3741;

  border-radius: 10px;

  background:
    linear-gradient(
      145deg,
      #06151c,
      #041016
    );

  text-align: center;
}


.bl-pokemon-orb {
  width:
    clamp(58px,5.6vw,82px);

  height:
    clamp(58px,5.6vw,82px);

  display: grid;
  place-items: center;

  position: relative;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--boss-accent) 12%,
        #08161c
      ),
      #041015 69%
    );
}


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

  position: absolute;

  inset: 5px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--boss-accent) 19%,
      transparent
    );

  border-radius: 50%;
}


.bl-pokemon-orb img {
  position: relative;
  z-index: 2;

  width: 86%;
  height: 86%;

  object-fit: contain;

  filter:
    drop-shadow(
      0 9px 10px
      rgba(0,0,0,.48)
    );
}


.bl-pokemon-orb span {
  color:
    var(--boss-accent);

  font:
    1000 1rem
    Orbitron,sans-serif;
}


.bl-pokemon-slot > strong {
  max-width: 100%;

  margin-top: 7px;

  overflow: hidden;

  color: #dce7ea;

  font:
    900 .48rem
    Orbitron,sans-serif;

  white-space: nowrap;
  text-overflow: ellipsis;
}


.bl-pokemon-slot > small {
  margin-top: 4px;

  color:
    var(--boss-accent);

  font:
    900 .43rem
    Orbitron,sans-serif;
}


.bl-pokemon-slot.is-unknown,
.bl-pokemon-slot.is-sealed {
  opacity: .46;
}


.bl-pokemon-slot.is-sealed
.bl-pokemon-orb {
  filter: grayscale(1);
}


/* =========================================================
   TRAINER FOOTER
   ========================================================= */

.bl-trainer-footer {
  margin-top: 14px;
  padding-top: 11px;

  display: grid;
  grid-template-columns:
    repeat(3,1fr);

  gap: 7px;

  border-top:
    1px solid #183039;
}


.bl-trainer-footer > div {
  display: grid;
  gap: 4px;
}


.bl-trainer-footer span {
  color: #607780;

  font:
    900 .35rem
    Orbitron,sans-serif;
}


.bl-trainer-footer b {
  color: #97aab1;

  font:
    900 .42rem
    Orbitron,sans-serif;
}


/* =========================================================
   RESULT
   ========================================================= */

.bl-result {
  margin:
    0 0 16px;

  padding:
    13px 15px;

  border:
    1px solid #31505c;

  border-radius: 11px;

  background:
    #061820;
}


.bl-result > span {
  display: block;

  color: #718992;

  font:
    900 .4rem
    Orbitron,sans-serif;
}


.bl-result > strong {
  display: block;

  margin-top: 5px;

  color: #dfecef;

  font-size: .8rem;
}


.bl-result.is-win {
  border-color:
    rgba(74,220,165,.38);
}


.bl-result.is-win > strong {
  color: #58dfac;
}


.bl-result.is-champion {
  border-color:
    rgba(255,205,69,.52);

  background:
    linear-gradient(
      90deg,
      rgba(110,78,11,.16),
      #061820
    );
}


.bl-result.is-champion > strong {
  color: #ffd65a;
}


.bl-result.is-lose {
  border-color:
    rgba(255,91,104,.38);
}


.bl-result.is-lose > strong {
  color: #ff7a87;
}


/* =========================================================
   FINAL CONTROL
   ========================================================= */

.bl-final-control {
  margin-top: 18px;

  padding:
    18px;

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

  gap: 20px;

  align-items: center;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--league-accent) 28%,
      #213d47
    );

  border-radius: 15px;

  background:
    radial-gradient(
      circle at 92% 50%,
      color-mix(
        in srgb,
        var(--league-accent) 10%,
        transparent
      ),
      transparent 40%
    ),
    #06151c;
}


.bl-final-control > div:first-child > span {
  color:
    var(--league-accent);

  font:
    900 .42rem
    Orbitron,sans-serif;
}


.bl-final-control h3 {
  margin:
    6px 0;

  font:
    1000 .85rem
    Orbitron,sans-serif;
}


.bl-final-control p {
  max-width: 760px;

  margin: 0;

  color: #778d96;

  font-weight: 700;
}


.bl-control-actions {
  min-width: 275px;

  display: flex;
  flex-direction: column;
  gap: 7px;
}


.bl-main-action,
.bl-secondary-action {
  min-height: 46px;

  padding:
    0 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--league-accent) 60%,
      #294953
    );

  border-radius: 9px;

  text-decoration: none;

  font:
    1000 .48rem
    Orbitron,sans-serif;

  letter-spacing: .04em;
}


.bl-main-action {
  background:
    linear-gradient(
      100deg,
      var(--league-accent),
      var(--league-secondary)
    );

  color: #041016;

  cursor: pointer;

  box-shadow:
    0 10px 30px
    color-mix(
      in srgb,
      var(--league-accent) 14%,
      transparent
    );
}


.bl-main-action.is-battle {
  min-height: 52px;

  font-size: .53rem;
}


.bl-main-action:disabled {
  opacity: .43;

  cursor: default;

  filter: grayscale(.55);
}


.bl-secondary-action {
  background: #06151d;

  color:
    var(--league-accent);
}


.bl-action-note {
  color: #758a93;

  font-size: .65rem;

  font-weight: 700;

  text-align: center;
}


/* =========================================================
   LOADING
   ========================================================= */

.bl-loading {
  min-height: 520px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  color: #6bdde9;
}


.bl-loading span {
  font:
    900 .5rem
    Orbitron,sans-serif;

  letter-spacing: .14em;
}


.bl-loading strong {
  margin-top: 10px;

  color: #d9e7ea;

  font:
    1000 .75rem
    Orbitron,sans-serif;
}


.bl-loading i {
  width: 180px;
  height: 2px;

  margin-top: 20px;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      transparent,
      #5fddea,
      transparent
    );
}


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

@media(max-width:1100px) {

  .bl-hero {
    grid-template-columns: 1fr;
  }

  .bl-hero-emblem {
    position: absolute;

    width: 180px;
    height: 180px;

    right: 24px;
    top: 24px;

    opacity: .38;
  }

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

}


@media(max-width:850px) {

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

  .bl-command-head {
    grid-template-columns: 1fr;
  }

  .bl-command-status {
    min-width: 0;
  }

  .bl-final-control {
    grid-template-columns: 1fr;
  }

  .bl-control-actions {
    min-width: 0;
  }

}


@media(max-width:600px) {

  .boom-league-premium {
    padding: 13px;
  }

  .bl-hero {
    min-height: 340px;

    padding: 25px 18px;
  }

  .bl-hero h1 {
    font-size:
      clamp(3rem,16vw,5rem);
  }

  .bl-hero-emblem {
    display: none;
  }

  .bl-regions {
    grid-template-columns: 1fr 1fr;
  }

  .bl-region {
    min-height: 94px;

    grid-template-columns: 35px 1fr;
  }

  .bl-region-number {
    width: 34px;
    height: 34px;
  }

  .bl-trainer-head {
    grid-template-columns:
      45px minmax(0,1fr);
  }

  .bl-trainer-state {
    grid-column: 1/-1;

    width: fit-content;
  }

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

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

  .bl-trainer-footer {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   BOOM_KANTO_LEAGUE_VISUAL_BATTLE_STYLE_V1
   ========================================================= */

body.boom-league-battle-open {
  overflow: hidden;
}


.blvb-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;

  display: grid;
  place-items: center;

  padding: 22px;

  background:
    rgba(2,8,13,.94);

  backdrop-filter:
    blur(14px);
}


.blvb-shell {
  width: min(1120px,96vw);

  max-height: 94dvh;

  overflow-y: auto;

  border:
    1px solid
    rgba(80,220,239,.42);

  border-radius: 20px;

  background:
    linear-gradient(
      180deg,
      #07151d,
      #030a0f
    );

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.7);
}


.blvb-header {
  padding: 18px 22px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

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


.blvb-header small {
  display: block;

  margin-bottom: 5px;

  color: #718793;

  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .14em;
}


.blvb-header strong {
  color: #f5fbff;

  font-size:
    clamp(
      .9rem,
      2vw,
      1.35rem
    );
}


.blvb-header strong i {
  padding: 0 10px;

  color: #50dcef;

  font-style: normal;
}


.blvb-speed {
  display: flex;
  gap: 8px;
}


.blvb-speed button {
  min-height: 34px;

  padding: 0 12px;

  border:
    1px solid
    rgba(80,220,239,.3);

  border-radius: 8px;

  background: #071b24;

  color: #83eaf8;

  cursor: pointer;

  font-size: .54rem;
  font-weight: 950;
}


.blvb-speed button:disabled {
  opacity: .35;
}


.blvb-arena {
  min-height: 430px;

  padding: 30px;

  display: grid;

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

  align-items: center;

  gap: 18px;

  background:
    radial-gradient(
      circle at 50% 100%,
      rgba(80,220,239,.12),
      transparent 48%
    );
}


.blvb-side {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 12px;
}


.blvb-owner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  padding: 0 4px;
}


.blvb-owner span {
  color: white;

  font-size: .68rem;
  font-weight: 950;
}


.blvb-owner small {
  color: #657d88;

  font-size: .5rem;
  font-weight: 900;
}


.blvb-pokemon {
  min-height: 310px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius: 16px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.02),
      rgba(255,255,255,.045)
    );

  overflow: hidden;
}


.blvb-sprite-wrap {
  flex: 1;

  min-height: 210px;

  display: grid;
  place-items: center;

  padding: 18px;
}


.blvb-sprite-wrap img {
  width: min(230px,80%);
  height: 210px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 18px 22px
      rgba(0,0,0,.6)
    );
}


.blvb-side.is-player
.blvb-sprite-wrap img {
  transform: scaleX(-1);
}


.blvb-mon-info {
  padding:
    12px 14px 15px;

  background:
    rgba(1,7,11,.84);
}


.blvb-mon-info > div:first-child {
  display: flex;
  justify-content: space-between;

  gap: 12px;
}


.blvb-mon-info strong {
  color: white;

  font-size: .72rem;
}


.blvb-mon-info small {
  color: #7f98a3;

  font-size: .56rem;
  font-weight: 900;
}


.blvb-hp {
  margin-top: 8px;
}


.blvb-hp > div {
  height: 8px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.08);

  overflow: hidden;
}


.blvb-hp i {
  display: block;

  width: 100%;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #55e59c,
      #7affc5
    );

  transition:
    width .28s ease,
    background .2s ease;
}


.blvb-hp i.is-mid {
  background:
    linear-gradient(
      90deg,
      #f4c44e,
      #ffe77a
    );
}


.blvb-hp i.is-low {
  background:
    linear-gradient(
      90deg,
      #ff5d65,
      #ff8d62
    );
}


.blvb-hp span {
  display: block;

  margin-top: 5px;

  color: #8298a3;

  text-align: right;

  font-size: .49rem;
  font-weight: 900;
}


.blvb-team {
  display: flex;
  justify-content: center;

  gap: 8px;
}


.blvb-team-dot {
  width: 12px;
  height: 12px;

  border:
    2px solid
    rgba(255,255,255,.2);

  border-radius: 50%;

  background: #34cfa0;
}


.blvb-team-dot.is-active {
  transform: scale(1.35);

  border-color: white;

  box-shadow:
    0 0 12px
    rgba(80,220,239,.65);
}


.blvb-team-dot.is-fainted {
  opacity: .22;

  background: #4c5660;

  box-shadow: none;
}


.blvb-center {
  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}


.blvb-turn {
  color: #597580;

  font-size: .52rem;
  font-weight: 950;
  letter-spacing: .16em;
}


.blvb-turn b {
  color: white;
}


.blvb-call {
  margin-top: 17px;

  color: white;

  font-size:
    clamp(
      .72rem,
      1.4vw,
      1rem
    );

  line-height: 1.5;
}


.blvb-effect {
  margin-top: 9px;

  color: #50dcef;

  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .08em;
}


.blvb-log {
  margin:
    0 30px 30px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius: 12px;

  overflow: hidden;
}


.blvb-log-head {
  padding: 9px 12px;

  display: flex;
  justify-content: space-between;

  background:
    rgba(255,255,255,.035);
}


.blvb-log-head span,
.blvb-log-head small {
  color: #647d88;

  font-size: .49rem;
  font-weight: 950;
  letter-spacing: .1em;
}


.blvb-log-lines {
  height: 122px;

  overflow-y: auto;

  padding: 9px 12px;
}


.blvb-log-row {
  padding: 4px 0;

  color: #8fa5ae;

  font-size: .6rem;
  line-height: 1.4;
}


.blvb-log-row.is-player {
  color: #78e8f6;
}


.blvb-log-row.is-enemy {
  color: #ff9eaa;
}


.blvb-log-row.is-faint {
  color: #ffd17b;

  font-weight: 900;
}


.blvb-result {
  margin:
    0 30px 30px;

  padding: 25px;

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

  border-radius: 14px;

  text-align: center;

  background:
    rgba(255,255,255,.035);
}


.blvb-result strong {
  display: block;

  margin-top: 8px;

  color: white;

  font-size:
    clamp(
      1.3rem,
      4vw,
      2.2rem
    );
}


.blvb-result p {
  margin:
    10px auto 18px;

  max-width: 620px;

  color: #91a7b1;

  font-size: .7rem;
  line-height: 1.6;
}


.blvb-result button {
  min-height: 46px;

  padding: 0 22px;

  border:
    1px solid
    rgba(80,220,239,.5);

  border-radius: 9px;

  background:
    rgba(80,220,239,.12);

  color: #80ebf8;

  cursor: pointer;

  font-size: .62rem;
  font-weight: 950;
}


.blvb-overlay.is-victory
.blvb-result {
  border-color:
    rgba(83,234,172,.4);
}


.blvb-overlay.is-defeat
.blvb-result {
  border-color:
    rgba(255,91,103,.42);
}


.blvb-pokemon.is-attacking
.blvb-sprite-wrap img {
  animation:
    blvbAttack .28s ease;
}


.blvb-pokemon.is-hit
.blvb-sprite-wrap img {
  animation:
    blvbHit .3s ease;
}


.blvb-side.is-player
.blvb-pokemon.is-attacking
.blvb-sprite-wrap img {
  animation:
    blvbPlayerAttack .28s ease;
}


.blvb-side.is-player
.blvb-pokemon.is-hit
.blvb-sprite-wrap img {
  animation:
    blvbPlayerHit .3s ease;
}


@keyframes blvbAttack {
  50% {
    transform:
      translateX(24px)
      scale(1.05);
  }
}


@keyframes blvbHit {
  20%,
  60% {
    opacity: .3;

    transform:
      translateX(-10px);
  }
}


@keyframes blvbPlayerAttack {
  50% {
    transform:
      scaleX(-1)
      translateX(-24px)
      scale(1.05);
  }
}


@keyframes blvbPlayerHit {
  20%,
  60% {
    opacity: .3;

    transform:
      scaleX(-1)
      translateX(10px);
  }
}


@media (max-width:820px) {

  .blvb-overlay {
    padding: 8px;
  }


  .blvb-header {
    align-items: flex-start;
    flex-direction: column;
  }


  .blvb-arena {
    min-height: 0;

    padding: 18px;

    grid-template-columns:
      1fr 64px 1fr;

    gap: 8px;
  }


  .blvb-pokemon {
    min-height: 220px;
  }


  .blvb-sprite-wrap {
    min-height: 145px;

    padding: 8px;
  }


  .blvb-sprite-wrap img {
    width: 100%;
    height: 140px;
  }


  .blvb-call {
    font-size: .52rem;
  }


  .blvb-effect {
    font-size: .43rem;
  }


  .blvb-owner small {
    display: none;
  }

}


@media (max-width:520px) {

  .blvb-arena {
    grid-template-columns:
      1fr 46px 1fr;

    padding: 10px;
  }


  .blvb-pokemon {
    min-height: 180px;
  }


  .blvb-sprite-wrap {
    min-height: 110px;
  }


  .blvb-sprite-wrap img {
    height: 105px;
  }


  .blvb-mon-info {
    padding: 8px;
  }


  .blvb-team {
    gap: 4px;
  }


  .blvb-team-dot {
    width: 8px;
    height: 8px;
  }


  .blvb-speed {
    width: 100%;
  }


  .blvb-speed button {
    flex: 1;
  }

}

/* BOOM_KANTO_LEAGUE_VISUAL_BATTLE_STYLE_V1 */