* {
  box-sizing: border-box;
}

:root {
  --motion-fast: 120ms;
  --motion-standard: 280ms;
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-enter: cubic-bezier(0, 0, 0.2, 1);
  --motion-pop: cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  color: #4a2b16;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 241, 178, 0.18), transparent 34%),
    linear-gradient(180deg, #2b5f69, #3a5f35 52%, #50341d);
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.app-shell {
  position: relative;
  width: min(430px, 100vw);
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(12px + env(safe-area-inset-top)) 12px 92px;
  overflow-x: hidden;
  isolation: isolate;
  background: #6d983d;
}

.app-shell::before {
  content: "";
  position: fixed;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(430px, 100vw);
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(40, 61, 22, 0.12)),
    url("./assets/public/unified-farm-world-v1.jpg") center top / cover no-repeat;
  transform: translateX(-50%);
}

.beta-disclosure {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  padding: 7px 9px;
  color: #583316;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 800;
  background: rgba(255, 236, 179, 0.96);
  border: 2px solid #865228;
  border-radius: 9px;
  box-shadow: 0 3px 0 rgba(67, 38, 17, 0.66);
}

.beta-disclosure strong {
  flex: 0 0 auto;
  padding: 2px 5px;
  color: #fff4d0;
  background: #bf6325;
  border-radius: 4px;
}

.view {
  position: relative;
  z-index: 1;
}

.view-enter > section:not(.menu-checkout) {
  animation: farm-rise-in var(--motion-standard) var(--motion-enter) both;
}

.view-enter > section:nth-of-type(2) {
  animation-delay: 45ms;
}

.view-enter > section:nth-of-type(3) {
  animation-delay: 90ms;
}

.view-enter > section:nth-of-type(4) {
  animation-delay: 125ms;
}

.view-enter > section:nth-of-type(n + 5) {
  animation-delay: 155ms;
}

.view-enter .home-plot-card,
.view-enter .plot-card,
.view-enter .package-card,
.view-enter .service-card,
.view-enter .dish-card {
  animation: farm-item-enter 330ms var(--motion-enter) both;
  animation-delay: calc(90ms + var(--motion-index, 0) * 22ms);
}

.view-home {
  min-height: calc(100dvh - 104px);
}

.compact-hud {
  position: relative;
  z-index: 3;
  padding: 12px 12px 10px;
  background:
    linear-gradient(180deg, rgba(255, 244, 217, 0.94), rgba(255, 227, 176, 0.9));
  border: 3px solid #80512e;
  border-radius: 14px;
  box-shadow:
    0 5px 0 #4f301c,
    inset 0 0 0 2px rgba(255, 255, 255, 0.42);
}

.immersive-hud {
  position: relative;
  z-index: 3;
  width: calc(100% + 24px);
  height: 106px;
  margin:
    calc(-12px - env(safe-area-inset-top))
    -12px
    0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.immersive-hud::before {
  display: none;
}

.immersive-hud::after {
  display: none;
}

.immersive-title {
  position: absolute;
  top: -1px;
  left: 19.5%;
  z-index: 1;
  width: 61%;
  height: 80px;
  display: grid;
  place-items: center;
  padding: 13px 25px 2px;
  color: #fff0c5;
  text-align: center;
  background: url("./assets/public/game-title-board-v1.png") center / 100% 100% no-repeat;
  text-shadow:
    0 2px 0 #4b260e,
    1px 0 0 #4b260e,
    -1px 0 0 #4b260e;
}

.immersive-title h1 {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  font-size: 22px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.immersive-profile {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 58px;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 0;
  color: #fff0c5;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  text-align: center;
  background: transparent;
  text-shadow:
    0 2px 0 #3d200e,
    1px 0 0 #3d200e,
    -1px 0 0 #3d200e;
}

.immersive-profile strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.immersive-profile strong {
  width: 58px;
  font-size: 11px;
  font-weight: 800;
}

.immersive-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  background: linear-gradient(180deg, #e9c57d, #ae7138);
  border: 3px solid #68401f;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 240, 181, 0.42);
}

.immersive-avatar-img {
  width: 40px;
  height: 44px;
  object-fit: contain;
}

.immersive-level {
  position: absolute;
  top: 78px;
  left: 14px;
  width: 44px;
  height: 17px;
  display: grid;
  place-items: center;
  color: #fff4cf;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  line-height: 1;
  background: linear-gradient(180deg, #df7b51, #bd5033);
  border: 1px solid #78351e;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 236, 184, 0.46);
  text-shadow: 0 1px 0 #6b3216;
}

.immersive-resource {
  position: absolute;
  right: 7px;
  width: 72px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 8px;
  color: #5c310f;
  white-space: nowrap;
  background: rgba(255, 245, 211, 0.94);
  border: 2px solid #744523;
  border-radius: 5px;
  box-shadow: 0 2px 0 rgba(56, 31, 13, 0.58);
}

button.immersive-resource {
  cursor: pointer;
}

.immersive-resource strong {
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.immersive-resource-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.immersive-coins {
  top: 11px;
}

.immersive-vouchers {
  top: 45px;
}

.immersive-hotspot {
  position: absolute;
  top: 24%;
  width: 10%;
  height: 13%;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0;
  padding: 0;
  color: #fff2c7;
  font-size: 8px;
  font-weight: 900;
  text-shadow: 0 1px 0 #43250f;
  background: rgba(92, 52, 23, 0.76);
  border: 2px solid rgba(72, 39, 16, 0.86);
  border-radius: 6px;
}

.immersive-hotspot-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.immersive-notice {
  right: 13%;
}

.immersive-reward {
  right: 2%;
}

.hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.title {
  margin: 0;
  color: #3b210e;
  font-size: 25px;
  line-height: 1.05;
  text-shadow: 0 2px 0 rgba(255, 246, 205, 0.95);
}

.subtitle {
  margin-top: 5px;
  color: #76502d;
  font-size: 12px;
  font-weight: 700;
}

.version-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  color: #fff5d0;
  font-size: 10px;
  font-style: normal;
  background: #779b36;
  border: 1px solid #54321b;
  border-radius: 999px;
}

.mini-actions {
  display: flex;
  gap: 4px;
  padding: 3px 5px;
  background: rgba(255, 249, 230, 0.72);
  border: 2px solid rgba(112, 72, 38, 0.28);
  border-radius: 999px;
}

.hud-button {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
}

.hud-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 94px;
  padding: 5px 7px;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.62);
  border: 2px solid rgba(130, 84, 44, 0.35);
  border-radius: 999px;
}

button.user-chip {
  color: inherit;
  text-align: left;
}

.avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: #dbb16d;
  border: 2px solid #87562d;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.chip-name {
  max-width: 58px;
  overflow: hidden;
  color: #4b2a15;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
}

.coin {
  display: flex;
  align-items: center;
  gap: 2px;
  color: #8a5c10;
  font-size: 11px;
  font-weight: 900;
}

.coin-img {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

.home-field-markers {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.field-marker {
  position: absolute;
  filter: drop-shadow(0 4px 2px rgba(52, 33, 14, 0.35));
}

.field-marker.house {
  right: -6px;
  top: 118px;
}

.field-marker.menu-entry {
  right: 56px;
  top: 116px;
  width: 70px;
  min-height: 62px;
  display: grid;
  place-items: center;
  padding: 0;
  pointer-events: auto;
  background: transparent;
}

.field-marker.gallery-entry {
  right: 130px;
  top: 116px;
  width: 70px;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  color: #fff8dc;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-shadow:
    0 1px 0 #4a270f,
    1px 0 0 #4a270f,
    -1px 0 0 #4a270f;
  pointer-events: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.gallery-entry-img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  transition: transform var(--motion-standard) var(--motion-pop);
}

.field-marker.gallery-entry span {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.menu-entry-img {
  width: 62px;
  height: 62px;
  transition: transform var(--motion-standard) var(--motion-pop);
}

.field-marker.basket {
  left: 8px;
  top: 52vh;
}

.field-marker.hen {
  right: 18px;
  top: 57vh;
}

.field-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.home-plot-board {
  position: relative;
  z-index: 2;
  margin-top: 120px;
}

.view-gallery {
  padding-bottom: 108px;
}

.gallery-composer,
.gallery-section {
  position: relative;
  z-index: 2;
  margin: 12px;
  padding: 14px;
  background:
    linear-gradient(rgba(255, 248, 221, 0.96), rgba(246, 226, 180, 0.97));
  border: 3px solid #6f431f;
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 2px #d3a563,
    0 5px 0 rgba(66, 38, 17, 0.68);
}

.gallery-composer {
  display: grid;
  gap: 12px;
}

.gallery-composer-head,
.gallery-section-head,
.gallery-post-head,
.gallery-social-row,
.gallery-comment-form {
  display: flex;
  align-items: center;
}

.gallery-composer-head {
  gap: 10px;
}

.gallery-composer-head p,
.gallery-section-head p {
  margin: 3px 0 0;
  color: #795332;
  font-size: 12px;
  line-height: 1.45;
}

.gallery-composer-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: #e7bd6d;
  border: 2px solid #795022;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(255, 246, 200, 0.46);
}

.gallery-camera-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.gallery-caption-field {
  display: grid;
  gap: 6px;
  color: #563117;
  font-size: 13px;
  font-weight: 900;
}

.gallery-caption-field input,
.gallery-comment-form input {
  min-width: 0;
  color: #4b2a15;
  font: inherit;
  background: rgba(255, 253, 238, 0.96);
  border: 2px solid #b6874e;
  border-radius: 7px;
  outline: 0;
}

.gallery-caption-field input {
  width: 100%;
  padding: 10px 11px;
}

.gallery-caption-field input:focus,
.gallery-comment-form input:focus {
  border-color: #6f9634;
  box-shadow: 0 0 0 3px rgba(111, 150, 52, 0.18);
}

.gallery-upload-button {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  cursor: pointer;
}

.gallery-upload-button.disabled {
  filter: grayscale(0.35);
  opacity: 0.7;
  pointer-events: none;
}

.gallery-upload-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.gallery-publish-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  color: #684725;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  background: rgba(226, 238, 187, 0.72);
  border: 2px solid rgba(96, 124, 48, 0.42);
  border-radius: 8px;
}

.gallery-section {
  padding: 0;
  overflow: hidden;
}

.gallery-section-head {
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  background: rgba(228, 192, 124, 0.48);
  border-bottom: 2px solid rgba(117, 73, 31, 0.42);
}

.gallery-feed {
  display: grid;
}

.gallery-post {
  padding: 14px;
  border-bottom: 3px solid rgba(112, 68, 29, 0.34);
}

.gallery-post:last-child {
  border-bottom: 0;
}

.gallery-post-head {
  gap: 9px;
  margin-bottom: 10px;
}

.gallery-post-head > span:last-child {
  min-width: 0;
}

.gallery-post-head strong,
.gallery-post-head small {
  display: block;
}

.gallery-post-head strong {
  color: #4e2b14;
  font-size: 15px;
}

.gallery-post-head small {
  margin-top: 2px;
  color: #8a6748;
  font-size: 11px;
}

.gallery-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  background: #d9ac63;
  border: 2px solid #74451f;
  border-radius: 50%;
}

.gallery-avatar-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.gallery-photo-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #6c4a27;
  border: 3px solid #70401d;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(255, 232, 166, 0.35);
}

.gallery-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.gallery-caption {
  margin: 11px 0 8px;
  color: #4f301a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.gallery-social-row {
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0 10px;
  border-bottom: 1px solid rgba(122, 78, 37, 0.22);
}

.gallery-social-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  color: #6c472a;
  font-size: 12px;
  background: rgba(255, 250, 229, 0.7);
  border: 1px solid #c89b5d;
  border-radius: 6px;
}

.gallery-social-button > span:first-child {
  color: #947252;
  font-size: 18px;
  line-height: 1;
}

.gallery-social-button.liked {
  color: #8d301f;
  background: #ffe7ca;
  border-color: #c86c45;
}

.gallery-social-button.liked > span:first-child {
  color: #ce4630;
  animation: farm-like-pop 320ms var(--motion-pop);
}

.gallery-comment-count {
  color: #8a684a;
  font-size: 12px;
}

.gallery-comments {
  display: grid;
  gap: 6px;
  padding: 9px 0;
}

.gallery-comment {
  color: #5c3b22;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.gallery-comment strong {
  margin-right: 6px;
  color: #55752c;
}

.gallery-empty-comment {
  margin: 0;
  color: #9a7958;
  font-size: 12px;
}

.gallery-comment-form {
  gap: 7px;
}

.gallery-comment-form input {
  flex: 1;
  padding: 8px 9px;
  font-size: 13px;
}

.gallery-comment-form .small-action {
  flex: 0 0 auto;
  min-width: 60px;
  white-space: nowrap;
}

