/* =========================================================
   萤火农场 · Firefly Farm
   独立项目：UI 样式
   ========================================================= */
:root {
  --ink: #2f3b2b;
  --ink-soft: #5e6954;
  --muted: #88907b;
  --paper: #fffaf0;
  --paper-deep: #f6ecd4;
  --cream: #fbf4df;
  --green: #5d8247;
  --green-deep: #36532e;
  --green-soft: #dfe9d3;
  --gold: #d9a43d;
  --gold-soft: #f6e4b8;
  --terracotta: #bd6b46;
  --line: rgba(63, 79, 50, .14);
  --line-strong: rgba(63, 79, 50, .24);
  --shadow: 0 22px 60px rgba(44, 56, 34, .2);
  --glass: linear-gradient(180deg, rgba(255, 252, 241, .93), rgba(250, 243, 223, .8));
  --ui: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --display: "Iowan Old Style", "Palatino Linotype", "Songti SC", "STSong", "KaiTi", serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: #c8dfc0;
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

svg {
  display: block;
}

[hidden] {
  display: none !important;
}

#game-shell {
  position: fixed;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
}

#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
  outline: none;
}

#scene.dragging {
  cursor: grabbing;
}

.scene-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 64% at 50% 45%, transparent 52%, rgba(40, 52, 31, .15) 100%),
    linear-gradient(180deg, rgba(255, 250, 236, .18), transparent 22%, transparent 72%, rgba(42, 53, 32, .2));
}

/* =========================================================
   HUD
   ========================================================= */
.hud {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: max(18px, env(safe-area-inset-left));
  right: max(18px, env(safe-area-inset-right));
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 14px;
  pointer-events: none;
}

.hud > * {
  pointer-events: auto;
}

.brand,
.day-chip,
.coin-chip,
.level-chip,
.icon-btn,
.goal-badge,
.goals-panel,
.dock,
.scene-hint,
.camera-reset {
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}

.brand {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 56px;
  padding: 7px 17px 7px 8px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 19px;
  background: var(--glass);
  box-shadow: 0 10px 34px rgba(56, 67, 41, .15), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.brand-mark {
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #f5eed2;
  border-radius: 14px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .3), transparent 40%),
    linear-gradient(145deg, #728f4f, #3f6335);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 5px 14px rgba(62, 92, 48, .25);
}

.brand-mark svg {
  width: 31px;
  height: 31px;
}

.brand-text h1 {
  margin: 0;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.05;
  color: #33462b;
  white-space: nowrap;
}

.brand-text p {
  margin: 4px 0 0;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .3em;
  color: #81906c;
  line-height: 1;
}

.day-chip {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 17px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 19px;
  background: var(--glass);
  box-shadow: 0 10px 34px rgba(56, 67, 41, .12), inset 0 1px 0 rgba(255, 255, 255, .78);
  white-space: nowrap;
}

.weather-orb {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  color: #cf9632;
}

.weather-orb svg {
  width: 100%;
  height: 100%;
}

.weather-orb.night {
  color: #839bc9;
}

.weather-orb.rain {
  color: #688996;
}

.day-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.day-copy span {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #8b927d;
}

.day-copy strong {
  font-size: 15px;
  font-weight: 750;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: #3b4934;
}

.hairline {
  width: 1px;
  height: 24px;
  background: var(--line);
}

.weather-name {
  font-size: 11px;
  color: #778367;
  letter-spacing: .05em;
}

.hud-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.coin-chip {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px 0 8px;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 14px;
  background: var(--glass);
  box-shadow: 0 8px 24px rgba(56, 67, 41, .12), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.coin-glyph {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff8dc;
  font-size: 12px;
  background: radial-gradient(circle at 34% 27%, #f7d57a, #d69b2f 70%);
  box-shadow: inset 0 0 0 1.5px rgba(146, 95, 13, .24), 0 3px 7px rgba(186, 133, 29, .25);
}

.coin-chip b {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.level-chip {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px 0 5px;
  border: 1px solid rgba(255, 255, 255, .66);
  border-radius: 14px;
  background: var(--glass);
  box-shadow: 0 8px 24px rgba(56, 67, 41, .1), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.level-ring {
  --xp: 0;
  position: relative;
  width: 33px;
  height: 33px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--xp) * 1%), rgba(107, 119, 87, .19) 0);
}

.level-ring::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fbf4e2;
}

.level-ring b {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 800;
  color: #526447;
}

.level-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.1;
}

.level-copy small {
  font-size: 8px;
  color: var(--muted);
  letter-spacing: .08em;
}

.level-copy b {
  font-size: 11.5px;
  color: #516147;
}

.icon-btn {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 14px;
  color: #5e6c51;
  background: var(--glass);
  box-shadow: 0 8px 24px rgba(56, 67, 41, .11), inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.icon-btn:hover {
  transform: translateY(-1px);
  background: #fffdf4;
  box-shadow: 0 12px 30px rgba(56, 67, 41, .16);
}

.icon-btn svg {
  width: 21px;
  height: 21px;
}

.goal-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border: 2px solid #fbf5e4;
  border-radius: 10px;
  color: #fff8e8;
  background: var(--terracotta);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.goal-badge.complete {
  background: var(--green);
}

/* =========================================================
   Daily goals panel
   ========================================================= */
.goals-panel {
  position: absolute;
  top: 88px;
  right: max(18px, env(safe-area-inset-right));
  z-index: 19;
  width: 274px;
  padding: 17px 17px 13px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 22px;
  background: var(--glass);
  box-shadow: 0 16px 45px rgba(52, 65, 38, .16), inset 0 1px 0 rgba(255, 255, 255, .8);
  transform-origin: top right;
  transition: opacity .22s ease, transform .22s ease;
}

.goals-panel.collapsed {
  opacity: 0;
  transform: translateY(-8px) scale(.97);
  pointer-events: none;
}

.goals-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.eyebrow {
  margin: 0 0 4px;
  font-size: 7.5px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .24em;
  color: #98a087;
}

.goals-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: .08em;
  color: #3b4a32;
}

.mini-close {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  margin-right: -3px;
  border-radius: 8px;
  color: #909b81;
  font-size: 18px;
  line-height: 1;
  transition: background .18s ease, color .18s ease;
}

.mini-close:hover {
  color: var(--ink);
  background: rgba(82, 100, 65, .09);
}

.goals-list {
  display: flex;
  flex-direction: column;
}

.goal {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px 0 9px;
  border-top: 1px dashed rgba(75, 90, 61, .17);
}

.goal:first-child {
  border-top: 0;
}

.goal-check {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1.5px dashed #bdc4ad;
  border-radius: 50%;
  color: #9ba48b;
  font-size: 12px;
  transition: all .28s ease;
}

.goal.done .goal-check {
  border-style: solid;
  border-color: var(--green);
  color: #fffdf0;
  background: var(--green);
  box-shadow: 0 3px 9px rgba(82, 121, 63, .25);
}

.goal-main {
  min-width: 0;
}

.goal-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.goal-title {
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.25;
  color: #4c5b41;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.goal-progress-text {
  flex: 0 0 auto;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  color: #9aa18d;
}

.goal-bar {
  height: 4px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(99, 113, 81, .13);
}

.goal-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #93b270, #5f8447);
  transition: width .45s cubic-bezier(.2, .8, .2, 1);
}

.goal.done .goal-bar i {
  background: linear-gradient(90deg, #d8ba6f, #d09b38);
}

.goal-reward {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: 7px;
  font-size: 9px;
  font-weight: 750;
  color: #9a7425;
  background: rgba(246, 228, 184, .62);
  font-variant-numeric: tabular-nums;
}

.goal.done .goal-reward {
  color: #fff;
  background: var(--green);
}

.goal-reward svg {
  width: 9px;
  height: 9px;
}

.goal-coin {
  width: 13px;
  height: 13px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.goal.done .goal-coin {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}

.goals-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(75, 90, 61, .11);
  font-size: 8.5px;
  letter-spacing: .03em;
  color: #9aa18d;
}

.live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8fac6f;
  box-shadow: 0 0 0 3px rgba(143, 172, 111, .16);
}

/* =========================================================
   Scene hint & toasts
   ========================================================= */
.scene-hint {
  position: absolute;
  left: 50%;
  bottom: 178px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 12px;
  color: #68745a;
  background: rgba(255, 251, 239, .6);
  box-shadow: 0 5px 18px rgba(52, 65, 38, .08);
  font-size: 10px;
  letter-spacing: .02em;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.hint-hand {
  width: 16px;
  height: 16px;
  color: #7d906a;
}

.hint-hand svg {
  width: 100%;
  height: 100%;
}

.hint-divider {
  width: 1px;
  height: 12px;
  background: rgba(90, 106, 73, .2);
}

.hint-drag {
  color: #98a18a;
  font-size: 9px;
}

.toasts {
  position: absolute;
  top: 92px;
  left: 50%;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: min(440px, calc(100vw - 30px));
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 9px 14px 9px 10px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 12px;
  color: #fff9e8;
  background: rgba(45, 58, 36, .93);
  box-shadow: 0 10px 28px rgba(38, 48, 30, .2);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .02em;
  animation: toast-in .34s cubic-bezier(.18, .9, .22, 1.15);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.toast.is-leaving {
  animation: toast-out .26s ease forwards;
}

.toast-dot {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #4d623b;
  background: #efe5be;
  font-size: 10px;
  font-weight: 800;
}

.toast.good .toast-dot {
  background: #d7e7b8;
}

.toast.coin .toast-dot {
  color: #79530d;
  background: #f5d475;
}

.toast.bad .toast-dot {
  color: #7f3f2c;
  background: #f0c7ae;
}

.toast.info .toast-dot {
  color: #35545a;
  background: #cfe2df;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-7px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateY(-5px) scale(.97); }
}

/* =========================================================
   Bottom dock
   ========================================================= */
.dock {
  position: absolute;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 20;
  width: min(1160px, calc(100% - 36px));
  min-height: 120px;
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 25px;
  background: var(--glass);
  box-shadow: 0 20px 55px rgba(48, 61, 36, .2), inset 0 1px 0 rgba(255, 255, 255, .9);
  transform: translateX(-50%);
}

.seed-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dock-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 18px;
  margin-bottom: 6px;
  padding-left: 2px;
}

.dock-label > span {
  color: #4c5c40;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.dock-label small {
  overflow: hidden;
  color: #969e88;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.seed-bag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 4px 9px;
  border: 1px solid #c6c5a8;
  border-radius: 999px;
  color: #52603f;
  background: #fff9e9;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
}

.seed-bag-btn:hover {
  border-color: #a9b18b;
  background: #fffdf4;
}

.seed-list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(68px, 1fr));
  gap: 8px;
  min-height: 80px;
}

.seed-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  min-width: 0;
  height: 82px;
  padding: 5px 4px 8px;
  overflow: hidden;
  border: 1px solid rgba(80, 94, 62, .14);
  border-radius: 15px;
  color: #4b5941;
  background: rgba(255, 253, 244, .55);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.seed-card:hover {
  z-index: 2;
  transform: translateY(-2px);
  border-color: rgba(93, 130, 71, .38);
  background: rgba(255, 253, 245, .88);
}

.seed-card.selected {
  z-index: 3;
  border-color: rgba(78, 119, 58, .72);
  background: #fffdf4;
  box-shadow: 0 0 0 2px rgba(91, 131, 69, .14), 0 8px 18px rgba(64, 82, 47, .13);
  transform: translateY(-2px);
}

.seed-card.selected::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 27px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--green);
  transform: translateX(-50%);
}

.seed-key {
  position: absolute;
  top: 6px;
  left: 7px;
  color: #a1a793;
  font-size: 8px;
  font-weight: 700;
}

.seed-count {
  position: absolute;
  top: 5px;
  right: 6px;
  padding: 1px 5px;
  border-radius: 7px;
  color: #718061;
  background: rgba(113, 130, 91, .1);
  font-size: 8.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.seed-count.zero {
  color: #a5674e;
  background: rgba(193, 120, 91, .12);
}

.seed-art {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  margin-bottom: 1px;
  filter: drop-shadow(0 3px 3px rgba(60, 71, 43, .1));
  transition: transform .2s cubic-bezier(.2, .8, .2, 1.2);
}

.seed-card:hover .seed-art,
.seed-card.selected .seed-art {
  transform: translateY(-2px) scale(1.05);
}

.seed-art canvas {
  width: 100%;
  height: 100%;
}

.seed-name {
  max-width: 100%;
  overflow: hidden;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .02em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.seed-card.locked {
  filter: saturate(.35);
}

.seed-card.locked .seed-art {
  opacity: .38;
}

.seed-card.locked .seed-name {
  opacity: .55;
}

.seed-lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: inherit;
  color: #6e795e;
  background: rgba(248, 243, 228, .68);
  font-size: 8px;
  font-weight: 700;
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}

.seed-lock svg {
  width: 14px;
  height: 14px;
  opacity: .68;
}

.dock-side {
  flex: 0 0 276px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding-top: 17px;
}

.quick-actions,
.main-actions {
  display: flex;
  gap: 8px;
}

.tool-btn {
  flex: 1;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 7px;
  border: 1px solid rgba(81, 97, 65, .16);
  border-radius: 9px;
  color: #68755a;
  background: rgba(255, 252, 241, .48);
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.tool-btn:hover:not(:disabled) {
  color: #3f5a33;
  border-color: rgba(81, 116, 58, .34);
  background: #fffdf4;
}

.tool-btn:disabled {
  opacity: .42;
}

.tool-btn svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.tool-btn kbd {
  padding: 1px 3px;
  border: 1px solid rgba(90, 104, 73, .16);
  border-radius: 3px;
  color: #a2a897;
  background: rgba(255, 255, 255, .38);
  font: 7px/1.2 var(--ui);
}

.round-btn {
  flex: 1;
  min-width: 0;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid rgba(81, 97, 65, .17);
  border-radius: 16px;
  color: #505f45;
  background: rgba(255, 253, 244, .66);
  text-align: left;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.round-btn:hover {
  transform: translateY(-1px);
  background: #fffdf4;
  box-shadow: 0 8px 18px rgba(60, 73, 44, .1);
}

.round-ico {
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #6a7d59;
  background: rgba(105, 127, 84, .1);
}

.round-ico svg {
  width: 23px;
  height: 23px;
}

.round-btn > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.round-btn small {
  color: #a6ac9b;
  font-size: 7.5px;
  font-weight: 600;
}

.shop-btn {
  border-color: #4f6b3c;
  color: #fff9e9;
  background: linear-gradient(145deg, #688b4e, #466738);
  box-shadow: 0 7px 18px rgba(63, 91, 47, .19), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.shop-btn:hover {
  background: linear-gradient(145deg, #729657, #4d7040);
  box-shadow: 0 9px 22px rgba(63, 91, 47, .24);
}

.shop-btn .round-ico {
  color: #f9edc5;
  background: rgba(255, 255, 255, .12);
}

.shop-btn small {
  color: rgba(255, 249, 230, .52);
}

/* =========================================================
   Camera reset
   ========================================================= */
.camera-reset {
  position: absolute;
  left: 50%;
  bottom: 178px;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 31px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 11px;
  color: #637354;
  background: rgba(255, 251, 238, .75);
  box-shadow: 0 5px 18px rgba(52, 65, 38, .1);
  font-size: 9.5px;
  transform: translateX(-50%);
}

.camera-reset svg {
  width: 14px;
  height: 14px;
}

/* =========================================================
   Modal & shop
   ========================================================= */
.modal-shell {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(35, 46, 28, .47);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  animation: fade-in .22s ease;
}

.modal-panel {
  position: relative;
  width: min(820px, 100%);
  max-height: min(84vh, 780px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 27px;
  background:
    radial-gradient(circle at 100% 0%, rgba(225, 235, 204, .65), transparent 30%),
    linear-gradient(150deg, #fffdf5, #fbf4e2 74%);
  box-shadow: 0 35px 90px rgba(29, 38, 24, .34), inset 0 1px 0 rgba(255, 255, 255, .9);
  animation: modal-in .32s cubic-bezier(.15, .9, .24, 1.05);
  scrollbar-width: thin;
  scrollbar-color: #c6c4ab transparent;
}

.modal-panel::-webkit-scrollbar {
  width: 7px;
}

.modal-panel::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #c9c7ae;
}

.modal-close {
  position: absolute;
  top: 17px;
  right: 18px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(77, 91, 61, .13);
  border-radius: 50%;
  color: #7b846e;
  background: rgba(255, 251, 239, .75);
  font-size: 20px;
  line-height: 1;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.modal-close:hover {
  color: var(--ink);
  background: #fffdf5;
  transform: rotate(6deg);
}

#modal-body {
  padding: 29px 31px 30px;
}

.modal-head {
  padding-right: 42px;
  margin-bottom: 18px;
}

.modal-head .eyebrow {
  margin-bottom: 7px;
}

.modal-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 29px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.15;
  color: #35472c;
}

.modal-head p {
  max-width: 560px;
  margin: 8px 0 0;
  color: #859079;
  font-size: 11px;
  line-height: 1.65;
}

.modal-head .inline-coin {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 6px;
  color: #8b641c;
  background: var(--gold-soft);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 18px;
  border: 1px solid rgba(75, 91, 59, .1);
  border-radius: 13px;
  background: rgba(239, 235, 217, .74);
}

.tab {
  flex: 1;
  height: 34px;
  border-radius: 9px;
  color: #8a927c;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

.tab:hover {
  color: #526446;
}

.tab.active {
  color: #3f5533;
  background: #fffdf4;
  box-shadow: 0 3px 10px rgba(64, 76, 49, .11);
}

.section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 21px 0 10px;
}

.section-label:first-of-type {
  margin-top: 0;
}

.section-label h3 {
  margin: 0;
  color: #47583a;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1em;
}

.section-label span {
  color: #9aa18d;
  font-size: 9px;
}

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

.shop-card {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  min-height: 120px;
  padding: 11px;
  overflow: hidden;
  border: 1px solid rgba(79, 94, 61, .13);
  border-radius: 17px;
  background: rgba(255, 253, 246, .68);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.shop-card:hover {
  border-color: rgba(91, 123, 67, .3);
  box-shadow: 0 8px 22px rgba(62, 74, 46, .08);
  transform: translateY(-1px);
}

.shop-card.locked {
  background: rgba(245, 240, 225, .62);
}

.shop-art {
  position: relative;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  align-self: center;
  border-radius: 13px;
  background:
    radial-gradient(circle at 32% 25%, rgba(255, 255, 255, .65), transparent 55%),
    linear-gradient(150deg, #eef1d9, #e4e8ca);
}

.shop-art canvas {
  width: 64px;
  height: 64px;
}

.shop-card.locked .shop-art {
  filter: saturate(.25);
  opacity: .55;
}

.shop-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 1px;
}

.shop-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.shop-name {
  overflow: hidden;
  color: #405237;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .07em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.shop-badge {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 5px;
  color: #778465;
  background: rgba(106, 126, 85, .1);
  font-size: 7.5px;
  font-weight: 700;
}

.shop-desc {
  overflow: hidden;
  color: #7f8b70;
  font-size: 8.5px;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.shop-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  color: #717f62;
  font-size: 8.5px;
  font-variant-numeric: tabular-nums;
}

.shop-stats b {
  color: #536743;
  font-weight: 750;
}

.shop-buy-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding-top: 2px;
}

.buy-btn {
  height: 25px;
  padding: 0 8px;
  border: 1px solid rgba(84, 110, 66, .2);
  border-radius: 7px;
  color: #5a704a;
  background: #f8f5e7;
  font-size: 8.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.buy-btn:hover:not(:disabled) {
  color: #fffdf0;
  border-color: #5c7d44;
  background: #5c7d44;
}

.buy-btn.primary {
  color: #fffdf1;
  border-color: #55763f;
  background: #5d8047;
}

.buy-btn.primary:hover:not(:disabled) {
  background: #4b6d39;
}

.buy-btn:disabled {
  opacity: .4;
}

.shop-buy-row .price {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  color: #9a762d;
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price-coin {
  width: 13px;
  height: 13px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.shop-lock-note {
  position: absolute;
  inset: auto 9px 9px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 26px;
  border: 1px dashed rgba(116, 125, 99, .25);
  border-radius: 7px;
  color: #7e8971;
  background: rgba(248, 245, 234, .9);
  font-size: 8.5px;
  font-weight: 650;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.shop-lock-note svg {
  width: 12px;
  height: 12px;
}

.land-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 15px;
  border: 1px solid rgba(178, 142, 81, .24);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(250, 231, 188, .65), transparent 50%),
    rgba(255, 252, 241, .72);
}

.land-art {
  width: 64px;
  height: 54px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #977440;
  background: #f1e6c8;
}

.land-art svg {
  width: 39px;
  height: 39px;
}

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

.land-info h4 {
  margin: 0 0 4px;
  color: #4f5d41;
  font-size: 11.5px;
  font-weight: 700;
}

.land-info p {
  margin: 0;
  color: #969e88;
  font-size: 9px;
  line-height: 1.5;
}

.land-action {
  flex: 0 0 auto;
  text-align: right;
}

.land-action .price-tag {
  display: block;
  margin-bottom: 6px;
  color: #8c671f;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.land-action .buy-btn {
  height: 29px;
  padding: 0 11px;
}

.land-all-done {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 15px;
  border: 1px dashed rgba(108, 126, 88, .24);
  border-radius: 16px;
  color: #859176;
  background: rgba(248, 245, 232, .55);
  font-size: 9.5px;
  line-height: 1.5;
}

.land-all-done svg {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  color: #79905f;
}

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

.store-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 65px;
  padding: 9px 11px;
  border: 1px solid rgba(80, 95, 62, .12);
  border-radius: 14px;
  background: rgba(255, 253, 246, .63);
}

.store-art {
  width: 45px;
  height: 45px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #eef1d9;
}

.store-art canvas {
  width: 40px;
  height: 40px;
}

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

.store-name {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: #4c5d40;
  font-size: 10.5px;
  font-weight: 700;
}

.store-name b {
  color: #8e671d;
  font-size: 9px;
  font-weight: 650;
}

.store-meta {
  margin-top: 3px;
  color: #98a08d;
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}

.store-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}

.sell-btn {
  min-width: 47px;
  height: 23px;
  padding: 0 7px;
  border: 1px solid rgba(83, 111, 63, .2);
  border-radius: 6px;
  color: #547043;
  background: #f8f6e9;
  font-size: 8px;
  font-weight: 700;
}

.sell-btn:hover:not(:disabled) {
  color: #fff;
  background: #5d7c48;
  border-color: #5d7c48;
}

.sell-btn:disabled {
  opacity: .36;
}

.sell-btn.all {
  color: #fff9e8;
  background: #5d7d46;
  border-color: #5d7d46;
}

.sell-btn.all:hover:not(:disabled) {
  background: #4c6b3a;
}

.sell-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 15px 16px;
  border: 1px solid rgba(190, 154, 88, .2);
  border-radius: 15px;
  background:
    radial-gradient(circle at 90% 0%, rgba(249, 224, 165, .65), transparent 55%),
    rgba(255, 252, 239, .7);
}

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

.sell-summary-copy small {
  display: block;
  margin-bottom: 3px;
  color: #a09372;
  font-size: 8px;
  letter-spacing: .1em;
}

.sell-summary-copy b {
  color: #4b5b3d;
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: .03em;
}

.sell-summary-copy b em {
  color: #a17622;
  font-family: var(--ui);
  font-size: 13px;
  font-style: normal;
  font-weight: 750;
}

.sell-all-btn {
  height: 34px;
  padding: 0 15px;
  border-radius: 9px;
  color: #fff9e8;
  background: linear-gradient(145deg, #65864c, #4d6d3b);
  box-shadow: 0 5px 13px rgba(70, 95, 50, .16);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.sell-all-btn:hover:not(:disabled) {
  background: linear-gradient(145deg, #719359, #587a43);
}

.sell-all-btn:disabled {
  opacity: .4;
}

.empty-state {
  padding: 30px 16px;
  text-align: center;
  border: 1px dashed rgba(99, 113, 82, .2);
  border-radius: 15px;
  color: #9ba38f;
  background: rgba(250, 247, 237, .42);
  font-size: 10px;
  line-height: 1.7;
}

.empty-state strong {
  display: block;
  margin-bottom: 3px;
  color: #6e7b60;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
}

/* settings */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.setting-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(81, 96, 64, .11);
  border-radius: 14px;
  background: rgba(255, 253, 246, .55);
}

.setting-icon {
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #6c7e59;
  background: #eef1df;
}

.setting-icon svg {
  width: 20px;
  height: 20px;
}

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

.setting-copy b {
  display: block;
  margin-bottom: 2px;
  color: #4a5940;
  font-size: 10.5px;
  font-weight: 700;
}

.setting-copy p {
  margin: 0;
  color: #99a08e;
  font-size: 8.5px;
  line-height: 1.45;
}

.switch {
  position: relative;
  width: 39px;
  height: 22px;
  flex: 0 0 auto;
  border: 1px solid rgba(84, 100, 67, .16);
  border-radius: 20px;
  background: #d9ddcb;
  transition: background .2s ease;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fffdf2;
  box-shadow: 0 2px 5px rgba(50, 62, 40, .17);
  transition: transform .2s ease;
}

.switch.on {
  border-color: #688a50;
  background: #6f9256;
}

.switch.on::after {
  transform: translateX(17px);
}

.danger-btn {
  height: 27px;
  padding: 0 10px;
  flex: 0 0 auto;
  border: 1px solid rgba(167, 95, 70, .24);
  border-radius: 8px;
  color: #a05d47;
  background: rgba(249, 236, 228, .7);
  font-size: 8.5px;
  font-weight: 650;
}

.danger-btn:hover {
  color: #fff;
  background: #ac644b;
  border-color: #ac644b;
}

.settings-note {
  margin: 17px 0 0;
  padding-top: 13px;
  border-top: 1px dashed rgba(88, 102, 71, .15);
  color: #a1a694;
  font-size: 8.5px;
  line-height: 1.7;
  text-align: center;
}

.save-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #7f8d6f;
  font-weight: 700;
}

/* settings sections + quality */
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 14px;
}

.settings-section:first-child {
  margin-top: 0;
}

.settings-section-title {
  padding: 2px 3px 0;
  color: #7a8a69;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

.settings-danger .settings-section-title {
  color: #a87463;
}

.quality-card {
  padding: 13px 14px;
  border: 1px solid rgba(81, 96, 64, .12);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(207, 224, 167, .3), transparent 42%),
    rgba(255, 253, 246, .68);
}

.quality-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #596a4c;
  font-size: 10px;
  font-weight: 800;
}

.quality-label select {
  max-width: 132px;
}

.quality-hint {
  margin: 7px 0 9px;
  color: #939d86;
  font-size: 8px;
  line-height: 1.6;
}

.quality-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.quality-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #7b886e;
  font-size: 8px;
  font-weight: 750;
}

.quality-grid select {
  width: 100%;
}

.quality-advanced {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed rgba(88, 102, 71, .14);
}

.quality-advanced summary {
  cursor: pointer;
  color: #7e8d70;
  font-size: 8px;
  font-weight: 800;
  list-style-position: inside;
}

.quality-toggle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 8px;
}

.quality-toggle-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid rgba(91, 112, 73, .12);
  border-radius: 8px;
  color: #6f7e60;
  background: rgba(255, 255, 248, .55);
  font-size: 8px;
  font-weight: 700;
}

.quality-toggle-grid input {
  accent-color: #6e8d56;
}

.quality-actions {
  display: flex;
  gap: 7px;
  margin-top: 10px;
}

.quality-actions .danger-btn {
  flex: 1;
}

.perf-overlay {
  position: fixed;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom) + 8px);
  z-index: 120;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 7px;
  color: #e9f3df;
  background: rgba(35, 48, 30, .72);
  font: 8px/1.4 ui-monospace, monospace;
  pointer-events: none;
}

.perf-overlay[hidden] {
  display: none !important;
}

