/* Final overrides for the eastern-healing level UI experiment. */

.sorting-zone {
  grid-template-rows: 56px minmax(0, 1fr) 54px;
}

.section-heading {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  height: auto;
  z-index: 1;
  padding: 5px 11px 8px;
  align-items: start;
  pointer-events: none;
}

.water-sort-canvas {
  grid-row: auto;
  align-self: auto;
  position: relative;
  z-index: 3;
}

.bottom-actions { grid-row: auto; }

.progress-seal {
  z-index: 4;
  right: -48px;
  bottom: 5px;
  width: 46px;
  height: 46px;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  align-items: baseline;
  gap: 0;
  padding: 0;
  border: 2px solid rgb(156 57 43 / 75%);
  outline: 1px solid rgb(156 57 43 / 36%);
  outline-offset: 3px;
  border-radius: 0;
  background: transparent;
  color: #9c392b;
  box-shadow: none;
  transform: rotate(-4deg);
}

.progress-seal::after { display: none; }
.progress-seal strong { margin: 0; font: 700 17px/1 Georgia, serif; }
.progress-seal > span:last-child { font-size: 9px; }

@media (max-height: 735px) {
  .sorting-zone { grid-template-rows: 47px minmax(0, 1fr) 49px; }
}

/* Chapter framework and the featured Mid-Autumn entrance. */
.home-screen {
  grid-template-rows: minmax(245px, 1fr) auto auto auto;
  gap: 14px;
}

.season-feature {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 82px;
  display: grid;
  grid-template-columns: 52px 1fr 18px;
  align-items: center;
  gap: 12px;
  padding: 13px 17px;
  overflow: hidden;
  border: 1px solid rgb(170 103 64 / 22%);
  border-radius: 20px;
  background:
    radial-gradient(circle at 11% 50%, rgb(225 214 170 / 16%) 0 43px, transparent 44px),
    linear-gradient(115deg, rgb(95 111 104 / 96%), rgb(55 76 75 / 98%));
  color: #fff8df;
  text-align: left;
  box-shadow: 0 10px 24px rgb(49 68 65 / 20%);
}

.season-feature::after {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  right: -74px;
  top: -82px;
  border: 1px solid rgb(248 225 163 / 18%);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgb(248 225 163 / 4%), 0 0 0 45px rgb(248 225 163 / 2%);
}

.season-feature > span:nth-child(2) {
  display: grid;
  place-items: center start;
  align-self: stretch;
}
.season-feature strong {
  color: #fff7dd;
  font: 700 24px/1 "Songti SC", serif;
  letter-spacing: .18em;
  transform: translateY(-1px);
}
.season-feature b { position: relative; z-index: 1; font: 300 27px/1 sans-serif; }
.season-feature:active { transform: translateY(1px) scale(.992); }

.season-moon {
  position: relative;
  width: 46px;
  height: 46px;
  box-sizing: border-box;
  border: 1.5px solid rgb(88 76 55 / 70%);
  border-radius: 50%;
  background: #f1dfad;
  box-shadow: inset 3px -3px 0 rgb(151 129 82 / 9%);
}

.season-moon::before,
.season-moon::after {
  content: "";
  position: absolute;
  border: 1px solid rgb(121 103 72 / 19%);
  border-radius: 50%;
}
.season-moon::before { width: 8px; height: 5px; left: 9px; top: 12px; transform: rotate(-14deg); }
.season-moon::after { width: 5px; height: 7px; right: 9px; bottom: 10px; transform: rotate(18deg); }

.chapter-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 3px;
  border-radius: 16px;
  background: rgb(114 100 81 / 7%);
}

.levels-screen {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.chapter-tab {
  min-height: 38px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: #817368;
  font: 600 14px/1 "Songti SC", serif;
  letter-spacing: .08em;
}

.chapter-tab.is-active {
  background: rgb(255 253 247 / 92%);
  color: #81453a;
  box-shadow: 0 4px 12px rgb(76 58 41 / 9%);
}

@media (max-height: 735px) {
  .home-screen { grid-template-rows: minmax(205px, 1fr) auto auto auto; gap: 10px; }
  .season-feature { min-height: 72px; padding-block: 10px; }
}

/* Real mobile browsers: use the visible viewport instead of the desktop phone mockup. */
@media (pointer: coarse), (max-width: 600px) {
  html,
  body {
    width: 100%;
    height: var(--app-height, 100dvh);
    min-height: 0;
    overflow: hidden;
  }

  body {
    display: block;
  }

  .phone-stage {
    width: var(--app-width, 100vw);
    max-width: none;
    height: var(--app-height, 100dvh);
    max-height: none;
    border-radius: 0;
  }
}

/* Some Android browsers expose a desktop-sized layout viewport on phones. */
html.is-wide-mobile-viewport body {
  width: var(--app-width);
  height: var(--app-height);
}

html.is-wide-mobile-viewport .phone-stage {
  width: var(--corrected-app-width);
  height: var(--corrected-app-height);
  transform: scale(var(--viewport-correction-scale));
  transform-origin: left top;
}

/*
 * Mobile browser chrome leaves a shorter game viewport than a full-screen
 * mini-app. Detect it from the corrected logical aspect ratio and reclaim
 * decorative spacing instead of scaling down the artwork and bottle grid.
 */
html.is-compact-game-viewport .artwork-wrap,
html.is-compact-game-viewport .artwork-wrap.is-landscape {
  top: max(3px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
  bottom: 10px;
}

html.is-compact-game-viewport .sorting-zone {
  padding: 10px 14px max(4px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  grid-template-rows: 38px minmax(0, 1fr) 49px;
}

html.is-compact-game-viewport .section-heading {
  padding: 0 9px 3px;
}

html.is-compact-game-viewport .bottom-actions {
  height: 47px;
}

html.is-compact-game-viewport .bottom-actions button {
  height: 40px;
}

/* Scale-based unfolding works in older Android WebViews where clip-path animation can stall. */
.original-unfold {
  position: relative;
  clip-path: none;
  opacity: .65;
  transform: scaleX(.01);
  transform-origin: center;
}

.reveal-panel.is-visible .original-unfold {
  animation-name: original-unfold;
}

.original-unfold img {
  opacity: 1;
  transition: opacity 180ms ease;
}

.original-unfold[data-image-status="loading"] img,
.original-unfold[data-image-status="error"] img {
  opacity: 0;
}

.original-unfold::after {
  position: absolute;
  inset: 50% 12px auto;
  color: #81776d;
  font-size: 12px;
  text-align: center;
  transform: translateY(-50%);
}

.original-unfold[data-image-status="loading"]::after {
  content: "画卷载入中…";
}

.original-unfold[data-image-status="error"]::after {
  content: "画卷暂未载入，请稍后重试";
}

@keyframes original-unfold {
  0% {
    opacity: .65;
    transform: scaleX(.01);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}