/* 两人小农场 — 暖可爱风 */
:root {
  --bg: #FDF6EC;
  --card: #FFFFFF;
  --ink: #5D4037;
  --ink-soft: #A1887F;
  --brown: #8B5E3C;
  --green: #7CB342;
  --green-soft: #DCEDC8;
  --pink: #F8BBD0;
  --shadow: 0 6px 20px rgba(139, 94, 60, .12);
  --radius: 20px;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
  overscroll-behavior: none;
}
#app { max-width: 480px; margin: 0 auto; min-height: 100dvh; }
.hidden { display: none !important; }

/* ---------- 入口 ---------- */
.screen { padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); }
.logo { text-align: center; margin: 28px 0 24px; }
.logo-emoji { font-size: 56px; display: block; animation: sway 3s ease-in-out infinite; }
@keyframes sway { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.logo h1 { font-size: 30px; letter-spacing: 4px; margin-top: 8px; color: var(--brown); }
.logo .sub { color: var(--ink-soft); margin-top: 6px; font-size: 14px; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 18px;
}
.lbl { display: block; font-size: 13px; color: var(--ink-soft); margin: 14px 0 8px; }
.lbl:first-child { margin-top: 0; }
.inp {
  width: 100%;
  border: 2px solid var(--green-soft);
  background: var(--bg);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 16px;
  color: var(--ink);
  outline: none;
}
.inp:focus { border-color: var(--green); }
.inp.code { text-align: center; letter-spacing: 8px; font-size: 22px; font-weight: 700; }

.char-pick { display: flex; gap: 14px; }
.char {
  flex: 1;
  background: var(--bg);
  border: 3px solid transparent;
  border-radius: 18px;
  padding: 14px 8px 10px;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.char img { width: 72px; height: 72px; object-fit: contain; display: block; margin: 0 auto 6px; }
.char span { font-size: 15px; color: var(--ink); }
.char.sel { border-color: var(--green); background: var(--green-soft); transform: scale(1.03); }

.btn {
  width: 100%;
  border: none;
  border-radius: 16px;
  padding: 14px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .1s;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--green); color: #fff; margin-top: 18px; box-shadow: 0 4px 0 #558B2F; }
.btn.primary:active { box-shadow: 0 2px 0 #558B2F; }

.divider { display: flex; align-items: center; margin: 18px 0; color: var(--ink-soft); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--green-soft); }
.divider span { padding: 0 12px; }

.join-row { display: flex; gap: 10px; }
.join-row .inp { flex: 1; }
.join-row .btn { width: auto; margin: 0; padding: 0 22px; }

.status { text-align: center; font-size: 13px; color: var(--green); min-height: 20px; margin-top: 12px; }
.status.err { color: #E57373; }

/* ---------- 农场页 ---------- */
.farm-top {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 12px 2px;
  font-size: 13px;
}
.pill { background: var(--card); border-radius: 999px; padding: 6px 12px; box-shadow: var(--shadow); font-weight: 700; color: var(--brown); white-space: nowrap; }
.pill.coins { color: #F9A825; }
.peer-status { color: var(--ink-soft); text-align: right; }

/* 农场场景 */
.farm-scene {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: linear-gradient(#B3E5FC 0%, #DCEDC8 46%, #AED581 46%, #9CCC65 100%);
  min-height: 66dvh;
  padding: 0 14px 14px;
}
.sky { position: absolute; top: 0; left: 0; right: 0; height: 46%; pointer-events: none; }
.sky::before { content: "☁️"; position: absolute; top: 10px; left: 10%; font-size: 26px; opacity: .85; animation: cloud 26s linear infinite; }
.sky::after { content: "☁️"; position: absolute; top: 26px; right: 14%; font-size: 20px; opacity: .7; animation: cloud 34s linear infinite reverse; }
.sun { position: absolute; top: 8px; right: 10px; font-size: 30px; animation: sun-spin 20s linear infinite; }
@keyframes sun-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes cloud { from { transform: translateX(-30px); } to { transform: translateX(60px); } }

/* 装饰层 */
.decor-row {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between;
  height: 78px; padding: 0 4px;
  margin-top: 44px;
}
.decor { filter: drop-shadow(0 3px 2px rgba(0,0,0,.15)); }
.decor.tree { height: 66px; width: auto; animation: tree-sway 4s ease-in-out infinite; }
.decor.tree.small { height: 46px; animation-delay: 1s; }
.decor.barn { height: 62px; width: auto; }
@keyframes tree-sway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

/* 地块区（带栅栏） */
.field-wrap { position: relative; padding: 6px 2px; margin-top: 10px; }
.fence { position: absolute; left: 0; right: 0; width: 100%; height: 26px; opacity: .9; pointer-events: none; }
.fence-top { top: -14px; }
.fence-bottom { bottom: -14px; }

.field {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0;
}
.plot {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  background: #8D6E63;
  border: 3px solid #6D4C41;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .12s;
}
.plot:active { transform: scale(.95); }
.plot.empty { background: #A1887F; border-color: #8D6E63; }
.soil-plus { color: rgba(255,255,255,.55); font-size: 26px; font-weight: 300; }
.crop { font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.crop.stage0 { font-size: 20px; opacity: .8; }
.crop.stage1 { font-size: 28px; }
.crop.stage2 { font-size: 38px; animation: ready-bounce 1s ease-in-out infinite; }
@keyframes ready-bounce { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
.plot.ready { border-color: #FFD54F; box-shadow: 0 0 0 3px rgba(255,213,79,.5), inset 0 3px 8px rgba(0,0,0,.2); }
.ready-badge {
  position: absolute; top: -10px; right: -6px;
  background: #FFD54F; color: #5D4037; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.drop { position: absolute; top: 4px; left: 6px; font-size: 12px; }
.bar {
  position: absolute; bottom: 6px; left: 8px; right: 8px; height: 5px;
  background: rgba(0,0,0,.25); border-radius: 999px; overflow: hidden;
}
.bar i { display: block; height: 100%; background: #FFD54F; border-radius: 999px; transition: width .5s; }

.chars-row {
  position: relative;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 10px 8px 0;
}
.me-char img, .peer-char img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.2)); }
.me-char img { animation: bounce 2.4s ease-in-out infinite; }
.peer-char { text-align: center; }
.peer-char img { animation: bounce 2.4s ease-in-out infinite .6s; }
.tag { display: block; font-size: 11px; color: var(--ink); background: rgba(255,255,255,.8); border-radius: 999px; padding: 1px 8px; margin-top: 2px; }
.waiting-tag { font-size: 12px; color: var(--ink-soft); background: rgba(255,255,255,.7); border-radius: 999px; padding: 4px 10px; }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* 每日任务 */
.daily-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px; margin-top: 12px;
}
.daily-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.daily-title { font-size: 15px; font-weight: 700; color: var(--brown); }
.daily-claim {
  background: var(--green); color: #fff; border: none; border-radius: 999px;
  padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 0 #558B2F; transition: transform .1s;
}
.daily-claim:active { transform: scale(.95); }
.daily-claim:disabled { background: var(--green-soft); color: var(--ink-soft); box-shadow: none; cursor: default; }
.daily-list { display: flex; flex-direction: column; gap: 6px; }
.daily-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); border-radius: 10px; padding: 8px 12px;
  font-size: 14px; color: var(--ink);
}
.daily-item.done { background: var(--green-soft); color: var(--ink-soft); }
.di-icon { font-size: 16px; }
.di-label { flex: 1; }
.di-check { color: var(--green); font-weight: 700; font-size: 16px; }

/* 回忆面板 */
.memory-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px; margin-top: 12px;
}
.mem-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.mem-tab {
  background: var(--bg); border: none; border-radius: 999px; padding: 7px 16px;
  font-size: 14px; font-weight: 700; color: var(--ink-soft); cursor: pointer;
}
.mem-tab.active { background: var(--green-soft); color: var(--brown); }
.mem-empty { text-align: center; color: var(--ink-soft); font-size: 13px; padding: 16px 0; }
.journal-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.journal-item { display: flex; gap: 10px; background: var(--bg); border-radius: 12px; padding: 10px 12px; }
.j-icon { font-size: 20px; }
.j-content { flex: 1; }
.j-text { font-size: 14px; color: var(--ink); line-height: 1.5; }
.j-date { font-size: 11px; color: var(--ink-soft); margin-top: 3px; }
.note-row { display: flex; gap: 8px; margin-top: 12px; }
.note-row .inp { flex: 1; padding: 10px 12px; font-size: 14px; }
.note-btn { width: auto; margin: 0; padding: 0 18px; font-size: 14px; }
.achieve-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.achieve-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--bg); border-radius: 14px; padding: 14px 8px; text-align: center;
}
.achieve-item.got { background: var(--green-soft); }
.achieve-item.lock { opacity: .55; }
.a-icon { font-size: 28px; }
.a-name { font-size: 14px; font-weight: 700; color: var(--brown); }
.a-desc { font-size: 11px; color: var(--ink-soft); }
.poster-btn { margin-top: 14px; font-size: 15px; }

/* 弹窗 */
.modal { position: fixed; inset: 0; background: rgba(93,64,55,.4); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.modal-card {
  width: 100%; max-width: 480px;
  background: var(--card); border-radius: 24px 24px 0 0;
  padding: 20px 18px calc(22px + env(safe-area-inset-bottom));
  animation: slide-up .22s ease;
}
@keyframes slide-up { from { transform: translateY(40px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
.modal-title { font-size: 18px; font-weight: 700; color: var(--brown); text-align: center; margin-bottom: 14px; }
.modal-tip { text-align: center; color: var(--ink-soft); font-size: 14px; margin-bottom: 12px; }
.watered-tip { text-align: center; color: var(--green); font-size: 14px; font-weight: 700; }
.seed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.seed {
  background: var(--bg); border: 2px solid var(--green-soft); border-radius: 14px;
  padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer; transition: transform .12s, border-color .12s;
}
.seed:active { transform: scale(.94); border-color: var(--green); }
.seed-icon { font-size: 26px; }
.seed-name { font-size: 13px; color: var(--ink); font-weight: 700; }
.seed-time { font-size: 11px; color: var(--ink-soft); }
.harvest-btn { margin-top: 6px; }
.btn.ghost { background: var(--bg); color: var(--ink-soft); margin-top: 14px; box-shadow: none; font-size: 14px; }
.dig-btn { background: #F5E6DC; color: #B06A4A; margin-top: 10px; box-shadow: none; font-size: 13px; }

/* toast */
.fx-coin {
  position: absolute; font-size: 22px; pointer-events: none; z-index: 20;
  animation: coin-fly 1s ease-out forwards;
}
@keyframes coin-fly {
  0% { transform: translate(0,0) scale(.6); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.2); opacity: 0; }
}
.toast {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(93,64,55,.92); color: #fff; font-size: 13px;
  padding: 9px 18px; border-radius: 999px; z-index: 60;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); max-width: 90%;
  animation: toast-in .25s ease;
}
@keyframes toast-in { from { transform: translate(-50%, -16px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* ===== P0：双人打卡 ===== */
.checkin-card {
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px; margin-top: 12px;
}
.checkin-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.checkin-title { font-size: 15px; font-weight: 700; color: var(--brown); }
.checkin-streak { font-size: 13px; font-weight: 700; color: #E65100; background: rgba(255,255,255,.6); padding: 3px 12px; border-radius: 999px; }
.checkin-body { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ci-row { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,.55); border-radius: 10px; padding: 8px 14px; font-size: 14px; }
.ci-row.done { background: rgba(165,214,167,.5); }
.ci-who { font-weight: 700; color: var(--brown); }
.ci-mark { color: var(--ink-soft); font-size: 13px; }
.ci-row.done .ci-mark { color: #33691E; font-weight: 700; }
.checkin-btn { width: 100%; font-size: 15px; }
.checkin-btn:disabled { opacity: .7; }

/* ===== P0：留言木牌 ===== */
.noteboard-card {
  background: linear-gradient(180deg, #EFEBE9, #D7CCC8);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px; margin-top: 12px;
  border: 3px solid #A1887F;
}
.nb-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.nb-title { font-size: 15px; font-weight: 700; color: var(--brown); }
.nb-sub { font-size: 11px; color: var(--ink-soft); }
.nb-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.nb-empty { text-align: center; color: var(--ink-soft); font-size: 13px; padding: 14px 0; }
.nb-note {
  background: #FFF8E1; border-radius: 12px; padding: 10px 12px;
  border: 2px solid #FFD54F;
  transform: rotate(-.5deg);
}
.nb-note.mine { transform: rotate(.5deg); border-color: #AED581; }
.nb-note-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.nb-avatar { width: 24px; height: 24px; object-fit: contain; }
.nb-author { font-size: 13px; font-weight: 700; color: var(--brown); }
.nb-date { font-size: 10px; color: var(--ink-soft); margin-left: auto; }
.nb-del { background: none; border: none; color: var(--ink-soft); font-size: 13px; cursor: pointer; padding: 2px 4px; }
.nb-text { font-size: 14px; color: var(--ink); line-height: 1.5; }
.nb-like { margin-top: 6px; font-size: 12px; color: var(--ink-soft); cursor: pointer; display: inline-block; }
.nb-like.liked { color: #E91E63; font-weight: 700; }
.nb-input-row { display: flex; gap: 8px; }
.nb-input-row .inp { flex: 1; padding: 10px 12px; font-size: 14px; background: #fff; }
.nb-btn { width: auto; margin: 0; padding: 0 18px; font-size: 14px; }

/* ===== P0：互动弹窗 ===== */
.interact-left { text-align: center; color: var(--ink-soft); font-size: 13px; margin-bottom: 14px; }
.interact-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.interact-btn {
  background: var(--bg); border: 2px solid var(--pink); border-radius: 16px;
  padding: 14px 4px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; transition: transform .12s, border-color .12s, background .12s;
  font-size: 14px; font-weight: 700; color: var(--brown);
}
.interact-btn:active { transform: scale(.94); border-color: #F06292; background: #FCE4EC; }
.ia-emoji { font-size: 30px; }

/* ===== P0：互动动画 ===== */
.peer-char { position: relative; }
.tap-hint {
  position: absolute; top: -8px; right: 2px;
  font-size: 10px; font-weight: 700; color: #fff; background: #F06292;
  padding: 2px 8px; border-radius: 999px; box-shadow: 0 2px 4px rgba(0,0,0,.2);
  animation: hint-pulse 1.4s ease-in-out infinite; pointer-events: none;
}
@keyframes hint-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.chars-row.interacting .me-char img { animation: lean-right .7s ease; }
.chars-row.interacting .peer-char img { animation: lean-left .7s ease; }
@keyframes lean-right { 0%,100% { transform: translateX(0) rotate(0); } 40% { transform: translateX(20px) rotate(10deg) scale(1.1); } }
@keyframes lean-left { 0%,100% { transform: translateX(0) rotate(0); } 40% { transform: translateX(-20px) rotate(-10deg) scale(1.1); } }
.interact-fx {
  position: absolute; left: 50%; top: 28%; transform: translateX(-50%);
  font-size: 42px; z-index: 15; pointer-events: none;
  animation: fx-pop 2s ease forwards;
}
@keyframes fx-pop {
  0% { transform: translateX(-50%) scale(0) rotate(-20deg); opacity: 0; }
  25% { transform: translateX(-50%) scale(1.3) rotate(10deg); opacity: 1; }
  70% { transform: translateX(-50%) scale(1) rotate(0); opacity: 1; }
  100% { transform: translateX(-50%) scale(1.4) translateY(-24px); opacity: 0; }
}
.interact-bubble {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: #fff; color: var(--brown); font-size: 13px; font-weight: 700;
  padding: 6px 12px; border-radius: 14px; white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0,0,0,.15); margin-bottom: 6px; z-index: 16;
  animation: bubble-in .3s ease;
}
.interact-bubble::after {
  content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #fff; border-bottom: none;
}
@keyframes bubble-in { from { transform: translateX(-50%) scale(.5); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
.heart-fx {
  position: absolute; bottom: 42%; font-size: 20px; pointer-events: none; z-index: 18;
  animation: heart-rise 1.1s ease-out forwards;
}
@keyframes heart-rise {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-90px) scale(1.2); opacity: 0; }
}

/* ===== 商店入口（顶栏） ===== */
.shop-entry {
  background: var(--card); border: none; border-radius: 999px;
  width: 38px; height: 38px; font-size: 20px; cursor: pointer;
  box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center;
  transition: transform .1s;
}
.shop-entry:active { transform: scale(.9); }

/* ===== 待确认购买横幅 ===== */
#pending-buy-banner {
  margin: 10px 0 0;
  background: linear-gradient(135deg, #FFE0B2, #FFCC80);
  border: 2px solid #FFB74D; border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--shadow);
  animation: banner-in .3s ease;
}
@keyframes banner-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.pb-text { font-size: 13px; color: #5D4037; line-height: 1.5; margin-bottom: 8px; }
.pb-text b { color: #E65100; }
.pb-actions { display: flex; gap: 8px; }
.pb-btn {
  flex: 1; border: none; border-radius: 999px; padding: 8px; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: transform .1s;
}
.pb-btn:active { transform: scale(.96); }
.pb-confirm { background: var(--green); color: #fff; box-shadow: 0 2px 0 #558B2F; }
.pb-cancel { background: rgba(255,255,255,.7); color: var(--ink-soft); }
.pb-wait { font-size: 12px; color: var(--ink-soft); text-align: center; }

/* ===== 种植弹窗：施肥选择 ===== */
.seed.dis { opacity: .5; }
.fert-row { margin-top: 12px; }
.fert-lbl { font-size: 13px; font-weight: 700; color: var(--brown); display: block; margin-bottom: 8px; }
.fert-opts { display: flex; gap: 8px; }
.fert-opt {
  flex: 1; background: var(--bg); border: 2px solid var(--green-soft); border-radius: 12px;
  padding: 8px 4px; font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer;
  transition: transform .1s, border-color .1s;
}
.fert-opt.sel { border-color: var(--green); background: var(--green-soft); color: var(--brown); }
.fert-opt.dis { opacity: .5; }

/* ===== 地块标记：肥料/高品质 ===== */
.fert-drop { position: absolute; top: 4px; right: 6px; font-size: 12px; }
.premium-badge {
  position: absolute; bottom: -8px; left: -6px;
  background: #FFD54F; color: #5D4037; font-size: 12px; font-weight: 700;
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}