/* BOOM BATTLE TOWER V1 */

.tower-shell {
  --tower-accent: #63e6ff;
  --tower-secondary: #8b6cff;
  --tower-danger: #ff5f78;
  --tower-success: #5ff0a5;

  width: min(1580px, 100%);
  margin: 0 auto;
  padding: 1.1rem 1.1rem 3rem;

  color:
    var(
      --text-primary,
      #eef7ff
    );
}

.tower-region--johto {
  --tower-accent: #ff6bcf;
  --tower-secondary: #9b6cff;
}

.tower-region--hoenn {
  --tower-accent: #50e6b1;
  --tower-secondary: #3ba8ff;
}

.tower-region--champion {
  --tower-accent: #ffd86b;
  --tower-secondary: #ff6b8e;
}


.tower-hero,
.tower-panel,
.tower-zone,
.tower-next-floor,
.tower-notice {
  border:
    1px solid
    color-mix(
      in srgb,
      var(--tower-accent) 22%,
      rgba(255,255,255,.08)
    );

  background:
    linear-gradient(
      145deg,
      rgba(11,22,33,.94),
      rgba(5,10,18,.96)
    );

  box-shadow:
    0 20px 60px
    rgba(0,0,0,.2);
}


.tower-hero {
  min-height: 330px;

  display: grid;

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

  gap: 2rem;

  align-items: center;

  position: relative;

  overflow: hidden;

  padding:
    clamp(
      1.4rem,
      3vw,
      3rem
    );

  border-radius: 28px;
}


.tower-hero::before {
  content: '';

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 78% 35%,
      color-mix(
        in srgb,
        var(--tower-accent) 20%,
        transparent
      ),
      transparent 31%
    ),
    linear-gradient(
      90deg,
      color-mix(
        in srgb,
        var(--tower-secondary) 6%,
        transparent
      ),
      transparent 55%
    );
}


.tower-hero__copy,
.tower-hero__spire {
  position: relative;

  z-index: 1;
}


.tower-kicker,
.tower-section-head span,
.tower-battle__head span,
.tower-side__label,
.tower-zone__head > span,
.tower-ready > div > span,
.tower-next-floor span {
  display: block;

  color:
    var(--tower-accent);

  font-size: .72rem;

  font-weight: 900;

  letter-spacing: .16em;

  text-transform: uppercase;
}


.tower-hero h1 {
  margin:
    .45rem 0 .8rem;

  font-size:
    clamp(
      3rem,
      7vw,
      6.8rem
    );

  line-height: .86;

  letter-spacing: -.065em;

  font-weight: 950;
}


.tower-hero h1 b {
  color:
    var(--tower-accent);

  font-weight: inherit;

  text-shadow:
    0 0 32px
    color-mix(
      in srgb,
      var(--tower-accent) 30%,
      transparent
    );
}


.tower-hero p {
  max-width: 760px;

  margin: 0;

  color:
    var(
      --text-muted,
      #a9bac8
    );

  font-size:
    clamp(
      .94rem,
      1.7vw,
      1.08rem
    );

  line-height: 1.7;
}


.tower-hero__stats {
  display: flex;

  flex-wrap: wrap;

  gap: .65rem;

  margin-top: 1.5rem;
}


.tower-hero__stats > div {
  min-width: 120px;

  padding:
    .85rem 1rem;

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

  border-radius: 15px;

  background:
    rgba(0,0,0,.18);
}


.tower-hero__stats small {
  display: block;

  color:
    var(
      --text-muted,
      #95a7b8
    );

  font-size: .62rem;

  font-weight: 800;

  letter-spacing: .13em;
}


.tower-hero__stats strong {
  display: block;

  margin-top: .2rem;

  font-size: 1.55rem;
}


.tower-hero__spire {
  width:
    min(
      260px,
      75vw
    );

  height: 250px;

  justify-self: center;

  display: grid;

  place-items: center;

  clip-path:
    polygon(
      42% 0,
      58% 0,
      64% 13%,
      72% 13%,
      84% 100%,
      16% 100%,
      28% 13%,
      36% 13%
    );

  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--tower-accent) 70%,
        white
      ),
      var(--tower-secondary) 72%,
      #101725
    );

  box-shadow:
    0 0 70px
    color-mix(
      in srgb,
      var(--tower-accent) 25%,
      transparent
    );
}


.tower-hero__spire::before {
  content: '';

  position: absolute;

  width: 82%;

  height: 90%;

  clip-path: inherit;

  background:
    linear-gradient(
      180deg,
      rgba(2,8,15,.65),
      rgba(2,7,13,.92)
    );
}


.tower-hero__spire strong,
.tower-hero__spire span {
  position: absolute;

  z-index: 2;
}


.tower-hero__spire strong {
  font-size: 4.7rem;

  line-height: 1;
}


.tower-hero__spire span {
  margin-top: 6rem;

  color:
    var(--tower-accent);

  font-size: .7rem;

  font-weight: 900;

  letter-spacing: .25em;
}


.tower-hero__spire i {
  position: absolute;

  z-index: 2;

  width: 60%;

  height: 1px;

  background:
    color-mix(
      in srgb,
      var(--tower-accent) 40%,
      transparent
    );
}


.tower-hero__spire i:nth-child(1) {
  transform:
    translateY(-70px);
}

