/* ============ QQ经典农场 · 仿原版界面 ============ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --wood:#8a5a2b;--wood2:#a9713c;--wood3:#6b421b;--soil:#8d5a2b;--soil2:#7a4a20;
  --leaf:#7cc242;--leaf2:#4d9e2f;--gold:#ffd23f;--ink:#3d2b16;--card:#fffaf0;
  --sky1:#7ec8f0;--sky2:#c9ecff;--red:#e2574c;
}
html,body{margin:0;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);background:#2b5c1f;user-select:none;-webkit-font-smoothing:antialiased}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}
input{font-family:inherit}
.hide{display:none!important}
#app{position:relative;width:100%;height:100vh;height:100dvh;max-width:560px;margin:0 auto;overflow:hidden}

/* ---------- 登录 ---------- */
.login-wrap{position:absolute;inset:0;background:linear-gradient(180deg,#8fd3f4 0%,#cdeeff 55%,#7cc242 55%,#4d9e2f 100%);overflow:auto}
.login-card{position:relative;margin:8vh auto 0;width:min(92%,380px);background:rgba(255,250,240,.97);border-radius:22px;
  border:3px solid #fff;box-shadow:0 16px 40px rgba(0,40,0,.35);padding:22px 20px 18px;text-align:center}
.pengu{font-size:64px;line-height:1;animation:bob 2.6s ease-in-out infinite;filter:drop-shadow(0 6px 6px rgba(0,0,0,.15))}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(4deg)}}
.login-card h1{margin:6px 0 2px;font-size:26px;letter-spacing:1px;color:#2f7d1a;text-shadow:0 2px 0 #d8f0c4}
.login-card .sub{color:#8a7a63;font-size:12.5px;margin-bottom:14px}
.seg{display:flex;background:#efe7d6;border-radius:14px;padding:4px;margin-bottom:12px}
.seg button{flex:1;padding:9px;border-radius:11px;font-weight:700;color:#8a7a63;font-size:14px}
.seg button.on{background:#fff;color:#3f7d1a;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.field{text-align:left;margin-bottom:10px}
.field label{display:block;font-size:12px;color:#9a8b74;margin:0 0 4px 6px}
.field input{width:100%;padding:12px 14px;border:2px solid #eadfc9;border-radius:13px;background:#fffdf7;font-size:15px;outline:none}
.field input:focus{border-color:#8fd14f;background:#fff}
.btn-big{width:100%;padding:14px;border-radius:14px;font-size:17px;font-weight:800;color:#fff;margin-top:8px;
  background:linear-gradient(180deg,#a6e35f,#5aa82a);box-shadow:0 4px 0 #3f7d1a;letter-spacing:2px}
.btn-big:active{transform:translateY(3px);box-shadow:0 1px 0 #3f7d1a}
.login-msg{min-height:18px;color:#d9483b;font-size:13px;margin:8px 0 0}

/* ---------- 顶部 HUD ---------- */
.hud{position:absolute;left:0;right:0;top:0;height:64px;z-index:30;display:flex;align-items:center;gap:8px;padding:6px 10px;
  background:linear-gradient(180deg,rgba(28,84,20,.92),rgba(28,84,20,.55) 75%,rgba(28,84,20,0))}
.mycard{display:flex;align-items:center;gap:7px;background:rgba(255,248,224,.94);border-radius:30px;padding:3px 12px 3px 3px;
  box-shadow:0 3px 8px rgba(0,0,0,.25);border:2px solid #fff6d8}
.face{width:40px;height:40px;border-radius:50%;background:linear-gradient(180deg,#ffe9b8,#ffd27a);display:grid;place-items:center;
  font-size:23px;border:2px solid #fff}
.myinfo{line-height:1.15}
.myinfo b{font-size:13.5px;display:block;max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lvbar{width:82px;height:7px;background:#e7dcc4;border-radius:4px;overflow:hidden;margin-top:3px}
.lvbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffde59,#f5a623);transition:width .4s}
.lvtext{font-size:10.5px;color:#7a6a52}
.coins{margin-left:auto;display:flex;align-items:center;gap:4px;background:rgba(255,248,224,.95);border-radius:24px;
  padding:6px 12px 6px 8px;font-weight:800;color:#8a5a00;font-size:18px;box-shadow:0 3px 8px rgba(0,0,0,.25);border:2px solid #fff6d8;
  font-variant-numeric:tabular-nums}
.coins .c{font-size:17px}
.hudbtns{display:flex;gap:6px}
.hudbtn{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;font-size:17px;
  box-shadow:0 2px 6px rgba(0,0,0,.25)}

/* ---------- 场景 ---------- */
.scene{position:absolute;inset:0;overflow:hidden}
.sky{position:absolute;left:0;right:0;top:0;height:34%;background:linear-gradient(180deg,var(--sky1),var(--sky2))}
.sun{position:absolute;right:22px;top:78px;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle,#fff6a8,#ffd93b 60%,#ffbe0b);
  box-shadow:0 0 40px 12px rgba(255,220,80,.55);animation:pulse 4s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(1.07)}}
.cloud{position:absolute;font-size:38px;opacity:.95;animation:drift 60s linear infinite;filter:drop-shadow(0 4px 4px rgba(0,0,0,.08))}
.c1{top:76px;left:-80px;animation-duration:70s}
.c2{top:118px;left:-160px;font-size:28px;animation-duration:95s;animation-delay:-30s}
.c3{top:96px;left:-240px;font-size:22px;animation-duration:80s;animation-delay:-60s}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(900px)}}
.hills{position:absolute;left:-10%;right:-10%;top:calc(34% - 52px);height:120px;background:#7cc36a;border-radius:50% 50% 0 0/70% 80% 0 0;opacity:.85}
.hills.b{top:calc(34% - 16px);background:#5fae4c;left:-30%;right:-20%;height:120px}
.ground{position:absolute;left:0;right:0;top:34%;bottom:0;background:linear-gradient(180deg,#6cbf45,#4a9a2c 40%,#3f8a20)}
.tree{position:absolute;font-size:54px;filter:drop-shadow(0 6px 4px rgba(0,0,0,.2))}
.t1{left:4%;top:29%;font-size:48px}.t2{right:5%;top:30%;font-size:40px}.t3{right:27%;top:32%;font-size:28px}
.fence{position:absolute;left:0;right:0;top:calc(34% - 16px);height:22px;background:repeating-linear-gradient(90deg,#d9b382 0 6px,transparent 6px 26px);
  border-top:3px solid #e6c795;opacity:.9}

/* 谷仓 */
.barn{position:absolute;left:8px;bottom:96px;width:78px;height:70px;z-index:2}
.barn .roof{height:24px;background:linear-gradient(180deg,#e0644a,#b6422b);clip-path:polygon(50% 0,100% 100%,0 100%)}
.barn .body{height:46px;background:linear-gradient(180deg,#e8472f,#b8351f);border-radius:2px;display:grid;place-items:center;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.25)}
.barn .door{width:28px;height:30px;background:#fff3d6;border-radius:3px 3px 0 0;display:grid;place-items:center;font-size:18px}
.dog{position:absolute;left:88px;bottom:96px;font-size:26px;z-index:3;animation:bob 3s infinite}

/* 好友农场页头 */
.visitbar{position:absolute;left:0;right:0;top:64px;z-index:25;display:flex;justify-content:center}
.visitpill{background:rgba(255,248,224,.96);border:2px solid #fff6d8;border-radius:20px;padding:5px 14px;font-size:13px;font-weight:700;
  box-shadow:0 3px 10px rgba(0,0,0,.25);display:flex;gap:8px;align-items:center}
.visitpill .back{color:#4d9e2f}

/* 作物区（透视农田） */
.plotwrap{position:absolute;left:50%;top:calc(34% + 86px);transform:translateX(-50%);width:min(94%,430px);z-index:5}
.plot{position:relative;padding:14px 12px 16px;border-radius:14px;
  background:linear-gradient(180deg,#a86f3b,#7f4e22);border:4px solid #6b421b;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.18),0 14px 22px rgba(0,0,0,.35)}
.plot::before{content:"";position:absolute;inset:6px;border-radius:10px;border:2px dashed rgba(255,240,200,.18);pointer-events:none}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cell{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;
  background:radial-gradient(circle at 50% 35%,#9b6634,#6f4319);box-shadow:inset 0 5px 10px rgba(0,0,0,.45),inset 0 -2px 0 rgba(255,255,255,.08)}
.cell::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 3px,transparent 3px 11px);pointer-events:none}
.cell.empty{cursor:pointer}
.cell.empty::before{content:"＋";position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,236,190,.45);font-size:26px;z-index:1}
.cell.disabled{background:#4f3a22;opacity:.85;box-shadow:inset 0 4px 10px rgba(0,0,0,.5);cursor:pointer}
.cell.disabled::before{content:"🔒";position:absolute;inset:0;display:grid;place-items:center;font-size:20px;z-index:1;opacity:.75}
.cell .crop{position:absolute;inset:0;display:grid;place-items:center;font-size:32px;z-index:2;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.35));transition:transform .35s cubic-bezier(.3,1.6,.6,1)}
.cell .crop.grow{animation:pop .45s cubic-bezier(.3,1.6,.6,1)}
@keyframes pop{from{transform:scale(0) translateY(8px)}to{transform:scale(1) translateY(0)}}
.cell.ripe .crop{animation:ripe 1.5s ease-in-out infinite}
@keyframes ripe{0%,100%{transform:scale(1) rotate(-4deg)}50%{transform:scale(1.16) rotate(4deg)}}
.cell.ripe::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 50% 40%,rgba(255,240,150,.55),transparent 65%);animation:glow 1.4s infinite alternate}
@keyframes glow{to{opacity:.35}}
.cell .prog{position:absolute;left:6px;right:6px;bottom:6px;height:5px;border-radius:3px;background:rgba(0,0,0,.45);z-index:4;overflow:hidden}
.cell .prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#c7f37b,#5aa82a);border-radius:3px;transition:width .5s}
.cell .tm{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:9.5px;color:#fff;text-shadow:0 1px 2px #000;z-index:4}
.cell.ripe .tm{background:#e2574c;border-radius:5px;padding:1px 0;margin:0 10px;bottom:13px;font-weight:800}
.cell .bad{position:absolute;right:2px;top:2px;font-size:14px;z-index:5;animation:wig 1s infinite}
@keyframes wig{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
.cell .wet{position:absolute;left:3px;top:2px;font-size:11px;z-index:5}
.cell .fertico{position:absolute;right:3px;bottom:22px;font-size:10px;z-index:5}
.cell .tag{position:absolute;left:0;right:0;text-align:center;bottom:20px;font-size:9.5px;color:#ffeec2;text-shadow:0 1px 1px #000;z-index:5;opacity:.9}
.cell .acts{position:absolute;inset:auto 3px 3px;display:flex;gap:3px;justify-content:center;z-index:6}
.cell .acts button{font-size:10.5px;padding:3px 6px;border-radius:7px;background:rgba(255,255,255,.94);font-weight:800;
  box-shadow:0 1px 3px rgba(0,0,0,.3)}
.cell .acts .steal{background:#ffd75e}.cell .acts .help{background:#bfe9ff}.cell .acts .mess{background:#ffd3d3}

/* 底部快捷栏（QQ原版一排六个图标） */
.dock{position:absolute;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;gap:8px;align-items:flex-end;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(30,60,18,0),rgba(30,60,18,.45) 35%,rgba(22,48,12,.85))}
.dockbtn{display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;font-size:11px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.5);position:relative}
.dockbtn .ic{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;font-size:27px;
  background:linear-gradient(180deg,#fff6df,#f2dcae);box-shadow:0 4px 0 #a8814d,0 6px 12px rgba(0,0,0,.35);border:2px solid #fff}
.dockbtn:active .ic{transform:translateY(3px);box-shadow:0 1px 0 #a8814d}
.dockbtn .badge{position:absolute;right:0;top:-4px;min-width:19px;height:19px;border-radius:10px;background:#e2574c;color:#fff;
  font-size:11px;display:grid;place-items:center;padding:0 5px;box-shadow:0 2px 4px rgba(0,0,0,.3);border:2px solid #fff}
.dockbtn .name{font-size:11px;letter-spacing:.5px}

/* 飘字 & 飞金币 */
.gain{position:fixed;z-index:99;font-weight:900;font-size:17px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.55),0 0 8px #ffd23f;
  pointer-events:none;animation:up 1.3s ease-out forwards}
@keyframes up{0%{transform:translateY(0) scale(.8);opacity:0}20%{opacity:1;transform:translateY(-6px) scale(1.1)}100%{transform:translateY(-64px) scale(1);opacity:0}}
.fly{position:fixed;z-index:99;font-size:24px;pointer-events:none;transition:transform .8s cubic-bezier(.5,-.2,.8,.6),opacity .8s}
.toast{position:fixed;left:50%;top:22%;transform:translate(-50%,-8px);z-index:120;background:rgba(30,50,15,.92);color:#fff;
  padding:10px 18px;border-radius:22px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;max-width:82%;text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.35)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:rgba(190,58,48,.95)}

/* 弹窗（类QQ木牌） */
.mask{position:fixed;inset:0;z-index:100;background:rgba(20,30,10,.5);display:grid;place-items:center;padding:18px;animation:fade .18s}
@keyframes fade{from{opacity:0}}
.dialog{width:100%;max-width:360px;background:linear-gradient(180deg,#fffdf5,#ffefd0);border-radius:20px;border:3px solid #fff;
  box-shadow:0 18px 50px rgba(0,0,0,.45);overflow:hidden;animation:popup .24s cubic-bezier(.3,1.5,.6,1)}
@keyframes popup{from{transform:scale(.82);opacity:0}}
.dialog .head{padding:12px;text-align:center;background:linear-gradient(180deg,#ffe9a8,#ffd25f);font-weight:900;color:#6b4a00;font-size:16px;
  border-bottom:2px solid #f0c34f}
.dialog .body{padding:14px 16px 6px;max-height:56vh;overflow:auto}
.dialog .bigemoji{font-size:52px;text-align:center;line-height:1.1;margin-bottom:4px;animation:bob 2s infinite}
.dialog h3{margin:2px 0 8px;text-align:center;font-size:18px}
.dialog p{margin:0 0 10px;color:#8a7a63;font-size:13.5px;line-height:1.6;text-align:center}
.dialog .foot{display:flex;gap:10px;padding:10px 14px 16px}
.dialog .foot button{flex:1;padding:12px;border-radius:14px;font-weight:800;font-size:15px}
.btn-ok{background:linear-gradient(180deg,#a6e35f,#5aa82a);color:#fff;box-shadow:0 3px 0 #3f7d1a}
.btn-cancel{background:#efe4cd;color:#8a6a3a}
.btn-ok:active,.btn-cancel:active{transform:translateY(2px)}

/* 抽屉面板：商店 / 背包 / 好友 / 排行 / 我的 */
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:560px;height:78vh;z-index:95;
  background:linear-gradient(180deg,#fffdf6,#fdf3dd);border-radius:22px 22px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.35);
  display:flex;flex-direction:column;animation:slideup .26s cubic-bezier(.2,.9,.3,1)}
@keyframes slideup{from{transform:translate(-50%,100%)}}
.sheet .sh{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px;border-bottom:2px solid #f0e3c6}
.sheet .sh b{font-size:17px;color:#4d7a22}
.sheet .sh .x{width:30px;height:30px;border-radius:50%;background:#efe4cd;display:grid;place-items:center;color:#8a6a3a;font-weight:700}
.sheet .sb{flex:1;overflow:auto;padding:12px 14px 26px;-webkit-overflow-scrolling:touch}
.tabs{display:flex;gap:6px;margin-bottom:12px;overflow:auto;padding-bottom:2px}
.tabs .t{padding:7px 14px;border-radius:20px;background:#f0e6cf;font-size:13px;font-weight:800;color:#8a6a3a;white-space:nowrap}
.tabs .t.on{background:linear-gradient(180deg,#a6e35f,#5aa82a);color:#fff;box-shadow:0 2px 0 #3f7d1a}
.item{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:10px;margin-bottom:8px;
  box-shadow:0 2px 6px rgba(120,90,30,.10);border:2px solid #fff}
.item .ic{width:48px;height:48px;border-radius:14px;background:linear-gradient(180deg,#f3f9e8,#e3f2cf);display:grid;place-items:center;font-size:27px;flex:none}
.item .g{flex:1;min-width:0}
.item .t1{font-size:14px;font-weight:800;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.item .t2{font-size:11.5px;color:#9a8b74;margin-top:3px;line-height:1.45}
.chip{font-size:10.5px;padding:1px 7px;border-radius:9px;background:#f0e6cf;color:#8a6a3a;font-weight:800}
.chip.g{background:#e4f7d0;color:#3f7d1a}.chip.y{background:#fff1c2;color:#8a6a00}.chip.r{background:#ffe3df;color:#c0392b}
.mini{padding:7px 12px;border-radius:11px;font-size:12.5px;font-weight:800;background:#eef6e2;color:#4d7a22;white-space:nowrap}
.mini.primary{background:linear-gradient(180deg,#a6e35f,#5aa82a);color:#fff;box-shadow:0 2px 0 #3f7d1a}
.mini.gray{background:#eee6d8;color:#9a8b74}
.mini.warn{background:#fff0dc;color:#c06a12}
.sec{font-size:13px;font-weight:900;color:#8a6a3a;margin:14px 4px 8px;display:flex;justify-content:space-between;align-items:center}
.sec small{font-weight:500;color:#a89880;font-size:11.5px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.card{background:#fff;border-radius:14px;padding:10px 6px;text-align:center;box-shadow:0 2px 6px rgba(120,90,30,.1);border:2px solid #fff;position:relative}
.card .ce{font-size:30px}.card .cn{font-size:12.5px;font-weight:800;margin-top:2px}
.card .cp{font-size:11px;color:#9a8b74;margin-top:2px}
.card .masklv{position:absolute;inset:0;border-radius:12px;background:rgba(255,255,255,.72);display:grid;place-items:center;font-size:11.5px;font-weight:900;color:#a07a2a}
.card:active{transform:scale(.96)}
.empty{text-align:center;color:#a89880;font-size:13px;padding:30px 0}
.empty .e{font-size:44px;display:block;margin-bottom:8px;opacity:.8}