/* ---------- 标题页 ---------- */
.title {
  background: var(--art-title, radial-gradient(ellipse 130% 34% at 50% 100%, var(--grass) 0 60%, transparent 61%), linear-gradient(var(--sky) 0%, var(--sky-2) 70%));
  gap: var(--gap-l);
}

.title__top {
  display: flex;
  justify-content: flex-end;
  flex: none;
}

.lang-btn {
  min-height: var(--touch);
  padding: var(--gap-xs) var(--gap-m);
  font-size: var(--fs-s);
}

.title__hero {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-m);
}

.title__art {
  position: relative;
  width: calc(var(--u) * 50);
  height: calc(var(--u) * 52);
  flex: none;
}

.title__tree {
  position: absolute;
  inset: 0;
}

.title__tree .sapling {
  display: none;
}

.title__banana {
  position: absolute;
  right: calc(var(--u) * -12);
  bottom: 0;
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 20);
  transform: rotate(-8deg);
}

.title__logo {
  margin: 0;
  font-size: calc(var(--u) * 16);
  font-weight: 900;
  line-height: 1.2;
  color: var(--sun);
  -webkit-text-stroke: calc(var(--u) * 1.6) var(--ink);
  paint-order: stroke fill;
  transform: rotate(-3deg);
}

.title__slogan {
  padding: var(--gap-xs) var(--gap-m);
  border-radius: var(--r-s);
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.title__menu {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  width: calc(var(--u) * 70);
  align-self: center;
}

.title__ver {
  flex: none;
  align-self: center;
  font-size: var(--fs-xs);
  opacity: 0.7;
}

/* ---------- 顶部栏 ---------- */
.hud {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  padding: var(--gap-s) var(--gap-m);
  z-index: var(--z-bar);
}

.hud__row {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
}

.hud__day {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.8);
  font-size: var(--fs-m);
  font-weight: 900;
  line-height: 1.2;
}

.hud__day .bar > i {
  background: var(--sun-deep);
}

.hud__money.is-neg {
  --bg: var(--red-soft);
}

.hud__stamina {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

.hud__stamina .ic {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6.6);
  flex: none;
}

.hud__stamina .bar {
  flex: 1;
  height: calc(var(--u) * 3.6);
}

.hud__stamina .bar > i {
  background: var(--sun-deep);
  transition: width 0.3s;
}

.hud__stamina.is-low .bar > i {
  background: var(--red);
}

.hud__stamina.is-weak {
  animation: shake-x 0.6s infinite;
}

.hud__stamina-num {
  min-width: calc(var(--u) * 8);
  text-align: right;
  font-size: var(--fs-s);
  font-weight: 700;
}

/* ---------- 土地页 ---------- */
.farm {
  background: var(--art-farm, linear-gradient(var(--sky) 0, var(--sky-2) calc(var(--u) * 34), var(--grass) calc(var(--u) * 34)));
  gap: var(--gap-m);
}

.farm__field {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--gap-m);
  padding: var(--gap-m);
  border-radius: var(--r-m);
  --bg: var(--grass);
  --sh: var(--shadow);
}

.plot {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: var(--r-s);
  --bg: var(--dirt);
  cursor: pointer;
}

.plot:active {
  transform: scale(0.97);
}

.plot[data-status='locked'] {
  --bg: var(--grass-dark);
  --bd: rgba(42, 36, 32, 0.45);
}

.plot[data-status='wild'] {
  --bg: #a3bf6e;
}

.plot__deco,
.plot__tree,
.plot__lock {
  position: absolute;
  pointer-events: none;
}

.plot__deco {
  inset: 6%;
}

.plot__tree {
  inset: -14% 4% 10%;
}

.plot__lock {
  inset: 28%;
  opacity: 0.75;
}

.plot__tree .sapling,
.plot__tree .grown,
.plot__tree .hand {
  display: none;
}

.plot.is-sapling .plot__tree .sapling,
.plot.is-grown .plot__tree .grown,
.plot[data-hands='1'] .hand-0,
.plot[data-hands='2'] .hand-0,
.plot[data-hands='2'] .hand-1,
.plot[data-hands='3'] .hand {
  display: inline;
}

.plot__bar {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 6%;
  height: calc(var(--u) * 2.4);
}

.plot__bar > i {
  background: var(--sun-deep);
}

.plot.is-fert .plot__bar > i {
  background: var(--leaf);
}

