.game {
  --garden-main-width: 520px;
  --side-zone-width: 132px;
  --side-panel-width: 232px;
  width: min(calc(100vw - 48px), var(--garden-main-width));
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.ground-plaque {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--grass-top) 0%, var(--grass-bottom) 100%);
  color: #2d5018;
  font-weight: 600;
  border: 1px solid rgba(45, 80, 24, 0.38);
  box-shadow:
    0 2px 5px rgba(45, 80, 24, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  --sky-top: #4ba3f5;
  --sky-bottom: #87ceeb;
  --grass-top: #72c848;
  --grass-bottom: #3f9224;
  --grass-mid: #58ad32;
  --horizon: 38vh;
  --farm-top: var(--horizon);
  --farm-bottom-reserve: 8px;
  --game-toast-band: 0px;
  --farm-fence-bottom-h: 48px;
  --farm-fence-side-w: 26px;
  --fence-tile-h: 56px;
  --fence-tile-v: 28px;
  --fence-bark-opacity: 0.48;
  --fence-bark-tile-w: 52px;
  --fence-bark-tile-h: 70px;
  --zone-fence-gate-cols: 1;
  --farm-fence-side-top: var(--farm-top);
  --farm-fence-side-bottom: calc(var(--farm-fence-bottom-h) + var(--farm-bottom-reserve));
  --sky-ui-inset: 24px;
  --weather-bar-offset: 16px;
  --weather-bar-stack: 42px;
  --portal-top: var(--world-ui-inset);
  --world-ui-inset: 16px;
  --garden-main-width: 520px;
  --side-zone-width: 132px;
  --side-panel-width: 232px;
  --warehouse-panel-width: 324px;
  --game-width: min(calc(100vw - 48px), var(--garden-main-width));
  --warehouse-gap: 14px;
  --warehouse-panel-gap: 10px;
  --warehouse-left: min(
    calc(50% + var(--game-width) / 2 + var(--warehouse-gap)),
    calc(
      100vw - var(--world-ui-inset) - var(--side-zone-width) -
        var(--warehouse-panel-width) - var(--warehouse-panel-gap)
    )
  );
  --ui-panel-radius: 16px;
  --ui-panel-inner-radius: 12px;
  --ui-panel-bg: rgba(255, 255, 255, 0.92);
  --ui-panel-blur: blur(28px) saturate(1.25);
  --ui-panel-border: 0.5px solid rgba(0, 0, 0, 0.08);
  --ui-panel-ring: none;
  --ui-panel-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 24px 48px -16px rgba(0, 0, 0, 0.12);
  --ui-surface: #ffffff;
  --ui-surface-muted: #f4f4f5;
  --ui-surface-elevated: #fafafa;
  --ui-panel-header: transparent;
  --ui-accent: #15803d;
  --ui-accent-soft: rgba(21, 128, 61, 0.08);
  --ui-text-primary: #18181b;
  --ui-text-secondary: #71717a;
  --ui-text-tertiary: #a1a1aa;
  --ui-hairline: rgba(0, 0, 0, 0.06);
  --ui-warm-accent: #71717a;
  background: var(--grass-mid);
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

.sky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--horizon);
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
  transition: background 1.2s ease;
}

.sky-photo {
  display: none;
}

body.weather-overcast .sky {
  background-color: #9aa8b4;
  background-image: none;
}

body.weather-overcast .sky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("assets/sky-overcast.png");
  background-repeat: no-repeat;
  background-size: 130% 100%;
  background-position: 0% top;
  animation: sky-photo-drift 100s linear infinite;
  will-change: background-position;
}

@keyframes sky-photo-drift {
  from {
    background-position: 0% top;
  }

  to {
    background-position: 100% top;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.weather-overcast .sky::before {
    animation: none;
    background-position: 50% top;
    background-size: cover;
  }
}

.grass-field {
  position: fixed;
  top: var(--horizon);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, var(--grass-top) 0%, var(--grass-bottom) 100%);
}

.grass-field-photo {
  position: absolute;
  inset: -4% 0 0;
  background:
    url("assets/grass-field.png") center 38% / cover no-repeat;
  transform: scale(1.06);
  transform-origin: center top;
  animation: grass-photo-settle 1.2s ease both;
}

@keyframes grass-photo-settle {
  from {
    opacity: 0;
    transform: scale(1.1);
  }

  to {
    opacity: 1;
    transform: scale(1.06);
  }
}

.grass-field-stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.045) 0,
    rgba(255, 255, 255, 0.045) 2px,
    rgba(0, 0, 0, 0.028) 2px,
    rgba(0, 0, 0, 0.028) 16px
  );
  mix-blend-mode: soft-light;
  opacity: 0.72;
}

/* 天空与作业区相接处不额外叠绿光/地平线辉光 */
.grass-field-horizon {
  display: none;
}

.grass-field-tint {
  position: absolute;
  inset: 0;
  background: transparent;
  transition: background 1.2s ease, opacity 1.2s ease;
}

body.weather-sunny .grass-field-tint {
  background: linear-gradient(180deg, rgba(255, 255, 220, 0.06) 0%, transparent 40%);
}

body.weather-cloudy .grass-field-tint {
  background: linear-gradient(180deg, rgba(255, 255, 220, 0.05) 0%, transparent 42%);
}

body.weather-overcast .grass-field-tint {
  background: linear-gradient(180deg, rgba(180, 200, 190, 0.12) 0%, rgba(120, 140, 110, 0.08) 100%);
}

body.weather-fog .grass-field-tint {
  background: rgba(210, 220, 215, 0.22);
}

body.weather-rain .grass-field-tint,
body.weather-storm .grass-field-tint {
  background: linear-gradient(180deg, rgba(40, 60, 70, 0.18) 0%, rgba(30, 50, 40, 0.28) 100%);
}

body.weather-snow .grass-field-tint {
  background: linear-gradient(180deg, rgba(240, 248, 255, 0.18) 0%, rgba(220, 235, 245, 0.12) 100%);
}

body.weather-night-clear .grass-field-tint {
  background: linear-gradient(180deg, rgba(8, 24, 16, 0.35) 0%, rgba(12, 36, 22, 0.55) 100%);
}

body.weather-night-cloudy .grass-field-tint,
body.weather-night-rain .grass-field-tint {
  background: linear-gradient(180deg, rgba(6, 16, 12, 0.42) 0%, rgba(8, 22, 16, 0.62) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .grass-field-photo {
    animation: none;
    transform: scale(1.06);
  }
}

.sky-sun {
  position: absolute;
  top: 16%;
  right: 12%;
  z-index: 2;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.sky-sun--day {
  width: 48px;
  height: 48px;
  background: radial-gradient(circle at 32% 28%, #fffef8 0%, #ffe566 42%, #ffb830 78%, #f59e0b 100%);
  box-shadow:
    0 0 18px rgba(255, 200, 60, 0.72),
    0 0 44px rgba(255, 210, 90, 0.38);
  animation: sun-day-alive 5s ease-in-out infinite;
}

body.weather-sunny .sky-sun--day,
body.weather-night-clear .sky-sun--day {
  opacity: 1;
}

body.weather-night-clear .sky-sun--day {
  width: 52px;
  height: 52px;
  border-radius: 0;
  background-color: transparent;
  background-image: url("/assets/moon-crescent.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: none;
  animation: moon-alive 5.5s ease-in-out infinite;
}

.sky-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}

body.weather-night-clear .sky-stars {
  opacity: 1;
}

.sky-star {
  position: absolute;
  border-radius: 50%;
  background: #fffef8;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.55);
  transform: translate(-50%, -50%);
  animation: star-twinkle ease-in-out infinite;
}

.sky-star--sparkle::before,
.sky-star--sparkle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(255, 255, 255, 0.75);
  transform: translate(-50%, -50%);
  border-radius: 1px;
}

.sky-star--sparkle::before {
  width: 220%;
  height: 1px;
}

.sky-star--sparkle::after {
  width: 1px;
  height: 220%;
}

@keyframes moon-alive {
  0%,
  100% {
    transform: translate(0, 0) rotate(136deg) scale(0.94);
    opacity: 0.86;
    filter:
      brightness(1.32)
      drop-shadow(0 0 14px rgba(255, 255, 255, 0.82))
      drop-shadow(0 0 28px rgba(255, 255, 255, 0.58));
  }
  25% {
    transform: translate(3px, 4px) rotate(142deg) scale(1.05);
    opacity: 1;
    filter:
      brightness(1.52)
      drop-shadow(0 0 22px rgba(255, 255, 255, 1))
      drop-shadow(0 0 42px rgba(255, 255, 255, 0.92));
  }
  50% {
    transform: translate(-3px, 7px) rotate(146deg) scale(1);
    opacity: 0.94;
    filter:
      brightness(1.4)
      drop-shadow(0 0 18px rgba(255, 255, 255, 0.92))
      drop-shadow(0 0 34px rgba(255, 255, 255, 0.75));
  }
  75% {
    transform: translate(-4px, 3px) rotate(138deg) scale(1.06);
    opacity: 1;
    filter:
      brightness(1.55)
      drop-shadow(0 0 24px rgba(255, 255, 255, 1))
      drop-shadow(0 0 44px rgba(255, 255, 255, 0.95));
  }
}

@keyframes star-twinkle {
  0%,
  100% {
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(0.82);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.18);
  }
}

@keyframes sun-day-alive {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.96;
  }
  50% {
    transform: translateY(4px) scale(1.06);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sky-sun--day {
    animation: none !important;
  }

  .sky-star {
    animation: none !important;
    opacity: 0.72;
  }
}

.sky-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sky-cloud {
  position: absolute;
  left: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  filter: blur(0.5px);
  animation: cloud-drift linear infinite;
  animation-direction: normal;
  will-change: transform;
  box-shadow:
    28px 6px 0 -4px rgba(255, 255, 255, 0.75),
    -24px 10px 0 -6px rgba(255, 255, 255, 0.7),
    12px -8px 0 -4px rgba(255, 255, 255, 0.65);
}

body.weather-cloudy .sky-cloud {
  background: rgba(255, 255, 255, 0.94);
  filter: blur(0.5px);
  box-shadow:
    32px 8px 0 -6px rgba(255, 255, 255, 0.88),
    -28px 12px 0 -8px rgba(255, 255, 255, 0.82),
    14px -6px 0 -4px rgba(255, 255, 255, 0.78);
}

@keyframes cloud-drift {
  0% {
    transform: translate3d(-130%, 0, 0);
  }
  100% {
    transform: translate3d(calc(100vw + 130%), 0, 0);
  }
}

.sky-precip {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.precip-drop,
.precip-flake {
  position: absolute;
  top: -12px;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.precip-drop {
  width: 1.5px;
  height: 18px;
  border-radius: 1px;
  background: linear-gradient(
    180deg,
    rgba(150, 190, 220, 0) 0%,
    rgba(150, 190, 220, 0.28) 40%,
    rgba(170, 205, 235, 0.72) 100%
  );
  transform: skewX(-6deg);
  animation-name: rain-fall;
  opacity: 0.75;
}

.precip-flake {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  animation-name: snow-fall;
}

@keyframes rain-fall {
  to {
    transform: translateY(calc(var(--horizon) + 20px));
  }
}

@keyframes snow-fall {
  to {
    transform: translateY(calc(var(--horizon) + 20px)) translateX(12px);
  }
}

body.weather-storm .sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.28);
  opacity: 0;
  animation: lightning-flash 5s infinite;
  pointer-events: none;
}

@keyframes lightning-flash {
  0%,
  91%,
  100% {
    opacity: 0;
  }
  92%,
  94% {
    opacity: 1;
  }
}

/* 上海实时天气主题 */
body.weather-sunny {
  --sky-top: #4ba3f5;
  --sky-bottom: #87ceeb;
}

/* 底部保持不透明，避免透出草地形成工具箱两侧「绿光」 */
body.weather-sunny .sky,
body.weather-loading .sky,
body.weather-cloudy .sky {
  background: linear-gradient(180deg, #4ba3f5 0%, #87ceeb 100%);
}

body.weather-cloudy {
  --sky-top: #4ba3f5;
  --sky-bottom: #87ceeb;
}

body.weather-overcast {
  --sky-top: #6b7f8f;
  --sky-bottom: #95a8b5;
}

body.weather-fog {
  --sky-top: #b0bcc4;
  --sky-bottom: #d4dde2;
}

body.weather-rain {
  --sky-top: #4a5f73;
  --sky-bottom: #6b8499;
}

body.weather-snow {
  --sky-top: #b8c9d9;
  --sky-bottom: #dce8f0;
}

body.weather-storm {
  --sky-top: #2a3544;
  --sky-bottom: #455566;
}

body.weather-night-clear {
  --sky-top: #0f1a33;
  --sky-bottom: #1a2a4a;
}

body.weather-night-cloudy {
  --sky-top: #1a2438;
  --sky-bottom: #2a3850;
}

body.weather-night-rain {
  --sky-top: #141e2e;
  --sky-bottom: #243040;
}

body.weather-loading {
  --sky-top: #4ba3f5;
  --sky-bottom: #87ceeb;
}

/* 天空区：标题 + 工具箱 */
.sky-stage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--horizon);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 16px var(--sky-ui-inset) 8px;
  pointer-events: none;
  overflow: visible;
}

.sky-stage .game {
  pointer-events: auto;
  height: 100%;
  justify-content: space-between;
}

/* 工具箱始终贴天空区底部，header 装饰不得挤占其位置 */
.sky-stage .game > .play-layout {
  margin-top: auto;
  flex-shrink: 0;
}

.sky-stage .game > .header {
  flex-shrink: 0;
}

.game {
  --garden-main-width: 520px;
  --side-zone-width: 132px;
  --side-panel-width: 232px;
  width: min(calc(100vw - 48px), var(--garden-main-width));
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.ground-plaque {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--grass-top) 0%, var(--grass-bottom) 100%);
  color: #2d5018;
  font-weight: 600;
  border: 1px solid rgba(45, 80, 24, 0.38);
  box-shadow:
    0 2px 5px rgba(45, 80, 24, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

.header {
  display: flex;
  justify-content: center;
  text-align: center;
  color: #fff;
  width: 100%;
  flex-shrink: 0;
  overflow: visible;
  --header-logo-h: 19.8rem;
  --header-title-size: 1.85rem;
}

.weather-bar {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 4px;
  padding: 0 4px;
  background: transparent;
  border: none;
  backdrop-filter: none;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  max-width: 100%;
  pointer-events: none;
}

.weather-icon {
  font-size: 1.15rem;
  line-height: 1;
}

body.weather-sunny .weather-icon,
body.weather-night-clear .weather-icon {
  display: none;
}

.weather-info {
  opacity: 0.95;
}

.account-bar:has(.account-menu--open) {
  z-index: 2000;
}

.account-bar {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
  max-width: calc(100vw - 32px);
}

.account-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  font: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}

.account-chip:hover {
  background: rgba(255, 255, 255, 0.3);
}

.account-chip:active {
  transform: scale(0.97);
}

.account-chip--coins,
.account-chip--circle,
.account-chip--settings {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.42);
}

.account-chip--coins:hover,
.account-chip--circle:hover,
.account-chip--settings:hover {
  background: rgba(255, 255, 255, 0.32);
}

.account-chip-icon {
  font-size: 1rem;
  line-height: 1;
}

.account-chip-label {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.account-chip-badge {
  top: -5px;
  right: -5px;
}

.account-menu {
  position: relative;
}

.account-menu-caret {
  font-size: 0.62rem;
  opacity: 0.85;
  line-height: 1;
  margin-left: 2px;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.account-chip--reserved {
  opacity: 0.72;
  cursor: default;
}

.account-chip--reserved:hover {
  background: rgba(255, 255, 255, 0.28);
}

.account-chip-value {
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff8dc;
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 168px;
  padding: 10px;
  border-radius: var(--ui-panel-radius);
  background: var(--ui-panel-bg);
  backdrop-filter: var(--ui-panel-blur);
  -webkit-backdrop-filter: var(--ui-panel-blur);
  border: var(--ui-panel-border);
  box-shadow: var(--ui-panel-shadow), var(--ui-panel-ring);
  color: var(--ui-text-primary);
  z-index: 30;
  overflow: visible;
}

#account-settings-menu {
  overflow: visible;
}

.account-dropdown--wide {
  min-width: 320px;
  max-width: min(92vw, 360px);
}

#account-settings-menu.account-dropdown--wide {
  min-width: 280px;
  max-width: min(92vw, 320px);
}

.account-dropdown--modern {
  padding: 0;
  overflow: hidden;
  border-radius: var(--ui-panel-radius);
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(248, 252, 249, 0.9) 52%,
    rgba(242, 250, 245, 0.88) 100%
  );
  backdrop-filter: var(--ui-panel-blur);
  -webkit-backdrop-filter: var(--ui-panel-blur);
  border: var(--ui-panel-border);
  box-shadow: var(--ui-panel-shadow), var(--ui-panel-ring);
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  pointer-events: none;
}

.account-dropdown--modern.account-dropdown--open {
  animation: ui-panel-in 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: auto;
}

.account-dropdown--modern.account-dropdown--closing {
  animation: ui-panel-out 0.22s ease forwards;
  pointer-events: none;
}

.account-dropdown--circle {
  /* legacy alias — styles live on --modern */
}

.account-dropdown--circle.account-dropdown--open {
  animation: ui-panel-in 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: auto;
}

.account-dropdown--circle.account-dropdown--closing {
  animation: ui-panel-out 0.22s ease forwards;
  pointer-events: none;
}

.account-menu--open .account-menu-caret {
  transform: rotate(180deg);
}

.account-menu--open .account-chip {
  opacity: 1;
  background: rgba(236, 252, 224, 0.94);
  border-color: #5a9430;
  color: #2a4020;
  text-shadow: none;
  box-shadow:
    0 0 0 3px rgba(107, 158, 74, 0.55),
    0 4px 14px rgba(70, 120, 50, 0.22);
}

.account-menu--open .account-chip-value {
  color: #3d7020;
}

.circle-dropdown-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 14px;
  background: var(--ui-panel-header);
  border-bottom: 1px solid rgba(120, 160, 130, 0.1);
}

.circle-dropdown-header-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(26, 122, 69, 0.14) 0%, rgba(26, 122, 69, 0.06) 100%);
  border: 1px solid rgba(26, 122, 69, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  flex-shrink: 0;
}

.circle-dropdown-header-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.circle-dropdown-header-text {
  flex: 1;
  min-width: 0;
}

.circle-dropdown-title {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--ui-text-primary);
  letter-spacing: 0.01em;
}

.circle-dropdown-subtitle {
  margin: 3px 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--ui-text-secondary);
}

.circle-add-friend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(120, 160, 130, 0.1);
  background: rgba(255, 255, 255, 0.35);
}

.circle-add-friend-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ui-text-secondary);
}

.circle-add-friend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.circle-add-friend-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(120, 160, 130, 0.22);
  background: var(--ui-surface);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--ui-text-primary);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.circle-add-friend-input::placeholder {
  color: var(--ui-text-tertiary);
}

.circle-add-friend-input:focus {
  outline: none;
  border-color: rgba(26, 122, 69, 0.35);
  box-shadow: 0 0 0 3px rgba(26, 122, 69, 0.08);
}

.circle-add-friend-btn {
  flex-shrink: 0;
  height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(180deg, #22a055 0%, #15803d 100%);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(21, 128, 61, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition:
    transform 0.12s ease,
    filter 0.12s ease,
    opacity 0.12s ease;
}

.circle-add-friend-btn:hover:not(:disabled) {
  filter: brightness(1.05);
}

.circle-add-friend-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.circle-add-friend-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.circle-add-friend-error {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #c2410c;
}

.circle-add-friend-error[hidden] {
  display: none;
}

.friend-request-inbox {
  padding: 0 12px 8px;
  border-bottom: 1px solid rgba(120, 160, 130, 0.1);
}

.friend-request-inbox[hidden] {
  display: none;
}

.friend-request-inbox-title {
  margin: 0 0 8px;
  padding: 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ui-text-secondary);
}

.friend-request-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.friend-request-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(120, 160, 130, 0.16);
}

.friend-request-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.friend-request-item-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(
    145deg,
    hsl(var(--friend-hue, 140) 55% 52%) 0%,
    hsl(calc(var(--friend-hue, 140) + 24) 48% 42%) 100%
  );
}

.friend-request-item-body {
  flex: 1;
  min-width: 0;
}

.friend-request-item-name {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ui-text-primary);
}

.friend-request-item-id {
  margin: 2px 0 0;
  font-size: 0.68rem;
  color: var(--ui-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.friend-request-item-message {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(26, 122, 69, 0.06);
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--ui-text-secondary);
  word-break: break-word;
}

.friend-request-item-actions {
  display: flex;
  gap: 8px;
}

.friend-request-item-btn {
  flex: 1 1 0;
  height: 32px;
  border-radius: 9px;
  border: none;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.friend-request-item-btn--accept {
  background: linear-gradient(180deg, #22a055 0%, #15803d 100%);
  color: #fff;
}

.friend-request-item-btn--reject {
  background: rgba(120, 160, 130, 0.12);
  color: var(--ui-text-secondary);
}

.friend-request-panel {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(18, 36, 24, 0.42);
  backdrop-filter: blur(4px);
}

.friend-request-panel[hidden] {
  display: none;
}

.friend-request-backdrop-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(74, 222, 128, 0.12), transparent 60%);
}

.friend-request-card {
  position: relative;
  width: min(100%, 420px);
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 252, 249, 0.98) 100%);
  border: 1px solid rgba(120, 160, 130, 0.18);
  box-shadow: 0 18px 48px rgba(16, 40, 24, 0.18);
}

.friend-request-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.friend-request-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ui-text-primary);
}

.friend-request-subtitle {
  margin: 4px 0 0;
  font-size: 0.76rem;
  color: var(--ui-text-secondary);
}

.friend-request-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 10px;
  background: rgba(120, 160, 130, 0.12);
  color: var(--ui-text-secondary);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.friend-request-target {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: rgba(26, 122, 69, 0.06);
  border: 1px solid rgba(26, 122, 69, 0.1);
}

.friend-request-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(
    145deg,
    hsl(var(--friend-hue, 140) 55% 52%) 0%,
    hsl(calc(var(--friend-hue, 140) + 24) 48% 42%) 100%
  );
}

.friend-request-name {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ui-text-primary);
}

.friend-request-id {
  margin: 4px 0 0;
  font-size: 0.74rem;
  color: var(--ui-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.friend-request-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.friend-request-field-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ui-text-primary);
}

.friend-request-field-hint {
  font-size: 0.72rem;
  color: var(--ui-text-tertiary);
}

.friend-request-message {
  width: 100%;
  min-height: 96px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(120, 160, 130, 0.22);
  background: var(--ui-surface);
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.45;
  resize: vertical;
  color: var(--ui-text-primary);
}

.friend-request-message:focus {
  outline: none;
  border-color: rgba(26, 122, 69, 0.35);
  box-shadow: 0 0 0 3px rgba(26, 122, 69, 0.08);
}

.friend-request-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.friend-request-cancel,
.friend-request-send {
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  border: none;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.friend-request-cancel {
  background: rgba(120, 160, 130, 0.12);
  color: var(--ui-text-secondary);
}

.friend-request-send {
  background: linear-gradient(180deg, #22a055 0%, #15803d 100%);
  color: #fff;
}

.friend-request-send:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.circle-dropdown-spark {
  display: none;
}

.circle-dropdown-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 30px;
  text-align: center;
}

.circle-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
  border-radius: 16px;
  font-size: 1.5rem;
  line-height: 1;
  background: rgba(26, 122, 69, 0.07);
  border: 1px solid rgba(26, 122, 69, 0.1);
}

.circle-empty-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ui-text-primary);
}

.circle-empty-hint {
  margin: 8px 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--ui-text-secondary);
  max-width: 20em;
}

.account-dropdown-title {
  margin: 0 0 6px;
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #4a6352;
}

.account-dropdown-note,
.account-dropdown-empty {
  margin: 0;
  padding: 10px 8px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #5a7260;
}

.account-dropdown-item {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 10px 10px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #1f3324;
  cursor: pointer;
}

.account-dropdown-item--hover-detail {
  position: relative;
}

.account-dropdown-item--readonly {
  cursor: default;
}

.account-dropdown-item-label {
  display: block;
}

.account-hover-detail {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%) translateX(6px);
  z-index: 40;
  min-width: 196px;
  max-width: min(72vw, 248px);
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(160, 200, 170, 0.55);
  box-shadow:
    0 12px 28px rgba(24, 64, 40, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    visibility 0.16s ease,
    transform 0.16s ease;
}

.account-hover-detail::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: rgba(255, 255, 255, 0.98);
  filter: drop-shadow(1px 0 0 rgba(160, 200, 170, 0.35));
}

.account-hover-detail-title {
  display: block;
  margin-bottom: 8px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #2f6b45;
}

.account-hover-detail-list {
  margin: 0;
  padding: 0;
}

.account-hover-detail-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(120, 150, 170, 0.22);
}

.account-hover-detail-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.account-hover-detail-row dt {
  margin: 0;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6b7f72;
}

.account-hover-detail-row dd {
  margin: 0;
  flex: 1 1 auto;
  font-size: 0.76rem;
  font-weight: 700;
  color: #1f3324;
  text-align: right;
  word-break: break-word;
}

.account-hover-detail-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 600;
}

.account-dropdown-item--hover-detail:hover .account-hover-detail,
.account-dropdown-item--hover-detail:focus-within .account-hover-detail {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

#account-settings-menu {
  overflow: hidden;
  padding: 0;
  background: var(--ui-surface-muted);
}

#account-settings-menu.account-dropdown--modern {
  background: var(--ui-surface-muted);
  border: var(--ui-panel-border);
  box-shadow: var(--ui-panel-shadow);
}

#account-settings-menu > .account-dropdown-item--logout {
  margin: 0;
  padding: 9px 14px 10px;
  border-radius: 0;
  border-top: 1px solid var(--ui-hairline);
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  color: #dc2626;
  background: var(--ui-surface);
  transition: background 0.18s ease, color 0.18s ease;
}

#account-settings-menu > .account-dropdown-item--logout:hover {
  background: #fef2f2;
  color: #b91c1c;
}

.account-dropdown-item--user-settings {
  cursor: default;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.account-dropdown-item--user-settings:hover,
.account-dropdown-item--user-settings:focus-within {
  background: transparent;
}

.user-settings-panel {
  display: block;
  width: 100%;
  overflow: visible;
}

.user-settings-panel-body {
  width: 100%;
}

.user-settings-panel-fields {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px 8px;
}

.user-settings-card {
  overflow: hidden;
  border-radius: 14px;
  background: var(--ui-surface);
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.user-settings-head {
  position: relative;
  padding: 10px 12px;
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-hairline);
  overflow: hidden;
}

.user-settings-head-inner {
  position: relative;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    rgba(236, 253, 245, 0.98) 0%,
    rgba(220, 252, 231, 0.92) 52%,
    rgba(240, 253, 244, 0.96) 100%
  );
  border: 1px solid rgba(21, 128, 61, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 1px 3px rgba(21, 128, 61, 0.06);
  overflow: hidden;
}

.user-settings-head::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 18px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.18) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.user-settings-head::after {
  content: "🌿";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  opacity: 0.34;
  animation: circle-icon-sway 3.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

.user-settings-head-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    transparent 42%
  );
  pointer-events: none;
}

.user-settings-head-title {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
}

.user-settings-head-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  background: linear-gradient(
    105deg,
    #14532d 0%,
    #16a34a 38%,
    #15803d 72%,
    #365314 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.75));
  animation: user-settings-title-glow 3.6s ease-in-out infinite;
}

.user-settings-head-main::before,
.user-settings-head-main::after {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  opacity: 0.85;
}

.user-settings-head-main::before {
  background: linear-gradient(90deg, transparent 0%, rgba(21, 128, 61, 0.65) 100%);
}

.user-settings-head-main::after {
  background: linear-gradient(270deg, transparent 0%, rgba(21, 128, 61, 0.65) 100%);
}

@keyframes user-settings-title-glow {
  0%, 100% {
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.75));
  }
  50% {
    filter: drop-shadow(0 0 5px rgba(74, 222, 128, 0.42));
  }
}

.user-settings-head-id {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ui-text-secondary);
  letter-spacing: normal;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.user-settings-head-id .manage-user-id {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: inherit;
  font-weight: 600;
  color: #3f6212;
  white-space: nowrap;
}

.user-settings-section {
  padding: 10px 14px;
}

.user-settings-section + .user-settings-section {
  border-top: 1px solid var(--ui-hairline);
}

.user-settings-section--character {
  padding-top: 9px;
  padding-bottom: 9px;
}

.user-settings-segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 4px;
  border-radius: 11px;
  background: var(--ui-surface-muted);
}

.user-settings-panel-body .setup-character {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 6px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

.user-settings-panel-body .setup-character:hover {
  background: rgba(255, 255, 255, 0.72);
}

.user-settings-panel-body .setup-character--active {
  background: var(--ui-surface);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.07),
    0 0 0 1px rgba(21, 128, 61, 0.12);
}

.user-settings-panel-body .setup-character--active .setup-character-name {
  color: var(--ui-accent);
}

.user-settings-panel-body .setup-character-preview {
  width: 22px;
  height: 22px;
}

.user-settings-panel-body .setup-character-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ui-text-primary);
}

.user-settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.user-settings-field--row {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.user-settings-field-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  background: linear-gradient(135deg, #14532d 0%, #15803d 52%, #3f6212 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
}

.user-settings-field-label::before {
  content: "";
  flex-shrink: 0;
  width: 3px;
  height: 0.82em;
  border-radius: 999px;
  background: linear-gradient(180deg, #4ade80 0%, #15803d 55%, #3f6212 100%);
  box-shadow: 0 0 5px rgba(21, 128, 61, 0.32);
}

.user-settings-field-hint {
  margin-left: 4px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: normal;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: currentColor;
  color: var(--ui-text-tertiary);
  filter: none;
}

.user-settings-field--garden {
  gap: 6px;
}

.user-settings-field--garden .user-settings-garden-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 8px;
}

.user-settings-garden-wrap {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  gap: 6px;
}

.user-settings-field--garden .user-settings-garden-input {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
}

.user-settings-garden-input {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: 4.5em;
  max-width: 4.5em;
  min-width: 0;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--ui-hairline);
  background: var(--ui-surface-muted);
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.user-settings-garden-input:focus-within {
  border-color: rgba(21, 128, 61, 0.35);
  background: var(--ui-surface);
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.08);
}

.user-settings-panel-body .user-settings-garden-input .garden-name-input.auth-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 7px 0;
  border: none !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.user-settings-panel-body .user-settings-garden-input .garden-name-input.auth-input:focus {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.user-settings-field--garden .user-settings-garden-suffix {
  justify-self: end;
  text-align: right;
}

.user-settings-garden-suffix {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ui-text-secondary);
  white-space: nowrap;
  user-select: none;
}

.user-settings-section--split {
  padding-top: 8px;
  padding-bottom: 8px;
}

.user-settings-panel-body .manage-profile-row {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: none;
}

.user-settings-panel-body .manage-profile-row .auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.user-settings-panel-body .auth-field-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, #14532d 0%, #15803d 52%, #3f6212 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
}

.user-settings-panel-body .auth-field-label::before {
  content: "";
  flex-shrink: 0;
  width: 3px;
  height: 0.82em;
  border-radius: 999px;
  background: linear-gradient(180deg, #4ade80 0%, #15803d 55%, #3f6212 100%);
  box-shadow: 0 0 5px rgba(21, 128, 61, 0.32);
}

.user-settings-panel-body .auth-field-optional {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: normal;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: currentColor;
  color: var(--ui-text-tertiary);
  filter: none;
}

.user-settings-panel-body .auth-input {
  width: 100%;
  padding: 7px 10px;
  font-size: 0.8125rem;
  border-radius: 10px;
  border: 1px solid var(--ui-hairline);
  background: var(--ui-surface-muted);
  color: var(--ui-text-primary);
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.user-settings-panel-body .auth-input::placeholder {
  color: var(--ui-text-tertiary);
}

.user-settings-panel-body .auth-input:focus {
  border-color: rgba(21, 128, 61, 0.35);
  background: var(--ui-surface);
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.08);
  outline: none;
}

.user-settings-panel-body .auth-textarea {
  min-height: 2.85em;
  resize: none;
  line-height: 1.45;
}

.user-settings-section--toggle {
  padding: 0;
  background: var(--ui-surface-muted);
}

.user-settings-toggle {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 7px;
  margin: 0;
  padding: 6px 12px;
  cursor: pointer;
}

.user-settings-toggle input {
  order: -1;
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: var(--ui-accent);
  flex-shrink: 0;
}

.user-settings-panel-body .manage-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-settings-panel-body .manage-toggle-label-main {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #14532d 0%, #15803d 52%, #3f6212 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
}

.user-settings-panel-body .manage-toggle-label-hint {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: normal;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: currentColor;
  color: var(--ui-text-tertiary);
  filter: none;
}

.user-settings-meta {
  margin: 0;
}

.user-settings-meta .user-settings-version {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--ui-hairline);
}

.user-settings-version-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #14532d 0%, #15803d 52%, #3f6212 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55));
}

.user-settings-version-value {
  font-size: 0.75rem;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--ui-text-secondary);
  text-align: left;
}

.user-settings-actions {
  margin: 0;
  padding-top: 0;
}

.user-settings-actions .manage-actions-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.user-settings-panel-body .manage-cancel,
.user-settings-panel-body .manage-save {
  padding: 6px 10px;
  min-height: 30px;
  font-size: 0.8125rem;
  border-radius: 9px;
  font-weight: 600;
}