.gallery-login-comment {
  padding: 5px 0;
  color: #5f7f31;
  font-size: 12px;
  font-weight: 900;
  background: transparent;
  border: 0;
}

.home-board-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 10px 10px 6px 6px;
}

.home-title-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #fff4cc;
  font-size: 18px;
  font-weight: 900;
  white-space: nowrap;
}

.step-badge {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff4d1;
  font-size: 17px;
  font-weight: 900;
  background: linear-gradient(180deg, #c28a45, #87552a);
  border: 2px solid #5b351b;
  border-radius: 8px;
}

.home-monitor-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 9px;
  color: #5c351b;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  background: #fff0cc;
  border: 2px solid #6f421f;
  border-radius: 7px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35);
}

.home-plot-panel {
  margin-top: -1px;
  padding: 9px 8px 8px;
  background: linear-gradient(180deg, rgba(124, 157, 68, 0.91), rgba(82, 112, 43, 0.94));
  border: 3px solid #7c4f2b;
  border-radius: 0 0 12px 12px;
  box-shadow:
    0 5px 0 #4b2d18,
    inset 0 0 0 3px rgba(255, 240, 190, 0.25);
}

.home-plot-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px 5px;
}

.home-plot-card {
  position: relative;
  height: 78px;
  padding: 0;
  overflow: visible;
  color: inherit;
  background: rgba(72, 42, 20, 0.18);
  border-radius: 8px;
  transition: transform var(--motion-fast) var(--motion-ease);
}

.home-plot-card.locked {
  filter: saturate(0.9);
}

.home-plot-code {
  position: absolute;
  left: 2px;
  top: 0;
  z-index: 3;
  min-width: 22px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #fff8df;
  font-size: 12px;
  font-weight: 900;
  background: #a36b36;
  border: 2px solid #5a351e;
  border-radius: 5px;
  text-shadow: 0 1px 0 rgba(57, 32, 14, 0.8);
}

.home-plot-status {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 4;
  min-width: 42px;
  padding: 2px 5px;
  color: #fff8dd;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  background: #6b9f2d;
  border: 2px solid #5d351f;
  border-radius: 999px;
  transform: translateX(-50%);
  text-shadow: 0 1px 0 rgba(66, 39, 20, 0.8);
}

.home-plot-status.orange {
  background: #d98224;
}

.home-plot-soil {
  position: absolute;
  inset: 8px 0 6px;
  display: block;
}

.home-plot-tile-img {
  position: absolute;
  left: 50%;
  top: 51%;
  width: 70px;
  height: 56px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 0 rgba(45, 28, 12, 0.28));
}

.home-crop-img {
  position: absolute;
  left: 50%;
  top: 43%;
  width: 32px;
  height: 32px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 0 rgba(45, 28, 12, 0.22));
}

.home-plot-card.is-harvestable .home-crop-img {
  animation: farm-home-crop-ready 2.6s var(--motion-ease) infinite;
}

.home-plot-card.needs-care .home-plot-status {
  animation: farm-waiting 2.2s var(--motion-ease) infinite;
}

.home-lock-img {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 4;
  width: 26px;
  height: 26px;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

.home-board-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  margin-top: 8px;
  padding: 6px 8px;
  color: #5f3b20;
  font-size: 12px;
  font-weight: 800;
  background: rgba(255, 241, 207, 0.9);
  border: 2px solid rgba(111, 70, 35, 0.3);
  border-radius: 8px;
}

.home-board-footer span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 5px;
}

.footer-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  object-fit: contain;
}

.mini-board-button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
}

.footer-next-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.garden-footer-stat {
  flex: 0 0 auto;
  white-space: nowrap;
  color: #6d4a26;
  font-size: 12px;
}

.view-home .module-list {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 11px;
  margin-top: 12px;
}

.module-list {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.module-card,
.service-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 76px;
  padding: 10px 11px;
  color: inherit;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(255, 246, 221, 0.94), rgba(255, 230, 188, 0.92));
  border: 3px solid #986437;
  border-radius: 12px;
  box-shadow:
    0 5px 0 #5c371f,
    inset 0 0 0 3px rgba(255, 255, 255, 0.36);
  transition:
    transform var(--motion-fast) var(--motion-ease),
    border-color var(--motion-standard) var(--motion-ease),
    box-shadow var(--motion-standard) var(--motion-ease);
}

.module-card:nth-child(1) {
  background: linear-gradient(180deg, rgba(241, 249, 215, 0.96), rgba(220, 238, 169, 0.93));
}

.module-card:nth-child(2) {
  background: linear-gradient(180deg, rgba(255, 244, 213, 0.96), rgba(255, 219, 158, 0.93));
}

.module-card:nth-child(3) {
  background: linear-gradient(180deg, rgba(255, 238, 207, 0.96), rgba(238, 205, 162, 0.93));
}

.module-card:active,
.service-card:active,
.pixel-button:active,
.small-action:active,
.home-monitor-tip:active,
.home-plot-card:active,
.plot-card:active,
.package-card:active,
.icon-button:active,
.round-control:active,
.dish-step:active,
.tab-item:active,
.mine-record-tab:active {
  transform: translateY(3px) scale(0.98);
  transition-duration: var(--motion-fast);
}

.module-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: rgba(255, 232, 169, 0.72);
  border: 2px solid rgba(112, 67, 31, 0.42);
  border-radius: 10px;
}

.module-text-icon {
  color: #fff6d2;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  background: linear-gradient(180deg, #9abe42, #638f2b);
  border-color: #5f381e;
  text-shadow: 0 2px 0 rgba(72, 43, 18, 0.76);
}

.module-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 rgba(72, 43, 18, 0.25));
}

.module-title,
.service-title,
.package-title,
.block-title {
  display: block;
  color: #4a2913;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
}

.module-subtitle,
.service-subtitle,
.muted {
  display: block;
  margin-top: 5px;
  color: #7a5532;
  font-size: 13px;
  line-height: 1.45;
}

.service-fee {
  display: inline-flex;
  margin-top: 5px;
  padding: 3px 7px;
  color: #6b4120;
  font-size: 11px;
  font-weight: 900;
  background: rgba(255, 235, 185, 0.9);
  border: 1px solid rgba(129, 75, 29, 0.36);
  border-radius: 5px;
}

.module-arrow {
  margin-left: auto;
  color: #81532b;
  font-size: 34px;
  font-weight: 900;
}

.wood-bar {
  color: #fff6d9;
  background:
    linear-gradient(180deg, rgba(122, 68, 29, 0.12), rgba(65, 34, 15, 0.34)),
    url("./assets/public/game-wood-texture-v1.jpg") center / 220px auto repeat;
  border: 3px solid #5d351f;
  border-radius: 10px;
  box-shadow: 0 4px 0 #3e2517;
  text-shadow: 0 2px 0 #4b2b16;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 54px;
  padding: 9px 10px;
  margin-top: 14px;
}

.section-title {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
  font-size: 19px;
  font-weight: 900;
}

.panel {
  margin-top: 12px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255, 249, 229, 0.84), rgba(255, 235, 193, 0.86)),
    url("./assets/public/game-parchment-texture-v1.jpg") center / 260px auto repeat;
  border: 3px solid #bf8750;
  border-radius: 12px;
  box-shadow:
    0 5px 0 #714427,
    inset 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.title-icon,
.button-icon,
.feature-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  object-fit: contain;
  vertical-align: middle;
}

.rich-title,
.monitor-title {
  display: flex;
  align-items: center;
  gap: 7px;
}

.plot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.plot-card {
  position: relative;
  min-height: 140px;
  padding: 8px 7px 8px;
  overflow: hidden;
  color: inherit;
  background:
    linear-gradient(180deg, rgba(164, 105, 53, 0.94), rgba(101, 61, 32, 0.95));
  border: 3px solid #5a351e;
  border-radius: 9px;
  box-shadow:
    0 5px 0 #3f2415,
    inset 0 0 0 3px rgba(44, 28, 14, 0.18);
  transition: transform var(--motion-fast) var(--motion-ease);
}

.plot-code {
  position: absolute;
  left: 7px;
  top: 7px;
  z-index: 3;
  min-width: 31px;
  height: 26px;
  display: grid;
  place-items: center;
  color: #fff8df;
  font-size: 14px;
  font-weight: 900;
  background: #a36b36;
  border: 2px solid #5a351e;
  border-radius: 6px;
}

.soil {
  position: relative;
  height: 88px;
  margin: 10px 0 8px;
}

.plot-tile-img {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 118px;
  height: 92px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 0 rgba(46, 29, 13, 0.32));
}

.crop-img {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 55px;
  height: 55px;
  object-fit: contain;
  transform: translate(-50%, -52%);
  filter: drop-shadow(0 3px 0 rgba(46, 29, 13, 0.22));
}

.plot-card.is-harvestable .crop-img {
  animation: farm-crop-ready 2.6s var(--motion-ease) infinite;
}

.plot-card.needs-care .badge.orange,
.plot-card.needs-care .mini-status-img {
  animation: farm-waiting 2.2s var(--motion-ease) infinite;
}

.plot-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.badge {
  min-width: 55px;
  padding: 3px 8px;
  color: #fff8dd;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  background: #6b9f2d;
  border: 2px solid #5d351f;
  border-radius: 999px;
  text-shadow: 0 1px 0 rgba(66, 39, 20, 0.8);
}

.badge.orange {
  background: #d98224;
}

.badge.monitor-status {
  min-width: auto;
  color: #66401f;
  background: #f3dda5;
  text-shadow: none;
}

.mini-status-img {
  display: block;
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.package-list,
.service-list {
  display: grid;
  gap: 13px;
  margin-top: 13px;
}

.package-card {
  position: relative;
  min-height: 258px;
  padding: 46px 12px 12px;
  background:
    linear-gradient(180deg, rgba(255, 247, 227, 0.97), rgba(255, 235, 197, 0.95));
  border: 3px solid #d19a5f;
  border-radius: 12px;
  box-shadow:
    0 5px 0 #75482c,
    inset 0 0 0 3px rgba(255, 255, 255, 0.5);
}

.package-card.tone-green {
  border-color: #8caf43;
}

.package-card.tone-orange {
  border-color: #d78930;
}

.package-card.tone-brown {
  border-color: #a56c39;
}

.price-ribbon {
  position: absolute;
  left: 12px;
  top: 12px;
  min-width: 88px;
  padding: 6px 12px;
  color: #fff8df;
  font-size: 20px;
  font-weight: 900;
  text-align: center;
  background: #7aa533;
  border: 2px solid rgba(84, 55, 24, 0.26);
  border-radius: 6px;
  text-shadow: 0 2px 0 rgba(65, 38, 18, 0.8);
}

.package-card.tone-orange .price-ribbon {
  background: #d98224;
}

.package-card.tone-brown .price-ribbon {
  background: #9b6234;
}

.package-title {
  padding-left: 110px;
  min-height: 32px;
  font-size: 17px;
}

.package-image {
  height: 78px;
  display: grid;
  place-items: center;
}

.package-img {
  width: 106px;
  height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 4px 0 rgba(70, 43, 19, 0.22));
}

.feature-list {
  display: grid;
  gap: 6px;
  margin: 8px 0 12px;
}

.feature-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #4f321e;
  font-size: 15px;
  font-weight: 800;
}

.feature-icon {
  width: 17px;
  height: 17px;
}

.pixel-button {
  min-width: 92px;
  min-height: 43px;
  padding: 0 14px;
  color: #fff8df;
  font-size: 16px;
  font-weight: 900;
  background: linear-gradient(180deg, #8db83f, #5c9129);
  border: 3px solid #5a351e;
  border-radius: 8px;
  box-shadow:
    0 5px 0 #4d2d1a,
    inset 0 3px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 2px 0 rgba(75, 42, 21, 0.85);
  transition:
    transform var(--motion-fast) var(--motion-ease),
    filter var(--motion-standard) var(--motion-ease);
}

.pixel-button.orange {
  background: linear-gradient(180deg, #e69638, #c46a1e);
}

.pixel-button.brown {
  background: linear-gradient(180deg, #a96d38, #794421);
}

.pixel-button.blue {
  background: linear-gradient(180deg, #5d9fd3, #3472ae);
}

.pixel-button.ghost {
  color: #5b351f;
  background: #fff0cc;
  text-shadow: none;
}

.icon-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.icon-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
}

.icon-button-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.detail-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 13px;
}

.activity-panel {
  display: grid;
  gap: 10px;
}

.activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  background: rgba(255, 250, 231, 0.68);
  border: 2px solid rgba(155, 104, 54, 0.22);
  border-radius: 9px;
}

.activity-row strong,
.activity-row small {
  display: block;
}

.activity-row strong {
  color: #4a2913;
  font-size: 15px;
}

.activity-row small {
  margin-top: 3px;
  color: #7a5532;
  font-size: 12px;
  line-height: 1.4;
}

.activity-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  object-fit: contain;
}