.cloud-status {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 66px);
  left: 50%;
  z-index: 115;
  transform: translateX(-50%);
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  color: #fffdf2;
  background: rgba(93, 111, 72, .84);
  box-shadow: 0 4px 14px rgba(35, 48, 30, .16);
  font-size: 8px;
  font-weight: 750;
  pointer-events: none;
  white-space: nowrap;
}

.cloud-status.offline {
  color: #6e4f2f;
  border-color: rgba(176, 121, 67, .3);
  background: rgba(255, 239, 204, .94);
}

.cloud-status.online {
  color: #f5f8e9;
  background: rgba(91, 120, 70, .9);
}

.cloud-status[hidden] {
  display: none !important;
}

.login-offline {
  width: 100%;
  margin: 0 0 4px;
  padding: 10px 12px;
  border: 1px solid rgba(104, 126, 84, .28);
  border-radius: 10px;
  color: #647954;
  background: rgba(250, 248, 232, .8);
  font-size: 9px;
  font-weight: 750;
}

.login-offline[hidden] {
  display: none !important;
}

body.quality-no-blur *,
body.quality-no-blur *::before,
body.quality-no-blur *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.quality-no-transitions *,
body.quality-no-transitions *::before,
body.quality-no-transitions *::after {
  transition-duration: .01ms !important;
  animation-duration: .01ms !important;
}

@media (max-width: 700px) {
  .quality-grid,
  .quality-toggle-grid {
    grid-template-columns: 1fr;
  }
  .quality-label select {
    max-width: 128px;
  }
}

/* welcome */
.welcome {
  text-align: center;
  padding: 6px 5px 2px;
}

.welcome-ornament {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 24px;
  color: #f8edcb;
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .26), transparent 45%),
    linear-gradient(145deg, #769555, #3f6135);
  box-shadow: 0 12px 28px rgba(61, 88, 45, .25), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.welcome-ornament svg {
  width: 48px;
  height: 48px;
}

.welcome .eyebrow {
  margin-bottom: 8px;
}

.welcome h2 {
  margin: 0;
  color: #33452b;
  font-family: var(--display);
  font-size: 31px;
  letter-spacing: .12em;
}

.welcome .welcome-sub {
  max-width: 440px;
  margin: 9px auto 0;
  color: #88917b;
  font-size: 10.5px;
  line-height: 1.8;
}

.welcome-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 22px 0 20px;
  text-align: left;
}

.welcome-step {
  position: relative;
  padding: 13px 12px 12px;
  overflow: hidden;
  border: 1px solid rgba(83, 99, 65, .11);
  border-radius: 14px;
  background: rgba(255, 253, 244, .56);
}

.welcome-step::before {
  content: "";
  position: absolute;
  top: -16px;
  right: -16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(214, 226, 196, .33);
}

.step-number {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  margin-bottom: 9px;
  border-radius: 7px;
  color: #5d7748;
  background: #e7edd8;
  font-size: 9px;
  font-weight: 800;
}

.welcome-step h4 {
  margin: 0 0 4px;
  color: #4b5c3e;
  font-size: 10.5px;
  font-weight: 750;
}

.welcome-step p {
  margin: 0;
  color: #929b85;
  font-size: 8.5px;
  line-height: 1.6;
}

.welcome-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  border: 1px solid rgba(83, 99, 65, .15);
  border-radius: 10px;
  color: #5c6c4d;
  background: #f8f4e5;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.btn:hover {
  background: #fffdf4;
  transform: translateY(-1px);
}

.btn.primary {
  border-color: #526f3d;
  color: #fff9e7;
  background: linear-gradient(145deg, #688951, #4b6b39);
  box-shadow: 0 6px 17px rgba(67, 93, 49, .19);
}

.btn.primary:hover {
  background: linear-gradient(145deg, #74975b, #567741);
}

.btn svg {
  width: 15px;
  height: 15px;
}

/* confirmation */
.confirm {
  text-align: center;
  padding: 7px 5px 1px;
}

.confirm-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: 0 auto 13px;
  border-radius: 18px;
  color: #b46a4c;
  background: #f6e4d8;
}

.confirm-icon svg {
  width: 27px;
  height: 27px;
}

.confirm h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: .06em;
}

.confirm p {
  max-width: 380px;
  margin: 8px auto 18px;
  color: #8e9783;
  font-size: 10px;
  line-height: 1.75;
}

.confirm-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* keyboard focus */
:focus-visible {
  outline: 2px solid rgba(86, 125, 64, .75);
  outline-offset: 2px;
}

.noscript {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 20px;
  color: #35452c;
  background: #fbf4df;
  font-size: 15px;
}

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

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* =========================================================
   Test build: farmer portrait, tools, plot tooltip, creator
   ========================================================= */
.farmer-chip {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px 0 4px;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 14px;
  background: var(--glass);
  box-shadow: 0 8px 24px rgba(56, 67, 41, .11), inset 0 1px 0 rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  transition: transform .18s ease, background .18s ease;
}

.farmer-chip:hover {
  transform: translateY(-1px);
  background: #fffdf4;
}

.avatar-portrait {
  width: 33px;
  height: 33px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, #f6efce, #dfe5c8 70%);
  box-shadow: inset 0 0 0 1.5px rgba(91, 113, 70, .18);
}

.avatar-portrait canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.farmer-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.1;
}

.farmer-copy small {
  color: var(--muted);
  font-size: 8px;
  letter-spacing: .08em;
}

.farmer-copy b {
  max-width: 68px;
  overflow: hidden;
  color: #516147;
  font-size: 11.5px;
  font-weight: 750;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Larger seeds, only three of them */
.dock {
  min-height: 136px;
  gap: 14px;
  padding: 12px 14px;
}

.seed-panel {
  flex: 1.16;
}

.seed-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 88px;
}

.seed-card {
  height: 88px;
  padding-bottom: 8px;
  border-radius: 16px;
}

.seed-art {
  width: 48px;
  height: 48px;
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 66%, rgba(105, 136, 75, .12), transparent 70%);
}

.seed-name {
  font-size: 11.5px;
  font-weight: 700;
}

.seed-meta {
  margin-top: 2px;
  color: #9aa28d;
  font-size: 8px;
  line-height: 1;
  letter-spacing: .02em;
}

.seed-card.selected .seed-meta {
  color: #7d8c6d;
}

.seed-card.locked {
  filter: none;
}

/* Tool tray */
.tool-panel {
  flex: 1.36;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tool-list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 7px;
  min-height: 88px;
}

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 88px;
  min-width: 0;
  padding: 6px 3px;
  border: 1px solid rgba(80, 94, 62, .14);
  border-radius: 16px;
  color: #6c7a5e;
  background: rgba(255, 253, 244, .52);
  transition: transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}

.tool-card:hover {
  transform: translateY(-2px);
  border-color: rgba(93, 130, 71, .38);
  color: #4d663d;
  background: #fffdf4;
}

.tool-card.active {
  color: #fff9e7;
  border-color: #4f6c3b;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .13), transparent 52%),
    linear-gradient(145deg, #6d8c51, #476638);
  box-shadow: 0 7px 16px rgba(61, 87, 44, .2), inset 0 1px 0 rgba(255, 255, 255, .16);
  transform: translateY(-2px);
}

.tool-card.active:hover {
  color: #fffdf1;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .16), transparent 52%),
    linear-gradient(145deg, #77975a, #4f7040);
}

.tool-key {
  position: absolute;
  top: 6px;
  left: 7px;
  color: #a3aa98;
  font-size: 7.5px;
  font-weight: 700;
}

.tool-card.active .tool-key {
  color: rgba(255, 249, 231, .52);
}

.tool-ico {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  margin-top: 2px;
}

.tool-ico svg {
  width: 29px;
  height: 29px;
}

.tool-name {
  overflow: hidden;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tool-count {
  position: absolute;
  top: 5px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #7b5915;
  background: #f3dc9e;
  font-size: 8px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tool-card.active .tool-count {
  color: #4e4b2b;
  background: #f6e4b1;
}

.tool-card.empty .tool-count {
  color: #fff7e7;
  background: #b8785c;
}

/* Shop block */
.dock-side {
  flex: 0 0 148px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  padding-top: 16px;
}

.shop-btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 88px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #486638;
  border-radius: 17px;
  color: #fff9e8;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 224, 154, .18), transparent 45%),
    linear-gradient(145deg, #6b8e51, #3e6133);
  box-shadow: 0 8px 20px rgba(58, 84, 42, .21), inset 0 1px 0 rgba(255, 255, 255, .16);
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.shop-btn::after {
  content: "";
  position: absolute;
  right: -21px;
  bottom: -27px;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(255, 249, 227, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 13px rgba(255, 249, 227, .045);
}

.shop-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 11px 25px rgba(58, 84, 42, .27);
}

.shop-btn-ico {
  width: 27px;
  height: 27px;
  color: #f4e8bc;
}

.shop-btn-ico svg {
  width: 100%;
  height: 100%;
}

.shop-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.shop-copy b {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .08em;
  line-height: 1.1;
}

.shop-copy small {
  color: rgba(255, 249, 232, .55);
  font-size: 7.5px;
  letter-spacing: .03em;
}

.shop-btn kbd {
  position: absolute;
  top: 8px;
  right: 9px;
  color: rgba(255, 249, 230, .45);
  font: 7.5px/1.2 var(--ui);
}

.dock-note {
  margin: 0;
  color: #a0a793;
  font-size: 7.5px;
  letter-spacing: .04em;
  text-align: center;
}

/* Plot hover tooltip */
.plot-tip {
  position: absolute;
  z-index: 18;
  width: max-content;
  max-width: 238px;
  padding: 9px 11px 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  color: #f9f2da;
  background: rgba(44, 57, 35, .95);
  box-shadow: 0 10px 28px rgba(35, 44, 27, .25);
  font-size: 9.5px;
  line-height: 1.45;
  transform: translate(-50%, -100%);
  pointer-events: none;
  animation: tip-in .16s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.plot-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 9px;
  height: 9px;
  border-right: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: rgba(44, 57, 35, .95);
  transform: translateX(-50%) rotate(45deg);
}

.plot-tip .pt-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 3px;
}

.plot-tip .pt-name {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff9e6;
}

.plot-tip .pt-stage {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 5px;
  color: #cdddb4;
  background: rgba(255, 255, 255, .1);
  font-size: 7.5px;
  font-weight: 700;
}

.plot-tip .pt-stage.ready {
  color: #5b4714;
  background: #f1d48e;
}

.plot-tip .pt-stage.dry {
  color: #ffd8bd;
  background: rgba(195, 111, 72, .34);
}

.plot-tip .pt-row {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #b9c1a9;
  font-size: 8.5px;
}

.plot-tip .pt-row + .pt-row {
  margin-top: 2px;
}

.plot-tip .pt-row b {
  color: #e8ddb9;
  font-weight: 650;
}

.plot-tip .pt-bar {
  height: 3px;
  margin: 6px 0 5px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, .13);
}

.plot-tip .pt-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #a9c37e, #d8c778);
}

.plot-tip .pt-action {
  color: #f0d58e;
  font-size: 8.5px;
}

@keyframes tip-in {
  from { opacity: 0; transform: translate(-50%, calc(-100% - 3px)); }
  to { opacity: 1; transform: translate(-50%, -100%); }
}

/* Shop cards for the three seeds */
.shop-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.shop-grid.three .shop-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-height: 256px;
  padding: 14px;
}

.shop-grid.three .shop-art {
  width: 93px;
  height: 93px;
  margin: 0 auto;
  border-radius: 17px;
}

.shop-grid.three .shop-art canvas {
  width: 82px;
  height: 82px;
}

.shop-grid.three .shop-info {
  align-items: center;
  gap: 4px;
  text-align: center;
}

.shop-grid.three .shop-name-row {
  justify-content: center;
}

.shop-grid.three .shop-name {
  font-size: 18px;
}

.shop-grid.three .shop-desc {
  max-width: 100%;
  font-size: 9.5px;
  white-space: normal;
  line-height: 1.55;
}

.shop-grid.three .shop-stats {
  justify-content: center;
  gap: 3px 9px;
  font-size: 9px;
}

.shop-grid.three .shop-buy-row {
  width: 100%;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed rgba(81, 96, 64, .12);
}

.shop-grid.three .price {
  font-size: 10px;
}

.shop-grid.three .buy-btn {
  height: 27px;
  padding: 0 9px;
  font-size: 9px;
}

.shop-quantity {
  color: #8d977f;
  font-size: 8px;
  font-weight: 650;
}

.shop-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding: 11px 13px;
  border: 1px dashed rgba(93, 113, 72, .22);
  border-radius: 12px;
  color: #8d9781;
  background: rgba(246, 243, 229, .5);
  font-size: 9px;
  line-height: 1.65;
}

.shop-note svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: #7f916a;
}

/* Character creator */
.creator {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 26px;
  align-items: stretch;
  padding-top: 3px;
}

.creator-stage {
  position: relative;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 21px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 250, 228, .8), transparent 35%),
    linear-gradient(160deg, #e8eed2, #d1ddba 66%, #c2d2a8);
  box-shadow: inset 0 0 45px rgba(93, 116, 66, .13);
}

.creator-stage::before,
.creator-stage::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.creator-stage::before {
  top: 31px;
  left: 50%;
  width: 204px;
  height: 204px;
  border: 1px solid rgba(255, 253, 239, .55);
  box-shadow: 0 0 0 16px rgba(255, 253, 239, .13), 0 0 0 32px rgba(255, 253, 239, .06);
  transform: translateX(-50%);
}

.creator-stage::after {
  left: -30px;
  bottom: -44px;
  width: 150px;
  height: 150px;
  background: rgba(128, 157, 93, .15);
}

.creator-stage canvas {
  position: relative;
  z-index: 2;
  width: 240px;
  height: 290px;
  margin-bottom: -1px;
}

.creator-stage-label {
  position: absolute;
  top: 12px;
  left: 13px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 8px;
  color: #708160;
  background: rgba(255, 252, 239, .52);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .1em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.creator-stage-label i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #86a469;
}

.creator-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.creator-copy .eyebrow {
  margin-bottom: 6px;
}

.creator-copy h2 {
  margin: 0;
  color: #35472c;
  font-family: var(--display);
  font-size: 28px;
  letter-spacing: .08em;
  line-height: 1.15;
}

.creator-copy > p {
  margin: 7px 0 0;
  color: #8b947e;
  font-size: 9.5px;
  line-height: 1.7;
}

.creator-fields {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 17px;
}

.creator-field > label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: #647457;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .05em;
}

.creator-field > label span {
  color: #9aa28e;
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: .03em;
}

.choice-row {
  display: flex;
  gap: 5px;
}

.choice-btn {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(80, 94, 62, .13);
  border-radius: 9px;
  color: #7d8870;
  background: rgba(255, 252, 243, .62);
  font-size: 8px;
  font-weight: 650;
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}

.choice-btn:hover {
  border-color: rgba(92, 126, 68, .32);
  color: #546846;
  background: #fffdf5;
}

.choice-btn.selected {
  color: #4b6639;
  border-color: rgba(80, 117, 57, .55);
  background: #f8f9e9;
  box-shadow: 0 0 0 2px rgba(89, 126, 65, .1);
}

.choice-btn.selected::after {
  content: "✓";
  position: absolute;
  top: 3px;
  right: 4px;
  color: #668647;
  font-size: 6.5px;
  font-weight: 800;
}

.skin-dot {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(91, 64, 47, .12);
}

.hair-dot {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 50% 50% 42% 42%;
  background: #6b4b36;
  box-shadow: inset -3px -2px 0 rgba(0, 0, 0, .12);
}

.outfit-dot {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 4px;
  background: #6b8057;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.creator-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.creator-name-row input {
  width: 100%;
  height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(80, 94, 62, .16);
  border-radius: 9px;
  outline: none;
  color: #455839;
  background: rgba(255, 253, 244, .72);
  font: 600 10.5px var(--ui);
  letter-spacing: .04em;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.creator-name-row input::placeholder {
  color: #b0b6a4;
}

.creator-name-row input:focus {
  border-color: rgba(87, 124, 63, .55);
  box-shadow: 0 0 0 2px rgba(87, 124, 63, .1);
}

.creator-name-count {
  flex: 0 0 auto;
  color: #a1a890;
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}

.creator-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 17px;
}

.creator-actions .btn {
  height: 36px;
}

.creator-actions .creator-note {
  flex: 1;
  color: #a0a790;
  font-size: 8px;
  line-height: 1.5;
}

.creator-cancel {
  height: 36px;
  padding: 0 13px;
  border: 1px solid rgba(81, 96, 64, .14);
  border-radius: 10px;
  color: #7e8a70;
  background: rgba(255, 252, 242, .6);
  font-size: 9px;
  font-weight: 650;
}

.creator-cancel:hover {
  background: #fffdf4;
  color: #536846;
}

/* responsive tweaks for the test UI (placed after base overrides) */
@media (max-width: 1120px) {
  .seed-panel {
    flex: 1.08;
  }

  .tool-panel {
    flex: 1.32;
  }

  .dock-side {
    flex-basis: 134px;
  }

  .farmer-copy b {
    max-width: 54px;
  }
}

@media (max-width: 980px) {
  .dock {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 62px;
    grid-template-rows: auto auto;
    gap: 7px 8px;
    padding: 9px 10px;
  }

  .seed-panel {
    grid-column: 1;
    grid-row: 1;
  }

  .tool-panel {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .dock-side {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    padding-top: 17px;
    gap: 0;
  }

  .seed-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 62px;
    gap: 5px;
  }

  .seed-card {
    height: 62px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 3px;
    padding: 5px 7px;
    border-radius: 11px;
  }

  .seed-art {
    width: 31px;
    height: 31px;
    margin: 0;
    flex: 0 0 auto;
  }

  .seed-name {
    font-size: 9.5px;
  }

  .seed-meta {
    font-size: 7px;
  }

  .seed-count {
    top: 4px;
    right: 4px;
    font-size: 7.5px;
  }

  .seed-key {
    display: none;
  }

  .tool-list {
    min-height: 54px;
    gap: 5px;
  }

  .tool-card {
    height: 54px;
    flex-direction: row;
    gap: 4px;
    border-radius: 11px;
    padding: 4px;
  }

  .tool-ico {
    width: 23px;
    height: 23px;
    margin: 0;
  }

  .tool-ico svg {
    width: 22px;
    height: 22px;
  }

  .tool-name {
    font-size: 8.5px;
  }

  .tool-key {
    display: none;
  }

  .tool-count {
    top: 2px;
    right: 2px;
    min-width: 13px;
    height: 13px;
    font-size: 7px;
    padding: 0 3px;
  }

  .shop-btn {
    height: 100%;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 5px;
    border-radius: 12px;
  }

  .shop-btn-ico {
    width: 22px;
    height: 22px;
  }

  .shop-copy {
    align-items: center;
  }

  .shop-copy b {
    font-family: var(--ui);
    font-size: 8.5px;
    letter-spacing: .04em;
  }

  .shop-copy small,
  .shop-btn kbd,
  .dock-note {
    display: none;
  }

  .scene-hint {
    bottom: 183px;
  }

  .camera-reset {
    bottom: 180px;
  }

  .goals-panel {
    top: 80px;
  }

  .toasts {
    top: 82px;
  }

  .shop-grid.three {
    grid-template-columns: 1fr;
  }

  .shop-grid.three .shop-card {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    min-height: 108px;
    padding: 10px;
    gap: 10px;
  }

  .shop-grid.three .shop-art {
    width: 74px;
    height: 74px;
    margin: 0;
    align-self: center;
  }

  .shop-grid.three .shop-art canvas {
    width: 66px;
    height: 66px;
  }

  .shop-grid.three .shop-info {
    align-items: flex-start;
    text-align: left;
  }

  .shop-grid.three .shop-name-row,
  .shop-grid.three .shop-stats {
    justify-content: flex-start;
  }

  .shop-grid.three .shop-buy-row {
    grid-column: 1 / 3;
  }

  .creator {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px;
  }

  .creator-stage {
    min-height: 300px;
  }

  .creator-stage canvas {
    width: 205px;
    height: 250px;
  }

  .creator-copy h2 {
    font-size: 24px;
  }

  .creator-field {
    margin-bottom: 10px;
  }
}

@media (max-width: 680px) {
  .farmer-copy {
    display: none;
  }

  .farmer-chip {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-radius: 12px;
  }

  .avatar-portrait {
    width: 27px;
    height: 27px;
  }

  .seed-panel .dock-label small,
  .tool-panel .dock-label small {
    display: none;
  }

  .dock {
    grid-template-columns: minmax(0, 1fr) 53px;
    padding: 8px;
    gap: 6px 7px;
    border-radius: 18px;
  }

  .dock-label {
    min-height: 12px;
    margin-bottom: 3px;
  }

  .dock-label > span {
    font-size: 8.5px;
  }

  .seed-list {
    gap: 4px;
    min-height: 58px;
  }

  .seed-card {
    height: 58px;
    padding: 4px 5px;
    gap: 1px;
    border-radius: 10px;
  }

  .seed-art {
    width: 31px;
    height: 31px;
  }

  .seed-name {
    font-size: 8.5px;
  }

  .seed-meta {
    display: none;
  }

  .seed-count {
    top: 3px;
    right: 3px;
    padding: 1px 3px;
    font-size: 6.5px;
  }

  .tool-list {
    min-height: 47px;
    gap: 4px;
  }

  .tool-card {
    height: 47px;
    flex-direction: column;
    gap: 0;
    padding: 2px;
    border-radius: 9px;
  }

  .tool-ico {
    width: 20px;
    height: 20px;
  }

  .tool-ico svg {
    width: 19px;
    height: 19px;
  }

  .tool-name {
    font-size: 7.5px;
  }

  .tool-count {
    top: 2px;
    right: 2px;
    min-width: 12px;
    height: 12px;
    font-size: 6.5px;
  }

  .shop-btn {
    border-radius: 10px;
  }

  .shop-btn-ico {
    width: 20px;
    height: 20px;
  }

  .shop-copy b {
    font-size: 7.5px;
  }

  .dock-side {
    padding-top: 15px;
  }

  .scene-hint {
    display: none;
  }

  .camera-reset {
    bottom: 190px;
  }

  .plot-tip {
    display: none !important;
  }

  .goals-panel {
    top: 63px;
  }

  .toasts {
    top: 62px;
  }

  .shop-grid.three .shop-card {
    grid-template-columns: 61px minmax(0, 1fr);
    gap: 8px;
    padding: 9px;
    min-height: 100px;
  }

  .shop-grid.three .shop-art {
    width: 61px;
    height: 61px;
  }

  .shop-grid.three .shop-art canvas {
    width: 54px;
    height: 54px;
  }

  .shop-grid.three .shop-desc {
    font-size: 9px;
  }

  .creator {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .creator-stage {
    min-height: 190px;
    border-radius: 16px;
  }

  .creator-stage canvas {
    width: 176px;
    height: 200px;
  }

  .creator-stage::before {
    width: 155px;
    height: 155px;
    top: 16px;
  }

  .creator-copy h2 {
    font-size: 22px;
  }

  .creator-copy > p {
    display: none;
  }

  .creator-fields {
    margin-top: 12px;
    gap: 10px;
  }

  .creator-field {
    margin-bottom: 0;
  }

  .creator-field > label {
    margin-bottom: 4px;
  }

  .creator-field > label span {
    display: none;
  }

  .choice-btn {
    height: 29px;
    font-size: 7.5px;
    gap: 3px;
  }

  .choice-btn.selected::after {
    display: none;
  }

  .creator-actions {
    margin-top: 4px;
    padding-top: 11px;
  }

  .creator-actions .creator-note {
    display: none;
  }

  .creator-actions .btn {
    flex: 1;
    height: 36px;
  }

  .creator-cancel {
    height: 36px;
  }

  .skin-dot,
  .hair-dot {
    width: 12px;
    height: 12px;
  }

  .outfit-dot {
    width: 11px;
    height: 11px;
  }
}

@media (max-width: 520px) {
  .day-chip {
    display: none;
  }

  .hud {
    grid-template-columns: 1fr auto;
  }

  .hud-right {
    grid-column: 2;
  }
}

@media (max-width: 390px) {
  .brand-text h1 {
    font-size: 14px;
  }

  .coin-chip {
    padding-right: 5px;
  }

  .hud-right {
    gap: 4px;
  }

  .icon-btn,
  .farmer-chip {
    width: 33px;
    height: 33px;
  }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1120px) {
  .goals-panel {
    width: 258px;
  }

  .dock-side {
    flex-basis: 248px;
  }

  .brand-text h1 {
    font-size: 22px;
  }

  .brand {
    padding-right: 13px;
  }
}

@media (max-width: 980px) {
  .hud {
    left: 14px;
    right: 14px;
    gap: 8px;
  }

  .day-chip {
    padding: 0 13px;
  }

  .weather-name,
  .day-chip .hairline {
    display: none;
  }

  .level-copy {
    display: none;
  }

  .level-chip {
    padding-right: 5px;
  }

  .goals-panel {
    top: 80px;
    right: 14px;
    z-index: 30;
    box-shadow: 0 22px 55px rgba(45, 59, 34, .25);
  }

  .scene-hint {
    bottom: 188px;
  }

  .toasts {
    top: 82px;
  }

  .dock {
    width: calc(100% - 22px);
    left: 11px;
    bottom: max(10px, env(safe-area-inset-bottom));
    transform: none;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 22px;
  }

  .dock-label {
    margin-bottom: 5px;
    min-height: 15px;
  }

  .seed-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 64px;
    gap: 6px;
  }

  .seed-card {
    height: 67px;
    padding-bottom: 6px;
    border-radius: 12px;
  }

  .seed-art {
    width: 32px;
    height: 32px;
  }

  .seed-name {
    font-size: 9px;
  }

  .seed-key {
    display: none;
  }

  .seed-count {
    top: 4px;
    right: 4px;
    font-size: 7.5px;
    padding: 1px 4px;
  }

  .dock-side {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    padding-top: 0;
  }

  .quick-actions {
    flex: 1;
  }

  .main-actions {
    flex: 1;
  }

  .tool-btn {
    height: 34px;
    font-size: 9.5px;
    border-radius: 10px;
  }

  .round-btn {
    height: 34px;
    padding: 0 8px;
    border-radius: 10px;
  }

  .round-ico {
    width: 23px;
    height: 23px;
    border-radius: 7px;
  }

  .round-ico svg {
    width: 17px;
    height: 17px;
  }

  .round-btn > span:last-child {
    font-size: 9.5px;
  }

  .round-btn small {
    display: none;
  }

  .scene-hint .hint-drag,
  .scene-hint .hint-divider {
    display: none;
  }

  .camera-reset {
    bottom: 184px;
  }
}