.user-settings-panel-body .manage-cancel {
  border: 1px solid var(--ui-hairline);
  background: var(--ui-surface);
  color: var(--ui-text-primary);
  box-shadow: none;
}

.user-settings-panel-body .manage-cancel:hover {
  background: var(--ui-surface-elevated);
  border-color: rgba(0, 0, 0, 0.1);
}

.user-settings-panel-body .manage-save {
  width: auto;
  border: none;
  color: #fff;
  background: linear-gradient(180deg, #16a34a 0%, var(--ui-accent) 100%);
  box-shadow: 0 1px 2px rgba(21, 128, 61, 0.28);
}

.user-settings-panel-body .manage-save:hover:not(:disabled) {
  filter: brightness(1.04);
}

.user-settings-panel-body .manage-save:disabled {
  opacity: 0.45;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .user-settings-head::after,
  .user-settings-head-main {
    animation: none;
  }
}

#version-info-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 600;
  color: var(--ui-text-secondary);
}

.account-dropdown-item:hover {
  background: #eef8f0;
}

.friend-list {
  list-style: none;
  margin: 0;
  padding: 10px 12px 12px;
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 140, 115, 0.28) transparent;
}

.friend-list-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  border-radius: var(--ui-panel-inner-radius);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(120, 150, 130, 0.12);
  box-shadow:
    0 1px 2px rgba(12, 36, 22, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

.friend-list-row:last-child {
  margin-bottom: 0;
}

.friend-list-row--enter {
  animation: friend-row-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.friend-list-row:hover {
  transform: translateY(-1px);
  border-color: rgba(26, 122, 69, 0.18);
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 8px 20px rgba(12, 36, 22, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.friend-list-row:hover .friend-list-remove,
.friend-list-row:hover .friend-list-visit {
  opacity: 1;
  transform: scale(1);
}

.friend-list-visit {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-right: 4px;
  border: none;
  border-radius: 50%;
  background: rgba(232, 220, 255, 0.95);
  color: #5b3fd0;
  font-size: 0.82rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    background 0.15s ease;
}

.friend-list-visit:hover:not(:disabled) {
  background: rgba(210, 190, 255, 1);
}

.friend-list-visit:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.friend-list-remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-right: 6px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 240, 240, 0.95);
  color: #b05050;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    background 0.15s ease;
}

.friend-list-remove:hover {
  background: #ffe0e0;
  transform: scale(1.08);
}

.friend-list-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  text-align: left;
  padding: 10px 8px 10px 10px;
  border-radius: 14px;
  cursor: pointer;
}

.friend-list-item:hover {
  background: transparent;
}

.friend-list-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  background: linear-gradient(
    145deg,
    hsl(var(--friend-hue, 140) 55% 52%) 0%,
    hsl(calc(var(--friend-hue, 140) + 24) 48% 42%) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 8px hsla(var(--friend-hue, 140), 50%, 40%, 0.18);
}

.friend-list-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.friend-list-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: #1f3324;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-list-preview {
  font-size: 0.7rem;
  color: #5a7260;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.friend-list-preview--unread {
  color: #1f6b3a;
  font-weight: 700;
}

.friend-list-row--has-unread {
  border-color: rgba(100, 190, 130, 0.55);
  background: rgba(232, 248, 238, 0.92);
  box-shadow: 0 4px 14px rgba(40, 120, 70, 0.1);
}

.friend-list-row--has-unread .friend-list-name {
  color: #174a28;
}

.friend-list-unread {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f07070 0%, #e04848 100%);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(220, 60, 60, 0.35);
  animation: friend-unread-pulse 2s ease-in-out infinite;
}

.friend-list-row:hover .friend-list-unread {
  right: 42px;
  transition: right 0.18s ease;
}

@keyframes ui-panel-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ui-panel-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
}

@keyframes circle-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes circle-dropdown-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
}

@keyframes circle-icon-sway {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.06); }
}

@keyframes circle-spark-float {
  0%, 100% {
    opacity: 0.2;
    transform: translateY(0) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translateY(-6px) scale(1.1);
  }
}

@keyframes circle-empty-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes friend-row-in {
  from {
    opacity: 0;
    transform: translateX(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes friend-unread-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(220, 60, 60, 0.35); }
  50% { box-shadow: 0 2px 14px rgba(220, 60, 60, 0.55); }
}

@media (hover: none) {
  .friend-list-remove {
    opacity: 1;
    transform: scale(1);
  }

  .friend-list-unread {
    right: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-dropdown--modern.account-dropdown--open,
  .account-dropdown--modern.account-dropdown--closing,
  .account-dropdown--circle.account-dropdown--open,
  .account-dropdown--circle.account-dropdown--closing,
  .friend-list-row--enter,
  .friend-chat-card--open,
  .friend-chat-card--closing,
  .friend-chat-panel--closing,
  .friend-chat-msg-row--enter,
  .friend-chat-msg-row--send,
  .friend-chat-avatar,
  .friend-chat-backdrop-glow,
  .friend-chat-empty-icon,
  .friend-chat-gift-icon,
  .friend-chat-seeds-label-icon,
  .friend-chat-status::before,
  .circle-dropdown-header-icon,
  .circle-empty-icon,
  .circle-dropdown-spark,
  .friend-list-unread {
    animation: none !important;
  }

  .account-dropdown--circle {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .friend-chat-card {
    opacity: 1;
    transform: none;
  }
}

.friend-chat-panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(8, 22, 14, 0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: friend-chat-backdrop-in 0.32s ease;
}

.friend-chat-panel[hidden] {
  display: none;
}

.friend-chat-panel--closing {
  animation: friend-chat-backdrop-out 0.24s ease forwards;
}

.friend-chat-backdrop-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 40%, rgba(120, 210, 150, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(180, 230, 195, 0.12) 0%, transparent 42%);
  animation: friend-chat-glow-pulse 4s ease-in-out infinite;
}


.friend-chat-card {
  position: relative;
  width: min(440px, 100%);
  max-height: min(88vh, 660px);
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: 1px solid rgba(130, 200, 150, 0.45);
  background: linear-gradient(168deg, #fcfffd 0%, #f2faf5 52%, #eaf6ef 100%);
  box-shadow:
    0 22px 56px rgba(16, 48, 32, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.75) inset;
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px) scale(0.94);
}

.friend-chat-card--open {
  animation: friend-chat-card-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.friend-chat-card--closing {
  animation: friend-chat-card-out 0.26s ease forwards;
}

@keyframes friend-chat-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes friend-chat-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes friend-chat-glow-pulse {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

@keyframes friend-chat-card-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes friend-chat-card-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
}

.friend-chat-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px;
  background: linear-gradient(135deg, rgba(170, 225, 185, 0.55) 0%, rgba(205, 245, 215, 0.25) 100%);
  border-bottom: 1px solid rgba(110, 170, 130, 0.22);
  overflow: hidden;
}

.friend-chat-header-spark {
  position: absolute;
  border-radius: 50%;
  background: rgba(90, 190, 120, 0.65);
  pointer-events: none;
}

.friend-chat-header-spark--1 {
  top: 10px;
  right: 88px;
  width: 5px;
  height: 5px;
  animation: circle-spark-float 2.5s ease-in-out infinite;
}

.friend-chat-header-spark--2 {
  top: 24px;
  right: 108px;
  width: 3px;
  height: 3px;
  animation: circle-spark-float 3s ease-in-out 0.5s infinite;
}

.friend-chat-header-leaf {
  position: absolute;
  top: 8px;
  right: 14px;
  font-size: 1.1rem;
  opacity: 0.55;
  animation: circle-icon-sway 3.2s ease-in-out infinite;
  pointer-events: none;
}

.friend-chat-header-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.friend-chat-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  background: linear-gradient(
    145deg,
    hsl(var(--friend-hue, 140) 55% 52%) 0%,
    hsl(calc(var(--friend-hue, 140) + 24) 48% 42%) 100%
  );
  box-shadow:
    0 3px 10px hsla(var(--friend-hue, 140), 50%, 40%, 0.3),
    0 0 0 2px rgba(255, 255, 255, 0.88) inset;
  animation: friend-chat-avatar-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes friend-chat-avatar-pop {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

.friend-chat-header-text {
  flex: 1;
  min-width: 0;
}

.friend-chat-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  color: #1a3d28;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-chat-user-id {
  margin: 2px 0 0;
  font-size: 0.62rem;
  font-weight: 600;
  color: #94a3b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  word-break: break-all;
}

.friend-chat-user-id[hidden] {
  display: none !important;
}

.friend-chat-status {
  margin: 2px 0 0;
  font-size: 0.68rem;
  color: #4a7260;
  display: flex;
  align-items: center;
  gap: 5px;
}

.friend-chat-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4cd964;
  box-shadow: 0 0 0 2px rgba(76, 217, 100, 0.25);
  animation: friend-chat-status-pulse 2s ease-in-out infinite;
}

@keyframes friend-chat-status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(0.88); }
}

.friend-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.friend-chat-action {
  border: 1px solid rgba(160, 200, 170, 0.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #4a6352;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.friend-chat-action--danger {
  border-color: rgba(230, 170, 170, 0.65);
  color: #a04040;
  background: rgba(255, 248, 248, 0.9);
}

.friend-chat-action:hover {
  background: #eef8f0;
  transform: translateY(-1px);
}

.friend-chat-action--danger:hover {
  background: #fff0f0;
}

.friend-chat-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: #5a7260;
  display: grid;
  place-items: center;
  transition:
    background 0.15s ease,
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.friend-chat-close:hover {
  background: #fff;
  transform: rotate(90deg) scale(1.05);
}

.friend-chat-body {
  position: relative;
  flex: 1;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}

.friend-chat-messages {
  flex: 1;
  min-height: 200px;
  max-height: min(42vh, 320px);
  overflow-y: auto;
  padding: 14px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(245, 252, 247, 0.95) 0%, rgba(238, 248, 241, 0.85) 100%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 8px,
      rgba(120, 180, 140, 0.03) 8px,
      rgba(120, 180, 140, 0.03) 9px
    );
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 160, 120, 0.35) transparent;
}

.friend-chat-msg-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  max-width: 88%;
}

.friend-chat-msg-row--mine {
  align-self: flex-end;
  align-items: flex-end;
}

.friend-chat-msg-row--enter {
  animation: friend-chat-msg-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.friend-chat-msg-row--send {
  animation: friend-chat-msg-send 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes friend-chat-msg-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes friend-chat-msg-send {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
  }
  60% {
    transform: translateY(-2px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.friend-chat-msg {
  position: relative;
  padding: 9px 13px;
  border-radius: 16px 16px 16px 5px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(180, 210, 190, 0.55);
  box-shadow: 0 2px 8px rgba(40, 90, 60, 0.07);
  font-size: 0.84rem;
  line-height: 1.5;
  color: #1f3324;
  word-break: break-word;
}

.friend-chat-msg--mine {
  border-radius: 16px 16px 5px 16px;
  background: linear-gradient(145deg, #e4f8ea 0%, #d4f0dc 100%);
  border-color: rgba(130, 200, 150, 0.55);
  box-shadow: 0 3px 10px rgba(60, 140, 90, 0.12);
}

.friend-chat-msg--gift {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(145deg, #fff9e8 0%, #fff3d4 100%);
  border-color: rgba(220, 190, 120, 0.45);
}

.friend-chat-msg--gift.friend-chat-msg--mine {
  background: linear-gradient(145deg, #fff6dc 0%, #ffecb8 100%);
}

.friend-chat-gift-icon {
  font-size: 1.25rem;
  line-height: 1;
  animation: friend-chat-gift-bounce 1.8s ease-in-out infinite;
}

@keyframes friend-chat-gift-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(-6deg); }
}

.friend-chat-msg-text {
  display: block;
}

.friend-chat-msg-time {
  font-size: 0.62rem;
  color: #7a9484;
  padding: 0 4px;
}

.friend-chat-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  pointer-events: none;
}

.friend-chat-empty-icon {
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 10px;
  animation: circle-empty-bob 2.8s ease-in-out infinite;
}

.friend-chat-empty-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #2d5040;
}

.friend-chat-empty-hint {
  margin: 6px 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #5a7260;
  max-width: 16em;
}

.friend-chat-compose {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(160, 200, 170, 0.28);
  background: rgba(255, 255, 255, 0.55);
}

.friend-chat-input-wrap {
  position: relative;
}

.friend-chat-input {
  width: 100%;
  border: 1px solid rgba(160, 200, 170, 0.55);
  border-radius: 999px;
  padding: 11px 16px;
  font: inherit;
  font-size: 0.86rem;
  background: rgba(255, 255, 255, 0.92);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.friend-chat-input:focus {
  outline: none;
  border-color: rgba(80, 170, 110, 0.65);
  box-shadow: 0 0 0 3px rgba(100, 190, 130, 0.18);
}

.friend-chat-send {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(145deg, #2a8a4a 0%, #1f6b3a 100%);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(31, 107, 58, 0.35);
  transition:
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.2s ease;
}

.friend-chat-send:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(31, 107, 58, 0.42);
}

.friend-chat-send:active {
  transform: scale(0.94);
}

.friend-chat-send-icon {
  font-size: 1rem;
  transform: translateX(1px);
  transition: transform 0.2s ease;
}

.friend-chat-send:hover .friend-chat-send-icon {
  transform: translateX(3px);
}

.friend-chat-seeds {
  padding: 10px 12px 14px;
  border-top: 1px solid rgba(160, 200, 170, 0.22);
  background: rgba(240, 250, 244, 0.65);
}

.friend-chat-seeds-label {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #4a6352;
  display: flex;
  align-items: center;
  gap: 5px;
}

.friend-chat-seeds-label-icon {
  font-size: 0.85rem;
  animation: friend-chat-gift-bounce 2.2s ease-in-out infinite;
}

.friend-chat-seed-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.friend-chat-seed-btn {
  border: 1px solid rgba(160, 200, 170, 0.5);
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(40, 90, 60, 0.06);
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.friend-chat-seed-btn:hover {
  background: #eef8f0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(40, 90, 60, 0.12);
}

.friend-chat-seed-btn:active {
  transform: translateY(0) scale(0.97);
}

.friend-chat-seeds-empty {
  margin: 0;
  font-size: 0.74rem;
  color: #5a7260;
  font-style: italic;
}

.garden-coin-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 248, 220, 0.28);
  border: 1px solid rgba(255, 220, 120, 0.45);
  backdrop-filter: blur(6px);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 12px rgba(255, 200, 60, 0.15);
  transform-origin: center center;
  flex-shrink: 0;
}

.garden-coin-chip--shake {
  animation: garden-coin-shake 0.58s ease;
}

.garden-coin-icon--pop {
  animation: garden-coin-icon-pop 0.55s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.garden-coin-balance--gain {
  animation: garden-coin-balance-gain 0.55s ease;
}

.garden-coin-gain-pop {
  position: absolute;
  top: -6px;
  right: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffe566;
  text-shadow: 0 0 8px rgba(255, 220, 60, 0.85);
  pointer-events: none;
  animation: garden-coin-gain-float 0.85s ease forwards;
}

@keyframes garden-coin-shake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  12% { transform: translateX(-5px) rotate(-5deg); }
  24% { transform: translateX(5px) rotate(5deg); }
  36% { transform: translateX(-4px) rotate(-4deg); }
  48% { transform: translateX(4px) rotate(4deg); }
  60% { transform: translateX(-2px) rotate(-2deg); }
  72% { transform: translateX(2px) rotate(2deg); }
}

@keyframes garden-coin-icon-pop {
  0%, 100% { transform: scale(1) rotate(0deg); }
  35% { transform: scale(1.35) rotate(-12deg); }
  65% { transform: scale(1.15) rotate(8deg); }
}

@keyframes garden-coin-balance-gain {
  0%, 100% { transform: scale(1); color: inherit; }
  35% { transform: scale(1.28); color: #ffe566; }
  65% { transform: scale(1.1); color: #fff3a8; }
}

@keyframes garden-coin-gain-float {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.85);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translateY(-18px) scale(1);
  }
}

.garden-coin-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.garden-coin-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.garden-coin-label {
  font-size: 0.62rem;
  font-weight: 600;
  opacity: 0.9;
  line-height: 1;
}

.garden-coin-balance {
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.1;
  color: #fff8dc;
}

.garden-coin-chip--pulse {
  animation: garden-coin-pulse 0.45s ease;
}

@keyframes garden-coin-pulse {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.08); }
}

.user-chip-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.user-chip-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.user-chip-label {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.user-chip-provider {
  font-size: 0.68rem;
  opacity: 0.85;
  line-height: 1.1;
}

.user-manage-open {
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.user-manage-open:hover {
  background: rgba(255, 255, 255, 0.22);
}

.user-logout {
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.user-logout:hover {
  background: rgba(255, 255, 255, 0.22);
}

body.auth-locked {
  background: #eef3ea;
}

/* 登录页：完全隐藏草地/农场等玩法界面，只保留登录卡片 */
body.auth-locked > .sky,
body.auth-locked > .grass-field,
body.auth-locked > .account-bar,
body.auth-locked > .side-zone,
body.auth-locked > .sky-stage,
body.auth-locked > .farm-stage,
body.auth-locked > .visit-layer,
body.auth-locked > .visit-remote-chrome,
body.auth-locked > .host-defense-chrome,
body.auth-locked > .visit-status-banner,
body.auth-locked > .game-popup-toast,
body.auth-locked > .harvest-fx-layer,
body.auth-locked > .friend-chat-panel,
body.auth-locked > .friend-request-panel,
body.auth-locked > .setup-modal {
  display: none !important;
}

body.auth-locked .auth-modal {
  background: #eef3ea;
  backdrop-filter: none;
}

body.setup-locked .sky-stage,
body.manage-locked .sky-stage {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}

body.friend-chat-open .sky-stage {
  filter: blur(3px) saturate(0.92);
  transition: filter 0.28s ease;
}

.setup-validation-hint {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff0f0;
  border: 1px solid #f0b4b4;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #a03030;
}

.setup-modal.auth-modal:not([hidden]) {
  z-index: 25;
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 24, 12, 0.55);
  backdrop-filter: blur(4px);
  cursor: default;
}

.auth-modal,
.auth-modal * {
  cursor: auto;
}

.auth-modal button,
.auth-modal [role="button"],
.auth-modal .auth-tab,
.auth-modal .auth-send-code:not(:disabled),
.auth-modal .auth-submit,
.auth-modal .auth-wechat-login,
.auth-modal .auth-wechat-demo {
  cursor: pointer;
}

.auth-modal .auth-send-code:disabled {
  cursor: not-allowed;
}

.auth-modal input {
  cursor: text;
}

.setup-modal,
.setup-modal * {
  cursor: auto;
}

.setup-modal button,
.setup-modal [role="button"],
.setup-modal .setup-character,
.setup-modal .setup-seed-btn,
.setup-modal .auth-submit {
  cursor: pointer;
}

.setup-modal input {
  cursor: text;
}

.setup-card {
  width: min(460px, 100%);
}

.setup-section {
  margin-bottom: 14px;
}

.setup-section-label {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #4a6352;
}

.setup-section-hint {
  font-weight: 500;
  color: #6b8574;
}

.setup-section-note {
  margin: -4px 0 10px;
  font-size: 0.74rem;
  line-height: 1.4;
  color: #6b8574;
}

.setup-character-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.setup-character {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 6px 8px 8px;
  border: 2px solid #c8d8cc;
  border-radius: 14px;
  background: #fff;
  color: #1f3324;
}

.setup-character--active {
  border-color: #6aab42;
  background: #c8e6a0;
  box-shadow: inset 0 0 0 2px #6aab42;
}

.setup-character-avatar {
  width: 32px;
  height: 28px;
  overflow: hidden;
  flex-shrink: 0;
}

.setup-character-preview {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.setup-character--active .setup-character-preview {
  mix-blend-mode: multiply;
}

.setup-character-name {
  margin-top: 4px;
  font-size: 0.84rem;
  font-weight: 700;
}

.setup-seed-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.setup-seed-list--catalog {
  grid-template-columns: repeat(3, 1fr);
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.setup-seed-catalog {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 2px;
}

.setup-seed-group-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #3d5c42;
  margin: 0 0 8px;
}

.setup-seed-group--flower .setup-seed-group-label {
  color: #8a2d55;
}

.setup-seed-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  border: 2px solid #c8d8cc;
  border-radius: 14px;
  background: #fff;
  color: #1f3324;
  font-size: 0.9rem;
  font-weight: 600;
}

.setup-seed-btn--active {
  border-color: #1f6b3a;
  background: #eef8f0;
}

.setup-seed-btn--disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.setup-seed-emoji {
  font-size: 1.35rem;
  line-height: 1;
}

.manage-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.manage-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 0;
  cursor: pointer;
}

.manage-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #6b46c1;
}

.manage-toggle-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #4a5568;
}

.manage-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}

.manage-profile-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.manage-profile-row__cell {
  min-width: 0;
}

.manage-user-id-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.manage-user-id {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #2d3748;
  word-break: break-all;
}

.version-info-list {
  margin: 0 0 18px;
  padding: 0;
}

.version-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(120, 150, 170, 0.28);
}

.version-info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.version-info-label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #4a6352;
}

.version-info-value {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1f3324;
  text-align: right;
}

.version-card .auth-submit {
  width: 100%;
}

.auth-field-optional {
  font-size: 0.72rem;
  font-weight: 600;
  color: #a0aec0;
}

.friend-list-user-id {
  display: block;
  margin-top: 1px;
  font-size: 0.62rem;
  font-weight: 600;
  color: #94a3b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  word-break: break-all;
}

.manage-actions-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.manage-logout {
  width: 100%;
  border: 1px solid #e0c8c8;
  background: #fff8f8;
  color: #9a4040;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.manage-logout:hover {
  background: #fff0f0;
}

.manage-cancel {
  border: 1px solid #c8d8cc;
  background: #fff;
  color: #4a6352;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.95rem;
  font-weight: 700;
}

.manage-save {
  width: 100%;
}

.auth-modal[hidden] {
  display: none;
}

.auth-card {
  width: min(420px, 100%);
  padding: 28px 24px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  color: #1f3324;
}

.auth-card--notice {
  text-align: center;
  padding: 36px 28px 32px;
}

.auth-notice-mascot {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 auto 18px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.auth-card--notice .auth-title {
  margin-top: 0;
}

.auth-card--notice .auth-subtitle {
  margin: 10px 0 0;
  font-size: 0.95rem;
  color: #5a7362;
}

.auth-notice-desc {
  margin: 16px 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #5a7362;
}

.auth-title {
  margin: 0;
  font-size: 1.35rem;
  text-align: center;
}

.auth-subtitle {
  margin: 8px 0 18px;
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
  color: #4a6352;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
  padding: 4px;
  border-radius: 999px;
  background: #e8f0ea;
}

.auth-tab {
  border: none;
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #4a6352;
  background: transparent;
  cursor: pointer;
}

.auth-tab--active {
  background: #fff;
  color: #1f6b3a;
  box-shadow: 0 2px 8px rgba(31, 107, 58, 0.12);
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.auth-field--row {
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
}

.auth-field--grow {
  flex: 1;
  min-width: 0;
}

.auth-field-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #4a6352;
}

.auth-input {
  width: 100%;
  border: 1px solid #c8d8cc;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.95rem;
  background: #fff;
  color: #1f3324;
}

.auth-input:focus {
  outline: 2px solid rgba(31, 107, 58, 0.35);
  border-color: #1f6b3a;
}

.garden-name-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.garden-name-input {
  flex: 1;
  min-width: 0;
}

.garden-name-suffix {
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #5a3a20;
  user-select: none;
}

.garden-name-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #6b8574;
}

.auth-send-code {
  flex-shrink: 0;
  border: 1px solid #1f6b3a;
  background: #fff;
  color: #1f6b3a;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.auth-send-code:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.auth-dev-hint {
  margin: -4px 0 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff8e6;
  border: 1px solid #f0dfa8;
  font-size: 0.78rem;
  color: #7a5b00;
}

.auth-submit,
.auth-wechat-login,
.auth-wechat-demo {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.auth-submit,
.auth-wechat-login {
  background: linear-gradient(135deg, #2d8f4e, #1f6b3a);
  color: #fff;
}

.auth-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.auth-wechat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.auth-wechat-qr {
  width: 132px;
  height: 132px;
  border-radius: 16px;
  border: 1px solid #d8e6dc;
  background:
    linear-gradient(45deg, #f4faf5 25%, transparent 25%, transparent 75%, #f4faf5 75%),
    linear-gradient(45deg, #f4faf5 25%, transparent 25%, transparent 75%, #f4faf5 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  display: grid;
  place-items: center;
}

.auth-wechat-logo {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #07c160;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  font-weight: 800;
}

.auth-wechat-desc {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  text-align: center;
  color: #4a6352;
}

.auth-wechat-demo {
  background: #fff;
  border: 1px solid #07c160;
  color: #07c160;
}

.auth-wechat-note {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  text-align: center;
  color: #6b8574;
}

.header-brand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 100%;
}

.header-title-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  margin-top: 0;
  min-width: 0;
  flex: 0 1 auto;
  text-align: left;
}

.header-title-frame {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: auto;
  min-width: 0;
}

.header-title-rule {
  flex: 0 0 32px;
  width: 32px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.88) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
  opacity: 0.92;
}

.header-title-rule--right {
  background: linear-gradient(270deg, transparent 0%, rgba(255, 255, 255, 0.88) 100%);
}

.title {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  white-space: nowrap;
  min-width: 0;
  text-shadow:
    0 2px 10px rgba(12, 44, 74, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.2);
}

.title #garden-title-name {
  display: block;
  min-width: 0;
  font-size: var(--header-title-size);
  overflow: hidden;
  text-overflow: ellipsis;
}

.title #garden-title-name[data-truncated="true"] {
  cursor: help;
}

.subtitle {
  margin: 0;
  padding: 0;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.25;
  white-space: pre-line;
  opacity: 0.82;
  text-align: left;
  text-shadow: 0 1px 6px rgba(12, 44, 74, 0.28);
}

.title-logo-wrap {
  position: relative;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: calc(var(--header-logo-h) + 0.25rem);
  height: calc(var(--header-logo-h) + 0.5rem);
  margin-top: 8px;
  overflow: visible;
}

.title-logo-inner {
  position: relative;
  flex-shrink: 0;
  overflow: visible;
}

.title-logo-lamp {
  position: absolute;
  left: 62.5%;
  top: 25%;
  z-index: 3;
  width: 1rem;
  height: 1.05rem;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
}

.title-logo-lamp__beam {
  position: absolute;
  left: -1.15rem;
  top: 0.18rem;
  width: 3.6rem;
  height: 4.8rem;
  clip-path: polygon(48% 0%, 4% 100%, 96% 100%);
  background: linear-gradient(
    180deg,
    rgba(255, 236, 160, 0.46) 0%,
    rgba(255, 214, 110, 0.22) 42%,
    rgba(255, 190, 80, 0) 100%
  );
  opacity: 0;
  filter: blur(1.5px);
  mix-blend-mode: screen;
  pointer-events: none;
}

.title-logo-lamp__spot {
  position: absolute;
  left: -0.35rem;
  top: 2.55rem;
  width: 2.8rem;
  height: 1.35rem;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(255, 228, 140, 0.38) 0%,
    rgba(255, 205, 95, 0.16) 52%,
    rgba(255, 190, 80, 0) 78%
  );
  opacity: 0;
  filter: blur(1px);
  mix-blend-mode: screen;
  pointer-events: none;
}

.title-logo-lamp__post {
  position: absolute;
  left: 0.08rem;
  top: 0;
  width: 0.55rem;
  height: 0.14rem;
  background: #5a4030;
  border-radius: 1px;
}

.title-logo-lamp__post::before {
  content: "";
  position: absolute;
  left: -0.08rem;
  top: 0.02rem;
  width: 0.12rem;
  height: 0.1rem;
  background: #5a4030;
  border-radius: 1px;
}

.title-logo-lamp__lantern {
  position: absolute;
  left: 0.04rem;
  top: 0.14rem;
  width: 0.72rem;
  height: 0.58rem;
  background: #705030;
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.title-logo-lamp__lantern::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  right: 0.1rem;
  top: 0.1rem;
  bottom: 0.1rem;
  background: rgba(36, 28, 22, 0.82);
}

.title-logo-lamp__lantern::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.08rem;
  width: 0.8rem;
  height: 0.08rem;
  margin-left: -0.4rem;
  background: #806040;
  border-radius: 1px;
}

.title-logo-lamp__glow {
  position: absolute;
  left: 0.4rem;
  top: 0.34rem;
  width: 1.8rem;
  height: 1.8rem;
  margin-left: -0.9rem;
  margin-top: -0.9rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 160, 0) 0%, rgba(255, 236, 160, 0) 100%);
  opacity: 0;
  pointer-events: none;
}

body[class*="weather-night"] .title-logo-lamp__beam {
  opacity: 1;
  animation: title-logo-lamp-beam 3.2s ease-in-out infinite;
}

body[class*="weather-night"] .title-logo-lamp__spot {
  opacity: 1;
  animation: title-logo-lamp-spot 3.2s ease-in-out infinite;
}

body[class*="weather-night"] .title-logo-lamp__post {
  background: #6b4a2a;
}

body[class*="weather-night"] .title-logo-lamp__lantern {
  background: #a07040;
}

body[class*="weather-night"] .title-logo-lamp__lantern::before {
  background: rgba(255, 228, 120, 0.92);
  box-shadow: inset 0 0 6px rgba(255, 248, 210, 0.85);
}

body[class*="weather-night"] .title-logo-lamp__lantern::after {
  background: #c89452;
}

body[class*="weather-night"] .title-logo-lamp__glow {
  opacity: 1;
  background: radial-gradient(
    circle,
    rgba(255, 236, 160, 0.62) 0%,
    rgba(255, 210, 90, 0.28) 42%,
    rgba(255, 190, 60, 0) 72%
  );
  animation: title-logo-lamp-glow 3.2s ease-in-out infinite;
}

@keyframes title-logo-lamp-beam {
  0%,
  100% {
    opacity: 0.72;
    transform: scaleY(0.96);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.04);
  }
}