.tower-hero__spire i:nth-child(2) {
  transform:
    translateY(0);
}

.tower-hero__spire i:nth-child(3) {
  transform:
    translateY(70px);
}


.tower-notice {
  margin:
    .9rem 0;

  padding:
    .85rem 1rem;

  border-radius: 13px;

  font-weight: 800;
}


.tower-notice.is-success {
  border-color:
    color-mix(
      in srgb,
      var(--tower-success) 42%,
      transparent
    );
}


.tower-notice.is-error {
  border-color:
    color-mix(
      in srgb,
      var(--tower-danger) 50%,
      transparent
    );
}


.tower-zones {
  display: grid;

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

  gap: .75rem;

  margin:
    .9rem 0;
}


.tower-zone {
  min-width: 0;

  padding: 1rem;

  border-radius: 18px;

  overflow: hidden;
}


.tower-zone--kanto {
  --zone: #63e6ff;
}

.tower-zone--johto {
  --zone: #ff6bcf;
}

.tower-zone--hoenn {
  --zone: #50e6b1;
}

.tower-zone--champion {
  --zone: #ffd86b;
}


.tower-zone.is-locked {
  opacity: .48;

  filter:
    saturate(.45);
}


.tower-zone__head strong {
  display: block;

  margin:
    .2rem 0;

  font-size: 1.05rem;
}


.tower-zone__head > span {
  color:
    var(--zone);
}


.tower-zone__head small {
  color:
    var(
      --text-muted,
      #9dafbd
    );
}


