/* ---------- 方框 ----------
   边框、底色、投影画在 ::before 上，圆角不完全对称，带一点手画感。
   各组件用 --bg（底色）、--bd（边框色）、--sh（投影）来设置。 */
:where(.btn, .icon-btn, .card, .pill, .row, .price-btn, .modal, .bubble, .station, .plot, .lv-tag, .badge, .bubble-tag, .toast, .tut__card, .slot__pct, .farm__field, .store, .counter, .board, .title__slogan, .plot__water, .plot__state, .bar, .door) {
  position: relative;
  isolation: isolate;
  --bg: var(--white);
}

:is(.btn, .icon-btn, .card, .pill, .row, .price-btn, .modal, .bubble, .station, .plot, .lv-tag, .badge, .bubble-tag, .toast, .tut__card, .slot__pct, .farm__field, .store, .counter, .board, .title__slogan, .plot__water, .plot__state, .bar, .door) {
  border: var(--line) solid transparent;
  background: transparent;
  box-shadow: none;
}

:is(.btn, .icon-btn, .card, .pill, .row, .price-btn, .modal, .bubble, .station, .plot, .lv-tag, .badge, .bubble-tag, .toast, .tut__card, .slot__pct, .farm__field, .store, .counter, .board, .title__slogan, .plot__water, .plot__state, .bar, .door)::before {
  content: '';
  position: absolute;
  inset: calc(var(--line) * -1);
  z-index: -1;
  border: var(--line) solid var(--bd, var(--ink));
  border-radius: inherit;
  background: var(--bg, var(--white));
  box-shadow: var(--sh, none);
  pointer-events: none;
}

/* 一点手画感：框外再描一条淡淡的、稍微错开的线 */
:is(.btn, .icon-btn, .card, .row, .price-btn, .modal, .bubble, .station, .plot, .farm__field, .store, .counter, .board, .tut__card, .title__slogan, .pill, .toast)::after {
  content: '';
  position: absolute;
  inset: calc(var(--line) * -1.6) calc(var(--line) * -0.8) calc(var(--line) * -0.6) calc(var(--line) * -1.4);
  z-index: -1;
  border: calc(var(--line) * 0.55) solid var(--bd, var(--ink));
  border-radius: var(--r-sketch, inherit);
  opacity: 0.4;
  transform: rotate(-0.6deg);
  pointer-events: none;
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-s);
  min-height: var(--touch);
  padding: var(--gap-s) var(--gap-l);
  border-radius: var(--r-s);
  --sh: var(--shadow);
  font-size: var(--fs-m);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.08s;
}

.btn:active {
  transform: scale(0.96);
}

.btn--primary {
  --bg: var(--sun);
}

.btn--danger {
  --bg: var(--red);
  color: var(--white);
}

.btn--big {
  font-size: var(--fs-l);
  min-height: calc(var(--u) * 15);
}

.btn.is-on {
  --bg: var(--ink);
  color: var(--white);
}

.icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.5);
  width: calc(var(--u) * 17);
  min-height: calc(var(--u) * 17);
  padding: var(--gap-xs);
  border-radius: var(--r-s);
  --sh: var(--shadow);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.08s;
}

.icon-btn:active {
  transform: scale(0.95);
}

.icon-btn .ic {
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 8);
}

.icon-btn.is-on {
  --bg: var(--ink);
  color: var(--white);
}

.icon-btn--sq {
  width: var(--touch);
  min-height: var(--touch);
  height: var(--touch);
}

.icon-btn--sq .ic {
  width: 62%;
  height: 62%;
}

/* 右上角数量角标 */
.badge {
  position: absolute;
  top: calc(var(--u) * -2.2);
  right: calc(var(--u) * -2.2);
  min-width: calc(var(--u) * 7);
  padding: 0 calc(var(--u) * 1.4);
  border-radius: 999px;
  --bg: var(--red);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/* 气泡标签（货车 几/几） */
.bubble-tag {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, calc(var(--u) * -1.4));
  padding: 0 var(--gap-s);
  border-radius: 999px;
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.bubble-tag.is-full {
  --bg: var(--red-soft);
}

/* ---------- 卡片 ---------- */
.card {
  border-radius: var(--r-m);
  --bg: var(--paper);
  --sh: var(--shadow);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: calc(var(--u) * 0.6) var(--gap-s);
  border-radius: var(--r-s);
  font-size: var(--fs-m);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

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

.lv-tag {
  display: inline-block;
  padding: 0 var(--gap-s);
  border-radius: var(--r-s);
  --bg: var(--ink);
  color: var(--white);
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1.5;
}

.lv-tag--next {
  --bg: var(--sun);
  color: var(--ink);
}

/* ---------- 进度条 ---------- */
.bar {
  height: calc(var(--u) * 2.8);
  border-radius: 999px;
  --bg: var(--paper-2);
}

.bar > i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--leaf);
  border-radius: 999px;
}

/* ---------- 弹窗 ---------- */
.modal-layer {
  position: absolute;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--safe-top) var(--gap-l) var(--safe-bottom);
  background: var(--scrim);
}

.modal-layer.is-open {
  display: flex;
  animation: fade-in 0.15s ease-out;
}

.modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  border-radius: var(--r-m);
  --bg: var(--paper);
  animation: pop-in 0.18s cubic-bezier(0.3, 1.4, 0.6, 1);
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  padding: var(--gap-m) var(--gap-l);
}

.modal__title {
  margin: 0;
  font-size: var(--fs-l);
  font-weight: 900;
  line-height: 1.2;
}