@media (max-width: 680px) {
  .hud {
    top: max(10px, env(safe-area-inset-top));
    left: 10px;
    right: 10px;
    gap: 6px;
  }

  .brand {
    min-height: 45px;
    padding: 5px 10px 5px 5px;
    border-radius: 15px;
    gap: 7px;
  }

  .brand-mark {
    width: 35px;
    height: 35px;
    border-radius: 11px;
  }

  .brand-mark svg {
    width: 25px;
    height: 25px;
  }

  .brand-text h1 {
    font-size: 16px;
    letter-spacing: .05em;
  }

  .brand-text p {
    display: none;
  }

  .day-chip {
    height: 45px;
    gap: 7px;
    padding: 0 9px;
    border-radius: 15px;
  }

  .weather-orb {
    width: 21px;
    height: 21px;
  }

  .day-copy span {
    font-size: 7.5px;
    letter-spacing: .03em;
  }

  .day-copy strong {
    font-size: 12px;
  }

  .hud-right {
    gap: 5px;
  }

  .coin-chip {
    height: 36px;
    padding: 0 8px 0 5px;
    gap: 4px;
    border-radius: 12px;
  }

  .coin-glyph {
    width: 21px;
    height: 21px;
    font-size: 10px;
  }

  .coin-chip b {
    font-size: 12.5px;
  }

  .level-chip {
    display: none;
  }

  .icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .icon-btn svg {
    width: 18px;
    height: 18px;
  }

  .goal-badge {
    min-width: 17px;
    height: 17px;
    font-size: 8px;
    border-width: 1.5px;
  }

  .goals-panel {
    top: 64px;
    left: 10px;
    right: 10px;
    width: auto;
    max-height: calc(100vh - 250px);
    overflow: auto;
    padding: 15px 15px 12px;
    border-radius: 18px;
  }

  .toasts {
    top: 62px;
    width: calc(100vw - 20px);
  }

  .toast {
    font-size: 10px;
    padding: 7px 11px 7px 8px;
  }

  .scene-hint {
    display: none;
  }

  .camera-reset {
    bottom: 190px;
    height: 29px;
    font-size: 9px;
  }

  .dock {
    left: 8px;
    width: calc(100% - 16px);
    bottom: max(8px, env(safe-area-inset-bottom));
    padding: 9px 9px 8px;
    gap: 7px;
    border-radius: 19px;
  }

  .dock-label {
    padding-left: 3px;
    margin-bottom: 4px;
  }

  .dock-label > span {
    font-size: 9px;
  }

  .dock-label small {
    font-size: 8px;
  }

  .seed-list {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 2px 1px 3px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .seed-list::-webkit-scrollbar {
    display: none;
  }

  .seed-card {
    flex: 0 0 62px;
    width: 62px;
    height: 63px;
    border-radius: 11px;
  }

  .seed-art {
    width: 30px;
    height: 30px;
  }

  .seed-name {
    font-size: 8.5px;
  }

  .seed-lock {
    font-size: 7px;
  }

  .dock-side {
    gap: 5px;
  }

  .quick-actions {
    gap: 5px;
  }

  .main-actions {
    gap: 5px;
  }

  .tool-btn {
    height: 33px;
    padding: 0 5px;
    gap: 3px;
    font-size: 8.5px;
    border-radius: 9px;
  }

  .tool-btn svg {
    width: 13px;
    height: 13px;
  }

  .tool-btn kbd {
    display: none;
  }

  .round-btn {
    height: 33px;
    gap: 4px;
    padding: 0 5px;
    border-radius: 9px;
  }

  .round-ico {
    width: 21px;
    height: 21px;
  }

  .round-ico svg {
    width: 15px;
    height: 15px;
  }

  .round-btn > span:last-child {
    font-size: 8.5px;
  }

  .modal-shell {
    padding: 10px;
  }

  .modal-panel {
    max-height: calc(100vh - 20px);
    border-radius: 22px;
  }

  #modal-body {
    padding: 23px 16px 20px;
  }

  .modal-head {
    padding-right: 35px;
    margin-bottom: 14px;
  }

  .modal-head h2 {
    font-size: 24px;
  }

  .modal-head p {
    font-size: 10px;
    line-height: 1.6;
  }

  .modal-close {
    top: 12px;
    right: 12px;
    width: 29px;
    height: 29px;
  }

  .tabs {
    margin-bottom: 13px;
  }

  .shop-grid,
  .warehouse-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .shop-card {
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 101px;
    padding: 9px;
    border-radius: 14px;
  }

  .shop-art {
    width: 64px;
    height: 64px;
  }

  .shop-art canvas {
    width: 55px;
    height: 55px;
  }

  .shop-name {
    font-size: 15px;
  }

  .section-label {
    margin: 17px 0 8px;
  }

  .land-card {
    padding: 11px;
    gap: 9px;
  }

  .land-art {
    width: 49px;
    height: 45px;
  }

  .land-info p {
    display: none;
  }

  .land-action {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .land-action .price-tag {
    margin: 0;
    font-size: 9.5px;
  }

  .land-action .buy-btn {
    height: 27px;
    padding: 0 8px;
  }

  .warehouse-grid {
    gap: 6px;
  }

  .store-row {
    min-height: 58px;
    padding: 7px 9px;
  }

  .store-art {
    width: 38px;
    height: 38px;
  }

  .store-art canvas {
    width: 34px;
    height: 34px;
  }

  .sell-summary {
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
    padding: 12px;
  }

  .sell-all-btn {
    width: 100%;
  }

  .welcome-steps {
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 16px 0;
  }

  .welcome-step {
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: 8px;
    padding: 9px 10px;
  }

  .step-number {
    grid-row: span 2;
    margin: 0;
  }

  .welcome-step h4 {
    margin-top: 1px;
  }

  .welcome h2 {
    font-size: 25px;
  }

  .welcome .welcome-sub {
    font-size: 9.5px;
  }

  .welcome-ornament {
    width: 58px;
    height: 58px;
    margin-bottom: 10px;
    border-radius: 19px;
  }

  .welcome-ornament svg {
    width: 38px;
    height: 38px;
  }

  .setting-row {
    padding: 10px;
    gap: 8px;
  }

  .setting-icon {
    width: 32px;
    height: 32px;
  }

  .setting-copy p {
    display: none;
  }

  .settings-note {
    margin-top: 12px;
  }
}

@media (max-width: 400px) {
  .brand {
    padding-right: 8px;
  }

  .brand-text h1 {
    font-size: 14.5px;
  }

  .day-chip {
    padding: 0 7px;
    gap: 5px;
  }

  .weather-orb {
    width: 18px;
    height: 18px;
  }

  .day-copy strong {
    font-size: 11px;
  }

  .coin-chip {
    padding-right: 6px;
  }

  .icon-btn {
    width: 34px;
    height: 34px;
  }
}

@media (max-height: 650px) and (min-width: 681px) {
  .goals-panel {
    display: none;
  }

  .scene-hint {
    display: none;
  }

  .dock {
    min-height: 105px;
  }

  .seed-card {
    height: 72px;
  }
}

.coin-chip.coin-bump .coin-glyph {
  animation: coin-pop .42s cubic-bezier(.2, .85, .25, 1.2);
}

.coin-chip.coin-bump b {
  animation: coin-number .42s ease;
}

@keyframes coin-pop {
  0% { transform: scale(1) rotate(0); }
  35% { transform: scale(1.3) rotate(-8deg); }
  70% { transform: scale(.94) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes coin-number {
  0% { transform: translateY(0); }
  35% { transform: translateY(-2px); color: #9a711e; }
  100% { transform: translateY(0); }
}

@media (min-width: 681px) and (max-width: 980px) {
  .scene-hint,
  .camera-reset {
    bottom: 200px;
  }
}

/* =========================================================
   New bottom UI: floating seed drawer + compact tool belt
   ========================================================= */
.bottom-stack {
  position: absolute;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 20;
  width: min(1120px, calc(100% - 36px));
  transform: translateX(-50%);
  pointer-events: none;
}

.dock {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: min(820px, 100%);
  min-height: 0;
  height: auto;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 22px;
  transform: none;
  pointer-events: auto;
}

.dock .tool-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dock .dock-label {
  min-height: 15px;
  margin-bottom: 4px;
  padding-left: 2px;
}

.dock .dock-label > span {
  font-size: 9.5px;
}

.dock .dock-label small {
  font-size: 8.5px;
}

.dock .tool-list {
  min-height: 0;
  gap: 6px;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.dock .tool-card {
  height: 66px;
  gap: 1px;
  border-radius: 13px;
  padding: 4px 2px;
}

.dock .tool-ico {
  width: 25px;
  height: 25px;
  margin-top: 1px;
}

.dock .tool-ico svg {
  width: 24px;
  height: 24px;
}

.dock .tool-name {
  font-size: 9.5px;
}

.dock .tool-key {
  top: 5px;
  left: 6px;
  font-size: 7px;
}

.dock .tool-count {
  top: 4px;
  right: 5px;
  min-width: 14px;
  height: 14px;
  font-size: 7.5px;
}

.dock .dock-side {
  flex: 0 0 128px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
  padding-top: 19px;
}

.dock .shop-btn {
  width: 100%;
  height: 66px;
  border-radius: 13px;
  padding: 7px 9px;
  gap: 2px;
}

.dock .shop-btn-ico {
  width: 23px;
  height: 23px;
}

.dock .shop-copy b {
  font-size: 13px;
}

.dock .shop-copy small {
  font-size: 7px;
}

/* seed drawer */
.seed-drawer {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: min(1040px, 100%);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 7px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 21px;
  background: var(--glass);
  box-shadow: 0 18px 48px rgba(48, 61, 36, .2), inset 0 1px 0 rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity .22s ease, transform .25s cubic-bezier(.2, .8, .2, 1), visibility .22s;
}

.seed-drawer.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.seed-arrow {
  width: 42px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(83, 99, 65, .14);
  border-radius: 13px;
  color: #718260;
  background: rgba(255, 253, 244, .46);
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.seed-arrow svg {
  width: 23px;
  height: 23px;
}

.seed-arrow:hover:not(:disabled) {
  color: #486437;
  border-color: rgba(81, 116, 58, .34);
  background: #fffdf4;
  transform: translateY(-1px);
}

.seed-arrow:disabled {
  opacity: .5;
  color: #8f9b7e;
  cursor: default;
}

.seed-drawer-main {
  min-width: 0;
}

.seed-drawer-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 12px;
  padding: 0 2px;
}

.seed-drawer-title {
  flex: 0 0 auto;
  color: #4b5c40;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
}

.seed-drawer-sub {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #929b85;
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.seed-page {
  flex: 0 0 auto;
  color: #a1a793;
  font-size: 7.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

.seed-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 3px;
  min-height: 52px;
}

.seed-option {
  flex: 0 1 260px;
  min-width: 0;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 11px 4px 6px;
  border: 1px solid rgba(80, 94, 62, .13);
  border-radius: 13px;
  color: #4c5b41;
  background: rgba(255, 253, 244, .55);
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.seed-option:hover {
  transform: translateY(-1px);
  border-color: rgba(93, 130, 71, .36);
  background: #fffdf4;
}

.seed-option.selected {
  border-color: rgba(78, 119, 58, .65);
  background: #fffdf4;
  box-shadow: 0 0 0 2px rgba(91, 131, 69, .12), 0 5px 14px rgba(64, 82, 47, .09);
}

.seed-option-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: radial-gradient(circle at 45% 65%, rgba(113, 146, 80, .15), transparent 72%);
}

.seed-option-icon canvas {
  width: 36px;
  height: 36px;
}

.seed-option-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.seed-option-name {
  display: flex;
  align-items: baseline;
  gap: 5px;
  overflow: hidden;
  color: #4a5b3e;
  font-size: 11.5px;
  font-weight: 750;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.seed-option-name small {
  color: #a0a792;
  font-size: 7.5px;
  font-weight: 500;
}

.seed-option-meta {
  color: #8d9880;
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}

.seed-option-stock {
  color: #738364;
  font-weight: 750;
}

.seed-option-stock.zero {
  color: #ae6b50;
}

.seed-option-check {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fffdf2;
  background: var(--green);
  font-size: 8px;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .18s ease, transform .18s ease;
}

.seed-option.selected .seed-option-check {
  opacity: 1;
  transform: scale(1);
}

.seed-drawer.is-turning .seed-row {
  animation: seed-page-in .22s ease;
}

@keyframes seed-page-in {
  from { opacity: .2; transform: translateX(5px); }
  to { opacity: 1; transform: translateX(0); }
}

#game-shell.seed-open .scene-hint,
#game-shell.seed-open .camera-reset {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 5px);
}

.scene-hint,
.camera-reset {
  transition: opacity .18s ease, transform .18s ease;
}

.scene-hint {
  bottom: 140px;
}

.camera-reset {
  bottom: 140px;
}

/* remove the old fixed seed-card dock leftovers */
.seed-panel {
  display: none !important;
}

@media (max-width: 980px) {
  .bottom-stack {
    width: calc(100% - 22px);
  }

  .dock {
    width: min(820px, 100%);
    gap: 8px;
    padding: 8px 10px;
  }

  .dock .dock-side {
    flex-basis: 114px;
    padding-top: 19px;
  }

  .seed-drawer {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .bottom-stack {
    width: calc(100% - 16px);
    bottom: max(8px, env(safe-area-inset-bottom));
  }

  .dock {
    width: 100%;
    gap: 6px;
    padding: 7px 8px;
    border-radius: 16px;
  }

  .dock .dock-label {
    display: none;
  }

  .dock .tool-list {
    gap: 4px;
    min-height: 0;
  }

  .dock .tool-card {
    height: 47px;
    flex-direction: column;
    gap: 0;
    padding: 2px;
    border-radius: 9px;
  }

  .dock .tool-ico {
    width: 21px;
    height: 21px;
    margin: 0;
  }

  .dock .tool-ico svg {
    width: 18px;
    height: 18px;
  }

  .dock .tool-name {
    font-size: 7.5px;
  }

  .dock .tool-key {
    display: none;
  }

  .dock .tool-count {
    top: 2px;
    right: 2px;
    min-width: 12px;
    height: 12px;
    font-size: 6.5px;
    padding: 0 3px;
  }

  .dock .dock-side {
    flex: 0 0 50px;
    padding-top: 0;
    justify-content: stretch;
  }

  .dock .shop-btn {
    height: 47px;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 2px;
    border-radius: 9px;
  }

  .dock .shop-btn-ico {
    width: 18px;
    height: 18px;
  }

  .dock .shop-copy {
    align-items: center;
  }

  .dock .shop-copy b {
    font-size: 7.5px;
    letter-spacing: .02em;
  }

  .dock .shop-copy small,
  .dock .shop-btn kbd {
    display: none;
  }

  .seed-drawer {
    bottom: calc(100% + 7px);
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    gap: 5px;
    padding: 7px 7px 8px;
    border-radius: 16px;
  }

  .seed-arrow {
    width: 30px;
    height: 51px;
    border-radius: 9px;
  }

  .seed-arrow svg {
    width: 15px;
    height: 15px;
  }

  .seed-drawer-head {
    min-height: 13px;
    gap: 5px;
    padding: 0 1px;
  }

  .seed-drawer-title {
    font-size: 8.5px;
  }

  .seed-drawer-sub {
    font-size: 7px;
  }

  .seed-page {
    font-size: 6.5px;
  }

  .seed-row {
    gap: 4px;
    margin-top: 4px;
    min-height: 48px;
  }

  .seed-option {
    flex: 1;
    height: 48px;
    gap: 3px;
    padding: 3px 4px 3px 3px;
    border-radius: 9px;
  }

  .seed-option-icon {
    width: 27px;
    height: 27px;
    border-radius: 7px;
  }

  .seed-option-icon canvas {
    width: 26px;
    height: 26px;
  }

  .seed-option-name {
    font-size: 8.5px;
    gap: 2px;
  }

  .seed-option-name small {
    display: none;
  }

  .seed-option-meta {
    font-size: 6.5px;
  }

  .seed-option-check {
    width: 12px;
    height: 12px;
    font-size: 6px;
  }

  .scene-hint {
    display: none;
  }

  .camera-reset {
    bottom: 118px;
    height: 28px;
    font-size: 8.5px;
  }
}

@media (pointer: coarse) {
  .scene-hint .hint-drag,
  .scene-hint .hint-divider {
    display: none;
  }
}

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

/* Final layout guards — keep the 3-seed / 5-tool dock intact on small screens */
@media (max-width: 980px) {
  .dock {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 62px;
    grid-template-rows: auto auto;
    gap: 7px 8px;
    padding: 9px 10px;
  }

  .seed-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 62px;
    gap: 5px;
    overflow: visible;
  }

  .seed-card {
    flex: initial;
    width: auto;
    height: 62px;
    flex-direction: row;
    justify-content: center;
    gap: 3px;
    padding: 5px 7px;
    border-radius: 11px;
  }

  .seed-art {
    width: 31px;
    height: 31px;
  }

  .seed-key {
    display: none;
  }

  .dock-side {
    align-self: stretch;
    gap: 0;
    padding-top: 17px;
  }
}

@media (max-width: 680px) {
  .dock {
    grid-template-columns: minmax(0, 1fr) 53px;
    gap: 6px 7px;
    padding: 8px;
    border-radius: 18px;
  }

  .seed-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 58px;
    gap: 4px;
    overflow: visible;
    padding: 0;
  }

  .seed-card {
    flex: none;
    width: auto;
    height: 58px;
    flex-direction: row;
    justify-content: center;
    gap: 1px;
    padding: 4px 5px;
    border-radius: 10px;
  }

  .seed-art {
    width: 31px;
    height: 31px;
  }

  .seed-name {
    font-size: 8.5px;
  }

  .seed-meta {
    display: none;
  }

  .seed-count {
    top: 3px;
    right: 3px;
    padding: 1px 3px;
    font-size: 6.5px;
  }

  .dock-side {
    padding-top: 15px;
  }

  .tool-card {
    height: 47px;
    flex-direction: column;
    gap: 0;
    padding: 2px;
    border-radius: 9px;
  }

  .tool-list {
    min-height: 47px;
    gap: 4px;
  }

  .tool-ico {
    width: 20px;
    height: 20px;
    margin: 0;
  }

  .tool-ico svg {
    width: 19px;
    height: 19px;
  }

  .tool-name {
    font-size: 7.5px;
  }
}

/* =========================================================
   Farm profile, wallet, shop and warehouse UI
   ========================================================= */
.wallet {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 4px;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 14px;
  background: var(--glass);
  box-shadow: 0 8px 24px rgba(56, 67, 41, .11), inset 0 1px 0 rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}

.currency-chip {
  position: relative;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px 0 3px;
  border-radius: 10px;
}

.currency-chip + .currency-chip::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: rgba(92, 106, 73, .12);
}

.currency-chip b {
  color: #4f5d43;
  font-size: 12.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.currency-icon {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: #fff8e7;
  box-shadow: inset 0 0 0 1px rgba(128, 107, 70, .12), 0 2px 5px rgba(88, 68, 38, .09);
}

.currency-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.currency-chip.currency-bump .currency-icon {
  animation: currency-pop .36s ease;
}

.currency-chip.currency-bump b {
  animation: currency-number .36s ease;
}

@keyframes currency-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.15) rotate(-3deg); }
  100% { transform: scale(1); }
}

@keyframes currency-number {
  0% { color: #a67521; transform: translateY(0); }
  35% { color: #5a7f3d; transform: translateY(-2px); }
  100% { color: #4f5d43; transform: translateY(0); }
}

/* tool art */
.dock .tool-ico {
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 8px;
  background: #fff8e6;
  box-shadow: inset 0 0 0 1px rgba(105, 112, 76, .11), 0 2px 5px rgba(64, 75, 45, .09);
  transition: transform .18s ease, box-shadow .18s ease;
}

.dock .tool-ico img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.dock .tool-card:hover .tool-ico {
  transform: translateY(-1px) scale(1.05);
}

.dock .tool-card.active .tool-ico {
  box-shadow: 0 0 0 2px rgba(255, 250, 226, .55), 0 3px 7px rgba(32, 49, 26, .2);
}

/* store / warehouse side actions */
.dock {
  width: min(1012px, 100%);
}

.dock .dock-side {
  flex: 0 0 300px;
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: stretch;
  gap: 8px;
  padding-top: 19px;
}

.dock .dock-action {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 66px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 7px 9px;
  overflow: hidden;
  border: 1px solid #486638;
  border-radius: 13px;
  color: #fff9e8;
  text-align: left;
  box-shadow: 0 8px 20px rgba(58, 84, 42, .2), inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.dock .dock-action.shop-btn {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 224, 154, .18), transparent 45%),
    linear-gradient(145deg, #6b8e51, #3e6133);
}

.dock .dock-action.warehouse-btn {
  border-color: #6d593b;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 226, 168, .16), transparent 45%),
    linear-gradient(145deg, #92754a, #675131);
  box-shadow: 0 8px 20px rgba(85, 65, 39, .2), inset 0 1px 0 rgba(255, 255, 255, .16);
}

.dock .dock-action.pasture-btn {
  border-color: #5f7450;
  background:
    radial-gradient(circle at 100% 0%, rgba(233, 239, 190, .18), transparent 45%),
    linear-gradient(145deg, #80965e, #556d43);
  box-shadow: 0 8px 20px rgba(65, 86, 50, .2), inset 0 1px 0 rgba(255, 255, 255, .16);
}

.dock .pasture-art {
  display: grid;
  place-items: center;
  color: #9b7a4e;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .8), transparent 70%),
    #f3ecd7;
}

.dock .pasture-art svg {
  width: 25px;
  height: 25px;
}

.dock .dock-action:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 11px 24px rgba(48, 67, 37, .25);
}

.dock-action-art {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 10px;
  background: #fff8e7;
  box-shadow: 0 2px 6px rgba(38, 43, 27, .16);
}

.dock-action-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.dock-action-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.dock-action-copy b {
  color: #fff9e8;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .08em;
  line-height: 1.15;
}

.dock-action-copy small {
  overflow: hidden;
  color: rgba(255, 249, 232, .56);
  font-size: 7px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dock-action kbd {
  position: absolute;
  right: 8px;
  bottom: 6px;
  color: rgba(255, 249, 230, .46);
  font: 7px/1.2 var(--ui);
}

.dock-count {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #614d2f;
  background: #f6e4b1;
  font-size: 7px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.dock-count[hidden] {
  display: none;
}

/* shop modal heading */
.shop-head,
.warehouse-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.shop-head-art,
.warehouse-hero {
  width: 66px;
  height: 66px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 17px;
  background: #fff8e7;
  box-shadow: 0 8px 20px rgba(70, 73, 48, .12), inset 0 0 0 1px rgba(89, 76, 47, .08);
}

.shop-head-art img,
.warehouse-hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.shop-head-copy,
.warehouse-head-copy {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.shop-head-copy p,
.warehouse-head-copy p {
  max-width: 620px;
}

.inline-currency-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin: 0 1px -3px 0;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(105, 79, 29, .16);
}

/* currency icons in the profile */
.profile-card {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  padding-top: 3px;
}

.profile-stage {
  min-height: 442px;
}

.profile-stage canvas {
  width: 250px;
  height: 300px;
  margin-bottom: 30px;
}

.profile-board-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 8px;
  color: #778a63;
  background: rgba(255, 252, 239, .5);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .12em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.profile-stage-foot {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .46);
  border-radius: 10px;
  color: #71815e;
  background: rgba(255, 252, 239, .52);
  font-size: 7.5px;
  letter-spacing: .04em;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.profile-stage-foot i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #94a681;
}

.profile-stage-foot b {
  color: #5d734b;
  font-weight: 750;
}

.profile-copy {
  gap: 11px;
}

.profile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-right: 30px;
}

.profile-identity {
  flex: 1;
  min-width: 0;
}

.profile-kicker {
  display: block;
  margin: 5px 0 0;
  color: #93a081;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
}

.profile-name-input {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px dashed rgba(91, 112, 71, .3);
  outline: none;
  color: #3d5232;
  background: transparent;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
  transition: border-color .18s ease;
}

.profile-name-input:focus {
  border-bottom-color: rgba(85, 125, 61, .65);
}

.profile-sub {
  margin: 5px 0 0;
  color: #98a18b;
  font-size: 8px;
  letter-spacing: .03em;
}

.profile-level {
  flex: 0 0 146px;
  padding: 10px 11px;
  border: 1px solid rgba(91, 106, 70, .13);
  border-radius: 13px;
  background: rgba(255, 252, 241, .62);
}

.profile-level-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
  color: #60764d;
}

.profile-level-line span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
}

.profile-level-line small {
  color: #93a081;
  font-size: 7px;
}

.profile-xp {
  height: 5px;
  margin: 7px 0 5px;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(93, 111, 72, .12);
}

.profile-xp i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8aa665, #5e7d48);
}

.profile-level > small {
  color: #98a18b;
  font-size: 7px;
  font-variant-numeric: tabular-nums;
}

.profile-wallet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.profile-currency {
  min-width: 0;
  min-height: 57px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(85, 98, 64, .11);
  border-radius: 12px;
  background: rgba(255, 253, 244, .54);
}

.profile-currency-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 12px;
  background: #fff8e7;
  box-shadow: inset 0 0 0 1px rgba(109, 93, 58, .08);
}

.profile-currency-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.profile-currency-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.profile-currency-copy small {
  color: #9aa38c;
  font-size: 7.5px;
  letter-spacing: .04em;
}

.profile-currency-copy b {
  overflow: hidden;
  color: #536746;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.profile-bio-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.profile-bio-block label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #647457;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .06em;
}

.profile-bio-block label span {
  color: #9ca48f;
  font-size: 7px;
  font-weight: 500;
}

.profile-bio-block textarea {
  width: 100%;
  min-height: 48px;
  max-height: 96px;
  resize: vertical;
  padding: 8px 10px;
  border: 1px solid rgba(80, 94, 62, .14);
  border-radius: 10px;
  outline: none;
  color: #526448;
  background: rgba(255, 253, 244, .66);
  font: 500 9.5px/1.6 var(--ui);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.profile-bio-block textarea:focus {
  border-color: rgba(87, 124, 63, .5);
  box-shadow: 0 0 0 2px rgba(87, 124, 63, .09);
}

.profile-board {
  padding: 9px 10px;
  border: 1px solid rgba(85, 99, 64, .11);
  border-radius: 12px;
  background: rgba(242, 239, 220, .48);
}

.profile-board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.profile-board-head span {
  color: #596e4a;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
}

.profile-board-head small {
  color: #a1a891;
  font-size: 7px;
}

.profile-board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.profile-board-grid > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 7px;
  border-left: 1px solid rgba(98, 112, 76, .13);
}

.profile-board-grid > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.profile-board-grid small {
  color: #9aa28c;
  font-size: 7px;
}

.profile-board-grid b {
  color: #566a48;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.profile-board-grid em {
  color: #9aa28c;
  font-size: 7px;
  font-style: normal;
  font-weight: 500;
}

.profile-achievements {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 25px;
}

.profile-achievements-label {
  color: #819071;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
}

.profile-achievement-pill {
  padding: 4px 7px;
  border: 1px solid rgba(96, 112, 72, .13);
  border-radius: 8px;
  color: #758567;
  background: rgba(255, 253, 244, .55);
  font-size: 7.5px;
  font-weight: 700;
}

.profile-achievement-pill.done {
  color: #4f6d3d;
  border-color: rgba(86, 124, 62, .28);
  background: #f2f7e5;
}

.profile-achievement-note {
  color: #a1a891;
  font-size: 7px;
}

.profile-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 2px;
}

.profile-actions .profile-note {
  flex: 1;
  color: #a0a790;
  font-size: 7.5px;
}

.profile-actions .btn,
.profile-actions .creator-cancel {
  height: 36px;
  flex: 0 0 auto;
}

.profile-actions .btn {
  padding: 0 16px;
}

/* warehouse modal */
.warehouse-summary {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(100, 88, 60, .13);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(249, 231, 188, .54), transparent 55%),
    rgba(255, 252, 241, .6);
}

.warehouse-summary > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 88px;
}

.warehouse-summary span {
  color: #9b8d75;
  font-size: 7.5px;
}

.warehouse-summary b {
  color: #5f573f;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.warehouse-summary b small {
  color: #8f856f;
  font-size: 8px;
  font-weight: 500;
}

.warehouse-sell-all {
  margin-left: auto;
  height: 34px;
  padding: 0 13px;
  border: 1px solid #876a3d;
  border-radius: 9px;
  color: #fff9e9;
  background: linear-gradient(145deg, #a38150, #765b36);
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
  transition: filter .18s ease, transform .18s ease;
}

.warehouse-sell-all:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.warehouse-sell-all:disabled {
  opacity: .38;
}

.warehouse-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.warehouse-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border: 1px solid rgba(82, 96, 64, .12);
  border-radius: 14px;
  background: rgba(255, 253, 245, .62);
}

.warehouse-item.empty {
  opacity: .64;
  background: rgba(245, 241, 226, .44);
}

.warehouse-art {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 62%, rgba(114, 143, 82, .14), transparent 70%);
}

.warehouse-art canvas {
  width: 54px;
  height: 54px;
}

.warehouse-info {
  min-width: 0;
}

.warehouse-name-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.warehouse-name-row b {
  color: #4c6040;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .06em;
}

.warehouse-name-row span {
  color: #a18a64;
  font-size: 7.5px;
}