.tower-zone__track,
.tower-hp {
  height: 7px;

  overflow: hidden;

  border-radius: 999px;

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


.tower-zone__track {
  margin:
    .9rem 0 .65rem;
}


.tower-zone__track i {
  display: block;

  height: 100%;

  background:
    var(--zone);
}


.tower-zone__foot {
  display: grid;

  gap: .25rem;

  font-size: .68rem;
}


.tower-zone__foot span {
  color:
    var(
      --text-muted,
      #98aaba
    );
}


.tower-zone__foot b {
  color:
    var(--zone);
}


.tower-layout {
  display: grid;

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

  gap: .9rem;

  align-items: start;
}


.tower-main {
  min-width: 0;
}


.tower-panel {
  border-radius: 22px;

  padding: 1.15rem;
}


.tower-section-head,
.tower-battle__head,
.tower-log header,
.tower-next-floor {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 1rem;
}


.tower-section-head {
  margin-bottom: 1rem;
}


.tower-section-head h2,
.tower-battle__head h2,
.tower-ready h2 {
  margin:
    .12rem 0 0;

  font-size:
    clamp(
      1.5rem,
      3vw,
      2.5rem
    );

  letter-spacing: -.04em;
}


.tower-section-head > strong {
  font-size: 1.25rem;

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


.tower-section-head > small {
  color:
    var(
      --text-muted,
      #91a4b5
    );

  font-weight: 800;
}


.tower-rewards {
  margin-bottom: .9rem;
}


.tower-reward-grid {
  display: grid;

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

  gap: .6rem;
}


.tower-reward {
  min-height: 110px;

  display: grid;

  align-content:
    space-between;

  gap: .45rem;

  padding: .85rem;

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

  border-radius: 14px;

  background:
    rgba(0,0,0,.16);
}


.tower-reward > span {
  color:
    var(--tower-accent);

  font-size: .65rem;

  font-weight: 900;
}


.tower-reward > strong {
  font-size: .8rem;
}


.tower-reward.is-claimed {
  opacity: .55;
}


.tower-reward button {
  justify-self: start;
}


.tower-selected-strip,
.tower-run-team,
.tower-bench {
  display: grid;

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

  gap: .65rem;
}


.tower-selected-strip {
  min-height: 105px;

  margin-bottom: .8rem;
}


.tower-selected-strip > p {
  color:
    var(
      --text-muted,
      #99adbd
    );
}


.tower-team-toolbar {
  display: grid;

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

  gap: .6rem;

  margin-bottom: .8rem;
}


.tower-team-toolbar input {
  min-height: 48px;

  width: 100%;

  padding:
    0 .9rem;

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

  border-radius: 13px;

  color: inherit;

  background:
    rgba(0,0,0,.22);

  outline: none;
}


.tower-team-toolbar input:focus {
  border-color:
    var(--tower-accent);
}


.tower-primary,
.tower-reward button {
  min-height: 46px;

  padding:
    0 1.15rem;

  border: 0;

  border-radius: 12px;

  color: #041018;

  background:
    var(--tower-accent);

  font: inherit;

  font-size: .74rem;

  font-weight: 950;

  letter-spacing: .08em;

  text-decoration: none;

  cursor: pointer;
}


.tower-primary:disabled,
.tower-reward button:disabled,
.tower-pick:disabled,
.tower-switch-card:disabled,
.tower-attack:disabled {
  opacity: .4;

  cursor: not-allowed;
}


.tower-roster {
  display: grid;

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

  gap: .55rem;

  max-height: 560px;

  overflow: auto;

  padding-right: .25rem;
}


.tower-pick {
  min-width: 0;

  min-height: 86px;

  display: grid;

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

  gap: .55rem;

  align-items: center;

  padding: .55rem;

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

  border-radius: 14px;

  color: inherit;

  text-align: left;

  background:
    rgba(0,0,0,.16);

  cursor: pointer;
}


.tower-pick:hover,
.tower-pick.is-selected {
  border-color:
    var(--tower-accent);

  background:
    color-mix(
      in srgb,
      var(--tower-accent) 8%,
      rgba(0,0,0,.2)
    );
}


.tower-pick img {
  width: 62px;

  height: 62px;

  object-fit: contain;
}


.tower-pick span {
  min-width: 0;
}


.tower-pick strong {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: .78rem;
}


.tower-pick small {
  color:
    var(
      --text-muted,
      #93a6b7
    );
}


.tower-pick i {
  font-style: normal;

  color:
    var(--tower-accent);

  font-size: 1.2rem;
}


.tower-mon {
  min-width: 0;

  display: grid;

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

  align-items: center;

  gap: .65rem;

  padding: .65rem;

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

  border-radius: 15px;

  background:
    rgba(0,0,0,.18);
}


.tower-mon.is-active {
  border-color:
    color-mix(
      in srgb,
      var(--tower-accent) 48%,
      transparent
    );
}


.tower-mon.is-fainted {
  opacity: .35;

  filter:
    grayscale(1);
}


.tower-mon__sprite {
  position: relative;

  display: grid;

  place-items: center;
}


.tower-mon__sprite img {
  width: 80px;

  height: 80px;

  object-fit: contain;
}


.tower-shiny {
  position: absolute;

  right: -3px;

  bottom: 0;

  padding:
    .18rem .3rem;

  border-radius: 6px;

  background: #ffd86b;

  color: #1d1500;

  font-size: .48rem;

  font-weight: 950;
}


.tower-mon__copy {
  min-width: 0;
}


.tower-mon__copy strong {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: .8rem;
}


.tower-mon__copy > span,
.tower-mon__copy > small {
  color:
    var(
      --text-muted,
      #94a9ba
    );

  font-size: .68rem;
}


.tower-hp {
  margin:
    .42rem 0 .25rem;
}


.tower-hp i {
  display: block;

  height: 100%;

  background:
    linear-gradient(
      90deg,
      var(--tower-success),
      var(--tower-accent)
    );
}


.tower-ready {
  display: grid;

  gap: 1rem;

  text-align: center;

  justify-items: center;

  padding: 2rem;
}


.tower-ready > .tower-primary {
  min-width:
    min(
      360px,
      100%
    );
}


.tower-ready p {
  margin:
    .2rem 0 0;

  color:
    var(
      --text-muted,
      #9bafbf
    );
}


.tower-run-team {
  width: 100%;
}


.tower-battle {
  overflow: hidden;
}


.tower-battle__head {
  padding-bottom: .9rem;

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


.tower-battle__head > strong {
  color:
    var(--tower-accent);

  font-size: .8rem;

  letter-spacing: .09em;
}


.tower-battle.is-boss {
  border-color:
    color-mix(
      in srgb,
      var(--tower-danger) 42%,
      transparent
    );
}


.tower-finish {
  margin:
    .9rem 0;

  padding: 1rem;

  border-radius: 14px;

  text-align: center;

  background:
    rgba(0,0,0,.22);
}


.tower-finish span {
  display: block;

  color:
    var(--tower-accent);

  font-size: .7rem;

  font-weight: 950;

  letter-spacing: .15em;
}


.tower-finish strong {
  display: block;

  margin-top: .25rem;

  font-size: 1.4rem;
}


.tower-finish--defeat {
  border:
    1px solid
    color-mix(
      in srgb,
      var(--tower-danger) 50%,
      transparent
    );
}


.tower-versus {
  display: grid;

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

  gap: .7rem;

  align-items: start;

  margin-top: 1rem;
}


.tower-side {
  min-width: 0;
}


.tower-side__label {
  margin-bottom: .45rem;
}


.tower-vs-mark {
  align-self: center;

  display: grid;

  place-items: center;
}


.tower-vs-mark span {
  width: 54px;

  height: 54px;

  display: grid;

  place-items: center;

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

  border-radius: 50%;

  color:
    var(--tower-accent);

  font-weight: 950;
}


.tower-bench {
  grid-template-columns: 1fr;

  margin-top: .5rem;
}


.tower-switch-card {
  width: 100%;

  display: grid;

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

  align-items: center;

  gap: .5rem;

  padding: 0;

  border: 0;

  color: inherit;

  background: transparent;

  cursor: pointer;
}


.tower-switch-card > span {
  color:
    var(--tower-accent);

  font-size: .62rem;

  font-weight: 950;
}


.tower-battle-controls {
  display: grid;

  margin-top: 1rem;
}


.tower-attack {
  min-height: 90px;

  display: grid;

  grid-template-columns:
    52px
    1fr;

  grid-template-rows:
    1fr
    1fr;

  align-items: center;

  padding:
    .9rem 1rem;

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

  border-radius: 16px;

  color: inherit;

  text-align: left;

  background:
    linear-gradient(
      100deg,
      color-mix(
        in srgb,
        var(--tower-accent) 14%,
        rgba(0,0,0,.25)
      ),
      rgba(0,0,0,.18)
    );

  cursor: pointer;
}


.tower-attack > span {
  grid-row:
    1 / span 2;

  font-size: 2rem;

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


.tower-attack strong {
  align-self: end;
}


.tower-attack small {
  align-self: start;

  color:
    var(
      --text-muted,
      #91a5b5
    );
}


.tower-log {
  margin-top: .8rem;

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

  padding-top: .75rem;
}


.tower-log header span,
.tower-log header b {
  font-size: .65rem;

  letter-spacing: .1em;
}


.tower-log header span {
  color:
    var(--tower-accent);
}


.tower-log div {
  margin-top: .4rem;

  display: grid;

  gap: .25rem;
}


.tower-log p {
  margin: 0;

  padding:
    .38rem .5rem;

  border-radius: 8px;

  color:
    var(
      --text-muted,
      #9caebc
    );

  background:
    rgba(0,0,0,.13);

  font-size: .7rem;
}


.tower-log p b {
  color:
    var(
      --text-primary,
      #fff
    );
}


.tower-next-floor {
  margin-top: .75rem;

  padding:
    1rem 1.1rem;

  border-radius: 17px;
}


.tower-next-floor strong {
  display: block;

  margin-top: .15rem;

  font-size: 1.4rem;
}


.tower-next-floor.is-defeat {
  border-color:
    color-mix(
      in srgb,
      var(--tower-danger) 45%,
      transparent
    );
}


.tower-board {
  position: sticky;

  top: 1rem;
}


.tower-board__rows {
  display: grid;

  gap: .38rem;
}


.tower-rank {
  min-height: 46px;

  display: grid;

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

  align-items: center;

  gap: .5rem;

  padding:
    .55rem .65rem;

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

  border-radius: 11px;

  background:
    rgba(0,0,0,.14);
}


.tower-rank b {
  color:
    var(
      --text-muted,
      #8ea1b2
    );
}


.tower-rank span {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: .78rem;
}


.tower-rank strong {
  color:
    var(--tower-accent);
}


.tower-rank.is-podium {
  border-color:
    color-mix(
      in srgb,
      var(--tower-accent) 30%,
      transparent
    );
}


.tower-empty {
  padding: 1rem;

  color:
    var(
      --text-muted,
      #91a5b6
    );

  text-align: center;
}


.tower-loading {
  min-height: 360px;

  display: grid;

  place-items: center;

  align-content: center;

  gap: .7rem;

  border-radius: 22px;

  text-align: center;
}


.tower-loading > span {
  color:
    var(--tower-accent);

  font-size: .7rem;

  font-weight: 950;

  letter-spacing: .15em;
}


.tower-loading > i {
  width: 130px;

  height: 3px;

  overflow: hidden;

  border-radius: 99px;

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


.tower-loading > i::after {
  content: '';

  display: block;

  width: 45%;

  height: 100%;

  background:
    var(--tower-accent);

  animation:
    tower-load
    1s
    infinite
    alternate
    ease-in-out;
}


@keyframes tower-load {
  from {
    transform:
      translateX(0);
  }

  to {
    transform:
      translateX(125%);
  }
}


@media (
  max-width: 1180px
) {
  .tower-zones {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .tower-layout {
    grid-template-columns:
      minmax(0,1fr);
  }

  .tower-board {
    position: static;
  }

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


@media (
  max-width: 800px
) {
  .tower-shell {
    padding:
      .65rem
      .65rem
      6rem;
  }

  .tower-hero {
    grid-template-columns:
      1fr;

    min-height: 0;

    border-radius: 20px;
  }

  .tower-hero__spire {
    width: 170px;

    height: 160px;
  }

  .tower-hero__spire strong {
    font-size: 3rem;
  }

  .tower-hero__spire span {
    margin-top: 4.3rem;
  }

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

  .tower-roster {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    max-height: 470px;
  }

  .tower-selected-strip,
  .tower-run-team {
    grid-template-columns:
      1fr;
  }

  .tower-versus {
    grid-template-columns:
      1fr;
  }

  .tower-vs-mark {
    margin:
      -.1rem 0;
  }

  .tower-vs-mark span {
    width: 42px;

    height: 42px;
  }
}


@media (
  max-width: 520px
) {
  .tower-zones {
    grid-template-columns:
      1fr;
  }

  .tower-team-toolbar {
    grid-template-columns:
      1fr;
  }

  .tower-roster {
    grid-template-columns:
      1fr;
  }

  .tower-reward-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .tower-next-floor {
    align-items: stretch;

    flex-direction: column;
  }

  .tower-mon {
    grid-template-columns:
      70px
      minmax(0,1fr);
  }

  .tower-mon__sprite img {
    width: 68px;

    height: 68px;
  }
}


@media (
  prefers-reduced-motion:
  reduce
) {
  .tower-loading > i::after {
    animation: none;
  }
}


/* ==========================================================
   BATTLE TOWER HERO POKEMON V1
   ========================================================== */

.tower-hero {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(290px, 560px);
}


.tower-hero__visual {
  position: absolute;

  z-index: 1;

  right: 185px;

  bottom: -8px;

  width: 430px;

  height: 310px;

  display: grid;

  place-items: end center;

  pointer-events: none;
}


.tower-hero__pokemon-glow {
  position: absolute;

  left: 50%;

  top: 56%;

  width: 310px;

  height: 210px;

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

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      color-mix(
        in srgb,
        var(--tower-secondary) 48%,
        transparent
      ),
      color-mix(
        in srgb,
        var(--tower-accent) 17%,
        transparent
      ) 42%,
      transparent 72%
    );

  filter:
    blur(22px);

  opacity: .9;
}


.tower-hero__pokemon {
  position: relative;

  z-index: 2;

  width: 330px;

  height: 285px;

  display: grid;

  place-items: center;

  transform-origin:
    50% 80%;

  animation:
    towerPokemonFloat
    4.4s
    ease-in-out
    infinite;
}


.tower-hero__pokemon::after {
  content: '';

  position: absolute;

  left: 50%;

  bottom: 12px;

  width: 210px;

  height: 34px;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    rgba(
      0,
      0,
      0,
      .58
    );

  filter:
    blur(11px);
}


.tower-hero__pokemon img {
  position: relative;

  z-index: 2;

  width: min(
    310px,
    100%
  );

  height: min(
    275px,
    100%
  );

  object-fit: contain;

  transform:
    scale(1.35);

  filter:
    drop-shadow(
      0 0 12px
      color-mix(
        in srgb,
        var(--tower-secondary) 50%,
        transparent
      )
    )
    drop-shadow(
      0 15px 26px
      rgba(
        0,
        0,
        0,
        .55
      )
    );

  image-rendering:
    auto;
}


.tower-hero__pokemon span {
  position: absolute;

  z-index: 3;

  right: 2px;

  bottom: 18px;

  padding:
    .3rem .5rem;

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

  border-radius: 8px;

  color:
    var(--tower-accent);

  background:
    rgba(
      4,
      10,
      18,
      .82
    );

  font-size: .54rem;

  font-weight: 950;

  letter-spacing: .14em;
}


.tower-hero__spire {
  position: relative;

  z-index: 3;

  justify-self: end;

  margin-right: 15px;
}


@keyframes towerPokemonFloat {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(-1deg);
  }

  50% {
    transform:
      translateY(-10px)
      rotate(1deg);
  }
}


@media (max-width: 1180px) {
  .tower-hero__visual {
    right: 115px;

    width: 330px;

    opacity: .88;
  }

  .tower-hero__pokemon {
    width: 260px;
  }

  .tower-hero__pokemon img {
    transform:
      scale(1.15);
  }
}


@media (max-width: 800px) {
  .tower-hero__visual {
    position: relative;

    right: auto;

    bottom: auto;

    grid-column: 1;

    grid-row: 2;

    width: 100%;

    height: 185px;

    margin-top: -.5rem;
  }

  .tower-hero__pokemon {
    width: 190px;

    height: 180px;
  }

  .tower-hero__pokemon img {
    width: 180px;

    height: 170px;

    transform:
      scale(1.15);
  }

  .tower-hero__pokemon-glow {
    width: 220px;

    height: 145px;
  }

  .tower-hero__spire {
    position: absolute;

    right: 18px;

    bottom: 20px;

    width: 115px;

    height: 125px;

    opacity: .72;
  }
}


@media (
  prefers-reduced-motion:
  reduce
) {
  .tower-hero__pokemon {
    animation: none;
  }
}


/* ==========================================================
   BATTLE TOWER HERO WOW V2
   ========================================================== */

.tower-hero {
  --hero-purple: #a348ff;
  --hero-pink: #ee58d4;
  --hero-blue: #55dfff;

  min-height: 410px;

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

  align-items: stretch;

  isolation: isolate;

  background:
    linear-gradient(
      115deg,
      rgba(13, 23, 41, .99) 0%,
      rgba(9, 16, 29, .98) 43%,
      rgba(25, 13, 36, .98) 74%,
      rgba(8, 13, 24, .99) 100%
    );
}


/*
 * Huge atmospheric wash.
 */

.tower-hero::before {
  content: '';

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 72% 72%,
      rgba(160, 58, 255, .34),
      transparent 24%
    ),
    radial-gradient(
      ellipse at 83% 35%,
      rgba(234, 77, 206, .22),
      transparent 28%
    ),
    radial-gradient(
      ellipse at 62% 22%,
      rgba(80, 220, 255, .10),
      transparent 33%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(143, 60, 205, .05) 45%,
      rgba(209, 66, 188, .10) 100%
    );
}


/*
 * Fade the artwork gracefully into the readable text area.
 */

.tower-hero::after {
  content: '';

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(8, 15, 28, .98) 0%,
      rgba(8, 15, 28, .90) 32%,
      rgba(8, 15, 28, .55) 48%,
      rgba(8, 15, 28, .12) 64%,
      transparent 78%
    );
}


.tower-hero__copy {
  position: relative;

  z-index: 6;

  width: min(
    58%,
    900px
  );

  align-self: center;
}


.tower-hero h1 {
  position: relative;

  z-index: 2;

  margin-top: .55rem;

  text-shadow:
    0 15px 50px
    rgba(0, 0, 0, .38);
}


.tower-hero h1 b {
  text-shadow:
    0 0 32px
    color-mix(
      in srgb,
      var(--tower-accent) 34%,
      transparent
    );
}


.tower-hero__stats {
  position: relative;

  z-index: 7;
}


/* ==========================================================
   FULL RIGHT-HAND ART SCENE
   ========================================================== */

.tower-hero__visual {
  position: absolute;

  z-index: 1;

  inset:
    0
    0
    0
    auto;

  width: 59%;

  height: 100%;

  overflow: hidden;

  pointer-events: none;

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.4) 13%,
      black 32%,
      black 100%
    );

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.4) 13%,
      black 32%,
      black 100%
    );
}