.service-card {
  min-height: 122px;
}

.service-card.selected {
  border-color: #6c9d2e;
  box-shadow:
    0 5px 0 #4a6e22,
    0 0 0 4px rgba(126, 170, 57, 0.2);
}

.service-copy {
  flex: 1;
  min-width: 0;
}

.service-image {
  width: 92px;
  height: 88px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.35);
  border: 2px solid rgba(116, 73, 38, 0.26);
  border-radius: 10px;
}

.service-img {
  width: 86px;
  height: 80px;
  object-fit: contain;
}

.slot-row,
.slot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
}

.slot-chip,
.slot-button {
  padding: 8px 10px;
  color: #5f3a1f;
  font-size: 14px;
  font-weight: 900;
  background: #fff9df;
  border: 2px solid #c49a62;
  border-radius: 7px;
}

.slot-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.slot-chip small {
  color: #5e8b29;
  font-size: 10px;
}

.slot-chip.limited small {
  color: #c97018;
}

.slot-chip.full {
  color: #8b7862;
  background: #ede1ca;
}

.slot-chip.full small {
  color: #92785d;
}

.slot-button.selected {
  color: #fff8dc;
  background: #76a832;
  border-color: #5b351f;
}

.booking-slot {
  min-width: 76px;
  display: grid;
  gap: 2px;
  text-align: center;
}

.booking-slot strong,
.booking-slot small {
  display: block;
}

.booking-slot small {
  color: #6d9a2e;
  font-size: 10px;
}

.booking-slot.limited small {
  color: #d27519;
}

.booking-slot.full,
.booking-slot:disabled {
  color: #93806a;
  cursor: not-allowed;
  background: #e8decb;
  border-color: #b7a28b;
}

.booking-slot.full small {
  color: #9c765b;
}

.booking-slot.selected small {
  color: #fdf0bd;
}

.form-row {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.form-row label {
  color: #5b351c;
  font-size: 15px;
  font-weight: 900;
}

.form-row input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  color: #4f2d16;
  background: #fff9e7;
  border: 2px solid #d0a06a;
  border-radius: 8px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.booking-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.summary-item {
  padding: 10px 6px;
  text-align: center;
  background: rgba(255, 250, 231, 0.74);
  border: 2px solid rgba(155, 104, 54, 0.28);
  border-radius: 9px;
}

.summary-label {
  color: #7a5431;
  font-size: 12px;
}

.summary-value {
  margin-top: 4px;
  color: #5c8a2a;
  font-size: 15px;
  font-weight: 900;
}

.people-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 13px;
  color: #4d2d16;
  font-size: 16px;
  font-weight: 900;
}

.round-control {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #fff8df;
  font-size: 20px;
  font-weight: 900;
  background: #74a832;
  border: 3px solid #5a351e;
  border-radius: 10px;
  box-shadow: 0 4px 0 #4d2d1a;
  transition: transform var(--motion-fast) var(--motion-ease);
}

.order-panel {
  display: grid;
  gap: 13px;
}

.order-hero {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.order-image {
  width: 96px;
  height: 86px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.35);
  border: 2px solid rgba(116, 73, 38, 0.26);
  border-radius: 10px;
}

.order-img {
  width: 86px;
  height: 78px;
  object-fit: contain;
}

.price-ribbon.inline {
  position: static;
  display: inline-block;
  min-width: 78px;
  margin-bottom: 7px;
  font-size: 18px;
}

.order-title {
  color: #4a2913;
  font-size: 20px;
  font-weight: 900;
}

.order-features {
  margin: 0;
  padding: 10px;
  background: rgba(255, 250, 231, 0.66);
  border: 2px solid rgba(155, 104, 54, 0.22);
  border-radius: 9px;
}

.promise-row {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.promise-row span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  color: #5f3a1f;
  font-size: 12px;
  font-weight: 900;
  background: rgba(236, 245, 202, 0.8);
  border: 2px solid rgba(104, 139, 42, 0.34);
  border-radius: 8px;
}

.linked-menu-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: 14px;
  padding: 10px;
  color: #4f2d16;
  background: rgba(238, 246, 205, 0.86);
  border: 2px solid rgba(100, 140, 43, 0.4);
  border-radius: 9px;
}

.linked-menu-card strong,
.linked-menu-card small {
  display: block;
}

.linked-menu-card small {
  margin-top: 4px;
  color: #76502d;
  font-size: 11px;
  line-height: 1.4;
}

.booking-policy {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.booking-policy div {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 9px;
  color: #4f2d16;
  font-size: 12px;
  font-weight: 900;
  background: rgba(255, 249, 224, 0.66);
  border-radius: 8px;
}

.booking-policy span,
.booking-policy small {
  display: block;
}

.booking-policy small {
  margin-top: 3px;
  color: #76502d;
  font-weight: 700;
}

.method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.method-button {
  min-height: 42px;
  color: #5f3a1f;
  font-size: 14px;
  font-weight: 900;
  background: #fff9df;
  border: 2px solid #c49a62;
  border-radius: 8px;
}

.method-button.selected {
  color: #fff8dc;
  background: #76a832;
  border-color: #5b351f;
  text-shadow: 0 1px 0 rgba(66, 39, 20, 0.8);
}

.order-summary {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: rgba(255, 250, 231, 0.68);
  border: 2px solid rgba(155, 104, 54, 0.22);
  border-radius: 9px;
}

.order-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #7a5431;
  font-size: 13px;
}

.order-summary strong {
  color: #4f2d16;
}

.order-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.mine-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.record-list {
  display: grid;
  gap: 10px;
}

.record-card {
  display: grid;
  gap: 9px;
  padding: 11px;
  background: rgba(255, 250, 231, 0.72);
  border: 2px solid rgba(155, 104, 54, 0.28);
  border-radius: 10px;
}

.record-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.record-head strong,
.record-head span {
  display: block;
}

.record-head strong {
  color: #4a2913;
  font-size: 15px;
}

.record-head span,
.record-meta {
  margin-top: 3px;
  color: #7a5532;
  font-size: 12px;
  line-height: 1.4;
}

.record-status {
  flex: 0 0 auto;
  padding: 3px 7px;
  color: #fff8df;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
  background: #d98224;
  border: 2px solid #5d351f;
  border-radius: 999px;
  text-shadow: 0 1px 0 rgba(66, 39, 20, 0.8);
}

.record-status.green {
  background: #6b9f2d;
}

.record-status.gray {
  background: #8a8170;
}

.record-status.pending {
  background: #d98224;
  animation: farm-waiting 2.2s var(--motion-ease) infinite;
}

.record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.small-action {
  min-height: 32px;
  padding: 0 9px;
  color: #5f3a1f;
  font-size: 12px;
  font-weight: 900;
  background: #fff9df;
  border: 2px solid #c49a62;
  border-radius: 7px;
  transition:
    transform var(--motion-fast) var(--motion-ease),
    background-color var(--motion-standard) var(--motion-ease);
}

.small-action.primary {
  color: #fff8dc;
  background: #76a832;
  border-color: #5b351f;
  text-shadow: 0 1px 0 rgba(66, 39, 20, 0.8);
}

.small-action:disabled,
.pixel-button:disabled,
.round-control:disabled {
  cursor: default;
  filter: grayscale(0.7);
  opacity: 0.62;
  transform: none;
}

.login-panel,
.pay-panel,
.success-panel {
  display: grid;
  gap: 14px;
  text-align: center;
}

.login-avatar,
.success-medal {
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  background: rgba(255, 237, 179, 0.82);
  border: 3px solid #8a572d;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.success-medal {
  animation: farm-reward 460ms var(--motion-pop) both;
}

.login-avatar-img,
.success-medal-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.login-steps {
  display: grid;
  gap: 8px;
  text-align: left;
}

.login-steps div,
.pay-row,
.member-left {
  display: flex;
  align-items: center;
  gap: 9px;
}

.login-steps div,
.pay-row {
  justify-content: space-between;
  padding: 9px 10px;
  color: #5a351d;
  font-size: 13px;
  font-weight: 900;
  background: rgba(255, 249, 224, 0.78);
  border: 2px solid rgba(137, 87, 45, 0.28);
  border-radius: 9px;
}

.login-steps div {
  justify-content: flex-start;
}

.handoff-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.handoff-steps span {
  padding: 8px 3px;
  color: #967b5a;
  font-size: 11px;
  font-weight: 900;
  background: rgba(235, 223, 197, 0.86);
  border: 2px solid rgba(121, 88, 51, 0.2);
  border-radius: 7px;
}

.handoff-steps .done {
  color: #577b24;
  background: rgba(217, 235, 168, 0.9);
}

.handoff-steps .active {
  color: #fff8dd;
  background: #76a832;
  border-color: #5b351f;
  animation: farm-waiting 2.2s var(--motion-ease) infinite;
}

.group-guide {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 10px;
  text-align: left;
  background: rgba(255, 249, 224, 0.74);
  border: 2px solid rgba(137, 87, 45, 0.28);
  border-radius: 9px;
}

