:root {
  --green-deep: #2e7d32;
  --green: #4caf50;
  --green-light: #a5d6a7;
  --green-pale: #e8f5e9;
  --soil: #8d6e63;
  --soil-dark: #6d4c41;
  --soil-line: #5d4037;
  --yellow: #ffd54f;
  --yellow-deep: #f9a825;
  --wood: #a77b50;
  --wood-dark: #7d5a3c;
  --cream: #fff8e1;
  --cream-panel: #fffde7;
  --ink: #3e2723;
  --ink-soft: #5d4037;
  --text-dim: #8d6e63;
  --sky-top: #7ec8e3;
  --sky-bot: #d7f0e8;
  --grass: #66bb6a;
  --grass-dark: #43a047;
  --shadow-sm: 0 3px 8px rgba(62,39,35,0.12);
  --shadow-md: 0 8px 22px rgba(62,39,35,0.18);
  --shadow-lg: 0 16px 44px rgba(62,39,35,0.22);
  --radius: 16px;
  --radius-lg: 24px;
  --font-body: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
  --font-display: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--sky-bot); }

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.5), transparent 40rem),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bot) 100%);
}

button, a { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(249,168,37,0.6); outline-offset: 2px; border-radius: 8px; }

.skip-link {
  position: fixed; top: 0; left: -999px; z-index: 100;
  border-radius: 0 0 10px 0; padding: 10px 14px; color: #fff; background: var(--green-deep);
}
.skip-link:focus { left: 0; }

.game-root { position: relative; z-index: 1; min-height: 100vh; }

/* ================= 顶部导航 ================= */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 54px;
  padding: 8px max(14px, env(safe-area-inset-left)) 8px max(14px, env(safe-area-inset-right));
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 0h40v40H0z' fill='none'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #2a7d3a, #1f6b30);
  border-bottom: 3px solid rgba(255,255,255,0.25);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

.topbar-left, .topbar-right { display: flex; gap: 6px; align-items: center; }
.topbar-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 18px; font-weight: 800; letter-spacing: 0.06em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  white-space: nowrap;
}

.icon-btn {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 34px; border: 0; border-radius: 10px; padding: 5px 10px;
  color: #fff; background: rgba(255,255,255,0.16);
  font-size: 12px; font-weight: 700; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 120ms ease, background 120ms ease;
}
.icon-btn:hover { background: rgba(255,255,255,0.28); transform: translateY(-1px); }
.icon-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.icon-btn .ico { font-size: 15px; }