.warehouse-info p {
  overflow: hidden;
  margin: 2px 0 3px;
  color: #969e8a;
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.warehouse-stock {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #7e8b70;
  font-size: 8px;
}

.warehouse-stock strong {
  color: #566b47;
  font-size: 11px;
}

.warehouse-stock span {
  color: #a19173;
}

.warehouse-actions {
  display: flex;
  gap: 5px;
}

.warehouse-empty-products {
  padding: 13px 14px;
  border: 1px dashed rgba(104, 108, 79, .2);
  border-radius: 11px;
  color: #9ca38f;
  background: rgba(247, 243, 229, .45);
  font-size: 8.5px;
  line-height: 1.6;
}

.warehouse-sell {
  height: 29px;
  padding: 0 9px;
  border: 1px solid rgba(92, 108, 72, .16);
  border-radius: 8px;
  color: #657954;
  background: #f8f5e8;
  font-size: 8.5px;
  font-weight: 700;
  white-space: nowrap;
}

.warehouse-sell:hover:not(:disabled) {
  color: #fffdf1;
  border-color: #65824e;
  background: #65824e;
}

.warehouse-sell.primary {
  color: #fffdf1;
  border-color: #5e7d47;
  background: #5e7d47;
}

.warehouse-sell:disabled {
  opacity: .38;
}

@media (max-width: 980px) {
  .hud {
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  .day-chip {
    display: none;
  }

  .hud-right {
    grid-column: 2;
  }

  .dock {
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: 8px;
    padding: 8px 10px;
  }

  .wallet {
    height: 38px;
  }

  .currency-chip {
    height: 31px;
    padding-right: 6px;
  }

  .currency-chip b {
    font-size: 11.5px;
  }

  .currency-icon {
    width: 21px;
    height: 21px;
  }

  .dock .dock-side {
    flex-basis: 230px;
    gap: 6px;
  }

  .dock-action-copy b {
    font-size: 12px;
  }

  .dock-action-copy small {
    font-size: 6.5px;
  }

  .dock-action-art {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }
}

@media (max-width: 820px) {
  .profile-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .profile-stage {
    min-height: 238px;
  }

  .profile-stage canvas {
    width: 190px;
    height: 222px;
    margin-bottom: 25px;
  }

  .profile-stage::before {
    width: 162px;
    height: 162px;
    top: 20px;
  }

  .profile-stage::after {
    width: 100px;
    height: 100px;
  }

  .profile-name-input {
    font-size: 24px;
  }

  .profile-level {
    flex-basis: 132px;
    padding: 8px 9px;
  }

  .profile-wallet {
    gap: 6px;
  }

  .profile-currency {
    min-height: 50px;
    padding: 6px;
    gap: 6px;
  }

  .profile-currency-icon {
    width: 31px;
    height: 31px;
    border-radius: 9px;
  }

  .profile-currency-copy b {
    font-size: 12px;
  }

  .profile-board-grid b {
    font-size: 12px;
  }

  .profile-actions .btn {
    padding: 0 12px;
  }

  .warehouse-head,
  .shop-head {
    gap: 10px;
    margin-bottom: 13px;
  }

  .shop-head-art,
  .warehouse-hero {
    width: 49px;
    height: 49px;
    border-radius: 13px;
  }

  .modal-panel.profile-modal,
  .modal-panel.warehouse-modal {
    width: 100%;
  }

  .modal-panel.profile-modal #modal-body {
    padding: 48px 18px 20px;
  }

  .modal-panel.warehouse-modal #modal-body {
    padding: 19px 18px 20px;
  }
}

@media (max-width: 680px) {
  .brand-text {
    display: none;
  }

  .brand {
    min-height: 42px;
    padding: 4px;
    border-radius: 13px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .brand-mark svg {
    width: 25px;
    height: 25px;
  }

  .wallet {
    height: 35px;
    padding: 0 2px;
    gap: 0;
    border-radius: 11px;
  }

  .currency-chip {
    height: 29px;
    gap: 3px;
    padding: 0 5px 0 2px;
    border-radius: 8px;
  }

  .currency-chip + .currency-chip::before {
    top: 6px;
    bottom: 6px;
  }

  .currency-chip b {
    font-size: 10px;
  }

  .currency-icon {
    width: 18px;
    height: 18px;
  }

  .hud-right {
    gap: 4px;
  }

  .dock .dock-side {
    flex: 0 0 88px;
    gap: 4px;
    padding-top: 0;
  }

  .dock .dock-action {
    height: 51px;
    padding: 1px 2px 2px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    gap: 0;
  }

  .dock-action-art {
    width: 21px;
    height: 21px;
    border-radius: 7px;
  }

  .dock-action-copy {
    display: flex;
    align-items: center;
    margin-top: 0;
  }

  .dock-action-copy b {
    font-family: var(--ui);
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
  }

  .dock-action-copy small,
  .dock-action kbd {
    display: none;
  }

  .dock-count {
    top: 2px;
    right: 2px;
    min-width: 12px;
    height: 12px;
    padding: 0 3px;
    font-size: 6.5px;
  }

  .dock {
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: 6px 7px;
    padding: 8px;
    border-radius: 18px;
  }

  .warehouse-item {
    grid-template-columns: 49px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .warehouse-art {
    width: 46px;
    height: 46px;
  }

  .warehouse-art canvas {
    width: 44px;
    height: 44px;
  }

  .warehouse-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .warehouse-summary {
    gap: 9px;
    padding: 8px 9px;
  }

  .warehouse-summary > div {
    min-width: 0;
    flex: 1;
  }

  .warehouse-summary b {
    font-size: 14px;
  }

  .warehouse-sell-all {
    height: 30px;
    padding: 0 9px;
    font-size: 8px;
  }

  .shop-head-art,
  .warehouse-hero {
    width: 44px;
    height: 44px;
  }

  .profile-stage {
    min-height: 220px;
  }

  .profile-stage canvas {
    width: 166px;
    height: 198px;
  }

  .profile-stage::before {
    width: 138px;
    height: 138px;
  }

  .profile-top {
    gap: 10px;
    padding-right: 0;
  }

  .profile-name-input {
    font-size: 22px;
  }

  .profile-level {
    flex-basis: 115px;
  }

  .profile-currency {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-height: 68px;
  }

  .profile-currency-icon {
    width: 28px;
    height: 28px;
  }

  .profile-currency-copy b {
    font-size: 11px;
  }

  .profile-achievement-note {
    display: none;
  }

  .profile-actions .profile-note {
    display: none;
  }

  .profile-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 440px) {
  .brand-text {
    display: none;
  }

  .hud {
    left: 10px;
    right: 10px;
  }

  .icon-btn,
  .farmer-chip {
    width: 33px;
    height: 33px;
  }

  .wallet {
    height: 33px;
  }

  .currency-chip {
    height: 27px;
    padding-right: 4px;
  }

  .currency-chip b {
    font-size: 9.5px;
  }

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

  .profile-wallet {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-currency {
    padding: 5px;
  }
}

/* =========================================================
   Social button, shop tabs, pasture scene and animal panel
   ========================================================= */
.social-btn {
  overflow: hidden;
  padding: 0;
  border-radius: 13px;
  background: #fff8e7;
}

.social-btn img {
  width: 30px;
  height: 30px;
  display: block;
  border-radius: 9px;
  object-fit: cover;
}

.shop-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 16px;
  padding: 4px;
  border: 1px solid rgba(80, 94, 62, .1);
  border-radius: 13px;
  background: rgba(237, 233, 216, .62);
}

.shop-tab {
  flex: 1;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 9px;
  color: #87917a;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .04em;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

.shop-tab span {
  color: #a1a992;
  font-size: 8px;
  font-weight: 500;
}

.shop-tab.active {
  color: #455a37;
  background: #fffdf4;
  box-shadow: 0 3px 10px rgba(64, 76, 49, .1);
}

.shop-tab.active span {
  color: #879b73;
}

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

.animal-shop-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(79, 94, 61, .13);
  border-radius: 16px;
  background: rgba(255, 253, 246, .68);
}

.animal-shop-art {
  width: 74px;
  height: 74px;
  align-self: center;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #f8f5e2, #e5e9d1);
}

.animal-shop-art canvas {
  width: 90px;
  height: 90px;
}

.animal-shop-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.animal-shop-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.animal-shop-name-row b {
  color: #45583a;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .07em;
}

.animal-shop-card p {
  min-height: 27px;
  margin: 0;
  color: #8a947c;
  font-size: 8px;
  line-height: 1.5;
  text-align: center;
}

.animal-shop-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 7px;
  color: #818e72;
  font-size: 8px;
}

.animal-shop-stats b {
  color: #5b704b;
}

.animal-shop-buy-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding-top: 2px;
}

.animal-shop-buy-row .price {
  margin-left: 0;
  font-size: 8px;
}

.animal-shop-buy-row .buy-btn {
  margin-left: auto;
}

/* ---------------- pasture scene ---------------- */
.pasture-scene {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  background: #accb8a;
  animation: pasture-in .32s ease;
}

@keyframes pasture-in {
  from { opacity: 0; transform: scale(1.015); }
  to { opacity: 1; transform: scale(1); }
}

.pasture-scene > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.pasture-top {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 18px;
  right: 18px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.pasture-top > * {
  pointer-events: auto;
}

.pasture-back,
.pasture-brand,
.pasture-top-actions,
.pasture-bottom,
.pasture-hint {
  border: 1px solid rgba(255, 255, 255, .65);
  background: rgba(255, 251, 238, .72);
  box-shadow: 0 10px 30px rgba(52, 68, 38, .14), inset 0 1px 0 rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(15px) saturate(1.12);
  backdrop-filter: blur(15px) saturate(1.12);
}

.pasture-back {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px 0 8px;
  border-radius: 13px;
  color: #5b6d4d;
  font-size: 9px;
  font-weight: 700;
  transition: transform .18s ease, background .18s ease;
}

.pasture-back:hover {
  transform: translateY(-1px);
  background: #fffdf4;
}

.pasture-back svg {
  width: 16px;
  height: 16px;
}

.pasture-brand {
  min-height: 42px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 14px 5px 12px;
  border-radius: 13px;
}

.pasture-eyebrow {
  color: #8f9c7e;
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: .14em;
}

.pasture-brand h2 {
  margin: 0;
  color: #3f5532;
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: .14em;
  line-height: 1;
}

.pasture-cap {
  color: #8e9b7c;
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}

.pasture-top-actions {
  margin-left: auto;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px;
  border-radius: 13px;
}

.pasture-coins {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px 0 4px;
  color: #566849;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.pasture-coins img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.pasture-icon-btn {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px 0 4px;
  border-radius: 9px;
  color: #5c6f4d;
  background: rgba(255, 253, 244, .45);
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.pasture-icon-btn:hover {
  background: #fffdf4;
}

.pasture-icon-btn img {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  object-fit: cover;
}

.pasture-hint {
  position: absolute;
  left: 50%;
  bottom: 104px;
  z-index: 4;
  padding: 6px 12px;
  border-radius: 9px;
  color: #7d896f;
  font-size: 8px;
  letter-spacing: .03em;
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
}

.pasture-bottom {
  position: absolute;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 5;
  width: min(900px, calc(100% - 32px));
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border-radius: 17px;
  transform: translateX(-50%);
}

.pasture-action {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 15px;
  border: 1px solid rgba(82, 99, 65, .15);
  border-radius: 10px;
  color: #617451;
  background: rgba(255, 253, 244, .7);
  font-size: 9.5px;
  font-weight: 750;
  white-space: nowrap;
}

.pasture-action:hover:not(:disabled) {
  background: #fffdf4;
}

.pasture-action.primary {
  color: #fffdf1;
  border-color: #5b7b44;
  background: linear-gradient(145deg, #6e9053, #4b693a);
  box-shadow: 0 5px 13px rgba(57, 81, 42, .18);
}

.pasture-action:disabled {
  opacity: .45;
}

.pasture-action-plus {
  font-size: 16px;
  line-height: 1;
}

.pasture-bottom-note {
  margin-left: auto;
  padding-right: 8px;
  color: #9ba28f;
  font-size: 8px;
  line-height: 1.4;
}

.animal-panel {
  position: absolute;
  right: 24px;
  bottom: 94px;
  z-index: 7;
  width: 332px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 19px;
  color: #4f6044;
  background:
    radial-gradient(circle at 100% 0%, rgba(224, 237, 202, .68), transparent 42%),
    rgba(255, 252, 240, .92);
  box-shadow: 0 20px 55px rgba(38, 51, 27, .24), inset 0 1px 0 rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
  animation: animal-panel-in .22s ease;
}

@keyframes animal-panel-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.animal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  color: #849077;
  background: rgba(255, 253, 244, .65);
  font-size: 17px;
  line-height: 1;
}

.animal-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 22px;
}

.animal-portrait {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: #f3f1da;
  box-shadow: inset 0 0 0 1px rgba(100, 115, 77, .12);
}

.animal-portrait canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.animal-title {
  min-width: 0;
}

.animal-eyebrow {
  color: #9ba48d;
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: .11em;
}

.animal-title h3 {
  margin: 2px 0 1px;
  color: #405432;
  font-family: var(--display);
  font-size: 21px;
  letter-spacing: .08em;
  line-height: 1.15;
}

.animal-stage {
  color: #8f9c7e;
  font-size: 8px;
}

.animal-progress {
  margin-top: 11px;
}

.animal-progress-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  color: #8c997c;
  font-size: 8px;
}

.animal-progress-line b {
  color: #61784f;
  font-variant-numeric: tabular-nums;
}

.animal-bar {
  height: 6px;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(94, 111, 73, .12);
}

.animal-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #a5bf78, #6e9151);
  transition: width .35s ease;
}

.animal-egg-state {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  padding: 7px 9px;
  border: 1px solid rgba(96, 112, 72, .11);
  border-radius: 9px;
  color: #8a967e;
  background: rgba(246, 242, 226, .56);
  font-size: 8px;
}

.animal-egg-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b4bca7;
}

.animal-egg-state.ready {
  color: #637d4e;
  border-color: rgba(104, 135, 79, .24);
  background: rgba(237, 245, 220, .7);
}

.animal-egg-state.ready .animal-egg-dot {
  background: #87a95e;
  box-shadow: 0 0 0 3px rgba(135, 169, 94, .15);
}

.animal-actions {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}

.animal-action {
  flex: 1;
  min-width: 0;
  height: 31px;
  padding: 0 5px;
  border: 1px solid rgba(86, 102, 67, .14);
  border-radius: 8px;
  color: #667b54;
  background: rgba(255, 253, 244, .7);
  font-size: 8px;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.animal-action:hover:not(:disabled) {
  background: #fffdf4;
}

.animal-action.collect {
  border-color: rgba(99, 131, 71, .26);
  background: #edf4dc;
}

.animal-action.sell {
  color: #9a7439;
  border-color: rgba(163, 126, 65, .22);
  background: #fbf5e1;
}

.animal-action.slaughter {
  color: #a16f58;
  border-color: rgba(164, 104, 78, .18);
}

.animal-action.confirm {
  color: #fff9ed;
  border-color: #a65d44;
  background: #a65d44;
}

.animal-action:disabled {
  opacity: .42;
}

.animal-panel-note {
  margin: 8px 0 0;
  color: #9ca48f;
  font-size: 7.5px;
  line-height: 1.5;
}

#game-shell.pasture-mode #scene,
#game-shell.pasture-mode .scene-vignette,
#game-shell.pasture-mode .hud,
#game-shell.pasture-mode .goals-panel,
#game-shell.pasture-mode .bottom-stack,
#game-shell.pasture-mode .scene-hint,
#game-shell.pasture-mode .camera-reset,
#game-shell.pasture-mode .plot-tip {
  visibility: hidden !important;
  pointer-events: none !important;
}

#game-shell.pasture-mode .toasts {
  top: 78px;
  z-index: 60;
}

#game-shell.pasture-mode .modal-shell {
  z-index: 80;
}

/* ---------------- social modal ---------------- */
.social-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 13px;
}

.social-hero {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 16px;
  background: #fff8e7;
  box-shadow: 0 8px 20px rgba(65, 70, 46, .13);
}

.social-hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.social-head-copy {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.social-head-copy p {
  max-width: 610px;
}

.social-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  padding: 4px;
  border: 1px solid rgba(80, 94, 62, .1);
  border-radius: 14px;
  background: rgba(237, 233, 216, .62);
}

.social-tab {
  flex: 1;
  min-height: 49px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 9px 4px 5px;
  border-radius: 9px;
  color: #849173;
  text-align: left;
}

.social-tab img {
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
  border-radius: 9px;
  object-fit: cover;
}

.social-tab span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.social-tab b {
  font-size: 10.5px;
  color: #5e704f;
}

.social-tab small {
  overflow: hidden;
  color: #9da58f;
  font-size: 7px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.social-tab.active {
  background: #fffdf4;
  box-shadow: 0 3px 10px rgba(64, 76, 49, .1);
}

.friend-code-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(92, 103, 73, .12);
  border-radius: 13px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 231, 178, .45), transparent 55%),
    rgba(255, 252, 241, .58);
}

.friend-code-card > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.friend-code-card small {
  color: #9a927a;
  font-size: 7px;
}

.friend-code-card b {
  color: #665b3f;
  font-size: 13px;
  letter-spacing: .1em;
}

.friend-code-card > span {
  margin-left: auto;
  max-width: 220px;
  color: #a2a18c;
  font-size: 7px;
  line-height: 1.4;
  text-align: right;
}

.friend-copy {
  height: 27px;
  padding: 0 9px;
  border: 1px solid rgba(101, 111, 82, .16);
  border-radius: 7px;
  color: #6a7b56;
  background: rgba(255, 253, 244, .7);
  font-size: 7.5px;
  font-weight: 700;
  white-space: nowrap;
}

.social-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 16px 0 8px;
}

.social-block-head h3 {
  margin: 0;
  color: #4b5f3e;
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: .1em;
}

.social-block-head span {
  color: #9ba28e;
  font-size: 8px;
}

.friend-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.friend-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(81, 96, 64, .11);
  border-radius: 12px;
  background: rgba(255, 253, 245, .56);
}

.friend-avatar,
.rank-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fffdf1;
  font-family: var(--display);
  font-weight: 700;
  background: var(--friend-color, var(--rank-color, #a9c27d));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28);
}

.friend-avatar {
  width: 37px;
  height: 37px;
  font-size: 15px;
}

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

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

.friend-name-row b {
  overflow: hidden;
  color: #536645;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.friend-online {
  color: #a0a894;
  font-size: 6.5px;
}

.friend-online.on::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 3px;
  border-radius: 50%;
  background: #7fa25f;
}

.friend-info p {
  overflow: hidden;
  margin: 2px 0 0;
  color: #98a08d;
  font-size: 7.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.friend-gift {
  flex: 0 0 auto;
  height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(95, 125, 69, .22);
  border-radius: 8px;
  color: #5d7849;
  background: #eef4df;
  font-size: 7.5px;
  font-weight: 700;
  white-space: nowrap;
}

.friend-gift.done {
  color: #a2a995;
  border-color: transparent;
  background: rgba(232, 229, 214, .55);
}

.friend-add-row {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.friend-add-row input {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(80, 94, 62, .14);
  border-radius: 8px;
  outline: none;
  color: #536545;
  background: rgba(255, 253, 244, .7);
  font: 500 9px var(--ui);
}

.friend-add-row input:focus {
  border-color: rgba(87, 124, 63, .5);
}

.friend-add {
  height: 32px;
  padding: 0 12px;
  border: 1px solid #5f7d49;
  border-radius: 8px;
  color: #fffdf2;
  background: #607f4a;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.rank-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(135, 108, 63, .16);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 228, 166, .5), transparent 55%),
    rgba(255, 252, 241, .6);
}

.rank-summary-art {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 12px;
  background: #fff8e7;
}

.rank-summary-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rank-summary > div:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rank-summary small {
  color: #9d927b;
  font-size: 7px;
}

.rank-summary b {
  color: #635a41;
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: .04em;
}

.rank-summary span {
  color: #9d9b86;
  font-size: 7.5px;
}

.rank-table-head {
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr) 48px;
  gap: 8px;
  margin: 13px 3px 5px;
  color: #a1a891;
  font-size: 7px;
}

.rank-table-head span:last-child {
  text-align: right;
}

.rank-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rank-row {
  display: grid;
  grid-template-columns: 36px 31px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(255, 253, 244, .42);
}

.rank-row.current {
  border-color: rgba(104, 135, 79, .24);
  background: rgba(237, 244, 220, .72);
}

.rank-no {
  color: #9aa28d;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}

.rank-no.medal {
  font-size: 16px;
}

.rank-avatar {
  width: 29px;
  height: 29px;
  font-size: 11px;
}

.rank-person {
  min-width: 0;
}

.rank-person b {
  display: block;
  overflow: hidden;
  color: #556846;
  font-size: 9.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rank-person b em {
  margin-left: 3px;
  padding: 1px 4px;
  border-radius: 4px;
  color: #5f7c48;
  background: #e8f1d6;
  font-size: 6px;
  font-style: normal;
}

.rank-person small {
  display: block;
  overflow: hidden;
  margin-top: 1px;
  color: #9aa18c;
  font-size: 7px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rank-score {
  color: #78643d;
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 820px) {
  .animal-shop-grid {
    grid-template-columns: 1fr;
  }

  .animal-shop-card {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
  }

  .animal-shop-art {
    grid-row: 1 / span 2;
    width: 64px;
    height: 64px;
  }

  .animal-shop-art canvas {
    width: 76px;
    height: 76px;
  }

  .animal-shop-info {
    grid-column: 2;
  }

  .animal-shop-name-row {
    justify-content: flex-start;
  }

  .animal-shop-card p,
  .animal-shop-stats {
    text-align: left;
    justify-content: flex-start;
  }

  .animal-shop-buy-row {
    grid-column: 1 / -1;
  }

  .social-tab small {
    display: none;
  }

  .friend-code-card {
    flex-wrap: wrap;
  }

  .friend-code-card > span {
    flex-basis: 100%;
    max-width: none;
    margin-left: 0;
    text-align: left;
  }

  .pasture-top {
    top: 10px;
    left: 10px;
    right: 10px;
    gap: 5px;
  }

  .pasture-back {
    height: 37px;
    padding: 0 8px 0 5px;
  }

  .pasture-back span {
    display: none;
  }

  .pasture-brand {
    min-height: 37px;
    padding: 4px 9px;
    gap: 5px;
  }

  .pasture-brand h2 {
    font-size: 16px;
  }

  .pasture-eyebrow {
    display: none;
  }

  .pasture-cap {
    font-size: 7px;
  }

  .pasture-top-actions {
    min-height: 37px;
    padding: 2px;
  }

  .pasture-coins {
    height: 31px;
    padding: 0 5px 0 3px;
    font-size: 10px;
  }

  .pasture-coins img {
    width: 19px;
    height: 19px;
  }

  .pasture-icon-btn {
    width: 31px;
    height: 31px;
    padding: 0;
    justify-content: center;
  }

  .pasture-icon-btn img {
    width: 23px;
    height: 23px;
  }

  .pasture-icon-btn span {
    display: none;
  }

  .pasture-hint {
    display: block;
    bottom: 67px;
    padding: 4px 8px;
    font-size: 7px;
  }

  .pasture-bottom {
    bottom: max(9px, env(safe-area-inset-bottom));
    width: calc(100% - 18px);
    min-height: 50px;
    gap: 5px;
    padding: 5px;
  }

  .pasture-action {
    flex: 1;
    height: 38px;
    padding: 0 8px;
    font-size: 8.5px;
  }

  .pasture-bottom-note {
    display: none;
  }

  .animal-panel {
    left: 10px;
    right: 10px;
    bottom: 70px;
    width: auto;
    max-height: 52vh;
    overflow: auto;
    padding: 13px;
  }

  .animal-portrait {
    width: 54px;
    height: 54px;
  }

  .animal-title h3 {
    font-size: 18px;
  }

  .social-head {
    gap: 9px;
  }

  .social-hero {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  .social-head-copy p {
    font-size: 9px;
  }

  .social-tabs {
    margin-bottom: 12px;
  }

  .social-tab {
    min-height: 42px;
    gap: 6px;
    padding: 3px 6px 3px 3px;
  }

  .social-tab img {
    width: 31px;
    height: 31px;
  }

  .social-tab b {
    font-size: 9px;
  }

  .friend-card {
    flex-wrap: wrap;
  }

  .friend-gift {
    margin-left: auto;
  }

  .friend-code-card b {
    font-size: 11px;
  }

  .friend-code-card .friend-copy {
    margin-left: auto;
  }

  .rank-row {
    grid-template-columns: 29px 27px minmax(0, 1fr) 38px;
    gap: 6px;
    padding: 4px 6px;
  }

  .rank-avatar {
    width: 25px;
    height: 25px;
    font-size: 9px;
  }

  .rank-summary {
    gap: 9px;
    padding: 9px;
  }

  .rank-summary-art {
    width: 43px;
    height: 43px;
  }

  .rank-summary b {
    font-size: 16px;
  }

  .social-head-copy h2 {
    font-size: 23px;
  }
}

/* =========================================================
   Large seed catalogue
   ========================================================= */
.seed-category-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 5px 0 6px;
}

.seed-category-tab {
  height: 22px;
  min-width: 43px;
  padding: 0 9px;
  border: 1px solid rgba(91, 105, 72, .12);
  border-radius: 7px;
  color: #8b977b;
  background: rgba(247, 243, 230, .62);
  font-size: 7.5px;
  font-weight: 700;
}

.seed-category-tab.active {
  color: #fffdf2;
  border-color: #6e8b53;
  background: #6e8b53;
}

.seed-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px 10px;
  align-items: stretch;
}

.seed-row .seed-option {
  flex: none;
  width: auto;
  min-width: 0;
}

.shop-seed-categories {
  display: flex;
  gap: 5px;
  margin-bottom: 11px;
  padding: 4px;
  border: 1px solid rgba(87, 101, 69, .1);
  border-radius: 11px;
  background: rgba(237, 233, 216, .5);
}

.shop-seed-category {
  flex: 1;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 7px;
  color: #8b977b;
  font-size: 8px;
  font-weight: 750;
}

.shop-seed-category small {
  color: #a9ad9c;
  font-size: 6.5px;
  font-weight: 500;
}

.shop-seed-category.active {
  color: #566c47;
  background: #fffdf4;
  box-shadow: 0 2px 8px rgba(64, 76, 49, .09);
}

@media (max-width: 680px) {
  .seed-category-tabs {
    gap: 3px;
    margin: 3px 0 4px;
  }

  .seed-category-tab {
    min-width: 0;
    flex: 1;
    height: 20px;
    padding: 0 4px;
    font-size: 6.5px;
  }

  .seed-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    min-height: 0;
  }

  .seed-row .seed-option {
    height: 42px;
    padding: 3px;
  }

  .seed-row .seed-option-icon {
    width: 22px;
    height: 22px;
  }

  .seed-row .seed-option-icon canvas {
    width: 22px;
    height: 22px;
  }

  .seed-row .seed-option-name {
    font-size: 7.5px;
    gap: 1px;
  }

  .seed-row .seed-option-name small {
    display: none;
  }

  .seed-row .seed-option-meta {
    font-size: 6.5px;
  }

  .seed-row .seed-option-check {
    width: 12px;
    height: 12px;
  }

  .shop-seed-category {
    height: 25px;
    font-size: 7px;
    gap: 2px;
  }

  .shop-seed-category small {
    font-size: 6px;
  }
}

/* =========================================================
   Pets, activity center, task center
   ========================================================= */
.side-rail {
  position: absolute;
  left: 18px;
  top: 92px;
  z-index: 36;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.rail-btn {
  position: relative;
  width: 54px;
  height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 15px;
  color: #5e7350;
  background: rgba(255, 251, 238, .76);
  box-shadow: 0 9px 24px rgba(52, 68, 38, .14), inset 0 1px 0 rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .04em;
  pointer-events: auto;
  transition: transform .18s ease, background .18s ease;
}

.rail-btn:hover {
  transform: translateY(-2px);
  background: #fffdf4;
}

.rail-art {
  width: 38px;
  height: 38px;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: #f4efdc;
}

.rail-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.rail-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fffdf1;
  background: #d58457;
  box-shadow: 0 2px 5px rgba(130, 76, 45, .25);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.rail-badge[hidden] {
  display: none;
}

/* special seeds sit below the normal seed cards, only once a pet brings one */
.special-seed-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.special-seed-row[hidden] {
  display: none;
}

.special-seed-option {
  min-width: 178px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 4px;
  border: 1px solid rgba(125, 111, 159, .22);
  border-radius: 10px;
  color: #665889;
  background:
    radial-gradient(circle at 100% 0%, rgba(226, 214, 255, .45), transparent 55%),
    rgba(251, 248, 238, .78);
  text-align: left;
}

.special-seed-option:hover {
  background: #fffdf4;
}

.special-seed-option.selected {
  border-color: rgba(117, 95, 163, .62);
  box-shadow: 0 0 0 2px rgba(126, 106, 171, .12);
}

.special-seed-art {
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 8px;
  background: #f0ead9;
}

.special-seed-art canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.special-seed-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.special-seed-copy b {
  color: #625383;
  font-size: 9px;
  white-space: nowrap;
}

.special-seed-copy small {
  color: #9a92a9;
  font-size: 7px;
  white-space: nowrap;
}

.special-seed-stock {
  margin-left: auto;
  color: #6d5b91;
  font-size: 9px;
  font-weight: 800;
}

/* pet shop */
.pet-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pet-shop-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(85, 97, 68, .13);
  border-radius: 16px;
  background: rgba(255, 253, 246, .68);
}

.pet-shop-art {
  width: 100%;
  aspect-ratio: 1.12;
  overflow: hidden;
  background: #f6efdd;
}

.pet-shop-art img,
.pet-shop-art canvas {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 42%;
  transition: transform .28s ease;
}

.pet-shop-card:hover .pet-shop-art img,
.pet-shop-card:hover .pet-shop-art canvas {
  transform: scale(1.035);
}

.pet-shop-info {
  padding: 8px 9px 9px;
}

.pet-shop-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.pet-shop-name-row b {
  color: #4b5f3c;
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: .07em;
  white-space: nowrap;
}

.pet-shop-name-row .shop-badge {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pet-shop-info p {
  min-height: 27px;
  margin: 4px 0 6px;
  color: #8a947c;
  font-size: 8px;
  line-height: 1.5;
}

.pet-shop-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  color: #8d977e;
  font-size: 7.5px;
}

.pet-shop-stats b {
  color: #5f744e;
}

.pet-shop-buy-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
}

.pet-shop-buy-row .price {
  margin-left: 0;
  font-size: 8px;
}

.pet-shop-buy-row .buy-btn {
  margin-left: auto;
}

/* pet panel */
.pet-panel {
  position: fixed;
  right: 24px;
  bottom: 94px;
  z-index: 45;
  width: 318px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 19px;
  color: #4f6044;
  background:
    radial-gradient(circle at 100% 0%, rgba(235, 225, 200, .62), transparent 45%),
    rgba(255, 252, 240, .93);
  box-shadow: 0 20px 55px rgba(38, 51, 27, .24), inset 0 1px 0 rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
  animation: animal-panel-in .22s ease;
}

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

.pet-panel .animal-close {
  position: absolute;
}

.pet-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 20px;
}