@keyframes title-logo-lamp-spot {
  0%,
  100% {
    opacity: 0.68;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes title-logo-lamp-glow {
  0%,
  100% {
    opacity: 0.78;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[class*="weather-night"] .title-logo-lamp__beam,
  body[class*="weather-night"] .title-logo-lamp__spot,
  body[class*="weather-night"] .title-logo-lamp__glow {
    animation: none;
    opacity: 0.88;
  }
}

.title-logo {
  display: block;
  position: relative;
  z-index: 1;
  width: auto;
  height: var(--header-logo-h);
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 5px 14px rgba(12, 44, 74, 0.32));
  image-rendering: pixelated;
}

.title-logo-smoke {
  position: absolute;
  left: 79.1%;
  top: 5.6%;
  width: 2.5rem;
  height: 5rem;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

.title-logo-smoke__puff {
  position: absolute;
  left: 50%;
  top: 0;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  background: rgba(236, 240, 244, 0.88);
  box-shadow:
    4px -4px 0 0 rgba(220, 226, 232, 0.72),
    -3px -7px 0 0 rgba(255, 255, 255, 0.55);
  opacity: 0;
  image-rendering: pixelated;
  animation: title-logo-smoke-rise 2.8s ease-out infinite;
}

.title-logo-smoke__puff--1 {
  animation-delay: 0s;
}

.title-logo-smoke__puff--2 {
  margin-left: -2px;
  animation-delay: 0.95s;
}

.title-logo-smoke__puff--3 {
  margin-left: -14px;
  animation-delay: 1.85s;
}

@keyframes title-logo-smoke-rise {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }
  12% {
    opacity: 0.82;
  }
  55% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translate(-12px, -4.4rem) scale(1.45);
  }
}

/* 布局：天空区内工具箱；仓库绝对定位在其左侧，不占工具箱宽度 */
.play-layout {
  position: relative;
  display: block;
  width: 100%;
  overflow: visible;
}

.portal-zone {
  position: fixed;
  top: var(--portal-top);
  left: var(--world-ui-inset);
  z-index: 100;
  width: var(--side-zone-width);
  min-width: 0;
  max-width: var(--side-zone-width);
  padding: 0 4px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: none;
  box-shadow: none;
}

.portal-zone-label {
  margin-top: 6px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.portal-zone.side-zone {
  width: var(--side-zone-width);
  max-width: var(--side-zone-width);
  align-items: center;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 4px;
  border-radius: 0;
  justify-content: flex-start;
}

.warehouse-zone.side-zone {
  width: auto;
  max-width: none;
  align-items: center;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  justify-content: flex-end;
}

.warehouse-zone {
  position: absolute;
  right: 100%;
  bottom: 0;
  margin-right: 10px;
  z-index: 100;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  padding: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: none;
}

.portal-zone .side-zone-label {
  margin-bottom: 0;
}

.warehouse-zone > * {
  pointer-events: auto;
}

.warehouse-zone-label {
  margin-top: 0;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.warehouse-zone .side-zone-label {
  margin-bottom: 6px;
}

.side-panel-slot {
  position: fixed;
  align-self: start;
  width: var(--side-panel-width);
  min-width: 0;
  max-width: var(--side-panel-width);
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  z-index: 5;
}

.side-panel-slot--portal {
  position: absolute;
  top: 0;
  left: calc(100% + 10px);
  right: auto;
  width: var(--side-panel-width);
  max-width: var(--side-panel-width);
  z-index: 6;
}

.side-panel-slot--warehouse {
  position: fixed;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  width: var(--warehouse-panel-width);
  min-width: var(--warehouse-panel-width);
  max-width: var(--warehouse-panel-width);
  margin-top: 0;
  z-index: 150;
  pointer-events: none;
}

.side-panel-slot--warehouse:not(.is-positioned) {
  visibility: hidden;
  pointer-events: none;
}

.side-panel-slot--warehouse.is-open.is-positioned {
  pointer-events: auto;
  visibility: visible;
}

.side-panel-slot--warehouse .chest-panel:not([hidden]) {
  pointer-events: auto;
}

.side-panel-slot--warehouse .chest-panel--animating {
  animation: chest-panel-in-down 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.side-panel-slot--warehouse .chest-panel--animating .chest-panel-title,
.side-panel-slot--warehouse .chest-panel--animating .chest-panel-total,
.side-panel-slot--warehouse .chest-panel--animating .chest-panel-empty,
.side-panel-slot--warehouse .chest-panel--animating .recycle-item {
  animation: none !important;
}

@keyframes chest-panel-in-down {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transform-origin: left top;
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    transform-origin: left top;
  }
}

/* 耕种区：铺满地平线以下草地 */
.farm-stage,
.garden-area {
  position: fixed;
  top: var(--farm-top);
  left: 0;
  right: 0;
  bottom: var(--farm-bottom-reserve);
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;
}

.garden-frame,
.garden-grid,
.plot {
  pointer-events: auto;
}

.farm-fence {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.farm-fence-rail {
  position: absolute;
  background-color: transparent;
  background-repeat: repeat;
}

.farm-fence-rail::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("assets/fence-bark-tile.jpg?v=fence8");
  background-size: var(--fence-bark-tile-w) var(--fence-bark-tile-h);
  background-repeat: repeat;
  opacity: var(--fence-bark-opacity);
  mix-blend-mode: soft-light;
  filter: contrast(1.16);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}

.farm-fence-rail--left {
  position: fixed;
  top: var(--farm-fence-side-top);
  left: 0;
  bottom: var(--farm-bottom-reserve);
  width: var(--farm-fence-side-w);
  background-image: url("assets/fence-ref-v.svg?v=fence6");
  background-size: var(--farm-fence-side-w) var(--fence-tile-v);
  background-position: left bottom;
  z-index: 2;
}

.farm-fence-rail--left::after {
  -webkit-mask-image: url("assets/fence-ref-v.svg?v=fence6");
  mask-image: url("assets/fence-ref-v.svg?v=fence6");
  -webkit-mask-size: var(--farm-fence-side-w) var(--fence-tile-v);
  mask-size: var(--farm-fence-side-w) var(--fence-tile-v);
  -webkit-mask-position: left bottom;
  mask-position: left bottom;
}

.farm-fence-rail--right {
  position: fixed;
  top: var(--farm-fence-side-top);
  right: 0;
  bottom: var(--farm-bottom-reserve);
  width: var(--farm-fence-side-w);
  background-image: url("assets/fence-ref-vr.svg?v=fence6");
  background-size: var(--farm-fence-side-w) var(--fence-tile-v);
  background-position: right bottom;
  z-index: 2;
}

.farm-fence-rail--right::after {
  -webkit-mask-image: url("assets/fence-ref-vr.svg?v=fence6");
  mask-image: url("assets/fence-ref-vr.svg?v=fence6");
  -webkit-mask-size: var(--farm-fence-side-w) var(--fence-tile-v);
  mask-size: var(--farm-fence-side-w) var(--fence-tile-v);
  -webkit-mask-position: right bottom;
  mask-position: right bottom;
}

.farm-fence-rail--bottom {
  position: fixed;
  left: var(--farm-fence-side-w);
  right: var(--farm-fence-side-w);
  bottom: var(--farm-bottom-reserve);
  height: var(--farm-fence-bottom-h);
  background-image: url("assets/fence-ref-h.svg?v=fence7");
  background-size: var(--fence-tile-h) 100%;
  background-repeat: repeat-x;
  background-position: left bottom;
  z-index: 2;
}

.farm-fence-rail--bottom::after {
  -webkit-mask-image: url("assets/fence-ref-h.svg?v=fence7");
  mask-image: url("assets/fence-ref-h.svg?v=fence7");
  -webkit-mask-size: var(--fence-tile-h) 100%;
  mask-size: var(--fence-tile-h) 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: left bottom;
  mask-position: left bottom;
}

.farm-fence-corner {
  position: fixed;
  bottom: var(--farm-bottom-reserve);
  width: var(--farm-fence-side-w);
  height: var(--farm-fence-bottom-h);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 100%;
  z-index: 3;
}

.farm-fence-corner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("assets/fence-bark-tile.jpg?v=fence8");
  background-size: var(--fence-bark-tile-w) var(--fence-bark-tile-h);
  background-repeat: repeat;
  opacity: var(--fence-bark-opacity);
  mix-blend-mode: soft-light;
  filter: contrast(1.16);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: left bottom;
  mask-position: left bottom;
}

.farm-fence-corner--bl {
  left: 0;
  background-image: url("assets/fence-ref-bl.svg?v=fence7");
}

.farm-fence-corner--bl::after {
  -webkit-mask-image: url("assets/fence-ref-bl.svg?v=fence7");
  mask-image: url("assets/fence-ref-bl.svg?v=fence7");
}

.farm-fence-corner--br {
  right: 0;
  background-image: url("assets/fence-ref-br.svg?v=fence7");
}

.farm-fence-corner--br::after {
  -webkit-mask-image: url("assets/fence-ref-br.svg?v=fence7");
  mask-image: url("assets/fence-ref-br.svg?v=fence7");
}

/* 夜晚作业区：围栏柱顶灯（fixed + JS 对齐柱顶） */
.zone-post-lamp-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.farm-fence-corner-lamps {
  pointer-events: none;
}

/*
 * 四边踢脚（选项2）：栏后地面黄光（z 低于围栏，柱缝/缝地可见）。
 * 左/右：贴木柱内缘（≈14/26）；底：贴柱脚（≈46/48）；顶见 .zone-fence-top。
 */
.farm-work-night-fx {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: var(--farm-fence-side-top);
  bottom: var(--farm-bottom-reserve);
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

body[class*="weather-night"] .farm-work-night-fx:not([hidden]) {
  display: block;
}

.farm-work-night-fx__skirting {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* 底：底边贴柱脚，向上铺进底栏与地块之间 */
.farm-work-night-fx__skirting--bottom {
  left: var(--farm-fence-side-w);
  right: var(--farm-fence-side-w);
  bottom: calc(var(--farm-fence-bottom-h) * (48 - 46) / 48);
  height: calc(var(--farm-fence-bottom-h) * 46 / 48 + 28px);
  background: linear-gradient(
    to top,
    rgba(255, 250, 190, 1) 0%,
    rgba(255, 220, 90, 0.7) 18%,
    rgba(255, 190, 40, 0.28) 50%,
    transparent 100%
  );
}

/* 左：亮边贴木柱内缘，向地块缝地；栏体压在更高 z 上 */
.farm-work-night-fx__skirting--left {
  top: 0;
  bottom: var(--farm-fence-bottom-h);
  left: calc(var(--farm-fence-side-w) * 14 / 26);
  width: calc(var(--farm-fence-side-w) * 12 / 26 + 28px);
  background: linear-gradient(
    90deg,
    rgba(255, 250, 190, 1) 0%,
    rgba(255, 220, 90, 0.7) 18%,
    rgba(255, 190, 40, 0.28) 50%,
    transparent 100%
  );
}

.farm-work-night-fx__skirting--right {
  top: 0;
  bottom: var(--farm-fence-bottom-h);
  right: calc(var(--farm-fence-side-w) * 14 / 26);
  width: calc(var(--farm-fence-side-w) * 12 / 26 + 28px);
  background: linear-gradient(
    270deg,
    rgba(255, 250, 190, 1) 0%,
    rgba(255, 220, 90, 0.7) 18%,
    rgba(255, 190, 40, 0.28) 50%,
    transparent 100%
  );
}

/*
 * 顶栏：栏后黄光，柱脚为峰（≈46/48），与底栏同色档——向上透柱缝、向下进缝地。
 * 不占用 grass-span 的 ::before（该伪元素是侧栏衔接件）。
 */
body[class*="weather-night"] .garden-zone .zone-fence-top {
  isolation: isolate;
  overflow: visible;
}

body[class*="weather-night"] .garden-zone .zone-fence-top::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* 自栏顶起：经柱脚再向下 28px；柱脚相对高度 ≈ 46/(46+28) ≈ 62% */
  top: 0;
  height: calc(100% * 46 / 48 + 28px);
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(
    to bottom,
    rgba(255, 190, 40, 0) 0%,
    rgba(255, 190, 40, 0.28) 35%,
    rgba(255, 220, 90, 0.7) 50%,
    rgba(255, 250, 190, 1) 62%,
    rgba(255, 220, 90, 0.7) 72%,
    rgba(255, 190, 40, 0.28) 85%,
    transparent 100%
  );
}

.farm-corner-lamp {
  --lamp-w: 22px;
  --lamp-h: 31px;
  position: fixed;
  width: var(--lamp-w);
  height: var(--lamp-h);
  transform: translate(-50%, -100%);
  z-index: 4;
  opacity: 1;
  pointer-events: none;
  /* 白天：无黄光滤镜（灯体用 zone-post-lamp-off） */
  filter: none;
  transition: filter 0.45s ease, opacity 0.45s ease;
}

.farm-fence-corner-lamps[hidden] .farm-corner-lamp {
  opacity: 0;
}

/* 夜晚：黄光 + 脉冲（灯体用 zone-post-lamp） */
body[class*="weather-night"] .farm-corner-lamp {
  filter:
    drop-shadow(0 0 4px rgba(255, 230, 80, 1))
    drop-shadow(0 0 12px rgba(255, 200, 40, 1))
    drop-shadow(0 0 22px rgba(255, 170, 20, 0.9))
    drop-shadow(0 0 36px rgba(255, 140, 10, 0.55))
    brightness(1.4)
    saturate(1.25);
  animation: zone-post-lamp-pulse 3.2s ease-in-out infinite;
}

.farm-corner-lamp__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@keyframes zone-post-lamp-pulse {
  0%,
  100% {
    filter:
      drop-shadow(0 0 4px rgba(255, 230, 80, 1))
      drop-shadow(0 0 12px rgba(255, 200, 40, 1))
      drop-shadow(0 0 22px rgba(255, 170, 20, 0.85))
      drop-shadow(0 0 34px rgba(255, 140, 10, 0.5))
      brightness(1.35)
      saturate(1.2);
  }

  50% {
    filter:
      drop-shadow(0 0 6px rgba(255, 240, 100, 1))
      drop-shadow(0 0 16px rgba(255, 210, 50, 1))
      drop-shadow(0 0 28px rgba(255, 175, 25, 0.95))
      drop-shadow(0 0 42px rgba(255, 145, 15, 0.65))
      brightness(1.55)
      saturate(1.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[class*="weather-night"] .farm-corner-lamp {
    animation: none;
  }
}



.seed-bar-shell .water-can-trigger {
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: auto;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
  pointer-events: auto;
  transform: translateX(-50%) translateY(calc(var(--water-can-peg-size, 7px) / -2));
}

.water-can-trigger:hover:not(:disabled) .water-can-pendulum {
  animation-duration: 3s;
}

.water-can-trigger:disabled {
  cursor: not-allowed;
}

.water-can-peg {
  width: var(--water-can-peg-size, 7px);
  height: var(--water-can-peg-size, 7px);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #c4a048, #6b4f0a 70%, #4a3810);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}

.water-can-pendulum {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 0;
  animation: water-can-pendulum 4s cubic-bezier(0.42, 0, 0.58, 1) infinite;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.water-can-string {
  width: 2px;
  height: 10px;
  border-radius: 1px;
  background: #6b4f0a;
  flex-shrink: 0;
}

.water-can-art {
  width: 48px;
  height: 60px;
  display: block;
  pointer-events: none;
  flex-shrink: 0;
}

@keyframes water-can-pendulum {
  0%,
  100% {
    transform: rotate(-16deg);
  }

  50% {
    transform: rotate(16deg);
  }
}

/* 鼠标水壶：浇水模式跟随指针，点击时倾斜出水 */
.cursor-water-can {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 1500;
  transform: translate(calc(var(--cx, -100px) - 24px), calc(var(--cy, -100px) - 7px));
  will-change: transform;
}

.cursor-water-can-inner {
  display: block;
  position: relative;
  width: 48px;
  height: 60px;
  transform-origin: 24px 7px;
}

.cursor-water-can--pouring .cursor-water-can-inner {
  animation: cursor-water-can-tilt 0.32s ease-out forwards;
}

@keyframes cursor-water-can-tilt {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(45deg);
  }
}

.cursor-water-can-art {
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22));
}

.cursor-water-can-jet {
  position: absolute;
  left: 45px;
  top: 27px;
  width: 7px;
  height: 0;
  transform-origin: 50% 0;
  transform: rotate(88deg);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(210, 238, 250, 0.95) 0%,
    rgba(160, 210, 235, 0.45) 100%
  );
  box-shadow:
    -3px 0 0 rgba(200, 232, 246, 0.55),
    3px 0 0 rgba(200, 232, 246, 0.55);
  pointer-events: none;
}

.cursor-water-can-jet--active {
  animation: cursor-water-can-jet 0.72s ease-out forwards;
}

@keyframes cursor-water-can-jet {
  0% {
    height: 0;
    opacity: 0;
  }

  20% {
    height: 18px;
    opacity: 0.9;
  }

  100% {
    height: 26px;
    opacity: 0;
  }
}

/* 鼠标镰刀：收获挥砍时在点击处播放（平时用系统光标定位） */
.cursor-sickle {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 1500;
  transform: translate(
    calc(var(--cx, -100px) - 28px),
    calc(var(--cy, -100px) - 14px)
  );
  will-change: transform;
}

.cursor-sickle[hidden] {
  display: none !important;
}

.cursor-sickle-inner {
  display: block;
  width: 32px;
  height: 28px;
  transform-origin: 28px 14px;
}

.cursor-sickle--swinging .cursor-sickle-inner {
  animation: cursor-sickle-swing 420ms cubic-bezier(0.24, 0.92, 0.32, 1) forwards;
}

.cursor-sickle--quick.cursor-sickle--swinging .cursor-sickle-inner {
  animation-duration: 280ms;
}

@keyframes cursor-sickle-swing {
  0% {
    transform: rotate(-82deg) scale(0.82);
  }

  38% {
    transform: rotate(-12deg) scale(1.08);
  }

  58% {
    transform: rotate(42deg) scale(1);
  }

  100% {
    transform: rotate(64deg) scale(0.94);
  }
}

.cursor-sickle-art {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
}

.cursor-pour-drop {
  position: fixed;
  width: 5px;
  height: 7px;
  margin: 0 0 0 -2.5px;
  border-radius: 50% 50% 45% 45%;
  background: linear-gradient(
    180deg,
    rgba(210, 238, 250, 0.95) 0%,
    rgba(145, 192, 220, 0.88) 100%
  );
  box-shadow: 0 0 3px rgba(190, 225, 240, 0.45);
  pointer-events: none;
  z-index: 1498;
  animation: cursor-pour-drop-fall 0.5s ease-in forwards;
}

@keyframes cursor-pour-drop-fall {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.45);
  }

  18% {
    opacity: 0.92;
  }

  100% {
    opacity: 0;
    transform: translateY(var(--fall-dist, 40px)) scale(0.55);
  }
}

.water-can-trigger--active .water-can-art {
  filter: drop-shadow(0 0 4px rgba(240, 120, 24, 0.9));
}

.water-can-trigger--used .water-can-art {
  opacity: 0.58;
}

.water-can-trigger--active:not(.water-can-trigger--pouring) .water-can-pendulum {
  animation-duration: 2.6s;
}

.water-can-trigger--pouring .water-can-pendulum,
.water-can-pendulum--pouring {
  animation: water-can-pour-swing 1.05s ease-in-out !important;
}

.water-can-trigger--pouring .water-can-art {
  filter: drop-shadow(0 1px 3px rgba(196, 82, 10, 0.4));
}

@keyframes water-can-pour-swing {
  0% {
    transform: rotate(-16deg);
  }

  12% {
    transform: rotate(44deg);
  }

  68% {
    transform: rotate(38deg);
  }

  100% {
    transform: rotate(-16deg);
  }
}

.water-spout-jet {
  position: absolute;
  left: calc(100% - 5px);
  top: 56%;
  width: 3px;
  height: 0;
  transform-origin: 50% 0;
  transform: rotate(92deg);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(198, 228, 242, 0.95) 0%,
    rgba(145, 192, 218, 0.55) 100%
  );
  pointer-events: none;
  z-index: 2;
  animation: water-spout-jet 0.95s ease-out forwards;
}

@keyframes water-spout-jet {
  0% {
    height: 0;
    opacity: 0;
  }

  15% {
    height: 20px;
    opacity: 0.92;
  }

  60% {
    height: 28px;
    opacity: 0.7;
  }

  100% {
    height: 32px;
    opacity: 0;
  }
}

.water-can-spout-drop {
  position: fixed;
  width: 5px;
  height: 8px;
  margin: 0 0 0 -2.5px;
  border-radius: 50% 50% 45% 45%;
  background: linear-gradient(
    180deg,
    rgba(210, 236, 248, 0.95) 0%,
    rgba(150, 198, 224, 0.9) 100%
  );
  box-shadow: 0 0 3px rgba(190, 225, 240, 0.5);
  pointer-events: none;
  z-index: 1395;
  animation: water-can-spout-drop 0.52s ease-in forwards;
}

@keyframes water-can-spout-drop {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.45);
  }

  15% {
    opacity: 0.92;
    transform: translateY(2px) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(32px) scale(0.6);
  }
}

.plot.plot--watering {
  z-index: 60;
  overflow: visible;
}

.plot-water-fx {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  overflow: visible;
}

.plot-water-fx-rain {
  position: absolute;
  left: 50%;
  top: 0;
  width: 18%;
  min-width: 6px;
  max-width: 14px;
  height: 0;
  transform: translateX(-50%);
  border-radius: 40% 40% 50% 50%;
  background: linear-gradient(
    180deg,
    rgba(210, 232, 244, 0) 0%,
    rgba(172, 208, 226, 0.45) 20%,
    rgba(142, 186, 210, 0.62) 100%
  );
  animation: plot-water-rain 0.56s ease-in forwards;
}

.plot-water-fx-streak {
  position: absolute;
  left: calc(50% + var(--streak-offset, 0%));
  top: 6%;
  width: 2px;
  height: 0;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(200, 228, 240, 0) 0%,
    rgba(155, 194, 214, 0.65) 100%
  );
  animation: plot-water-streak 0.5s ease-in forwards;
  animation-delay: var(--streak-delay, 0s);
}

@keyframes plot-water-rain {
  0% {
    height: 0;
    opacity: 0;
  }

  14% {
    opacity: 0.82;
  }

  72% {
    height: 52%;
    opacity: 0.58;
  }

  100% {
    height: 54%;
    opacity: 0;
  }
}

@keyframes plot-water-streak {
  0% {
    height: 0;
    opacity: 0;
  }

  20% {
    opacity: 0.68;
  }

  100% {
    height: 42%;
    opacity: 0;
  }
}

.plot-land-splash-fan {
  position: fixed;
  width: calc(36px * var(--splash-scale, 1));
  height: calc(18px * var(--splash-scale, 1));
  pointer-events: none;
  z-index: 1402;
  transform: translate(-50%, -50%) scale(0.15);
  border-radius: 50%;
  background: radial-gradient(
    ellipse 100% 80% at 50% 100%,
    rgba(230, 246, 255, 0.92) 0%,
    rgba(170, 215, 240, 0.45) 45%,
    transparent 72%
  );
  animation: plot-land-splash-fan 0.48s ease-out forwards;
}

.plot-land-splash-ring {
  position: fixed;
  width: calc(32px * var(--splash-scale, 1));
  height: calc(14px * var(--splash-scale, 1));
  pointer-events: none;
  z-index: 1401;
  transform: translate(-50%, -50%) scale(0.3);
  border-radius: 50%;
  border: 2px solid rgba(150, 210, 240, 0.75);
  background: rgba(130, 195, 230, 0.28);
  animation: plot-land-splash-ring 0.58s ease-out forwards;
}

.plot-land-splash-drop {
  position: fixed;
  width: calc(5px * var(--splash-scale, 1));
  height: calc(6px * var(--splash-scale, 1));
  pointer-events: none;
  z-index: 1403;
  transform: translate(-50%, -50%);
  border-radius: 50% 50% 45% 45%;
  background: rgba(200, 232, 248, 0.95);
  box-shadow: 0 0 4px rgba(180, 220, 245, 0.55);
  animation: plot-land-splash-drop 0.44s ease-out forwards;
  animation-delay: var(--splash-delay, 0s);
}

@keyframes plot-land-splash-fan {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
  }

  30% {
    opacity: 0.95;
    transform: translate(-50%, calc(-50% - 4px)) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 8px)) scale(1.25);
  }
}

@keyframes plot-land-splash-ring {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.25);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.4);
  }
}

@keyframes plot-land-splash-drop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.25);
  }

  20% {
    opacity: 0.95;
    transform: translate(-50%, calc(-50% - 8px)) scale(1);
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--splash-angle, 0deg))
      translateX(var(--splash-dist, 16px))
      translateY(6px)
      scale(0.35);
  }
}

.plot-water-fx-impact {
  position: absolute;
  left: 50%;
  top: 57%;
  width: 40%;
  height: 14%;
  transform: translate(-50%, -50%) scale(0.1);
  border-radius: 50%;
  background: radial-gradient(
    ellipse 100% 68% at 50% 65%,
    rgba(205, 228, 238, 0.55) 0%,
    rgba(155, 192, 210, 0.2) 52%,
    transparent 74%
  );
  opacity: 0;
  animation: plot-water-impact 0.42s ease-out forwards;
}

.plot-water-fx-splash {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 62%;
  height: 28%;
  transform: translate(-50%, -50%) scale(0.15);
  border-radius: 50%;
  background: radial-gradient(
    ellipse 90% 55% at 50% 100%,
    rgba(230, 246, 255, 0.85) 0%,
    rgba(170, 215, 240, 0.35) 42%,
    transparent 72%
  );
  opacity: 0;
  animation: plot-water-ground-splash 0.52s ease-out forwards;
}

@keyframes plot-water-ground-splash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.12);
  }

  28% {
    opacity: 0.85;
    transform: translate(-50%, calc(-50% - 3px)) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 5px)) scale(1.2);
  }
}

@keyframes plot-water-impact {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.08);
  }

  35% {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

.plot-water-fx-ripple {
  position: absolute;
  left: 50%;
  top: 61%;
  width: 28%;
  height: 9%;
  transform: translate(-50%, -50%) scale(0.25);
  border-radius: 50%;
  border: 1px solid rgba(48, 32, 18, 0.3);
  background: rgba(42, 58, 34, 0.06);
  opacity: 0;
  animation: plot-water-soil-ripple 0.7s ease-out forwards;
}

.plot-water-fx-ripple--late {
  animation-duration: 0.78s;
}

@keyframes plot-water-soil-ripple {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.22);
  }

  32% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2);
  }
}

.plot-water-crown-drop {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 3px;
  height: 4px;
  transform: translate(-50%, -50%);
  border-radius: 50% 50% 45% 45%;
  background: rgba(196, 222, 236, 0.92);
  opacity: 0;
  animation: plot-water-crown-drop 0.42s ease-out forwards;
  animation-delay: var(--crown-delay, 0.48s);
}

@keyframes plot-water-crown-drop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.25);
  }

  22% {
    opacity: 0.92;
    transform: translate(-50%, calc(-50% - var(--crown-lift, 8px))) scale(1);
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--crown-angle, 0deg))
      translateX(var(--crown-spread, 11px))
      translateY(7px)
      scale(0.35);
  }
}

.side-zone {
  min-width: 0;
  max-width: var(--side-zone-width);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 12px 8px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.portal-zone.side-zone {
  width: var(--side-zone-width);
  max-width: var(--side-zone-width);
  align-items: center;
  padding: 0 4px;
  border-radius: 0;
  box-shadow: none;
}

.warehouse-zone.side-zone {
  width: auto;
  max-width: none;
  align-items: center;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.side-zone-label {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 10px;
  text-align: center;
}

.portal-zone .side-zone-label.ground-plaque,
.warehouse-zone .side-zone-label.ground-plaque {
  align-self: center;
  width: auto;
  max-width: 100%;
}

.seed-bar {
  width: 100%;
  min-width: 0;
  max-width: var(--garden-main-width);
  margin: 0 auto;
  overflow: visible;
  animation: seed-bar-rise 0.5s ease both;
}

@keyframes seed-bar-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.seed-bar-shell {
  position: relative;
  border-radius: 12px;
  overflow: visible;
  border: 1px solid rgba(180, 200, 215, 0.55);
  box-shadow:
    0 6px 18px rgba(40, 60, 80, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.94);
  padding: 6px 8px 7px;
}

.seed-bar-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  padding-bottom: 5px;
  border-bottom: 1px dashed rgba(120, 150, 170, 0.28);
  min-width: 0;
}

.seed-bar-title {
  margin: 0;
  flex: 0 0 auto;
  font-size: 0.88rem;
  font-weight: 700;
  color: #3a4a58;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

.seed-bar-toast {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}

.toolbox-hint-area {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  overflow: hidden;
}

.toolbox-hint-slot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
  width: 100%;
}

.toolbox-hint-slot--alert,
.toolbox-hint-slot--action,
.toolbox-hint-slot--guide {
  flex: 1 1 auto;
  max-width: 100%;
}

.toolbox-hint-slot[hidden] {
  display: none !important;
}

.toolbox-hint-label {
  flex: 0 0 auto;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

.toolbox-hint-slot--alert .toolbox-hint-label {
  color: #b42318;
  background: rgba(248, 113, 113, 0.22);
}

.toolbox-hint-slot--action .toolbox-hint-label {
  color: #1e5a96;
  background: rgba(147, 197, 253, 0.22);
}

.toolbox-hint-slot--guide .toolbox-hint-label {
  color: #3f6212;
  background: rgba(163, 230, 53, 0.2);
}

.hint-alert {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #b42318;
}

.hint-action {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1e5a96;
}

.hint-guide {
  color: #4d7c0f;
}

.toolbox-hint-marquee--guide {
  flex: 1 1 auto;
  min-width: 0;
}

.toolbox-hint-marquee {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

#hint-guide-marquee[hidden] {
  display: none !important;
}

.toolbox-hint-marquee:not(.is-scrolling) .toolbox-hint-track {
  animation: none;
  justify-content: flex-end;
  width: 100%;
}

.toolbox-hint-track {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  white-space: nowrap;
  min-width: min-content;
}

.toolbox-hint-marquee--guide.is-scrolling .toolbox-hint-track {
  animation: toolbox-hint-marquee var(--hint-marquee-duration, 28s) linear infinite;
}

.toolbox-hint-marquee.is-scrolling:hover .toolbox-hint-track {
  animation-play-state: paused;
}

@keyframes toolbox-hint-marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-50% - 1.25rem));
  }
}

.seed-bar-hint {
  display: inline-block;
  pointer-events: auto;
  font-size: 0.66rem;
  line-height: 1.35;
  flex: 0 0 auto;
  padding: 0;
  white-space: nowrap;
  color: #5a6875;
  font-weight: 600;
  background: none;
  border: none;
  box-shadow: none;
}

.hint-marquee-clone[hidden] {
  display: none;
}

.seed-bar-icon {
  font-size: 1rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(74, 124, 35, 0.25));
  animation: seed-icon-sway 3.2s ease-in-out infinite;
  transform-origin: center bottom;
}

@keyframes seed-icon-sway {
  0%,
  100% {
    transform: rotate(-4deg);
  }

  50% {
    transform: rotate(5deg);
  }
}

.seed-catalog-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.seed-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  animation: seed-row-fade 0.45s ease both;
}

.seed-row--tool .seed-row-tag {
  color: #2f5580;
  background: rgba(228, 240, 252, 0.92);
  border-color: rgba(62, 120, 180, 0.24);
  box-shadow: 0 1px 3px rgba(62, 120, 180, 0.1);
}

.seed-row--shortcut .seed-row-tag {
  color: #7a5218;
  background: rgba(255, 242, 220, 0.92);
  border-color: rgba(180, 130, 48, 0.24);
  box-shadow: 0 1px 3px rgba(180, 130, 48, 0.1);
}

.tool-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 38px;
  padding: 4px 3px;
  justify-content: center;
}

.tool-btn .seed-name {
  display: none;
}

.tool-btn .seed-emoji {
  font-size: 1.38rem;
}

.tool-btn .tool-icon {
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16));
  pointer-events: none;
}

.tool-btn .tool-icon--water {
  width: 22px;
  height: 28px;
}

.tool-btn .tool-icon--pointer {
  width: 20px;
  height: 20px;
}

.tool-btn .tool-icon-photo {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16));
}

.tool-btn .tool-icon--hoe.tool-icon-photo {
  width: 32px;
  height: 34px;
}

.tool-btn .tool-icon--sickle.tool-icon-photo {
  width: 34px;
  height: 30px;
  transform: scaleX(-1);
}

.tool-btn .tool-icon--bat {
  width: 18px;
  height: 44px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22));
}

.tool-btn .tool-icon--hoe,
.tool-btn .tool-icon--sickle {
  width: 30px;
  height: 30px;
}

.tool-btn .tool-glyph {
  font-size: 1.28rem;
}

.tool-btn .tool-tooltip {
  min-width: 118px;
  max-width: 168px;
}

.tool-btn:hover .tool-tooltip,
.tool-btn:focus-visible .tool-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.tool-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.tool-btn.selected {
  border-color: rgba(62, 120, 180, 0.55);
  background: rgba(228, 240, 252, 0.95);
  box-shadow:
    0 0 0 2px rgba(62, 120, 180, 0.22),
    0 2px 6px rgba(62, 120, 180, 0.14);
}

.tool-btn--used:not(.selected) {
  opacity: 0.52;
}

.tool-glyph {
  font-size: 1.15rem;
  line-height: 1;
  font-weight: 800;
  color: #3a4a58;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.toolbox-grid {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 5px;
  animation: seed-row-fade 0.45s ease both;
}

.toolbox-slot--empty {
  flex: 1 1 0;
  min-width: 0;
  min-height: 38px;
  border-radius: 8px;
  border: 1.5px dashed rgba(180, 200, 215, 0.5);
  background: rgba(248, 252, 255, 0.45);
  position: relative;
}

.toolbox-slot--empty::after {
  content: "空";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.52rem;
  font-weight: 600;
  color: rgba(106, 120, 136, 0.55);
  letter-spacing: 0.06em;
}

.seed-row--vegetable {
  animation-delay: 0.08s;
}

.seed-row--flower {
  animation-delay: 0.16s;
}

@keyframes seed-row-fade {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.seed-row-tag {
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 2px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #356428;
  background: rgba(232, 245, 220, 0.92);
  border: 1px solid rgba(74, 124, 35, 0.24);
  box-shadow: 0 1px 3px rgba(74, 124, 35, 0.1);
}

.seed-row--flower .seed-row-tag {
  color: #9a3560;
  background: rgba(253, 232, 242, 0.92);
  border-color: rgba(196, 90, 138, 0.24);
  box-shadow: 0 1px 3px rgba(196, 90, 138, 0.1);
}

.seed-row-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.seed-row-empty {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
  font-size: 0.68rem;
  color: #6a7888;
  padding: 4px 2px;
  line-height: 1.35;
}

.seed-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 5px 4px 4px;
  border: 1.5px solid rgba(200, 220, 230, 0.55);
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(240, 248, 252, 0.92) 100%
  );
  cursor: pointer;
  overflow: visible;
  backdrop-filter: blur(6px);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition:
    transform 0.2s cubic-bezier(0.34, 1.25, 0.64, 1),
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.seed-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.55) 0%,
    transparent 45%
  );
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.seed-btn--enter {
  animation: seed-btn-enter 0.36s cubic-bezier(0.34, 1.15, 0.64, 1) both;
}

@keyframes seed-btn-enter {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.seed-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 94, 60, 0.62);
  box-shadow:
    0 4px 10px rgba(90, 58, 32, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}

.seed-btn:hover::before {
  opacity: 1;
}

.seed-btn:active {
  transform: translateY(0) scale(0.98);
}

.seed-btn.selected {
  border-color: #5a9430;
  background: linear-gradient(180deg, rgba(244, 251, 232, 0.98) 0%, rgba(230, 245, 214, 0.95) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(107, 158, 74, 0.35),
    0 0 0 2px rgba(107, 158, 74, 0.14),
    0 0 12px rgba(107, 158, 74, 0.18);
  animation: seed-selected-pulse 2.8s ease-in-out infinite;
}

.seed-btn--flower.selected {
  border-color: #c45a8a;
  background: linear-gradient(180deg, rgba(255, 244, 249, 0.98) 0%, rgba(253, 232, 241, 0.95) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(224, 138, 176, 0.35),
    0 0 0 2px rgba(224, 138, 176, 0.12),
    0 0 12px rgba(224, 138, 176, 0.14);
  animation: seed-selected-pulse-flower 2.8s ease-in-out infinite;
}

@keyframes seed-selected-pulse {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(107, 158, 74, 0.35),
      0 0 0 2px rgba(107, 158, 74, 0.1),
      0 0 8px rgba(107, 158, 74, 0.12);
  }

  50% {
    box-shadow:
      inset 0 0 0 1px rgba(107, 158, 74, 0.4),
      0 0 0 3px rgba(107, 158, 74, 0.16),
      0 0 14px rgba(107, 158, 74, 0.22);
  }
}

@keyframes seed-selected-pulse-flower {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(224, 138, 176, 0.35),
      0 0 0 2px rgba(224, 138, 176, 0.08),
      0 0 8px rgba(224, 138, 176, 0.1);
  }

  50% {
    box-shadow:
      inset 0 0 0 1px rgba(224, 138, 176, 0.4),
      0 0 0 3px rgba(224, 138, 176, 0.14),
      0 0 14px rgba(224, 138, 176, 0.18);
  }
}