.qr-placeholder {
  width: 80px;
  height: 80px;
  display: grid;
  align-content: center;
  gap: 2px;
  color: #56341e;
  text-align: center;
  background:
    linear-gradient(90deg, #5a361f 10px, transparent 10px) 7px 7px / 27px 27px,
    linear-gradient(#5a361f 10px, transparent 10px) 7px 7px / 27px 27px,
    #fff9e4;
  border: 3px solid #704322;
  border-radius: 6px;
}

.qr-placeholder strong {
  font-size: 18px;
  background: #fff4d7;
}

.qr-placeholder small {
  font-size: 10px;
  font-weight: 900;
  background: #fff4d7;
}

.wechat-contact-qr {
  width: 96px;
  height: 96px;
  padding: 4px;
  object-fit: contain;
  background: #fff;
  border: 3px solid #704322;
  border-radius: 7px;
}

.qr-focus-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px 12px;
  color: #4a2913;
  background: linear-gradient(180deg, rgba(255, 249, 224, 0.97), rgba(255, 235, 184, 0.96));
  border: 3px solid #87522b;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.34);
}

.qr-focus-card .wechat-contact-qr {
  width: min(220px, 68vw);
  height: min(220px, 68vw);
  padding: 7px;
}

.qr-focus-card strong {
  font-size: 16px;
}

.qr-focus-card p {
  max-width: 300px;
  margin: 0;
  color: #76502d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.archive-handoff-code {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.archive-handoff-code div,
.success-reference {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px;
  color: #5a351d;
  background: rgba(255, 249, 224, 0.82);
  border: 2px solid rgba(137, 87, 45, 0.34);
  border-radius: 8px;
}

.archive-handoff-code span,
.success-reference span {
  font-size: 10px;
  font-weight: 800;
}

.archive-handoff-code strong,
.success-reference strong {
  overflow: hidden;
  color: #4b2a15;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-protect-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  color: #4c681e;
  text-align: left;
  background: rgba(225, 239, 181, 0.86);
  border: 2px solid #718c32;
  border-radius: 8px;
}

.profile-protect-link span,
.profile-protect-link strong,
.profile-protect-link small {
  display: block;
}

.profile-protect-link span {
  min-width: 0;
}

.profile-protect-link strong {
  font-size: 13px;
}

.profile-protect-link small,
.success-reference small {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
}

.menu-share-button {
  background: linear-gradient(180deg, #f1a631, #c66a16);
  border-color: #6b3718;
}

.share-menu-note {
  margin: -7px 0 0;
  color: #76502d;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.success-reference {
  justify-items: center;
}

.group-guide:has(.wechat-contact-qr) {
  grid-template-columns: 98px minmax(0, 1fr);
}

.group-guide > div:last-child strong {
  display: block;
  color: #4a2913;
  font-size: 14px;
}

.group-guide p {
  margin: 5px 0 0;
  color: #76502d;
  font-size: 11px;
  line-height: 1.4;
}

.pay-row.promise {
  background: rgba(222, 239, 177, 0.8);
}

.handoff-note,
.success-promise {
  margin: 0;
  padding: 9px;
  color: #684526;
  font-size: 12px;
  line-height: 1.45;
  background: rgba(255, 239, 194, 0.54);
  border-radius: 8px;
}

.step-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.login-skip {
  justify-self: center;
}

.pay-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.pay-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  object-fit: contain;
}

.pay-amount {
  color: #7a3a17;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 2px 0 rgba(255, 242, 190, 0.9);
}

.success-actions {
  display: grid;
  gap: 10px;
}

.login-reminder,
.member-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.login-reminder {
  text-align: left;
}

.compact-login-button {
  min-width: 74px;
  padding-inline: 14px;
  white-space: nowrap;
}

.member-avatar {
  width: 48px;
  height: 48px;
}

.camera-stack {
  display: grid;
  gap: 7px;
  margin-top: 11px;
}

.camera-stack div {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  background: rgba(255, 249, 224, 0.72);
  border: 2px solid rgba(137, 87, 45, 0.24);
  border-radius: 9px;
}

.camera-stack strong {
  color: #4a2913;
  font-size: 13px;
}

.camera-stack span {
  color: #76502d;
  font-size: 12px;
  line-height: 1.4;
}

.feature-hub {
  display: grid;
  gap: 11px;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.quick-card {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-height: 116px;
  padding: 10px 8px;
  color: #4a2913;
  text-align: center;
  background: rgba(255, 249, 224, 0.78);
  border: 2px solid rgba(137, 87, 45, 0.34);
  border-radius: 10px;
}

.quick-icon {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.quick-card strong {
  font-size: 14px;
  font-weight: 900;
}

.quick-card small {
  color: #76502d;
  font-size: 11px;
  line-height: 1.35;
}

.mine-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mine-panel-head .muted {
  margin-top: 3px;
  font-size: 12px;
}

.mine-count {
  min-width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #fff8df;
  font-size: 17px;
  font-style: normal;
  font-weight: 900;
  background: #d98224;
  border: 2px solid #5d351f;
  border-radius: 999px;
}

.mine-count.has-actions {
  animation: farm-waiting 2.2s var(--motion-ease) infinite;
}

.mine-priority {
  display: grid;
  gap: 10px;
  border-color: #c27a39;
}

.mine-task-list {
  display: grid;
  gap: 8px;
}

.mine-task-card,
.mine-empty-task {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  background:
    linear-gradient(180deg, rgba(255, 249, 224, 0.78), rgba(243, 219, 174, 0.82)),
    url("./assets/public/game-parchment-texture-v1.jpg") center / 210px auto repeat;
  border: 2px solid rgba(155, 104, 54, 0.27);
  border-radius: 9px;
}

.mine-task-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.mine-task-copy strong,
.mine-task-copy small,
.mine-empty-task strong,
.mine-empty-task small {
  display: block;
}

.mine-task-copy strong,
.mine-empty-task strong {
  color: #4a2913;
  font-size: 14px;
  font-weight: 900;
}

.mine-task-copy small,
.mine-empty-task small {
  margin-top: 3px;
  color: #7a5532;
  font-size: 11px;
  line-height: 1.35;
}

.mine-land-card {
  display: grid;
  gap: 12px;
  background: linear-gradient(180deg, rgba(252, 248, 215, 0.96), rgba(239, 242, 187, 0.94));
  border-color: #7f9d3c;
}

.mine-land-main {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 10px;
  background: rgba(255, 249, 224, 0.74);
  border: 2px solid rgba(112, 139, 48, 0.34);
  border-radius: 10px;
}

.mine-land-crop {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  background: rgba(126, 160, 55, 0.18);
  border-radius: 10px;
}

.mine-land-img {
  width: 66px;
  height: 66px;
  object-fit: contain;
}

.mine-land-copy strong,
.mine-land-copy span,
.mine-land-copy small {
  display: block;
}

.mine-land-copy strong {
  color: #4a2913;
  font-size: 16px;
  font-weight: 900;
}

.mine-land-copy span {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  color: #64753a;
  font-size: 12px;
  font-weight: 900;
}

.mine-land-copy .record-status {
  padding: 2px 7px;
}

.mine-land-copy small {
  margin-top: 7px;
  color: #76502d;
  font-size: 11px;
}

.mine-core-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.mine-core-actions .pixel-button {
  min-width: 0;
  min-height: 45px;
  padding: 7px 4px;
  font-size: 12px;
}

.mine-core-actions .button-icon {
  width: 19px;
  height: 19px;
}

.mine-record-panel,
.mine-support,
.mine-activity-compact {
  display: grid;
  gap: 10px;
}

.mine-total {
  color: #7a5532;
  font-size: 12px;
  font-weight: 900;
}

.mine-record-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.mine-record-tab {
  min-height: 48px;
  display: grid;
  place-items: center;
  gap: 2px;
  color: #694329;
  background: rgba(255, 249, 224, 0.84);
  border: 2px solid #c79a61;
  border-radius: 8px;
}

.mine-record-tab strong {
  font-size: 13px;
}

.mine-record-tab small {
  font-size: 11px;
}

.mine-record-tab.active {
  color: #fff8dc;
  background: #76a832;
  border-color: #5b351f;
  text-shadow: 0 1px 0 rgba(66, 39, 20, 0.8);
}

.mine-record-content {
  margin-top: 0;
}

.mine-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.mine-service-link {
  min-height: 73px;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 7px 2px;
  color: #4a2913;
  background: rgba(255, 249, 224, 0.76);
  border: 2px solid rgba(137, 87, 45, 0.3);
  border-radius: 9px;
}

.mine-service-link .quick-icon {
  width: 34px;
  height: 34px;
}

.mine-service-link strong {
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.shop-list,
.farm-list {
  display: grid;
  gap: 12px;
  margin-top: 13px;
}

.shop-card,
.farm-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  color: inherit;
  text-align: left;
  background: linear-gradient(180deg, rgba(255, 246, 221, 0.96), rgba(255, 230, 188, 0.94));
  border: 3px solid #986437;
  border-radius: 12px;
  box-shadow:
    0 5px 0 #5c371f,
    inset 0 0 0 3px rgba(255, 255, 255, 0.32);
}

.shop-image,
.farm-img {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: rgba(255, 232, 169, 0.62);
  border: 2px solid rgba(112, 67, 31, 0.36);
  border-radius: 10px;
}

.shop-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.shop-info {
  flex: 1;
  min-width: 0;
}

.shop-buy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.shop-price {
  color: #7a3a17;
  font-size: 20px;
  font-weight: 900;
}

.poster-card,
.referral-card {
  display: grid;
  gap: 14px;
}

.poster-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.poster-medal {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.growth-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
  background: rgba(125, 160, 70, 0.26);
  border: 2px dashed rgba(106, 64, 31, 0.42);
  border-radius: 11px;
}

.growth-img {
  width: 70px;
  height: 70px;
  justify-self: center;
  object-fit: contain;
}

.poster-copy,
.referral-code {
  padding: 12px;
  color: #4a2913;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
  background: rgba(255, 249, 224, 0.78);
  border: 2px solid rgba(137, 87, 45, 0.28);
  border-radius: 10px;
}

.referral-code {
  font-size: 22px;
  letter-spacing: 0;
}

.notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.admin-status-grid {
  margin-bottom: 12px;
}

.farm-card {
  justify-content: space-between;
}

.farm-card.selected {
  border-color: #6c9d2e;
  box-shadow:
    0 5px 0 #4a6e22,
    0 0 0 4px rgba(126, 170, 57, 0.2);
}

.farm-card strong,
.farm-card small {
  display: block;
}

.farm-card strong {
  color: #4a2913;
  font-size: 15px;
  font-weight: 900;
}

.farm-card small {
  margin-top: 3px;
  color: #76502d;
  font-size: 12px;
}

.bottom-tab {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(430px, 100vw);
  padding: 6px 10px calc(8px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(156, 97, 52, 0.98), rgba(100, 58, 33, 0.99)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.08) 2px, transparent 2px, transparent 10px);
  border-top: 3px solid #4c2c1a;
  box-shadow: 0 -4px 18px rgba(49, 30, 14, 0.34);
}

.tab-item {
  display: grid;
  place-items: center;
  min-height: 60px;
  color: #fce6b8;
  background: transparent;
  text-shadow: 0 2px 0 #3e2415;
  transition:
    color var(--motion-standard) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}

.tab-icon {
  width: 42px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  transition:
    background-color var(--motion-standard) var(--motion-ease),
    box-shadow var(--motion-standard) var(--motion-ease);
}

.tab-img {
  max-width: 43px;
  max-height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 rgba(50, 30, 13, 0.36));
}

.tab-text {
  font-size: 14px;
  font-weight: 900;
}

.tab-item.active .tab-icon {
  background: rgba(245, 202, 85, 0.86);
  border: 2px solid #6a3c1d;
  box-shadow: 0 0 12px rgba(255, 213, 85, 0.9);
}

.view-enter + .bottom-tab .tab-item.active .tab-img {
  animation: farm-tab-settle 250ms var(--motion-pop);
}

.monitor {
  position: relative;
  height: 250px;
  margin-top: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(75, 120, 52, 0.92), rgba(118, 162, 70, 0.9));
  border: 3px solid #6b4327;
  border-radius: 10px;
}

.monitor::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 246, 212, 0.62);
  border-radius: 7px;
  pointer-events: none;
}

.mock-fence {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 50px;
  display: flex;
  justify-content: center;
  opacity: 0.92;
}

.fence-img {
  width: 116px;
  height: 46px;
  object-fit: contain;
}

.mock-soil {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 190px;
  height: 120px;
  transform: translate(-50%, -50%);
}

.monitor-tile-img {
  position: absolute;
  inset: 0;
  width: 190px;
  height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 5px 2px rgba(42, 25, 11, 0.28));
}

.big-crop-img {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 82px;
  height: 82px;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

.stream-chip {
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 10px;
  padding: 7px 9px;
  overflow: hidden;
  color: #fff4c9;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(43, 27, 13, 0.66);
  border: 2px solid rgba(255, 237, 181, 0.3);
  border-radius: 8px;
}

.monitor-message {
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 10px;
  z-index: 2;
  padding: 7px 9px;
  color: #fff4c9;
  background: rgba(43, 27, 13, 0.76);
  border: 2px solid rgba(255, 237, 181, 0.3);
  border-radius: 8px;
}

.monitor-message strong,
.monitor-message span {
  display: block;
}

.monitor-message strong {
  font-size: 12px;
}

.monitor-message span {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.35;
}

.field-proof-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.field-proof-bar span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 5px 6px;
  overflow: hidden;
  color: #5a351c;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(255, 249, 224, 0.84);
  border: 2px solid rgba(155, 104, 54, 0.32);
  border-radius: 8px;
}

.field-shot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.field-shot-card {
  display: grid;
  gap: 4px;
  min-height: 132px;
  padding: 9px 6px;
  color: #58331b;
  text-align: center;
  background: rgba(255, 249, 224, 0.82);
  border: 2px solid rgba(151, 93, 42, 0.4);
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(255, 242, 196, 0.5);
}

.field-shot-icon {
  display: grid;
  place-items: center;
  min-height: 44px;
}

.field-shot-img {
  max-width: 60px;
  max-height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 rgba(63, 39, 17, 0.24));
}

.field-shot-card strong {
  font-size: 13px;
  line-height: 1.2;
}

.field-shot-card span {
  color: #6d922e;
  font-size: 12px;
  font-weight: 900;
}

.field-shot-card small {
  color: #7a5431;
  font-size: 10px;
  line-height: 1.35;
}

.field-growth-strip {
  align-items: stretch;
}

.growth-node {
  display: grid;
  gap: 4px;
  place-items: center;
  min-width: 0;
  color: #5b361d;
  text-align: center;
}

.growth-node strong {
  color: #7a4a22;
  font-size: 13px;
  font-weight: 900;
}

.growth-node span {
  max-width: 100%;
  overflow: hidden;
  color: #5d8b2e;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trust-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  padding: 9px;
  color: #5d4024;
  font-size: 12px;
  line-height: 1.45;
  background: rgba(224, 239, 184, 0.74);
  border: 2px solid rgba(102, 138, 42, 0.34);
  border-radius: 9px;
}

/* v0.4 gamified garden */
.garden-wallet-card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 112px;
  padding: 9px;
  color: #fff3c8;
  background: linear-gradient(180deg, rgba(111, 71, 34, 0.96), rgba(72, 43, 20, 0.97));
  border: 3px solid #4e2c15;
  border-radius: 10px;
  box-shadow: 0 4px 0 rgba(48, 27, 12, 0.75), inset 0 0 0 2px rgba(220, 159, 75, 0.35);
}

.garden-wallet-card > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 6px 4px;
  text-align: center;
  background: rgba(255, 240, 190, 0.1);
  border: 1px solid rgba(255, 221, 151, 0.2);
  border-radius: 6px;
}

.garden-wallet-card small {
  color: #e8c99b;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.garden-wallet-card strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  color: #fff2b4;
  font-size: 15px;
  white-space: nowrap;
}

.garden-coin-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.garden-daily-card {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
  padding: 9px;
  color: #533018;
  background: rgba(255, 245, 208, 0.94);
  border: 3px solid #80512e;
  border-radius: 10px;
  box-shadow: 0 3px 0 #4f301c;
}

.view-home .home-daily-card {
  margin-top: 10px;
}

.view-home .game-garden-board {
  margin-top: 9px;
}

.garden-title-coin {
  width: 17px;
  height: 17px;
  object-fit: contain;
}

.garden-daily-card.completed {
  opacity: 0.85;
}

.garden-daily-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.garden-daily-copy div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.garden-daily-copy strong,
.garden-daily-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garden-daily-copy strong {
  font-size: 13px;
}