.pet-portrait {
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 18px;
  background: #f3eddb;
  box-shadow: inset 0 0 0 1px rgba(100, 115, 77, .12);
}

.pet-portrait img,
.pet-portrait canvas {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 38%;
}

.pet-title {
  min-width: 0;
}

.pet-title h3 {
  margin: 2px 0 1px;
  color: #405432;
  font-family: var(--display);
  font-size: 21px;
  letter-spacing: .07em;
  line-height: 1.15;
}

.pet-species {
  color: #8f9c7e;
  font-size: 8px;
}

.pet-stats {
  display: flex;
  gap: 13px;
  margin-top: 11px;
  padding: 7px 9px;
  border: 1px solid rgba(96, 112, 72, .1);
  border-radius: 9px;
  color: #8a967e;
  background: rgba(246, 242, 226, .56);
  font-size: 8px;
}

.pet-stats b {
  color: #62784f;
  font-size: 11px;
}

.pet-gift-state {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(137, 111, 69, .12);
  border-radius: 9px;
  color: #8f826e;
  background: rgba(250, 244, 226, .62);
  font-size: 8px;
}

.pet-actions {
  display: flex;
  gap: 5px;
  margin-top: 9px;
}

.pet-actions .animal-action {
  flex: 1;
}

.pet-hearts {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  overflow: hidden;
}

.pet-hearts span {
  position: absolute;
  color: #e5a178;
  font-size: 17px;
  opacity: 0;
  animation: pet-heart 1.25s ease-out forwards;
  text-shadow: 0 2px 4px rgba(133, 82, 54, .16);
}

@keyframes pet-heart {
  0% { opacity: 0; transform: translate(0, 4px) scale(.7) rotate(-8deg); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--drift, 0), -42px) scale(1.15) rotate(9deg); }
}

/* activity / task modals */
.event-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 14px;
}

.event-head-art {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 16px;
  background: #fff8e7;
  box-shadow: 0 8px 20px rgba(65, 70, 46, .13);
}

.event-head-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.event-head-copy {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.event-card {
  display: flex;
  gap: 11px;
  padding: 10px;
  border: 1px solid rgba(86, 100, 68, .12);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(240, 235, 205, .36), transparent 55%),
    rgba(255, 253, 246, .56);
}

.checkin-card {
  margin-bottom: 10px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 231, 177, .42), transparent 55%),
    rgba(255, 252, 241, .66);
}

.event-card-art {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 12px;
  background: #f6efdd;
}

.event-card-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.event-card-body {
  flex: 1;
  min-width: 0;
}

.event-card-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.event-card-title h3 {
  margin: 0;
  color: #4c613d;
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: .06em;
}

.event-card-title span {
  flex: 0 0 auto;
  color: #a39b82;
  font-size: 7.5px;
}

.event-card-body p {
  margin: 2px 0 7px;
  color: #8d9780;
  font-size: 8px;
  line-height: 1.5;
}

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

.event-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin-top: 6px;
  color: #958c76;
  font-size: 7.5px;
}

.event-claim,
.task-claim {
  height: 27px;
  padding: 0 10px;
  border: 1px solid #5f7d49;
  border-radius: 8px;
  color: #fffdf2;
  background: #607f4a;
  font-size: 8px;
  font-weight: 750;
  white-space: nowrap;
}

.event-claim:disabled,
.task-claim:disabled {
  border-color: rgba(120, 127, 105, .14);
  color: #a7a99b;
  background: rgba(229, 227, 213, .55);
}

.event-claim.done,
.task-claim.done {
  border-color: transparent;
  color: #8d937f;
  background: rgba(232, 230, 216, .55);
}

.event-progress-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.event-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #899477;
  font-size: 7px;
}

.event-progress > span {
  flex: 0 0 58px;
}

.event-progress i {
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(101, 117, 77, .12);
}

.event-progress i b,
.task-copy i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #a8c37b, #718f53);
}

.checkin-dots {
  display: flex;
  gap: 4px;
  margin: 2px 0 6px;
}

.checkin-dot {
  flex: 1;
  min-width: 0;
  height: 31px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid rgba(107, 118, 85, .12);
  border-radius: 7px;
  color: #a3a48f;
  background: rgba(246, 243, 230, .7);
}

.checkin-dot b {
  font-size: 8px;
}

.checkin-dot small {
  transform: scale(.86);
  white-space: nowrap;
  font-size: 6px;
}

.checkin-dot.done {
  border-color: rgba(117, 146, 85, .25);
  color: #637b4e;
  background: rgba(235, 244, 218, .8);
}

.checkin-dot.today {
  border-color: rgba(205, 159, 76, .5);
  color: #92713d;
  background: #fff7de;
  box-shadow: 0 0 0 2px rgba(226, 185, 102, .12);
}

.event-stamp {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  color: #7f8a6f;
  background: rgba(233, 237, 218, .7);
  font-size: 7.5px;
  font-weight: 700;
}

.task-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-bottom: 11px;
  padding: 8px 0;
  border: 1px solid rgba(87, 101, 69, .11);
  border-radius: 13px;
  background: rgba(255, 252, 241, .58);
}

.task-summary > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border-right: 1px solid rgba(107, 115, 86, .1);
}

.task-summary > div:last-child {
  border-right: 0;
}

.task-summary span {
  color: #9b9d88;
  font-size: 7px;
}

.task-summary b {
  color: #5a6f49;
  font-family: var(--display);
  font-size: 19px;
}

.task-summary small {
  color: #a5a793;
  font-size: 6.5px;
}

.task-group {
  margin-bottom: 11px;
}

.task-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.task-group-head img {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 9px;
  object-fit: cover;
}

.task-group-head > div {
  min-width: 0;
  flex: 1;
}

.task-group-head h3 {
  margin: 0;
  color: #4d6140;
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: .08em;
}

.task-group-head small {
  color: #9da28f;
  font-size: 7px;
}

.task-group-head > span {
  color: #7e9464;
  font-size: 7.5px;
  white-space: nowrap;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.task-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 86px 54px;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: rgba(255, 253, 244, .45);
}

.task-row.ready {
  border-color: rgba(120, 149, 88, .25);
  background: rgba(238, 245, 221, .7);
}

.task-row.done {
  opacity: .72;
}

.task-status {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 25px;
  border-radius: 7px;
  color: #8b967b;
  background: rgba(235, 235, 219, .7);
  font-size: 7px;
  font-weight: 800;
}

.task-row.ready .task-status {
  color: #5f7b48;
  background: #e9f2d7;
}

.task-row.done .task-status {
  color: #7b8e66;
}

.task-copy {
  min-width: 0;
}