/* subtle sci-fi floor/grid */

.tower-hero__scene-grid {
  position: absolute;

  z-index: 0;

  left: 2%;

  right: 0;

  bottom: -105px;

  height: 240px;

  opacity: .22;

  transform:
    perspective(340px)
    rotateX(63deg);

  transform-origin:
    center bottom;

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

  background-size:
    34px 34px;

  filter:
    drop-shadow(
      0 0 8px
      rgba(182, 78, 255, .2)
    );
}


/* ==========================================================
   MIST
   ========================================================== */

.tower-hero__mist {
  position: absolute;

  z-index: 1;

  border-radius: 50%;

  filter:
    blur(32px);

  pointer-events: none;
}


.tower-hero__mist--one {
  width: 520px;

  height: 145px;

  right: 8%;

  bottom: -20px;

  background:
    radial-gradient(
      ellipse,
      rgba(137, 45, 255, .44),
      rgba(228, 70, 205, .20) 42%,
      transparent 72%
    );

  animation:
    towerMistOne
    8s
    ease-in-out
    infinite alternate;
}


.tower-hero__mist--two {
  width: 420px;

  height: 170px;

  right: 30%;

  bottom: 30px;

  opacity: .54;

  background:
    radial-gradient(
      ellipse,
      rgba(77, 204, 255, .20),
      rgba(179, 59, 255, .18) 48%,
      transparent 74%
    );

  animation:
    towerMistTwo
    10s
    ease-in-out
    infinite alternate;
}