.seed-btn--pick .seed-emoji,
.seed-btn--pick .seed-icon-photo {
  animation: seed-btn-pick 0.32s cubic-bezier(0.34, 1.35, 0.64, 1);
}

@keyframes seed-btn-pick {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.14);
  }

  100% {
    transform: scale(1);
  }
}

.seed-emoji {
  position: relative;
  z-index: 1;
  font-size: 1.42rem;
  line-height: 1;
  transition: transform 0.2s cubic-bezier(0.34, 1.25, 0.64, 1);
}

.seed-icon-photo {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 38px;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(74, 124, 35, 0.22));
  transition: transform 0.2s cubic-bezier(0.34, 1.25, 0.64, 1);
  transform-origin: center bottom;
}

.seed-btn:hover .seed-emoji,
.seed-btn:hover .seed-icon-photo {
  transform: scale(1.08) translateY(-1px);
}

.seed-name {
  position: relative;
  z-index: 1;
  max-width: 100%;
  font-size: 0.62rem;
  font-weight: 600;
  color: #6b5040;
  line-height: 1.1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seed-btn.selected .seed-name {
  color: #3a6020;
}

.seed-btn--flower.selected .seed-name {
  color: #8a2d55;
}

.seed-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%) translateY(3px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  min-width: 130px;
  max-width: 178px;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(32, 24, 16, 0.94);
  border: 1px solid rgba(255, 220, 120, 0.32);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease,
    transform 0.15s ease;
}

.seed-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(32, 24, 16, 0.94);
}

.seed-tooltip-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffe082;
  text-align: center;
}

.seed-tooltip-meta {
  font-size: 0.64rem;
  font-weight: 600;
  color: rgba(255, 232, 160, 0.92);
  text-align: center;
}

.seed-tooltip-stages {
  font-size: 0.58rem;
  line-height: 1.34;
  color: rgba(255, 248, 230, 0.88);
  text-align: center;
}

.seed-btn:hover .seed-tooltip,
.seed-btn:focus-visible .seed-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .seed-bar,
  .seed-bar-icon,
  .seed-row,
  .seed-btn--enter,
  .seed-btn.selected,
  .seed-btn--flower.selected,
  .seed-btn--pick .seed-emoji,
  .seed-btn--pick .seed-icon-photo,
  .zone-seed-bank--pop,
  .zone-seed-bank-tag::before,
  .zone-seed-bank-grid::after,
  .seed-btn--zone.seed-btn--enter,
  .zone-seed-bank .seed-btn--zone:not(.selected) .seed-emoji,
  .zone-seed-bank .seed-btn--zone:not(.selected) .seed-icon-photo,
  .zone-seed-bank .seed-btn--zone.selected .seed-emoji,
  .zone-seed-bank .seed-btn--zone.selected .seed-icon-photo {
    animation: none !important;
  }

  .toolbox-hint-marquee--guide.is-scrolling .toolbox-hint-track {
    animation: none !important;
  }

  .seed-btn:hover {
    transform: none;
  }

  .seed-btn:hover .seed-emoji,
  .seed-btn:hover .seed-icon-photo {
    transform: none;
  }

  .zone-seed-bank .seed-btn--zone:hover,
  .zone-seed-bank .seed-btn--zone.selected {
    transform: none;
  }
}

/* 仓库图标 */
.chest-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 传送门 */
.portal-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.portal-trigger {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 2px 2px;
  border: none;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.portal-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #b07cff 0%, #7b4fd8 100%);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28), 0 0 8px rgba(140, 100, 255, 0.55);
  z-index: 6;
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.portal-badge--visible {
  opacity: 1;
  transform: scale(1);
}

.portal-trigger:hover {
  transform: translateY(-2px) scale(1.04);
}

.portal-trigger[aria-expanded="true"] {
  transform: scale(1.06);
}

.portal-trigger:hover .portal-gate {
  filter:
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.55))
    drop-shadow(0 0 28px rgba(200, 220, 255, 0.35));
}

.portal-trigger[aria-expanded="true"] .portal-gate {
  filter:
    drop-shadow(0 0 20px rgba(255, 255, 255, 0.75))
    drop-shadow(0 0 36px rgba(220, 235, 255, 0.5));
}

.portal-gate {
  position: relative;
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  overflow: visible;
  background: transparent;
  perspective: 280px;
  filter:
    drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 20px rgba(255, 255, 255, 0.75))
    drop-shadow(0 0 36px rgba(220, 235, 255, 0.5));
  transition: filter 0.25s ease;
}

.portal-whirl-outer-flash {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.32) 34%,
    rgba(230, 240, 255, 0.14) 56%,
    transparent 74%
  );
}

.portal-whirl-outer-flash::before,
.portal-whirl-outer-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.portal-whirl-outer-flash::before {
  inset: 8%;
  box-shadow:
    0 0 18px 6px rgba(255, 255, 255, 0.45),
    0 0 32px 12px rgba(220, 235, 255, 0.28);
}

.portal-whirl-outer-flash::after {
  inset: -4%;
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.35);
}

.portal-gate--open {
  filter:
    drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 28px rgba(255, 255, 255, 0.98))
    drop-shadow(0 0 52px rgba(240, 248, 255, 0.82))
    brightness(1.1);
}

.portal-gate--open .portal-whirl-outer-flash {
  animation: portal-whirl-outer-flash 0.95s ease-in-out infinite;
}

.portal-gate--open .portal-whirl-outer-flash::before {
  animation: portal-whirl-outer-glow 1.15s ease-in-out infinite;
}

.portal-gate--open .portal-whirl-outer-flash::after {
  animation: portal-whirl-outer-ring 1.35s ease-out infinite;
}

.portal-whirl-scene {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  transform-style: preserve-3d;
  background: #000;
  animation: portal-whirl-scene-motion 4s ease-in-out infinite;
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.85),
    0 0 22px rgba(255, 255, 255, 0.14);
}

.portal-whirl {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: url("assets/portal-whirlpool.png?v=1") center / cover no-repeat;
  pointer-events: none;
}

.portal-whirl--base {
  animation: portal-whirl-spin 6s linear infinite;
}

.portal-whirl--inner {
  inset: 6%;
  opacity: 0.62;
  mix-blend-mode: screen;
  filter: brightness(1.12) contrast(1.08);
  animation: portal-whirl-spin-reverse 3.5s linear infinite;
}

.portal-whirl-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(220, 230, 255, 0.12) 42%,
    transparent 68%
  );
  mix-blend-mode: screen;
  animation: portal-whirl-glow-pulse 1.1s ease-in-out infinite;
}

.portal-whirl-shimmer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.55) 14deg,
    rgba(255, 255, 255, 0.12) 28deg,
    transparent 48deg
  );
  mix-blend-mode: screen;
  opacity: 0.7;
  animation: portal-whirl-shimmer-spin 2.5s linear infinite;
}

.portal-whirl-ring {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.18),
    inset 0 0 12px rgba(255, 255, 255, 0.08);
  animation: portal-whirl-ring-pulse 1s ease-in-out infinite;
}

.portal-whirl-core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #1a1a1a 0%, #000 70%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.95),
    0 0 14px 4px rgba(0, 0, 0, 0.9),
    0 0 6px rgba(255, 255, 255, 0.15);
  animation: portal-whirl-core-pulse 0.9s ease-in-out infinite;
}

.portal-whirl-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  border-radius: 50%;
  pointer-events: none;
  background: #fff;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.95), 0 0 8px rgba(220, 230, 255, 0.65);
  animation: portal-whirl-spark-orbit 1.3s linear infinite;
}

.portal-whirl-spark--1 {
  width: 2.5px;
  height: 2.5px;
  margin: -1.25px 0 0 -1.25px;
  animation-duration: 2.4s;
}

.portal-whirl-spark--2 {
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  animation-duration: 3.2s;
  animation-delay: -0.9s;
}

.portal-whirl-spark--3 {
  width: 1.5px;
  height: 1.5px;
  margin: -0.75px 0 0 -0.75px;
  animation-duration: 2.1s;
  animation-delay: -1.6s;
}

.portal-whirl-star {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.9), 0 0 8px rgba(210, 230, 255, 0.7);
  animation: portal-whirl-star-twinkle 1.3s ease-in-out infinite;
}

.portal-whirl-star--1 {
  top: 26%;
  left: 64%;
  width: 2.5px;
  height: 2.5px;
  animation-delay: 0s;
}

.portal-whirl-star--2 {
  top: 54%;
  left: 24%;
  width: 2px;
  height: 2px;
  animation-delay: -0.7s;
}

.portal-whirl-star--3 {
  top: 72%;
  left: 58%;
  width: 2px;
  height: 2px;
  animation-delay: -1.4s;
}

.portal-whirl-star--4 {
  top: 38%;
  left: 42%;
  width: 1.5px;
  height: 1.5px;
  animation-delay: -2s;
}

.portal-whirl-star--1::before,
.portal-whirl-star--1::after,
.portal-whirl-star--3::before,
.portal-whirl-star--3::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  height: 1px;
  margin: -0.5px 0 0 -110%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
}

.portal-whirl-star--1::before { transform: rotate(45deg); }
.portal-whirl-star--1::after { transform: rotate(-45deg); }
.portal-whirl-star--3::before { transform: rotate(45deg); }
.portal-whirl-star--3::after { transform: rotate(-45deg); }

.portal-gate--open .portal-whirl-scene { animation-duration: 2.7s; }
.portal-gate--open .portal-whirl--base { animation-duration: 4s; }
.portal-gate--open .portal-whirl--inner { animation-duration: 2.35s; }
.portal-gate--open .portal-whirl-glow { animation-duration: 0.75s; }
.portal-gate--open .portal-whirl-shimmer { animation-duration: 1.65s; }
.portal-gate--open .portal-whirl-ring { animation-duration: 0.67s; }
.portal-gate--open .portal-whirl-core { animation-duration: 0.6s; }
.portal-gate--open .portal-whirl-spark { animation-duration: 0.87s; }
.portal-gate--open .portal-whirl-star { animation-duration: 0.87s; }

.portal-gate--pulse {
  animation: portal-flash 0.55s ease;
}

.portal-gate--boot {
  animation: portal-gate-boot 1.05s cubic-bezier(0.34, 1.15, 0.64, 1);
}

.portal-gate--boot .portal-whirl-scene { animation-duration: 2s !important; }
.portal-gate--boot .portal-whirl--base { animation-duration: 3.5s !important; }
.portal-gate--boot .portal-whirl--inner { animation-duration: 2s !important; }
.portal-gate--boot .portal-whirl-glow { animation-duration: 0.65s !important; }
.portal-gate--boot .portal-whirl-shimmer { animation-duration: 1.2s !important; }
.portal-gate--boot .portal-whirl-core { animation-duration: 0.5s !important; }
.portal-gate--boot .portal-whirl-spark { animation-duration: 0.85s !important; }
.portal-gate--boot .portal-whirl-star { animation-duration: 0.75s !important; }

.portal-trigger--boot {
  animation: portal-trigger-boot 1.05s cubic-bezier(0.34, 1.15, 0.64, 1);
}

@keyframes portal-gate-boot {
  0% {
    transform: scale(1);
    filter:
      drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55))
      drop-shadow(0 0 12px rgba(255, 255, 255, 0.22));
  }
  22% {
    transform: scale(1.16);
    filter:
      drop-shadow(0 0 24px rgba(255, 255, 255, 0.95))
      drop-shadow(0 0 42px rgba(230, 240, 255, 0.65))
      brightness(1.3);
  }
  55% {
    transform: scale(1.08);
    filter:
      drop-shadow(0 0 18px rgba(255, 255, 255, 0.75))
      drop-shadow(0 0 32px rgba(220, 235, 255, 0.45))
      brightness(1.15);
  }
  100% {
    transform: scale(1);
    filter:
      drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55))
      drop-shadow(0 0 20px rgba(255, 255, 255, 0.75))
      drop-shadow(0 0 36px rgba(220, 235, 255, 0.5));
  }
}

@keyframes portal-trigger-boot {
  0%, 100% { transform: scale(1); }
  22% { transform: scale(1.14); }
  55% { transform: scale(1.06); }
}

@keyframes portal-whirl-scene-motion {
  0%, 100% { transform: rotateX(10deg) rotateY(-4deg) scale(1); }
  50% { transform: rotateX(8deg) rotateY(4deg) scale(1.04); }
}

@keyframes portal-whirl-spin {
  to { transform: rotate(360deg); }
}

@keyframes portal-whirl-spin-reverse {
  to { transform: rotate(-360deg); }
}

@keyframes portal-whirl-glow-pulse {
  0%, 100% { opacity: 0.65; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.06); }
}

@keyframes portal-whirl-shimmer-spin {
  to { transform: rotate(360deg); }
}

@keyframes portal-whirl-ring-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}

@keyframes portal-whirl-core-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.95),
      0 0 14px 4px rgba(0, 0, 0, 0.9),
      0 0 5px rgba(255, 255, 255, 0.12);
  }
  50% {
    transform: scale(1.1);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.95),
      0 0 18px 6px rgba(0, 0, 0, 0.95),
      0 0 10px rgba(255, 255, 255, 0.28);
  }
}

@keyframes portal-whirl-star-twinkle {
  0%, 100% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(0.75);
    filter: blur(0);
  }
  45% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
    filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px rgba(200, 230, 255, 0.9));
  }
  70% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

@keyframes portal-whirl-spark-orbit {
  0% {
    transform: rotate(0deg) translateX(30px) rotate(0deg) scale(1);
    opacity: 0.2;
  }
  30% { opacity: 1; }
  100% {
    transform: rotate(540deg) translateX(3px) rotate(-540deg) scale(0.1);
    opacity: 0;
  }
}

@keyframes portal-whirl-outer-flash {
  0%, 100% {
    opacity: 0.42;
    transform: scale(0.94);
  }

  50% {
    opacity: 1;
    transform: scale(1.14);
  }
}

@keyframes portal-whirl-outer-glow {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.96);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes portal-whirl-outer-ring {
  0% {
    opacity: 0.85;
    transform: scale(0.88);
  }

  70% {
    opacity: 0.15;
    transform: scale(1.28);
  }

  100% {
    opacity: 0;
    transform: scale(1.36);
  }
}

@keyframes portal-flash {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.9); }
  100% { filter: brightness(1); }
}

.portal-caption {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.45),
    0 0 16px rgba(200, 210, 230, 0.3),
    0 1px 4px rgba(0, 0, 0, 0.5);
  animation: portal-caption-glow 3s ease-in-out infinite;
}

@keyframes portal-caption-glow {
  0%, 100% { opacity: 0.88; }
  50% { opacity: 1; }
}

.portal-panel {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  width: var(--side-panel-width);
  max-width: var(--side-panel-width);
  max-height: min(440px, calc(100vh - 200px));
  padding: 14px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  border: 2px solid #8b6cf8;
  box-shadow: 0 10px 28px rgba(60, 40, 120, 0.22);
  overflow-x: hidden;
  overflow-y: auto;
}

.portal-panel-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(120, 0, 255, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(0, 220, 255, 0.16) 0%, transparent 48%);
  opacity: 0;
  z-index: 0;
}

.portal-panel-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #00e5ff, 0 0 10px rgba(180, 60, 255, 0.8);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
}

.portal-panel-spark--1 {
  top: 12px;
  right: 18px;
}

.portal-panel-spark--2 {
  top: 28px;
  right: 36px;
  width: 2px;
  height: 2px;
}

.portal-panel > :not(.portal-panel-glow):not(.portal-panel-spark) {
  position: relative;
  z-index: 1;
}

.portal-panel--animating {
  animation: portal-panel-in 0.42s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.portal-panel--animating .portal-panel-glow {
  animation: portal-panel-glow 2.2s ease-in-out infinite;
}

.portal-panel--animating .portal-panel-spark {
  animation: portal-panel-spark 2.4s ease-in-out infinite;
}

.portal-panel--animating .portal-panel-spark--2 {
  animation-delay: -1.1s;
}

.portal-panel--animating .portal-panel-title {
  animation: portal-panel-fade-in 0.35s ease 0.06s backwards;
}

.portal-panel--animating .portal-panel-desc {
  animation: portal-panel-fade-in 0.35s ease 0.11s backwards;
}

.portal-panel--animating .portal-share {
  animation: portal-panel-fade-in 0.35s ease 0.16s backwards;
}

.portal-panel--animating .portal-panel-hint {
  animation: portal-panel-fade-in 0.35s ease 0.22s backwards;
}

.portal-panel--animating .portal-log:not([hidden]) {
  animation: portal-panel-fade-in 0.38s ease 0.28s backwards;
}

.portal-panel--animating .portal-log li {
  animation: portal-log-item-in 0.32s ease backwards;
}

.portal-panel--animating .portal-log li:nth-child(1) { animation-delay: 0.34s; }
.portal-panel--animating .portal-log li:nth-child(2) { animation-delay: 0.4s; }
.portal-panel--animating .portal-log li:nth-child(3) { animation-delay: 0.46s; }
.portal-panel--animating .portal-log li:nth-child(4) { animation-delay: 0.52s; }
.portal-panel--animating .portal-log li:nth-child(5) { animation-delay: 0.58s; }

@keyframes portal-panel-in {
  from {
    opacity: 0;
    transform: translateX(-18px) scale(0.94);
    box-shadow: 0 4px 12px rgba(120, 0, 255, 0.15);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    box-shadow:
      0 10px 28px rgba(60, 40, 120, 0.22),
      0 0 22px rgba(120, 0, 255, 0.2),
      0 0 14px rgba(0, 220, 255, 0.12);
  }
}

@keyframes portal-panel-glow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes portal-panel-spark {
  0%, 100% {
    opacity: 0;
    transform: translateY(0) scale(0.8);
  }
  20% { opacity: 1; }
  80% { opacity: 0.7; }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(0.4);
  }
}

@keyframes portal-panel-fade-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes portal-log-item-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.chest-panel {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: min(68vh, calc(100vh - var(--horizon) - 12px));
  padding: 0;
  border-radius: var(--ui-panel-radius);
  background: var(--ui-surface);
  backdrop-filter: var(--ui-panel-blur);
  -webkit-backdrop-filter: var(--ui-panel-blur);
  border: var(--ui-panel-border);
  box-shadow: var(--ui-panel-shadow);
  overflow: hidden;
  z-index: 20;
  display: flex;
  flex-direction: column;
}

.chest-panel-glow {
  display: none;
}

.chest-panel > :not(.chest-panel-glow) {
  position: relative;
  z-index: 1;
}

.chest-panel--animating {
  animation: chest-panel-in 0.42s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.chest-panel--animating .chest-panel-glow {
  animation: chest-panel-glow 2s ease-in-out infinite;
}

.chest-panel--animating .chest-panel-title {
  animation: chest-panel-fade-in 0.35s ease 0.06s backwards;
}

.chest-panel--animating .chest-panel-total {
  animation: chest-panel-fade-in 0.35s ease 0.1s backwards;
}

.chest-panel--animating .chest-panel-empty:not([hidden]) {
  animation: chest-panel-fade-in 0.35s ease 0.14s backwards;
}

.chest-panel--animating .recycle-item:not([hidden]) {
  animation: none;
}

@keyframes chest-panel-in {
  from {
    opacity: 0;
    transform: translateX(18px) scale(0.94);
    box-shadow: 0 4px 12px rgba(255, 180, 60, 0.15);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    box-shadow:
      0 10px 28px rgba(0, 0, 0, 0.18),
      0 0 20px rgba(255, 190, 60, 0.22);
  }
}

@keyframes chest-panel-glow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes chest-panel-fade-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes chest-recycle-item-in {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes chest-panel-empty-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes chest-panel-empty-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

@keyframes side-panel-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.portal-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.portal-panel-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #3d2f78;
  margin: 0;
  flex: 1;
  min-width: 0;
}

.portal-visitors-btn {
  flex-shrink: 0;
  border: 1px solid rgba(139, 108, 248, 0.55);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #5a45a0;
  background: linear-gradient(145deg, #f3edff 0%, #e8deff 100%);
  cursor: pointer;
}

.portal-visitors-btn:hover {
  filter: brightness(0.98);
}

.portal-visitors-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 10px;
  background: rgba(20, 12, 48, 0.42);
  border-radius: inherit;
}

.portal-visitors-overlay[hidden] {
  display: none !important;
}

.portal-visitors-sheet {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  border: 1.5px solid rgba(139, 108, 248, 0.45);
  box-shadow: 0 8px 20px rgba(60, 40, 120, 0.18);
  overflow: hidden;
}

.portal-visitors-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.portal-visitors-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
  color: #3d2f78;
}

.portal-visitors-sub {
  margin: 2px 0 0;
  font-size: 0.68rem;
  color: #8a7ab8;
}

.portal-visitors-close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: rgba(90, 69, 160, 0.08);
  color: #3d2f78;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.portal-visitors-summary {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f5f0ff;
  border: 1px solid rgba(139, 108, 248, 0.2);
  font-size: 0.72rem;
  color: #5a45a0;
}

.portal-visitors-empty {
  margin: 18px 0 0;
  text-align: center;
  font-size: 0.74rem;
  color: #8a7ab8;
}

.portal-visitors-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.portal-visitors-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(139, 108, 248, 0.16);
}

.portal-visitors-list .pv-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #3d2f78;
}

.portal-visitors-list .pv-meta {
  grid-column: 1 / -1;
  font-size: 0.66rem;
  color: #8a7ab8;
}

.portal-visitors-list .pv-status {
  font-size: 0.68rem;
  font-weight: 700;
  color: #5a45a0;
  text-align: right;
}

.portal-visitors-list .pv-status--active {
  color: #15803d;
}

.portal-visitors-list .pv-status--caught {
  color: #b45309;
}

.portal-panel-desc {
  font-size: 0.78rem;
  color: #5a4a88;
  line-height: 1.45;
  margin-bottom: 10px;
}

.portal-inbox {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 12px;
  background: linear-gradient(165deg, #faf5ff 0%, #f0ebff 55%, #ebe4ff 100%);
  border: 1px solid rgba(170, 140, 240, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.portal-inbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #5a45a0;
  margin: 0 0 8px;
  letter-spacing: 0.03em;
}

.portal-inbox-label::before {
  content: "✨";
  font-size: 0.82rem;
}

.portal-inbox-empty {
  font-size: 0.68rem;
  color: #8a7ab8;
  text-align: center;
  padding: 8px 0 4px;
}

.portal-inbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.portal-inbox-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 8px 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(190, 170, 255, 0.45);
  box-shadow:
    0 4px 14px rgba(80, 50, 160, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.portal-inbox-item--enter {
  animation: portal-gift-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes portal-gift-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.portal-inbox-item-icon {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.45rem;
  line-height: 1;
  background: linear-gradient(145deg, #fff 0%, #f3edff 100%);
  border: 1px solid rgba(190, 170, 255, 0.4);
  box-shadow: 0 2px 8px rgba(100, 70, 180, 0.1);
}

.portal-inbox-item-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portal-inbox-item-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
  color: #3d2f78;
  line-height: 1.25;
}

.portal-inbox-item-meta {
  margin: 0;
  font-size: 0.66rem;
  color: #6a5aaa;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-inbox-item-expiry {
  margin: 2px 0 0;
  font-size: 0.6rem;
  color: #9a88c8;
  line-height: 1.3;
}

.portal-inbox-item-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.portal-inbox-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.18s ease,
    filter 0.15s ease;
}

.portal-inbox-btn-icon {
  font-size: 0.82rem;
  line-height: 1;
}

.portal-inbox-btn-text {
  line-height: 1.2;
}

.portal-inbox-btn--claim {
  color: #fff;
  background: linear-gradient(145deg, #a888ff 0%, #7b5fe8 52%, #6a4fd8 100%);
  border-color: rgba(120, 90, 220, 0.35);
  box-shadow: 0 3px 10px rgba(100, 70, 200, 0.28);
}

.portal-inbox-btn--friend {
  color: #1f5a32;
  background: linear-gradient(145deg, #eafff0 0%, #d4f5de 55%, #c0ecd0 100%);
  border-color: rgba(90, 180, 120, 0.45);
  box-shadow: 0 2px 8px rgba(60, 140, 90, 0.12);
}

.portal-inbox-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.portal-inbox-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.portal-inbox-btn:disabled {
  opacity: 0.62;
  cursor: wait;
}

.portal-inbox-btn--loading .portal-inbox-btn-text::after {
  content: "…";
}

.portal-panel--animating .portal-inbox:not([hidden]) {
  animation: portal-panel-fade-in 0.35s ease 0.14s backwards;
}

.portal-outbox {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff8ec 0%, #fff2dc 100%);
  border: 1px solid #e8c878;
}

.portal-outbox-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #8a6020;
  margin-bottom: 6px;
}

.portal-outbox-empty {
  font-size: 0.68rem;
  color: #a08040;
  text-align: center;
  padding: 4px 0;
}

.portal-outbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.68rem;
  color: #6a5020;
  line-height: 1.45;
}

.portal-outbox-list li + li {
  margin-top: 4px;
}

.portal-panel--animating .portal-outbox:not([hidden]) {
  animation: portal-panel-fade-in 0.35s ease 0.14s backwards;
}

.portal-share-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  color: #6a5aaa;
  margin-bottom: 4px;
}

.portal-share-row {
  display: flex;
  gap: 6px;
}

.portal-copy-btn {
  flex-shrink: 0;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(180deg, #8b6cf8 0%, #6b4fd8 100%);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease;
}

.portal-copy-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(120, 0, 255, 0.35);
}

.portal-link-input {
  flex: 1;
  min-width: 0;
  font-size: 0.68rem;
  padding: 6px 8px;
  border: 1px solid #c8b8f8;
  border-radius: 8px;
  background: #faf8ff;
  color: #3d2f78;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.portal-link-input:focus {
  outline: none;
  border-color: #8b6cf8;
  box-shadow: 0 0 0 3px rgba(139, 108, 248, 0.22);
}

.portal-panel-hint {
  margin-top: 8px;
  font-size: 0.65rem;
  color: #8a7ab8;
  line-height: 1.4;
}

.portal-log {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f5f0ff;
  list-style: none;
  font-size: 0.68rem;
  color: #5a4a88;
  line-height: 1.5;
}

.portal-log li + li {
  margin-top: 4px;
}

.mode-visitor {
  padding: 0;
}

.mode-visitor .weather-bar,
.mode-visitor .account-bar,
.mode-visitor .seed-bar,
.mode-visitor .zone-seed-bank,
.mode-visitor .footer,
.mode-visitor .game-toast {
  display: none !important;
}

.mode-visitor .sky-stage {
  height: auto;
  min-height: 72px;
  padding-bottom: 6px;
}

.mode-visitor .game {
  width: min(calc(100vw - 48px), var(--garden-main-width));
  gap: 8px;
}

.mode-visitor .portal-zone {
  top: var(--weather-bar-offset);
}

.mode-visitor .farm-stage,
.mode-visitor .garden-area {
  top: 72px;
  bottom: 0;
}

.mode-visitor {
  --farm-fence-side-top: 72px;
  --farm-fence-side-bottom: calc(var(--farm-fence-bottom-h) + var(--farm-bottom-reserve));
}

.mode-visitor .garden-frame {
  margin: 0;
}

.mode-visitor .garden-grid {
  touch-action: manipulation;
}

.harvest-fly--steal {
  font-size: 1.8rem;
  filter: drop-shadow(0 0 6px rgba(139, 108, 248, 0.8));
}

@media (prefers-reduced-motion: reduce) {
  .portal-whirl-scene,
  .portal-whirl--base,
  .portal-whirl--inner,
  .portal-whirl-glow,
  .portal-whirl-shimmer,
  .portal-whirl-ring,
  .portal-whirl-core,
  .portal-whirl-spark,
  .portal-whirl-star,
  .portal-whirl-outer-flash,
  .portal-whirl-outer-flash::before,
  .portal-whirl-outer-flash::after,
  .portal-caption,
  .portal-gate--open .portal-whirl-scene,
  .portal-gate--open .portal-whirl--base,
  .portal-gate--open .portal-whirl--inner,
  .portal-gate--open .portal-whirl-glow,
  .portal-gate--open .portal-whirl-shimmer,
  .portal-gate--open .portal-whirl-ring,
  .portal-gate--open .portal-whirl-core,
  .portal-gate--open .portal-whirl-spark,
  .portal-gate--open .portal-whirl-star,
  .chest,
  .warehouse-icon__glow,
  .chest-caption,
  .chest--open .warehouse-icon__glow,
  .chest--open .warehouse-door,
  .chest--open .warehouse-rice-glow,
  .chest--open .warehouse-rice-spark,
  .chest--open {
    animation: none;
  }

  .warehouse-door {
    transition: none;
  }

  .chest--open .warehouse-door {
    transform: translateY(-18px);
    opacity: 0.12;
  }

  .chest--open .warehouse-rice-glow {
    opacity: 0.85;
    transform: scale(1);
  }

  .chest--open .warehouse-rice-spark {
    opacity: 0.7;
    transform: scale(1);
  }

  .chest-panel--animating,
  .chest-panel--animating .chest-panel-glow,
  .chest-panel--animating .chest-panel-title,
  .chest-panel--animating .chest-panel-total,
  .chest-panel--animating .chest-panel-empty,
  .chest-panel--animating .recycle-item,
  .side-panel-slot--warehouse .chest-panel--animating {
    animation: none !important;
  }

  .chest-panel .recycle-item:not([hidden]):hover {
    transform: none;
  }

  .portal-panel--animating,
  .portal-panel--animating .portal-panel-glow,
  .portal-panel--animating .portal-panel-spark,
  .portal-panel--animating .portal-panel-title,
  .portal-panel--animating .portal-panel-desc,
  .portal-panel--animating .portal-share,
  .portal-panel--animating .portal-panel-hint,
  .portal-panel--animating .portal-log,
  .portal-panel--animating .portal-log li,
  .portal-inbox-item--enter {
    animation: none !important;
  }

  .portal-gate--boot,
  .portal-trigger--boot,
  .water-can-swing,
  .water-can-pendulum {
    animation: none !important;
  }

  .cursor-water-can--pouring .cursor-water-can-inner {
    animation: none !important;
    transform: rotate(45deg) !important;
  }

  .cursor-sickle--swinging .cursor-sickle-inner {
    animation: none !important;
    transform: rotate(42deg) scale(1) !important;
  }

  .garden-coin-chip--shake,
  .garden-coin-icon--pop,
  .garden-coin-balance--gain,
  .recycle-action--sent,
  .recycle-action--exchanged,
  .garden-coin-gain-pop {
    animation: none !important;
  }
}

.chest-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 2px 2px;
  border: none;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.chest-trigger:hover {
  transform: translateY(-2px) scale(1.04);
}

.chest-trigger:active {
  transform: translateY(0) scale(0.98);
}

.chest-trigger[aria-expanded="true"] {
  transform: scale(1.06);
}

.chest-trigger:hover .chest {
  filter:
    drop-shadow(0 0 10px rgba(140, 210, 110, 0.55))
    drop-shadow(0 0 18px rgba(90, 160, 70, 0.32));
}

.chest-trigger[aria-expanded="true"] .chest {
  filter:
    drop-shadow(0 0 14px rgba(160, 230, 120, 0.7))
    drop-shadow(0 0 24px rgba(100, 180, 80, 0.42));
}

.chest-caption {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1;
  text-shadow:
    0 0 8px rgba(140, 210, 110, 0.5),
    0 0 14px rgba(90, 160, 70, 0.32),
    0 1px 4px rgba(0, 0, 0, 0.5);
  animation: chest-caption-glow 3s ease-in-out infinite;
}

@keyframes chest-caption-glow {
  0%, 100% { opacity: 0.88; }
  50% { opacity: 1; }
}

.chest.warehouse-icon {
  position: relative;
  width: 115px;
  height: 80px;
  animation: chest-idle-bob 3.2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(120, 180, 100, 0.32));
  transition: filter 0.25s ease;
}

.warehouse-icon__glow {
  position: absolute;
  inset: -16px -14px -10px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 65%,
    rgba(160, 220, 140, 0.28) 0%,
    rgba(100, 160, 80, 0.1) 48%,
    transparent 74%
  );
  animation: warehouse-glow-pulse 2.6s ease-in-out infinite;
  pointer-events: none;
}

.warehouse-icon__art {
  display: block;
  width: 100%;
  height: 100%;
}

.warehouse-interior,
.warehouse-floor,
.warehouse-rice {
  opacity: 0;
  transition: opacity 0.32s ease;
}

.chest--open .warehouse-interior,
.chest--open .warehouse-floor,
.chest--open .warehouse-rice {
  opacity: 1;
}

.warehouse-rice-cone {
  filter: drop-shadow(0 0 3px rgba(255, 220, 100, 0.7));
}

.warehouse-rice-glow {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.35s ease 0.08s;
}

.chest--open .warehouse-rice-glow {
  opacity: 1;
  animation: warehouse-rice-gold-pulse 1.7s ease-in-out infinite;
}

