/* Shared quest safeguards for mobile Safari, desktop Safari, Chrome, and Edge. */

[class*="quest-story-module"][class*="__storyBand"] {
  background-color: #fffaf0;
}

[class*="quest-story-module"][class*="__storyBand"]::before {
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%);
}

/* The story header is now the single subject switcher. */
[class*="quest-screen-module"][class*="__questHeader"] > nav {
  display: none !important;
}

[class*="quest-screen-module"][class*="__questHeader"] {
  grid-template-columns: 1fr auto !important;
}

/* Keep decorative coach lighting inside its card on narrow screens. */
[class*="quest-screen-module"][class*="__coachGlow"] {
  right: 0 !important;
  max-width: 100% !important;
}

/* Logic patterns must remain one readable sequence, never a wrapped 3-column grid. */
[class*="quest-screen-module"][class*="__visualFrame"]:has([class*="__patternVisual"]) {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: clamp(14px, 3vw, 24px) !important;
}

[class*="quest-screen-module"][class*="__patternVisual"] {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: clamp(6px, 2vw, 18px) !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
}

[class*="quest-screen-module"][class*="__patternVisual"] > span {
  display: grid !important;
  place-items: center !important;
  width: clamp(42px, 11vw, 92px) !important;
  min-width: 0 !important;
  height: clamp(42px, 11vw, 92px) !important;
  min-height: 0 !important;
  max-height: clamp(42px, 11vw, 92px) !important;
  align-self: center !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  padding: 4px !important;
  font-family: "Nunito", "Trebuchet MS", sans-serif !important;
  font-size: clamp(12px, 3.8vw, 22px) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
}

[class*="quest-screen-module"][class*="__patternNext"] {
  border-style: dashed !important;
  background: #fff !important;
  color: #0c3950 !important;
}

@media (max-width: 650px) {
  /* Make the adventure story a useful header instead of a full page before play. */
  [class*="quest-story-module"][class*="__storyBand"] {
    padding: max(14px, env(safe-area-inset-top)) 14px 15px !important;
  }

  [class*="quest-story-module"][class*="__questNav"] {
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  [class*="quest-story-module"][class*="__questBrand"] span {
    width: 34px !important;
    height: 34px !important;
  }

  [class*="quest-story-module"][class*="__questNav"] > div {
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  [class*="quest-story-module"][class*="__questNav"] > div::-webkit-scrollbar {
    display: none;
  }

  [class*="quest-story-module"][class*="__questNav"] > div a {
    min-height: 42px !important;
    padding: 9px 13px !important;
  }

  [class*="quest-story-module"][class*="__storyGrid"] {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center !important;
  }

  [class*="quest-story-module"][class*="__gioPortrait"] {
    min-height: 112px !important;
  }

  [class*="quest-story-module"][class*="__gioPortrait"]::before {
    inset: 0 !important;
    border-radius: 22px 22px 48px 22px !important;
    box-shadow: 5px 6px 0 #0c3950 !important;
  }

  [class*="quest-story-module"][class*="__gioPortrait"] img {
    right: -7px !important;
    bottom: -10px !important;
    width: 116px !important;
    height: 128px !important;
  }

  [class*="quest-story-module"][class*="__storyMark"] {
    top: -4px !important;
    left: -3px !important;
    min-width: 38px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    box-shadow: 3px 4px 0 #0c3950 !important;
    font-size: 10px !important;
  }

  [class*="quest-story-module"][class*="__orbitOne"],
  [class*="quest-story-module"][class*="__orbitTwo"] {
    display: none !important;
  }

  [class*="quest-story-module"][class*="__storyCopy"] {
    min-width: 0 !important;
  }

  [class*="quest-story-module"][class*="__eyebrow"] {
    margin-bottom: 3px !important;
    font-size: 8px !important;
    letter-spacing: 1.4px !important;
  }

  [class*="quest-story-module"][class*="__tagline"] {
    margin-bottom: 3px !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
  }

  [class*="quest-story-module"][class*="__storyCopy"] h2 {
    font-size: clamp(24px, 7vw, 31px) !important;
    line-height: .98 !important;
    letter-spacing: -1px !important;
  }

  [class*="quest-story-module"][class*="__storyText"],
  [class*="quest-story-module"][class*="__artifactCard"],
  [class*="quest-story-module"][class*="__missionPath"],
  [class*="quest-story-module"][class*="__beaconLine"] {
    display: none !important;
  }

  [class*="quest-screen-module"][class*="__questHeader"] {
    min-height: 70px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  [class*="quest-screen-module"][class*="__patternVisual"] > span {
    width: clamp(40px, 11vw, 50px) !important;
    height: clamp(40px, 11vw, 50px) !important;
    max-height: clamp(40px, 11vw, 50px) !important;
    font-size: clamp(11px, 3.5vw, 15px) !important;
  }

  [class*="quest-screen-module"][class*="__visualFrame"]:has([class*="__patternVisual"]) {
    padding: 16px 10px !important;
  }

  [class*="community-quest-module"][class*="__mapHeader"] {
    padding-top: max(10px, env(safe-area-inset-top)) !important;
  }

  [class*="community-quest-module"][class*="__headerStats"] a {
    min-height: 42px;
  }

  [class*="community-quest-module"][class*="__gioCoach"] > img {
    right: 0 !important;
    max-width: calc(100% - 110px) !important;
  }
}

@media (min-width: 651px) {
  [class*="quest-screen-module"][class*="__patternVisual"] > span {
    width: clamp(70px, 7vw, 92px) !important;
    height: clamp(70px, 7vw, 92px) !important;
    max-height: clamp(70px, 7vw, 92px) !important;
    font-size: clamp(17px, 1.7vw, 23px) !important;
  }
}