.modal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--gap-s) var(--gap-l) var(--gap-l);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: var(--fs-m);
  scrollbar-color: var(--gray) transparent;
  scrollbar-width: thin;
}

.modal__body::-webkit-scrollbar {
  width: calc(var(--u) * 1.6);
}

.modal__body::-webkit-scrollbar-thumb {
  background: var(--gray);
  border-radius: 999px;
}

.modal__body::-webkit-scrollbar-track {
  background: transparent;
}

.modal__body p {
  margin: 0 0 var(--gap-s);
}

.modal__body p:last-child {
  margin-bottom: 0;
}

.modal__foot {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  padding: var(--gap-m) var(--gap-l) var(--gap-l);
}

.modal__foot:empty {
  display: none;
}

.modal__foot .btn {
  width: 100%;
}

/* ---------- 列表行（商店、成就、种子） ---------- */
.list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  padding: var(--gap-xs);
}

.row {
  display: grid;
  grid-template-columns: calc(var(--u) * 13) 1fr auto;
  align-items: center;
  gap: var(--gap-m);
  padding: var(--gap-m);
  border-radius: var(--r-m);
}

.row--btn {
  width: 100%;
  text-align: left;
  cursor: pointer;
  --sh: var(--shadow-s);
}

.row--btn:active {
  transform: scale(0.98);
}

.row__icon {
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
  display: flex;
  align-items: center;
  justify-content: center;
}

.row__icon .spr {
  max-width: 100%;
  max-height: 100%;
}

.row__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.8);
}

.row__name {
  font-size: var(--fs-m);
  font-weight: 900;
  line-height: 1.3;
}

.row__desc {
  font-size: var(--fs-s);
  line-height: 1.5;
  color: var(--ink-soft);
}

.row__lv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-xs);
  font-size: var(--fs-s);
  font-weight: 700;
}

.row.is-locked,
.row.ach-row:not(.is-got) {
  --bg: var(--paper-2);
}

.row.is-locked .row__icon,
.row.ach-row:not(.is-got) .row__icon {
  filter: grayscale(1);
  opacity: 0.45;
}

.row.ach-row.is-got {
  --bg: #fff6cf;
}

.price-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  min-width: calc(var(--u) * 22);
  min-height: var(--touch);
  padding: var(--gap-xs) var(--gap-m);
  border-radius: var(--r-s);
  --bg: var(--paper-2);
  --sh: var(--shadow-s);
  font-size: var(--fs-m);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.price-btn .ic {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
}

.price-btn:active {
  transform: scale(0.95);
}

.price-btn.is-can {
  --bg: var(--sun);
}

.price-btn.is-poor {
  color: var(--ink-soft);
}

.price-btn.is-done {
  --sh: none;
  cursor: default;
}

/* ---------- 提示 ---------- */
.toasts {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--safe-top) + var(--u) * 30);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-s);
  pointer-events: none;
  padding: 0 var(--gap-l);
}

.toast {
  max-width: 100%;
  padding: var(--gap-xs) var(--gap-m);
  border-radius: var(--r-s);
  --sh: var(--shadow-s);
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  animation: toast 2.4s ease-out forwards;
}

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

.toast--good,
.toast--ach {
  --bg: var(--sun);
}

.toast--ach {
  font-size: var(--fs-m);
}

.float-text {
  position: absolute;
  z-index: var(--z-toast);
  transform: translate(-50%, -50%);
  font-size: var(--fs-l);
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
  -webkit-text-stroke: calc(var(--u) * 0.9) var(--white);
  paint-order: stroke fill;
  pointer-events: none;
  white-space: nowrap;
  animation: float-up 1.1s ease-out forwards;
}

.float-text--bad {
  color: var(--red);
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes pop-in {
  from {
    transform: scale(0.88);
    opacity: 0;
  }
}

@keyframes toast {
  0% {
    transform: translateY(calc(var(--u) * 2));
    opacity: 0;
  }
  8%,
  80% {
    transform: none;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes float-up {
  0% {
    opacity: 0;
    margin-top: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    margin-top: calc(var(--u) * -12);
  }
}

@keyframes shake-x {
  20%,
  60% {
    transform: translateX(calc(var(--u) * -1.5));
  }
  40%,
  80% {
    transform: translateX(calc(var(--u) * 1.5));
  }
}

.is-shaking {
  animation: shake-x 0.35s;
}

@keyframes bob {
  50% {
    transform: translateY(calc(var(--u) * -0.8));
  }
}

.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-s);
}

.menu-col {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

.stat-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-s);
  font-size: var(--fs-l);
  font-weight: 900;
}

.stat-line .ic {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
}

/* ---------- 替换用的图片（assets/art/） ---------- */
.art {
  display: block;
  width: 100%;
  height: 100%;
}

.art-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* 一把香蕉：同一张单根的图按根数扇形排开，转轴在果柄（左上） */
.art-bunch {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.art-bunch .art-finger {
  position: absolute;
  inset: 0;
  transform-origin: 20% 17.4%;
}

.tree-art {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.tree-art > span {
  position: absolute;
  inset: 0;
}

.tree-art .art-hand {
  position: absolute;
  width: 36%;
  height: 30%;
}

.tree-art .hand-0 {
  left: 20%;
  top: 41%;
}

.tree-art .hand-1 {
  left: 50%;
  top: 45%;
}

.tree-art .hand-2 {
  left: 30%;
  top: 55%;
}