.warehouse-rice-spark {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.chest--open .warehouse-rice-spark {
  opacity: 1;
  animation: warehouse-rice-sparkle 1.5s ease-in-out infinite;
}

.chest--open .warehouse-rice-spark--1 { animation-delay: 0s; }
.chest--open .warehouse-rice-spark--2 { animation-delay: 0.35s; }
.chest--open .warehouse-rice-spark--3 { animation-delay: 0.7s; }
.chest--open .warehouse-rice-spark--4 { animation-delay: 1.05s; }

.chest--open .warehouse-icon__glow {
  background: radial-gradient(
    circle at 50% 68%,
    rgba(255, 220, 90, 0.42) 0%,
    rgba(255, 180, 40, 0.16) 50%,
    transparent 74%
  );
  animation: warehouse-gold-glow-pulse 1.6s ease-in-out infinite;
  animation-duration: 1.3s;
}

.warehouse-door {
  transition: transform 0.38s cubic-bezier(0.34, 1.1, 0.5, 1), opacity 0.3s ease;
  transform-origin: center bottom;
}

.chest--open .warehouse-door {
  transform: translateY(-18px);
  opacity: 0.12;
}

.chest-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  right: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff6b4a 0%, #e74c3c 100%);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 8px rgba(255, 80, 60, 0.5);
  z-index: 5;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.chest-badge--visible {
  opacity: 1;
  transform: scale(1);
}

.chest--open {
  animation-duration: 1.6s;
  filter: drop-shadow(0 0 10px rgba(255, 210, 80, 0.45));
}

@keyframes warehouse-rice-gold-pulse {
  0%, 100% { opacity: 0.6; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

@keyframes warehouse-rice-sparkle {
  0%, 100% { opacity: 0.35; transform: scale(0.55); }
  45%, 55% { opacity: 1; transform: scale(1.2); }
}

@keyframes warehouse-gold-glow-pulse {
  0%, 100% { transform: scale(0.94); opacity: 0.72; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes chest-idle-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes warehouse-glow-pulse {
  0%, 100% { transform: scale(0.94); opacity: 0.68; }
  50% { transform: scale(1.06); opacity: 1; }
}

.portal-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.portal-panel-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #3d2f78;
  margin: 0;
  flex: 1;
  min-width: 0;
}

.portal-visitors-btn {
  flex-shrink: 0;
  border: 1px solid rgba(139, 108, 248, 0.55);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #5a45a0;
  background: linear-gradient(145deg, #f3edff 0%, #e8deff 100%);
  cursor: pointer;
}

.portal-visitors-btn:hover {
  filter: brightness(0.98);
}

.portal-visitors-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 10px;
  background: rgba(20, 12, 48, 0.42);
  border-radius: inherit;
}

.portal-visitors-overlay[hidden] {
  display: none !important;
}

.portal-visitors-sheet {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  border: 1.5px solid rgba(139, 108, 248, 0.45);
  box-shadow: 0 8px 20px rgba(60, 40, 120, 0.18);
  overflow: hidden;
}

.portal-visitors-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.portal-visitors-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
  color: #3d2f78;
}

.portal-visitors-sub {
  margin: 2px 0 0;
  font-size: 0.68rem;
  color: #8a7ab8;
}

.portal-visitors-close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: rgba(90, 69, 160, 0.08);
  color: #3d2f78;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.portal-visitors-summary {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f5f0ff;
  border: 1px solid rgba(139, 108, 248, 0.2);
  font-size: 0.72rem;
  color: #5a45a0;
}

.portal-visitors-empty {
  margin: 18px 0 0;
  text-align: center;
  font-size: 0.74rem;
  color: #8a7ab8;
}

.portal-visitors-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.portal-visitors-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(139, 108, 248, 0.16);
}

.portal-visitors-list .pv-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #3d2f78;
}

.portal-visitors-list .pv-meta {
  grid-column: 1 / -1;
  font-size: 0.66rem;
  color: #8a7ab8;
}

.portal-visitors-list .pv-status {
  font-size: 0.68rem;
  font-weight: 700;
  color: #5a45a0;
  text-align: right;
}

.portal-visitors-list .pv-status--active {
  color: #15803d;
}

.portal-visitors-list .pv-status--caught {
  color: #b45309;
}

.portal-panel-desc {
  font-size: 0.78rem;
  color: #5a4a88;
  line-height: 1.45;
  margin-bottom: 10px;
}

.portal-inbox {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 12px;
  background: linear-gradient(165deg, #faf5ff 0%, #f0ebff 55%, #ebe4ff 100%);
  border: 1px solid rgba(170, 140, 240, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.portal-inbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #5a45a0;
  margin: 0 0 8px;
  letter-spacing: 0.03em;
}

.portal-inbox-label::before {
  content: "✨";
  font-size: 0.82rem;
}

.portal-inbox-empty {
  font-size: 0.68rem;
  color: #8a7ab8;
  text-align: center;
  padding: 8px 0 4px;
}

.portal-inbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.portal-inbox-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 8px 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(190, 170, 255, 0.45);
  box-shadow:
    0 4px 14px rgba(80, 50, 160, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.portal-inbox-item--enter {
  animation: portal-gift-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes portal-gift-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.portal-inbox-item-icon {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.45rem;
  line-height: 1;
  background: linear-gradient(145deg, #fff 0%, #f3edff 100%);
  border: 1px solid rgba(190, 170, 255, 0.4);
  box-shadow: 0 2px 8px rgba(100, 70, 180, 0.1);
}

.portal-inbox-item-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portal-inbox-item-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
  color: #3d2f78;
  line-height: 1.25;
}

.portal-inbox-item-meta {
  margin: 0;
  font-size: 0.66rem;
  color: #6a5aaa;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-inbox-item-expiry {
  margin: 2px 0 0;
  font-size: 0.6rem;
  color: #9a88c8;
  line-height: 1.3;
}

.portal-inbox-item-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.portal-inbox-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.18s ease,
    filter 0.15s ease;
}

.portal-inbox-btn-icon {
  font-size: 0.82rem;
  line-height: 1;
}

.portal-inbox-btn-text {
  line-height: 1.2;
}

.portal-inbox-btn--claim {
  color: #fff;
  background: linear-gradient(145deg, #a888ff 0%, #7b5fe8 52%, #6a4fd8 100%);
  border-color: rgba(120, 90, 220, 0.35);
  box-shadow: 0 3px 10px rgba(100, 70, 200, 0.28);
}

.portal-inbox-btn--friend {
  color: #1f5a32;
  background: linear-gradient(145deg, #eafff0 0%, #d4f5de 55%, #c0ecd0 100%);
  border-color: rgba(90, 180, 120, 0.45);
  box-shadow: 0 2px 8px rgba(60, 140, 90, 0.12);
}

.portal-inbox-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.portal-inbox-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.portal-inbox-btn:disabled {
  opacity: 0.62;
  cursor: wait;
}

.portal-inbox-btn--loading .portal-inbox-btn-text::after {
  content: "…";
}

.portal-panel--animating .portal-inbox:not([hidden]) {
  animation: portal-panel-fade-in 0.35s ease 0.14s backwards;
}

.portal-outbox {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff8ec 0%, #fff2dc 100%);
  border: 1px solid #e8c878;
}

.portal-outbox-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #8a6020;
  margin-bottom: 6px;
}

.portal-outbox-empty {
  font-size: 0.68rem;
  color: #a08040;
  text-align: center;
  padding: 4px 0;
}

.portal-outbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.68rem;
  color: #6a5020;
  line-height: 1.45;
}

.portal-outbox-list li + li {
  margin-top: 4px;
}

.portal-panel--animating .portal-outbox:not([hidden]) {
  animation: portal-panel-fade-in 0.35s ease 0.14s backwards;
}

.portal-share-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  color: #6a5aaa;
  margin-bottom: 4px;
}

.portal-share-row {
  display: flex;
  gap: 6px;
}

.portal-copy-btn {
  flex-shrink: 0;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(180deg, #8b6cf8 0%, #6b4fd8 100%);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease;
}

.portal-copy-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(120, 0, 255, 0.35);
}

.portal-link-input {
  flex: 1;
  min-width: 0;
  font-size: 0.68rem;
  padding: 6px 8px;
  border: 1px solid #c8b8f8;
  border-radius: 8px;
  background: #faf8ff;
  color: #3d2f78;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.portal-link-input:focus {
  outline: none;
  border-color: #8b6cf8;
  box-shadow: 0 0 0 3px rgba(139, 108, 248, 0.22);
}

.portal-panel-hint {
  margin-top: 8px;
  font-size: 0.65rem;
  color: #8a7ab8;
  line-height: 1.4;
}

.portal-log {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f5f0ff;
  list-style: none;
  font-size: 0.68rem;
  color: #5a4a88;
  line-height: 1.5;
}

.portal-log li + li {
  margin-top: 4px;
}

.mode-visitor {
  padding: 0;
}

.mode-visitor .weather-bar,
.mode-visitor .account-bar,
.mode-visitor .seed-bar,
.mode-visitor .zone-seed-bank,
.mode-visitor .footer,
.mode-visitor .game-toast {
  display: none !important;
}

.mode-visitor .sky-stage {
  height: auto;
  min-height: 72px;
  padding-bottom: 6px;
}

.mode-visitor .game {
  width: min(calc(100vw - 48px), var(--garden-main-width));
  gap: 8px;
}

.mode-visitor .portal-zone {
  top: var(--weather-bar-offset);
}

.mode-visitor .farm-stage,
.mode-visitor .garden-area {
  top: 72px;
  bottom: 0;
}

.mode-visitor {
  --farm-fence-side-top: 72px;
  --farm-fence-side-bottom: calc(var(--farm-fence-bottom-h) + var(--farm-bottom-reserve));
}

.mode-visitor .garden-frame {
  margin: 0;
}

.mode-visitor .garden-grid {
  touch-action: manipulation;
}

.harvest-fly--steal {
  font-size: 1.8rem;
  filter: drop-shadow(0 0 6px rgba(139, 108, 248, 0.8));
}

.chest-panel-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  color: #3d2e1c;
  letter-spacing: 0.02em;
}

.chest-panel-head {
  flex-shrink: 0;
  margin: 0;
  padding: 10px 12px 9px;
  background: linear-gradient(180deg, #faf7f2 0%, #f3ece2 100%);
  border-bottom: 1px solid rgba(141, 110, 66, 0.18);
}

.chest-panel-head-main {
  min-width: 0;
}

.chest-panel-total {
  margin: 3px 0 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  color: #8a7358;
  white-space: nowrap;
}

.chest-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
}

.chest-panel-empty {
  margin: 0;
  padding: 10px 12px 2px;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.45;
  color: #9ca3af;
  text-align: center;
}

.chest-panel .recycle-bin {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
  padding: 7px 7px 9px;
}

.chest-panel .warehouse-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  flex-shrink: 0;
}

.warehouse-zone-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.warehouse-zone-tab {
  min-height: 28px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid rgba(106, 143, 60, 0.18);
  background: #f3f4f6;
  color: #6b7280;
  font-size: 0.62rem;
  font-weight: 700;
  cursor: pointer;
}

.warehouse-zone-tab.is-active {
  background: #eef8e4;
  border-color: rgba(106, 171, 66, 0.45);
  color: #2a4020;
}

.chest-panel .warehouse-toolbar-btn--feed {
  color: #fff;
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  border-color: rgba(217, 119, 6, 0.45);
  box-shadow: 0 1px 3px rgba(180, 83, 9, 0.18);
}

.recycle-item-feed-badge {
  position: absolute;
  top: 3px;
  left: 4px;
  z-index: 1;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 4px;
  background: rgba(234, 179, 8, 0.22);
  color: #b45309;
  font-size: 0.48rem;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
}

.recycle-item-name {
  display: block;
  font-size: 0.52rem;
  font-weight: 600;
  color: #4a5a32;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chest-panel .warehouse-toolbar-btn {
  min-height: 32px;
  padding: 5px 6px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    opacity 0.15s ease,
    box-shadow 0.15s ease;
}

.chest-panel .warehouse-toolbar-btn:disabled {
  opacity: 0.38;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.chest-panel .warehouse-toolbar-btn--portal {
  color: #f8f7ff;
  background: linear-gradient(180deg, #8b87f0 0%, #6d68e8 100%);
  border-color: rgba(109, 104, 232, 0.45);
  box-shadow: 0 1px 3px rgba(88, 82, 190, 0.22);
}

.chest-panel .warehouse-toolbar-btn--coin {
  color: #6b4a12;
  background: linear-gradient(180deg, #fff6cf 0%, #f2d878 100%);
  border-color: rgba(196, 150, 58, 0.42);
  box-shadow: 0 1px 3px rgba(150, 110, 30, 0.14);
}

.chest-panel .warehouse-toolbar-btn:not(:disabled):hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.chest-panel .warehouse-toolbar-btn:not(:disabled):active {
  transform: translateY(0);
}

.chest-panel .warehouse-shelf {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.chest-panel .warehouse-shelf-board {
  height: 4px;
  margin: 0 2px;
  border-radius: 2px;
  background: #eceff1;
  box-shadow: none;
}

.chest-panel .warehouse-shelf-board--top {
  margin-bottom: 3px;
}

.chest-panel .warehouse-shelf-board--bottom {
  margin-top: 3px;
}

.chest-panel .warehouse-shelf-frame {
  padding: 7px 5px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  overflow: visible;
}

.chest-panel .warehouse-shelf-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 5px 4px;
  padding: 2px;
  overflow: visible;
}

.chest-panel .recycle-item--slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-height: 0;
  padding: 3px;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: #f8faf8;
  box-shadow: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: center;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    opacity 0.16s ease;
}

.chest-panel .recycle-item--slot:not(:disabled):not(.recycle-item--selected):hover {
  transform: translateY(-1px);
  border-color: rgba(0, 0, 0, 0.14);
  background: #f1f5f2;
}

.chest-panel .recycle-item--empty {
  opacity: 0.42;
  cursor: default;
  border-color: rgba(0, 0, 0, 0.05);
  background: #fafafa;
  box-shadow: none;
}

.chest-panel .recycle-item--selected {
  z-index: 2;
  opacity: 1;
  border: 2.5px solid #16a34a;
  background: linear-gradient(165deg, #ffffff 0%, #dcfce7 100%);
  box-shadow:
    0 0 0 3px rgba(34, 197, 94, 0.38),
    0 4px 14px rgba(34, 197, 94, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.95);
  transform: scale(1.1);
}

.chest-panel .recycle-item--selected::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 11px;
  border: 1px solid rgba(34, 197, 94, 0.22);
  pointer-events: none;
}

.chest-panel .recycle-item--selected::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow:
    0 0 0 2px #fff,
    0 0 6px rgba(34, 197, 94, 0.65);
}

.chest-panel .recycle-item-emoji {
  flex-shrink: 0;
  font-size: 1.1875rem;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.08));
}

.chest-panel .recycle-item--selected .recycle-item-emoji {
  transform: scale(1.08);
  filter: drop-shadow(0 2px 4px rgba(34, 197, 94, 0.22));
}

.chest-panel .recycle-item-count {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 1.15em;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 0.5625rem;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  background: linear-gradient(180deg, #5fa842 0%, #3f7a2c 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}

.chest-panel .recycle-item--selected .recycle-item-count {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  box-shadow: 0 1px 4px rgba(21, 128, 61, 0.35);
}

.chest-panel .recycle-item--empty .recycle-item-count {
  color: #a89888;
  background: rgba(130, 110, 90, 0.14);
  box-shadow: none;
}

.recycle-action--sent {
  animation: recycle-action-portal-burst 0.48s ease;
}

.recycle-action--exchanged {
  animation: recycle-action-coin-burst 0.48s ease;
}

.recycle-action--error {
  animation: recycle-action-error-shake 0.38s ease;
}

@keyframes recycle-action-portal-burst {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 1px 4px rgba(107, 79, 216, 0.25);
  }
  40% {
    transform: scale(0.94);
    box-shadow: 0 0 14px rgba(140, 100, 255, 0.65);
    filter: brightness(1.15);
  }
}

@keyframes recycle-action-coin-burst {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 1px 4px rgba(201, 160, 32, 0.25);
  }
  40% {
    transform: scale(0.94);
    box-shadow: 0 0 14px rgba(255, 220, 80, 0.75);
    filter: brightness(1.12);
  }
}

@keyframes recycle-action-error-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-3px);
  }
  40%,
  80% {
    transform: translateX(3px);
  }
}

.recycle-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.recycle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: 10px;
  border: 2px dashed #c4a060;
  background: #fffaf0;
  transition: opacity 0.2s ease;
}

.recycle-item[hidden] {
  display: none !important;
}

.recycle-item:not([hidden]) {
  border-style: solid;
  border-color: #6b9e4a;
  background: #f0fae8;
}

.recycle-item-emoji {
  font-size: 1.5rem;
  line-height: 1;
}

.recycle-item-name {
  font-size: 0.65rem;
  color: #5a3a20;
  font-weight: 600;
}

.recycle-item-count {
  font-size: 0.9rem;
  font-weight: 700;
  color: #4a7c23;
  min-width: 1.2em;
  text-align: center;
}

.garden-frame {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  background: transparent;
  border-radius: 0;
  padding: 2px var(--farm-fence-side-w) calc(var(--farm-fence-bottom-h) + 2px) var(--farm-fence-side-w);
  box-shadow: none;
}

.garden-zones {
  display: flex;
  flex: var(--garden-soil-flex, 2) 1 0;
  min-width: 0;
  min-height: 0;
  align-items: stretch;
  overflow: visible;
}

.garden-grass-span {
  flex: var(--garden-grass-flex, 1) 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  pointer-events: none;
}

.garden-zone-head--spacer .garden-zone-label {
  visibility: hidden;
}

.garden-zone {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 5;
  overflow: visible;
}

.garden-zone-content {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--farm-fence-bottom-h) + 2px);
  overflow: hidden;
}

.zone-fence-top {
  position: absolute;
  top: 0;
  left: calc(100% / var(--zone-cols, 6) * var(--zone-fence-gate-cols, 1));
  right: 0;
  height: var(--farm-fence-bottom-h);
  pointer-events: none;
  z-index: 0;
  background-color: transparent;
  background-image: url("assets/fence-ref-h.svg?v=fence6");
  background-size: var(--fence-tile-h) 100%;
  background-repeat: repeat-x;
  background-position: left top;
}

.zone-fence-top::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("assets/fence-bark-tile.jpg?v=fence8");
  background-size: var(--fence-bark-tile-w) var(--fence-bark-tile-h);
  background-repeat: repeat;
  opacity: var(--fence-bark-opacity);
  mix-blend-mode: soft-light;
  filter: contrast(1.16);
  -webkit-mask-image: url("assets/fence-ref-h.svg?v=fence6");
  mask-image: url("assets/fence-ref-h.svg?v=fence6");
  -webkit-mask-size: var(--fence-tile-h) 100%;
  mask-size: var(--fence-tile-h) 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: left top;
  mask-position: left top;
}

/* 草地区上栏向右延伸，并用链接件衔接外侧竖栏（左侧保留进入口） */
.garden-grass-span .zone-fence-top {
  right: calc(-1 * var(--farm-fence-side-w) - 1px);
}

.garden-grass-span .zone-fence-top::before {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  width: calc(var(--farm-fence-side-w) + 2px);
  height: 100%;
  z-index: 3;
  pointer-events: none;
  background-image: url("assets/fence-ref-h-rails.svg?v=fence6");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: right center;
  filter: contrast(1.06);
}

.garden-grass-span .zone-fence-top::after {
  -webkit-mask-image: url("assets/fence-ref-h.svg?v=fence6"), url("assets/fence-ref-h-rails.svg?v=fence6");
  mask-image: url("assets/fence-ref-h.svg?v=fence6"), url("assets/fence-ref-h-rails.svg?v=fence6");
  -webkit-mask-size: var(--fence-tile-h) 100%, calc(var(--farm-fence-side-w) + 2px) 100%;
  mask-size: var(--fence-tile-h) 100%, calc(var(--farm-fence-side-w) + 2px) 100%;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
  -webkit-mask-position: left top, right top;
  mask-position: left top, right top;
}

.garden-zone-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 2px 4px 4px;
  pointer-events: none;
  min-width: 0;
  min-height: 46px;
  height: 46px;
  box-sizing: border-box;
  position: relative;
  z-index: 20;
  overflow: visible;
  contain: layout style;
}

.garden-zone-label {
  flex: 0 0 auto;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 248, 230, 0.95);
  background: rgba(36, 22, 10, 0.52);
  border: 1px solid rgba(255, 220, 160, 0.22);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.garden-zone--vegetable .garden-zone-label {
  background: rgba(42, 78, 28, 0.62);
  border-color: rgba(180, 230, 140, 0.28);
}

.garden-zone--flower .garden-zone-label {
  background: rgba(92, 38, 72, 0.58);
  border-color: rgba(255, 190, 220, 0.28);
}

.zone-seed-bank {
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  pointer-events: auto;
  overflow: visible;
}

.zone-seed-bank--pop {
  animation: zone-seed-bank-in 0.48s cubic-bezier(0.34, 1.1, 0.64, 1) both;
}

@keyframes zone-seed-bank-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.zone-seed-bank-tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 248, 230, 0.95);
  background: rgba(36, 22, 10, 0.52);
  border: 1px solid rgba(255, 220, 160, 0.22);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.zone-seed-bank-tag::before {
  font-size: 0.72rem;
  line-height: 1;
  transform-origin: center bottom;
  animation: zone-seed-tag-sway 3.4s ease-in-out infinite;
}

.zone-seed-bank--vegetable .zone-seed-bank-tag::before {
  content: "🌱";
}

.zone-seed-bank--flower .zone-seed-bank-tag::before {
  content: "🌸";
}

@keyframes zone-seed-tag-sway {
  0%,
  100% {
    transform: rotate(-5deg) translateY(0);
  }

  50% {
    transform: rotate(5deg) translateY(-1px);
  }
}

.zone-seed-bank--vegetable .zone-seed-bank-tag {
  background: rgba(42, 78, 28, 0.62);
  border-color: rgba(180, 230, 140, 0.28);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.18),
    0 0 10px rgba(120, 190, 80, 0.12);
}

.zone-seed-bank--flower .zone-seed-bank-tag {
  background: rgba(92, 38, 72, 0.58);
  border-color: rgba(255, 190, 220, 0.28);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.18),
    0 0 10px rgba(230, 120, 180, 0.1);
}

.zone-seed-bank-grid {
  position: relative;
  flex: 0 0 auto;
  width: max-content;
  min-width: 0;
  min-height: 38px;
  height: 38px;
  display: grid;
  grid-template-columns: repeat(7, 34px);
  gap: 3px;
  padding: 3px 4px;
  border-radius: 9px;
  overflow: visible;
  isolation: isolate;
  align-items: center;
  contain: layout style;
}

.zone-seed-bank--vegetable .zone-seed-bank-grid {
  background: linear-gradient(
    180deg,
    rgba(52, 88, 36, 0.42) 0%,
    rgba(36, 62, 24, 0.52) 100%
  );
  border: 1px solid rgba(160, 210, 120, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 6px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.14);
}

.zone-seed-bank--flower .zone-seed-bank-grid {
  background: linear-gradient(
    180deg,
    rgba(110, 48, 82, 0.4) 0%,
    rgba(78, 32, 58, 0.5) 100%
  );
  border: 1px solid rgba(255, 180, 210, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 6px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.14);
}

.zone-seed-bank-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.45;
  background: linear-gradient(
    105deg,
    transparent 42%,
    rgba(255, 255, 255, 0.16) 50%,
    transparent 58%
  );
  background-size: 220% 100%;
  animation: zone-seed-tray-shimmer 5.5s ease-in-out infinite;
}

@keyframes zone-seed-tray-shimmer {
  0%,
  100% {
    background-position: 120% 0;
  }

  50% {
    background-position: -20% 0;
  }
}

.zone-seed-bank .seed-btn--zone {
  min-height: 34px;
  height: 34px;
  padding: 1px 0 0;
  border-radius: 7px;
  border-width: 1px;
  transform-origin: center center;
  transition:
    transform 0.26s cubic-bezier(0.34, 1.25, 0.64, 1),
    border-color 0.26s ease,
    background 0.26s ease,
    box-shadow 0.26s ease,
    filter 0.26s ease;
}

.zone-seed-bank--vegetable .seed-btn--zone {
  border-color: rgba(130, 180, 90, 0.5);
  background: linear-gradient(
    180deg,
    rgba(252, 255, 246, 0.97) 0%,
    rgba(228, 244, 208, 0.94) 100%
  );
  box-shadow:
    0 1px 4px rgba(40, 70, 24, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.zone-seed-bank--flower .seed-btn--zone {
  border-color: rgba(210, 130, 170, 0.48);
  background: linear-gradient(
    180deg,
    rgba(255, 250, 253, 0.97) 0%,
    rgba(252, 230, 242, 0.94) 100%
  );
  box-shadow:
    0 1px 4px rgba(90, 40, 60, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.seed-btn--zone.seed-btn--enter {
  animation: zone-seed-btn-enter 0.44s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

@keyframes zone-seed-btn-enter {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.82);
  }

  60% {
    opacity: 1;
    transform: translateY(2px) scale(1.04);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.zone-seed-bank .seed-btn--zone:not(.selected) .seed-emoji,
.zone-seed-bank .seed-btn--zone:not(.selected) .seed-icon-photo {
  animation: none;
}

@keyframes zone-seed-emoji-idle {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-2px) scale(1.05);
  }
}

.zone-seed-bank .seed-btn--zone:hover,
.zone-seed-bank .seed-btn--zone:focus-visible {
  transform: scale(1.06);
  filter: brightness(1.02);
  z-index: 40;
}

.zone-seed-bank--vegetable .seed-btn--zone:hover {
  border-color: rgba(100, 160, 60, 0.72);
  box-shadow:
    0 3px 8px rgba(60, 100, 30, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.zone-seed-bank--flower .seed-btn--zone:hover {
  border-color: rgba(200, 100, 150, 0.68);
  box-shadow:
    0 3px 8px rgba(100, 40, 70, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.zone-seed-bank .seed-btn--zone:hover .seed-emoji,
.zone-seed-bank .seed-btn--zone:focus-visible .seed-emoji,
.zone-seed-bank .seed-btn--zone:hover .seed-icon-photo,
.zone-seed-bank .seed-btn--zone:focus-visible .seed-icon-photo {
  transform: scale(1.08) translateY(-1px);
  animation: none;
}

.zone-seed-bank .seed-btn--zone:active {
  transform: translateY(0) scale(0.98);
}

.zone-seed-bank .seed-btn--zone.selected::before {
  opacity: 0.25;
}

.zone-seed-bank .seed-btn--zone.selected {
  transform: scale(1.16);
  z-index: 8;
  border-width: 2px;
  animation: none;
}

.zone-seed-bank--vegetable .seed-btn--zone.selected {
  border-color: #5a9430;
  background: linear-gradient(
    165deg,
    rgba(210, 248, 170, 0.98) 0%,
    rgba(168, 228, 118, 0.96) 48%,
    rgba(130, 198, 82, 0.94) 100%
  );
  box-shadow:
    0 4px 14px rgba(70, 120, 40, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -2px 6px rgba(80, 130, 45, 0.12);
}

.zone-seed-bank--flower .seed-btn--zone.selected {
  border-color: #c45a8a;
  background: linear-gradient(
    165deg,
    rgba(255, 228, 242, 0.98) 0%,
    rgba(252, 190, 218, 0.96) 48%,
    rgba(240, 150, 190, 0.94) 100%
  );
  box-shadow:
    0 4px 14px rgba(140, 60, 90, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -2px 6px rgba(160, 70, 110, 0.1);
}

.zone-seed-bank .seed-btn--zone.selected::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 4px;
  height: 3px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.85;
}

.zone-seed-bank--vegetable .seed-btn--zone.selected::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), #3d7020, rgba(255, 255, 255, 0.5));
}

.zone-seed-bank--flower .seed-btn--zone.selected::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), #a83868, rgba(255, 255, 255, 0.5));
}

.zone-seed-bank .seed-btn--zone.selected .seed-emoji,
.zone-seed-bank .seed-btn--zone.selected .seed-icon-photo {
  display: block;
  transform: scale(1.18);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
  animation: none !important;
  transition: transform 0.26s cubic-bezier(0.34, 1.25, 0.64, 1);
}

.zone-seed-bank .seed-btn--zone.selected .seed-emoji {
  font-size: 1.08rem;
  transition: transform 0.26s cubic-bezier(0.34, 1.25, 0.64, 1), font-size 0.26s ease;
}

.zone-seed-bank .seed-btn--zone.selected:hover,
.zone-seed-bank .seed-btn--zone.selected:focus-visible {
  transform: scale(1.18);
}

.zone-seed-bank .seed-btn--zone.selected:hover .seed-emoji,
.zone-seed-bank .seed-btn--zone.selected:focus-visible .seed-emoji,
.zone-seed-bank .seed-btn--zone.selected:hover .seed-icon-photo,
.zone-seed-bank .seed-btn--zone.selected:focus-visible .seed-icon-photo {
  transform: scale(1.2);
}

.zone-seed-bank .seed-emoji {
  font-size: 0.86rem;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
  transition: transform 0.26s cubic-bezier(0.34, 1.25, 0.64, 1), font-size 0.26s ease;
}

.zone-seed-bank .seed-icon-photo {
  width: 30px;
  height: 34px;
}

.zone-seed-bank .seed-tooltip {
  bottom: auto;
  top: calc(100% + 7px);
  transform: translateX(-50%) translateY(-3px);
  z-index: 50;
  min-width: 148px;
  max-width: min(228px, 46vw);
  white-space: normal;
}

.zone-seed-bank .seed-tooltip-stages {
  line-height: 1.36;
  word-break: break-word;
}

.zone-seed-bank-grid .seed-btn:nth-child(-n+2) .seed-tooltip {
  left: 0;
  right: auto;
  transform: translateX(0) translateY(-3px);
}

.zone-seed-bank-grid .seed-btn:nth-child(-n+2):hover .seed-tooltip,
.zone-seed-bank-grid .seed-btn:nth-child(-n+2):focus-visible .seed-tooltip {
  transform: translateX(0) translateY(0);
}

.zone-seed-bank-grid .seed-btn:nth-child(-n+2) .seed-tooltip::after {
  left: 12px;
  transform: none;
}

.zone-seed-bank-grid .seed-btn:nth-last-child(-n+2) .seed-tooltip {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(-3px);
}

.zone-seed-bank-grid .seed-btn:nth-last-child(-n+2):hover .seed-tooltip,
.zone-seed-bank-grid .seed-btn:nth-last-child(-n+2):focus-visible .seed-tooltip {
  transform: translateX(0) translateY(0);
}

.zone-seed-bank-grid .seed-btn:nth-last-child(-n+2) .seed-tooltip::after {
  left: auto;
  right: 12px;
  transform: none;
}

.zone-seed-bank .seed-tooltip::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: rgba(32, 24, 16, 0.94);
}

.zone-seed-bank .seed-btn:hover .seed-tooltip,
.zone-seed-bank .seed-btn:focus-visible .seed-tooltip {
  transform: translateX(-50%) translateY(0);
}

.zone-seed-bank .seed-name {
  display: none;
}

.zone-seed-bank .seed-row-empty {
  grid-column: 1 / -1;
  font-size: 0.58rem;
  padding: 1px 0;
}

.garden-zone-divider {
  position: relative;
  flex: 0 0 var(--farm-fence-side-w);
  min-width: var(--farm-fence-side-w);
  pointer-events: none;
  z-index: 4;
  background-color: transparent;
  background-image: url("assets/fence-ref-v.svg?v=fence6");
  background-size: var(--farm-fence-side-w) var(--fence-tile-v);
  background-repeat: repeat-y;
  background-position: center bottom;
}

.garden-zone-divider::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("assets/fence-bark-tile.jpg?v=fence8");
  background-size: var(--fence-bark-tile-w) var(--fence-bark-tile-h);
  background-repeat: repeat;
  opacity: var(--fence-bark-opacity);
  mix-blend-mode: soft-light;
  filter: contrast(1.16);
  -webkit-mask-image: url("assets/fence-ref-v.svg?v=fence6");
  mask-image: url("assets/fence-ref-v.svg?v=fence6");
  -webkit-mask-size: var(--farm-fence-side-w) var(--fence-tile-v);
  mask-size: var(--farm-fence-side-w) var(--fence-tile-v);
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
}

.garden-zone .garden-grid {
  flex: 1 1 auto;
  min-height: 0;
}

.garden-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--garden-cols, 4), minmax(0, 1fr));
  grid-template-rows: repeat(var(--garden-rows, 4), minmax(0, 1fr));
  gap: 0.7px;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  background: transparent;
  border-radius: 0;
  padding: 2px 0;
  overflow: hidden;
  box-shadow: none;
}

.plot {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  place-self: stretch;
  --plot-soil-inset: 2%;
  --plot-soil-x: 0%;
  --plot-soil-y: 0%;
  --plot-grass-x: 50%;
  --plot-grass-y: 55%;
  background-color: var(--grass-mid);
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0) 32%,
      rgba(0, 0, 0, 0.03) 100%
    ),
    url("assets/grass-field.png");
  background-size: 100% 100%, cover;
  background-position: center, var(--plot-grass-x) var(--plot-grass-y);
  background-repeat: no-repeat, repeat;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: filter 0.15s ease, z-index 0s;
  box-shadow: inset 0 0 0 1px rgba(42, 92, 24, 0.28);
}