.garden-daily-copy small {
  color: #81603c;
  font-size: 10px;
}

.garden-task-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  object-fit: contain;
}

.home-reward-hook {
  position: relative;
  z-index: 2;
  margin-top: 10px;
}

.home-reward-hook > button {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: #4e2d16;
  text-align: left;
  background: linear-gradient(180deg, rgba(247, 251, 213, 0.97), rgba(218, 235, 164, 0.96));
  border: 3px solid #725022;
  border-radius: 9px;
  box-shadow: 0 4px 0 #4b2d16, inset 0 0 0 2px rgba(255, 255, 255, 0.42);
}

.home-reward-hook span,
.home-menu-order span {
  min-width: 0;
}

.home-reward-hook strong,
.home-reward-hook small,
.home-menu-order strong,
.home-menu-order small {
  display: block;
}

.home-reward-hook strong {
  font-size: 14px;
}

.home-reward-hook small,
.home-menu-order small {
  margin-top: 2px;
  color: #755231;
  font-size: 10px;
  line-height: 1.35;
}

.home-reward-hook em,
.home-menu-order em {
  color: #617e2d;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.home-reward-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.home-service-board {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  padding: 0 8px 10px;
  background: rgba(74, 43, 20, 0.86);
  border: 3px solid #4e2d16;
  border-radius: 10px;
  box-shadow: 0 5px 0 rgba(48, 27, 12, 0.74), inset 0 0 0 2px rgba(199, 137, 65, 0.3);
}

.home-service-title {
  min-height: 46px;
  display: flex;
  align-items: center;
  margin: 0 -8px 9px;
  padding: 7px 10px;
  color: #fff1c1;
  font-size: 18px;
  font-weight: 900;
  border-radius: 7px 7px 3px 3px;
}

.home-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.home-service-card {
  min-width: 0;
  min-height: 158px;
  display: grid;
  grid-template-rows: 68px auto auto;
  align-content: start;
  gap: 5px;
  padding: 8px;
  color: #4b2914;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(255, 248, 220, 0.88), rgba(245, 222, 177, 0.9)),
    url("./assets/public/game-parchment-texture-v1.jpg") center / 220px auto repeat;
  border: 3px solid #9a6634;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.54), 0 3px 0 #58351d;
}

.home-service-card.roast-card {
  border-color: #9b5b2d;
}

.home-service-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 66px;
  overflow: hidden;
  background: rgba(203, 225, 154, 0.35);
  border-radius: 6px;
}

.roast-card .home-service-art {
  background: rgba(231, 176, 103, 0.3);
}

.home-service-img {
  width: 78px;
  height: 66px;
  object-fit: contain;
}