/* ==========================================================
   DISTANT TOWER / BEACON
   ========================================================== */

.tower-hero__beacon {
  position: absolute;

  z-index: 1;

  right: 25%;

  top: 42px;

  width: 46px;

  height: 205px;

  opacity: .38;

  clip-path:
    polygon(
      39% 0,
      61% 0,
      67% 14%,
      78% 14%,
      93% 100%,
      7% 100%,
      22% 14%,
      33% 14%
    );

  background:
    linear-gradient(
      180deg,
      rgba(237, 91, 255, .90),
      rgba(131, 70, 255, .5) 38%,
      rgba(36, 29, 65, .42) 100%
    );

  filter:
    drop-shadow(
      0 0 15px
      rgba(215, 78, 255, .75)
    );
}


.tower-hero__beacon::before {
  content: '';

  position: absolute;

  top: 16px;

  left: 50%;

  width: 28px;

  height: 7px;

  transform:
    translateX(-50%);

  border-radius: 999px;

  background:
    rgba(255, 124, 248, .95);

  box-shadow:
    0 0 18px
    rgba(255, 81, 238, .9);
}


.tower-hero__beacon::after {
  content: '';

  position: absolute;

  top: 52px;

  left: 50%;

  width: 28px;

  height: 2px;

  transform:
    translateX(-50%);

  background:
    rgba(222, 122, 255, .65);

  box-shadow:
    0 37px 0
    rgba(222, 122, 255, .36),
    0 74px 0
    rgba(222, 122, 255, .24);
}