@media (hover: hover) and (pointer: fine) {
  .plot:hover,
  .plot:focus-visible {
    overflow: visible;
    z-index: 12;
  }

  .garden-grid:has(.plot:hover),
  .garden-grid:has(.plot:focus-within) {
    overflow: visible;
    z-index: 8;
  }

  .garden-zone-content:has(.garden-grid .plot:hover),
  .garden-zone-content:has(.garden-grid .plot:focus-within) {
    overflow: visible;
    z-index: 7;
  }

  .garden-zone:has(.garden-grid .plot:hover),
  .garden-zone:has(.garden-grid .plot:focus-within) {
    overflow: visible;
    z-index: 7;
  }

  .garden-frame:has(.garden-grid .plot:hover),
  .garden-frame:has(.garden-grid .plot:focus-within) {
    overflow: visible;
    z-index: 6;
  }

  .farm-stage:has(.garden-grid .plot:hover),
  .farm-stage:has(.garden-grid .plot:focus-within),
  .garden-area:has(.garden-grid .plot:hover),
  .garden-area:has(.garden-grid .plot:focus-within) {
    overflow: visible;
    z-index: 4;
  }
}

body.mode-hoe .garden-grid,
body.mode-hoe .plot {
  touch-action: manipulation;
}

.plot::before {
  content: "";
  position: absolute;
  inset: var(--plot-soil-inset);
  border-radius: 3px;
  z-index: 0;
  background-color: #b8ab92;
  background-image:
    linear-gradient(
      165deg,
      rgba(255, 240, 220, 0.14) 0%,
      rgba(255, 255, 255, 0) 26%,
      rgba(90, 72, 48, 0.12) 100%
    ),
    url("assets/plot-soil-dry.png");
  background-size: 420% 420%;
  background-position: var(--plot-soil-x) var(--plot-soil-y);
  background-repeat: no-repeat;
  border: 1px solid rgba(120, 108, 88, 0.82);
  box-shadow:
    inset 0 2px 4px rgba(255, 235, 210, 0.1),
    inset 0 -5px 10px rgba(70, 58, 40, 0.28);
  pointer-events: none;
  transition: filter 0.28s ease, background-color 0.28s ease;
  filter: saturate(0.76) contrast(1.04) brightness(1.1);
}

/* 原始土地 / 24 小时未浇水 */
.plot--untilled::before {
  background-color: #b8ab92;
  background-image:
    linear-gradient(
      165deg,
      rgba(255, 240, 220, 0.14) 0%,
      rgba(255, 255, 255, 0) 26%,
      rgba(90, 72, 48, 0.12) 100%
    ),
    url("assets/plot-soil-dry.png");
  border-color: rgba(120, 108, 88, 0.85);
  box-shadow:
    inset 0 2px 4px rgba(255, 235, 210, 0.08),
    inset 0 -6px 12px rgba(70, 58, 40, 0.32),
    0 1px 3px rgba(0, 0, 0, 0.18);
  filter: saturate(0.76) contrast(1.06) brightness(1.08);
}

/* 松土后 / 已种植未浇水 */
.plot--tilled::before,
.plot.planted:not(.plot--watered-soil):not(.plot--withered):not(.ready)::before {
  background-color: #9a7448;
  background-image:
    linear-gradient(
      165deg,
      rgba(255, 228, 190, 0.16) 0%,
      rgba(255, 255, 255, 0) 30%,
      rgba(58, 38, 18, 0.14) 100%
    ),
    url("assets/plot-soil.png");
  border-color: rgba(92, 68, 36, 0.84);
  box-shadow:
    inset 0 1px 5px rgba(255, 220, 170, 0.12),
    inset 0 -4px 9px rgba(48, 32, 14, 0.3);
  filter: saturate(0.9) contrast(1.02) brightness(1.06);
}

/* 浇水后 */
.plot.planted.plot--watered-soil::before {
  background-color: #2a1810;
  background-image:
    linear-gradient(
      165deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0) 24%,
      rgba(0, 0, 0, 0.18) 78%,
      rgba(0, 0, 0, 0.32) 100%
    ),
    url("assets/plot-soil.png");
  border-color: rgba(24, 14, 6, 0.9);
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.06),
    inset 0 -5px 11px rgba(0, 0, 0, 0.42);
  filter: saturate(1.12) contrast(1.1) brightness(0.78);
}

/* 干涸地块：未种植格完整铺贴干裂纹理（已种植作物保持正常土色） */
.plot--untilled::before,
.plot.plot--dry.plot--tilled::before {
  background-size: 100% 100%;
  background-position: center;
  filter: none;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.plot.planted.ready {
  animation: ready-glow 2.8s ease-in-out infinite;
}

.plot.planted.ready::before {
  background-color: #b8923a;
  background-image: url("assets/plot-mature-field.png?v=1");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-color: rgba(132, 96, 40, 0.82);
  box-shadow:
    inset 0 2px 4px rgba(255, 235, 200, 0.08),
    inset 0 -6px 12px rgba(88, 64, 36, 0.22),
    0 1px 3px rgba(0, 0, 0, 0.16);
  filter: none;
}

.plot.planted.plot--withered {
  animation: none;
  filter: none;
}

.plot.planted.plot--withered::before {
  background-color: #c4a062;
  background-image: url("assets/plot-withered-field.png?v=3");
  background-size: cover;
  background-position: var(--plot-soil-x) var(--plot-soil-y);
  background-repeat: no-repeat;
  border-color: rgba(132, 108, 72, 0.82);
  box-shadow:
    inset 0 2px 4px rgba(255, 235, 200, 0.08),
    inset 0 -6px 12px rgba(88, 64, 36, 0.22),
    0 1px 3px rgba(0, 0, 0, 0.16);
  filter: none;
}

.crop-wrap--withered {
  opacity: 0.9;
}

.crop-wrap--withered:not(.crop-wrap--withered-photo) {
  filter: grayscale(0.72) sepia(0.22) brightness(0.82);
  transform: scale(0.94) rotate(-2deg);
}

.crop-wrap--withered-photo {
  transform-origin: 50% 88%;
  opacity: 0.96;
}

.plot.planted .crop-wrap--withered-photo.crop-wrap--canopy {
  inset: 0;
  overflow: visible;
}

.crop-wrap--withered-canopy:not(.crop-wrap--entering) {
  animation: crop-wither-sway var(--crop-wither-sway-duration, 3.8s) ease-in-out infinite;
  animation-delay: var(--crop-wither-sway-delay, 0s);
}

.crop-wrap--withered .crop-img,
.crop-wrap--withered:not(.crop-wrap--withered-photo) .crop-emoji {
  opacity: 0.72;
}

.crop-wrap--withered-photo .crop-img {
  opacity: 1;
  filter: saturate(1.04) brightness(1.02) sepia(0.06);
}

.crop-emoji--withered {
  filter: grayscale(0.85);
}

.crop-wither-badge {
  position: absolute;
  right: -2px;
  top: -4px;
  z-index: 2;
  font-size: 0.62rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  animation: wither-badge-droop 2.4s ease-in-out infinite;
  transform-origin: center top;
  pointer-events: none;
}

@keyframes wither-badge-droop {
  0%,
  100% {
    transform: rotate(-8deg) translateY(0);
  }

  50% {
    transform: rotate(6deg) translateY(1px);
  }
}

.plot-tooltip-stage--withered {
  color: #c9b8a8;
}

/* 24 小时未浇水：仅松土空地回到干裂色；已种植作物保持正常土色 */
.plot.plot--dry.plot--tilled::before {
  background-color: #b8ab92;
  background-image:
    linear-gradient(
      165deg,
      rgba(255, 240, 220, 0.14) 0%,
      rgba(255, 255, 255, 0) 26%,
      rgba(90, 72, 48, 0.12) 100%
    ),
    url("assets/plot-soil-dry.png");
  border-color: rgba(120, 108, 88, 0.85);
  box-shadow:
    inset 0 2px 4px rgba(255, 235, 210, 0.08),
    inset 0 -6px 12px rgba(70, 58, 40, 0.32),
    0 1px 3px rgba(0, 0, 0, 0.18);
}

/* 菜地：作物在下层，提示信息在上层 */
.crop-wrap {
  position: absolute;
  inset: var(--plot-soil-inset);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: auto;
  height: auto;
  padding: 4px 3px;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: none;
}

.crop-emoji {
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.crop-emoji--planted {
  font-size: 1.1rem;
  opacity: 0.75;
}

.crop-emoji--sprout {
  font-size: 0.68rem;
}

.crop-emoji--seedling {
  font-size: 1.36rem;
}

.crop-emoji--mature {
  font-size: 2rem;
}

.plot-tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  bottom: auto;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 96px;
  max-width: min(148px, 94vw);
  padding: 5px 7px;
  border-radius: 8px;
  background: rgba(28, 20, 12, 0.94);
  border: 1px solid rgba(255, 220, 120, 0.35);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.plot-tooltip--above,
.plot[data-tooltip-place="above"] .plot-tooltip {
  top: auto;
  bottom: calc(100% + 6px);
}

.plot-tooltip--below,
.plot[data-tooltip-place="below"] .plot-tooltip {
  top: calc(100% + 6px);
  bottom: auto;
}

.plot-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
}

.plot-tooltip--below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: rgba(28, 20, 12, 0.94);
}

.plot-tooltip--above::after {
  top: 100%;
  bottom: auto;
  border-top-color: rgba(28, 20, 12, 0.94);
  border-bottom-color: transparent;
}

.plot.plot--tooltip-hold .plot-tooltip,
.plot.plot--tooltip-hold:hover .plot-tooltip,
.plot.plot--tooltip-hold:focus-visible .plot-tooltip {
  opacity: 0;
  visibility: hidden;
}

.plot:hover .plot-tooltip,
.plot:focus-visible .plot-tooltip {
  opacity: 1;
  visibility: visible;
}

body.mode-watering .plot-tooltip,
body.mode-watering-pour .plot-tooltip {
  opacity: 0 !important;
  visibility: hidden !important;
}

.plot-tooltip-title {
  font-size: 0.68rem;
  font-weight: 700;
  color: #ffe8a0;
  text-align: center;
  line-height: 1.2;
}

.plot-tooltip-stage {
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
}

.plot-tooltip-stage--ready {
  color: #ffe066;
}

.plot-tooltip-bar {
  height: 5px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  overflow: hidden;
}

.plot-tooltip-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8fd060, #5cb838);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.plot-tooltip-time,
.plot-tooltip-next {
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  line-height: 1.25;
}

.plot-tooltip-next {
  color: rgba(200, 240, 160, 0.85);
  margin-top: 1px;
}

.crop-img {
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
  transition: width 0.4s ease, height 0.4s ease;
}

.crop-img--planted {
  max-width: 55%;
  max-height: 55%;
  width: auto;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22)) saturate(1.2);
}

.crop-img--sprout {
  max-width: 39%;
  max-height: 41%;
  width: auto;
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22)) saturate(1.3);
}

.crop-img--seedling {
  max-width: 78%;
  max-height: 82%;
  width: auto;
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22)) saturate(1.42) hue-rotate(22deg) brightness(1.16);
}


@keyframes ready-glow {
  0%,
  100% {
    box-shadow:
      inset 0 3px 6px rgba(255, 255, 255, 0.1),
      inset 0 -4px 8px rgba(0, 0, 0, 0.35),
      0 0 0 2px rgba(255, 220, 80, 0.45),
      0 2px 4px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow:
      inset 0 3px 6px rgba(255, 255, 255, 0.14),
      inset 0 -4px 8px rgba(0, 0, 0, 0.35),
      0 0 0 3px rgba(255, 230, 100, 0.75),
      0 0 14px rgba(255, 210, 60, 0.35),
      0 2px 4px rgba(0, 0, 0, 0.2);
  }
}

.crop-wrap--mature {
  padding: 0;
  border-radius: 5px;
  transform-origin: center bottom;
}

.crop-wrap--canopy {
  transform-origin: 50% 50%;
}

.crop-wrap--stage-planted:not(.crop-wrap--entering) {
  transform-origin: center bottom;
  animation: crop-sway-planted var(--crop-sway-duration, 2.6s) ease-in-out infinite;
  animation-delay: var(--crop-sway-delay, 0s);
}

.crop-wrap--stage-sprout:not(.crop-wrap--entering) {
  transform-origin: center bottom;
  animation: crop-sway-sprout var(--crop-sway-duration, 2.8s) ease-in-out infinite;
  animation-delay: var(--crop-sway-delay, 0s);
}

.crop-wrap--stage-seedling:not(.crop-wrap--entering) {
  transform-origin: center bottom;
  animation: crop-sway-seedling var(--crop-sway-duration, 3s) ease-in-out infinite;
  animation-delay: var(--crop-sway-delay, 0s);
}

.crop-wrap--stage-mature:not(.crop-wrap--entering):not(.crop-wrap--canopy) {
  transform-origin: center bottom;
  animation: crop-sway-mature var(--crop-sway-duration, 3.2s) ease-in-out infinite;
  animation-delay: var(--crop-sway-delay, 0s);
}

.crop-wrap--canopy.crop-wrap--stage-planted:not(.crop-wrap--entering),
.crop-wrap--canopy.crop-wrap--stage-sprout:not(.crop-wrap--entering),
.crop-wrap--canopy.crop-wrap--stage-seedling:not(.crop-wrap--entering),
.crop-wrap--canopy.crop-wrap--stage-mature:not(.crop-wrap--entering) {
  transform-origin: 50% 50%;
}

.crop-wrap--canopy.crop-wrap--stage-planted:not(.crop-wrap--entering) {
  animation: crop-sway-planted var(--crop-sway-duration, 2.6s) ease-in-out infinite;
  animation-delay: var(--crop-sway-delay, 0s);
}

.crop-wrap--canopy.crop-wrap--stage-sprout:not(.crop-wrap--entering) {
  animation: crop-sway-sprout var(--crop-sway-duration, 2.8s) ease-in-out infinite;
  animation-delay: var(--crop-sway-delay, 0s);
}

.crop-wrap--canopy.crop-wrap--stage-seedling:not(.crop-wrap--entering) {
  animation: crop-sway-seedling var(--crop-sway-duration, 3s) ease-in-out infinite;
  animation-delay: var(--crop-sway-delay, 0s);
}

.crop-wrap--canopy.crop-wrap--stage-mature:not(.crop-wrap--entering) {
  animation: crop-sway-canopy var(--crop-sway-duration, 3.4s) ease-in-out infinite;
  animation-delay: var(--crop-sway-delay, 0s);
}

.crop-wrap--enter-planted {
  animation: plant-seed-glow 0.65s ease-out;
}

