:root {
  --hls-mascot-shadow: rgba(0, 0, 0, .42);
}

.hls-mascot-stage {
  --hls-mascot-accent: 105, 200, 255;
  position: relative;
  z-index: 2;
  width: 250px;
  flex: 0 0 auto;
  margin: 0;
  isolation: isolate;
  line-height: 1;
}

.hls-mascot-stage--nell {
  --hls-mascot-accent: 239, 182, 107;
}

.hls-mascot-stage--jory {
  --hls-mascot-accent: 115, 219, 255;
}

.hls-mascot-stage::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 13% -14% 5%;
  border-radius: 50%;
  pointer-events: none;
  opacity: .58;
  background: radial-gradient(circle, rgba(var(--hls-mascot-accent), .34), transparent 68%);
  filter: blur(20px);
}

.hls-mascot-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 12%;
  bottom: 1.5%;
  left: 12%;
  height: 5.5%;
  border-radius: 50%;
  pointer-events: none;
  opacity: .72;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .64), transparent 72%);
  filter: blur(7px);
}

.hls-mascot-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 25px var(--hls-mascot-shadow));
  transition: filter .28s ease, opacity .2s ease;
}

.hls-mascot-stage.is-playing .hls-mascot-image {
  filter:
    drop-shadow(0 22px 25px var(--hls-mascot-shadow))
    drop-shadow(0 0 15px rgba(var(--hls-mascot-accent), .18));
}

.hls-mascot-caption {
  position: absolute;
  z-index: 3;
  bottom: 1.5%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(var(--hls-mascot-accent), .34);
  border-radius: 999px;
  color: #f8fbff;
  background: rgba(3, 13, 28, .84);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.hls-mascot-caption strong {
  color: rgb(var(--hls-mascot-accent));
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .04em;
}

.hls-mascot-caption span {
  color: #c3d0df;
  font-size: .64rem;
  font-weight: 760;
}

/* Practice Tests */
.hls-hub-hero .hls-mascot-hero-layout {
  position: relative;
  display: flex;
  min-height: 330px;
  align-items: center;
}

.hls-hub-hero .hls-mascot-hero-layout .hls-hub-hero-content {
  max-width: min(780px, calc(100% - 325px));
}

.hls-mascot-stage--practice {
  position: absolute;
  right: 38px;
  bottom: -35px;
  width: 250px;
}

/* Grammar Story Hall */
.hall .hero .hls-mascot-stage--grammar {
  position: absolute;
  right: clamp(0px, 2vw, 28px);
  bottom: 4px;
  width: clamp(250px, 26vw, 300px);
}

/* Interactive Library */
.hero-card.hls-library-mascot-host {
  padding-right: 220px;
}

.hero-card .hls-mascot-stage--library {
  position: absolute;
  right: 16px;
  bottom: -7px;
  width: 170px;
}

.hero-card .hls-mascot-stage--library .hls-mascot-caption {
  bottom: 2.5%;
}

/* Game Night */
@media (min-width: 901px) {
  .game-night-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    column-gap: clamp(20px, 3vw, 42px);
  }

  .game-night-hero-inner > :not(.hls-mascot-stage) {
    grid-column: 1;
  }

  .game-night-hero-inner > .game-night-hero-logo { grid-row: 1; }
  .game-night-hero-inner > .game-night-title-clean { grid-row: 2; }
  .game-night-hero-inner > p { grid-row: 3; }
  .game-night-hero-inner > .game-night-stats { grid-row: 4; }
  .game-night-hero-inner > .game-night-start { grid-row: 5; justify-self: center; }

  .game-night-hero-inner > .hls-mascot-stage--game-night {
    grid-column: 2;
    grid-row: 1 / 6;
    align-self: end;
    justify-self: end;
    width: min(100%, 275px);
    margin-bottom: -74px;
  }
}

@media (max-width: 900px) {
  .game-night-hero-inner {
    display: flex;
    flex-direction: column;
  }

  .game-night-hero-inner > .hls-mascot-stage--game-night {
    width: 155px;
    margin: -15px auto 16px;
  }
}

@media (max-width: 850px) {
  .hall .hero,
  .hall .hero-inner {
    min-height: 930px;
  }

  .hall .hero .hero-inner {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 14px;
  }

  .hall .hero .hls-mascot-stage--grammar {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 150px;
    margin: 0 auto;
  }
}

@media (max-width: 780px) {
  .hls-hub-hero .hls-mascot-hero-layout {
    display: grid;
    min-height: 0;
  }

  .hls-hub-hero .hls-mascot-hero-layout .hls-hub-hero-content {
    max-width: none;
  }

  .hls-mascot-stage--practice {
    position: relative;
    right: auto;
    bottom: auto;
    width: 180px;
    justify-self: center;
    margin: 25px auto -68px;
  }
}

@media (max-width: 760px) {
  .hero-card.hls-library-mascot-host {
    padding-right: 22px;
  }

  .hero-card .hls-mascot-stage--library {
    position: relative;
    right: auto;
    bottom: auto;
    width: 150px;
    margin: 18px auto -28px;
  }
}

@media (max-width: 590px) {
  .hall .hero,
  .hall .hero-inner {
    min-height: 920px;
  }

  .hall .hero .hls-mascot-stage--grammar {
    width: 125px;
  }

  .hls-mascot-caption span {
    display: none;
  }

  .hls-mascot-caption {
    min-height: 30px;
    padding: 6px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hls-mascot-image {
    transition: none !important;
  }
}