.tower-hero__beacon i {
  position: absolute;

  left: 50%;

  width: 7px;

  height: 7px;

  border-radius: 50%;

  transform:
    translateX(-50%);

  background:
    #ff8aee;

  box-shadow:
    0 0 16px
    rgba(255, 105, 237, .9);
}


.tower-hero__beacon i:nth-child(1) {
  top: 3px;
}

.tower-hero__beacon i:nth-child(2) {
  top: 88px;
}

.tower-hero__beacon i:nth-child(3) {
  top: 145px;
}


/* ==========================================================
   ENERGY UNDER THE POKEMON
   ========================================================== */

.tower-hero__energy-ring {
  position: absolute;

  z-index: 2;

  right: 18%;

  bottom: 4px;

  width: 430px;

  height: 108px;

  border-radius: 50%;

  transform:
    rotate(-5deg);

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

  background:
    radial-gradient(
      ellipse,
      rgba(176, 68, 255, .30),
      rgba(235, 77, 198, .16) 36%,
      transparent 68%
    );

  box-shadow:
    0 0 30px
    rgba(165, 58, 255, .24),
    inset 0 0 30px
    rgba(227, 86, 255, .13);

  filter:
    blur(.2px);

  animation:
    towerEnergyPulse
    3.5s
    ease-in-out
    infinite;
}


/* ==========================================================
   GLOW
   ========================================================== */

.tower-hero__pokemon-glow {
  position: absolute;

  z-index: 2;

  right: 11%;

  top: 17%;

  left: auto;

  width: 520px;

  height: 365px;

  transform: none;

  border-radius: 50%;

  opacity: 1;

  filter:
    blur(28px);

  background:
    radial-gradient(
      ellipse at center,
      rgba(172, 70, 255, .50) 0%,
      rgba(231, 73, 206, .23) 34%,
      rgba(81, 190, 255, .10) 52%,
      transparent 74%
    );

  animation:
    towerAuraPulse
    4.8s
    ease-in-out
    infinite;
}