.home-service-side-img {
  position: absolute;
  right: 3px;
  bottom: 1px;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.home-service-roast-img {
  width: 108px;
  height: 68px;
  object-fit: contain;
}

.home-service-copy strong {
  display: block;
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-service-copy small {
  display: block;
  margin-top: 2px;
  color: #7a5735;
  font-size: 10px;
  white-space: nowrap;
}

.home-service-action {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 5px;
  color: #fff6cf;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  background: linear-gradient(180deg, #779f35, #4f7425);
  border: 2px solid #47611f;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 246, 178, 0.32);
}

.roast-card .home-service-action {
  background: linear-gradient(180deg, #b07636, #805025);
  border-color: #603619;
}

.home-service-action-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.home-menu-order {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  padding: 7px 9px;
  color: #4a2914;
  text-align: left;
  background: linear-gradient(180deg, #fff1c6, #eac889);
  border: 2px solid #a06a32;
  border-radius: 7px;
}

.home-menu-order strong {
  font-size: 14px;
}

.home-menu-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.game-garden-board {
  margin-top: 10px;
}

.home-board-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.home-board-actions button {
  min-width: 45px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px 5px;
  color: #fff3c7;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  background: rgba(72, 40, 20, 0.58);
  border: 1px solid rgba(255, 225, 157, 0.38);
  border-radius: 6px;
}

.home-board-action-icon {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.game-task-strip {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  padding: 6px 7px;
  color: #50301a;
  background: rgba(255, 247, 210, 0.93);
  border: 2px solid rgba(102, 63, 31, 0.58);
  border-radius: 7px;
}

.game-task-strip-icon {
  width: 29px;
  height: 29px;
  object-fit: contain;
}

.game-task-strip span,
.game-task-strip strong,
.game-task-strip small {
  display: block;
  min-width: 0;
}

.game-task-strip strong,
.game-task-strip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-task-strip strong {
  font-size: 12px;
}

.game-task-strip small {
  margin-top: 2px;
  color: #7a5735;
  font-size: 9px;
}

.game-task-strip .small-action {
  min-height: 30px;
  padding: 4px 8px;
}

.garden-ready-tip {
  flex: 0 0 auto;
  padding: 5px 7px;
  color: #583316;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  background: #fff0c5;
  border: 2px solid #6d411f;
  border-radius: 7px;
}

.game-plot-card {
  height: 84px;
}

.game-plot-card.is-empty {
  filter: saturate(0.78);
}

.game-plot-card.locked {
  filter: grayscale(0.45) brightness(0.82);
}

.game-plot-card.is-harvestable {
  animation: garden-ready-glow 1.5s ease-in-out infinite;
}

.game-plot-card.just-watered .home-crop-img {
  animation: garden-water-pop 520ms var(--motion-pop);
}

.home-plot-status.ready {
  color: #fff7c8;
  background: #bf6623;
  border-color: #6f3517;
}

.garden-mini-progress {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 4px;
  height: 6px;
  overflow: hidden;
  background: rgba(58, 34, 15, 0.72);
  border: 1px solid rgba(255, 235, 172, 0.55);
  border-radius: 999px;
}

.garden-mini-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #73aa32, #c7dd54);
  border-radius: inherit;
  transition: width var(--motion-standard) var(--motion-ease);
}

.crop-select-intro {
  margin-top: 10px;
}

.game-crop-list,
.reward-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.game-crop-card,
.reward-card {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(255, 249, 222, 0.86), rgba(243, 220, 174, 0.9)),
    url("./assets/public/game-parchment-texture-v1.jpg") center / 220px auto repeat;
  border: 3px solid #895a31;
  border-radius: 10px;
  box-shadow: 0 4px 0 rgba(69, 39, 17, 0.7), inset 0 0 0 2px rgba(255, 255, 255, 0.46);
}

.game-crop-card.locked,
.reward-card.sold-out {
  filter: grayscale(0.72);
  opacity: 0.72;
}

.game-crop-art,
.reward-art {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  background: rgba(130, 161, 63, 0.16);
  border: 2px solid rgba(107, 67, 31, 0.24);
  border-radius: 8px;
}

.game-crop-img,
.reward-img {
  max-width: 66px;
  max-height: 66px;
  object-fit: contain;
  filter: drop-shadow(0 3px 1px rgba(65, 38, 16, 0.28));
}

.game-crop-copy,
.reward-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.game-crop-title,
.reward-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.game-crop-title strong,
.reward-head strong {
  min-width: 0;
  overflow: hidden;
  color: #4d2a13;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-crop-title em,
.reward-head em {
  flex: 0 0 auto;
  padding: 2px 5px;
  color: #fff4d2;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
  background: #7d9e34;
  border: 1px solid #523318;
  border-radius: 4px;
}

.game-crop-copy p,
.reward-copy p {
  margin: 0;
  color: #755233;
  font-size: 11px;
  line-height: 1.4;
}

.game-crop-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 9px;
  color: #63842d;
  font-size: 11px;
  font-weight: 900;
}

.game-crop-meta span,
.reward-price {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.mini-inline-icon {
  width: 17px;
  height: 17px;
  object-fit: contain;
}

.crop-plant-button,
.reward-button {
  width: 78px;
  min-width: 78px;
  padding-inline: 5px;
  font-size: 12px;
  white-space: nowrap;
}

.game-grow-scene {
  height: 230px;
}

.game-grow-scene.is-ready {
  box-shadow: 0 0 18px rgba(255, 223, 79, 0.9), inset 0 0 25px rgba(255, 239, 112, 0.18);
}

.watering-scene {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.watering-can {
  position: absolute;
  top: 28px;
  right: 40px;
  width: 76px;
  height: 66px;
  transform-origin: 62px 48px;
  animation: watering-can-pour 1.05s var(--motion-pop) both;
}

.watering-can-body {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 48px;
  height: 38px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #b8c4b7, #738a7b 58%, #4b6256);
  border: 3px solid #3e4f47;
  border-radius: 7px 7px 12px 12px;
  box-shadow: inset 4px 4px 0 rgba(255, 255, 255, 0.22), 0 3px 0 rgba(50, 38, 24, 0.32);
}

.watering-can-mark {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.watering-can-handle {
  position: absolute;
  top: 2px;
  right: 5px;
  width: 42px;
  height: 34px;
  border: 6px solid #53695d;
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
}

.watering-spout {
  position: absolute;
  left: 2px;
  bottom: 23px;
  width: 38px;
  height: 12px;
  background: linear-gradient(180deg, #91a698, #53695d);
  border: 3px solid #3e4f47;
  border-right: 0;
  border-radius: 12px 0 0 12px;
  transform: rotate(-12deg);
  transform-origin: right center;
}

.watering-spout::before {
  content: "";
  position: absolute;
  left: -7px;
  top: -5px;
  width: 13px;
  height: 18px;
  background: #6f8778;
  border: 3px solid #3e4f47;
  border-radius: 50%;
}

.water-stream {
  position: absolute;
  top: 87px;
  right: 102px;
  width: 8px;
  height: 19px;
  background: linear-gradient(180deg, #bcecff, #42aee8);
  border: 2px solid #237bb8;
  border-radius: 50% 50% 55% 55%;
  opacity: 0;
  animation: watering-drop 720ms ease-in 260ms both;
}

.water-stream.stream-two {
  right: 88px;
  animation-delay: 390ms;
}

.water-stream.stream-three {
  right: 74px;
  animation-delay: 520ms;
}

.watering-scene > strong {
  position: absolute;
  left: 50%;
  bottom: 22px;
  padding: 5px 10px;
  color: #fff8cc;
  font-size: 13px;
  white-space: nowrap;
  background: #4e8f3b;
  border: 2px solid #315d25;
  border-radius: 999px;
  transform: translateX(-50%);
  animation: watering-success-rise 720ms var(--motion-pop) 450ms both;
}

.game-big-crop {
  width: 98px;
  height: 98px;
}

.harvest-spark {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 3;
  padding: 5px 10px;
  color: #fff8c8;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  background: #c26a21;
  border: 2px solid #633515;
  border-radius: 999px;
  transform: translateX(-50%);
  animation: harvest-chip-float 1.2s ease-in-out infinite;
}

.garden-progress-wrap {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.garden-detail-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.garden-progress-copy {
  display: flex;
  justify-content: space-between;
  color: #5d391f;
  font-size: 12px;
}

.garden-progress-copy strong {
  color: #668e2e;
}

.garden-progress-bar {
  height: 14px;
  padding: 2px;
  overflow: hidden;
  background: #6c4323;
  border: 2px solid #4a2b16;
  border-radius: 999px;
}

.garden-progress-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #6d9f2e, #d3e45b);
  border-radius: inherit;
  transition: width 420ms var(--motion-ease);
}

.game-main-action {
  font-size: 17px;
}

.game-main-action.harvest-action {
  background: linear-gradient(180deg, #e5a63c, #bb641e);
  animation: harvest-button-pulse 1.4s ease-in-out infinite;
}

.game-stage-list {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 3px 1px 7px;
  scrollbar-width: none;
}

.game-stage-list::-webkit-scrollbar {
  display: none;
}

.game-stage {
  min-width: 63px;
  padding: 8px 5px;
  color: #8b6b4b;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  background: #e9dcc0;
  border: 2px solid #b7976c;
  border-radius: 7px;
}

.game-stage.done {
  color: #fff5cd;
  background: #7b9d37;
  border-color: #4f6d22;
}

.game-stage.current {
  box-shadow: 0 0 0 3px rgba(222, 166, 55, 0.38);
}

.game-rule-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #6c492b;
  font-size: 11px;
  line-height: 1.5;
}

.game-rule-note strong {
  display: block;
  margin-bottom: 2px;
  color: #4c2c16;
}

.reward-wallet {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-top: 10px;
}

.reward-rule {
  margin-top: 10px;
}

.reward-card {
  grid-template-columns: 72px minmax(0, 1fr);
}

.reward-card .reward-button {
  grid-column: 1 / -1;
  width: 100%;
}

.reward-price {
  color: #9a6118;
  font-size: 12px;
}

.reward-price strong {
  font-size: 17px;
}

.view-rewards,
.view-redeem-confirm,
.view-redeem-success {
  margin: -12px -12px 0;
  padding: 12px 12px 18px;
  background:
    linear-gradient(180deg, rgba(63, 37, 17, 0.03), rgba(63, 37, 17, 0.7)),
    url("./assets/public/reward-market-bg.jpg") center top / 100% auto no-repeat,
    #5b351c;
}

.reward-market-stage {
  position: relative;
  min-height: 150px;
  margin-top: 0;
  padding: 10px;
}

.reward-market-hud {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.reward-market-hud > span {
  min-width: 94px;
  display: grid;
  grid-template-columns: 26px auto;
  align-items: center;
  gap: 0 4px;
  padding: 6px 8px;
  color: #4b2a14;
  background: rgba(255, 244, 208, 0.95);
  border: 2px solid #7f4c27;
  border-radius: 8px;
  box-shadow: 0 3px 0 rgba(51, 28, 12, 0.68);
}

.reward-market-hud strong {
  font-size: 17px;
}

.reward-market-hud small {
  grid-column: 1 / -1;
  color: #765231;
  font-size: 11px;
  text-align: center;
}

.reward-market-coin {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.reward-market-guide {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 8px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 8px;
  color: #4e2d16;
  background:
    linear-gradient(180deg, rgba(255, 250, 229, 0.91), rgba(255, 235, 191, 0.92)),
    url("./assets/public/game-parchment-texture-v1.jpg") center / 250px auto repeat;
  border: 3px solid #7b4925;
  border-radius: 9px;
  box-shadow: 0 4px 0 #3c2212;
}

.reward-steward-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.reward-market-guide strong,
.reward-market-guide small {
  display: block;
}

.reward-market-guide strong {
  font-size: 14px;
}

.reward-market-guide small {
  margin-top: 2px;
  color: #765231;
  font-size: 11px;
  line-height: 1.35;
}

.reward-shelf {
  margin-top: -3px;
  padding: 12px 10px 14px;
  background:
    linear-gradient(180deg, rgba(255, 247, 218, 0.9), rgba(239, 215, 163, 0.92)),
    url("./assets/public/game-parchment-texture-v1.jpg") center / 280px auto repeat;
  border: 4px solid #5b351b;
  border-radius: 12px;
  box-shadow: 0 6px 0 #321c0e, inset 0 0 0 3px rgba(255, 255, 255, 0.33);
}

.reward-shelf-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #4c2a13;
}

.reward-shelf-title strong,
.reward-shelf-title small {
  display: block;
}

.reward-shelf-title strong {
  font-size: 17px;
}

.reward-shelf-title small {
  margin-top: 2px;
  color: #795536;
  font-size: 11px;
}

.reward-shelf-title > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #9c591d;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.reward-voucher-panel {
  background: rgba(255, 241, 205, 0.96);
}

.reward-confirm-scene {
  min-height: 180px;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: end;
  gap: 8px;
  margin-top: 10px;
  padding: 14px 12px;
  color: #4c2a14;
  background: rgba(255, 241, 201, 0.91);
  border: 3px solid #72431f;
  border-radius: 11px;
  box-shadow: 0 5px 0 #3c2211;
}

.reward-confirm-scene-img {
  width: 112px;
  height: 112px;
  object-fit: contain;
}

.reward-confirm-scene strong,
.reward-confirm-scene small {
  display: block;
}

.reward-confirm-scene strong {
  font-size: 20px;
}

.reward-confirm-scene small {
  margin-top: 6px;
  color: #765231;
  font-size: 12px;
  line-height: 1.5;
}

.reward-success-scene {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 18px 14px;
  color: #4e2d16;
  text-align: center;
  background: rgba(255, 242, 205, 0.96);
  border: 4px solid #71431f;
  border-radius: 12px;
  box-shadow: 0 6px 0 #3a2010, inset 0 0 0 3px rgba(255, 255, 255, 0.4);
}

.reward-success-scene h2,
.reward-success-scene p {
  margin: 0;
}

.reward-success-scene p {
  font-size: 13px;
  line-height: 1.5;
}

.voucher-list {
  display: grid;
  gap: 8px;
}

.voucher-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px;
  color: #51301a;
  background: linear-gradient(90deg, rgba(255, 246, 204, 0.96), rgba(238, 220, 165, 0.94));
  border: 2px dashed #a06d35;
  border-radius: 8px;
}

.voucher-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
}

.voucher-img {
  max-width: 40px;
  max-height: 40px;
  object-fit: contain;
}

.voucher-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.voucher-copy strong,
.voucher-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voucher-copy strong {
  font-size: 13px;
}

.voucher-copy small {
  color: #80613f;
  font-size: 9px;
}

.voucher-card .small-action {
  grid-column: 2 / -1;
  justify-self: end;
}

.redeem-success-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 16px;
  text-align: center;
}

.redeem-success-card h2,
.redeem-success-card p {
  margin: 0;
}

.redeem-success-card p {
  color: #765334;
  font-size: 12px;
  line-height: 1.55;
}

.success-reward-art {
  width: 104px;
  height: 104px;
}

.success-reward-art .reward-img {
  max-width: 92px;
  max-height: 92px;
}

.voucher-code {
  padding: 8px 16px;
  color: #6c421d;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
  background: #fff1be;
  border: 2px dashed #9b6730;
  border-radius: 7px;
}

.booking-voucher-panel {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  background: rgba(255, 239, 184, 0.78);
  border: 2px solid rgba(148, 95, 43, 0.38);
  border-radius: 9px;
}

.booking-voucher-head {
  display: grid;
  gap: 2px;
}

.booking-voucher-head strong {
  color: #56331b;
  font-size: 13px;
}

.booking-voucher-head small {
  color: #81603c;
  font-size: 10px;
}

.booking-voucher-list {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}

.voucher-choice {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 9px;
  color: #64401f;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  background: #fff9df;
  border: 2px solid #bd9360;
  border-radius: 7px;
}

.voucher-choice small {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  opacity: 0.78;
}

.voucher-choice.selected {
  color: #fff7cd;
  background: #789a35;
  border-color: #4e681f;
}

.voucher-card.expired {
  filter: grayscale(0.78);
  opacity: 0.68;
}

.view-booking {
  min-height: calc(100dvh - 104px);
}

.booking-game-stage {
  position: relative;
  z-index: 4;
  margin-top: 0;
  padding: 11px;
  overflow: hidden;
  color: #4d2c16;
  background:
    linear-gradient(180deg, rgba(255, 248, 222, 0.88), rgba(240, 214, 166, 0.92)),
    url("./assets/public/game-parchment-texture-v1.jpg") center / 250px auto repeat;
  border: 5px solid #5b361c;
  border-radius: 12px;
  box-shadow:
    0 5px 0 #3d2414,
    inset 0 0 0 3px rgba(128, 72, 31, 0.28);
}

.booking-stage-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: #4d2c16;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.booking-stage-title strong {
  font-size: 17px;
}

.booking-stage-title small {
  font-size: 9px;
  font-weight: 800;
  text-align: right;
}

.booking-service-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.booking-service-tabs button {
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 5px;
  color: #4b2a16;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(255, 249, 226, 0.85), rgba(247, 224, 181, 0.88)),
    url("./assets/public/game-parchment-texture-v1.jpg") center / 220px auto repeat;
  border: 3px solid #9d6936;
  border-radius: 8px;
  box-shadow: 0 3px 0 #4b2d18;
}

.booking-service-tabs button.selected {
  background: #eff0b8;
  border-color: #73962f;
  box-shadow: 0 3px 0 #48641e, inset 0 0 0 2px rgba(255, 255, 226, 0.55);
}

.booking-service-tab-img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.booking-service-tabs span,
.booking-service-tabs strong,
.booking-service-tabs small {
  display: block;
  min-width: 0;
}

.booking-service-tabs strong {
  font-size: 13px;
  line-height: 1.2;
}

.booking-service-tabs small {
  margin-top: 4px;
  color: #a65a20;
  font-size: 9px;
  font-weight: 900;
}

.booking-fast-panel {
  margin-top: 9px;
  background:
    linear-gradient(180deg, rgba(255, 250, 228, 0.86), rgba(244, 219, 173, 0.9)),
    url("./assets/public/game-parchment-texture-v1.jpg") center / 270px auto repeat;
}

.booking-fast-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(139, 87, 42, 0.2);
}

.booking-fast-head strong,
.booking-fast-head small {
  display: block;
}

.booking-fast-head strong {
  font-size: 18px;
}

.booking-fast-head small {
  margin-top: 2px;
  color: #7a5635;
  font-size: 10px;
}

.booking-fast-head em {
  color: #b55e1f;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.booking-control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  margin-top: 9px;
}

.booking-date-field {
  display: grid;
  gap: 4px;
  color: #55321a;
  font-size: 11px;
  font-weight: 900;
}

.booking-date-field span {
  display: flex;
  align-items: center;
  gap: 3px;
}

.booking-date-field input {
  width: 100%;
  min-height: 38px;
  padding: 0 7px;
  color: #4f2d16;
  background: #fff9e5;
  border: 2px solid #c39158;
  border-radius: 7px;
}

.booking-people-control {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #55321a;
  font-size: 11px;
  font-weight: 900;
}

.booking-people-control .round-control {
  width: 30px;
  height: 30px;
}

.booking-people-control strong {
  min-width: 20px;
  text-align: center;
}

.booking-slot-label {
  margin-top: 9px;
  color: #55321a;
  font-size: 11px;
  font-weight: 900;
}

.booking-fast-panel .slot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 6px;
}

.booking-fast-panel .booking-slot {
  min-width: 0;
  padding: 6px 3px;
  font-size: 12px;
}

.linked-menu-card.compact {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 7px;
}

.linked-menu-icon {
  width: 37px;
  height: 37px;
  object-fit: contain;
}

.booking-wechat-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 7px 8px;
  color: #4d311c;
  background: rgba(222, 238, 177, 0.86);
  border: 2px solid rgba(102, 132, 48, 0.48);
  border-radius: 8px;
}

.booking-wechat-note strong,
.booking-wechat-note small {
  display: block;
}

.booking-wechat-note strong {
  font-size: 12px;
}

.booking-wechat-note small {
  margin-top: 2px;
  color: #6f5b3d;
  font-size: 9px;
}

.booking-submit-button {
  width: 100%;
  margin-top: 10px;
  white-space: nowrap;
}

.booking-brief-rule {
  margin: 6px 0 0;
  color: #81603f;
  font-size: 9px;
  text-align: center;
}

.mine-game-wallet {
  margin-top: 10px;
}

.mine-garden-summary {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.mine-garden-summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.mine-garden-summary strong,
.mine-garden-summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mine-garden-summary strong {
  color: #4d2d17;
  font-size: 14px;
}

.mine-garden-summary small {
  color: #80603f;
  font-size: 10px;
}

.mine-garden-summary em {
  color: #6d922e;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.mine-game-profile {
  position: relative;
  z-index: 4;
  margin-top: 0;
  padding: 12px;
  overflow: hidden;
  color: #4d2c16;
  background:
    linear-gradient(180deg, rgba(255, 248, 221, 0.88), rgba(236, 207, 155, 0.91)),
    url("./assets/public/game-parchment-texture-v1.jpg") center / 260px auto repeat;
  border: 5px solid #5a351d;
  border-radius: 12px;
  box-shadow: 0 5px 0 #382113, inset 0 0 0 3px rgba(125, 73, 32, 0.27);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.68);
}

.mine-profile-main {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.mine-profile-avatar {
  width: 44px;
  height: 44px;
}

.mine-profile-main strong,
.mine-profile-main small {
  display: block;
}

.mine-profile-main strong {
  font-size: 17px;
  font-weight: 900;
}

.mine-profile-main small {
  margin-top: 3px;
  color: #76502f;
  font-size: 11px;
  line-height: 1.35;
}

.mine-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.mine-profile-stats span {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: 1px 3px;
  padding: 6px 3px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 249, 225, 0.76), rgba(225, 199, 146, 0.82)),
    url("./assets/public/game-parchment-texture-v1.jpg") center / 180px auto repeat;
  border: 2px solid rgba(112, 66, 29, 0.48);
  border-radius: 7px;
}

.mine-profile-stats strong {
  font-size: 15px;
}

.mine-profile-stats small {
  grid-column: 1 / -1;
  color: #76502f;
  font-size: 9px;
}

.mine-game-profile > p {
  margin: 8px 0 0;
  color: #76502f;
  font-size: 9px;
  line-height: 1.35;
}

.mine-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(103, 55, 24, 0.2), rgba(52, 27, 12, 0.5)),
    url("./assets/public/game-wood-texture-v1.jpg") center / 220px auto repeat;
  border: 3px solid #4a2a16;
  border-radius: 10px;
  box-shadow: 0 4px 0 #321c0f;
}

.mine-quick-grid button {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 5px 1px;
  color: #fff2c6;
  font-size: 10px;
  background: transparent;
}

.mine-quick-grid .quick-icon {
  width: 38px;
  height: 38px;
}

