/* HERO_TRAINING_JOURNEY_MOBILE_PWA_V1 */

.hero-journey-screen {
  display: grid;
  gap: 18px;
}

.hero-journey-hero {
  position: relative;
  overflow: hidden;
  padding: 28px;
}

.hero-journey-hero::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  right: -90px;
  top: -110px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(var(--hero-accent-rgb), 0.18),
      transparent 68%
    );
  pointer-events: none;
}

.hero-journey-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
}

.hero-journey-head h2 {
  margin: 7px 0 8px;
  font-size: clamp(2rem, 6vw, 3.6rem);
}

.hero-journey-head p {
  margin: 0;
  color: var(--hero-muted);
  line-height: 1.65;
  max-width: 720px;
}

.hero-journey-start {
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 15px;
  background:
    linear-gradient(
      135deg,
      var(--hero-accent),
      var(--hero-accent-2)
    );
  color: #04100a;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
  white-space: nowrap;
}

.hero-journey-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.hero-journey-stat {
  display: grid;
  gap: 7px;
  padding: 20px;
}

.hero-journey-stat span {
  color: var(--hero-muted);
}

.hero-journey-stat strong {
  font-size: 2rem;
}

.hero-journey-gps {
  display: grid;
  gap: 16px;
  padding: 24px;
}

.hero-journey-gps-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-journey-gps-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
}

.hero-journey-gps-dot.is-live {
  background: var(--hero-accent);
  box-shadow:
    0 0 18px
    rgba(var(--hero-accent-rgb), 0.6);
}

.hero-journey-gps-dot.is-bad {
  background: #ff7070;
}

.hero-journey-live-distance {
  display: grid;
  place-items: center;
  min-height: 230px;
  text-align: center;
}

.hero-journey-live-distance strong {
  font-size: clamp(4rem, 14vw, 8rem);
  line-height: 0.92;
}

.hero-journey-live-distance span {
  margin-top: 10px;
  color: var(--hero-muted);
  font-size: 1rem;
}

.hero-journey-live-meta {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hero-journey-live-meta article {
  display: grid;
  gap: 5px;
  padding: 15px;
  border-radius: 15px;
  border: 1px solid var(--hero-border);
  background: rgba(255,255,255,0.02);
}

.hero-journey-live-meta span {
  color: var(--hero-muted);
  font-size: 0.85rem;
}

.hero-journey-live-meta strong {
  font-size: 1.2rem;
}

.hero-journey-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-journey-finish {
  min-height: 54px;
  padding: 0 28px;
  border-radius: 15px;
  border: 1px solid
    rgba(var(--hero-accent-rgb),0.25);
  background:
    rgba(var(--hero-accent-rgb),0.10);
  color: var(--hero-text);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.hero-journey-history {
  padding: 24px;
}

.hero-journey-history h3 {
  margin: 8px 0 18px;
}

.hero-journey-history-list {
  display: grid;
  gap: 10px;
}

.hero-journey-history-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    repeat(3, auto);
  gap: 14px;
  align-items: center;
  padding: 13px 15px;
  border: 1px solid var(--hero-border);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
}

.hero-journey-history-row span {
  color: var(--hero-muted);
}

.hero-journey-result {
  padding: 28px;
  text-align: center;
}

.hero-journey-result h2 {
  margin: 7px 0 16px;
  font-size: clamp(2.2rem, 7vw, 4rem);
}

.hero-journey-result-rewards {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0;
}

.hero-journey-result-rewards article {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--hero-border);
  border-radius: 15px;
  background: rgba(255,255,255,0.025);
}

.hero-journey-result-rewards strong {
  font-size: 1.8rem;
}

.hero-journey-result-rewards span {
  color: var(--hero-muted);
}


@media (max-width: 760px) {
  .hero-training-sidebar {
    display: none;
  }

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

  .hero-training-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
  }

  .hero-training-main {
    padding:
      14px
      14px
      calc(30px + env(safe-area-inset-bottom));
  }

  .hero-journey-head {
    display: grid;
  }

  .hero-journey-start {
    width: 100%;
  }

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

  .hero-journey-live-meta {
    grid-template-columns: 1fr;
  }

  .hero-journey-history-row {
    grid-template-columns: 1fr 1fr;
  }

  .hero-journey-result-rewards {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   HERO_TRAINING_MOBILE_NAV_GPS_HOTFIX_V1
   ========================================================== */

.hero-training-mobile-nav {
  display: none;
}


@media (max-width: 760px) {

  /*
   * Desktop sidebar is intentionally hidden on phones.
   * The bottom navigation below replaces it.
   */
  .hero-training-sidebar {
    display: none !important;
  }


  .hero-training-stage {
    min-width: 0;
  }


  .hero-training-main {
    padding-bottom:
      calc(
        104px
        + env(safe-area-inset-bottom)
      ) !important;
  }


  .hero-training-mobile-nav {
    position: fixed;

    left: 10px;
    right: 10px;

    bottom:
      calc(
        8px
        + env(safe-area-inset-bottom)
      );

    z-index: 90;

    display: grid;

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

    gap: 5px;

    min-height: 66px;

    padding: 6px;

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

    border-radius: 20px;

    background:
      rgba(5, 11, 9, 0.94);

    box-shadow:
      0 16px 48px
      rgba(0, 0, 0, 0.45);

    backdrop-filter:
      blur(18px);

    -webkit-backdrop-filter:
      blur(18px);
  }


  .hero-training-mobile-nav button {

    appearance: none;

    display: grid;

    place-items: center;

    align-content: center;

    gap: 3px;

    min-width: 0;

    min-height: 54px;

    padding: 5px 2px;

    border: 0;

    border-radius: 15px;

    background: transparent;

    color:
      var(--hero-muted);

    font: inherit;

    cursor: pointer;

    -webkit-tap-highlight-color:
      transparent;
  }


  .hero-training-mobile-nav button > span {

    display: block;

    font-size: 1.15rem;

    line-height: 1;
  }


  .hero-training-mobile-nav button > strong {

    display: block;

    max-width: 100%;

    overflow: hidden;

    font-size: 0.68rem;

    line-height: 1.15;

    font-weight: 850;

    text-overflow: ellipsis;

    white-space: nowrap;
  }


  .hero-training-mobile-nav button.is-active {

    color:
      var(--hero-accent);

    background:
      rgba(
        var(--hero-accent-rgb),
        0.13
      );

    box-shadow:
      inset 0 0 0 1px
      rgba(
        var(--hero-accent-rgb),
        0.18
      );
  }


  .hero-training-mobile-nav button:active {

    transform:
      scale(0.96);
  }


  /*
   * PWA/iPhone full-screen safe area.
   */
  @supports (
    padding:
      max(0px)
  ) {

    .hero-training-mobile-nav {

      left:
        max(
          10px,
          env(safe-area-inset-left)
        );

      right:
        max(
          10px,
          env(safe-area-inset-right)
        );
    }
  }
}