.task-copy b {
  display: block;
  overflow: hidden;
  color: #586b48;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.task-copy small {
  display: block;
  overflow: hidden;
  margin: 1px 0 3px;
  color: #9ba18f;
  font-size: 7px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.task-copy i {
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(102, 117, 79, .12);
}

.task-reward {
  color: #8d7d5e;
  font-size: 7px;
  line-height: 1.35;
}

.task-claim {
  height: 25px;
  padding: 0 5px;
  font-size: 7.5px;
}

@media (max-width: 820px) {
  .side-rail {
    top: 62px;
    left: 9px;
    gap: 5px;
  }

  .rail-btn {
    width: 42px;
    height: 46px;
    border-radius: 11px;
    font-size: 6.5px;
    gap: 1px;
    padding: 3px;
  }

  .rail-art {
    width: 27px;
    height: 27px;
    border-radius: 7px;
  }

  .special-seed-option {
    min-width: 0;
    flex: 1;
  }

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

  .pet-panel {
    left: 10px;
    right: 10px;
    bottom: 70px;
    width: auto;
    max-height: 55vh;
    overflow: auto;
    padding: 13px;
  }

  .pet-portrait {
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }

  .pet-title h3 {
    font-size: 18px;
  }

  .event-grid {
    grid-template-columns: 1fr;
  }

  .event-head {
    gap: 9px;
  }

  .event-head-art {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  .event-card-art {
    width: 52px;
    height: 52px;
  }

  .checkin-dots {
    gap: 2px;
  }

  .checkin-dot small {
    display: none;
  }

  .task-row {
    grid-template-columns: 30px minmax(0, 1fr) 48px;
  }

  .task-reward {
    display: none;
  }

  .task-summary b {
    font-size: 16px;
  }

  .task-group-head img {
    width: 29px;
    height: 29px;
  }
}

@media (max-width: 680px) {
  .social-btn {
    width: 33px;
    height: 33px;
    border-radius: 10px;
  }

  .social-btn img {
    width: 27px;
    height: 27px;
    border-radius: 8px;
  }

  .animal-shop-card {
    grid-template-columns: 61px minmax(0, 1fr);
  }

  .animal-shop-art {
    width: 57px;
    height: 57px;
  }

  .animal-shop-art canvas {
    width: 68px;
    height: 68px;
  }

  .animal-shop-name-row b {
    font-size: 14px;
  }

  .animal-shop-card p {
    min-height: 0;
    font-size: 7.5px;
  }

  .social-tabs {
    gap: 4px;
  }

  .social-tab img {
    width: 28px;
    height: 28px;
  }

  .social-tab {
    min-height: 38px;
  }

  .friend-avatar {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .friend-gift {
    height: 25px;
    font-size: 7px;
  }

  .friend-name-row b {
    font-size: 9px;
  }

  .friend-info p {
    font-size: 7px;
  }

  .rank-table-head {
    grid-template-columns: 29px minmax(0, 1fr) 38px;
  }

  .rank-table-head span:nth-child(2) {
    display: none;
  }

  .rank-person {
    grid-column: 3;
  }

  .rank-row {
    grid-template-columns: 25px 25px minmax(0, 1fr) 35px;
  }
}

/* =========================================================
   0.8 · Feed, multi-product animals and the new pasture
   ========================================================= */
.feed-bag-icon {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 36px;
  border-radius: 7px 7px 10px 10px;
  background: linear-gradient(145deg, #d7b27b, #b98d58);
  box-shadow: inset 0 1px 0 rgba(255, 247, 220, .55), 0 3px 8px rgba(89, 65, 39, .13);
}

.feed-bag-icon::before {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: -4px;
  height: 9px;
  border-radius: 4px;
  background: #b88750;
  border: 1px solid rgba(113, 79, 43, .2);
}

.feed-bag-icon::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: 12px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 244, 215, .55);
  box-shadow: 0 5px 0 rgba(255, 244, 215, .42);
}

.feed-bag-icon i {
  position: absolute;
  right: 5px;
  bottom: 6px;
  width: 7px;
  height: 10px;
  border-radius: 100% 0 100% 0;
  background: #8fab66;
  transform: rotate(-24deg);
}

.feed-shop-card {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 13px;
  padding: 11px 13px;
  border: 1px solid rgba(139, 112, 66, .14);
  border-radius: 13px;
  background:
    radial-gradient(circle at 100% 0%, rgba(224, 238, 199, .55), transparent 38%),
    rgba(253, 248, 233, .82);
}

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

.feed-shop-copy b {
  display: block;
  color: #596c4c;
  font-size: 11px;
}

.feed-shop-copy p {
  margin: 3px 0 0;
  color: #9a9c88;
  font-size: 8px;
  line-height: 1.5;
}

.feed-shop-stock {
  flex: 0 0 auto;
  color: #8c927b;
  font-size: 8px;
}

.feed-shop-stock b {
  color: #657a50;
  font-size: 10px;
}

.feed-shop-buy {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
}

.feed-shop-buy .price {
  font-size: 8px;
}

.warehouse-feed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid rgba(139, 112, 66, .12);
  border-radius: 13px;
  background: rgba(253, 248, 233, .7);
}

.warehouse-feed-row > div {
  flex: 1;
}

.warehouse-feed-row b {
  color: #596c4c;
  font-size: 11px;
}

.warehouse-feed-row p {
  margin: 2px 0 0;
  color: #9a9c88;
  font-size: 8px;
}

.warehouse-feed-row .warehouse-sell {
  height: 29px;
  padding: 0 12px;
  font-size: 8px;
}

.animal-action.feed {
  color: #687b4e;
  border-color: rgba(112, 142, 82, .24);
  background: #f1f6e4;
}

.pasture-action.feed {
  color: #637b4e;
  border-color: rgba(112, 142, 82, .2);
  background: rgba(242, 248, 229, .82);
}

.animal-actions {
  flex-wrap: wrap;
}

.animal-actions .animal-action {
  flex: 1 1 calc(50% - 5px);
}

@media (min-width: 720px) {
  .animal-actions .animal-action {
    flex: 1 1 0;
  }
}

@media (max-width: 700px) {
  .feed-shop-card {
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px 10px;
  }

  .feed-shop-copy {
    flex: 1 1 calc(100% - 48px);
  }

  .feed-shop-stock {
    margin-left: 0;
  }

  .feed-shop-buy {
    margin-left: auto;
  }

  .feed-shop-copy p {
    font-size: 7.5px;
  }

  .pasture-bottom .pasture-action {
    padding: 0 8px;
    font-size: 8px;
  }

  .pasture-bottom .pasture-action.primary {
    padding: 0 9px;
  }

  .warehouse-feed-row {
    flex-wrap: wrap;
  }

  .warehouse-feed-row .warehouse-sell {
    margin-left: 46px;
  }
}

/* =========================================================
   0.9 · locked plots, four tools, one-row seed drawer
   ========================================================= */
.tool-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.seed-row {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.unlock-plot {
  max-width: 390px;
  margin: 8px auto 2px;
  text-align: center;
}

.unlock-plot-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  border: 1px solid rgba(121, 143, 91, .2);
  border-radius: 18px;
  color: #6d8555;
  background: linear-gradient(145deg, #eef4dd, #dce8c8);
  font-size: 30px;
  font-weight: 300;
}

.unlock-plot h2 {
  margin: 2px 0 7px;
  color: #4f6245;
  font-size: 22px;
}

.unlock-plot > p:not(.eyebrow) {
  margin: 0 auto 15px;
  max-width: 310px;
  color: #8d9480;
  font-size: 10px;
  line-height: 1.75;
}

.unlock-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 13px;
  margin-bottom: 14px;
  border: 1px solid rgba(137, 115, 73, .13);
  border-radius: 12px;
  background: rgba(248, 243, 225, .72);
}

.unlock-cost span,
.unlock-cost small {
  color: #999a87;
  font-size: 8px;
}

.unlock-cost b {
  color: #806437;
  font-size: 14px;
}

.unlock-cost small {
  margin-left: auto;
}

.unlock-actions {
  display: flex;
  gap: 8px;
}

.unlock-cancel,
.unlock-confirm {
  flex: 1;
  height: 38px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 750;
}

.unlock-cancel {
  color: #7c8870;
  border: 1px solid rgba(95, 113, 78, .16);
  background: #f7f4e8;
}

.unlock-confirm {
  color: #fffdf1;
  border: 1px solid #587744;
  background: linear-gradient(145deg, #749357, #506e3f);
  box-shadow: 0 5px 12px rgba(69, 92, 51, .16);
}

.unlock-confirm:disabled {
  opacity: .42;
}

@media (max-width: 680px) {
  .seed-row {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
  }

  .seed-row .seed-option {
    height: 42px;
    padding: 3px 3px;
    gap: 2px;
  }

  .seed-row .seed-option-icon,
  .seed-row .seed-option-icon canvas {
    width: 19px;
    height: 19px;
  }

  .seed-row .seed-option-name {
    font-size: 6.5px;
    gap: 0;
  }

  .seed-row .seed-option-meta,
  .seed-row .seed-option-name small {
    display: none;
  }

  .seed-row .seed-option-check {
    width: 11px;
    height: 11px;
  }

  .unlock-plot {
    margin-top: 0;
  }
}

/* =========================================================
   0.9 · account / cloud save
   ========================================================= */
.cloud-setting-btn {
  min-width: 72px;
}

.cloud-form {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(117, 133, 93, .13);
  border-radius: 13px;
  background: rgba(249, 246, 234, .66);
}

.cloud-form label {
  display: grid;
  gap: 4px;
  color: #7e8a70;
  font-size: 8px;
  font-weight: 650;
}

.cloud-form input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(95, 115, 76, .16);
  border-radius: 8px;
  color: #4f6044;
  background: rgba(255, 253, 244, .86);
  font: inherit;
  font-size: 10px;
  outline: none;
}

.cloud-form input:focus {
  border-color: rgba(98, 129, 73, .5);
  box-shadow: 0 0 0 3px rgba(113, 146, 82, .09);
}

.cloud-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.cloud-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

.cloud-btn {
  flex: 1;
  height: 33px;
  padding: 0 11px;
  border: 1px solid rgba(92, 112, 73, .17);
  border-radius: 8px;
  color: #667a55;
  background: #f9f6e8;
  font-size: 9px;
  font-weight: 750;
}

.cloud-btn.primary {
  color: #fffdf1;
  border-color: #5b7845;
  background: linear-gradient(145deg, #76965b, #506d3f);
}

.cloud-btn.subtle {
  flex: 0 0 auto;
  color: #9a9a86;
  background: transparent;
}

.cloud-btn:disabled {
  opacity: .45;
}

.cloud-logged {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid rgba(110, 137, 82, .17);
  border-radius: 13px;
  background: rgba(239, 246, 222, .7);
}

.cloud-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fffbed;
  background: #718d58;
  font-family: "Georgia", serif;
  font-size: 17px;
}

.cloud-logged > div {
  flex: 1;
  min-width: 0;
}

.cloud-logged b {
  display: block;
  color: #526647;
  font-size: 12px;
}

.cloud-logged p {
  margin: 2px 0 0;
  color: #929b86;
  font-size: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cloud-badge {
  padding: 3px 7px;
  border-radius: 999px;
  color: #657b4f;
  background: #e2eecb;
  font-size: 7px;
  font-weight: 750;
}

.cloud-actions + .cloud-hint {
  margin-top: 10px;
}

.cloud-hint {
  margin: 9px 0 0;
  color: #989d8c;
  font-size: 8px;
  line-height: 1.65;
}

.cloud-hint code {
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(124, 140, 103, .12);
  font-size: 8px;
}

.cloud-backup {
  margin-top: 12px;
  padding: 11px;
  border: 1px solid rgba(110, 137, 82, .18);
  border-radius: 11px;
  background: rgba(250, 248, 235, .72);
}

.cloud-backup b {
  color: #5c7150;
  font-size: 10px;
}

.cloud-backup summary {
  cursor: pointer;
  color: #5c7150;
  font-size: 9px;
  font-weight: 800;
  list-style-position: inside;
}

.cloud-backup summary::marker {
  color: #8da076;
}

.cloud-backup p {
  margin: 3px 0 8px;
  color: #929b86;
  font-size: 8px;
  line-height: 1.55;
}

.cloud-backup .cloud-actions {
  flex-wrap: wrap;
}

.save-export-text {
  width: 100%;
  min-height: 220px;
  padding: 10px;
  border: 1px solid rgba(110, 137, 82, .24);
  border-radius: 10px;
  color: #536347;
  background: #fffdf4;
  font: 9px/1.5 ui-monospace, "Cascadia Mono", monospace;
  resize: vertical;
}

.cloud-message {
  min-height: 13px;
  margin: 10px 0 0;
  color: #b07153;
  font-size: 8px;
  line-height: 1.5;
}

@media (max-width: 680px) {
  .cloud-form-row {
    grid-template-columns: 1fr;
  }

  .cloud-actions {
    flex-wrap: wrap;
  }

  .cloud-btn {
    flex: 1 1 45%;
  }
}

@media (max-width: 680px) {
  .seed-row .seed-option {
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    position: relative;
  }

  .seed-row .seed-option-name {
    text-align: center;
    line-height: 1.05;
    max-width: 100%;
  }

  .seed-row .seed-option-check {
    position: absolute;
    top: 2px;
    right: 2px;
  }
}


/* 0.13 · seasonal shop labels */
.shop-stats .shop-in-season {
  color: #5b7d43;
  font-weight: 750;
}

.shop-stats .shop-off-season {
  color: #b08570;
}

/* 0.13 · notice board rail button */
.notice-rail-art {
  display: grid;
  place-items: center;
  color: #71835e;
}

.notice-rail-art svg {
  width: 25px;
  height: 25px;
}

/* 0.13 · weather orb states */
.weather-orb.rain {
  color: #5f93a4;
  background: #e8f2f2;
}

.weather-orb.snow {
  color: #7aa5c2;
  background: #eef6fb;
}

/* 0.13.1 · non-seasonal seeds cannot be bought */
.shop-card.off-season {
  opacity: .68;
}

.shop-card.off-season .shop-art {
  filter: saturate(.55);
}

/* 0.13.1 · the guide now has 7 steps */
.goals-panel {
  max-height: calc(100vh - 112px);
  overflow-y: auto;
}

/* 0.13.1 · level-up banner (independent of the one-toast queue) */
.level-up-banner {
  position: fixed;
  top: 142px;
  left: 50%;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid rgba(255, 244, 199, .65);
  border-radius: 999px;
  color: #fff8dd;
  background: linear-gradient(135deg, rgba(75, 95, 57, .96), rgba(51, 67, 43, .97));
  box-shadow: 0 12px 32px rgba(35, 44, 28, .26);
  opacity: 0;
  transform: translate(-50%, -8px) scale(.96);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
  white-space: nowrap;
}

.level-up-banner.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.level-up-banner small {
  color: #f0d889;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .16em;
}

.level-up-banner b {
  color: #fff7d7;
  font-family: var(--display);
  font-size: 14px;
}

.level-up-banner span {
  font-size: 10px;
  font-weight: 750;
}

.level-up-banner em {
  padding-left: 8px;
  border-left: 1px solid rgba(255, 244, 199, .24);
  color: rgba(255, 246, 214, .58);
  font-size: 7px;
  font-style: normal;
}

@media (max-width: 680px) {
  .level-up-banner {
    top: 126px;
    max-width: calc(100vw - 24px);
    overflow: hidden;
    padding: 8px 11px;
  }

  .level-up-banner span {
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #game-shell.tutorial-active .level-up-banner {
    display: none;
  }
}

/* =========================================================
   0.16 · pasture tools, feed pool, incubator, forage
   ========================================================= */
.pasture-toolbar {
  position: absolute;
  left: 50%;
  bottom: 80px;
  z-index: 6;
  width: min(760px, calc(100% - 32px));
  display: flex;
  align-items: stretch;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 14px;
  background: rgba(255, 251, 238, .78);
  box-shadow: 0 10px 28px rgba(52, 68, 38, .13), inset 0 1px 0 rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(15px) saturate(1.1);
  backdrop-filter: blur(15px) saturate(1.1);
  transform: translateX(-50%);
}

.pasture-tool {
  flex: 1;
  min-width: 0;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 7px;
  border: 1px solid rgba(82, 99, 65, .13);
  border-radius: 9px;
  color: #667a56;
  background: rgba(255, 253, 244, .7);
  font-size: 8.5px;
  font-weight: 750;
  white-space: nowrap;
}

.pasture-tool:hover {
  background: #fffdf4;
}

.pasture-tool.active {
  color: #fffdf1;
  border-color: #5b7b44;
  background: linear-gradient(145deg, #6e9053, #4b693a);
  box-shadow: 0 5px 13px rgba(57, 81, 42, .18);
}

.pasture-tool-icon {
  font-size: 13px;
  line-height: 1;
}

.pasture-tool b {
  min-width: 14px;
  padding: 1px 4px;
  border-radius: 999px;
  color: #6a7c55;
  background: rgba(109, 139, 88, .13);
  font-size: 7px;
}

.pasture-tool.active b {
  color: #4f673c;
  background: rgba(255, 250, 227, .7);
}

.pasture-toolbar + .pasture-bottom {
  bottom: max(10px, env(safe-area-inset-bottom));
}

.incubator-panel .modal-head {
  margin-bottom: 12px;
}

.incubator-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.incubator-egg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid #ddd6b9;
  border-radius: 10px;
  background: rgba(255, 253, 243, .8);
}

.incubator-egg-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f4ecd5;
  font-size: 20px;
}

.incubator-egg div {
  flex: 1;
  min-width: 0;
}

.incubator-egg b {
  display: block;
  color: #4f6044;
  font-size: 10px;
}

.incubator-egg small {
  color: #9b967f;
  font-size: 8px;
}

.incubator-egg .btn {
  flex: 0 0 auto;
  padding: 7px 10px;
  font-size: 8px;
}

.incubator-empty {
  padding: 18px 12px;
  border: 1px dashed #d8d1b4;
  border-radius: 12px;
  color: #9b967f;
  text-align: center;
  font-size: 9px;
  line-height: 1.7;
}

@media (max-width: 700px) {
  .pasture-toolbar {
    bottom: 57px;
    width: calc(100% - 18px);
    gap: 3px;
    padding: 3px;
    border-radius: 11px;
  }

  .pasture-tool {
    height: 32px;
    gap: 2px;
    padding: 0 3px;
    font-size: 7px;
    border-radius: 7px;
  }

  .pasture-tool-icon {
    font-size: 11px;
  }

  .pasture-tool b {
    display: inline-block;
    min-width: 12px;
    padding: 0 3px;
    font-size: 6.5px;
  }

  .pasture-toolbar + .pasture-bottom {
    bottom: max(7px, env(safe-area-inset-bottom));
  }
}

.land-upgrade-btn {
  position: fixed;
  right: 18px;
  bottom: 118px;
  z-index: 30;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 999px;
  color: #5d724c;
  background: rgba(255, 251, 235, .86);
  box-shadow: 0 9px 24px rgba(47, 65, 36, .15);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .05em;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.land-upgrade-btn[hidden] { display: none !important; }
.land-upgrade-btn span { color: #c39a4f; }

.land-upgrade-panel .modal-head { margin-bottom: 12px; }
.land-upgrade-list { display: flex; flex-direction: column; gap: 5px; }

.land-upgrade-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid #dfd8bd;
  border-radius: 10px;
  background: rgba(255, 253, 243, .78);
}

.land-upgrade-row.done { background: rgba(235, 244, 224, .8); }

.land-upgrade-no {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #6d7d58;
  background: #f0e8cf;
  font-size: 8px;
  font-weight: 800;
}

.land-upgrade-copy { flex: 1; min-width: 0; }
.land-upgrade-copy b { display: block; color: #4e6043; font-size: 9px; }
.land-upgrade-copy small { color: #9a947c; font-size: 7px; }
.land-upgrade-row .btn { flex: 0 0 auto; padding: 7px 10px; font-size: 8px; }

@media (max-width: 700px) {
  .land-upgrade-btn {
    right: 10px;
    bottom: 132px;
    padding: 7px 9px;
    font-size: 7px;
  }
}

.halloween-discount {
  display: inline-block;
  margin-left: 3px;
  padding: 1px 4px;
  border-radius: 999px;
  color: #fff9e8;
  background: #c3723f;
  font-size: 6px;
  font-style: normal;
  vertical-align: 1px;
}

.halloween-event-card {
  border-color: rgba(197, 132, 67, .35);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 215, 128, .28), transparent 38%),
    linear-gradient(150deg, #fff7e4, #f4e4c8);
}

.halloween-event-card .event-card-art {
  background: linear-gradient(150deg, #f4c46b, #b76639);
}

.halloween-progress {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 8px 0;
  color: #8d6c4a;
  font-size: 8px;
}

.halloween-progress b {
  color: #a85e2f;
  font-size: 18px;
}

.halloween-progress small { color: #a99a7c; font-size: 8px; }

.halloween-tiers { display: flex; flex-direction: column; gap: 5px; }

.halloween-tier {
  padding: 6px 7px;
  border: 1px solid #e2d2b4;
  border-radius: 9px;
  background: rgba(255, 252, 241, .72);
}

.halloween-tier.done { background: rgba(239, 244, 224, .8); }

.halloween-tier-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #7d654c;
  font-size: 7px;
}

.halloween-tier-head b { color: #855b34; }

.halloween-tier-bar {
  height: 5px;
  margin: 5px 0 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(151, 126, 83, .16);
}

.halloween-tier-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e0a44d, #b96b37);
}

.halloween-tier-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.halloween-tier-foot small { color: #a99a7c; font-size: 7px; }

.halloween-achievement {
  margin-top: 7px;
  padding: 6px 8px;
  border-radius: 8px;
  color: #866035;
  background: rgba(245, 227, 177, .62);
  font-size: 7px;
  font-weight: 700;
}

#game-shell.pasture-mode .land-upgrade-btn { display: none !important; }
.pasture-mode .pasture-hint { bottom: 142px; }

@media (max-width: 700px) {
  .pasture-mode .pasture-hint { bottom: 96px; }
}

.halloween-place-btn {
  margin-left: 5px;
  padding: 3px 7px;
  border: 1px solid rgba(151, 103, 52, .28);
  border-radius: 999px;
  color: #8f5c2d;
  background: rgba(255, 248, 226, .85);
  font-size: 7px;
  font-weight: 800;
}

/* ===== 0.17 check-in / mail / backpack / decor ===== */
.backpack-art { display:grid; place-items:center; color:#f3ead0; background:linear-gradient(145deg,#7d8d5f,#4f623d); }
.backpack-art svg { width:24px; height:24px; }
.dock .dock-action.backpack-btn { border-color:#687a53; background:radial-gradient(circle at 100% 0%, rgba(235,240,195,.16), transparent 45%), linear-gradient(145deg,#7d8d5f,#4f623d); box-shadow:0 8px 20px rgba(65,86,50,.2), inset 0 1px 0 rgba(255,255,255,.16); }
.mailbox-panel,.checkin-panel,.backpack-panel,.feed-pool-panel,.decor-panel,.breed-confirm { display:grid; gap:14px; }
.checkin-head { display:flex; gap:14px; align-items:flex-start; }
.checkin-head-art { width:72px; height:72px; flex:0 0 auto; border-radius:18px; overflow:hidden; background:#fff8e6; box-shadow:0 4px 12px rgba(65,78,44,.12); }
.checkin-head-art img { width:100%; height:100%; object-fit:cover; }
.checkin-head-copy p { margin:3px 0 0; }
.checkin-summary { display:flex; gap:8px; flex-wrap:wrap; }
.checkin-summary span { padding:7px 11px; border-radius:999px; background:#f5f2e3; color:#788365; font-size:10px; font-weight:700; }
.checkin-summary b { color:#4e6040; }
.checkin-month-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.checkin-day { min-height:64px; display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:7px; border:1px solid rgba(114,126,85,.18); border-radius:11px; background:#fffdf5; color:#647056; text-align:left; }
.checkin-day-num { font:800 13px/1 var(--display); color:#4f6040; }
.checkin-day-reward { font:700 8px/1.2 var(--ui); color:#81906c; }
.checkin-day small { font:6.5px/1.25 var(--ui); color:#a1a88f; }
.checkin-day.today { border-color:#d6a84e; background:#fff5d6; box-shadow:0 0 0 2px rgba(230,184,85,.18); }
.checkin-day.claimed { background:#edf3e4; border-color:#bfd0a7; opacity:.85; }
.checkin-day.outside { opacity:.28; }
.checkin-day:disabled { cursor:default; }
.mail-row { width:100%; display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid rgba(114,126,85,.16); border-radius:12px; background:#fffdf5; text-align:left; }
.mail-row.unread { border-color:#d9b76b; background:#fff9e9; }
.mail-dot { color:#c99a3c; font-size:10px; }
.mail-copy { flex:1; min-width:0; display:grid; gap:2px; }
.mail-copy b { color:#4f6040; font-size:12px; }
.mail-copy small { color:#9aa389; font-size:8px; }
.mail-gift { padding:3px 7px; border-radius:999px; color:#7b6532; background:#f3dfaa; font-size:8px; font-weight:800; }
.mail-gift.done { color:#89947b; background:#edf0e6; }
.mail-detail h2 { margin:3px 0 6px; }
.mail-meta { color:#98a18b; font-size:9px; }
.mail-body { padding:14px; border-radius:13px; background:#f8f5e9; color:#5e6d50; font-size:11px; line-height:1.8; }
.mail-reward { display:flex; gap:8px; align-items:center; padding:10px 12px; border-radius:11px; background:#fff5d9; color:#7d6334; font-size:10px; }
.mail-reward b { margin-left:auto; }
.backpack-tabs { display:flex; gap:6px; flex-wrap:wrap; }
.backpack-tab { padding:6px 11px; border:1px solid rgba(118,128,92,.2); border-radius:999px; background:#fffdf5; color:#7c886d; font-size:9px; font-weight:700; }
.backpack-tab.active { background:#657a51; border-color:#657a51; color:#fff9e9; }
.backpack-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:9px; }
.backpack-card { display:grid; grid-template-columns:58px minmax(0,1fr); gap:8px; padding:9px; border:1px solid rgba(114,126,85,.16); border-radius:12px; background:#fffdf5; }
.backpack-icon { grid-row:1 / span 2; width:58px; height:58px; border-radius:10px; background:#f4f1e3; overflow:hidden; }
.backpack-icon canvas { width:100%; height:100%; display:block; }
.backpack-copy b { display:block; color:#4f6040; font-size:11px; }
.backpack-copy small { display:block; margin-top:3px; color:#929c83; font-size:8px; line-height:1.45; }
.backpack-foot { display:flex; align-items:center; gap:6px; }
.backpack-foot span { color:#7e8b6f; font-size:10px; font-weight:800; }
.backpack-foot .btn { margin-left:auto; padding:4px 8px; font-size:8px; }
.backpack-empty { padding:22px 12px; border:1px dashed rgba(126,139,111,.28); border-radius:12px; color:#9ba48e; text-align:center; font-size:10px; }
.meteor-active-note { padding:9px 11px; border-radius:10px; background:linear-gradient(120deg,#34335d,#6d5a91); color:#fff3c8; font-size:9px; font-weight:700; }
.feed-pool-summary { display:flex; gap:9px; align-items:center; flex-wrap:wrap; padding:10px 12px; border-radius:11px; background:#f5f2e3; color:#6f7b60; font-size:9px; }
.feed-pool-summary b { color:#4f6040; }
.feed-pool-summary .btn { margin-left:auto; }
.feed-slot-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.feed-slot { padding:10px; border:1px solid rgba(126,105,71,.18); border-radius:11px; background:#fffdf5; }
.feed-slot-head { display:flex; justify-content:space-between; gap:4px; color:#6f5a3e; font-size:9px; }
.feed-slot-head b { color:#4f6040; }
.feed-slot-bar { height:7px; margin:7px 0; border-radius:99px; background:#eee6d0; overflow:hidden; }
.feed-slot-bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#d8b46e,#b8873f); }
.feed-slot-actions { display:flex; gap:5px; }
.feed-slot-actions .btn { flex:1; padding:4px 5px; font-size:7px; }
.decor-preview { display:grid; place-items:center; padding:10px; border-radius:14px; background:#f7f3e5; }
.decor-preview canvas { width:150px; height:150px; }
.breed-chance { display:flex; align-items:center; gap:7px; padding:9px 11px; border-radius:11px; background:#fff4e2; color:#7e6139; font-size:10px; }
.breed-chance b { color:#b97931; }
.breed-chance small { margin-left:auto; color:#9d8c72; font-size:8px; }
.breed-result { padding:9px 11px; border-radius:11px; background:#f0f5e7; color:#5f714f; font-size:11px; }
.longterm-card { grid-column:1 / -1; }
.longterm-list { display:grid; gap:7px; }
.longterm-row { padding:8px 9px; border:1px solid rgba(114,126,85,.15); border-radius:10px; background:#fffdf5; }
.longterm-row.done { background:#edf3e4; }
.longterm-head,.longterm-foot { display:flex; justify-content:space-between; gap:7px; align-items:center; }
.longterm-head b { color:#4f6040; font-size:9px; }
.longterm-head span { color:#9a7c45; font-size:8px; text-align:right; }
.longterm-bar { height:6px; margin:5px 0; border-radius:99px; background:#eee8d5; overflow:hidden; }
.longterm-bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#9fba79,#6f9152); }
.longterm-foot small { color:#98a18b; font-size:8px; }
.longterm-foot .event-claim { padding:3px 8px; font-size:7px; }
.firefly-exchange-row { display:flex; gap:5px; flex-wrap:wrap; }
.firefly-exchange-pill { padding:4px 7px; border-radius:999px; background:#f0eee5; color:#8c917f; font-size:8px; }
.firefly-exchange-pill.has { color:#5f6044; background:color-mix(in srgb, var(--fly) 24%, #fffdf5); }
.firefly-exchange-pill b { margin-left:3px; }
.redeem-row { display:flex; gap:7px; }
.redeem-row input { flex:1; min-width:0; padding:8px 10px; border:1px solid rgba(114,126,85,.22); border-radius:9px; background:#fffdf6; color:#4f6040; font:10px var(--ui); }
.redeem-hint { color:#9da58e; font-size:8px; }
.redeem-art { font-size:34px; display:grid; place-items:center; width:100%; height:100%; }
.event-card-title h3 { white-space:nowrap; }
.halloween-event-card .event-card-title { flex-wrap:wrap; align-items:flex-start; }
.halloween-event-card .event-card-title h3 { flex:0 0 auto; }
.halloween-event-card .event-time { flex:0 0 100%; display:block; margin-top:2px; }
@media (max-width:700px) {
  .checkin-month-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .checkin-day { min-height:56px; padding:5px; }
  .backpack-grid { grid-template-columns:1fr; }
  .feed-slot-grid { grid-template-columns:1fr; }
  .dock .dock-side { flex:1 1 100%; width:100%; }
  .dock-action-copy small { display:none; }
  .rail-mail span:last-of-type { font-size:6px; }
}

.warehouse-filters { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 12px; }
.warehouse-filter { padding:5px 10px; border:1px solid rgba(118,128,92,.2); border-radius:999px; background:#fffdf5; color:#7c886d; font-size:8px; font-weight:700; }
.warehouse-filter.active { background:#657a51; border-color:#657a51; color:#fff9e9; }
.warehouse-actions { flex-wrap:wrap; }
.warehouse-actions .warehouse-sell { padding:4px 7px; font-size:7px; }

/* Keep shop / backpack / warehouse / map on one row on small screens. */
.dock .dock-side {
  display: flex !important;
  flex-direction: row !important;
}
@media (max-width: 700px) {
  .dock .dock-side { width: 100%; flex: 1 1 100%; }
  .dock .dock-action { height: 54px; }
}

/* ===== 0.18 clothes / York / VIP / fertilizer ===== */
.clothes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:9px; }
.clothes-card { display:grid; grid-template-columns:76px minmax(0,1fr); gap:10px; padding:10px; border:1px solid rgba(114,126,85,.16); border-radius:13px; background:#fffdf5; }
.clothes-card.equipped { border-color:#d6b25c; background:#fff9e8; }
.clothes-art { width:76px; height:76px; border-radius:12px; background:#f5f1e2; overflow:hidden; }
.clothes-art canvas { width:100%; height:100%; display:block; }
.clothes-copy { display:grid; gap:4px; }
.clothes-copy b { color:#4f6040; font-size:11px; }
.clothes-copy p { margin:0; color:#929c83; font-size:8px; line-height:1.5; }
.clothes-foot { display:flex; align-items:center; gap:7px; }
.clothes-foot .price { margin-left:auto; color:#7a6337; font-size:9px; font-weight:800; }
.clothes-foot .btn { padding:4px 9px; font-size:8px; }
@media (max-width:700px) { .clothes-grid { grid-template-columns:1fr; } }

.fert-bag-panel { display:grid; gap:12px; }
.fert-grid { display:grid; gap:7px; }
.fert-card { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid rgba(114,126,85,.18); border-radius:11px; background:#fffdf5; text-align:left; }
.fert-card.active { border-color:#d0a94f; background:#fff8e2; }
.fert-bag { width:34px; height:40px; position:relative; flex:0 0 auto; display:block; border-radius:7px 7px 10px 10px; background:var(--fert-color,#8da66a); box-shadow:inset 0 -4px rgba(0,0,0,.08); }
.fert-bag::before { content:''; position:absolute; top:-4px; left:6px; right:6px; height:8px; border-radius:5px 5px 2px 2px; background:color-mix(in srgb,var(--fert-color,#8da66a) 70%,#fff); }
.fert-bag i { position:absolute; left:8px; right:8px; bottom:10px; height:5px; border-radius:3px; background:rgba(255,249,228,.38); }
.fert-copy { flex:1; display:grid; gap:2px; }
.fert-copy b { color:#4f6040; font-size:11px; }
.fert-copy small { color:#969f88; font-size:8px; }
.fert-check { color:#8d7a4d; font-size:8px; font-weight:800; }
.fert-shop-art { display:grid; place-items:center; background:#f4f0df; }
.fert-shop-art .fert-bag { width:40px; height:48px; }

.vip-quickbar { position:absolute; right:14px; bottom:145px; z-index:9; display:grid; gap:4px; padding:7px; border:1px solid rgba(255,255,255,.62); border-radius:13px; background:rgba(255,252,241,.9); box-shadow:0 8px 22px rgba(54,70,40,.18); }
.vip-quickbar[hidden] { display:none !important; }
.vip-quick-title { color:#8d6d31; font:800 8px var(--ui); text-align:center; letter-spacing:.06em; }
.vip-quickbar button { padding:5px 9px; border:1px solid rgba(126,105,71,.2); border-radius:8px; background:#fffdf5; color:#5d6c4c; font:700 8px var(--ui); }
.vip-hero { display:flex; align-items:center; gap:12px; padding:13px; border-radius:14px; background:linear-gradient(130deg,#40395e,#79648f); color:#fff7d8; }
.vip-hero h3 { margin:2px 0; font-size:18px; }
.vip-hero p { margin:0; color:rgba(255,247,216,.78); font-size:9px; }
.vip-crown { margin-left:auto; padding:8px 12px; border-radius:999px; background:#e6c15d; color:#5d4523; font:900 13px var(--display); }
.vip-store-actions { display:flex; gap:7px; flex-wrap:wrap; margin:10px 0; }
.vip-empty { padding:28px 16px; border:1px dashed rgba(126,139,111,.3); border-radius:12px; text-align:center; color:#98a18a; background:#fffdf5; }
.vip-empty b { display:block; color:#677657; font-size:13px; margin-bottom:5px; }
.vip-empty p { margin:0; font-size:9px; }
@media (max-width:700px) { .vip-quickbar { right:8px; bottom:120px; } .vip-quickbar button { font-size:7px; padding:4px 6px; } }

.admin-form { display:grid; gap:9px; }
.admin-form label { display:grid; gap:4px; color:#6d7a5e; font-size:9px; font-weight:700; }
.admin-form input, .admin-form textarea, .admin-form select { width:100%; padding:8px 10px; border:1px solid rgba(114,126,85,.22); border-radius:9px; background:#fffdf6; color:#4f6040; font:10px var(--ui); box-sizing:border-box; }
.admin-two { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

.vip-quickbar { bottom: 180px; min-width: 88px; }
.vip-quickbar button { white-space: nowrap; }
@media (max-width: 700px) { .vip-quickbar { bottom: 170px; } }

/* 0.19 workshop */
.workshop-balance { padding:8px 10px; border-radius:9px; background:#f5efdc; color:#7d735c; font-size:9px; }
.workshop-group { margin-top:12px; }
.workshop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:9px; }
.workshop-card { padding:11px; border:1px solid rgba(114,126,85,.18); border-radius:12px; background:#fffdf5; display:grid; gap:6px; }
.workshop-card.ready { border-color:#c7aa64; background:#fff9e7; }
.workshop-card-head { display:flex; align-items:center; gap:8px; }
.workshop-card-head b { color:#4f6040; font-size:11px; }
.workshop-card-head span { margin-left:auto; color:#8b7443; font-size:8px; }
.workshop-card p { margin:0; color:#939d86; font-size:8px; line-height:1.55; }
.workshop-inputs { display:flex; flex-wrap:wrap; gap:5px; }
.workshop-inputs span { padding:3px 6px; border-radius:6px; font-size:8px; background:#f2f0e3; color:#7f8873; }
.workshop-inputs span.ok { background:#e6f0d9; color:#5f7b4d; }
.workshop-inputs span.lack { background:#f6e7e0; color:#a26a58; }
.workshop-card .btn { justify-self:start; padding:5px 10px; font-size:8px; }

.pasture-zone-badge { position:absolute; top:86px; left:50%; transform:translateX(-50%); z-index:8; padding:6px 12px; border-radius:999px; background:rgba(255,252,241,.88); border:1px solid rgba(126,139,111,.24); color:#687659; font:800 9px var(--ui); box-shadow:0 4px 14px rgba(54,70,40,.12); white-space:nowrap; }
@media (max-width:700px) { .pasture-zone-badge { top:76px; font-size:8px; } }

/* 0.20 cloud conflict + admin audit */
.cloud-conflict { padding:11px; border:1px solid #d6a86a; border-radius:11px; background:#fff6df; }
.cloud-conflict b { color:#8a5e25; font-size:11px; }
.cloud-conflict p { margin:4px 0 8px; color:#92784f; font-size:9px; line-height:1.5; }
.audit-list { display:grid; gap:6px; max-height:55vh; overflow:auto; }
.audit-row { display:grid; grid-template-columns:54px 1fr; gap:8px; padding:8px 10px; border:1px solid rgba(114,126,85,.15); border-radius:9px; background:#fffdf5; }
.audit-action { color:#7a8d67; font-size:9px; font-weight:800; }
.audit-row b { color:#4f6040; font-size:10px; }
.audit-row small { display:block; color:#9aa28d; font-size:8px; }
.audit-row em { display:block; margin-top:2px; color:#8f9883; font-size:8px; font-style:normal; word-break:break-all; }

.pasture-upgrade-btn { position:absolute; top:122px; left:50%; transform:translateX(-50%); z-index:8; padding:7px 12px; border:1px solid rgba(126,139,111,.28); border-radius:999px; background:#fff8df; color:#7b6438; font:800 9px var(--ui); box-shadow:0 4px 12px rgba(54,70,40,.14); }
.pasture-upgrade-btn[hidden] { display:none; }
@media (max-width:700px) { .pasture-upgrade-btn { top:110px; font-size:8px; } }

.vip-fab { position:absolute; right:14px; bottom:190px; z-index:10; padding:8px 10px; border:1px solid rgba(126,105,71,.28); border-radius:999px; background:linear-gradient(135deg,#f7e7a1,#d9b75a); color:#6a4d22; font:900 9px var(--ui); box-shadow:0 5px 14px rgba(84,65,35,.22); }
.vip-fab[hidden] { display:none !important; }
.vip-action-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.vip-action-grid .btn { min-height:38px; font-size:10px; }
@media (max-width:700px) { .vip-fab { right:8px; bottom:150px; font-size:8px; } }

.sky-lock-badge { position:absolute; left:50%; top:72px; transform:translateX(-50%); z-index:8; padding:4px 9px; border-radius:999px; background:rgba(48,52,78,.74); color:#fff2c4; font:800 8px var(--ui); white-space:nowrap; }
.sky-lock-badge[hidden] { display:none; }
@media (max-width:700px) { .sky-lock-badge { top:64px; font-size:7.5px; } }

.wardrobe-preview { display:grid; grid-template-columns:180px 1fr; gap:12px; align-items:center; padding:10px; border:1px solid rgba(114,126,85,.16); border-radius:12px; background:#fffdf5; }
.wardrobe-preview canvas { width:180px; height:218px; display:block; }
.wardrobe-preview b { color:#4f6040; font-size:11px; }
.wardrobe-preview p { margin:4px 0 0; color:#939d86; font-size:9px; line-height:1.5; }
.clothes-card.trying { border-color:#8fb07a; background:#f4f9ea; }
@media (max-width:700px) { .wardrobe-preview { grid-template-columns:130px 1fr; } .wardrobe-preview canvas { width:130px; height:158px; } }

.encyclopedia-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:7px; max-height:55vh; overflow:auto; }
.encyclopedia-card { display:grid; gap:3px; justify-items:center; padding:8px 5px; border:1px solid rgba(114,126,85,.16); border-radius:10px; background:#fffdf5; }
.encyclopedia-card.locked { filter:grayscale(1); opacity:.55; }
.encyclopedia-card.got { border-color:#c9d9b7; background:#f7fbf0; }
.enc-art { width:62px; height:62px; }
.enc-art canvas { width:100%; height:100%; }
.encyclopedia-card b { color:#4f6040; font-size:9px; text-align:center; }
.encyclopedia-card small { color:#9aa28d; font-size:7.5px; }
.enc-detail-art { display:grid; place-items:center; padding:10px; }
.enc-detail-art canvas { width:120px; height:120px; }
.enc-detail-rows { display:grid; gap:7px; }
.enc-detail-rows div { padding:8px 10px; border-radius:9px; background:#fffdf5; }
.enc-detail-rows b { display:block; color:#6d7a5e; font-size:9px; }
.enc-detail-rows span { color:#8f9883; font-size:9px; line-height:1.5; }

.chat-panel { display:grid; gap:8px; }
.chat-friends { display:flex; gap:5px; overflow-x:auto; padding-bottom:4px; }
.chat-friend { flex:0 0 auto; padding:5px 9px; border:1px solid rgba(114,126,85,.2); border-radius:999px; background:#fffdf5; color:#71805f; font-size:9px; }
.chat-friend.active { background:#e8f0d9; border-color:#a9bf91; }
.chat-list { display:grid; gap:5px; max-height:38vh; overflow:auto; padding:7px; border-radius:10px; background:#f6f2e4; }
.chat-message { display:grid; gap:2px; max-width:88%; padding:6px 8px; border-radius:9px; background:#fffdf5; }
.chat-message.mine { justify-self:end; background:#e8f0d9; }
.chat-message b { color:#6d7a5e; font-size:8px; }
.chat-message span { color:#4f6040; font-size:10px; }
.chat-message em { color:#93794c; font-size:8px; font-style:normal; }
.chat-message small { color:#a1a68f; font-size:7px; }
.chat-emoji { display:flex; gap:5px; flex-wrap:wrap; }
.chat-emoji button { width:30px; height:30px; border:1px solid rgba(114,126,85,.16); border-radius:8px; background:#fffdf5; font-size:16px; }
.chat-compose { display:grid; grid-template-columns:1fr auto auto; gap:5px; }
.chat-compose input, .chat-compose select { padding:7px 9px; border:1px solid rgba(114,126,85,.2); border-radius:8px; background:#fffdf5; font-size:10px; }
.chat-compose select { max-width:120px; }
.chat-compose .btn { min-height:36px; }
@media (max-width:700px) { .chat-compose { grid-template-columns:1fr auto; } .chat-compose select { grid-column:1/-1; max-width:none; } }

.friend-visit { position:fixed; inset:0; z-index:120; background:#dfeacb; overflow:hidden; }
.friend-visit-canvas { position:absolute; inset:0; width:100%; height:100%; }
.friend-visit-head { position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:3; display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px; background:rgba(255,252,241,.92); box-shadow:0 5px 16px rgba(50,65,38,.18); }
.friend-visit-head b { color:#4f6040; font-size:11px; }
.friend-visit-head small { display:block; color:#8b977c; font-size:8px; }
.friend-visit-close { width:28px; height:28px; border:1px solid rgba(114,126,85,.2); border-radius:50%; background:#fffdf5; color:#5f7052; font-size:16px; }
.friend-visit-actions { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3; display:flex; gap:5px; flex-wrap:wrap; justify-content:center; width:min(92vw,480px); padding:7px; border-radius:14px; background:rgba(255,252,241,.92); box-shadow:0 5px 16px rgba(50,65,38,.18); }
.friend-visit-actions button { padding:7px 9px; border:1px solid rgba(114,126,85,.2); border-radius:8px; background:#fffdf5; color:#5d6c4c; font-size:9px; }
.friend-profile .profile-avatar { width:70px; height:70px; margin:0 auto 10px; display:grid; place-items:center; border-radius:50%; background:var(--friend-color,#a9c27d); color:#fff; font:900 24px var(--display); }
.friend-profile-actions { display:flex; gap:7px; flex-wrap:wrap; }
.friend-profile-actions .btn { flex:1 1 auto; }

/* 0.21.1 牧场提示移到右上，避开顶部季节/时间 */
.pasture-zone-badge { top: 136px; right: 10px; left: auto; transform: none; max-width: calc(100% - 90px); overflow: hidden; text-overflow: ellipsis; }
.pasture-upgrade-btn { top: 172px; right: 10px; left: auto; transform: none; }
@media (max-width: 700px) {
  .pasture-zone-badge { top: 132px; right: 8px; font-size: 8px; }
  .pasture-upgrade-btn { top: 166px; right: 8px; font-size: 8px; }
}

/* 0.21.1 upgrade confirmation */
.upgrade-confirm { display:grid; gap:10px; }
.upgrade-summary { display:flex; gap:8px; flex-wrap:wrap; padding:9px 10px; border-radius:10px; background:#f6f2e4; color:#728062; font-size:9px; }
.upgrade-summary b { color:#5d6d4c; }

.friend-refresh { margin-top:5px; padding:5px 9px; border:1px solid rgba(114,126,85,.2); border-radius:8px; background:#fffdf5; color:#6d7a5e; font-size:8px; }
.friend-cloud-tag { align-self:center; padding:3px 6px; border-radius:999px; background:#e8f0d9; color:#71805f; font-size:7px; white-space:nowrap; }
.friend-card.cloud { background:#f8fbf1; }

.rail-vip .rail-art { color:#b08a3e; }
.rail-vip:hover .rail-art { color:#8f6b25; }
.vip-rail-badge { background:#b08a3e; color:#fff9e5; }

/* 0.22.1 pasture upgrade clickable above scene */
.pasture-upgrade-btn { pointer-events: auto; z-index: 30; }
.pasture-zone-badge { pointer-events: none; }

/* 0.22.1 music controls */
.music-controls .setting-copy { flex:1; }
.music-control-row { display:flex; align-items:center; gap:8px; margin-top:6px; }
.music-control-row input[type=range] { width:100%; accent-color:#7f9b55; }
.music-controls select { margin-top:6px; width:100%; padding:6px 8px; border:1px solid rgba(114,126,85,.2); border-radius:8px; background:#fffdf5; color:#5f7052; font-size:10px; }

/* 0.23 seed shop pagination */
.shop-pager { display:flex; align-items:center; justify-content:center; gap:12px; margin:12px 0 4px; color:#7a866d; font-size:10px; }
.shop-page-btn { padding:6px 12px; border:1px solid rgba(112,126,92,.24); border-radius:999px; background:#fffdf5; color:#5f7052; font:800 10px var(--ui); }
.shop-page-btn:disabled { opacity:.35; }

/* 0.23 greenhouse */
.greenhouse-panel { display:grid; gap:12px; }
.greenhouse-head { margin-bottom:0; }
.gh-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.gh-plot { display:grid; gap:4px; padding:8px 5px; border:1px solid rgba(103,125,82,.22); border-radius:11px; background:linear-gradient(#fffdf4,#f1f6e5); color:#5e7050; text-align:center; min-height:96px; }
.gh-plot b { font-size:10px; }
.gh-plot small { color:#8b9680; font-size:9px; }
.gh-plot-art { display:flex; align-items:center; justify-content:center; min-height:38px; }
.gh-plot-art canvas { width:34px; height:34px; }
.gh-plot.locked { background:#f3f1e8; color:#9b9789; }
.gh-plot.mature { border-color:#c7a75c; box-shadow:0 0 0 2px rgba(217,183,90,.18); }
.gh-soil { display:block; width:30px; height:18px; border-radius:50%; background:#b78659; box-shadow:inset 0 -3px rgba(0,0,0,.12); }
.gh-lock { font-size:18px; }
@media (max-width:520px) { .gh-grid { grid-template-columns:repeat(3,1fr); } }

/* 0.23 travel orders */
.travel-orders { display:grid; gap:8px; }
.travel-order { display:flex; justify-content:space-between; gap:10px; padding:10px; border:1px solid rgba(111,126,87,.2); border-radius:10px; background:#faf9ef; }
.travel-order > div { display:grid; gap:4px; }
.travel-order b { font-size:11px; color:#5c6c4e; }
.travel-order small { color:#8b9680; font-size:9px; }
.travel-order-reward { align-items:end; text-align:right; }
.travel-order-reward span { color:#9b7b35; font-size:10px; font-weight:800; }
.travel-order.claimed { opacity:.62; }

/* 0.23.1 check-in confirmation */
.checkin-confirm-row { display:flex; justify-content:space-between; gap:10px; margin:10px 0; padding:9px 10px; border-radius:9px; background:#f6f8ee; color:#78856a; font-size:11px; }
.checkin-confirm-row b { color:#556849; }

/* 0.23.1 shop categories / VIP visibility */
.shop-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.shop-tab { min-width:0; padding:0 4px; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shop-tab[data-shop-tab="vip"] { color:#8b6a2f; background:rgba(246,227,166,.36); }
.shop-tab[data-shop-tab="vip"].active { background:linear-gradient(135deg,#f7e7a1,#e4c76d); color:#5d451d; }
.vip-status-chip { padding:5px 8px; border:1px solid #d8bc6d; border-radius:999px; background:linear-gradient(135deg,#fff4c8,#eed58a); color:#6b4f1f; font:800 9px var(--ui); white-space:nowrap; box-shadow:0 2px 7px rgba(96,73,32,.12); }
.vip-status-chip[hidden] { display:none !important; }
@media (max-width:420px) { .shop-tab { font-size:8px; } .vip-status-chip { font-size:8px; padding:4px 6px; } }

/* 0.23.1 beginner guide */
.beginner-guide { display:grid; gap:12px; }
.beginner-progress { display:flex; align-items:center; gap:5px; flex-wrap:wrap; color:#7d8a6d; font-size:10px; }
.beginner-progress i { width:18px; height:4px; border-radius:999px; background:#dfe5d2; }
.beginner-progress i.active { background:#8aa36b; }
.beginner-progress i.done { background:#b9c9a3; }
.beginner-progress span { margin-left:auto; font-weight:800; }

/* 0.24 login screen */
.login-screen { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; overflow:auto; padding:24px 16px; background:linear-gradient(160deg,#dcecc8 0%,#f7f0d5 46%,#c9dfc2 100%); }
.login-screen[hidden] { display:none !important; }
.login-sky { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.login-sun { position:absolute; top:8%; right:12%; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle,#fff4b8 0%,#ffe59a 42%,rgba(255,224,143,0) 72%); opacity:.85; }
.login-hill { position:absolute; left:-15%; right:-15%; bottom:-18%; height:52%; border-radius:50% 50% 0 0; background:linear-gradient(180deg,rgba(154,190,117,.52),rgba(113,154,85,.7)); transform:rotate(-3deg); }
.login-hill-b { bottom:-27%; height:56%; background:linear-gradient(180deg,rgba(124,166,94,.48),rgba(82,126,65,.65)); transform:rotate(5deg); }
.login-firefly { position:absolute; width:7px; height:7px; border-radius:50%; background:#fff3a8; box-shadow:0 0 12px 4px rgba(255,232,132,.8); animation:loginFly 7s ease-in-out infinite; }
.login-fly-a { left:14%; top:30%; animation-delay:-1s; }
.login-fly-b { left:78%; top:24%; animation-delay:-3.2s; animation-duration:9s; }
.login-fly-c { left:64%; top:72%; animation-delay:-5s; animation-duration:8s; }
@keyframes loginFly { 0%,100%{ transform:translate(0,0); opacity:.55; } 50%{ transform:translate(18px,-22px); opacity:1; } }
.login-card { position:relative; z-index:1; width:min(430px,100%); margin:auto; padding:24px 26px 20px; border:1px solid rgba(255,255,255,.8); border-radius:24px; background:linear-gradient(160deg,rgba(255,253,244,.94),rgba(248,247,229,.9)); box-shadow:0 30px 70px rgba(62,83,47,.2),inset 0 1px rgba(255,255,255,.9); backdrop-filter:blur(14px); }
.login-brand { display:flex; align-items:center; gap:10px; color:#577044; }
.login-brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#e7efd5; color:#69894e; }
.login-brand-mark svg { width:27px; height:27px; }
.login-brand b { display:block; font:800 17px/1.2 "Songti SC","STSong",serif; letter-spacing:.12em; }
.login-brand small { display:block; margin-top:3px; color:#9aa88b; font:700 7px/1 var(--ui); letter-spacing:.26em; }
.login-server { display:flex; align-items:center; gap:9px; margin:18px 0 16px; padding:9px 11px; border:1px solid rgba(115,139,91,.2); border-radius:12px; background:rgba(234,243,222,.7); }
.login-server-dot { width:8px; height:8px; border-radius:50%; background:#8fba6e; box-shadow:0 0 0 4px rgba(143,186,110,.16); }
.login-server div { display:grid; gap:2px; flex:1; }
.login-server small { color:#94a184; font-size:8px; }
.login-server b { color:#557143; font-size:12px; letter-spacing:.06em; }
.login-server em { color:#7ba15d; font:800 7px var(--ui); letter-spacing:.14em; }
.login-welcome { margin-bottom:15px; }
.login-welcome .eyebrow { margin:0 0 4px; color:#a08d57; font:800 8px var(--ui); letter-spacing:.2em; }
.login-welcome h1 { margin:0 0 5px; color:#43563a; font:800 25px/1.2 "Songti SC","STSong",serif; letter-spacing:.06em; }
.login-welcome p:last-child { margin:0; color:#8c987f; font-size:10px; line-height:1.7; }
.login-field { display:grid; gap:6px; margin:10px 0; color:#657457; font:800 10px var(--ui); }
.login-field input { width:100%; height:42px; padding:0 12px; border:1px solid rgba(101,120,82,.22); border-radius:11px; background:#fffdf7; color:#3f5034; font:500 13px var(--ui); outline:none; transition:border-color .2s,box-shadow .2s; }
.login-field input:focus { border-color:#9bb583; box-shadow:0 0 0 3px rgba(155,181,131,.18); }
.login-field input::placeholder { color:#b7c0ac; }
.login-pass-wrap { position:relative; display:block; }
.login-pass-wrap input { padding-right:56px; }
.login-eye { position:absolute; right:6px; top:5px; height:32px; padding:0 8px; border:0; border-radius:8px; background:#eef3e4; color:#748661; font:800 9px var(--ui); }
.login-options { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0 4px; }
.login-check { display:flex; align-items:center; gap:6px; color:#758266; font-size:10px; cursor:pointer; }
.login-check input { width:14px; height:14px; accent-color:#809b62; }
.login-options-hint { color:#a5af98; font-size:8px; }
.login-actions { display:grid; gap:8px; margin-top:14px; }
.login-btn { height:43px; border:1px solid transparent; border-radius:11px; font:800 12px var(--ui); letter-spacing:.06em; cursor:pointer; transition:transform .16s,box-shadow .16s,opacity .16s; }
.login-btn:active { transform:translateY(1px); }
.login-btn-primary { background:linear-gradient(135deg,#7f9f62,#5f7f4a); color:#fff; box-shadow:0 8px 18px rgba(82,112,63,.25); }
.login-btn-secondary { background:#fffdf6; border-color:rgba(111,132,89,.26); color:#647756; }
.login-btn[disabled] { opacity:.55; cursor:wait; }
.login-message { min-height:16px; margin:9px 0 0; color:#a05f4d; font-size:10px; line-height:1.5; }
.login-message.ok { color:#698b52; }
.login-foot { margin:10px 0 0; color:#a4ae97; font-size:8px; text-align:center; line-height:1.6; }
@media (max-width:420px) { .login-card { padding:20px 18px 16px; border-radius:20px; } .login-welcome h1 { font-size:22px; } .login-sun { width:110px; height:110px; } }

/* A2 tool additions */
.dock .tool-list { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.empty-hand-btn { margin-left: 4px; }
.crop-info-card { display:grid; gap:7px; padding:12px; border:1px solid rgba(110,137,82,.18); border-radius:12px; background:rgba(255,253,244,.75); }
.crop-info-card div { display:flex; justify-content:space-between; gap:12px; color:#77866a; font-size:9px; }
.crop-info-card b { color:#526647; }
@media (max-width:700px) {
  .dock .tool-list { grid-template-columns: repeat(8, minmax(0, 1fr)); gap:3px; }
  .dock .tool-card { height:52px; }
  .dock .tool-name { font-size:8px; }
  .dock .tool-ico { width:18px; height:18px; }
}

.backpack-upgrade-inline {
  margin-left: 8px;
  padding: 4px 9px;
  border: 1px solid rgba(104,126,84,.28);
  border-radius: 999px;
  color: #5f7650;
  background: rgba(245,250,232,.9);
  font-size: 8px;
  font-weight: 800;
  vertical-align: middle;
}

/* =========================================================
   0.26 shop split (normal / premium)
   ========================================================= */
.modal-panel.shop-modal { width: min(1080px, 100%); max-height: min(92vh, 920px); }
.modal-panel.shop-modal #modal-body { padding: 18px 18px 22px; }
.shop-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.shop-pane { min-width: 0; padding: 15px 15px 16px; border: 1px solid rgba(114,132,91,.18); border-radius: 20px; background: rgba(255,253,244,.74); }
.shop-pane-premium { border-color: rgba(184,139,79,.26); background: linear-gradient(160deg, rgba(255,250,236,.94), rgba(250,238,215,.8)); }
.shop-pane-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.shop-pane-head .eyebrow { margin: 0 0 4px; font-size: 7px; letter-spacing: .18em; }
.shop-pane-head h2 { margin: 0; font-family: var(--display); font-size: 24px; letter-spacing: .06em; color: #35472c; }
.shop-pane-balance { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid rgba(118,135,92,.18); border-radius: 999px; background: rgba(255,255,247,.86); font-size: 10px; color: #6b775c; }
.shop-pane-balance img { width: 16px; height: 16px; object-fit: contain; }
.shop-pane-balance b { color: #475a39; font-size: 12px; }
.shop-pane-sub { margin: 6px 0 10px; color: #8a957d; font-size: 8px; line-height: 1.5; }
.shop-cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 10px; }
.shop-cat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 3px 5px; border: 1px solid rgba(104,126,84,.16); border-radius: 11px; background: rgba(252,252,244,.8); color: #67785a; font-size: 8px; }
.shop-cat-icon { font-size: 15px; line-height: 1; }
.shop-cat b { font-size: 8px; font-weight: 800; }
.shop-cat.active { border-color: rgba(96,126,68,.55); background: linear-gradient(160deg, #eef6df, #dfecc9); color: #425c31; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.shop-pane-body { min-height: 280px; }
.shop-pane-body .shop-grid, .shop-pane-body .shop-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.shop-pane-body .shop-card { padding: 8px; border-radius: 12px; }
.shop-pane-body .shop-art { height: 68px; border-radius: 9px; }
.shop-pane-body .shop-art canvas { width: 44px; height: 44px; }
.shop-pane-body .shop-info { gap: 3px; }
.shop-pane-body .shop-name { font-size: 10px; }
.shop-pane-body .shop-desc { font-size: 7.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop-pane-body .shop-stats { font-size: 7px; gap: 3px 7px; }
.shop-pane-body .shop-buy-row { gap: 3px; flex-wrap: wrap; }
.shop-pane-body .price { font-size: 9px; }
.shop-pane-body .buy-btn { padding: 4px 7px; font-size: 8px; }
.shop-pane-body .section-label { margin: 9px 0 6px; }
.shop-pane-body .section-label h3 { font-size: 12px; }
.shop-pane-body .section-label span { font-size: 7px; }
.shop-pane-body .shop-pager { margin-top: 8px; }
.shop-pane-body .shop-seed-categories { gap: 4px; }
.shop-pane-body .shop-seed-category { padding: 4px 7px; font-size: 8px; }
.shop-pane-body .animal-shop-grid, .shop-pane-body .pet-shop-grid, .shop-pane-body .clothes-grid { grid-template-columns: 1fr; gap: 6px; }
.shop-pane-body .animal-shop-card, .shop-pane-body .pet-shop-card { grid-template-columns: 56px minmax(0,1fr); }
.shop-pane-body .animal-shop-art canvas { width: 50px; height: 50px; }
.shop-empty-premium { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 240px; padding: 20px 12px; border: 1px dashed rgba(157,134,92,.3); border-radius: 14px; text-align: center; color: #8b8063; background: rgba(255,251,238,.55); }
.shop-empty-premium span { font-size: 26px; }
.shop-empty-premium b { font-size: 11px; color: #6d6249; }
.shop-empty-premium p { max-width: 250px; margin: 0; font-size: 8px; line-height: 1.6; }
.shop-mobile-switch { display: none; }
.price-gem { width: 12px; height: 12px; object-fit: contain; vertical-align: -2px; }
.fish-shop-art { display: grid; place-items: center; background: linear-gradient(180deg, #dff0ec, #cbe4dd); }
.fish-shop-art canvas { width: 82px; height: 56px; }
.shop-card.premium-card { border-color: rgba(190,151,84,.28); background: linear-gradient(165deg, rgba(255,252,241,.98), rgba(251,243,224,.9)); }
.shop-card.premium-card .shop-art { background: linear-gradient(160deg, #fff4d9, #f2dfb7); }
@media (max-width: 760px) {
  .modal-panel.shop-modal { width: 100%; max-height: 100%; border-radius: 18px; }
  .modal-panel.shop-modal #modal-body { padding: 12px 10px 18px; }
  .shop-split { display: block; }
  .shop-pane { display: none; padding: 12px 10px 14px; border-radius: 16px; }
  .shop-split.show-normal .shop-pane-normal, .shop-split.show-premium .shop-pane-premium { display: block; }
  .shop-mobile-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 0 0 9px; padding: 3px; border: 1px solid rgba(104,126,84,.16); border-radius: 12px; background: rgba(246,247,235,.85); }
  .shop-pane-switch { padding: 8px 6px; border-radius: 9px; color: #748468; font-size: 9px; font-weight: 800; }
  .shop-pane-switch.active { background: #fffdf4; color: #3f5730; box-shadow: 0 2px 8px rgba(70,86,50,.12); }
  .shop-pane-head h2 { font-size: 20px; }
  .shop-pane-body .shop-grid, .shop-pane-body .shop-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .shop-pane-body .shop-art { height: 60px; }
  .shop-pane-body .shop-art canvas { width: 38px; height: 38px; }
  .shop-pane-body .shop-name { font-size: 9px; }
  .shop-pane-body .shop-desc { display: none; }
  .shop-pane-body .shop-stats { font-size: 6.5px; }
  .shop-pane-body .buy-btn { padding: 4px 6px; font-size: 7.5px; }
  .shop-cat { padding: 5px 2px; }
  .shop-cat-icon { font-size: 14px; }
}

.shop-pane-body .shop-name-row { flex-wrap: wrap; align-items: flex-start; }
.shop-pane-body .shop-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.shop-pane-body .shop-badge { flex: 0 0 auto; }
.activity-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0 2px; color: #7c886f; font-size: 8px; }
.activity-pager .shop-page-btn { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(104,126,84,.22); background: #fffdf4; color: #5e7350; font-size: 8px; font-weight: 800; }
.activity-pager .shop-page-btn:disabled { opacity: .4; }
.warehouse-max-inline { margin-left: 8px; font-size: 8px; color: #9a9c86; font-weight: 600; }

/* =========================================================
   0.26 fish pond
   ========================================================= */
.pond-panel { display: flex; flex-direction: column; gap: 10px; }
.pond-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.pond-head .modal-head { margin-bottom: 0; }
.pond-stats { display: grid; grid-template-columns: repeat(3, minmax(70px, 1fr)); gap: 6px; flex: 0 0 auto; }
.pond-stats div { padding: 8px 10px; border: 1px solid rgba(104,126,84,.18); border-radius: 12px; background: rgba(252,252,242,.8); text-align: center; }
.pond-stats span { display: block; color: #8b957f; font-size: 7px; }
.pond-stats b { display: block; margin-top: 2px; color: #4e6640; font-size: 14px; }
.pond-scene-wrap { position: relative; overflow: hidden; border: 1px solid rgba(88,112,80,.2); border-radius: 18px; background: #cfe7da; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.pond-scene-wrap canvas { display: block; width: 100%; height: 250px; }
.pond-scene-hint { position: absolute; left: 12px; bottom: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(255,252,238,.84); color: #5d7050; font-size: 8px; }
.pond-actions { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(104,126,84,.16); border-radius: 14px; background: rgba(255,253,244,.74); }
.pond-actions span { color: #7c886f; font-size: 8px; line-height: 1.5; }
.pond-actions b { color: #4e6640; }
.pond-fish-btn { flex: 0 0 auto; min-width: 150px; }
.pond-composition { display: flex; flex-wrap: wrap; gap: 6px; }
.pond-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border: 1px solid rgba(104,126,84,.16); border-radius: 999px; background: rgba(255,253,244,.8); color: #677a5a; font-size: 8px; }
.pond-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--fish-color, #9fb98a); box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); }
.pond-chip b { color: #455c37; }
.pond-chip small { color: #929b86; font-size: 7px; }
.pond-empty-chip { color: #9aa38d; font-size: 8px; }
.pond-fry-list { display: flex; flex-direction: column; gap: 5px; }
.pond-fry-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(104,126,84,.14); border-radius: 11px; background: rgba(255,253,244,.72); }
.pond-fry-name b { display: block; color: #4e6240; font-size: 9px; }
.pond-fry-name small { display: block; margin-top: 1px; color: #909a84; font-size: 7px; }
.pond-fry-stock { color: #7f8b73; font-size: 8px; }
.pond-fry-row .btn { padding: 5px 9px; font-size: 8px; }
@media (max-width: 760px) {
  .pond-head { flex-direction: column; gap: 8px; }
  .pond-head .modal-head { padding-right: 30px; }
  .pond-stats { width: 100%; }
  .pond-scene-wrap canvas { height: 200px; }
  .pond-actions { flex-direction: column; align-items: stretch; gap: 7px; }
  .pond-fish-btn { width: 100%; }
  .pond-fry-row { grid-template-columns: minmax(0,1fr) auto auto; }
  .pond-fry-stock { grid-column: 1; grid-row: 2; }
}

/* =========================================================
   0.26 greenhouse iso map
   ========================================================= */
.greenhouse-panel { display: flex; flex-direction: column; gap: 9px; }
.gh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gh-head .modal-head { margin-bottom: 0; }
.gh-stats { display: grid; grid-template-columns: repeat(3, minmax(64px, 1fr)); gap: 6px; flex: 0 0 auto; }
.gh-stats div { padding: 7px 9px; border: 1px solid rgba(104,126,84,.18); border-radius: 11px; background: rgba(252,252,242,.82); text-align: center; }
.gh-stats span { display: block; color: #8b957f; font-size: 7px; }
.gh-stats b { display: block; margin-top: 2px; color: #4e6640; font-size: 13px; }
.gh-scene-wrap { position: relative; overflow: hidden; border: 1px solid rgba(118,140,100,.22); border-radius: 18px; background: linear-gradient(170deg, #f2f8e7, #dcecc8); }
.gh-scene-wrap canvas { display: block; width: 100%; height: 400px; }
.gh-scene-hint { position: absolute; right: 10px; bottom: 9px; padding: 4px 9px; border-radius: 999px; background: rgba(255,252,238,.86); color: #7b886d; font-size: 7px; }
.gh-seed-bar { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid rgba(104,126,84,.16); border-radius: 13px; background: rgba(255,253,244,.76); }
.gh-seed-label { flex: 0 0 auto; color: #7c886f; font-size: 8px; }
.gh-seed-label b { color: #4e6640; }
.gh-seed-list { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.gh-seed { display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 0 0 48px; padding: 4px 3px; border: 1px solid rgba(104,126,84,.16); border-radius: 9px; background: rgba(255,255,247,.8); }
.gh-seed canvas { width: 28px; height: 28px; }
.gh-seed b { max-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #5d7050; font-size: 7px; }
.gh-seed small { color: #9aa38d; font-size: 6px; }
.gh-seed.active { border-color: rgba(96,126,68,.55); background: #eaf4d8; }
.gh-seed-empty { color: #9aa38d; font-size: 8px; padding: 8px 2px; }
.gh-note { display: flex; justify-content: space-between; gap: 10px; color: #8b957f; font-size: 7px; line-height: 1.5; }
@media (max-width: 760px) {
  .gh-head { flex-direction: column; gap: 7px; }
  .gh-head .modal-head { padding-right: 30px; }
  .gh-stats { width: 100%; }
  .gh-scene-wrap canvas { height: 300px; }
  .gh-seed-bar { flex-direction: column; align-items: flex-start; gap: 5px; }
  .gh-seed-list { width: 100%; }
  .gh-note { flex-direction: column; gap: 2px; }
}

/* 0.26 town iso canvas */
.town-art { overflow: hidden; }
.town-art canvas { display: block; width: 100%; height: 100%; }

/* =========================================================
   0.26 farmer card / achievements / chat identity
   ========================================================= */
.profile-id-chip { display: inline-block; margin-left: 5px; padding: 2px 7px; border-radius: 999px; background: rgba(123,146,99,.14); color: #58704a; font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.profile-achievement-picker { margin: 10px 0 4px; padding: 9px 10px; border: 1px solid rgba(104,126,84,.16); border-radius: 13px; background: rgba(255,253,244,.72); }
.profile-achievement-picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.profile-achievement-picker-head b { color: #4f6541; font-size: 9px; }
.profile-achievement-picker-head span { color: #949d88; font-size: 7px; }
.achievement-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.achievement-pick { display: grid; grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 5px; align-items: center; padding: 5px 6px; border: 1px solid rgba(104,126,84,.16); border-radius: 10px; background: rgba(255,255,247,.8); text-align: left; }
.achievement-pick span { grid-row: 1 / span 2; font-size: 15px; text-align: center; }
.achievement-pick b { color: #5a6d4d; font-size: 8px; }
.achievement-pick small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9aa38d; font-size: 6px; }
.achievement-pick.active { border-color: rgba(96,126,68,.55); background: #eaf4d8; }
.card-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.card-badge { display: inline-flex; align-items: center; gap: 3px; padding: 4px 7px; border: 1px solid rgba(171,140,79,.28); border-radius: 999px; background: rgba(255,248,226,.9); color: #7c683f; font-size: 7px; }
.card-badge i { font-style: normal; font-size: 10px; }
.card-badge b { font-size: 7px; }
.card-no-badge { color: #a4ab98; font-size: 8px; }
.profile-card-actions { display: flex; gap: 6px; margin: 7px 0 2px; }
.profile-card-actions .btn { padding: 5px 9px; font-size: 8px; }
.farmer-card { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.farmer-card-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 300px; padding: 14px 10px 12px; border: 1px solid rgba(126,146,101,.2); border-radius: 18px; background: radial-gradient(circle at 50% 30%, rgba(255,250,225,.9), rgba(226,239,207,.72)); overflow: hidden; }
.farmer-card-stage::before { content: ''; position: absolute; inset: 12px 12px auto; height: 82%; border-radius: 14px; border: 1px dashed rgba(128,146,103,.28); }
.farmer-card-eyebrow { position: absolute; top: 15px; left: 15px; color: #879879; font-size: 7px; font-weight: 800; letter-spacing: .16em; z-index: 1; }
.farmer-card-stage canvas { position: relative; z-index: 1; width: 210px; height: 260px; }
.farmer-card-id { position: absolute; left: 14px; bottom: 12px; padding: 3px 8px; border-radius: 999px; background: rgba(255,253,242,.9); border: 1px solid rgba(126,146,101,.22); color: #60764f; font-size: 8px; font-weight: 800; letter-spacing: .08em; z-index: 1; }
.farmer-card-copy { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.farmer-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-right: 34px; }
.farmer-card-top h2 { margin: 2px 0 0; font-family: var(--display); font-size: 27px; letter-spacing: .06em; color: #35472c; }
.farmer-card-sub { margin: 2px 0 0; color: #8b957f; font-size: 8px; }
.farmer-card-online { flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; background: rgba(123,154,98,.14); color: #5e7850; font-size: 7px; font-weight: 800; }
.farmer-card-bio { margin: 1px 0 2px; padding: 8px 10px; border-radius: 11px; background: rgba(255,253,244,.65); border: 1px solid rgba(104,126,84,.13); color: #7d876f; font-size: 8px; line-height: 1.65; min-height: 34px; }
.farmer-card-section { display: flex; flex-direction: column; gap: 4px; }
.farmer-card-section > span { color: #94a086; font-size: 7px; letter-spacing: .08em; }
.card-clothes { display: flex; flex-wrap: wrap; gap: 5px; }
.card-clothes-chip { padding: 3px 7px; border: 1px solid rgba(132,149,107,.22); border-radius: 999px; background: rgba(248,250,238,.8); color: #71845f; font-size: 7px; }
.farmer-card-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 8px; }
.farmer-card-actions .btn { padding: 7px 11px; font-size: 8px; }
.farmer-card-loading { display: grid; place-items: center; min-height: 240px; color: #8e9981; font-size: 10px; }
.chat-author { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.chat-author b { color: #566d47; font-size: 9px; }
.chat-id { padding: 1px 5px; border-radius: 999px; background: rgba(111,135,88,.12); color: #7d8e6d; font-size: 6.5px; letter-spacing: .05em; }
.chat-message.mine .chat-author b { color: #49633b; }
.chat-text { display: block; }
.mail-section-label { margin: 12px 0 6px; color: #8b957f; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.friend-request-row { cursor: default; align-items: center; }
.friend-request-actions { display: flex; gap: 5px; margin-left: auto; }
.friend-request-actions .btn { padding: 5px 9px; font-size: 8px; }
@media (max-width: 760px) {
  .farmer-card { grid-template-columns: 1fr; gap: 10px; }
  .farmer-card-stage { min-height: 250px; }
  .farmer-card-stage canvas { width: 180px; height: 230px; }
  .farmer-card-top h2 { font-size: 23px; }
  .achievement-picker { grid-template-columns: 1fr; }
  .mail-row.friend-request-row { flex-wrap: wrap; }
  .friend-request-actions { width: 100%; justify-content: flex-end; }
}

.feed-pack-select { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid rgba(104,126,84,.16); border-radius: 12px; background: rgba(255,253,244,.72); color: #7c886f; font-size: 8px; }
.feed-pack-select select { flex: 1 1 150px; padding: 6px 8px; border: 1px solid rgba(104,126,84,.24); border-radius: 8px; background: #fffdf4; color: #556b47; font-size: 8px; }
.feed-pack-select small { color: #9aa38d; font-size: 7px; }

.warehouse-art canvas { display:block; width:56px; height:56px; }


/* 0.27 quick UI batch */
.farmer-xp { display:block; width:74px; height:5px; margin-top:2px; border-radius:999px; background:rgba(91,113,70,.18); overflow:hidden; }
.farmer-xp i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#8fbb62,#d6b75c); transition:width .3s ease; }
.animal-rename { margin-left:6px; padding:2px 6px; border:1px solid rgba(104,126,84,.24); border-radius:999px; background:rgba(255,253,244,.8); color:#71845f; font-size:7px; vertical-align:middle; }
.mail-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 8px; color:#8b957f; font-size:8px; }
.mail-toolbar .btn { padding:5px 9px; font-size:8px; }
.mail-row { display:flex; align-items:center; gap:6px; padding:0 6px 0 0; }
.mail-row .mail-open { flex:1; min-width:0; display:flex; align-items:center; gap:8px; padding:9px 8px; border:0; background:transparent; text-align:left; }
.mail-delete { flex:0 0 auto; padding:5px 8px; border:1px solid rgba(157,101,83,.25); border-radius:8px; background:rgba(255,245,236,.8); color:#a06a58; font-size:7px; }
.breed-panel { display:flex; flex-direction:column; gap:9px; }
.breed-slots { display:grid; grid-template-columns:1fr 28px 1fr; align-items:center; gap:7px; }
.breed-slot { display:flex; flex-direction:column; gap:5px; padding:11px; border:1px solid rgba(104,126,84,.2); border-radius:14px; background:rgba(255,253,244,.8); }
.breed-slot-tag { color:#7b8d6b; font-size:8px; font-weight:800; }
.breed-slot select { width:100%; padding:8px 7px; border:1px solid rgba(104,126,84,.25); border-radius:9px; background:#fffdf4; color:#536a45; font-size:9px; }
.breed-slot small { color:#9aa38d; font-size:7px; }
.breed-heart { color:#d88c9a; font-size:20px; text-align:center; }
.breed-item-title { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:2px; }
.breed-item-title b { color:#536a45; font-size:9px; }
.breed-item-title span { color:#9aa38d; font-size:7px; }
.breed-item-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.breed-item { display:flex; flex-direction:column; gap:2px; padding:8px; border:1px solid rgba(104,126,84,.18); border-radius:11px; background:rgba(255,255,247,.8); }
.breed-item input { display:none; }
.breed-item b { color:#5b6e4c; font-size:8px; }
.breed-item small { color:#9aa38d; font-size:7px; }
.breed-item.active { border-color:rgba(96,126,68,.55); background:#eaf4d8; }
.breed-item[aria-disabled="true"] { opacity:.45; }
.rename-dialog { display:flex; flex-direction:column; gap:9px; }
.rename-dialog input { width:100%; padding:10px 12px; border:1px solid rgba(104,126,84,.28); border-radius:11px; background:#fffdf4; color:#4f6641; font-size:13px; }

/* =========================================================
   0.27 town grid / bank / market / weather / collection
   ========================================================= */
.town-grid { position:absolute; inset:96px 14px 70px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); grid-template-rows:repeat(3, minmax(0,1fr)); gap:10px; padding:16px; border-radius:26px; background:radial-gradient(circle at 50% 35%, rgba(255,252,231,.75), rgba(208,228,185,.5)); border:1px solid rgba(121,145,96,.2); }
.town-building { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:0; padding:10px 6px; border:1px solid rgba(108,128,86,.2); border-radius:18px; background:linear-gradient(160deg, rgba(255,253,242,.96), rgba(246,241,218,.9)); box-shadow:0 6px 16px rgba(75,90,54,.1); color:#556a47; transition:transform .15s ease, box-shadow .15s ease; }
.town-building:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(75,90,54,.16); }
.town-building-art { display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:var(--building-color, #c9b47c); font-size:26px; box-shadow:inset 0 -2px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5); }
.town-building-copy { display:flex; flex-direction:column; gap:1px; text-align:center; }
.town-building-copy b { font-size:10px; letter-spacing:.03em; }
.town-building-copy small { color:#8b957f; font-size:6.5px; }
.weather-board { padding:10px 12px; border:1px solid rgba(104,126,84,.18); border-radius:14px; background:rgba(255,253,244,.8); margin-bottom:10px; }
.weather-board-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:7px; }
.weather-board-head b { color:#4f6541; font-size:10px; }
.weather-board-head span { color:#949d88; font-size:7px; }
.weather-forecast { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.weather-day { display:flex; flex-direction:column; align-items:center; gap:1px; padding:5px 2px; border-radius:9px; background:rgba(247,250,236,.85); border:1px solid rgba(104,126,84,.12); }
.weather-day small { color:#8b957f; font-size:6px; text-align:center; }
.weather-day b { color:#5b6e4c; font-size:7px; }
.weather-icon { font-size:16px; line-height:1.15; }
.weather-day.rain { background:rgba(226,239,245,.9); }
.weather-day.snow { background:rgba(241,246,250,.9); }
.collection-board { padding:10px 12px; border:1px solid rgba(171,140,79,.22); border-radius:14px; background:linear-gradient(160deg, rgba(255,251,236,.9), rgba(250,240,214,.75)); margin-bottom:10px; }
.collection-head { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.collection-head h3 { margin:1px 0 0; font-family:var(--display); font-size:15px; color:#5b5138; }
.collection-head b { color:#8a7448; font-size:13px; }
.collection-progress { height:6px; margin:6px 0 8px; border-radius:999px; background:rgba(139,116,72,.18); overflow:hidden; }
.collection-progress i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#c7a65f,#8fb568); }
.collection-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:5px; }
.collection-reward { display:flex; flex-direction:column; gap:2px; padding:6px; border:1px solid rgba(143,118,71,.16); border-radius:9px; background:rgba(255,255,247,.75); }
.collection-reward b { color:#756343; font-size:6.5px; line-height:1.3; }
.collection-need { color:#9b8a66; font-size:6px; }
.collection-reward .btn { padding:3px 5px; font-size:6.5px; }
.collection-reward.ready { border-color:rgba(121,152,86,.5); background:#eff6df; }
.collection-reward.claimed { opacity:.62; }
.bank-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:6px 0 9px; }
.bank-summary div { padding:8px; border:1px solid rgba(104,126,84,.16); border-radius:11px; background:rgba(255,253,244,.8); text-align:center; }
.bank-summary span { display:block; color:#8b957f; font-size:7px; }
.bank-summary b { display:block; color:#4e6640; font-size:15px; }
.bank-summary small { color:#9aa38d; font-size:6px; }
.bank-amount input { width:100%; margin-top:4px; padding:8px 9px; border:1px solid rgba(104,126,84,.24); border-radius:9px; background:#fffdf4; color:#536a45; font-size:10px; }
.bank-amount label { color:#7c886f; font-size:8px; }
.bank-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin:7px 0 10px; }
.bank-actions .btn { padding:7px 4px; font-size:8px; }
.bank-products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.bank-product { display:flex; flex-direction:column; gap:3px; padding:8px; border:1px solid rgba(104,126,84,.16); border-radius:11px; background:rgba(255,255,247,.8); }
.bank-product b { color:#556a47; font-size:9px; }
.bank-product small { color:#929b86; font-size:6.5px; }
.bank-product span { color:#8a7448; font-size:7px; }
.bank-product .btn { padding:5px; font-size:7px; }
.bank-list { display:flex; flex-direction:column; gap:5px; }
.bank-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 9px; border:1px solid rgba(104,126,84,.14); border-radius:10px; background:rgba(255,253,244,.8); }
.bank-row b { display:block; color:#5b6e4c; font-size:8px; }
.bank-row small { color:#929b86; font-size:7px; }
.market-fee-note { padding:8px 10px; border:1px dashed rgba(165,124,66,.4); border-radius:10px; background:rgba(255,247,228,.85); color:#8a6f45; font-size:7.5px; line-height:1.5; margin-bottom:8px; }
.market-slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin-bottom:9px; }
.market-slot { position:relative; display:flex; flex-direction:column; gap:2px; padding:7px 7px 7px 20px; border:1px solid rgba(143,118,71,.18); border-radius:10px; background:rgba(255,253,244,.82); }
.market-slot.empty { opacity:.67; }
.market-slot-index { position:absolute; left:6px; top:7px; color:#a49370; font-size:7px; }
.market-slot b { color:#6b5b3d; font-size:7.5px; }
.market-slot small { color:#94876a; font-size:6.5px; }
.market-slot .btn { padding:3px 5px; font-size:6px; }
.market-form { display:grid; grid-template-columns:1.4fr .7fr .8fr .8fr auto; gap:5px; align-items:end; }
.market-form label { display:flex; flex-direction:column; gap:2px; color:#7c886f; font-size:7px; }
.market-form input, .market-form select { width:100%; padding:6px 5px; border:1px solid rgba(104,126,84,.22); border-radius:7px; background:#fffdf4; color:#556a47; font-size:8px; }
.market-form .btn { padding:7px 8px; font-size:7.5px; }
.advisor-panel { display:flex; flex-direction:column; gap:8px; }
.advisor-head { display:flex; align-items:center; gap:10px; }
.advisor-portrait { display:grid; place-items:center; width:56px; height:56px; border-radius:16px; background:#e5efd7; font-size:30px; }
.advisor-chat { display:flex; flex-direction:column; gap:6px; max-height:280px; overflow:auto; padding:8px; border:1px solid rgba(104,126,84,.16); border-radius:13px; background:rgba(255,253,244,.7); }
.advisor-line { display:flex; flex-direction:column; gap:1px; max-width:88%; padding:6px 8px; border-radius:10px; background:rgba(239,245,226,.9); }
.advisor-line.me { align-self:flex-end; background:rgba(222,238,201,.9); }
.advisor-line b { color:#5d704c; font-size:7px; }
.advisor-line span { color:#657758; font-size:8px; line-height:1.6; }
.advisor-compose { display:flex; gap:5px; }
.advisor-compose input { flex:1; padding:9px 10px; border:1px solid rgba(104,126,84,.24); border-radius:10px; background:#fffdf4; color:#536a45; font-size:10px; }
.advisor-suggest { display:flex; flex-wrap:wrap; gap:4px; }
.advisor-suggest button { padding:4px 7px; border:1px solid rgba(104,126,84,.2); border-radius:999px; background:rgba(250,252,240,.9); color:#71845f; font-size:7px; }
@media (max-width:760px) {
  .town-grid { inset:88px 8px 64px; gap:6px; padding:8px; border-radius:18px; }
  .town-building { padding:6px 3px; border-radius:12px; }
  .town-building-art { width:40px; height:40px; border-radius:12px; font-size:20px; }
  .town-building-copy b { font-size:8px; }
  .town-building-copy small { font-size:5.5px; }
  .weather-forecast { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .market-form { grid-template-columns:1fr 1fr; }
  .bank-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bank-products { grid-template-columns:1fr; }
}

.hud-level-chip { position:fixed; right:14px; left:auto; top:70px; z-index:28; display:flex; align-items:center; gap:5px; padding:4px 8px; border:1px solid rgba(255,255,255,.7); border-radius:999px; background:rgba(255,253,242,.78); box-shadow:0 3px 10px rgba(54,69,40,.12); color:#5c7049; font-size:8px; font-weight:800; backdrop-filter:blur(6px); }
.hud-level-chip span { white-space:nowrap; }
.hud-xp { display:block; width:42px; height:4px; border-radius:999px; background:rgba(94,116,72,.2); overflow:hidden; }
.hud-xp b { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#8fbb62,#d6b75c); transition:width .3s ease; }
@media (max-width:760px) { .hud-level-chip { top:64px; right:10px; left:auto; } }

.market-list { display:flex; flex-direction:column; gap:5px; }
.market-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border:1px solid rgba(104,126,84,.15); border-radius:10px; background:rgba(255,253,244,.8); }
.market-row b { display:block; color:#5b6e4c; font-size:8px; }
.market-row small { color:#929b86; font-size:7px; }
.market-price { color:#8a7448; font-size:9px; font-weight:800; }
.market-row .btn { padding:5px 9px; font-size:7px; }
.meilian-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.recipe-card { display:flex; flex-direction:column; gap:5px; padding:9px; border:1px solid rgba(104,126,84,.16); border-radius:12px; background:rgba(255,253,244,.8); }
.recipe-head { display:flex; align-items:baseline; justify-content:space-between; gap:6px; }
.recipe-head b { color:#5b6e4c; font-size:10px; }
.recipe-head span { color:#9a8560; font-size:7px; }
.recipe-inputs { display:flex; flex-wrap:wrap; gap:3px 6px; }
.recipe-inputs span { font-size:7px; }
.recipe-inputs .ok { color:#6f8d59; }
.recipe-inputs .lack { color:#b07a63; }
.recipe-foot { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.recipe-foot small { color:#9aa38d; font-size:6.5px; }
.recipe-foot .btn { padding:5px 8px; font-size:7px; }
@media (max-width:760px) { .meilian-grid { grid-template-columns:1fr; } .market-row { flex-wrap:wrap; } }

.greenhouse-scene { position:fixed; inset:0; z-index:45; background:linear-gradient(180deg,#e4f0d8,#c8e0c4); overflow:hidden; }
.greenhouse-scene canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.greenhouse-top { position:absolute; top:0; left:0; right:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; background:linear-gradient(180deg,rgba(245,251,237,.92),rgba(245,251,237,0)); pointer-events:none; }
.greenhouse-top > * { pointer-events:auto; }
.greenhouse-brand { text-align:center; }
.greenhouse-brand h2 { margin:1px 0 0; font-family:var(--display); font-size:20px; letter-spacing:.08em; color:#3f5534; }
.greenhouse-brand span { color:#7e8f70; font-size:8px; }
.greenhouse-scene-chip { padding:5px 9px; border:1px solid rgba(255,255,255,.7); border-radius:999px; background:rgba(255,253,242,.8); color:#5b7049; font-size:8px; font-weight:800; }
.greenhouse-scene-hint { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); padding:6px 12px; border-radius:999px; background:rgba(255,253,240,.85); color:#71845f; font-size:8px; z-index:2; white-space:nowrap; box-shadow:0 4px 12px rgba(60,75,45,.12); }

.greenhouse-back { padding:7px 12px; border:1px solid rgba(104,126,84,.22); border-radius:999px; background:rgba(255,253,242,.88); color:#5b7049; font-size:8px; font-weight:800; }

/* 0.27.2 admin console */
.admin-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:6px 0 8px; }
.admin-stats div { padding:7px 8px; border:1px solid rgba(104,126,84,.16); border-radius:10px; background:rgba(255,253,244,.8); text-align:center; }
.admin-stats span { display:block; color:#8b957f; font-size:7px; }
.admin-stats b { display:block; color:#4e6640; font-size:15px; }
.admin-toolbar { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.admin-toolbar .btn { padding:5px 8px; font-size:7.5px; }
.admin-split { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:8px; }
.admin-column { min-width:0; padding:7px; border:1px solid rgba(104,126,84,.15); border-radius:11px; background:rgba(255,253,244,.66); }
.admin-column-head { display:flex; justify-content:space-between; gap:6px; margin-bottom:5px; }
.admin-column-head b { color:#556a47; font-size:8px; }
.admin-column-head span { color:#9aa38d; font-size:6.5px; }
.admin-player-list, .admin-chat-list { max-height:190px; overflow:auto; display:flex; flex-direction:column; gap:3px; }
.admin-player-row { display:flex; flex-direction:column; gap:1px; padding:5px 6px; border:1px solid rgba(104,126,84,.12); border-radius:7px; background:rgba(255,255,247,.8); text-align:left; }
.admin-player-row.active { border-color:rgba(96,126,68,.5); background:#eaf4d8; }
.admin-player-row b { color:#5b6e4c; font-size:7.5px; }
.admin-player-row small { color:#929b86; font-size:6px; }
.admin-detail-box { margin-top:5px; padding:6px; border:1px dashed rgba(104,126,84,.25); border-radius:8px; }
.admin-detail-box > b { color:#4f6541; font-size:9px; }
.admin-detail-box > span { display:block; color:#8b957f; font-size:6.5px; }
.admin-kv { display:grid; grid-template-columns:auto 1fr auto 1fr; gap:2px 5px; margin-top:3px; color:#8b957f; font-size:6.5px; }
.admin-kv b { color:#5b6e4c; }
.admin-chat-row { display:flex; flex-wrap:wrap; gap:2px 5px; padding:4px 5px; border-radius:6px; background:rgba(255,255,247,.75); }
.admin-chat-row b { color:#5b6e4c; font-size:6.5px; }
.admin-chat-row small { color:#9aa38d; font-size:5.5px; }
.admin-chat-row span { width:100%; color:#67785a; font-size:6.5px; }
.admin-mini { margin-left:auto; padding:1px 4px; border:1px solid rgba(157,101,83,.25); border-radius:5px; background:rgba(255,245,236,.8); color:#a06a58; font-size:5.5px; }
.admin-two { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.admin-button-row { display:flex; flex-wrap:wrap; gap:5px; }
.admin-button-row .btn { padding:5px 8px; font-size:7px; }
.admin-time-box { padding:7px; border:1px solid rgba(171,140,79,.24); border-radius:10px; background:rgba(255,249,233,.7); }
.admin-hint { color:#9aa38d; font-size:6.5px; }
@media (max-width:760px) { .admin-split { grid-template-columns:1fr; } .admin-stats { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* compact 200-item collection rewards */
.collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.collection-reward { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:4px; row-gap:1px; padding:4px 5px; align-items:center; }
.collection-need { grid-column:1; color:#9b8a66; font-size:5.5px; }
.collection-reward b { grid-column:2; color:#756343; font-size:6px; line-height:1.25; }
.collection-reward .btn { grid-column:1 / -1; padding:2px 4px; font-size:6px; min-height:15px; }
.collection-board { padding:8px 9px; }
.collection-head h3 { font-size:13px; }
.collection-head b { font-size:11px; }
.collection-progress { margin:4px 0 6px; height:5px; }

.brand { cursor:pointer; }
.brand:hover .brand-mark { transform:translateY(-1px); }

/* town resident strip */
.town-residents { display:flex; justify-content:center; margin:7px 0 0; }
.town-resident { display:flex; align-items:center; gap:8px; width:100%; max-width:330px; padding:8px 10px; border:1px solid rgba(77,107,254,.25); border-radius:14px; background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(232,241,255,.88)); box-shadow:0 6px 18px rgba(48,72,201,.1); text-align:left; }
.town-resident img { width:44px; height:44px; border-radius:12px; object-fit:cover; border:2px solid #a9c7ff; }
.town-resident-copy { display:flex; flex-direction:column; gap:2px; flex:1; }
.town-resident-copy b { color:#2c3f86; font-size:10px; }
.town-resident-copy small { color:#7286ad; font-size:7px; }
.town-resident-status { padding:3px 7px; border-radius:999px; background:#e8f7e6; color:#5a8a52; font-size:6.5px; font-weight:800; white-space:nowrap; }
.town-resident-status.off { background:#f3f1e8; color:#9b927f; }
.dafeiyu-modal { display:grid; grid-template-columns:180px 1fr; gap:12px; align-items:start; }
.dafeiyu-art { position:sticky; top:0; border-radius:16px; overflow:hidden; background:linear-gradient(180deg,#e7f0ff,#c9dcff); border:1px solid #b8cdf5; }
.dafeiyu-art img { display:block; width:100%; height:auto; }
.dafeiyu-copy h2 { margin:2px 0 4px; color:#1b2a5e; }
.dafeiyu-copy p { margin:4px 0; color:#66789f; font-size:8px; line-height:1.6; }
.dafeiyu-tags { display:flex; flex-wrap:wrap; gap:4px; margin:6px 0; }
.dafeiyu-tags span { padding:3px 7px; border-radius:999px; background:#eef4ff; color:#4d6bfe; font-size:6.5px; font-weight:700; }
.dafeiyu-schedule { width:100%; border-collapse:collapse; margin-top:4px; font-size:7px; color:#66789f; }
.dafeiyu-schedule td { padding:3px 4px; border-bottom:1px dashed #dbe5f8; }
.dafeiyu-schedule td:first-child { color:#4d6bfe; font-weight:700; white-space:nowrap; }
@media (max-width:760px) { .dafeiyu-modal { grid-template-columns:120px 1fr; } }

.dafeiyu-chat { display:flex; flex-direction:column; gap:4px; max-height:110px; overflow:auto; margin:6px 0; padding:6px; border-radius:10px; background:#f3f7ff; }
.dafeiyu-msg { padding:5px 7px; border-radius:9px; background:#ffffff; color:#4d5f82; font-size:7px; line-height:1.5; }
.dafeiyu-msg.me { align-self:flex-end; background:#dce8ff; color:#3048c9; }
.dafeiyu-msg b { display:block; margin-bottom:1px; color:#4d6bfe; font-size:6px; }
.dafeiyu-msg.me b { color:#7286ad; text-align:right; }

/* =========================================================
   Desktop "摸鱼" mode
   ========================================================= */
@media (min-width: 1000px) and (pointer: fine) {
  body { background: radial-gradient(circle at 20% 10%, #e7eee1, #c9d6c2 60%, #b7c7b1); }
  #game-shell {
    position: relative;
    inset: auto;
    width: min(1240px, calc(100vw - 48px));
    height: min(820px, calc(100vh - 40px));
    margin: 20px auto;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(45, 64, 38, .22), 0 2px 0 rgba(255,255,255,.6) inset;
    overflow: hidden;
  }
  #game-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 24px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
    z-index: 60;
  }
  .dock { bottom: 14px; }
  .side-rail { left: 12px; top: 86px; }
  .hud { padding-top: 12px; }
  .scene-hint { bottom: 132px; }
}

.boss-screen {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: #f3f3f3;
  color: #222;
  font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  font-size: 13px;
}
.boss-screen[hidden] { display: none; }
.boss-titlebar { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: #217346; color: #fff; font-size: 12px; }
.boss-app { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; background: rgba(255,255,255,.18); font-size: 9px; font-weight: 800; }
.boss-saved { margin-left: auto; opacity: .75; font-size: 10px; }
.boss-window-dots { margin-left: 18px; letter-spacing: 10px; font-size: 12px; opacity: .85; }
.boss-ribbon { height: 30px; display: flex; align-items: center; gap: 18px; padding: 0 16px; background: #fff; border-bottom: 1px solid #d9d9d9; font-size: 11px; color: #333; }
.boss-ribbon span:first-child { color: #217346; font-weight: 700; }
.boss-toolbar { height: 34px; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: #fafafa; border-bottom: 1px solid #e1e1e1; color: #444; font-size: 11px; }
.boss-toolbar b, .boss-toolbar i, .boss-toolbar u { width: 18px; text-align: center; }
.boss-formula { height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #fff; border-bottom: 1px solid #d9d9d9; }
.boss-formula span { color: #777; font-style: italic; font-weight: 700; }
.boss-formula input { flex: 1; border: 0; outline: 0; background: transparent; color: #222; font-size: 11px; }
.boss-sheet { flex: 1; overflow: auto; background: #fff; padding: 8px 10px; }
.boss-sheet table { border-collapse: collapse; width: 100%; min-width: 760px; table-layout: fixed; }
.boss-sheet th, .boss-sheet td { border: 1px solid #e1e1e1; padding: 5px 8px; font-size: 11px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boss-sheet thead th { background: #f3f3f3; color: #777; font-weight: 500; text-align: center; }
.boss-sheet tbody th { width: 34px; background: #f7f7f7; color: #888; text-align: center; font-weight: 500; }
.boss-sheet tbody tr:nth-child(2) td { background: #e8f3ec; }
.boss-sheet tbody tr:nth-child(9) td { font-weight: 700; background: #f4f9f5; }
.boss-tabs { height: 28px; display: flex; align-items: center; gap: 2px; padding: 0 12px; background: #f5f5f5; border-top: 1px solid #d9d9d9; font-size: 10px; color: #555; }
.boss-tabs span { padding: 4px 10px; border: 1px solid transparent; border-bottom: 0; border-radius: 3px 3px 0 0; }
.boss-tabs span.active { background: #fff; border-color: #d9d9d9; color: #217346; font-weight: 700; }
.boss-status { height: 24px; display: flex; align-items: center; gap: 22px; padding: 0 14px; background: #217346; color: #fff; font-size: 10px; opacity: .92; }
.boss-return { position: fixed; right: 18px; bottom: 44px; z-index: 2; padding: 7px 12px; border: 1px solid rgba(33,115,70,.3); border-radius: 8px; background: rgba(255,255,255,.9); color: #217346; font-size: 11px; cursor: pointer; opacity: .18; transition: opacity .2s; }
.boss-return:hover { opacity: 1; }

@media (min-width: 1000px) and (pointer: fine) {
  .hud-level-chip { position: absolute; right: 18px; top: 66px; }
}

.farmer-card-badges { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:0 0 auto; }
.farmer-ai-badge { padding:3px 7px; border-radius:999px; background:rgba(77,107,254,.1); color:#4d6bfe; font-size:6.5px; font-weight:800; letter-spacing:.04em; }

.rank-avatar { border:0; cursor:pointer; font:inherit; }
.rank-avatar:hover { transform:translateY(-1px); box-shadow:0 0 0 2px rgba(77,107,254,.25); }
.rank-ai { display:inline-block; padding:1px 4px; border-radius:999px; background:rgba(77,107,254,.1); color:#4d6bfe; font-size:5.5px; font-style:normal; vertical-align:1px; }

.rank-scope-tabs { display:flex; gap:5px; margin:6px 0; }
.rank-scope { flex:1; padding:5px 8px; border:1px solid rgba(104,126,84,.2); border-radius:8px; background:rgba(255,255,247,.8); color:#7c8a70; font-size:7px; font-weight:800; }
.rank-scope.active { background:#e7f0d8; border-color:rgba(96,126,68,.4); color:#4f6541; }

.guestbook-list { display:flex; flex-direction:column; gap:5px; max-height:360px; overflow:auto; margin:6px 0; }
.guestbook-row { padding:7px 9px; border:1px solid rgba(104,126,84,.15); border-radius:9px; background:rgba(255,253,244,.8); }
.guestbook-row b { color:#556a47; font-size:8px; }
.guestbook-row small { margin-left:6px; color:#9aa38d; font-size:6px; }
.guestbook-row p { margin:3px 0 0; color:#66785a; font-size:7.5px; line-height:1.5; }
.collection-all-done { grid-column:1/-1; padding:12px; color:#8b957f; font-size:8px; text-align:center; }