.mine-quick-grid strong {
  white-space: nowrap;
}

.mine-action-board,
.mine-progress-board,
.mine-voucher-board,
.mine-order-board {
  margin-top: 9px;
}

.mine-progress-board {
  background:
    linear-gradient(180deg, rgba(249, 246, 210, 0.86), rgba(224, 232, 164, 0.9)),
    url("./assets/public/game-parchment-texture-v1.jpg") center / 260px auto repeat;
}

.admin-dashboard-board {
  background:
    linear-gradient(180deg, rgba(255, 244, 207, 0.97), rgba(233, 220, 171, 0.96)),
    repeating-linear-gradient(90deg, rgba(137, 82, 35, 0.05) 0 2px, transparent 2px 10px);
}

.admin-metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-metric-grid .summary-item:last-child {
  grid-column: 1 / -1;
}

.admin-menu-price-board {
  display: grid;
  gap: 10px;
}

.admin-menu-price-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.admin-menu-price-list label {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 52px;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: rgba(255, 249, 224, 0.82);
  border: 2px solid rgba(145, 92, 45, 0.28);
  border-radius: 8px;
}

.admin-menu-dish-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.admin-menu-price-list span,
.admin-menu-price-list strong,
.admin-menu-price-list small {
  display: block;
  min-width: 0;
}

.admin-menu-price-list strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-menu-price-list small {
  color: #8a633f;
  font-size: 8px;
}

.admin-menu-price-list em {
  color: #a8591e;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.admin-menu-price-list input {
  width: 52px;
  min-height: 31px;
  padding: 0 4px;
  color: #4f2d16;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  background: #fff8df;
  border: 2px solid #c49157;
  border-radius: 6px;
}

.admin-stock-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.admin-stock-actions strong {
  min-width: 28px;
  color: #57321a;
  font-size: 16px;
  text-align: center;
}

@keyframes garden-water-pop {
  0% { transform: translate(-50%, -50%) scale(0.86); }
  55% { transform: translate(-50%, -57%) scale(1.18); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes garden-ready-glow {
  0%,
  100% { filter: drop-shadow(0 0 0 rgba(255, 224, 74, 0)); }
  50% { filter: drop-shadow(0 0 8px rgba(255, 224, 74, 0.95)); }
}

@keyframes harvest-chip-float {
  0%,
  100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -4px); }
}

@keyframes harvest-button-pulse {
  0%,
  100% { transform: scale(1); }
  50% { transform: scale(1.018); }
}

.view-menu {
  margin: -12px -12px 0;
  padding-bottom: 112px;
  background:
    linear-gradient(180deg, rgba(39, 20, 9, 0) 0, rgba(39, 20, 9, 0.08) 24%, rgba(39, 20, 9, 0.44) 55%, rgba(39, 20, 9, 0.68) 100%),
    url("./assets/menu/menu-bg-public.jpg") center top / 100% auto no-repeat,
    #4a2713;
}

.menu-hero-panel {
  position: relative;
  min-height: 218px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(31, 18, 10, 0.06), rgba(43, 23, 10, 0.18) 58%, rgba(39, 22, 10, 0.56));
  border-bottom: 5px solid #4b2a15;
  box-shadow: inset 0 -10px 0 rgba(61, 33, 15, 0.42);
}

.menu-hero-overlay {
  position: relative;
  z-index: 1;
  min-height: 218px;
  padding: calc(16px + env(safe-area-inset-top)) 14px 16px;
}

.menu-back {
  position: absolute;
  left: 14px;
  top: calc(16px + env(safe-area-inset-top));
}

.menu-title-board {
  position: relative;
  width: min(260px, calc(100% - 118px));
  min-height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  padding: 8px 18px;
  color: #fff7d8;
  font-size: 29px;
  font-weight: 900;
  letter-spacing: 0;
  background:
    linear-gradient(180deg, #9c5b2f, #673719),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 5px, transparent 5px 14px);
  border: 3px solid #3e2111;
  border-radius: 8px;
  box-shadow:
    0 5px 0 #2d170c,
    inset 0 0 0 2px rgba(255, 222, 149, 0.28);
  text-shadow: 0 3px 0 #3c2111;
}

.menu-title-board::before,
.menu-title-board::after {
  content: "";
  position: absolute;
  top: calc(3px + env(safe-area-inset-top));
  width: 10px;
  height: 52px;
  background: linear-gradient(180deg, #a36a35, #4a2a16);
  border: 2px solid #2d170c;
  border-radius: 6px;
}

.menu-title-board::before {
  left: calc(50% - 120px);
}

.menu-title-board::after {
  right: calc(50% - 120px);
}

.menu-board {
  position: relative;
  z-index: 2;
  margin: -20px 10px 0;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(94, 54, 27, 0.78), rgba(57, 31, 16, 0.84)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 9px);
  border: 4px solid #2e190d;
  border-radius: 14px;
  box-shadow:
    0 7px 0 #201006,
    inset 0 0 0 2px rgba(220, 151, 78, 0.28);
}

.menu-booking-context {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 9px 10px;
  color: #4c2d18;
  background: rgba(224, 239, 184, 0.94);
  border: 2px solid #83a442;
  border-radius: 9px;
}

.menu-booking-context strong,
.menu-booking-context small {
  display: block;
}

.menu-booking-context small {
  margin-top: 2px;
  color: #76502d;
  font-size: 11px;
}

.menu-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  margin-bottom: 12px;
  background: rgba(255, 240, 204, 0.92);
  border: 3px solid #a86e38;
  border-radius: 10px;
}

.menu-clear-button {
  flex: 0 0 auto;
  min-width: 52px;
  white-space: nowrap;
}

.dish-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dish-card {
  position: relative;
  min-width: 0;
  padding: 8px 7px 9px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 246, 222, 0.98), rgba(255, 230, 190, 0.96));
  border: 3px solid #9b6537;
  border-radius: 10px;
  box-shadow:
    0 5px 0 #3a1f10,
    inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.dish-card.selected {
  border-color: #7daa32;
  box-shadow:
    0 5px 0 #3d5f19,
    inset 0 0 0 2px rgba(255, 255, 255, 0.42),
    0 0 0 3px rgba(128, 171, 55, 0.26);
}

.dish-card.just-added .dish-img {
  animation: farm-dish-added 320ms var(--motion-pop);
}

.dish-index {
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 1;
  min-width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: #fff2c9;
  font-size: 14px;
  font-weight: 900;
  background: #9b6537;
  border: 2px solid #5b341b;
  border-radius: 6px;
  text-shadow: 0 1px 0 #4b2814;
}

.dish-image {
  height: 92px;
  display: grid;
  place-items: center;
  margin-bottom: 5px;
}

.dish-img {
  width: 112px;
  max-width: 100%;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 5px 2px rgba(53, 29, 11, 0.28));
}

.dish-copy {
  display: grid;
  gap: 7px;
}

.dish-title {
  color: #4a2b16;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
}

.dish-meta,
.dish-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.dish-meta span {
  flex: 0 0 auto;
  min-width: 42px;
  padding: 2px 7px;
  color: #fff8df;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  background: #d86c24;
  border: 2px solid #9a4319;
  border-radius: 6px;
  text-shadow: 0 1px 0 #7a3518;
}

.dish-meta strong {
  min-width: 0;
  overflow: hidden;
  color: #7a3a17;
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dish-step {
  width: 32px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #5c351d;
  font-size: 18px;
  font-weight: 900;
  background: #fff4d1;
  border: 2px solid #bf8a4e;
  border-radius: 8px;
}

.dish-step.primary {
  color: #fff7d6;
  background: #77a832;
  border-color: #4d6f1e;
  text-shadow: 0 1px 0 #334b16;
}

.dish-qty {
  min-width: 22px;
  text-align: center;
  color: #55311b;
  font-size: 16px;
}

.menu-checkout {
  position: fixed;
  left: 50%;
  bottom: calc(78px + env(safe-area-inset-bottom));
  z-index: 21;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 3px;
  width: min(410px, calc(100vw - 20px));
  margin: 0;
  padding: 9px 10px;
  transform: translateX(-50%);
}

.menu-checkout.cart-bump {
  animation: farm-cart-bump 300ms var(--motion-pop);
}

.menu-cart-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff3c7;
}

.menu-cart-summary span:last-child {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.menu-cart-summary strong {
  font-size: 15px;
  font-weight: 900;
}

.menu-cart-summary small {
  color: #f8df9d;
  font-size: 13px;
  font-weight: 900;
}

.menu-cart-preview {
  grid-column: 1;
  grid-row: 2;
  min-height: 22px;
  overflow: hidden;
  color: #f8df9d;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-submit {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 58px;
  min-width: 132px;
  width: 100%;
  padding-inline: 10px;
  white-space: nowrap;
  flex-wrap: nowrap;
  line-height: 1;
}

.menu-submit .button-icon {
  width: 20px;
  height: 20px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 50;
  width: min(330px, calc(100vw - 44px));
  padding: 11px 14px;
  color: #fff8df;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
  background: rgba(73, 43, 20, 0.95);
  border: 3px solid #d5a76a;
  border-radius: 12px;
  box-shadow: 0 6px 0 rgba(45, 25, 10, 0.8);
  transform: translateX(-50%);
  animation: farm-toast-in 220ms var(--motion-pop) both;
}

.home-monitor-tip,
.quick-card,
.dish-step,
.mine-record-tab,
.method-button,
.farm-card {
  transition:
    transform var(--motion-fast) var(--motion-ease),
    border-color var(--motion-standard) var(--motion-ease),
    box-shadow var(--motion-standard) var(--motion-ease),
    filter var(--motion-standard) var(--motion-ease);
}

button:focus-visible {
  outline: 3px solid #ffe28a;
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .module-card:hover,
  .service-card:hover,
  .plot-card:hover,
  .home-plot-card:hover,
  .quick-card:hover,
  .farm-card:hover {
    transform: translateY(-2px);
  }

  .pixel-button:hover,
  .small-action:hover,
  .home-monitor-tip:hover,
  .round-control:hover,
  .dish-step:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
  }

  .field-marker.menu-entry:hover .menu-entry-img {
    transform: translateY(-3px) rotate(-2deg);
  }

  .field-marker.gallery-entry:hover .gallery-entry-img {
    transform: translateY(-2px) scale(1.05);
  }
}

@keyframes farm-rise-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes farm-item-enter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes farm-waiting {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.04);
    filter: brightness(1.08);
  }
}

@keyframes farm-home-crop-ready {
  0%,
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-3px);
  }
}

@keyframes farm-crop-ready {
  0%,
  100% {
    transform: translate(-50%, -52%) translateY(0);
  }
  50% {
    transform: translate(-50%, -52%) translateY(-4px);
  }
}