.crop-wrap--enter-planted .crop-img,
.crop-wrap--enter-planted .crop-emoji {
  animation: stage-pop-planted 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

.crop-wrap--canopy.crop-wrap--enter-planted .crop-img--canopy,
.crop-wrap--canopy.crop-wrap--enter-planted .crop-emoji {
  animation: stage-pop-planted-canopy 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

.crop-wrap--enter-sprout .crop-img,
.crop-wrap--enter-sprout .crop-emoji {
  animation: stage-rise-sprout 0.72s cubic-bezier(0.22, 1.15, 0.36, 1) forwards;
}

.crop-wrap--canopy.crop-wrap--enter-sprout .crop-img--canopy,
.crop-wrap--canopy.crop-wrap--enter-sprout .crop-emoji {
  animation: stage-rise-sprout-canopy 0.72s cubic-bezier(0.22, 1.15, 0.36, 1) forwards;
}

.crop-wrap--enter-seedling .crop-img,
.crop-wrap--enter-seedling .crop-emoji {
  animation: stage-grow-seedling 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.crop-wrap--canopy.crop-wrap--enter-seedling .crop-img--canopy,
.crop-wrap--canopy.crop-wrap--enter-seedling .crop-emoji {
  animation: stage-grow-seedling-canopy 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.crop-wrap--enter-mature.crop-wrap--entering {
  animation: stage-reveal-mature 0.92s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.crop-wrap--enter-mature .crop-img,
.crop-wrap--enter-mature .crop-emoji {
  animation: stage-pop-mature-img 0.92s ease forwards;
}

.crop-wrap--canopy.crop-wrap--enter-mature .crop-img--canopy,
.crop-wrap--canopy.crop-wrap--enter-mature .crop-emoji {
  animation: stage-pop-mature-img-canopy 0.92s ease forwards;
}

@keyframes plant-seed-glow {
  0% {
    filter: brightness(1);
  }
  35% {
    filter: brightness(1.45) drop-shadow(0 0 10px rgba(255, 230, 110, 0.95));
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes stage-pop-planted {
  0% {
    transform: translateY(10px) scale(0.25);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes stage-pop-planted-canopy {
  0% {
    transform: translateX(-50%) translateY(10px) scale(0.25);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes stage-rise-sprout {
  0% {
    transform: translateY(14px) scale(0.35);
    opacity: 0;
  }
  55% {
    transform: translateY(-4px) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes stage-rise-sprout-canopy {
  0% {
    transform: translateX(-50%) translateY(14px) scale(0.35);
    opacity: 0;
  }
  55% {
    transform: translateX(-50%) translateY(-4px) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes stage-grow-seedling {
  0% {
    transform: translateY(8px) scale(0.5, 0.38);
    opacity: 0.5;
  }
  45% {
    transform: translateY(-3px) scale(1.06, 1.14);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1, 1);
    opacity: 1;
  }
}

@keyframes stage-grow-seedling-canopy {
  0% {
    transform: translateX(-50%) translateY(8px) scale(0.5, 0.38);
    opacity: 0.5;
  }
  45% {
    transform: translateX(-50%) translateY(-3px) scale(1.06, 1.14);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1, 1);
    opacity: 1;
  }
}

@keyframes stage-reveal-mature {
  0% {
    transform: scale(0.45);
    opacity: 0;
  }
  50% {
    transform: scale(1.14);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes stage-pop-mature-img {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes stage-pop-mature-img-canopy {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.88);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

.plot--stage-enter-planted {
  animation: plot-plant-glow 0.65s ease;
}

.plot--stage-enter-sprout {
  animation: plot-sprout-flash 0.7s ease;
}

.plot--stage-enter-seedling {
  animation: plot-seedling-pulse 0.75s ease;
}

.plot--stage-enter-mature {
  animation: plot-mature-bloom 0.92s ease;
}

@keyframes plot-plant-glow {
  0%,
  100% {
    transform: translateY(0);
    box-shadow:
      inset 0 3px 6px rgba(255, 255, 255, 0.08),
      inset 0 -4px 8px rgba(0, 0, 0, 0.35),
      0 2px 4px rgba(0, 0, 0, 0.2);
  }
  35% {
    transform: translateY(2px) scale(0.98);
    box-shadow:
      inset 0 3px 6px rgba(255, 255, 255, 0.12),
      inset 0 -4px 8px rgba(0, 0, 0, 0.35),
      0 0 0 3px rgba(255, 230, 110, 0.65),
      0 0 18px rgba(255, 210, 70, 0.55),
      0 2px 4px rgba(0, 0, 0, 0.2);
  }
  55% {
    box-shadow:
      inset 0 3px 6px rgba(255, 255, 255, 0.14),
      inset 0 -4px 8px rgba(0, 0, 0, 0.35),
      0 0 0 2px rgba(255, 230, 110, 0.45),
      0 0 12px rgba(255, 210, 70, 0.35),
      0 2px 4px rgba(0, 0, 0, 0.2);
  }
}

@keyframes plot-sprout-flash {
  0%,
  100% {
    box-shadow:
      inset 0 3px 6px rgba(255, 255, 255, 0.08),
      inset 0 -4px 8px rgba(0, 0, 0, 0.35),
      0 2px 4px rgba(0, 0, 0, 0.2);
  }
  40% {
    box-shadow:
      inset 0 3px 6px rgba(255, 255, 255, 0.14),
      inset 0 -4px 8px rgba(0, 0, 0, 0.35),
      0 0 0 3px rgba(120, 200, 80, 0.55),
      0 0 14px rgba(100, 180, 60, 0.35);
  }
}

@keyframes plot-seedling-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.03);
    box-shadow:
      inset 0 3px 6px rgba(255, 255, 255, 0.12),
      inset 0 -4px 8px rgba(0, 0, 0, 0.35),
      0 0 10px rgba(90, 160, 50, 0.4);
  }
}

@keyframes plot-mature-bloom {
  0%,
  100% {
    box-shadow:
      inset 0 3px 6px rgba(255, 255, 255, 0.1),
      inset 0 -4px 8px rgba(0, 0, 0, 0.35),
      0 2px 4px rgba(0, 0, 0, 0.2);
  }
  45% {
    box-shadow:
      inset 0 3px 6px rgba(255, 255, 255, 0.16),
      inset 0 -4px 8px rgba(0, 0, 0, 0.35),
      0 0 0 4px rgba(255, 230, 100, 0.75),
      0 0 20px rgba(255, 210, 60, 0.45);
  }
}

.stage-spark {
  position: fixed;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  animation: stage-spark-burst 0.6s ease-out forwards;
  z-index: 999;
}

.stage-spark--green {
  background: radial-gradient(circle, #e8f8a0 0%, #6bc840 50%, transparent 100%);
}

.stage-spark--gold {
  background: radial-gradient(circle, #fff6a8 0%, #ffd040 55%, transparent 100%);
}

@keyframes stage-spark-burst {
  0% {
    opacity: 1;
    transform: rotate(var(--angle)) translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--angle)) translateY(-28px) scale(0.15);
  }
}

.crop-wrap--mature .crop-img {
  position: relative;
  z-index: 1;
}

.crop-wrap--mature:not(.crop-wrap--entering) .crop-img {
  animation: none;
}

.crop-wrap--mature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 5px;
  box-shadow: inset 0 -20px 32px rgba(255, 210, 80, 0.35);
  animation: mature-warmth 2s ease-in-out infinite;
  pointer-events: none;
}

.crop-wrap--mature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 5px;
  background: radial-gradient(
    ellipse 90% 60% at 50% 92%,
    rgba(255, 230, 120, 0.45) 0%,
    transparent 70%
  );
  animation: mature-glow 2s ease-in-out infinite;
  pointer-events: none;
}

.plot.planted.ready .crop-wrap {
  justify-content: stretch;
  align-items: stretch;
}

.crop-img--mature {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.crop-img--mature.crop-img--photo {
  image-rendering: auto;
  object-position: center 54%;
  border-radius: 5px;
}

.plot.planted .crop-wrap--canopy {
  inset: 0;
  overflow: visible;
  padding: 0;
  justify-content: center;
  align-items: center;
  --plot-soil-core: #9a7448;
  --plot-soil-mid: #6f4e30;
  --plot-soil-rim: #5a3a22;
  --plot-soil-edge: #4a3020;
}

.crop-soil-break {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 19%;
  transform: translate(-50%, -42%);
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.crop-soil-break--planted {
  width: 34%;
  height: 12%;
}

.crop-soil-break--sprout {
  width: 40%;
  height: 14%;
}

.crop-soil-break--seedling {
  width: 45%;
  height: 16%;
}

.crop-soil-break--withered {
  width: 48%;
  height: 16%;
  opacity: 0.96;
  filter: saturate(0.92) brightness(0.98) sepia(0.08);
}

.crop-soil-break--withered .crop-soil-break__base {
  background-color: #a88858;
  background-image:
    radial-gradient(ellipse 58% 42% at 28% 32%, rgba(255, 236, 196, 0.24), transparent 68%),
    radial-gradient(ellipse 52% 38% at 74% 58%, rgba(88, 64, 36, 0.22), transparent 64%),
    radial-gradient(circle at 18% 34%, rgba(255, 240, 210, 0.16) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 42% 62%, rgba(92, 68, 36, 0.18) 0 1px, transparent 1.6px),
    radial-gradient(ellipse 100% 92% at 50% 62%, #b89862 0%, #9a7848 24%, #806038 50%, transparent 84%),
    url("assets/plot-soil-withered.png");
  box-shadow:
    inset 0 3px 5px rgba(255, 236, 196, 0.12),
    inset 0 -8px 12px rgba(88, 64, 36, 0.24),
    0 4px 10px rgba(0, 0, 0, 0.18);
}

.crop-soil-break--withered .crop-soil-clod {
  background: radial-gradient(circle at 24% 20%, #a08050 0%, #806038 45%, #604820 100%);
}

.crop-soil-break--withered .crop-soil-grain {
  background: radial-gradient(circle at 28% 24%, #988050 0%, #786038 42%, #584020 100%);
}

.crop-soil-break--planted,
.crop-soil-break--sprout,
.crop-soil-break--seedling,
.crop-soil-break--withered {
  transform: translate(-50%, -42%);
}

.crop-soil-break__base {
  position: absolute;
  inset: -10% -12%;
  border-radius: 40% 60% 46% 54% / 72% 28% 68% 32%;
  background-color: #5a3a22;
  background-image:
    radial-gradient(ellipse 58% 42% at 28% 32%, rgba(255, 228, 190, 0.22), transparent 68%),
    radial-gradient(ellipse 52% 38% at 74% 58%, rgba(0, 0, 0, 0.32), transparent 64%),
    radial-gradient(circle at 18% 34%, rgba(255, 228, 190, 0.16) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 42% 62%, rgba(0, 0, 0, 0.24) 0 1px, transparent 1.6px),
    radial-gradient(circle at 68% 38%, rgba(255, 240, 210, 0.12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 58%, rgba(0, 0, 0, 0.2) 0 1.1px, transparent 1.7px),
    radial-gradient(ellipse 100% 92% at 50% 62%, #6f4e30 0%, #5a3a22 22%, #4a3020 48%, transparent 82%),
    url("assets/plot-soil.png");
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    180% 180%;
  background-position: center;
  box-shadow:
    inset 0 5px 8px rgba(255, 220, 170, 0.14),
    inset 0 -9px 12px rgba(8, 4, 0, 0.55),
    -20px 5px 0 -11px rgba(68, 44, 24, 0.9),
    20px 5px 0 -11px rgba(68, 44, 24, 0.9),
    -12px 10px 0 -7px rgba(52, 34, 18, 0.62),
    12px 10px 0 -7px rgba(52, 34, 18, 0.62),
    0 6px 14px rgba(0, 0, 0, 0.34);
}

.crop-soil-break__base::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 8%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(ellipse 100% 100% at 50% 100%, rgba(255, 220, 170, 0.16), transparent 72%);
  pointer-events: none;
}

.crop-soil-break__crater {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 30%;
  height: 20%;
  transform: translate(-50%, -50%);
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 100% 88% at 50% 68%,
    rgba(0, 0, 0, 0.52) 0%,
    rgba(0, 0, 0, 0.28) 42%,
    transparent 74%
  );
  pointer-events: none;
}

.crop-soil-break__clods,
.crop-soil-break__grit {
  position: absolute;
  inset: -20% -24%;
  pointer-events: none;
}

.crop-soil-break__grit {
  z-index: 2;
}

.crop-soil-break__clods {
  z-index: 3;
}

.crop-soil-clod {
  position: absolute;
  left: calc(50% + var(--gx, 0%));
  top: calc(50% + var(--gy, 0%));
  width: var(--gs, 6px);
  height: calc(var(--gs, 6px) * 0.78);
  transform: translate(-50%, -50%) translateY(calc(var(--gl, 0) * -2px)) rotate(var(--gr, 0deg));
  border-radius: 44% 56% 50% 50% / 42% 38% 62% 58%;
  background: radial-gradient(circle at 24% 20%, #a87848 0%, #6b4a2c 45%, #3e2814 100%);
  box-shadow:
    0 1px 0 rgba(255, 230, 190, 0.24),
    0 3px 4px rgba(0, 0, 0, 0.45),
    inset 0 -2px 2px rgba(0, 0, 0, 0.3);
  opacity: 0.96;
}

.crop-soil-grain {
  position: absolute;
  left: calc(50% + var(--gx, 0%));
  top: calc(50% + var(--gy, 0%));
  width: var(--gs, 3px);
  height: calc(var(--gs, 3px) * 0.8);
  transform: translate(-50%, -50%) translateY(calc(var(--gl, 0) * -1px)) rotate(var(--gr, 0deg));
  border-radius: 42% 58% 54% 46% / 48% 42% 58% 52%;
  background: radial-gradient(circle at 28% 24%, #9a7048 0%, #6b4a2c 42%, #4a3020 100%);
  box-shadow:
    0 1px 0 rgba(255, 230, 190, 0.18),
    0 2px 2px rgba(0, 0, 0, 0.38),
    inset 0 -1px 1px rgba(0, 0, 0, 0.22);
  opacity: 0.9;
}

.plot.planted.plot--watered-soil .crop-soil-break__base {
  background-color: #2e1a0e;
  background-image:
    radial-gradient(ellipse 58% 42% at 28% 32%, rgba(255, 255, 255, 0.06), transparent 68%),
    radial-gradient(ellipse 52% 38% at 74% 58%, rgba(0, 0, 0, 0.38), transparent 64%),
    radial-gradient(circle at 18% 34%, rgba(255, 255, 255, 0.05) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 42% 62%, rgba(0, 0, 0, 0.3) 0 1px, transparent 1.6px),
    radial-gradient(circle at 68% 38%, rgba(255, 255, 255, 0.04) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 58%, rgba(0, 0, 0, 0.26) 0 1.1px, transparent 1.7px),
    radial-gradient(ellipse 100% 92% at 50% 62%, #3a2414 0%, #2e1a0e 24%, #241208 50%, transparent 84%),
    url("assets/plot-soil.png");
  box-shadow:
    inset 0 4px 6px rgba(255, 255, 255, 0.05),
    inset 0 -10px 14px rgba(0, 0, 0, 0.58),
    -22px 5px 0 -12px rgba(32, 18, 8, 0.92),
    22px 5px 0 -12px rgba(32, 18, 8, 0.92),
    -13px 11px 0 -7px rgba(22, 10, 4, 0.68),
    13px 11px 0 -7px rgba(22, 10, 4, 0.68),
    0 6px 16px rgba(0, 0, 0, 0.4);
}

.plot.planted.plot--watered-soil .crop-soil-clod {
  background: radial-gradient(circle at 24% 20%, #5a3820 0%, #3a2414 45%, #1a0c04 100%);
}

.plot.planted.plot--watered-soil .crop-soil-grain {
  background: radial-gradient(circle at 28% 24%, #5a3820 0%, #3a2414 42%, #241208 100%);
}

.crop-wrap--canopy .crop-soil-rim {
  width: 40%;
  height: 11%;
  transform: translate(-50%, -14%);
}

.crop-soil-rim {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36%;
  height: 8%;
  transform: translate(-50%, -11%);
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}

.crop-wrap:not(.crop-wrap--mature) .crop-soil-rim {
  width: 30%;
  height: 7%;
  transform: translate(-50%, -11%);
}

.crop-soil-rim::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 48% 52% 44% 56% / 40% 40% 60% 60%;
  background:
    radial-gradient(circle at 24% 36%, rgba(255, 228, 190, 0.14) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 76% 40%, rgba(0, 0, 0, 0.16) 0 0.8px, transparent 1.2px),
    radial-gradient(
      ellipse 96% 90% at 50% 38%,
      var(--plot-soil-core, #9a7448) 0%,
      var(--plot-soil-mid, #6f4e30) 26%,
      var(--plot-soil-rim, #5a3a22) 46%,
      var(--plot-soil-edge, #4a3020) 62%,
      transparent 80%
    );
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.24);
}

.crop-soil-rim::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 55%;
  height: 42%;
  border-radius: 50%;
  background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(0, 0, 0, 0.28) 0%, transparent 72%);
}


.plot.planted.plot--watered-soil .crop-soil-rim::before {
  background:
    radial-gradient(circle at 24% 36%, rgba(255, 255, 255, 0.05) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 76% 40%, rgba(0, 0, 0, 0.2) 0 0.8px, transparent 1.2px),
    radial-gradient(
      ellipse 96% 90% at 50% 40%,
      #3a2414 0%,
      #2e1a0e 28%,
      #241208 48%,
      #1a0c04 64%,
      transparent 82%
    );
}

.crop-wrap--mature.crop-wrap--canopy::before,
.crop-wrap--mature.crop-wrap--canopy::after {
  display: none;
}

.plot.planted.plot--crop-canopy {
  overflow: visible;
  z-index: calc(2 + var(--plot-row, 0));
}

.garden-grid.garden-grid--canopy {
  overflow: visible;
}

.garden-zone-content.garden-zone-content--canopy {
  overflow: visible;
}

.crop-wrap--canopy .crop-img--canopy,
.crop-wrap--canopy .crop-emoji {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: auto;
  transform: translateX(-50%);
  transform-origin: center bottom;
  z-index: 3;
  background: transparent;
  pointer-events: none;
}

.crop-wrap--canopy .crop-img--canopy {
  object-fit: contain;
  object-position: center bottom;
  transition: height 0.45s ease, max-width 0.45s ease;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 96%,
    rgba(0, 0, 0, 0.72) 99%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 96%,
    rgba(0, 0, 0, 0.72) 99%,
    transparent 100%
  );
}

.crop-wrap--canopy .crop-img--planted {
  height: 44%;
  max-width: 54%;
}

.crop-wrap--canopy .crop-img--sprout {
  height: 40%;
  max-width: 42%;
}

.crop-wrap--canopy .crop-img--seedling {
  height: 80%;
  max-width: 84%;
}

.crop-wrap--canopy .crop-img--mature.crop-img--photo {
  height: 152%;
  max-width: 158%;
}

.crop-wrap--canopy .crop-img--mature.crop-img--photo.crop-img--chrysanthemum,
.crop-wrap--canopy .crop-img--mature.crop-img--photo.crop-img--gardenia,
.crop-wrap--canopy .crop-img--mature.crop-img--photo.crop-img--rose,
.crop-wrap--canopy .crop-img--mature.crop-img--photo.crop-img--orchid,
.crop-wrap--canopy .crop-img--mature.crop-img--photo.crop-img--peony,
.crop-wrap--canopy .crop-img--mature.crop-img--photo.crop-img--tulip {
  height: 100%;
  max-width: 96%;
  object-position: center 58%;
}

.crop-wrap--canopy .crop-img--mature.crop-img--photo.crop-img--lily {
  height: 100%;
  max-width: 128%;
  object-position: center 58%;
}

.crop-wrap--canopy .crop-img--withered.crop-img--photo {
  height: 152%;
  max-width: 158%;
}

.crop-wrap--canopy .crop-img--withered.crop-img--canopy {
  z-index: 8;
  -webkit-mask-image: none;
  mask-image: none;
}

.crop-wrap--canopy .crop-img--withered.crop-img--photo.crop-img--chrysanthemum,
.crop-wrap--canopy .crop-img--withered.crop-img--photo.crop-img--gardenia,
.crop-wrap--canopy .crop-img--withered.crop-img--photo.crop-img--rose,
.crop-wrap--canopy .crop-img--withered.crop-img--photo.crop-img--orchid,
.crop-wrap--canopy .crop-img--withered.crop-img--photo.crop-img--peony,
.crop-wrap--canopy .crop-img--withered.crop-img--photo.crop-img--tulip {
  height: 100%;
  max-width: 96%;
  object-position: center 58%;
}

.crop-wrap--canopy .crop-img--withered.crop-img--photo.crop-img--lily {
  height: 100%;
  max-width: 128%;
  object-position: center 58%;
}

.crop-img--mature.crop-img--photo.crop-img--pumpkin {
  object-position: center 52%;
  filter: saturate(1.1) contrast(1.06) brightness(1.03);
}

@keyframes crop-sway-planted {
  0%,
  100% {
    transform: rotate(-0.6deg);
  }

  50% {
    transform: rotate(0.6deg);
  }
}

@keyframes crop-sway-sprout {
  0%,
  100% {
    transform: rotate(-1.4deg) translateX(-0.5px);
  }

  50% {
    transform: rotate(1.4deg) translateX(0.5px);
  }
}

@keyframes crop-sway-seedling {
  0%,
  100% {
    transform: rotate(-2deg) translateX(-0.8px);
  }

  50% {
    transform: rotate(2deg) translateX(0.8px);
  }
}

@keyframes crop-sway-mature {
  0%,
  100% {
    transform: rotate(-2.5deg);
  }

  50% {
    transform: rotate(2.5deg);
  }
}

@keyframes crop-sway-canopy {
  0%,
  100% {
    transform: rotate(-1.6deg);
  }

  50% {
    transform: rotate(1.6deg);
  }
}

@keyframes crop-wither-sway {
  0%,
  100% {
    transform: rotate(2.8deg) skewX(-1.2deg);
  }

  50% {
    transform: rotate(-1.4deg) skewX(0.8deg) translateY(1px);
  }
}

@keyframes mature-warmth {
  0%,
  100% {
    opacity: 0.65;
  }
  50% {
    opacity: 1;
  }
}

@keyframes mature-glow {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .plot.planted.ready,
  .crop-wrap--stage-planted:not(.crop-wrap--entering),
  .crop-wrap--stage-sprout:not(.crop-wrap--entering),
  .crop-wrap--stage-seedling:not(.crop-wrap--entering),
  .crop-wrap--stage-mature:not(.crop-wrap--entering),
  .crop-wrap--canopy:not(.crop-wrap--entering),
  .crop-wrap--withered-canopy:not(.crop-wrap--entering),
  .crop-wrap--mature::before,
  .crop-wrap--mature::after {
    animation: none !important;
  }

  .crop-wrap--enter-planted .crop-img,
  .crop-wrap--enter-planted .crop-emoji,
  .crop-wrap--enter-sprout .crop-img,
  .crop-wrap--enter-sprout .crop-emoji,
  .crop-wrap--enter-seedling .crop-img,
  .crop-wrap--enter-seedling .crop-emoji,
  .crop-wrap--enter-mature.crop-wrap--entering,
  .crop-wrap--enter-mature .crop-img,
  .crop-wrap--enter-mature .crop-emoji,
  .plot--stage-enter-planted,
  .plot--stage-enter-sprout,
  .plot--stage-enter-seedling,
  .plot--stage-enter-mature {
    animation: none !important;
  }

  .crop-wither-badge {
    animation: none !important;
  }

  .crop-wrap--withered:not(.crop-wrap--withered-photo) {
    transform: scale(0.94);
  }

  .crop-wrap--withered-canopy:not(.crop-wrap--entering) {
    animation: none !important;
    transform: rotate(2deg) skewX(-1deg);
  }

  .stage-spark {
    display: none;
  }

  .sky-cloud,
  .precip-drop,
  .precip-flake,
  body.weather-storm .sky::after {
    animation: none !important;
  }
}

/* 地块操作弹窗提示 */
.game-popup-toast {
  position: fixed;
  z-index: 1200;
  left: 50%;
  top: 45%;
  max-width: min(280px, 88vw);
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(32, 24, 16, 0.94);
  color: #ffe082;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 4px)) scale(0.96);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 220, 120, 0.38);
}

.game-popup-toast.game-popup-toast--show {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 4px)) scale(1);
}

.game-popup-toast.game-popup-toast--center {
  transform: translate(-50%, -50%) scale(0.96);
}

.game-popup-toast.game-popup-toast--center.game-popup-toast--show {
  transform: translate(-50%, -50%) scale(1);
}

.game-popup-toast.game-popup-toast--intruder {
  top: 38% !important;
  max-width: min(92vw, 420px);
  padding: 18px 22px;
  border-radius: 16px;
  font-size: clamp(1rem, 4.2vw, 1.35rem);
  font-weight: 900;
  line-height: 1.3;
  color: #fff5f5;
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.97) 0%, rgba(127, 29, 29, 0.95) 100%);
  border: 2px solid rgba(254, 202, 202, 0.88);
  box-shadow:
    0 0 0 3px rgba(252, 165, 165, 0.35),
    0 18px 42px rgba(127, 29, 29, 0.55);
  animation: game-popup-intruder-pulse 0.9s ease-in-out infinite;
}

.game-popup-toast.game-popup-toast--intruder.game-popup-toast--show {
  animation: game-popup-intruder-enter 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15),
    game-popup-intruder-pulse 0.9s ease-in-out 0.35s infinite;
}

@keyframes game-popup-intruder-enter {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes game-popup-intruder-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 3px rgba(252, 165, 165, 0.35),
      0 18px 42px rgba(127, 29, 29, 0.55);
  }

  50% {
    box-shadow:
      0 0 0 6px rgba(252, 165, 165, 0.22),
      0 22px 48px rgba(185, 28, 28, 0.62);
  }
}

/* 收获飞入仓库 */
.harvest-fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1350;
  overflow: hidden;
}

.plot--sickle-cut {
  animation: plot-sickle-cut 0.34s ease-out;
}

@keyframes plot-sickle-cut {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  42% {
    transform: translateY(1px) scale(0.985);
  }
}

.harvest-fly {
  position: fixed;
  z-index: 1001;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.35),
    0 0 0 3px rgba(255, 230, 120, 0.65);
  overflow: hidden;
  will-change: left, top, transform, opacity;
}

.harvest-fly img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.harvest-fly--emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: rgba(255, 248, 232, 0.95);
}

.harvest-fly--portal-seed {
  position: fixed;
  z-index: 1001;
  font-size: 1.6rem;
  filter: drop-shadow(0 0 8px rgba(140, 100, 255, 0.85));
  pointer-events: none;
  will-change: left, top, transform, opacity;
}

.harvest-spark {
  position: fixed;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6a8 0%, #ffd040 55%, transparent 100%);
  animation: harvest-spark-burst 0.55s ease-out forwards;
  z-index: 1000;
}

@keyframes harvest-spark-burst {
  0% {
    opacity: 1;
    transform: rotate(var(--angle)) translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--angle)) translateY(-36px) scale(0.2);
  }
}

.plot--harvesting {
  pointer-events: none;
  animation: plot-harvest-flash 0.55s ease-out;
}

.plot--harvesting .crop-wrap {
  animation: none !important;
}

.plot--harvesting .crop-wrap--mature {
  animation: harvest-vanish 0.45s ease-in forwards;
}

.plot--harvesting .crop-wrap--mature::before,
.plot--harvesting .crop-wrap--mature::after {
  animation: none;
  opacity: 0;
}

@keyframes plot-harvest-flash {
  0% {
    box-shadow:
      inset 0 3px 6px rgba(255, 255, 255, 0.12),
      inset 0 -4px 8px rgba(0, 0, 0, 0.35),
      0 0 0 0 rgba(255, 230, 100, 0);
  }
  35% {
    box-shadow:
      inset 0 3px 6px rgba(255, 255, 255, 0.2),
      inset 0 -4px 8px rgba(0, 0, 0, 0.35),
      0 0 0 4px rgba(255, 230, 100, 0.85),
      0 0 18px rgba(255, 210, 60, 0.55);
  }
  100% {
    box-shadow:
      inset 0 3px 6px rgba(255, 255, 255, 0.08),
      inset 0 -4px 8px rgba(0, 0, 0, 0.35),
      0 0 0 0 rgba(255, 230, 100, 0);
  }
}

@keyframes harvest-vanish {
  0% {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
  }
  100% {
    transform: scale(0.15);
    opacity: 0;
    filter: brightness(1.6);
  }
}

.chest-trigger.chest--collect {
  animation: chest-collect 0.55s ease;
}

@keyframes chest-collect {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  25% {
    transform: translateY(3px) scale(0.94);
  }
  55% {
    transform: translateY(-5px) scale(1.08);
  }
  75% {
    transform: translateY(1px) scale(0.98);
  }
}

.chest.chest--glow {
  animation: chest-glow 0.55s ease;
}

@keyframes chest-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 0 transparent);
  }
  45% {
    filter: drop-shadow(0 0 10px rgba(255, 210, 60, 0.85));
  }
}

.chest-badge.chest-badge--pop {
  animation: chest-badge-pop 0.45s ease;
}

@keyframes chest-badge-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pop {
  0% { transform: scale(0.6); }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.plot:hover {
  filter: brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.16);
}

.plot:active {
  filter: brightness(0.98);
}

.footer {
  display: none;
}

@media (max-width: 820px) {
  body {
    --world-ui-inset: 12px;
    --side-zone-width: 108px;
    --game-width: min(calc(100vw - 32px), 520px);
  }

  .game {
    --garden-main-width: min(520px, 100%);
    width: min(calc(100vw - 32px), 520px);
  }

  .play-layout {
    display: block;
    overflow: visible;
  }

  .warehouse-zone {
    margin-right: 8px;
  }

  .seed-bar {
    max-width: none;
  }

  .chest.warehouse-icon {
    width: 86px;
    height: 60px;
  }

  .farm-stage,
  .garden-area {
    bottom: 36px;
  }

  .sky-stage {
    padding: 0 12px 8px;
  }

  .portal-zone {
    top: var(--portal-top);
    left: var(--world-ui-inset);
    width: var(--side-zone-width);
    max-width: var(--side-zone-width);
  }

  .side-panel-slot--portal {
    top: 0;
    left: calc(100% + 6px);
    width: min(
      var(--side-panel-width),
      calc(100vw - var(--world-ui-inset) - var(--side-zone-width) - 20px)
    );
    max-width: none;
  }

  .portal-panel {
    width: 100%;
    max-width: none;
  }

  .side-panel-slot--warehouse {
    width: min(
      var(--warehouse-panel-width),
      calc(100vw - var(--world-ui-inset) * 2)
    );
    min-width: 0;
    max-width: min(
      var(--warehouse-panel-width),
      calc(100vw - var(--world-ui-inset) * 2)
    );
  }

  .chest-panel {
    width: 100%;
    max-width: 100%;
  }

  .mode-visitor .portal-zone {
    top: var(--world-ui-inset);
  }
}

@media (max-width: 400px) {
  body {
    --weather-bar-offset: 12px;
    --weather-bar-stack: 36px;
    --world-ui-inset: 10px;
    --side-zone-width: 96px;
  }

  .weather-bar {
    margin-bottom: 3px;
    padding: 0 2px;
    font-size: 0.74rem;
  }

  .account-bar {
    top: 12px;
    right: 12px;
    gap: 6px;
    max-width: calc(100vw - 24px);
  }

  .garden-coin-chip {
    padding: 6px 10px;
  }

  .account-chip {
    padding: 6px 10px;
    gap: 5px;
  }

  .account-chip-label,
  .garden-coin-label {
    font-size: 0.68rem;
  }

  .account-hover-detail {
    right: auto;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(6px);
    min-width: 180px;
  }

  .account-hover-detail::after {
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    border: 6px solid transparent;
    border-bottom-color: rgba(255, 255, 255, 0.98);
    filter: drop-shadow(0 -1px 0 rgba(160, 200, 170, 0.35));
  }

  .account-dropdown-item--hover-detail:hover .account-hover-detail,
  .account-dropdown-item--hover-detail:focus-within .account-hover-detail {
    transform: translateX(-50%) translateY(0);
  }

  .garden-coin-balance {
    font-size: 0.82rem;
  }

  .auth-card {
    padding: 22px 16px 18px;
  }

  .setup-seed-list--catalog {
    grid-template-columns: repeat(2, 1fr);
  }

  .header {
    --header-logo-h: 13.5rem;
    --header-title-size: 1.52rem;
  }

  .header-brand {
    gap: 10px;
  }

  .header-title-rule {
    flex-basis: 20px;
    width: 20px;
  }

  .header-title-stack {
    gap: 4px;
  }

  .title-logo-wrap {
    margin-top: 6px;
  }

  .title-logo-smoke {
    left: 79.1%;
    top: 5.6%;
    height: 4.5rem;
  }

  .subtitle {
    font-size: 0.74rem;
  }

  .seed-row-grid {
    gap: 5px;
  }

  .seed-btn {
    min-height: 44px;
    padding: 4px 3px 3px;
  }

  .seed-emoji {
    font-size: 1.32rem;
  }

  .seed-name {
    font-size: 0.58rem;
  }

  .seed-row-tag {
    flex-basis: 30px;
    font-size: 0.58rem;
  }

  .seed-bar-title {
    font-size: 0.82rem;
  }

  .toolbox-grid {
    gap: 4px;
  }

  .toolbox-slot--empty,
  .tool-btn {
    min-height: 36px;
  }

  .tool-glyph {
    font-size: 1rem;
  }

  .seed-bar-hint {
    font-size: 0.62rem;
  }

  .garden-grid {
    gap: 5.6px;
    padding: 10px;
  }

  .water-can-trigger {
    transform: translateX(-50%) translateY(calc(var(--water-can-peg-size, 7px) / -2));
  }

  .water-can-art {
    width: 44px;
    height: 55px;
  }
}

.portal-visit-actions {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(120, 90, 200, 0.25);
}

.portal-visit-label {
  margin: 0 0 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #5b3fd0;
}

.portal-visit-note {
  margin: 0 0 8px;
  font-size: 0.62rem;
  line-height: 1.4;
  color: #6a5aaa;
}

.portal-visit-note--error {
  color: #c53030;
  font-weight: 600;
}

.portal-visit-row {
  display: flex;
  gap: 8px;
}

.portal-visit-btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(180deg, #9f7aea 0%, #6b46c1 100%);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.portal-visit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.portal-visit-btn--ghost {
  background: rgba(255, 255, 255, 0.72);
  color: #5b3fd0;
  border: 1px solid rgba(120, 90, 200, 0.35);
}

.portal-gate-actions {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(165deg, #fff8f0 0%, #fff3e8 100%);
  border: 1px solid rgba(220, 140, 60, 0.28);
}

.portal-gate-status {
  margin: 0 0 8px;
  font-size: 0.62rem;
  line-height: 1.45;
  color: #8a5a28;
}

.portal-gate-toggle-btn {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.portal-gate-toggle-btn--close {
  color: #fff;
  background: linear-gradient(180deg, #f6ad55 0%, #dd6b20 100%);
  box-shadow: 0 4px 12px rgba(221, 107, 32, 0.22);
}

.portal-gate-toggle-btn--open {
  color: #1f5a32;
  background: linear-gradient(180deg, #eafff0 0%, #c0ecd0 100%);
  border: 1px solid rgba(90, 180, 120, 0.45);
}

.portal-visit-steal-all {
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(180deg, #f6ad55 0%, #dd6b20 100%);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
}

.visit-layer {
  position: fixed;
  top: var(--farm-top);
  left: 0;
  right: 0;
  bottom: var(--farm-bottom-reserve);
  z-index: 4;
  pointer-events: none;
  overflow: visible;
  transform: translateZ(0);
  backface-visibility: hidden;
}

body.mode-host-defense .visit-layer,
body.mode-visit-dodge .visit-layer {
  z-index: 4;
}

body.mode-visit-remote .visit-layer {
  z-index: 185;
}

body.mode-bat.mode-host-defense .visit-layer {
  pointer-events: none;
}

body.mode-bat.mode-host-defense .visit-intruder--host-spot,
body.mode-bat .visit-intruder--host-spot {
  pointer-events: auto;
  cursor: inherit;
}

.visit-intruder--host-spot {
  position: fixed;
  z-index: 15;
  transform: translate(-50%, -88%) scale(1.12);
  pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(239, 68, 68, 0.72));
  animation: host-intruder-spot-sneak 1.35s ease-in-out infinite;
}

.visit-intruder[hidden] {
  display: none !important;
}

.visit-host[hidden] {
  display: none !important;
}

.visit-host {
  position: absolute;
  left: var(--visit-host-x, 16%);
  top: var(--visit-host-y, 70%);
  transform: translate(-50%, 0);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.28));
}

body.mode-visit-remote .visit-host--working {
  filter: none;
}

.visit-host-stage {
  position: relative;
  width: var(--visit-host-plot-w, 48px);
  height: var(--visit-host-plot-h, 48px);
  overflow: hidden;
}

.visit-host-shadow {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 42px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
  transform: translateX(-50%) scaleX(var(--visit-host-scale-x, 0.5));
  transform-origin: center bottom;
}

.visit-host-figure {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 70px;
  height: 120px;
  transform: translateX(-50%) scale(var(--visit-host-scale-x, 0.5), var(--visit-host-scale-y, 0.5));
  transform-origin: center bottom;
}

.visit-host-rake-sprite {
  display: none;
  width: 70px;
  height: 120px;
  background-image: url("assets/host-rake-sprite.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 1050px 120px;
  image-rendering: pixelated;
  image-rendering: -webkit-optimize-contrast;
}

.visit-host-logo {
  display: block;
  width: 72px;
  height: auto;
  max-height: 72px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.22));
  transform-origin: 40% 92%;
}

.visit-host-tool {
  position: absolute;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
}

.visit-host-tool--bat {
  right: -4px;
  top: 8px;
  font-size: 0.82rem;
  font-weight: 900;
  color: #5c3d1e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.visit-host-anger {
  position: absolute;
  top: -10px;
  right: -12px;
  font-size: 1.35rem;
  opacity: 0;
  transform: scale(0.6);
}

.visit-host-label {
  font-size: clamp(0.48rem, calc(var(--visit-host-plot-w, 48px) * 0.13), 0.62rem);
  font-weight: 800;
  color: #fff;
  padding: 1px 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6b46c1 0%, #553c9a 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  max-width: calc(var(--visit-host-plot-w, 48px) * 1.6);
  overflow: hidden;
  text-overflow: ellipsis;
}

.visit-host--working .visit-host-rake-sprite {
  display: block;
  animation: visit-host-rake-sprite 2.8s steps(14) infinite;
}

.visit-host--working .visit-host-logo {
  display: none;
}

.visit-host--working .visit-host-shadow {
  opacity: 0.28;
  animation: none;
}

.visit-host--working .visit-host-label {
  display: none;
}

.visit-host--bat .visit-host-tool--bat {
  opacity: 1;
}

.visit-host--bat .visit-host-label {
  background: linear-gradient(180deg, #e53e3e 0%, #c53030 100%);
}

.visit-host--angry .visit-host-stage {
  animation: visit-host-angry-shake 0.34s ease-in-out infinite;
}

.visit-host--angry .visit-host-logo {
  filter: saturate(1.2) hue-rotate(-8deg) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.22));
}

.visit-host--angry .visit-host-anger {
  opacity: 1;
  animation: visit-host-anger-pop 0.5s ease-out infinite alternate;
}

.visit-host--angry .visit-host-tool--bat {
  opacity: 1;
}

.visit-host--angry .visit-host-label {
  background: linear-gradient(180deg, #f56565 0%, #c53030 100%);
}

@keyframes visit-host-rake-sprite {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -980px 0;
  }
}

@keyframes visit-host-shadow-rake {
  0%,
  14% {
    opacity: 1;
  }

  36%,
  64% {
    opacity: 0.72;
  }

  100% {
    opacity: 1;
  }
}

@keyframes visit-host-angry-shake {
  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-4deg);
  }

  75% {
    transform: rotate(4deg);
  }
}

@keyframes visit-host-anger-pop {
  0% {
    transform: scale(0.85);
  }

  100% {
    transform: scale(1.08);
  }
}

.visit-remote-chrome__host {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.visit-remote-chrome__host[hidden] {
  display: none !important;
}

.visit-remote-chrome__host-logo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  object-fit: cover;
  background: #fff;
}

.visit-remote-chrome__host-status {
  font-size: 0.72rem;
  font-weight: 800;
  color: #f3e8ff;
}

body.mode-visit-remote.mode-visit-dodge .visit-remote-chrome__host {
  background: rgba(255, 255, 255, 0.16);
}

body.mode-visit-remote.mode-visit-dodge .visit-remote-chrome__host-status {
  color: #fed7d7;
}

.visit-intruder {
  position: absolute;
  left: var(--visit-x, 50%);
  top: var(--visit-y, 72%);
  transform: translate(-50%, -88%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  cursor: default;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
  animation: visit-intruder-bob 0.9s ease-in-out infinite;
  transition: transform 0.12s ease;
}

.visit-intruder--hit {
  animation: visit-intruder-hit 0.42s ease;
}

.visit-intruder--defeated {
  animation: visit-intruder-defeated 1.15s cubic-bezier(0.34, 1.05, 0.45, 1) forwards;
  pointer-events: none;
}

.visit-intruder--defeated .visit-intruder-figure {
  animation: visit-intruder-figure-fall 1.15s cubic-bezier(0.34, 1.05, 0.45, 1) forwards;
}

.visit-intruder--defeated .visit-intruder-label {
  animation: visit-intruder-label-fade 0.35s ease forwards;
}

.visit-intruder-impact {
  position: absolute;
  top: -0.4rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.6rem;
  line-height: 1;
  z-index: 4;
  animation: visit-intruder-impact-pop 0.55s ease-out forwards;
  pointer-events: none;
}

.visit-intruder-dust {
  position: absolute;
  width: 3.2rem;
  height: 1rem;
  transform: translate(-50%, -20%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(120, 90, 60, 0.45) 0%, rgba(120, 90, 60, 0) 72%);
  opacity: 0;
  animation: visit-intruder-dust-puff 0.75s ease-out forwards;
  pointer-events: none;
  z-index: 1;
}

@keyframes visit-intruder-defeated {
  0% {
    transform: translate(-50%, -88%) rotate(0deg);
    opacity: 1;
  }

  18% {
    transform: translate(-50%, -82%) rotate(-6deg);
    opacity: 1;
  }

  45% {
    transform: translate(-50%, -58%) rotate(48deg);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -18%) rotate(96deg);
    opacity: 0;
  }
}

@keyframes visit-intruder-figure-fall {
  0% {
    transform: rotate(0deg) scale(1);
  }

  25% {
    transform: rotate(-18deg) scale(1.08);
  }

  60% {
    transform: rotate(88deg) scale(0.92);
  }

  100% {
    transform: rotate(108deg) scale(0.55) translateY(18px);
  }
}

@keyframes visit-intruder-label-fade {
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes visit-intruder-impact-pop {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.4);
  }

  35% {
    opacity: 1;
    transform: translateX(-50%) scale(1.25);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.6);
  }
}

@keyframes visit-intruder-dust-puff {
  0% {
    opacity: 0;
    transform: translate(-50%, -20%) scale(0.5);
  }

  35% {
    opacity: 0.85;
    transform: translate(-50%, -10%) scale(1.15);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, 0) scale(1.45);
  }
}

.visit-intruder-shadow {
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 2.4rem;
  height: 0.45rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
}

.visit-intruder-figure {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 2.6rem;
  min-height: 2.6rem;
}

.visit-intruder-mask {
  font-size: 2.1rem;
  line-height: 1;
}

.visit-intruder--self {
  animation: none;
  transition: none;
  will-change: transform;
  filter: none;
  opacity: 0.94;
}

body.mode-visit-remote .visit-intruder--self .visit-intruder-figure {
  transform: scale(0.92);
  transform-origin: center bottom;
}

.visit-intruder--stealing .visit-intruder-figure {
  animation: visit-intruder-steal-reach 0.55s ease;
}

@keyframes visit-intruder-steal-reach {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  40% {
    transform: translateY(4px) rotate(8deg) scale(1.04);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

.visit-intruder-sack {
  position: absolute;
  right: -0.35rem;
  bottom: 0.1rem;
  font-size: 1rem;
  transform: rotate(-12deg);
  transform-origin: center bottom;
}

.visit-intruder-sack-crop {
  position: absolute;
  left: 50%;
  top: -0.45rem;
  transform: translate(-50%, 0) scale(0.2);
  font-size: 0.82rem;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.visit-intruder-sack-crop--show {
  animation: visit-intruder-sack-crop-in 0.55s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

@keyframes visit-intruder-sack-crop-in {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.2);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -6px) scale(1.15);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -2px) scale(0.92);
  }
}

.visit-intruder--loot .visit-intruder-sack {
  animation: visit-intruder-loot 0.52s ease;
}

@keyframes visit-intruder-loot {
  0% {
    transform: rotate(-12deg) scale(1);
  }
  35% {
    transform: rotate(-6deg) scale(1.35) translateY(-4px);
  }
  100% {
    transform: rotate(-12deg) scale(1);
  }
}

.visit-intruder-label {
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e53e3e 0%, #c53030 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.visit-bat-shot {
  position: absolute;
  z-index: 4;
  width: 30px;
  height: 82px;
  margin-left: -15px;
  margin-top: -74px;
  pointer-events: none;
  transform: rotate(var(--bat-angle, 0deg));
  transform-origin: 50% 88%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.32));
  animation: visit-bat-fly var(--bat-flight-ms, 620ms) cubic-bezier(0.18, 0.84, 0.22, 1) forwards;
}

.visit-bat-shot__spin {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 88%;
  animation: visit-bat-spin var(--bat-flight-ms, 620ms) linear forwards;
}

.visit-bat-shot__art {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes visit-bat-fly {
  0% {
    opacity: 1;
    translate: 0 0;
    scale: 0.82;
  }

  12% {
    scale: 1.05;
  }

  78% {
    opacity: 1;
    scale: 1;
  }

  100% {
    opacity: 0.15;
    translate: var(--bat-dx, 120px) var(--bat-dy, 0);
    scale: 0.92;
  }
}

@keyframes visit-bat-spin {
  0% {
    rotate: 0deg;
  }

  100% {
    rotate: 1080deg;
  }
}

.visit-intruder--bat-struck {
  animation: visit-intruder-bat-struck 0.48s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.visit-intruder--host-spot.visit-intruder--bat-struck {
  animation: host-intruder-bat-struck 0.48s cubic-bezier(0.34, 1.2, 0.64, 1) !important;
}

.visit-intruder--dodge {
  animation: visit-intruder-dodge 0.52s ease;
}

.visit-intruder--host-spot.visit-intruder--dodge {
  animation: host-intruder-dodge 0.52s ease !important;
}

.visit-intruder-bat-impact {
  position: absolute;
  top: -0.2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.75rem;
  line-height: 1;
  z-index: 5;
  pointer-events: none;
  animation: visit-intruder-bat-impact-pop 0.52s ease-out forwards;
}

.visit-bat-shot--miss {
  animation: visit-bat-fly-miss var(--bat-flight-ms, 520ms) cubic-bezier(0.22, 0.72, 0.36, 1) forwards;
}

.visit-bat-shot--miss .visit-bat-shot__spin {
  animation: visit-bat-spin-miss var(--bat-flight-ms, 520ms) linear forwards;
}

.visit-bat-shot--head-strike {
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.42));
}

.visit-bat-shot--head-strike .visit-bat-shot__spin {
  animation: visit-bat-head-spin var(--bat-flight-ms, 400ms) cubic-bezier(0.28, 0.92, 0.36, 1) forwards;
}

@keyframes visit-bat-head-spin {
  0% {
    transform: rotate(-62deg) scale(0.88);
  }

  55% {
    transform: rotate(24deg) scale(1.08);
  }

  100% {
    transform: rotate(6deg) scale(1);
  }
}

@keyframes visit-intruder-bat-struck {
  0% {
    transform: translate(-50%, -88%) scale(1) rotate(0deg);
  }

  22% {
    transform: translate(-50%, -92%) scale(1.14) rotate(-16deg);
  }

  48% {
    transform: translate(-50%, -84%) scale(1.06) rotate(12deg);
  }

  100% {
    transform: translate(-50%, -88%) scale(1) rotate(0deg);
  }
}

@keyframes host-intruder-bat-struck {
  0% {
    transform: translate(-50%, -88%) scale(1.12) rotate(0deg);
  }

  22% {
    transform: translate(-50%, -94%) scale(1.22) rotate(-18deg);
  }

  48% {
    transform: translate(-50%, -86%) scale(1.08) rotate(14deg);
  }

  100% {
    transform: translate(-50%, -88%) scale(1.12) rotate(0deg);
  }
}

@keyframes visit-intruder-dodge {
  0%,
  100% {
    transform: translate(-50%, -88%) scale(1) translateX(0);
  }

  40% {
    transform: translate(-50%, -90%) scale(0.96) translateX(-14px) rotate(-8deg);
  }
}

@keyframes host-intruder-dodge {
  0%,
  100% {
    transform: translate(-50%, -88%) scale(1.12) translateX(0);
  }

  40% {
    transform: translate(-50%, -90%) scale(1.04) translateX(-16px) rotate(-10deg);
  }
}

@keyframes visit-intruder-bat-impact-pop {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.4);
  }

  35% {
    opacity: 1;
    transform: translateX(-50%) scale(1.2);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.45) translateY(-10px);
  }
}

@keyframes visit-bat-fly-miss {
  0% {
    opacity: 1;
    translate: 0 0;
    scale: 0.82;
  }

  100% {
    opacity: 0.2;
    translate: var(--bat-dx, 120px) var(--bat-dy, 0);
    scale: 0.78;
  }
}

@keyframes visit-bat-spin-miss {
  0% {
    rotate: 0deg;
  }

  100% {
    rotate: 540deg;
  }
}

.visit-intruder--bat-arrive {
  animation: visit-intruder-bat-arrive 0.32s ease-out;
}

@keyframes visit-intruder-bat-arrive {
  0% {
    transform: translate(-50%, -88%) scale(1);
  }

  35% {
    transform: translate(-50%, -88%) scale(1.12) rotate(-10deg);
  }

  100% {
    transform: translate(-50%, -88%) scale(1);
  }
}

@keyframes visit-intruder-bob {
  0%,
  100% {
    transform: translate(-50%, -88%) translateY(0);
  }

  50% {
    transform: translate(-50%, -88%) translateY(-5px);
  }
}

@keyframes visit-intruder-hit {
  0% {
    transform: translate(-50%, -88%) scale(1);
  }

  35% {
    transform: translate(-50%, -88%) scale(1.15) rotate(-8deg);
  }

  100% {
    transform: translate(-50%, -88%) scale(0.92);
  }
}

body.mode-visit-dodge .garden-area {
  cursor: cell;
}

body.mode-host-defense .tool-btn[data-tool="bat"],
body.mode-host-defense .tool-btn.tool-btn--intruder-alert {
  animation: bat-tool-pulse 1.2s ease-in-out infinite;
  outline: 2px solid rgba(248, 113, 113, 0.9);
  outline-offset: 2px;
  background: linear-gradient(180deg, #fecaca 0%, #f87171 100%) !important;
  color: #7f1d1d !important;
  transform: scale(1.08);
  z-index: 2;
  position: relative;
}

@keyframes bat-tool-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(220, 80, 80, 0.35);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(220, 80, 80, 0);
  }
}

.tool-bat-callout {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%);
  z-index: 24;
  min-width: 7.2rem;
  max-width: 9.5rem;
  padding: 5px 8px;
  border-radius: 9px;
  background: linear-gradient(180deg, #fff5f5 0%, #fed7d7 100%);
  border: 1.5px solid rgba(248, 113, 113, 0.88);
  color: #9b2c2c;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  box-shadow:
    0 4px 14px rgba(127, 29, 29, 0.24),
    0 0 0 2px rgba(255, 255, 255, 0.55);
  pointer-events: none;
  animation: tool-bat-callout-bounce 1.05s ease-in-out infinite;
}

.tool-bat-callout::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(248, 113, 113, 0.88);
}

.tool-bat-callout[hidden] {
  display: none !important;
}

body.mode-host-defense .tool-btn--intruder-alert:not(.selected) .tool-icon--bat {
  transform-origin: 50% 88%;
  animation: tool-bat-icon-swing 0.95s ease-in-out infinite;
}