.plot__state {
  position: absolute;
  top: calc(var(--u) * -2);
  left: calc(var(--u) * -2);
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  padding: calc(var(--u) * 1);
  border-radius: 50%;
  pointer-events: none;
  animation: bob 1.4s ease-in-out infinite;
}

.plot__water {
  position: absolute;
  top: calc(var(--u) * -2.4);
  right: calc(var(--u) * -2.4);
  width: max(44px, calc(var(--u) * 11));
  height: max(44px, calc(var(--u) * 11));
  padding: calc(var(--u) * 1.4);
  border-radius: 50%;
  --sh: var(--shadow-s);
  cursor: pointer;
  z-index: 2;
  animation: bob 1.4s ease-in-out infinite;
}

.plot.is-digmode[data-status='tree'] {
  --bd: var(--red);
  --sh: 0 0 0 calc(var(--u) * 1) var(--red);
}

.plot.is-pop {
  animation: plot-pop 0.25s;
}

@keyframes plot-pop {
  50% {
    transform: scale(1.06);
  }
}

.farm__tools,
.shop__bar {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: var(--gap-m);
  padding-top: var(--gap-l);
}

.spacer {
  flex: 1;
}

.icon-btn--truck {
  width: calc(var(--u) * 25);
  --bg: var(--sun);
}

.icon-btn--truck .ic {
  width: calc(var(--u) * 17);
  height: calc(var(--u) * 11);
}

/* ---------- 店面页：俯视的超市 ---------- */
.shop {
  background: var(--shop-bg);
  gap: var(--gap-m);
}

.store {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  padding: calc(var(--u) * 7) var(--gap-m) var(--gap-m);
  border-radius: var(--r-m);
  border-width: calc(var(--line) * 2);
  --bd: var(--ink);
  --bg: var(--art-floor, repeating-conic-gradient(var(--floor-a) 0 25%, var(--floor-b) 0 50%) 0 0 / calc(var(--u) * 12) calc(var(--u) * 12));
  --sh: var(--shadow);
}

/* 门口：上边墙上的一块门垫 */
.door {
  position: absolute;
  top: calc(var(--u) * -1.6);
  left: 50%;
  width: 30%;
  height: calc(var(--u) * 6);
  transform: translateX(-50%);
  border-radius: var(--r-s);
  --bg: var(--art-door, repeating-linear-gradient(90deg, #b8643f 0 calc(var(--u) * 2), #a4532f calc(var(--u) * 2) calc(var(--u) * 4)));
  z-index: 1;
}

.store__floor {
  flex: 1 1 0;
  min-height: calc(var(--u) * 30);
}

.counter {
  flex: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-s);
  padding: var(--gap-s);
  border-radius: var(--r-m);
  --bg: var(--art-counter, var(--wood));
  z-index: 2;
}

.station {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.4);
  min-height: calc(var(--u) * 18);
  padding: var(--gap-xs);
  border-radius: var(--r-s);
  --bg: var(--paper);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.station .ic {
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 10);
}

.station.is-locked .ic {
  filter: grayscale(1);
  opacity: 0.4;
}

.station.is-target {
  --bg: var(--sun);
  animation: bob 0.9s ease-in-out infinite;
}

.station .badge {
  --bg: var(--leaf-dark);
}

/* 货架区：左边货架，右边紧挨着偷吃和垃圾桶 */
.shelf-area {
  flex: 1.25 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr calc(var(--u) * 17);
  gap: var(--gap-s);
}

.shelf-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--gap-m);
}

.shelf-side .station {
  min-height: 0;
}

/* 货架：从上往下看的木板，一块板一排 */
.shelves {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: var(--gap-m);
}

.board {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gap-xs);
  padding: calc(var(--u) * 0.6) var(--gap-xs);
  border-radius: var(--r-s);
  --bg: var(--art-board, var(--board));
}