.stats-bar { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.stat-pill {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 28px; border-radius: 999px; padding: 3px 10px;
  color: #fff; background: rgba(0,0,0,0.28);
  font-size: 12px; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.stat-pill .pi { width: 14px; height: 14px; border-radius: 50%; }
.stat-pill.dew .pi {
  background: radial-gradient(circle at 30% 30%, #b3e5fc, #4fc3f7);
  box-shadow: 0 0 0 2px rgba(79,195,247,0.3);
}
.stat-pill.spirit .pi {
  background: radial-gradient(circle at 30% 30%, #e1bee7, #ab47bc);
  box-shadow: 0 0 0 2px rgba(171,71,188,0.3);
}
.stat-pill.coin .pi {
  background: radial-gradient(circle at 30% 30%, #fff59d, #f9a825);
  box-shadow: 0 0 0 2px rgba(249,168,37,0.3);
}
.stat-pill.pending .pi {
  background: radial-gradient(circle at 30% 30%, #ffcdd2, #e53935);
  box-shadow: 0 0 0 2px rgba(229,57,53,0.3);
}

.online-pill {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 28px; border-radius: 999px; padding: 3px 10px;
  color: #fff; background: rgba(76,175,80,0.5);
  font-size: 12px; font-weight: 800;
}
.online-pill .od {
  width: 8px; height: 8px; border-radius: 50%; background: #a5d6a7;
  box-shadow: 0 0 0 3px rgba(165,214,167,0.3);
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ================= 视图基础 ================= */
.view { min-height: calc(100vh - 54px); }
.view[hidden] { display: none !important; }
.card {
  border: 2px solid rgba(141,110,99,0.25);
  border-radius: var(--radius);
  padding: 16px;
  background: rgba(255,253,231,0.96);
  box-shadow: var(--shadow-sm);
}
.card-title { margin: 0 0 6px; color: var(--green-deep); font-size: 17px; font-weight: 800; }
.card-desc { margin: 0 0 12px; color: var(--text-dim); font-size: 12px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }

/* ================= LOGIN ================= */
.login-view { display: grid; place-items: center; padding: 24px 14px; }
.login-shell {
  position: relative; display: grid; grid-template-columns: minmax(0,1.4fr) minmax(300px,0.6fr);
  align-items: center; gap: clamp(24px,5vw,60px);
  width: min(1020px,100%);
}

.login-art {
  position: relative; height: 420px; border-radius: 28px; overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bot));
}
.art-sky { position: absolute; inset: 0; }
.art-sun {
  position: absolute; top: 30px; right: 40px; width: 70px; height: 70px; border-radius: 50%;
  background: radial-gradient(circle, #fff9c4, #ffd54f 60%, #f9a825);
  box-shadow: 0 0 44px 18px rgba(255,213,79,0.5);
  animation: sun-pulse 6s ease-in-out infinite;
}
@keyframes sun-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.art-cloud { position: absolute; width: 90px; height: 26px; border-radius: 999px; background: rgba(255,255,255,0.9); }
.art-cloud::before { position:absolute; top:-14px; left:18px; width:34px; height:34px; border-radius:50%; content:""; background:rgba(255,255,255,0.92); }
.ac1 { top: 40px; left: 8%; }
.ac2 { top: 90px; left: 45%; transform: scale(0.7); opacity: 0.8; }

.art-hill { position: absolute; top: 120px; left: 0; right: 0; height: 100px; }
.art-hill::before {
  position: absolute; left: -10%; bottom: -30px; width: 70%; height: 140px; border-radius: 50% 50% 0 0; content: "";
  background: linear-gradient(160deg, #81c784, #388e3c);
}
.art-hill::after {
  position: absolute; right: -12%; bottom: -40px; width: 75%; height: 150px; border-radius: 50% 50% 0 0; content: "";
  background: linear-gradient(160deg, #a5d6a7, #43a047);
}

.art-windmill { position: absolute; top: 96px; left: 18%; width: 56px; height: 90px; }
.wm-blades {
  position: absolute; top: -6px; left: 50%; width: 70px; height: 70px; margin-left: -35px;
  border-radius: 50%; background:
    linear-gradient(90deg, transparent 46%, #e0e0e0 46% 54%, transparent 54%),
    linear-gradient(0deg, transparent 46%, #e0e0e0 46% 54%, transparent 54%);
  animation: spin 8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.art-house { position: absolute; top: 110px; right: 16%; width: 90px; height: 70px; }
.house-roof {
  position: absolute; top: -34px; left: -6px; width: 102px; height: 0;
  border-left: 51px solid transparent; border-right: 51px solid transparent; border-bottom: 46px solid #b24a2a;
}
.house-body {
  position: absolute; bottom: 0; width: 90px; height: 60px;
  background: linear-gradient(180deg, #fff3e0, #ffe0b2);
  border: 2px solid #bcaaa4; border-radius: 4px;
}

.art-tree { position: absolute; bottom: 0; }
.art-tree::before {
  display:block; width: 12px; height: 30px; margin: 0 auto; content:""; background: #795548; border-radius: 3px;
}
.art-tree::after {
  display:block; width: 0; height: 0; margin: -34px auto 0; content:"";
  border-left: 22px solid transparent; border-right: 22px solid transparent; border-bottom: 38px solid #43a047;
}
.t1 { left: 8%; }
.t2 { right: 6%; transform: scale(0.8); }

.art-field { position: absolute; bottom: 0; left: 0; right: 0; height: 46%; }
.art-field::before {
  position: absolute; inset: 0; content: "";
  background: linear-gradient(180deg, #7cb342, #558b2f);
  border-top: 3px solid rgba(255,255,255,0.3);
}
.art-plot {
  position: absolute; bottom: 12%; border-radius: 14px;
  background: linear-gradient(180deg, #a1887f, #6d4c41);
  box-shadow: inset 0 3px 6px rgba(255,255,255,0.2), inset 0 -5px 8px rgba(0,0,0,0.2);
}
.art-plot::after {
  position:absolute; inset:0; content:""; border-radius:14px;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0 3px, transparent 3px 7px);
}
.p1 { left: 10%; width: 34%; height: 46%; }
.p2 { right: 10%; width: 38%; height: 52%; }
.p3 { left: 26%; bottom: -2%; width: 30%; height: 40%; }
.art-fence {
  position: absolute; bottom: 0; width: 8px; height: 30px; background: #8d6e63; border-radius: 2px;
}
.f1 { left: 52%; }
.f2 { right: 4%; }

.login-card {
  position: relative; text-align: center; padding: 34px 26px 28px;
  border-radius: 22px; border: 3px solid rgba(141,110,99,0.3);
  background: linear-gradient(180deg, var(--cream-panel), #fff8e1);
  box-shadow: var(--shadow-lg);
}
.login-card::before {
  position: absolute; top: -3px; left: -3px; right: -3px; height: 10px; content: "";
  border-radius: 22px 22px 0 0;
  background: repeating-linear-gradient(90deg, #2e7d32 0 30px, #4caf50 30px 60px, #ffd54f 60px 90px);
}
.login-logo {
  display: grid; width: 76px; height: 76px; margin: 0 auto 14px; place-items: center;
  border-radius: 24px 24px 24px 8px; font-size: 40px;
  background: radial-gradient(circle at 30% 30%, #c8e6c9, #4caf50);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,0.4), var(--shadow-md);
  transform: rotate(-4deg);
}
.login-title { margin: 0 0 8px; color: var(--green-deep); font-size: 26px; font-weight: 900; }
.login-desc { margin: 0 0 20px; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.login-hint { margin: 12px 0 0; color: var(--text-dim); font-size: 11px; }

/* ================= 按钮 ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; border: 0; border-radius: 12px; padding: 10px 16px;
  font-size: 14px; font-weight: 800; cursor: pointer;
  transition: transform 100ms ease, box-shadow 100ms ease, filter 100ms ease;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #66bb6a, #2e7d32);
  box-shadow: 0 5px 0 var(--green-deep), var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.05); box-shadow: 0 6px 0 var(--green-deep); }
.btn-ghost {
  min-height: 34px; border: 2px solid rgba(46,125,50,0.4); padding: 6px 13px;
  color: var(--green-deep); background: #fff; font-size: 12px;
}
.btn-block { width: 100%; }
.link-btn { text-decoration: none; }

/* ================= 农场主场景 ================= */
.farm-stage { margin-bottom: 16px; }
.farm3d {
  position: relative; height: 420px; border-radius: 24px; overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: linear-gradient(180deg, #7ec8e3, #d7f0e8);
  cursor: grab;
}
.farm3d:active { cursor: grabbing; }
@media (max-width: 780px) {
  .farm3d { height: 300px; }
}
.farm-world {
  position: relative; height: 380px; border-radius: 24px; overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bot));
}
.world-sky { position: absolute; inset: 0; }
.world-sun {
  position: absolute; top: 26px; right: 46px; width: 62px; height: 62px; border-radius: 50%;
  background: radial-gradient(circle, #fff9c4, #ffd54f 60%, #f9a825);
  box-shadow: 0 0 40px 16px rgba(255,213,79,0.5);
  animation: sun-pulse 7s ease-in-out infinite;
}
.world-cloud { position: absolute; width: 90px; height: 26px; border-radius: 999px; background: rgba(255,255,255,0.92); }
.world-cloud::before { position:absolute; top:-14px; left:18px; width:34px; height:34px; border-radius:50%; content:""; background:rgba(255,255,255,0.94); }
.wc1 { top: 40px; left: 10%; animation: drift 40s linear infinite; }
.wc2 { top: 96px; left: 34%; transform: scale(0.7); opacity: 0.8; animation: drift 55s linear infinite 8s; }
@keyframes drift { from { transform: translateX(0) } to { transform: translateX(120px) } }
.world-birds { position: absolute; top: 60px; left: 22%; }
.world-birds::before, .world-birds::after {
  position: absolute; width: 14px; height: 8px; content: "";
  border: 2px solid #37474f; border-bottom: 0; border-radius: 50% 50% 0 0;
}
.world-birds::after { left: 20px; top: -6px; }

.world-back { position: absolute; top: 0; left: 0; right: 0; height: 200px; }
.wb-hill { position: absolute; bottom: 0; border-radius: 50% 50% 0 0; }
.h1 { left: -10%; width: 70%; height: 60%; background: linear-gradient(160deg, #81c784, #388e3c); }
.h2 { right: -12%; width: 75%; height: 70%; background: linear-gradient(160deg, #a5d6a7, #43a047); }

.wb-windmill { position: absolute; top: 80px; left: 16%; width: 50px; height: 80px; }
.wb-blades {
  position: absolute; top: 0; left: 50%; width: 62px; height: 62px; margin-left: -31px;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 47%, #e0e0e0 47% 53%, transparent 53%),
    linear-gradient(0deg, transparent 47%, #e0e0e0 47% 53%, transparent 53%);
  animation: spin 10s linear infinite;
}

.wb-house { position: absolute; top: 96px; right: 14%; width: 84px; height: 66px; }
.h-roof {
  position: absolute; top: -30px; left: -5px; width: 94px; height: 0;
  border-left: 47px solid transparent; border-right: 47px solid transparent; border-bottom: 42px solid #a13a24;
}
.h-body { position: absolute; bottom: 0; width: 84px; height: 56px; background: linear-gradient(180deg,#fff3e0,#ffe0b2); border: 2px solid #bcaaa4; border-radius: 4px; }
.h-door { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 22px; height: 34px; background: #a13a24; border-radius: 12px 12px 0 0; }

.wb-tree { position: absolute; bottom: 0; }
.wb-tree::before { display:block; width: 12px; height: 30px; margin:0 auto; content:""; background:#795548; }
.wb-tree::after { display:block; width:0; height:0; margin:-34px auto 0; content:""; border-left:22px solid transparent; border-right:22px solid transparent; border-bottom:38px solid #43a047; }
.wt1 { left: 6%; }
.wt2 { right: 5%; transform: scale(0.8); }

.world-ground {
  position: absolute; bottom: 0; left: 0; right: 0; height: 58%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.12) 0 8px, transparent 9px),
    linear-gradient(180deg, #81c784, #43a047);
  border-top: 3px solid rgba(255,255,255,0.3);
}
.world-pond {
  position: absolute; right: 6%; bottom: 8%; width: 96px; height: 56px; border-radius: 50%;
  background: linear-gradient(180deg, #81d4fa, #29b6f6);
  box-shadow: inset 0 4px 8px rgba(255,255,255,0.4), inset 0 -4px 8px rgba(0,0,0,0.15);
}
.pond-lily { position: absolute; top: 10px; left: 14px; width: 20px; height: 20px; border-radius: 50%; background: #2e7d32; }
.world-fence { position: absolute; bottom: 0; width: 8px; height: 34px; background: #8d6e63; border-radius: 3px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.wf1 { left: 4%; }
.wf2 { left: 12%; }
.world-path {
  position: absolute; left: 50%; bottom: 0; width: 120px; height: 40px; transform: translateX(-50%);
  background: repeating-linear-gradient(90deg, #d7ccc8 0 8px, #bcaaa4 8px 16px);
  border-radius: 8px 8px 0 0;
}

.plot-grid {
  position: absolute; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px;
  left: 5%; right: 5%; bottom: 6%; height: 78%;
}
.scene-plot {
  position: relative; border-radius: 14px; cursor: pointer;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.16), transparent 55%),
    linear-gradient(180deg, #a1887f, #6d4c41);
  box-shadow: inset 0 3px 6px rgba(255,255,255,0.2), inset 0 -6px 10px rgba(0,0,0,0.22), 0 5px 10px rgba(0,0,0,0.15);
  border: 3px solid rgba(93,64,55,0.5);
  overflow: hidden;
  transition: transform 160ms ease;
}
.scene-plot::after {
  position: absolute; inset: 0; content: ""; border-radius: 12px;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.14) 0 3px, transparent 3px 7px);
}
.scene-plot:hover { transform: translateY(-3px); }
.scene-plot.locked { opacity: 0.6; cursor: not-allowed; }
.scene-plot.locked:hover { transform: none; }
.scene-plot.ready { border-color: var(--yellow); box-shadow: inset 0 3px 6px rgba(255,255,255,0.2), inset 0 -6px 10px rgba(0,0,0,0.22), 0 0 0 3px rgba(255,213,79,0.4); }

.crop-stage {
  position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
  font-size: 30px; line-height: 1; z-index: 2;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.25));
  animation: crop-sway 3s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes crop-sway {
  0%,100% { transform: translateX(-50%) rotate(-2deg); }
  50% { transform: translateX(-50%) rotate(2deg) translateY(-2px); }
}
.scene-plot.ripe { border-color: var(--yellow); box-shadow: inset 0 3px 6px rgba(255,255,255,0.2), inset 0 -6px 10px rgba(0,0,0,0.22), 0 0 0 4px rgba(255,213,79,0.5); }
.scene-plot.ripe .crop-stage { animation: crop-bounce 1.6s ease-in-out infinite; }
@keyframes crop-bounce {
  0%,100% { transform: translateX(-50%) translateY(0) rotate(-2deg); }
  50% { transform: translateX(-50%) translateY(-6px) rotate(2deg); }
}

.float-pop {
  position: absolute; left: 50%; bottom: 40%; z-index: 6; transform: translateX(-50%);
  color: #fff; font-size: 15px; font-weight: 900; text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  pointer-events: none; animation: float-up 1.4s ease-out forwards;
}
@keyframes float-up {
  0% { opacity:0; transform:translateX(-50%) translateY(10px) scale(0.7); }
  20% { opacity:1; transform:translateX(-50%) translateY(0) scale(1.1); }
  100% { opacity:0; transform:translateX(-50%) translateY(-46px) scale(1); }
}
.sparkle {
  position:absolute; width:6px; height:6px; border-radius:50%; background:var(--yellow);
  box-shadow:0 0 8px 2px rgba(255,213,79,0.8); pointer-events:none;
  animation: sparkle-fly 0.9s ease-out forwards;
}
@keyframes sparkle-fly {
  0% { opacity:1; transform:translate(0,0) scale(1); }
  100% { opacity:0; transform:translate(var(--dx),var(--dy)) scale(0.2); }
}
.dew-layer { position:absolute; inset:0; pointer-events:none; }
.dew-drop {
  position:absolute; top:-10px; width:8px; height:12px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(150,210,240,0.85));
  opacity:0; animation: dew-fall 0.9s ease-in forwards;
}
@keyframes dew-fall { 0%{opacity:0;transform:translateY(0)} 15%{opacity:1} 100%{opacity:0;transform:translateY(180px)} }
.butterfly { position:absolute; z-index:5; font-size:20px; opacity:0.85; filter:drop-shadow(0 2px 3px rgba(0,0,0,0.2)); }
.bf1 { top:30%; left:10%; animation: flutter 7s ease-in-out infinite; }
.bf2 { top:50%; left:70%; animation: flutter 9s ease-in-out infinite 2s; }
@keyframes flutter {
  0%{transform:translate(0,0) rotate(0)} 25%{transform:translate(30px,-20px) rotate(12deg)}
  50%{transform:translate(55px,5px) rotate(-8deg)} 75%{transform:translate(25px,18px) rotate(6deg)} 100%{transform:translate(0,0) rotate(0)}
}

/* ================= 主布局 ================= */
.farm-layout {
  display: grid; grid-template-columns: minmax(0,1.4fr) minmax(320px,0.6fr); gap: 16px; align-items: start;
}
.farm-col-left, .farm-col-right { display: flex; flex-direction: column; gap: 16px; }

.player-panel {
  display: flex; align-items: center; gap: 14px;
  border-radius: var(--radius-lg); padding: 14px 18px;
  background: linear-gradient(180deg, #fff8e1, #fff3cd);
  border: 3px solid rgba(249,168,37,0.4);
  box-shadow: var(--shadow-md);
}
.player-avatar {
  display: grid; width: 58px; height: 58px; place-items: center; font-size: 34px;
  border-radius: 18px 18px 18px 6px;
  background: radial-gradient(circle at 30% 30%, #c8e6c9, #66bb6a);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,0.4), var(--shadow-sm);
}
.player-info { flex: 1; min-width: 0; }
.player-name { font-size: 17px; font-weight: 900; color: var(--ink); }
.player-level { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.lv-badge {
  flex: 0 0 auto; min-width: 42px; text-align: center;
  border-radius: 999px; padding: 2px 8px; color: #fff; font-size: 11px; font-weight: 900;
  background: linear-gradient(180deg, #ffd54f, #f9a825);
  box-shadow: 0 2px 0 #e08a00;
}
.lv-bar { flex:1; height:10px; border-radius:999px; background:#e8d5a0; overflow:hidden; box-shadow:inset 0 2px 3px rgba(0,0,0,0.15); }
.lv-bar i { display:block; height:100%; border-radius:999px; background:linear-gradient(180deg,#a5d6a7,#4caf50); }
.player-deco { font-size: 26px; }

.plot-card { padding: 16px; }
.plot-subtitle { margin: 0 0 12px; color: var(--text-dim); font-size: 12px; }
.plots { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.plot {
  position: relative; display: flex; aspect-ratio: 1/1; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  border-radius: 16px; padding: 14px 8px 8px;
  color: var(--ink); text-align: center;
  background: linear-gradient(180deg, #faefe0, #f5e6d3);
  border: 2px solid rgba(141,110,99,0.35);
  box-shadow: var(--shadow-sm);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.plot:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.plot .plot-slot { position: absolute; top: 6px; left: 8px; color: var(--text-dim); font-size: 10px; font-weight: 800; }
.plot .plot-emoji { font-size: 34px; line-height: 1; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.15)); }
.plot .plot-status { font-size: 12px; font-weight: 800; }
.plot .plot-meta, .plot .countdown { color: var(--text-dim); font-size: 10px; }
.plot[data-state="EMPTY"] { border-style: dashed; background: repeating-linear-gradient(-12deg, rgba(141,110,99,0.08) 0 7px, transparent 7px 18px), linear-gradient(180deg,#faf0df,#f0e2cc); cursor: pointer; }
.plot[data-state="EMPTY"][data-ready="true"] { border-color: var(--green); }
.plot[data-state="GROWING"] { background: linear-gradient(180deg, #e8f5e9, #c8e6c9); border-color: var(--green-light); }
.plot[data-state="RIPE"] {
  background: radial-gradient(circle at 50% 30%, rgba(255,213,79,0.4), transparent 55%), linear-gradient(180deg,#fff8e1,#ffe0b2);
  border-color: var(--yellow-deep);
}
.plot[data-state="RIPE"] .plot-emoji { animation: ripe-bounce 1.6s ease-in-out infinite; }
@keyframes ripe-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.plot[data-state="LOCKED"] { background: linear-gradient(180deg,#efebe9,#d7ccc8); color:#8d6e63; border-color:#bcaaa4; cursor:not-allowed; }
.plot-actions { display: flex; gap: 5px; margin-top: 2px; }
.btn-mini {
  min-height: 26px; border: 0; border-radius: 8px; padding: 3px 9px;
  color: var(--green-deep); background: #fff; font-size: 11px; font-weight: 800; cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,0.12);
}
.btn-mini.primary { color:#fff; background: linear-gradient(180deg,#66bb6a,#2e7d32); box-shadow:0 2px 0 var(--green-deep); }
.btn-mini:disabled { opacity:0.5; cursor:not-allowed; }

.shop-card { position: relative; }
.shop-card::before {
  position:absolute; top:-2px; left:-2px; right:-2px; height:8px; content:""; border-radius:16px 16px 0 0;
  background: repeating-linear-gradient(90deg,#66bb6a 0 26px,#a5d6a7 26px 52px,#ffd54f 52px 78px);
}
.shop-tag {
  border-radius: 999px; padding: 3px 10px; color: #fff; font-size: 11px; font-weight: 900;
  background: linear-gradient(180deg,#ff7043,#e64a19); box-shadow: 0 2px 0 #bf360c;
}
.crops { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.crop {
  position: relative; display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: 11px;
  width: 100%; border: 2px solid rgba(141,110,99,0.25); border-radius: 14px; padding: 10px 12px;
  color: var(--ink); text-align: left; background: #fff; cursor: pointer;
  transition: transform 130ms ease, border-color 130ms ease, box-shadow 130ms ease;
}
.crop:hover { transform: translateY(-2px); border-color: var(--green); box-shadow: var(--shadow-sm); }
.crop[data-selected="true"] { border-color: var(--green); background: var(--green-pale); box-shadow: 0 0 0 2px rgba(76,175,80,0.25); }
.crop[data-selected="true"]::after {
  position:absolute; top:6px; right:6px; display:grid; width:20px; height:20px; place-items:center;
  border-radius:50%; color:#fff; content:"✓"; background: var(--green); font-size:11px; font-weight:900;
}
.crop .crop-emoji {
  display:grid; width:52px; height:52px; place-items:center; font-size:30px;
  border-radius: 14px 14px 14px 5px;
  background: radial-gradient(circle at 30% 30%, #e8f5e9, #c8e6c9);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.5);
}
.crop-copy { min-width:0; }
.crop .crop-name { display:block; margin-bottom:2px; font-size:13px; font-weight:900; }
.crop .crop-desc { display:block; overflow:hidden; color:var(--text-dim); font-size:10px; white-space:nowrap; text-overflow:ellipsis; }
.crop .crop-meta { display:block; margin-top:3px; color:var(--green-deep); font-size:10px; font-weight:700; }
.crop .crop-reward { min-width:54px; color:#e53935; font-size:12px; font-weight:900; text-align:right; }

.live-card { position: relative; }
.live-card::before {
  position:absolute; top:-2px; left:-2px; right:-2px; height:8px; content:""; border-radius:16px 16px 0 0;
  background: repeating-linear-gradient(90deg,#e53935 0 26px,#ff7043 26px 52px,#ffd54f 52px 78px);
}
.live-badge {
  display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:3px 9px;
  color:#e53935; background:#ffebee; font-size:11px; font-weight:900;
}
.live-badge i { width:6px; height:6px; border-radius:50%; background:#e53935; animation:blink 1.4s infinite; }
.live-feed { max-height:280px; overflow:auto; display:flex; flex-direction:column; gap:8px; }
.live-feed .empty { color:var(--text-dim); font-size:12px; padding:8px 0; margin:0; }
.live-item { display:flex; align-items:flex-start; gap:8px; border-top:1px solid rgba(141,110,99,0.15); padding-top:8px; font-size:12px; animation:live-in 0.4s ease-out; }
@keyframes live-in { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.live-item:first-child { border-top:0; padding-top:0; }
.live-ico { flex:0 0 auto; font-size:15px; }
.live-txt { flex:1; min-width:0; color:var(--ink-soft); line-height:1.4; }
.live-txt b { color:var(--green-deep); }
.live-time { flex:0 0 auto; color:var(--text-dim); font-size:10px; }

.status-banner { margin-bottom:12px; border:2px solid #f9a825; border-radius:12px; padding:10px 14px; color:#7a4a00; background:#fff3cd; font-size:13px; }
.status-banner.error { border-color:#e53935; color:#85211c; background:#ffebee; }
.status-banner.ok { border-color:var(--green); color:var(--green-deep); background:var(--green-pale); }

/* ================= 弹层 ================= */
.modal {
  width:min(520px, calc(100vw - 28px)); max-width:520px; max-height:min(700px, calc(100vh - 40px));
  overflow:hidden; border:none; border-radius:20px; padding:0; color:var(--ink); background:var(--cream-panel);
  box-shadow:var(--shadow-lg);
}
.modal::backdrop { background:rgba(62,39,35,0.55); backdrop-filter:blur(3px); }
.modal-box { padding:22px; }
.modal-box .btn { margin-top:14px; }
.rules-body p { margin:8px 0; color:var(--ink-soft); font-size:13px; }
.ledger-body { max-height:50vh; overflow:auto; font-size:13px; }
.ledger-row { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid rgba(141,110,99,0.15); padding:10px 0; }
.ledger-row:last-child { border-bottom:0; }
.ledger-row .t { min-width:0; color:var(--text-dim); }
.ledger-row .a { flex:0 0 auto; font-weight:900; }
.ledger-row .a.plus { color:#e53935; }
.ledger-body .empty { padding:16px 0; color:var(--text-dim); text-align:center; }

.toast {
  position:fixed; bottom:max(24px, env(safe-area-inset-bottom)); left:50%; z-index:60;
  max-width:calc(100vw - 32px); border-radius:999px; padding:11px 18px; color:#fff; text-align:center;
  background:linear-gradient(180deg,#5d4037,#3e2723); box-shadow:var(--shadow-md); font-size:13px;
  transform:translateX(-50%);
}
.toast.error { background:linear-gradient(180deg,#e57373,#c62828); }
.toast.ok { background:linear-gradient(180deg,#66bb6a,#2e7d32); }
.error-view { display:grid; min-height:calc(100vh - 54px); place-items:center; padding:24px; }

/* ================= 响应式 ================= */
@media (max-width: 980px) {
  .topbar-title { display:none; }
  .farm-layout { grid-template-columns: 1fr; }
  .shop-card { order: 2; }
  .live-card { order: 3; }
  .plots { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .login-shell { grid-template-columns: 1fr; }
  .login-art { height: 320px; }
}
@media (max-width: 780px) {
  .stats-bar { gap: 4px; }
  .stat-pill { padding: 3px 7px; font-size: 11px; }
  .icon-btn .lbl { display:none; }
  .farm-world { height: 280px; }
  .plot-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .crop-stage { font-size: 22px; }
  .plots { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .login-art { display:none; }
  .login-shell { padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}