@keyframes farm-reward {
  0% {
    opacity: 0;
    transform: scale(0.62) rotate(-8deg);
  }
  72% {
    transform: scale(1.08) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes farm-dish-added {
  0% {
    transform: scale(0.88) translateY(4px);
  }
  72% {
    transform: scale(1.08) translateY(-2px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

@keyframes farm-cart-bump {
  0% {
    transform: translateX(-50%) scale(1);
  }
  56% {
    transform: translateX(-50%) scale(1.025);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

@keyframes farm-tab-settle {
  0% {
    transform: translateY(3px) scale(0.92);
  }
  65% {
    transform: translateY(-2px) scale(1.06);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes farm-toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes farm-like-pop {
  0% {
    transform: scale(0.75);
  }
  65% {
    transform: scale(1.28);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes watering-can-pour {
  0% {
    opacity: 0;
    transform: translate(24px, -10px) rotate(6deg) scale(0.9);
  }
  25% {
    opacity: 1;
  }
  55%,
  78% {
    opacity: 1;
    transform: translate(0, 0) rotate(-24deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(10px, -4px) rotate(2deg) scale(0.96);
  }
}

@keyframes watering-drop {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.72);
  }
  28% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-18px, 92px) scale(1.08);
  }
}

@keyframes watering-success-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, 12px) scale(0.84);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.06);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -8px) scale(1);
  }
}

.home-onboarding {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px;
  color: #563319;
  background: rgba(255, 246, 203, 0.96);
  border: 2px solid #a36d30;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.38);
}

.home-onboarding-steps,
.booking-step-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.home-onboarding-steps span,
.booking-step-strip span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.home-onboarding-steps b,
.booking-step-strip b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: #fff9df;
  font-size: 10px;
  background: #699c20;
  border: 1px solid #436413;
  border-radius: 50%;
}

.home-onboarding-steps i,
.booking-step-strip i {
  color: #a27642;
  font-style: normal;
}

.booking-step-strip {
  gap: 5px;
  margin: 7px 0 9px;
  padding: 7px 9px;
  color: #765232;
  background: rgba(255, 245, 210, 0.9);
  border: 1px solid rgba(123, 73, 35, 0.5);
  border-radius: 7px;
}

.booking-step-strip span {
  flex: 1;
  justify-content: center;
}

.booking-step-strip .active {
  color: #4b6f19;
}

.view-enter .reward-card {
  animation: panel-enter 320ms both;
  animation-delay: calc(var(--motion-index, 0) * 36ms);
}

/* v0.5 prelaunch mobile typography and overflow guardrails */
body {
  font-size: 14px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.title {
  font-size: 24px;
  line-height: 1.15;
}

.subtitle,
.muted,
.record-head span,
.record-meta,
.feature-row,
.game-crop-copy p,
.reward-copy p,
.game-rule-note,
.group-guide p,
.handoff-note,
.success-promise {
  font-size: 12px;
  line-height: 1.5;
}

.block-title,
.section-title,
.module-title,
.service-title,
.package-title {
  font-size: 17px;
  line-height: 1.3;
  text-wrap: balance;
}

.pixel-button {
  min-height: 46px;
  max-width: 100%;
  padding-inline: 12px;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.small-action,
.method-button,
.slot-button,
.voucher-choice {
  min-height: 36px;
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-status,
.badge,
.slot-chip,
.home-plot-status,
.game-crop-title em,
.reward-head em,
.version-pill,
.home-board-actions button,
.mine-quick-grid button,
.admin-menu-price-list small,
.slot-chip small,
.booking-slot small,
.booking-voucher-head small,
.voucher-choice small,
.booking-stage-title small,
.mine-garden-summary small {
  font-size: 11px;
  line-height: 1.2;
}

.record-card,
.reward-card,
.game-crop-card,
.voucher-card,
.mine-task-card,
.mine-empty-task {
  min-width: 0;
}

.record-head > div,
.reward-copy,
.game-crop-copy,
.voucher-copy,
.mine-task-copy,
.home-service-copy,
.booking-service-tabs span,
.booking-fast-head > div,
.linked-menu-card > div,
.reward-market-guide span,
.reward-shelf-title > div {
  min-width: 0;
}

.record-head strong,
.reward-head strong,
.game-crop-title strong,
.voucher-copy strong,
.mine-task-copy strong,
.home-service-copy strong,
.booking-service-tabs strong,
.dish-title,
.booking-fast-head strong,
.linked-menu-card strong,
.reward-market-guide strong,
.reward-shelf-title strong {
  overflow: hidden;
  line-height: 1.3;
  text-overflow: ellipsis;
  text-wrap: pretty;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.record-head span,
.voucher-copy small,
.mine-task-copy small,
.home-service-copy small,
.booking-service-tabs small,
.linked-menu-card small,
.booking-fast-head small,
.reward-market-guide small,
.reward-shelf-title small {
  overflow-wrap: anywhere;
  white-space: normal;
}

.voucher-copy small {
  font-size: 11px;
  line-height: 1.35;
}

.home-service-copy strong,
.dish-title {
  font-size: 15px;
}

.home-service-copy small,
.booking-service-tabs small,
.game-task-strip small,
.booking-wechat-note small,
.booking-brief-rule,
.mine-profile-main small,
.mine-profile-stats small,
.mine-game-profile > p {
  font-size: 11px;
  line-height: 1.35;
}

.dish-step,
.round-control {
  min-width: 38px;
  width: 38px;
  min-height: 38px;
  height: 38px;
}

.tab-text {
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

.menu-cart-preview,
.menu-cart-summary small {
  font-size: 12px;
}

.home-board-actions button,
.home-menu-order,
.home-reward-hook button,
.mine-service-link {
  min-height: 36px;
}

.booking-submit-button,
.menu-submit,
.order-submit {
  min-height: 48px;
}

input,
textarea,
select {
  font-size: 16px;
  line-height: 1.35;
}

@media (max-width: 380px) {
  .app-shell {
    padding-inline: 9px;
  }

  .hero-top {
    gap: 5px;
  }

  .immersive-title h1 {
    font-size: 20px;
  }

  .immersive-resource {
    padding-inline: 4px;
  }

  .user-chip {
    min-width: 82px;
    padding-inline: 5px;
  }

  .booking-service-tabs button {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .booking-service-tab-img {
    width: 50px;
    height: 50px;
  }

  .booking-fast-panel .slot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .reward-card {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .reward-art {
    width: 58px;
    height: 58px;
  }

  .reward-img {
    max-width: 54px;
    max-height: 54px;
  }

  .admin-menu-price-list {
    grid-template-columns: 1fr;
  }

  .reward-market-hud {
    justify-content: stretch;
  }

  .reward-market-hud > span {
    min-width: 0;
    flex: 1;
  }

  .reward-market-guide {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .reward-steward-img {
    width: 34px;
    height: 34px;
  }

  .reward-market-guide .small-action {
    grid-column: 1 / -1;
    width: 100%;
  }

  .home-onboarding {
    grid-template-columns: 1fr;
  }

  .home-onboarding .small-action {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

@media (min-width: 431px) {
  .app-shell {
    min-height: 920px;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1),
      0 18px 60px rgba(0, 0, 0, 0.35);
  }
}

@media (max-width: 360px) {
  .hero-top {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mini-actions {
    display: none;
  }

  .title {
    font-size: 23px;
  }

  .immersive-profile {
    left: 5px;
    width: 54px;
  }

  .immersive-avatar {
    width: 42px;
    height: 42px;
  }

  .immersive-avatar-img {
    width: 38px;
    height: 41px;
  }

  .immersive-profile strong {
    width: 54px;
    font-size: 10px;
  }

  .immersive-level {
    left: 10px;
  }

  .immersive-title {
    left: 18.5%;
    width: 63%;
  }

  .immersive-title h1 {
    font-size: 18px;
  }

  .immersive-resource {
    right: 4px;
    width: 65px;
  }

  .archive-handoff-code {
    grid-template-columns: 1fr;
  }

  .module-title,
  .service-title,
  .package-title,
  .block-title {
    font-size: 17px;
  }

  .mine-core-actions {
    grid-template-columns: 1fr;
  }

  .mine-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-crop-card {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .game-crop-art {
    width: 58px;
    height: 58px;
  }

  .game-crop-img {
    max-width: 54px;
    max-height: 54px;
  }

  .game-crop-card .crop-plant-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .garden-wallet-card strong {
    font-size: 13px;
  }

  .booking-stage-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .booking-step-strip {
    gap: 2px;
    padding-inline: 5px;
  }

  .booking-step-strip span {
    font-size: 10px;
  }

  .booking-step-strip b {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
    font-size: 9px;
  }

  .reward-confirm-scene {
    grid-template-columns: 86px minmax(0, 1fr);
    min-height: 150px;
  }

  .reward-confirm-scene-img {
    width: 82px;
    height: 82px;
  }
}

/* v0.5.4 game retention hook and ornamental scene pass */
.home-reward-goal {
  position: relative;
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  padding: 8px 9px;
  overflow: hidden;
  color: #563016;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(255, 249, 211, 0.94), rgba(242, 216, 154, 0.95)),
    url("./assets/public/game-parchment-texture-v1.jpg") center / 220px auto repeat;
  border: 3px solid #74401e;
  border-radius: 9px;
  box-shadow:
    0 4px 0 #43250f,
    inset 0 0 0 2px rgba(255, 255, 225, 0.48);
}

.home-reward-goal::after {
  content: "";
  position: absolute;
  right: -11px;
  bottom: -13px;
  width: 58px;
  height: 40px;
  pointer-events: none;
  background: url("./assets/sprites/decor-flowers.png") center / contain no-repeat;
  opacity: 0.82;
}

.home-reward-goal-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 3px 0 rgba(70, 38, 14, 0.35));
  animation: farm-reward-pulse 2.4s var(--motion-ease) infinite;
}

.home-reward-goal > span {
  min-width: 0;
}

.home-reward-goal strong,
.home-reward-goal small {
  display: block;
}

.home-reward-goal strong {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-reward-goal small {
  margin-top: 2px;
  color: #80603a;
  font-size: 10px;
  line-height: 1.25;
}

.home-reward-goal i {
  height: 8px;
  display: block;
  margin-top: 5px;
  overflow: hidden;
  background: #c89a55;
  border: 1px solid #70421f;
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(60, 31, 12, 0.35);
}

.home-reward-goal i b {
  height: 100%;
  display: block;
  background: linear-gradient(180deg, #b8e24b, #6d9f24);
  border-right: 1px solid #496817;
  border-radius: inherit;
  transition: width 420ms var(--motion-enter);
}

.home-reward-goal em {
  position: relative;
  z-index: 1;
  align-self: end;
  padding: 4px 5px;
  color: #fff5c9;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
  background: #9d5a22;
  border: 1px solid #5d3216;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 226, 148, 0.38);
}

.reward-shelf,
.booking-game-stage,
.mine-game-profile {
  overflow: visible;
}

.reward-shelf {
  position: relative;
  margin-top: 20px;
  padding-top: 24px;
}

.booking-game-stage,
.mine-game-profile {
  margin-top: 20px;
  padding-top: 25px;
}

.reward-shelf::before,
.booking-game-stage::before,
.mine-game-profile::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: -22px;
  left: -7px;
  width: calc(100% + 14px);
  height: 48px;
  pointer-events: none;
  background: url("./assets/public/game-ornament-trim-v1.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 0 rgba(55, 29, 12, 0.54));
}

.reward-shelf::after,
.booking-game-stage::after,
.mine-game-profile::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: -8px;
  bottom: -9px;
  width: 54px;
  height: 38px;
  pointer-events: none;
  background: url("./assets/sprites/decor-flowers.png") center / contain no-repeat;
}

.reward-shelf-title,
.booking-stage-title,
.mine-profile-main,
.mine-profile-stats {
  position: relative;
  z-index: 2;
}

.reward-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 250, 222, 0.92), rgba(239, 213, 159, 0.95)),
    url("./assets/public/game-parchment-texture-v1.jpg") center / 220px auto repeat;
  border-color: #815028;
  box-shadow:
    0 4px 0 rgba(67, 35, 14, 0.74),
    inset 0 0 0 2px rgba(255, 250, 213, 0.52);
}

.reward-card::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 10px;
  width: 38px;
  height: 13px;
  background: linear-gradient(180deg, #d98b2d, #a95019);
  border: 2px solid #713418;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 2px 0 rgba(74, 35, 13, 0.28);
}

.booking-service-tabs button {
  position: relative;
  transition:
    transform var(--motion-fast) var(--motion-ease),
    filter var(--motion-fast) var(--motion-ease);
}

.booking-service-tabs button:active {
  transform: translateY(2px);
}

.booking-service-tabs button.selected {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(239, 244, 178, 0.93), rgba(190, 211, 104, 0.94)),
    url("./assets/public/game-parchment-texture-v1.jpg") center / 220px auto repeat;
  filter: saturate(1.08);
}

.booking-service-tabs button.selected::after {
  content: "已选";
  position: absolute;
  top: -7px;
  right: -4px;
  padding: 2px 5px;
  color: #fff7cf;
  font-size: 9px;
  font-weight: 900;
  background: #6e9c2c;
  border: 2px solid #4a641d;
  border-radius: 5px;
  box-shadow: 0 2px 0 rgba(57, 34, 14, 0.42);
}

.booking-fast-panel,
.booking-voucher-panel,
.mine-action-board,
.mine-progress-board,
.mine-voucher-board,
.mine-order-board,
.mine-record-panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 247, 215, 0.92), rgba(232, 205, 151, 0.94)),
    url("./assets/public/game-parchment-texture-v1.jpg") center / 250px auto repeat;
  border-color: #73451f;
  box-shadow:
    0 4px 0 rgba(55, 29, 12, 0.68),
    inset 0 0 0 2px rgba(255, 251, 222, 0.42);
}

.booking-fast-panel::before,
.mine-action-board::before,
.mine-progress-board::before,
.mine-voucher-board::before,
.mine-order-board::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 7px;
  width: 25px;
  height: 18px;
  pointer-events: none;
  background: url("./assets/sprites/crop-leaf.png") center / contain no-repeat;
  opacity: 0.32;
  transform: rotate(-18deg);
}

.mine-quick-grid {
  position: relative;
}

.mine-quick-grid::after {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -10px;
  height: 18px;
  pointer-events: none;
  background: url("./assets/public/game-ornament-trim-v1.png") center / 100% 100% no-repeat;
  opacity: 0.72;
}

@keyframes farm-reward-pulse {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg) scale(1);
  }

  45% {
    transform: translateY(-3px) rotate(2deg) scale(1.07);
  }
}

@media (max-width: 360px) {
  .home-reward-goal {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .home-reward-goal-icon {
    width: 34px;
    height: 34px;
  }

  .home-reward-goal em {
    display: none;
  }

  .reward-shelf::before,
  .booking-game-stage::before,
  .mine-game-profile::before {
    top: -18px;
    height: 42px;
  }
}