.slot {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.slot.is-locked {
  cursor: default;
}

.slot.is-locked::after {
  content: '';
  position: absolute;
  inset: 18% 14%;
  border: calc(var(--line) * 0.8) dashed rgba(42, 36, 32, 0.35);
  border-radius: var(--r-s);
}

.slot__banana {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  pointer-events: none;
}

.slot__pct {
  position: absolute;
  bottom: calc(var(--u) * -0.6);
  left: 50%;
  transform: translateX(-50%);
  padding: 0 calc(var(--u) * 1);
  border-radius: 999px;
  border-width: calc(var(--line) * 0.75);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
}

.slot__n {
  position: absolute;
  top: 0;
  right: calc(var(--u) * 0.4);
  font-size: var(--fs-xs);
  font-weight: 900;
  line-height: 1;
  color: var(--white);
  -webkit-text-stroke: calc(var(--u) * 0.7) var(--ink);
  paint-order: stroke fill;
  pointer-events: none;
}

.slot.is-empty .slot__n {
  display: none;
}

.slot__pct.is-edible {
  --bg: #d6efb8;
}

.slot__pct.is-bad {
  --bg: var(--red-soft);
}

.slot.is-held .slot__banana {
  opacity: 0.25;
}

.slot.is-empty .slot__pct {
  display: none;
}

.banana .flies {
  display: none;
}

.banana.is-rotten .flies {
  display: inline;
  animation: buzz 0.5s linear infinite alternate;
}

@keyframes buzz {
  to {
    transform: translate(1.5px, -2px);
  }
}

/* ---------- 客人：走进来的对话气泡 ---------- */
.walkers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.walker {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 1.6s ease-in-out, opacity 0.4s;
  will-change: transform;
}

.walker.is-gone {
  opacity: 0;
  pointer-events: none;
}

.walker__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.walker.is-walking .walker__body {
  animation: waddle 0.42s ease-in-out infinite alternate;
}

@keyframes waddle {
  from {
    transform: rotate(-5deg) translateY(0);
  }
  to {
    transform: rotate(5deg) translateY(calc(var(--u) * -1.2));
  }
}

.walker__shadow {
  width: 46%;
  height: calc(var(--u) * 2.2);
  margin-top: calc(var(--u) * 1.6);
  border-radius: 50%;
  background: rgba(42, 36, 32, 0.18);
}

.bubble {
  width: 100%;
  padding: var(--gap-s);
  border-radius: var(--r-m);
  --sh: var(--shadow-s);
}

.bubble__clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.bubble__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: #e3dfd7;
}

.bubble.is-warn {
  animation: warn 1.2s ease-in-out infinite;
}

.bubble.is-warn .bubble__fill {
  background: #f3c4bb;
}

@keyframes warn {
  50% {
    filter: drop-shadow(0 0 calc(var(--u) * 2) var(--red));
  }
}

.bubble__tail {
  position: absolute;
  bottom: calc(var(--u) * -4);
  left: 40%;
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 5);
  pointer-events: none;
}

.wants {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 0.6) var(--gap-s);
}

.want {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.4);
  font-size: var(--fs-m);
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.want .ic {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 9);
}

.want.is-done {
  display: none;
}

.want__range {
  display: block;
  width: 100%;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.3;
}

.bubble__done {
  position: relative;
  display: none;
  font-size: var(--fs-l);
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}

.walker[data-mood='happy'] .wants,
.walker[data-mood='angry'] .wants {
  display: none;
}

.walker[data-mood='happy'] .bubble__done,
.walker[data-mood='angry'] .bubble__done {
  display: block;
}

.walker[data-mood='happy'] .bubble {
  --bg: var(--sun);
}

.walker[data-mood='angry'] .bubble {
  --bg: var(--red-soft);
}

.walker[data-mood='sick'] .bubble {
  --bg: #d8ecb4;
}

.walker.is-special .bubble {
  --bg: #fff3c4;
  --bd: #7a5a10;
}

.sparkles {
  position: absolute;
  inset: calc(var(--u) * -3);
  pointer-events: none;
}

.sparkles .ic {
  position: absolute;
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 5);
  animation: twinkle 1.4s ease-in-out infinite;
}

@keyframes twinkle {
  0%,
  100% {
    transform: scale(0.4) rotate(0);
    opacity: 0.2;
  }
  50% {
    transform: scale(1) rotate(20deg);
    opacity: 1;
  }
}

/* 拿在手上的东西 */
.held {
  position: absolute;
  left: 0;
  top: 0;
  z-index: var(--z-held);
  width: calc(var(--u) * 17);
  height: calc(var(--u) * 16);
  pointer-events: none;
  display: none;
  filter: drop-shadow(0 calc(var(--u) * 1.4) 0 rgba(0, 0, 0, 0.25));
}

.held.is-on {
  display: block;
}