body.mode-host-defense .tool-btn--intruder-alert.selected .tool-icon--bat {
  transform-origin: 50% 88%;
  animation: tool-bat-icon-ready 0.85s ease-in-out infinite;
}

@keyframes tool-bat-callout-bounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-4px);
  }
}

@keyframes tool-bat-icon-swing {
  0%,
  100% {
    transform: rotate(-10deg);
  }

  50% {
    transform: rotate(16deg);
  }
}

@keyframes tool-bat-icon-ready {
  0%,
  100% {
    transform: rotate(-4deg) scale(1);
  }

  50% {
    transform: rotate(6deg) scale(1.06);
  }
}

body.mode-visit-remote .zone-seed-bank {
  display: none !important;
}

body.mode-visit-remote .toolbox-grid {
  pointer-events: none;
}

body.mode-visit-remote .tool-btn[data-tool] {
  cursor: default;
}

body.mode-visit-remote .water-can-trigger {
  pointer-events: none;
}

/* —— 穿梭拜访：与自家花园明显区分 —— */
body.mode-visit-remote {
  --visit-remote-accent: #f56565;
  --visit-remote-accent-deep: #c53030;
  --visit-remote-alert: #fc8181;
}

body.mode-visit-remote .visit-remote-chrome {
  display: block;
}

body.mode-host-defense-chrome .host-defense-chrome {
  display: block;
}

.host-defense-slot,
.sky-chrome-slot {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  z-index: 8;
  container-type: size;
  container-name: sky-chrome;
}

.host-defense-slot[hidden],
.sky-chrome-slot[hidden] {
  display: none !important;
}

.host-defense-chrome {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 220;
  pointer-events: none;
}

.host-defense-chrome__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(127, 29, 29, 0.08) 0%, rgba(127, 29, 29, 0.42) 100%),
    linear-gradient(180deg, rgba(185, 28, 28, 0.34) 0%, transparent 22%, transparent 78%, rgba(185, 28, 28, 0.28) 100%);
  animation: host-defense-shade-pulse 1.1s ease-in-out infinite;
}

.host-defense-chrome__frame {
  position: absolute;
  inset: max(5px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right))
    max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left));
  border: 4px solid rgba(248, 113, 113, 0.92);
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.2),
    inset 0 0 72px rgba(239, 68, 68, 0.24),
    0 0 48px rgba(239, 68, 68, 0.28);
  animation: host-defense-frame-pulse 1.15s ease-in-out infinite;
}

.host-defense-chrome__banner {
  position: fixed;
  top: clamp(72px, 16vh, 120px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 230;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(94vw, 680px);
  padding: 18px 24px 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.97) 0%, rgba(127, 29, 29, 0.95) 100%);
  border: 2px solid rgba(254, 202, 202, 0.9);
  box-shadow:
    0 0 0 3px rgba(252, 165, 165, 0.35),
    0 20px 48px rgba(127, 29, 29, 0.55);
  color: #fff;
  text-align: center;
  animation: host-defense-banner-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.15),
    host-defense-banner-pulse 1.05s ease-in-out 0.45s infinite;
}

.host-defense-slot .host-defense-chrome__banner,
.host-defense-chrome__banner--inline,
.sky-chrome-slot .host-defense-chrome__banner,
.sky-chrome-slot .visit-remote-chrome__banner,
.visit-remote-chrome__banner--inline {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: auto;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0;
  padding: 7px 12px 8px;
  gap: 2px;
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  animation: host-defense-banner-dock-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15),
    host-defense-banner-dock-pulse 1.05s ease-in-out 0.35s infinite;
}

.sky-chrome-slot .host-defense-chrome__banner,
.sky-chrome-slot .visit-remote-chrome__banner {
  flex: 0 0 auto;
  height: auto !important;
  max-height: 100% !important;
  min-height: 0 !important;
  padding: 6px 10px 7px;
  gap: 2px;
  border-radius: 10px;
  justify-content: center;
}

.sky-chrome-slot .visit-remote-chrome__eyebrow,
.visit-remote-chrome__banner--inline .visit-remote-chrome__eyebrow,
.sky-chrome-slot .visit-remote-chrome__host-id,
.visit-remote-chrome__banner--inline .visit-remote-chrome__host-id,
.sky-chrome-slot .visit-remote-chrome__host,
.visit-remote-chrome__banner--inline .visit-remote-chrome__host {
  display: none !important;
}

.sky-chrome-slot .host-defense-chrome__title,
.sky-chrome-slot .visit-remote-chrome__title,
.visit-remote-chrome__banner--inline .visit-remote-chrome__title {
  font-size: clamp(0.62rem, 30cqh, 0.84rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.host-defense-slot .host-defense-chrome__title,
.host-defense-chrome__banner--inline .host-defense-chrome__title {
  font-size: clamp(0.72rem, 2.35vw, 0.84rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.sky-chrome-slot .host-defense-chrome__meta,
.sky-chrome-slot .visit-remote-chrome__meta,
.visit-remote-chrome__banner--inline .visit-remote-chrome__meta {
  font-size: clamp(0.55rem, 24cqh, 0.68rem);
  font-weight: 700;
  line-height: 1.1;
}

.host-defense-slot .host-defense-chrome__meta,
.host-defense-chrome__banner--inline .host-defense-chrome__meta {
  font-size: clamp(0.62rem, 2vw, 0.72rem);
  font-weight: 700;
  line-height: 1.2;
}

@container sky-chrome (max-height: 36px) {
  .sky-chrome-slot .visit-remote-chrome__meta,
  .sky-chrome-slot .host-defense-chrome__meta {
    display: none;
  }
}

.sky-chrome-slot .visit-remote-chrome__banner,
.visit-remote-chrome__banner--inline {
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.97) 0%, rgba(127, 29, 29, 0.95) 100%);
  border: 2px solid rgba(254, 202, 202, 0.88);
  box-shadow:
    0 0 0 2px rgba(252, 165, 165, 0.28),
    0 8px 18px rgba(127, 29, 29, 0.34);
  color: #fff;
  animation: host-defense-banner-dock-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15),
    host-defense-banner-dock-pulse 1.05s ease-in-out 0.35s infinite;
}

.sky-chrome-slot .visit-remote-chrome__meta,
.visit-remote-chrome__banner--inline .visit-remote-chrome__meta {
  color: #fecaca;
}

.sky-chrome-slot .host-defense-chrome__meta,
.host-defense-chrome__banner--inline .host-defense-chrome__meta {
  color: #fecaca;
}

body.mode-visit-remote.mode-visit-dodge .sky-chrome-slot .visit-remote-chrome__banner,
body.mode-visit-remote.mode-visit-dodge .visit-remote-chrome__banner--inline {
  animation: host-defense-banner-dock-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15),
    visit-remote-alert-pulse 1.1s ease-in-out 0.35s infinite;
}

body.mode-visit-remote.mode-visit-dodge .sky-chrome-slot .visit-remote-chrome__meta,
body.mode-visit-remote.mode-visit-dodge .visit-remote-chrome__banner--inline .visit-remote-chrome__meta {
  color: #fecaca;
}

.host-defense-chrome--stolen .host-defense-slot .host-defense-chrome__banner,
.host-defense-chrome--stolen .host-defense-chrome__banner--inline,
.host-defense-chrome--stolen .sky-chrome-slot .host-defense-chrome__banner {
  animation: host-defense-banner-dock-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.15),
    host-defense-stolen-shake-dock 0.42s ease-in-out 0.3s 3,
    host-defense-banner-dock-pulse 1.05s ease-in-out infinite;
}

.host-defense-chrome__banner.chrome-banner--docked {
  top: auto;
  left: auto;
  transform: none;
  width: auto;
  min-width: 0;
  padding: 8px 12px 9px;
  gap: 3px;
  border-radius: 12px;
  animation: host-defense-banner-dock-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15),
    host-defense-banner-dock-pulse 1.05s ease-in-out 0.35s infinite;
}

.host-defense-chrome__banner.chrome-banner--docked-gap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  gap: 2px;
  border-radius: 12px;
  box-sizing: border-box;
  overflow: hidden;
}

.host-defense-chrome__banner.chrome-banner--docked-gap .host-defense-chrome__eyebrow {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  line-height: 1.1;
}

.host-defense-chrome__banner.chrome-banner--docked-gap .host-defense-chrome__title {
  font-size: clamp(0.78rem, 2.4vw, 0.92rem);
  line-height: 1.15;
}

.host-defense-chrome__banner.chrome-banner--docked-gap .host-defense-chrome__meta {
  font-size: clamp(0.64rem, 2vw, 0.74rem);
  line-height: 1.2;
}

.host-defense-chrome--stolen .host-defense-chrome__banner.chrome-banner--docked {
  animation: host-defense-banner-dock-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.15),
    host-defense-stolen-shake-dock 0.42s ease-in-out 0.3s 3,
    host-defense-banner-dock-pulse 1.05s ease-in-out infinite;
}

.host-defense-chrome--stolen .host-defense-chrome__banner {
  animation: host-defense-banner-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15),
    host-defense-stolen-shake 0.42s ease-in-out 0.35s 3,
    host-defense-banner-pulse 1.05s ease-in-out infinite;
}

.host-defense-chrome--stolen .host-defense-chrome__shade {
  animation: host-defense-stolen-shade 0.55s ease-in-out 3;
}

.host-defense-chrome__eyebrow {
  font-size: clamp(0.72rem, 2.2vw, 0.86rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fee2e2;
  opacity: 0.95;
}

.host-defense-chrome__title {
  font-size: clamp(1.35rem, 5.2vw, 2rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}

.host-defense-chrome__meta {
  font-size: clamp(0.78rem, 2.6vw, 0.95rem);
  font-weight: 700;
  line-height: 1.35;
  color: #fecaca;
  max-width: 36em;
}

@keyframes host-defense-shade-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.82;
  }
}

@keyframes host-defense-banner-dock-pop {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes host-defense-banner-dock-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 2px rgba(252, 165, 165, 0.35),
      0 10px 24px rgba(127, 29, 29, 0.45);
  }

  50% {
    box-shadow:
      0 0 0 4px rgba(252, 165, 165, 0.22),
      0 14px 30px rgba(185, 28, 28, 0.55);
  }
}

@keyframes host-defense-stolen-shake-dock {
  0%,
  100% {
    transform: none;
  }

  25% {
    transform: translateX(-3px) rotate(-1deg);
  }

  75% {
    transform: translateX(3px) rotate(1deg);
  }
}

@keyframes host-defense-banner-pop {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.88) translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
  }
}

@keyframes host-defense-stolen-shake {
  0%,
  100% {
    transform: translateX(-50%) rotate(0deg);
  }

  25% {
    transform: translateX(calc(-50% - 4px)) rotate(-1.5deg);
  }

  75% {
    transform: translateX(calc(-50% + 4px)) rotate(1.5deg);
  }
}

@keyframes host-defense-stolen-shade {
  0%,
  100% {
    background:
      radial-gradient(ellipse at center, rgba(127, 29, 29, 0.08) 0%, rgba(127, 29, 29, 0.42) 100%),
      linear-gradient(180deg, rgba(185, 28, 28, 0.34) 0%, transparent 22%, transparent 78%, rgba(185, 28, 28, 0.28) 100%);
  }

  50% {
    background:
      radial-gradient(ellipse at center, rgba(127, 29, 29, 0.18) 0%, rgba(127, 29, 29, 0.58) 100%),
      linear-gradient(180deg, rgba(239, 68, 68, 0.52) 0%, transparent 22%, transparent 78%, rgba(239, 68, 68, 0.42) 100%);
  }
}

.visit-remote-chrome {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 180;
  pointer-events: none;
}

.visit-remote-chrome__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 48%, rgba(127, 29, 29, 0.22) 100%),
    linear-gradient(180deg, rgba(220, 38, 38, 0.12) 0%, transparent 16%, transparent 84%, rgba(127, 29, 29, 0.16) 100%);
}

.visit-remote-chrome__frame {
  position: absolute;
  inset: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right))
    max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  border: 3px solid rgba(248, 113, 113, 0.78);
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 0 36px rgba(239, 68, 68, 0.1),
    0 0 0 1px rgba(127, 29, 29, 0.28);
}

.visit-remote-chrome__banner {
  position: fixed;
  top: calc(var(--world-ui-inset) + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 190;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: min(92vw, 560px);
  padding: 12px 20px 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.97) 0%, rgba(127, 29, 29, 0.95) 100%);
  border: 1px solid rgba(254, 202, 202, 0.55);
  box-shadow: 0 14px 36px rgba(127, 29, 29, 0.4);
  color: #fff;
  text-align: center;
}

.visit-remote-chrome__banner.chrome-banner--docked-visit {
  padding: 8px 12px 9px;
  gap: 2px;
  overflow: hidden;
}

body.mode-visit-remote .visit-remote-chrome__banner.chrome-banner--docked-visit .visit-remote-chrome__title {
  font-size: clamp(0.84rem, 2.8vw, 0.96rem);
  line-height: 1.15;
}

body.mode-visit-remote .visit-remote-chrome__banner.chrome-banner--docked-visit .visit-remote-chrome__meta {
  font-size: clamp(0.66rem, 2.2vw, 0.76rem);
  line-height: 1.2;
}

body.mode-visit-remote .visit-remote-chrome__banner.chrome-banner--docked-visit .visit-remote-chrome__host-id {
  font-size: 0.58rem;
  margin-top: 0;
}

.visit-remote-chrome__banner.chrome-banner--docked {
  top: auto;
  left: auto;
  transform: none;
  min-width: 0;
  width: auto;
  padding: 10px 14px 12px;
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow:
    0 6px 18px rgba(40, 60, 80, 0.14),
    0 14px 36px rgba(49, 18, 94, 0.45);
}

body.mode-visit-remote .visit-remote-chrome__banner.chrome-banner--docked .visit-remote-chrome__title {
  font-size: clamp(0.92rem, 3vw, 1.05rem);
}

body.mode-visit-remote .visit-remote-chrome__banner.chrome-banner--docked .visit-remote-chrome__meta {
  font-size: clamp(0.72rem, 2.4vw, 0.82rem);
}

.visit-remote-chrome__eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e9d8fd;
  opacity: 0.95;
}

.visit-remote-chrome__title {
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.visit-remote-chrome__host-id {
  margin-top: 2px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #e9d8fd;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  word-break: break-all;
  opacity: 0.92;
}

.visit-remote-chrome__host-id[hidden] {
  display: none !important;
}

.visit-remote-chrome__meta {
  font-size: 0.76rem;
  font-weight: 700;
  color: #f3e8ff;
  opacity: 0.96;
}

body.mode-visit-remote.mode-visit-dodge .visit-remote-chrome__banner.chrome-banner--docked {
  background: linear-gradient(180deg, rgba(197, 48, 48, 0.94) 0%, rgba(116, 31, 31, 0.92) 100%);
  animation: visit-remote-alert-pulse 1.1s ease-in-out infinite;
}

body.mode-visit-remote.mode-visit-dodge .visit-remote-chrome__banner:not(.chrome-banner--docked) {
  background: linear-gradient(180deg, rgba(197, 48, 48, 0.94) 0%, rgba(116, 31, 31, 0.92) 100%);
  animation: visit-remote-alert-pulse 1.1s ease-in-out infinite;
}

body.mode-visit-remote.mode-visit-dodge .visit-remote-chrome__frame {
  border-color: rgba(252, 129, 129, 0.88);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 0 72px rgba(197, 48, 48, 0.24),
    0 0 0 1px rgba(116, 31, 31, 0.4);
}

@keyframes visit-remote-alert-pulse {
  0%,
  100% {
    box-shadow: 0 14px 36px rgba(116, 31, 31, 0.42);
  }

  50% {
    box-shadow: 0 14px 42px rgba(252, 129, 129, 0.45);
  }
}

body.browser-safari .visit-layer {
  transform: none;
  backface-visibility: visible;
}

body.browser-safari .visit-intruder {
  filter: none;
}

body.browser-safari .sky,
body.browser-safari .sky .cloud,
body.browser-safari .grass-field-photo,
body.browser-safari .grass-field-stripes,
body.browser-safari .grass-field-tint {
  filter: none !important;
  animation: none !important;
  mix-blend-mode: normal !important;
}

body.browser-safari .grass-field-photo {
  transform: none;
}

body.browser-safari .grass-field-stripes {
  opacity: 0.28;
}

body.browser-safari .plot::before,
body.browser-safari .plot--untilled::before,
body.browser-safari .plot--tilled::before,
body.browser-safari .plot.planted::before,
body.browser-safari .plot.planted.ready::before,
body.browser-safari .plot.planted.plot--withered::before,
body.browser-safari .plot--dry::before,
body.browser-safari .plot--watered-soil::before {
  filter: none !important;
  transition: none !important;
  background-size: 100% 100% !important;
}

body.browser-safari .plot,
body.browser-safari .plot:hover,
body.browser-safari .plot:focus-visible {
  transition: none !important;
  z-index: auto !important;
}

body.browser-safari .plot.planted.ready {
  animation: none !important;
}

body.browser-safari .garden-grid:has(.plot:hover),
body.browser-safari .garden-grid:has(.plot:focus-within),
body.browser-safari .garden-zone-content:has(.garden-grid .plot:hover),
body.browser-safari .garden-zone-content:has(.garden-grid .plot:focus-within),
body.browser-safari .garden-frame:has(.garden-grid .plot:hover),
body.browser-safari .garden-frame:has(.garden-grid .plot:focus-within),
body.browser-safari .farm-stage:has(.garden-grid .plot:hover),
body.browser-safari .farm-stage:has(.garden-grid .plot:focus-within),
body.browser-safari .garden-area:has(.garden-grid .plot:hover),
body.browser-safari .garden-area:has(.garden-grid .plot:focus-within) {
  z-index: auto !important;
  overflow: visible !important;
}

body.browser-safari .cloud,
body.browser-safari .grass-photo-settle,
body.browser-safari .water-can-pendulum,
body.browser-safari .circle-icon-sway,
body.browser-safari .circle-spark-float,
body.browser-safari .circle-empty-bob {
  animation: none !important;
}

body.browser-safari .farm-fence-rail::after,
body.browser-safari .farm-fence-corner::after {
  display: none;
}

body.browser-safari .farm-fence-rail,
body.browser-safari .farm-fence-corner {
  filter: none !important;
}

body.browser-safari .crop-img,
body.browser-safari .crop-wrap,
body.browser-safari .plot {
  filter: none !important;
}

/* Safari：作物入土过渡更柔和，贴近 Firefox 效果 */
body.browser-safari .crop-wrap--withered-canopy.crop-wrap--canopy {
  isolation: auto;
  overflow: visible !important;
}

body.browser-safari .crop-wrap--canopy .crop-img--withered.crop-img--canopy {
  -webkit-mask-image: none;
  mask-image: none;
}

body.browser-safari .crop-wrap--canopy {
  isolation: isolate;
}

body.browser-safari .crop-wrap--canopy .crop-img--canopy {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 90%,
    rgba(0, 0, 0, 0.94) 96%,
    rgba(0, 0, 0, 0.42) 99%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 90%,
    rgba(0, 0, 0, 0.94) 96%,
    rgba(0, 0, 0, 0.42) 99%,
    transparent 100%
  );
}

body.browser-safari .crop-soil-break {
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.22));
}

body.browser-safari .crop-soil-rim {
  mix-blend-mode: normal;
  opacity: 1;
}

body.browser-safari .crop-soil-rim::before {
  background:
    radial-gradient(circle at 24% 36%, rgba(255, 228, 190, 0.12) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 76% 40%, rgba(0, 0, 0, 0.14) 0 0.8px, transparent 1.2px),
    radial-gradient(
      ellipse 98% 92% at 50% 38%,
      #9a7448 0%,
      #6f4e30 26%,
      #5a3a22 46%,
      #4a3020 62%,
      transparent 80%
    );
  box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.2);
}

body.browser-safari .plot.planted.plot--watered-soil .crop-soil-rim::before {
  background:
    radial-gradient(circle at 24% 36%, rgba(255, 255, 255, 0.04) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 76% 40%, rgba(0, 0, 0, 0.18) 0 0.8px, transparent 1.2px),
    radial-gradient(
      ellipse 98% 92% at 50% 40%,
      #3a2414 0%,
      #2e1a0e 28%,
      #241208 48%,
      #1a0c04 64%,
      transparent 82%
    );
}

body.browser-safari .crop-soil-rim::after {
  opacity: 0.65;
}

body.browser-safari .plot.plot--watering::before,
body.browser-safari .plot.plot--watering::after,
body.browser-safari .plot-water-rain,
body.browser-safari .plot-water-streak,
body.browser-safari .plot-land-splash-fan,
body.browser-safari .cursor-pour-drop,
body.browser-safari .cursor-water-can-jet,
body.browser-safari .stage-spark {
  animation: none !important;
  display: none !important;
}

body.browser-safari .toolbox-panel,
body.browser-safari .weather-bar,
body.browser-safari .portal-panel,
body.browser-safari .auth-modal__backdrop,
body.browser-safari .setup-modal__backdrop,
body.browser-safari .manage-modal__backdrop,
body.browser-safari .friend-chat-backdrop {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.browser-safari.garden-painting .garden-zones,
body.browser-safari.garden-painting .garden-zones {
  visibility: hidden;
}

body.browser-safari .garden-area,
body.browser-safari .garden-grid {
  content-visibility: visible;
  contain-intrinsic-size: auto;
}

body.browser-safari .plot-tooltip {
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.browser-safari.mode-visit-remote .sky,
body.browser-safari.mode-visit-remote .grass-field-photo,
body.browser-safari.mode-visit-remote.mode-visit-dodge .sky {
  filter: none;
}

body.browser-safari.mode-visit-remote .visit-remote-chrome__banner,
body.browser-safari.mode-visit-remote.mode-visit-dodge .visit-remote-chrome__banner {
  animation: none;
}

body.browser-safari.mode-visit-remote.mode-visit-dodge .visit-remote-chrome__frame {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 0 1px rgba(76, 29, 149, 0.35);
}

body.browser-safari.mode-host-defense-chrome .host-defense-chrome__banner,
body.browser-safari.mode-host-defense-chrome .host-defense-chrome__shade,
body.browser-safari.mode-host-defense-chrome .host-defense-chrome__frame {
  animation: none;
}

body.browser-safari.mode-host-defense-chrome .host-defense-chrome__frame {
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(127, 29, 29, 0.45);
}

body.mode-visit-remote .sky {
  filter: hue-rotate(28deg) saturate(1.08) brightness(0.9);
}

body.mode-visit-remote .grass-field-photo {
  filter: hue-rotate(18deg) saturate(0.82) brightness(0.86);
}

body.mode-visit-remote.mode-visit-dodge .sky {
  filter: hue-rotate(-8deg) saturate(1.15) brightness(0.84);
}

body.mode-visit-remote .header.header--remote-visit {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

body.mode-visit-remote .header.header--remote-visit .header-title-rule {
  background: linear-gradient(90deg, transparent 0%, rgba(254, 202, 202, 0.88) 100%);
  box-shadow: 0 1px 0 rgba(254, 202, 202, 0.22);
}

body.mode-visit-remote .header.header--remote-visit .header-title-rule--right {
  background: linear-gradient(270deg, transparent 0%, rgba(254, 202, 202, 0.88) 100%);
}

body.mode-visit-remote .header.header--remote-visit .title::before {
  content: "🌀";
  margin-right: 0.35em;
  font-size: 0.82em;
  line-height: 1;
}

body.mode-visit-remote .header.header--remote-visit .title {
  color: #fff5f5;
  text-shadow: 0 2px 10px rgba(127, 29, 29, 0.42);
}

body.mode-visit-remote .header.header--remote-visit .subtitle {
  color: #fecaca;
}

body.mode-visit-remote .water-can-trigger {
  display: none !important;
}

body.mode-visit-remote .portal-zone,
body.mode-visit-remote .warehouse-zone {
  display: none !important;
}

body.mode-visit-remote .farm-stage.garden-area::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(159, 122, 234, 0.35);
}

body.mode-visit-remote .visit-leave-fab {
  z-index: 210;
  padding: 12px 20px;
  font-size: 0.86rem;
  animation: visit-leave-fab-pulse 1.6s ease-in-out infinite;
}

@keyframes visit-leave-fab-pulse {
  0%,
  100% {
    transform: translateY(0);
    box-shadow: 0 8px 20px rgba(60, 40, 120, 0.35);
  }

  50% {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(107, 70, 193, 0.45);
  }
}

.plot--being-stolen {
  z-index: 12;
  outline: 3px solid #ef4444;
  outline-offset: -2px;
  animation: plot-steal-outline 0.55s ease-in-out infinite;
  box-shadow:
    0 0 0 2px rgba(239, 68, 68, 0.35),
    0 0 18px rgba(239, 68, 68, 0.55);
}

@keyframes plot-steal-outline {
  0%,
  100% {
    outline-color: #ef4444;
    box-shadow:
      0 0 0 2px rgba(239, 68, 68, 0.35),
      0 0 14px rgba(239, 68, 68, 0.45);
  }
  50% {
    outline-color: #fbbf24;
    box-shadow:
      0 0 0 3px rgba(251, 191, 36, 0.45),
      0 0 22px rgba(251, 191, 36, 0.65);
  }
}

.plot-steal-warning {
  position: fixed;
  z-index: 220;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 132px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(185, 28, 28, 0.97) 0%, rgba(69, 10, 10, 0.98) 100%);
  border: 2px solid #fecaca;
  color: #fff;
  font-size: clamp(0.72rem, 2.2vw, 0.82rem);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
  box-shadow:
    0 0 0 3px rgba(252, 165, 165, 0.35),
    0 12px 28px rgba(127, 29, 29, 0.55);
  animation: plot-steal-warning-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2),
    plot-steal-warning-shake 0.42s ease-in-out 0.35s 4;
}

.plot-steal-warning__icon {
  font-size: 1.35rem;
  line-height: 1;
}

.plot-steal-warning__title {
  letter-spacing: 0.04em;
}

.plot-steal-warning__blink {
  color: #fde047;
  animation: plot-steal-blink 0.45s step-end infinite;
}

@keyframes plot-steal-warning-pop {
  from {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.86);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes plot-steal-warning-shake {
  0%,
  100% {
    transform: translate(-50%, 0) rotate(0deg);
  }

  25% {
    transform: translate(calc(-50% - 2px), 0) rotate(-2deg);
  }

  75% {
    transform: translate(calc(-50% + 2px), 0) rotate(2deg);
  }
}

@keyframes plot-steal-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

.visit-status-banner {
  position: fixed;
  top: calc(var(--world-ui-inset) + 4px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  max-width: min(92vw, 520px);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.82);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

body.mode-host-defense .visit-status-banner,
body.mode-host-defense-chrome .visit-status-banner {
  display: none !important;
}

@keyframes host-defense-banner-pulse {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    box-shadow:
      0 0 0 2px rgba(252, 165, 165, 0.35),
      0 14px 32px rgba(127, 29, 29, 0.48);
  }

  50% {
    transform: translateX(-50%) scale(1.02);
    box-shadow:
      0 0 0 4px rgba(252, 211, 77, 0.45),
      0 18px 40px rgba(185, 28, 28, 0.58);
  }
}

body.mode-host-defense::before {
  content: "";
  position: fixed;
  inset: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right))
    max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  pointer-events: none;
  z-index: 175;
  border: 3px solid rgba(248, 113, 113, 0.82);
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 0 56px rgba(239, 68, 68, 0.16);
  animation: host-defense-frame-pulse 1.15s ease-in-out infinite;
}

body.mode-host-defense-chrome::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 174;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(127, 29, 29, 0.22) 100%);
  animation: host-defense-shade-pulse 1.1s ease-in-out infinite;
}

body.mode-host-steal-flash::before {
  animation: host-steal-flash-frame 0.55s ease-in-out 3;
}

@keyframes host-defense-frame-pulse {
  0%,
  100% {
    border-color: rgba(248, 113, 113, 0.82);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.16),
      inset 0 0 56px rgba(239, 68, 68, 0.16);
  }

  50% {
    border-color: rgba(252, 211, 77, 0.92);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.22),
      inset 0 0 72px rgba(251, 191, 36, 0.22);
  }
}

@keyframes host-steal-flash-frame {
  0%,
  100% {
    border-color: rgba(248, 113, 113, 0.82);
  }

  50% {
    border-color: rgba(252, 211, 77, 1);
    box-shadow:
      inset 0 0 0 2px rgba(255, 255, 255, 0.28),
      inset 0 0 88px rgba(239, 68, 68, 0.32);
  }
}

body.mode-host-defense {
  --host-intruder-x: 13%;
  --host-intruder-y: 9%;
}

body.mode-host-defense .visit-intruder {
  z-index: 8;
  filter: drop-shadow(0 0 14px rgba(239, 68, 68, 0.72));
}

body.mode-host-defense .visit-intruder--host-spot {
  z-index: 15;
}

body.mode-host-defense .visit-intruder--host-spot,
.visit-intruder--host-spot {
  transform: translate(-50%, -88%) scale(1.12);
}

body.mode-host-defense .visit-intruder--host-spot .visit-intruder-shadow,
.visit-intruder--host-spot .visit-intruder-shadow {
  animation: host-intruder-spot-shadow 1.35s ease-in-out infinite;
}

body.mode-host-defense .visit-intruder--host-spot .visit-intruder-figure,
.visit-intruder--host-spot .visit-intruder-figure {
  animation: host-intruder-spot-figure 1.1s ease-in-out infinite;
}

body.mode-host-defense .visit-intruder--host-spot .visit-intruder-mask,
.visit-intruder--host-spot .visit-intruder-mask {
  font-size: 2.35rem;
}

body.mode-host-defense .visit-intruder--host-spot::before,
.visit-intruder--host-spot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  width: 4.2rem;
  height: 4.2rem;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(248, 113, 113, 0.72);
  border-radius: 50%;
  pointer-events: none;
  animation: host-intruder-spot-ring 1.25s ease-in-out infinite;
}

body.mode-host-defense .visit-intruder--host-spot::after,
.visit-intruder--host-spot::after {
  content: "!";
  position: absolute;
  top: -0.35rem;
  right: -0.15rem;
  width: 1.05rem;
  height: 1.05rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #f56565 0%, #c53030 100%);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(127, 29, 29, 0.45);
  animation: host-intruder-spot-alert 0.85s ease-in-out infinite;
}

.visit-intruder--host-spot-enter {
  animation: host-intruder-spot-enter 0.85s cubic-bezier(0.2, 0.9, 0.3, 1.15) !important;
}

.visit-intruder--host-stealing.visit-intruder--host-spot {
  animation: host-intruder-spot-steal 0.7s ease-in-out !important;
}

.visit-intruder--host-stealing.visit-intruder--host-spot .visit-intruder-figure {
  animation: visit-intruder-steal-reach 0.55s ease !important;
}

.visit-intruder--host-stealing.visit-intruder--host-spot .visit-intruder-sack {
  animation: visit-intruder-loot 0.52s ease;
}

@keyframes host-intruder-spot-sneak {
  0%,
  100% {
    transform: translate(-50%, -88%) scale(1.12) translateX(0);
  }

  50% {
    transform: translate(-50%, -88%) scale(1.12) translateX(7px);
  }
}

@keyframes host-intruder-spot-shadow {
  0%,
  100% {
    transform: translateX(-50%) scaleX(1);
    opacity: 0.22;
  }

  50% {
    transform: translateX(-50%) scaleX(1.14);
    opacity: 0.32;
  }
}

@keyframes host-intruder-spot-figure {
  0%,
  100% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(5deg);
  }
}

@keyframes host-intruder-spot-ring {
  0%,
  100% {
    opacity: 0.45;
    transform: translate(-50%, -50%) scale(0.94);
  }

  50% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes host-intruder-spot-alert {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.14);
  }
}

@keyframes host-intruder-spot-enter {
  0% {
    opacity: 0;
    transform: translate(-50%, -88%) scale(0.55) translateY(18px);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -88%) scale(1.12) translateY(0);
  }
}

@keyframes host-intruder-spot-steal {
  0%,
  100% {
    transform: translate(-50%, -88%) scale(1.12);
  }

  40% {
    transform: translate(-50%, -92%) scale(1.18);
  }
}

body.mode-host-defense .visit-intruder-label {
  font-size: clamp(0.68rem, 2vw, 0.78rem);
  padding: 3px 10px;
  background: linear-gradient(180deg, #f56565 0%, #c53030 100%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35), 0 4px 10px rgba(0, 0, 0, 0.28);
  animation: host-intruder-label-pulse 0.85s ease-in-out infinite;
}

@keyframes host-intruder-label-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

body.mode-host-defense .farm-stage.garden-area {
  box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.28);
}

.visit-leave-fab {
  position: fixed;
  right: max(12px, var(--world-ui-inset));
  bottom: max(72px, calc(var(--farm-bottom-reserve) + 12px));
  z-index: 200;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #9f7aea 0%, #6b46c1 100%);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(60, 40, 120, 0.35);
  cursor: pointer;
}

.visit-leave-fab:hover {
  filter: brightness(1.05);
}

.visit-add-friend-fab {
  position: fixed;
  right: max(12px, var(--world-ui-inset));
  bottom: max(124px, calc(var(--farm-bottom-reserve) + 64px));
  z-index: 200;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #22a055 0%, #15803d 100%);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(21, 128, 61, 0.28);
  cursor: pointer;
}

.visit-add-friend-fab:hover {
  filter: brightness(1.05);
}

body.mode-host-defense .visit-intruder {
  pointer-events: none;
}