/* Непрерывный подъём: путь прокручивается вниз вместе с камерой. */
.game-shell {
  display: block;
  padding: 0;
}

.sky {
  width: 100%;
  min-height: 100vh;
  border-radius: 0;
  box-shadow: none;
}

.brand-area {
  display: grid;
  gap: 4px;
}

.brand-area .journey-title {
  position: static;
  text-align: left;
  font-size: 15px;
  line-height: 1;
  padding-left: 45px;
}

.top-actions {
  display: grid;
  grid-template-columns: auto auto;
  justify-items: end;
  align-items: center;
  gap: 12px;
}

.topbar {
  height: auto;
  min-height: 200px;
  align-items: start;
}

.mode-picker,
.skin-picker {
  display: grid;
  gap: 2px;
  grid-column: 1 / -1;
  justify-self: end;
  width: 100%;
  color: #727a99;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.mode-picker select,
.skin-picker select {
  width: 100%;
  max-width: none;
  border: 3px solid #fff;
  border-radius: 13px;
  padding: 6px 30px 6px 10px;
  background: #fff9e8;
  color: #6558b4;
  box-shadow: 0 4px 0 #cfe5c3;
  font: 800 13px Nunito, Arial, sans-serif;
  cursor: pointer;
  outline: none;
}

.mode-picker select:focus,
.skin-picker select:focus { border-color: #806ce1; }

.top-actions .level-pill {
  position: static;
  padding: 7px 13px;
  white-space: nowrap;
}

.coins {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
}

.coins span {
  color: #727a99;
  font-size: 12px;
  line-height: 1.1;
  margin-right: 0;
}

.journey {
  overflow: hidden;
}

.island-path {
  transition: transform .65s cubic-bezier(.4,.8,.4,1);
}

.ground {
  z-index: 3;
  transition: transform .65s cubic-bezier(.4,.8,.4,1);
}

.ground {
  left: 50%;
  right: auto;
  width: 100vw;
  margin-left: -50vw;
  bottom: -17px;
  height: 89px;
  border-radius: 49% 51% 0 0 / 31% 33% 0 0;
  background: linear-gradient(to bottom, #ade07c 0%, #9bd56d 24%, #86c964 48%);
  box-shadow: 0 -8px 16px rgba(173, 224, 124, .34);
  z-index: 1;
}

.ground::before {
  content: "";
  display: block;
  position: absolute;
  inset: 27px 0 0;
  opacity: .28;
  background-image:
    linear-gradient(66deg, transparent 46%, #3e9b68 47% 50%, transparent 51%),
    linear-gradient(114deg, transparent 46%, #3e9b68 47% 50%, transparent 51%);
  background-size: 78px 18px;
  background-position: 10px 0, 18px 0;
  background-repeat: repeat;
}

.ground .grass { bottom: 57px; }
.ground .flower { bottom: 47px; }

.journey,
.challenge-card { z-index: 2; }

.island-preview {
  top: -34px;
  left: 40%;
  bottom: auto !important;
  opacity: .95;
  pointer-events: none;
  transition: opacity .35s ease;
}

.island-preview.is-gone {
  opacity: 0;
  visibility: hidden;
}

@media (min-width:781px) {
  .topbar { min-height: 210px; padding: 24px 64px; }

  .brand { font-size: 32px; }
  .brand-mark { width: 45px; height: 45px; font-size: 32px; }
  .brand-area .journey-title { font-size: 17px; padding-left: 53px; }

  .game-layout {
    max-width: 1280px;
    grid-template-columns: 1.3fr .85fr;
    gap: 30px;
    padding: 0 48px;
  }

  .journey { height: clamp(570px, 65vh, 720px); }
  .island { width: 145px; height: 58px; }
  .capybara { width: 130px; height: 130px; }

  .challenge-card {
    min-height: 450px;
    padding: 40px;
  }

  .question { font-size: 66px; }
  .prompt { font-size: 17px; }
  .answer-wrap { height: 62px; }
  button { height: 62px; font-size: 22px; }
}

/* Объёмная мультяшная капибара: свет, тени и скруглённые формы. */
.capybara {
  width: 118px;
  height: 118px;
  filter: drop-shadow(0 12px 8px rgba(101, 69, 48, .28));
}

.capybara-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (min-width:781px) {
  .capybara { width: 130px; height: 130px; }
}

.tip span {
  float: none;
  margin: 0 4px 0 0;
  vertical-align: middle;
}

.answer-choices { display: none; }

.head {
  background: radial-gradient(circle at 32% 24%, #e4a66c 0 8%, transparent 9%), linear-gradient(135deg, #d5965e 0%, #ae633d 62%, #79412e 100%);
  box-shadow: inset 8px 7px 10px rgba(255, 224, 174, .28), inset -8px -8px 11px rgba(80, 36, 29, .3), 0 4px 0 #81452f;
}

.body {
  background: linear-gradient(135deg, #d78e58 0%, #a85c38 66%, #82412d 100%);
  box-shadow: inset 8px 6px 9px rgba(255, 219, 162, .2), inset -7px -8px 10px rgba(81, 35, 27, .28), 0 5px 0 #82412e;
}

.ear, .leg {
  background: linear-gradient(135deg, #bd7448, #75402e);
  box-shadow: inset 3px 3px 4px rgba(255, 207, 151, .2);
}

.belly {
  background: radial-gradient(circle at 34% 25%, #f8d197, #d99157 68%);
  box-shadow: inset 0 -4px 5px rgba(143, 75, 42, .18);
}

.eye {
  background: radial-gradient(circle at 38% 28%, #fff 0 15%, #49333a 18% 62%, #1f1e29 65%);
  box-shadow: 0 1px 2px rgba(35, 22, 25, .35);
}

.nose { box-shadow: inset 1px 1px 1px rgba(255,255,255,.22); }

@media (max-width:780px) {
  .topbar { height: auto; min-height: 165px; }
  .top-actions { gap: 7px; }
  .mode-picker span,
  .skin-picker span { display: none; }
  .mode-picker select,
  .skin-picker select { padding: 6px 8px; font-size: 12px; }
  .top-actions .level-pill { font-size: 12px; padding: 6px 9px; }
  .brand-area .journey-title { font-size: 12px; }
}

@media (max-width:600px) {
  .sky { min-height: 100svh; }

  .topbar {
    height: auto;
    min-height: 150px;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .brand-area { justify-self: center; }

  .brand {
    justify-content: center;
    font-size: 23px;
  }

  .brand-mark { width: 32px; height: 32px; font-size: 23px; }

  .brand-area .journey-title {
    padding-left: 0;
    text-align: center;
    font-size: 12px;
  }

  .top-actions {
    width: 100%;
    grid-template-columns: auto 1fr;
    gap: 8px;
  }

  .top-actions .level-pill,
  .coins {
    justify-self: stretch;
    text-align: center;
  }

  .coins { justify-content: center; }
  .coins span { font-size: 11px; }
  .mode-picker select,
  .skin-picker select { font-size: 13px; }

  .game-layout { margin-top: 0; padding: 0 14px; }
  .journey { height: 250px; }
  .ground { top: 178px; bottom: auto; }

  .challenge-card {
    min-height: 0;
    margin-bottom: 34px;
    padding: 22px 18px 22px;
  }

  .question { font-size: clamp(42px, 14vw, 54px); }
  .prompt { margin: 8px 0 12px; }
  .tip { padding: 8px 6px; }

  .answer-wrap { pointer-events: none; }
  #submitBtn { display: none; }

  .answer-choices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-top: 12px;
  }

  button.answer-choice {
    width: 100%;
    height: 56px;
    margin: 0;
    border: 3px solid #fff;
    border-radius: 16px;
    background: linear-gradient(#8b79e5, #6d59c9);
    box-shadow: 0 5px 0 #5847ae;
    font-size: 27px;
  }

  button.answer-choice:active { transform: translateY(3px); box-shadow: 0 2px 0 #5847ae; }
}

@media (max-width:360px) {
  .topbar { padding-inline: 12px; }
  .coins { padding: 7px 8px; }
  .top-actions .level-pill { padding: 7px 8px; }
  .mode-picker select,
  .skin-picker select { font-size: 12px; }
  .journey { height: 225px; }
  .ground { top: 153px; }
}