/* Final overrides for the August mobile layout pass. */
.mascot-scene {
  position: relative;
}

.treehouse-card {
  top: 18px;
  right: 8px;
  bottom: auto;
}

.mascot-bubble {
  padding-right: 150px;
}

.onboarding-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 10px;
  margin-top: 22px;
}

.onboarding-actions .onboarding-home-link,
.onboarding-actions #onboardingStart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin: 0;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
}

.onboarding-home-link {
  color: var(--ink);
  background: #dfe8e2;
}

@media (max-width: 640px) and (orientation: portrait) {
  body:not(.needs-entry) .stage {
    grid-template-rows: auto auto minmax(0, 1fr);
    padding: 7px 8px 9px;
    border: 0;
    overflow: hidden;
  }

  body:not(.needs-entry) .mascot-scene {
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 8px;
    min-height: 126px;
    padding: 0 2px 4px;
  }

  body:not(.needs-entry) .mascot-card {
    min-height: 122px;
  }

  body:not(.needs-entry) .sloth {
    position: relative;
    z-index: 12;
    width: 126px;
  }

  body:not(.needs-entry) .family-roost {
    z-index: 18;
    bottom: -2px;
    transform: translateX(-50%) scale(0.58);
  }

  body:not(.needs-entry) .mascot-bubble {
    min-height: 110px;
    padding: 13px 88px 13px 12px;
    border: 0;
    background: #e5ece7;
    box-shadow: none;
  }

  body:not(.needs-entry) .mascot-bubble strong,
  body:not(.needs-entry) .mascot-bubble span:not(.mascot-name) {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }

  body:not(.needs-entry) .mascot-bubble strong {
    font-size: 0.84rem;
    line-height: 1.24;
  }

  body:not(.needs-entry) .mascot-bubble span:not(.mascot-name) {
    font-size: 0.65rem;
    line-height: 1.3;
  }

  body:not(.needs-entry) .treehouse-card {
    top: 7px;
    right: 3px;
    bottom: auto;
    z-index: 16;
    grid-template-columns: 31px minmax(48px, auto);
    gap: 4px;
    padding: 5px 6px;
    border: 0;
    background: #f3f5ef;
    box-shadow: 0 7px 18px rgba(23, 50, 40, 0.12);
    transform: scale(0.78);
    transform-origin: top right;
  }

  body:not(.needs-entry) .treehouse-help {
    border: 0;
    background: #d8e2da;
  }

  body:not(.needs-entry) .challenge,
  body:not(.needs-entry) .challenge.is-awaiting-answer {
    align-content: start;
    gap: 9px;
    min-height: 0;
    padding: 13px 11px 15px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    background: #f7f9f7;
    box-shadow: none;
  }

  body:not(.needs-entry) .challenge-meta {
    gap: 7px;
    min-height: 40px;
    margin: 0;
  }

  body:not(.needs-entry) .previous-button,
  body:not(.needs-entry) .pass-button {
    min-height: 40px;
    border: 0;
    border-radius: 5px;
    font-size: 0.72rem;
  }

  body:not(.needs-entry) .previous-button { background: #e5e9e5; }
  body:not(.needs-entry) .pass-button { background: #efe7e1; }

  body:not(.needs-entry) .round-timer {
    min-height: 40px;
    border: 0;
    background: #dce7df;
  }

  body:not(.needs-entry) .challenge h1 {
    display: block;
    max-height: none;
    min-height: 0;
    margin: 1px 0 2px;
    overflow: visible;
    font-size: clamp(1.08rem, 4.8vw, 1.28rem);
    line-height: 1.28;
    overflow-wrap: anywhere;
    text-wrap: balance;
    -webkit-box-orient: initial;
    -webkit-line-clamp: unset;
  }

  body:not(.needs-entry) .challenge h1.is-long {
    font-size: clamp(0.98rem, 4.25vw, 1.14rem);
  }

  body:not(.needs-entry) .challenge h1.is-very-long {
    font-size: clamp(0.9rem, 3.9vw, 1.02rem);
    line-height: 1.3;
  }

  body:not(.needs-entry) .choice-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
    gap: 9px;
  }

  body:not(.needs-entry) .choice-wrap,
  body:not(.needs-entry) .choice-wrap .choice {
    min-height: 68px;
  }

  body:not(.needs-entry) .choice-wrap .choice {
    padding: 11px 48px 11px 13px;
    border: 0;
    border-radius: 6px;
    background: #e9efeb;
  }

  body:not(.needs-entry) .choice-grid.has-examples .choice-wrap,
  body:not(.needs-entry) .choice-grid.has-examples .choice {
    min-height: 92px;
  }

  body:not(.needs-entry) .choice-speaker {
    border: 0;
    background: #d6e2da;
  }

  body:not(.needs-entry) .feedback {
    min-height: 28px;
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.35;
  }

  body:not(.needs-entry) .result-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    margin: 0;
  }

  body:not(.needs-entry) .hungry-save-button,
  body:not(.needs-entry) .continue-button,
  body:not(.needs-entry) .refill-shortcut {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 9px 12px;
    border: 0;
    border-radius: 6px;
    font-size: 0.75rem;
    line-height: 1.25;
  }

  body:not(.needs-entry) .hungry-save-button { background: #e8e3cf; }
  body:not(.needs-entry) .continue-button { background: #b8cba8; }
  body:not(.needs-entry) .refill-shortcut { background: #dfe7e1; }

  body:not(.needs-entry) .explanation-panel,
  body:not(.needs-entry) .explanation-lock button {
    border: 0;
  }

  .onboarding-shell {
    padding: 24px 18px 18px;
    border: 0;
    box-shadow: 0 18px 55px rgba(7, 24, 18, 0.24);
  }

  .onboarding-actions {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  }
}

@media (max-width: 640px) and (max-height: 700px) {
  body:not(.needs-entry) .mascot-scene {
    grid-template-columns: 102px minmax(0, 1fr);
    min-height: 106px;
  }

  body:not(.needs-entry) .mascot-card { min-height: 104px; }
  body:not(.needs-entry) .sloth { width: 108px; }

  body:not(.needs-entry) .mascot-bubble {
    min-height: 92px;
    padding: 10px 78px 10px 10px;
  }

  body:not(.needs-entry) .treehouse-card { transform: scale(0.68); }
}