/* V37: phone-only clarity for Aman, Hungry Notes and the treehouse. */
.treehouse-mobile-status {
  display: none;
}

.league-champion {
  margin: 8px 0 4px;
  padding: 9px 10px;
  border-radius: 6px;
  color: #173228;
  background: #f2df92;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.35;
}

.league-rule {
  margin: 5px 0 8px;
  color: #607168;
  font-size: .61rem;
  line-height: 1.45;
}

.wechat-manual-options {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px !important;
  margin-top: 5px;
}

.wechat-manual-options span {
  padding: 3px 6px;
  border-radius: 999px;
  color: #173228;
  background: #f2df92;
  font-size: .56rem;
  font-weight: 800;
  line-height: 1.2;
}

.coupon-receipt {
  display: grid;
  gap: 8px;
  margin-top: 9px;
  padding: 11px;
  border-radius: 6px;
  color: #173228;
  background: #e3eee5;
}

.coupon-receipt[hidden] {
  display: none;
}

@media (max-width: 640px) and (orientation: portrait) {
  body:not(.needs-entry) .hungry-notes-link {
    display: inline-flex !important;
    width: auto !important;
    min-width: 74px !important;
    max-width: 82px !important;
    padding: 3px 4px !important;
    gap: 4px !important;
  }

  body:not(.needs-entry) .hungry-notes-link svg {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px;
  }

  body:not(.needs-entry) #hungryNotesTopLabel {
    position: static !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    max-width: 48px !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    color: #173228;
    font-size: .58rem !important;
    line-height: 1.1;
    white-space: nowrap !important;
  }

  body:not(.needs-entry) .mascot-bubble {
    padding-right: 98px !important;
  }

  body:not(.needs-entry) .mascot-bubble strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3 !important;
  }

  body:not(.needs-entry) .treehouse-card {
    top: 6px !important;
    right: 5px !important;
    grid-template-columns: 54px !important;
    justify-items: center;
    width: 84px !important;
    min-width: 84px !important;
    min-height: 99px !important;
    padding: 7px 6px 6px !important;
    gap: 2px !important;
    overflow: visible;
    border: 0 !important;
    border-radius: 7px;
    background: #f7f4e9 !important;
    box-shadow: 0 8px 18px rgba(23, 50, 40, .12) !important;
    transform: none !important;
    touch-action: manipulation;
  }

  body:not(.needs-entry) .treehouse-card.is-open {
    grid-template-columns: 54px minmax(92px, 1fr) !important;
    justify-items: stretch;
    width: 190px !important;
    padding: 8px !important;
  }

  body:not(.needs-entry) .treehouse-art {
    position: relative;
    width: 54px !important;
    height: 48px !important;
    transform: none !important;
  }

  body:not(.needs-entry) .treehouse-roof {
    top: 2px;
    left: 4px;
    width: 46px;
    height: 24px;
    border: 0;
    border-radius: 4px 4px 2px 2px;
    background: #2d6b50;
    clip-path: polygon(50% 0, 100% 72%, 91% 100%, 9% 100%, 0 72%);
    filter: drop-shadow(0 2px 0 #173228);
  }

  body:not(.needs-entry) .treehouse-roof::before {
    content: "";
    position: absolute;
    top: 5px;
    right: 8px;
    width: 7px;
    height: 11px;
    border-radius: 4px 4px 1px 1px;
    background: #f2cb59;
  }

  body:not(.needs-entry) .treehouse-roof::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 11px;
    width: 25px;
    height: 3px;
    border-radius: 999px;
    background: rgba(247, 244, 233, .72);
    transform: rotate(-8deg);
  }

  body:not(.needs-entry) .treehouse-wall {
    left: 10px;
    bottom: 3px;
    width: 34px;
    height: 27px;
    border: 0;
    border-radius: 3px;
    background: #d6a85b;
    box-shadow: inset 0 -3px 0 rgba(111, 84, 58, .18), 0 2px 0 #173228;
  }

  body:not(.needs-entry) .treehouse-wall::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 5px;
    width: 7px;
    height: 7px;
    border: 2px solid #173228;
    border-radius: 50%;
    background: #d8e8df;
  }

  body:not(.needs-entry) .treehouse-wall i {
    left: 19px;
    width: 10px;
    height: 16px;
    border: 0;
    border-radius: 6px 6px 1px 1px;
    background: #173228;
  }

  body:not(.needs-entry) .treehouse-wall i::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 2px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #f2cb59;
  }

  body:not(.needs-entry) .treehouse-branch {
    right: 0;
    bottom: 0;
    width: 54px;
    height: 4px;
    border-radius: 999px;
    background: #74523a;
    transform: rotate(-3deg);
  }

  body:not(.needs-entry) .treehouse-copy {
    justify-items: center;
    gap: 0;
  }

  body:not(.needs-entry) .treehouse-copy > span {
    display: none;
  }

  body:not(.needs-entry) .treehouse-copy small {
    display: block;
    color: #173228;
    font-size: .58rem;
    font-weight: 800;
    line-height: 1.12;
    text-align: center;
    white-space: nowrap;
  }

  body:not(.needs-entry) .treehouse-copy .treehouse-mobile-status {
    display: block;
    margin-top: 2px;
    color: #6a5a3e;
    font-size: .5rem;
    font-weight: 700;
  }

  body:not(.needs-entry) .treehouse-card.is-open .treehouse-copy {
    justify-items: start;
  }

  body:not(.needs-entry) .treehouse-card.is-open .treehouse-copy > span {
    display: flex;
  }

  body:not(.needs-entry) .treehouse-card.is-open .treehouse-copy small {
    text-align: left;
  }

  body:not(.needs-entry) .treehouse-card.is-open .treehouse-upgrade:not([hidden]) {
    display: flex;
    grid-column: 1 / -1;
    width: 100%;
  }

  body:not(.needs-entry) .league-rule {
    font-size: .58rem;
  }
}