/* A bright storybook rainforest, using the original habitat illustration. */
body {
  background-color: #164e39;
  background-image:
    radial-gradient(ellipse at 85% 0%, #ffea9a40, transparent 48%),
    linear-gradient(110deg, #082e2be8 0%, #124e39b8 42%, #15594092 100%),
    url('adventure-map.png');
  background-size: auto, auto, cover;
  background-position: center, center, center top;
  background-attachment: fixed;
}
.app > main {
  background: linear-gradient(180deg, #154d3820, #103f335c 65%, #0b352b94);
}
.sidebar {
  background-image: linear-gradient(180deg, #073a31ed, #123d2bf5), url('adventure-map.png');
  background-size: cover;
  background-position: 15% center;
}
.intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 230px;
  margin: 22px 0 25px;
  padding: clamp(22px, 3vw, 40px);
  border: 2px solid #bfda8d;
  border-radius: 28px 14px 28px 14px;
  background-image:
    linear-gradient(90deg, #073b30ed 0%, #124c37db 38%, #194c3540 78%),
    url('adventure-map.png');
  background-size: cover;
  background-position: center, 50% 30%;
  box-shadow: inset 0 1px 0 #f5ffd378, 0 8px 0 #143c2a, 0 16px 26px #05291d55;
}
.intro::before, .intro::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 90px;
  height: 42px;
  border: 1px solid #c4ef8240;
  border-radius: 2px 90% 2px 90%;
  background: linear-gradient(25deg, #286c38, #80ae47);
  box-shadow: 44px 30px 0 #408343, 86px 9px 0 #296c3a, 36px 64px 0 #1e6037;
  opacity: .9;
}
.intro::before { top: -8px; right: 36px; transform: rotate(24deg); }
.intro::after { bottom: -22px; right: 15px; transform: rotate(-155deg); }
.intro .eyebrow { color: #f0f5bb; letter-spacing: 1.6px; text-shadow: 0 2px 4px #082e29; }
.intro h1 { font-size: clamp(26px, 2.8vw, 40px); }
.intro p {
  max-width: 52em;
  color: #fffce9;
  font-size: 15px;
  font-weight: 500;
  text-shadow: 0 2px 4px #052d25;
}
main > header { border-bottom-color: #c8df9a70; }
.journey-map-scroll { border: 3px solid #c8dc8b; box-shadow: 0 7px 0 #255738, 0 15px 24px #052d2566; }
.tiger-game { border-color: #b9d482; box-shadow: 0 8px 0 #174b32, 0 15px 30px #052d254d; }
.tg-backdrop { filter: saturate(1.12) brightness(1.08); }
.tg-viewport { border-color: #637c3c; box-shadow: 0 3px 0 #bdd094, 0 8px 15px #35562d26; }
main > footer {
  padding: 16px 18px;
  margin-top: 28px;
  border: 1px solid #a6c68460;
  border-radius: 16px;
  background: #123f31e8;
  color: #f1f6d7;
}
@media (max-width:650px) {
  body { background-attachment: scroll; background-size: auto, auto, auto 100vh; background-repeat: no-repeat; }
  .intro { min-height: 210px; margin-top: 18px; padding: 24px 17px; border-radius: 22px 12px; background-position: center, 40% 25%; }
  .intro h1 { font-size: 25px; padding-left: 19px; padding-right: 19px; }
  .intro p { font-size: 14px; }
  .intro::before { right: 7px; opacity: .6; }
  main > footer { padding: 13px; }
}
@media print {
  body, .app > main, .intro { background: white; color: #183d2a; box-shadow: none; }
  .intro p, .intro .eyebrow { color: #183d2a; text-shadow: none; }
  .intro::before, .intro::after { display: none; }
}