/* ==========================================================
   BIG POKEMON
   ========================================================== */

.tower-hero__pokemon {
  position: absolute;

  z-index: 4;

  right: 15%;

  bottom: -38px;

  width: 430px;

  height: 380px;

  display: grid;

  place-items: center;

  animation:
    towerPokemonWowFloat
    4.2s
    ease-in-out
    infinite;

  transform-origin:
    50% 85%;
}


.tower-hero__pokemon::before {
  content: '';

  position: absolute;

  z-index: 0;

  left: 50%;

  bottom: 20px;

  width: 315px;

  height: 70px;

  border-radius: 50%;

  transform:
    translateX(-50%);

  background:
    radial-gradient(
      ellipse,
      rgba(188, 71, 255, .42),
      rgba(4, 7, 14, .7) 58%,
      transparent 72%
    );

  filter:
    blur(13px);
}


.tower-hero__pokemon::after {
  content: '';

  position: absolute;

  z-index: 1;

  inset: 15% 6% 5%;

  border-radius: 48%;

  opacity: .72;

  background:
    radial-gradient(
      ellipse,
      transparent 42%,
      rgba(212, 67, 255, .15) 67%,
      transparent 72%
    );

  filter:
    blur(15px);
}


.tower-hero__pokemon img {
  position: relative;

  z-index: 3;

  width: 390px;

  height: 350px;

  max-width: none;

  object-fit: contain;

  transform:
    scale(1.45);

  transform-origin:
    center 65%;

  image-rendering:
    auto;

  filter:
    saturate(1.12)
    contrast(1.05)
    drop-shadow(
      0 0 5px
      rgba(239, 131, 255, .7)
    )
    drop-shadow(
      0 0 22px
      rgba(164, 62, 255, .52)
    )
    drop-shadow(
      0 28px 32px
      rgba(0, 0, 0, .67)
    );
}


/*
 * Hide old name plate.
 * Image #2 looked stronger without it.
 */

.tower-hero__pokemon span {
  display: none !important;
}


/* ==========================================================
   PARTICLES
   ========================================================== */

.tower-hero__particles {
  position: absolute;

  z-index: 3;

  inset: 0;

  pointer-events: none;
}


.tower-hero__particles i {
  position: absolute;

  width: 4px;

  height: 4px;

  border-radius: 50%;

  background:
    #ee8cff;

  box-shadow:
    0 0 10px
    #d25eff;

  opacity: .8;

  animation:
    towerParticleFloat
    4s
    ease-in-out
    infinite;
}


.tower-hero__particles i:nth-child(1) {
  left: 24%;
  top: 19%;
  animation-delay: -.3s;
}

.tower-hero__particles i:nth-child(2) {
  left: 32%;
  top: 37%;
  width: 3px;
  height: 3px;
  animation-delay: -2.1s;
}

.tower-hero__particles i:nth-child(3) {
  left: 43%;
  top: 16%;
  animation-delay: -1.5s;
}

.tower-hero__particles i:nth-child(4) {
  left: 52%;
  top: 31%;
  width: 6px;
  height: 6px;
  animation-delay: -.8s;
}

.tower-hero__particles i:nth-child(5) {
  left: 62%;
  top: 11%;
  animation-delay: -2.7s;
}

.tower-hero__particles i:nth-child(6) {
  left: 69%;
  top: 42%;
  width: 3px;
  height: 3px;
  animation-delay: -1.1s;
}

.tower-hero__particles i:nth-child(7) {
  left: 78%;
  top: 22%;
  animation-delay: -3s;
}

.tower-hero__particles i:nth-child(8) {
  left: 83%;
  top: 52%;
  width: 6px;
  height: 6px;
  animation-delay: -.2s;
}

.tower-hero__particles i:nth-child(9) {
  left: 40%;
  top: 66%;
  animation-delay: -1.9s;
}

.tower-hero__particles i:nth-child(10) {
  left: 57%;
  top: 74%;
  width: 3px;
  height: 3px;
  animation-delay: -2.4s;
}

.tower-hero__particles i:nth-child(11) {
  left: 72%;
  top: 70%;
  animation-delay: -.6s;
}

.tower-hero__particles i:nth-child(12) {
  left: 89%;
  top: 31%;
  width: 3px;
  height: 3px;
  animation-delay: -3.3s;
}


/* ==========================================================
   100 FLOORS TOWER IN FOREGROUND
   ========================================================== */

.tower-hero__spire {
  position: absolute;

  z-index: 7;

  right: 5.2%;

  top: 63px;

  width: 205px;

  height: 270px;

  justify-self: auto;

  margin: 0;

  filter:
    drop-shadow(
      0 20px 25px
      rgba(0, 0, 0, .48)
    )
    drop-shadow(
      0 0 15px
      rgba(176, 87, 255, .20)
    );
}


.tower-hero__spire::before {
  background:
    linear-gradient(
      180deg,
      rgba(18, 27, 49, .72),
      rgba(6, 10, 22, .96)
    );
}


.tower-hero__spire strong {
  font-size: 4.5rem;

  text-shadow:
    0 10px 25px
    rgba(0, 0, 0, .42);
}


.tower-hero__spire span {
  color:
    #ef6fdf;

  text-shadow:
    0 0 14px
    rgba(239, 83, 217, .6);
}


/* ==========================================================
   MOTION
   ========================================================== */

@keyframes towerPokemonWowFloat {
  0%,
  100% {
    transform:
      translate3d(
        0,
        0,
        0
      )
      rotate(-1deg);
  }

  50% {
    transform:
      translate3d(
        -4px,
        -11px,
        0
      )
      rotate(1deg);
  }
}


@keyframes towerAuraPulse {
  0%,
  100% {
    opacity: .78;

    transform:
      scale(.96);
  }

  50% {
    opacity: 1;

    transform:
      scale(1.06);
  }
}


@keyframes towerEnergyPulse {
  0%,
  100% {
    opacity: .55;

    transform:
      rotate(-5deg)
      scale(.95);
  }

  50% {
    opacity: .95;

    transform:
      rotate(-5deg)
      scale(1.06);
  }
}


@keyframes towerParticleFloat {
  0%,
  100% {
    opacity: .25;

    transform:
      translateY(8px)
      scale(.75);
  }

  50% {
    opacity: 1;

    transform:
      translateY(-10px)
      scale(1.25);
  }
}


@keyframes towerMistOne {
  from {
    transform:
      translateX(-18px)
      scale(.94);

    opacity: .48;
  }

  to {
    transform:
      translateX(26px)
      scale(1.06);

    opacity: .78;
  }
}


@keyframes towerMistTwo {
  from {
    transform:
      translateX(20px);

    opacity: .30;
  }

  to {
    transform:
      translateX(-30px);

    opacity: .62;
  }
}


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

@media (
  max-width: 1250px
) {
  .tower-hero__copy {
    width: 58%;
  }

  .tower-hero__visual {
    width: 58%;
  }

  .tower-hero__pokemon {
    right: 13%;

    width: 360px;

    height: 335px;
  }

  .tower-hero__pokemon img {
    width: 335px;

    height: 310px;

    transform:
      scale(1.32);
  }

  .tower-hero__spire {
    right: 3%;

    width: 170px;

    height: 235px;
  }

  .tower-hero__energy-ring {
    right: 13%;

    width: 360px;
  }
}


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

@media (
  max-width: 800px
) {
  .tower-hero {
    min-height: 650px;

    display: block;

    padding-bottom: 260px;
  }

  .tower-hero::after {
    background:
      linear-gradient(
        180deg,
        rgba(8,15,28,.97) 0%,
        rgba(8,15,28,.88) 42%,
        rgba(8,15,28,.24) 69%,
        transparent 100%
      );
  }

  .tower-hero__copy {
    width: 100%;

    position: relative;

    z-index: 7;
  }

  .tower-hero__visual {
    inset:
      auto
      0
      0
      0;

    width: 100%;

    height: 315px;

    mask-image:
      linear-gradient(
        180deg,
        transparent 0%,
        black 24%,
        black 100%
      );

    -webkit-mask-image:
      linear-gradient(
        180deg,
        transparent 0%,
        black 24%,
        black 100%
      );
  }

  .tower-hero__pokemon {
    right: 50%;

    bottom: -45px;

    width: 300px;

    height: 290px;

    transform:
      translateX(50%);
  }

  .tower-hero__pokemon img {
    width: 280px;

    height: 265px;

    transform:
      scale(1.28);
  }

  .tower-hero__pokemon-glow {
    right: 50%;

    top: 60px;

    width: 360px;

    height: 240px;

    transform:
      translateX(50%);
  }

  .tower-hero__energy-ring {
    right: 50%;

    bottom: -5px;

    width: 325px;

    transform:
      translateX(50%)
      rotate(-4deg);
  }

  .tower-hero__beacon {
    right: 17%;

    top: 58px;

    height: 150px;
  }

  .tower-hero__spire {
    right: 12px;

    top: auto;

    bottom: 22px;

    width: 105px;

    height: 135px;

    opacity: .88;
  }

  .tower-hero__spire strong {
    font-size: 2.4rem;
  }

  .tower-hero__spire span {
    margin-top: 3.5rem;

    font-size: .48rem;
  }
}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (
  max-width: 520px
) {
  .tower-hero {
    min-height: 640px;

    padding-bottom: 235px;
  }

  .tower-hero h1 {
    font-size:
      clamp(
        3.1rem,
        17vw,
        4.6rem
      );
  }

  .tower-hero__stats > div {
    min-width: 92px;

    flex: 1;
  }

  .tower-hero__visual {
    height: 285px;
  }

  .tower-hero__pokemon {
    width: 260px;

    height: 255px;
  }

  .tower-hero__pokemon img {
    width: 245px;

    height: 240px;
  }

  .tower-hero__spire {
    width: 88px;

    height: 118px;
  }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (
  prefers-reduced-motion:
  reduce
) {
  .tower-hero__pokemon,
  .tower-hero__pokemon-glow,
  .tower-hero__energy-ring,
  .tower-hero__particles i,
  .tower-hero__mist {
    animation: none !important;
  }
}


/* ===== END BATTLE TOWER HERO WOW V2 ===== */