*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
button{font-family:inherit}
:root{--cream:#fff9ec;--paper:rgba(255,252,242,.94);--ink:#5b3a1f;--ink2:#8a6a3f;--muted:#9a8465;--line:#e3d3ae;--gold:#f0a500}
body{font-family:'ZCOOL KuaiLe','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;overflow:hidden;user-select:none;background:#87ceeb}
.hidden{display:none!important}

/* ============ 天空背景 ============ */
#sky{position:fixed;inset:0;z-index:0}
#stars{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 2.5s}
.star{position:absolute;background:#fff;border-radius:50%;animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.95}50%{opacity:.2}}
#sun,#moon{position:fixed;z-index:2;font-size:46px;pointer-events:none;opacity:0;transition:opacity 1.5s;will-change:left,top}
#sun{filter:drop-shadow(0 0 22px rgba(255,215,90,.9))}
#moon{filter:drop-shadow(0 0 16px rgba(210,225,255,.9))}
#clouds{position:fixed;inset:0;z-index:3;pointer-events:none}
.cloud{position:absolute;opacity:.55;transition:opacity 2s;animation:drift linear infinite;filter:drop-shadow(0 6px 8px rgba(0,0,0,.08))}
@keyframes drift{from{transform:translateX(-180px)}to{transform:translateX(calc(100vw + 180px))}}
body[data-weather="cloudy"] .cloud,body[data-weather="rain"] .cloud,body[data-weather="storm"] .cloud,body[data-weather="snow"] .cloud{opacity:.95}
#weather-fx{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.raindrop{position:absolute;top:-40px;width:2px;height:18px;border-radius:2px;background:linear-gradient(rgba(150,200,255,0),rgba(150,200,255,.75));animation:fall .8s linear infinite}
@keyframes fall{to{transform:translateY(115vh)}}
.snowflake{position:absolute;top:-30px;color:#fff;animation:snowfall linear infinite;text-shadow:0 0 6px rgba(255,255,255,.8)}
@keyframes snowfall{to{transform:translateY(115vh) translateX(40px)}}
#lightning{position:fixed;inset:0;background:#fff;opacity:0;z-index:5;pointer-events:none}
#lightning.flash{animation:flash .7s ease-out}
@keyframes flash{0%{opacity:0}8%{opacity:.7}16%{opacity:.05}26%{opacity:.45}40%,100%{opacity:0}}

/* ============ 游戏框架 ============ */
#game{position:relative;z-index:10;height:100vh;display:flex;flex-direction:column;overflow:hidden}
header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;padding:8px 14px;background:linear-gradient(180deg,rgba(255,253,246,.97),rgba(252,243,220,.93));backdrop-filter:blur(10px);border-bottom:3px solid rgba(140,100,40,.35);box-shadow:0 4px 20px rgba(60,40,10,.18);position:relative}
.game-title{font-size:21px;font-weight:700;background:linear-gradient(90deg,#7a4a1f,#c67c1e 60%,#e8a520);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;letter-spacing:1px}
.star-badge{-webkit-text-fill-color:#f0a500;font-size:14px;margin-left:4px}
.hud-stats{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.stat{display:flex;align-items:center;gap:5px;background:linear-gradient(180deg,#fff,#fff8ea);border:2px solid var(--line);border-radius:12px;padding:3px 10px;font-size:13px;color:var(--ink);box-shadow:0 2px 0 rgba(120,80,40,.15)}
.stat i{font-style:normal;font-size:15px}
.stat b{color:#c67c1e;font-size:14px;font-weight:700}
.coin-num{color:var(--gold)!important;text-shadow:0 1px 0 rgba(255,255,255,.65),0 0 6px rgba(240,165,0,.35)}
.lp-chip{font-style:normal;font-size:11px;background:linear-gradient(90deg,#f0e8ff,#e8d8ff);color:#6a4bb8;border-radius:8px;padding:1px 6px;margin-left:4px;font-weight:700}
.icon-btn{width:30px;height:30px;border:none;border-radius:50%;background:linear-gradient(180deg,#8a6fd8,#6a4bb8);color:#fff;font-size:14px;cursor:pointer;box-shadow:0 2px 0 #4e3488;flex-shrink:0}
.icon-btn:active{transform:translateY(2px);box-shadow:none}
.bar{height:9px;background:#eee0c8;border-radius:6px;overflow:hidden;border:1px solid #d8c5a5}
.bar i{display:block;height:100%;border-radius:6px;transition:width .4s,background .4s}
.stam-bar{width:58px}
#stam-fill{background:linear-gradient(90deg,#7ec850,#4fa832)}
#stam-fill.mid{background:linear-gradient(90deg,#f5c542,#e8a520)}
#stam-fill.low{background:linear-gradient(90deg,#f07050,#d84020)}
.stat.lvl{gap:4px}
.lvl-bar{width:42px;height:6px}
#lvl-fill{background:linear-gradient(90deg,#8ed460,#3fa028)}
.lvl-next{font-size:10px;color:var(--muted)}
#market-banner{position:absolute;top:4px;left:50%;transform:translateX(-50%) translateY(-90px);z-index:20;background:linear-gradient(90deg,#ff9a3c,#ffcf4a);color:#7a4500;padding:5px 16px;border-radius:999px;font-size:13px;border:2px solid #fff;box-shadow:0 6px 16px rgba(230,140,20,.45);transition:transform .5s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;pointer-events:none}
#market-banner.show{transform:translateX(-50%) translateY(0)}
#festival-banner{position:absolute;top:42px;left:50%;transform:translateX(-50%) translateY(-90px);z-index:20;background:linear-gradient(90deg,#a86fd8,#e86fc8);color:#fff;padding:5px 16px;border-radius:999px;font-size:13px;border:2px solid #fff;box-shadow:0 6px 16px rgba(190,110,220,.5);transition:transform .5s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;pointer-events:none}
#festival-banner.show{transform:translateX(-50%) translateY(0)}

/* ============ 主界面 ============ */
main{flex:1;display:flex;flex-direction:column;gap:8px;padding:8px 12px 6px;overflow:hidden;min-height:0}
.panel{background:linear-gradient(180deg,rgba(255,253,244,.95),rgba(249,238,214,.9));border:2px solid #d9c39a;border-radius:18px;box-shadow:0 8px 22px rgba(60,40,10,.18),inset 0 2px 0 rgba(255,255,255,.6);padding:8px 12px;display:flex;flex-direction:column;min-height:0;flex:1}
.scene-view{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:thin;scrollbar-color:#d8c5a5 transparent}
.scene-view::-webkit-scrollbar{width:6px}
.scene-view::-webkit-scrollbar-thumb{background:#d8c5a5;border-radius:3px}
.panel-title{font-size:15px;color:var(--ink);display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-shrink:0;flex-wrap:wrap}
.panel-title .hint{font-size:11px;color:var(--muted);font-weight:400}
.panel-title .mk-coins{margin-left:auto;font-size:13px;color:var(--ink2)}
.panel-title .mk-coins b{font-size:15px}
.hot-note{font-size:12px;color:#b8860b;background:linear-gradient(90deg,#fffbe0,#fff3b8);border:1px dashed #e8c86a;border-radius:8px;padding:1px 8px}
.deco-bar{margin-left:auto;font-size:15px;letter-spacing:2px;display:flex;align-items:center;gap:2px}
.deco-bar .charm{font-size:11px;color:#6a4bb8;background:#f0e8ff;border-radius:8px;padding:0 6px;letter-spacing:0}

/* ============ 田地 ============ */
#farm-toolbar,#pens-toolbar{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:6px;flex-shrink:0}
#plots{display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(2px,.5vw,5px);align-content:start;min-height:0;width:100%}
.plot{position:relative;aspect-ratio:1;border:none;border-radius:clamp(5px,1vw,9px);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:clamp(9px,1.4vw,21px);padding:0;transition:transform .15s,box-shadow .15s;background:#ccc;min-height:0;min-width:0}
.plot:hover{transform:translateY(-2px) scale(1.06);z-index:2}
.plot:active{transform:scale(.94)}
.p-grass{background:linear-gradient(180deg,#82d455,#58a437);box-shadow:inset 0 -4px 0 rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.3)}
.p-grass .tuft{opacity:.85;font-size:.8em;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.p-soil{background:linear-gradient(180deg,#a3713f,#7d5128);box-shadow:inset 0 -4px 0 rgba(0,0,0,.28)}
.p-soil::after{content:'';position:absolute;left:12%;right:12%;top:14%;bottom:14%;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(0,0,0,.14) 5px 7px);border-radius:5px}
.plot.wet::before{content:'';position:absolute;inset:0;background:rgba(50,90,150,.24);border-radius:inherit;z-index:1}
.p-locked{background:rgba(50,60,50,.28);box-shadow:inset 0 0 0 2px rgba(255,255,255,.14);cursor:not-allowed}
.p-locked:hover{transform:none}
.p-locked .lock{font-size:.7em;opacity:.85;filter:grayscale(1)}
.crop-icon{position:relative;z-index:2;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));animation:sway 2.6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.crop-icon.sprout{font-size:.6em}
.crop-icon.grow{font-size:.95em}
.crop-ripe{font-size:1.15em;animation:ripe 1s ease-in-out infinite}
@keyframes ripe{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.plot.ripe{box-shadow:0 0 0 3px #ffd54a,0 0 14px rgba(255,200,60,.75)}
.wither{filter:grayscale(.7);opacity:.85}
.drop{position:absolute;top:1px;right:2px;font-size:9px;z-index:3;animation:dropIn .4s}
.drop.fert{left:2px;right:auto;font-size:8px}
@keyframes dropIn{from{transform:scale(0)}}
.pbar{position:absolute;left:8%;right:8%;bottom:5%;height:4px;background:rgba(0,0,0,.35);border-radius:3px;overflow:hidden;z-index:3}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,#9be15d,#00c96b);border-radius:3px;transition:width .4s}

/* ============ 牧场 ============ */
#pens{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(3px,.5vw,6px);align-content:start;min-height:0;width:100%}
.pen{background:linear-gradient(180deg,rgba(255,250,235,.7),rgba(250,240,215,.55));border:2px solid #c49a62;border-radius:clamp(8px,1.2vw,14px);padding:clamp(3px,.5vw,5px) clamp(4px,.6vw,8px);min-width:0;cursor:pointer;transition:transform .12s,box-shadow .12s;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.pen:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(100,70,20,.2)}
.pen.pen-locked{background:rgba(210,205,190,.35);border-style:dotted;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px;cursor:default}
.pen-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--ink);margin-bottom:3px;gap:4px}
.pen-head span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pen-cap{color:var(--muted);font-size:11px;white-space:nowrap}
.pen-animals{display:flex;flex-wrap:wrap;gap:6px;min-height:36px;align-items:center}
.pen-empty{color:var(--muted);font-size:11px}
.animal{position:relative;width:40px;height:40px;border:none;background:linear-gradient(180deg,#cde8ff,#95c8f5);border-radius:50% 50% 45% 45%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 rgba(60,90,140,.4);transition:transform .15s}
.animal:hover{transform:translateY(-3px) scale(1.08)}
.animal:active{transform:scale(.94)}
.animal.golden{background:linear-gradient(180deg,#ffe9a0,#f5c542);box-shadow:0 2px 0 #b8860b,0 0 10px rgba(255,200,60,.6)}
.a-body{font-size:21px;display:block;animation:bob2 2.6s ease-in-out infinite}
.animal:nth-child(odd) .a-body{animation-delay:.7s}
.animal:nth-child(3n) .a-body{animation-delay:1.3s}
@keyframes bob2{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.animal .bubble{position:absolute;top:-10px;right:-6px;background:#fff;border:2px solid #e8a520;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:11px;animation:ripe 1s infinite;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.animal .mood{position:absolute;bottom:-3px;right:-3px;font-size:11px}
.animal .gtag{position:absolute;top:-9px;left:-6px;font-size:10px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.pen-feed{font-size:11px;color:var(--ink2);margin-top:3px;display:flex;align-items:center;gap:3px;flex-wrap:wrap;line-height:1.5}
.feed-chip{display:inline-flex;align-items:center;gap:2px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:0 5px;font-size:11px;color:var(--ink)}
.feed-chip .growable{font-style:normal;font-size:10px}

/* ============ 底部导航 ============ */
footer{display:flex;flex-direction:column;gap:5px;padding:6px 10px calc(6px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(255,253,244,.94),rgba(248,236,210,.9));border-top:3px solid rgba(140,100,40,.3);flex-shrink:0}
.scene-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
.scene-btn{font-size:15px;padding:7px 20px;border:none;border-radius:13px;cursor:pointer;color:#fff;background:linear-gradient(180deg,#8a8f98,#6a7078);box-shadow:0 3px 0 #4a4f55,0 4px 10px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .1s,box-shadow .1s;position:relative}
.scene-btn:hover{transform:translateY(-1px)}
.scene-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #4a4f55}
.scene-btn.active{background:linear-gradient(180deg,#f5c542,#e8923c);color:#5b3a1f;box-shadow:0 3px 0 #b8860b,0 4px 12px rgba(230,140,20,.4)}
.util-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
.tool-btn{font-size:13px;padding:6px 12px;border:none;border-radius:13px;cursor:pointer;color:#fff;background:linear-gradient(180deg,#61b346,#3f8f2b);box-shadow:0 3px 0 #2e6b1e,0 5px 12px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .1s,box-shadow .1s;position:relative;font-weight:700}
.tool-btn:hover{transform:translateY(-1px)}
.tool-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #2e6b1e}
.tool-btn.blue{background:linear-gradient(180deg,#4aa3e0,#2d7fc0);box-shadow:0 3px 0 #1f5f95,0 5px 12px rgba(0,0,0,.2)}
.tool-btn.blue:active{box-shadow:0 1px 0 #1f5f95}
.tool-btn.purple{background:linear-gradient(180deg,#8a6fd8,#6a4bb8);box-shadow:0 3px 0 #4e3488,0 5px 12px rgba(0,0,0,.2)}
.tool-btn.purple:active{box-shadow:0 1px 0 #4e3488}
.tool-btn.cyan{background:linear-gradient(180deg,#3bb8b0,#22857f);box-shadow:0 3px 0 #16605b,0 5px 12px rgba(0,0,0,.2)}
.tool-btn.cyan:active{box-shadow:0 1px 0 #16605b}
.tool-btn.orange{background:linear-gradient(180deg,#e8923c,#c96f1e);box-shadow:0 3px 0 #96520e,0 5px 12px rgba(0,0,0,.2)}
.tool-btn.orange:active{box-shadow:0 1px 0 #96520e}
.tool-btn.pink{background:linear-gradient(180deg,#f2789a,#d94f77);box-shadow:0 3px 0 #a83558,0 5px 12px rgba(0,0,0,.2)}
.tool-btn.pink:active{box-shadow:0 1px 0 #a83558}
.tool-btn.gold{background:linear-gradient(180deg,#f5c542,#e8a520);color:#5b3a1f;box-shadow:0 3px 0 #b8860b,0 5px 12px rgba(0,0,0,.2)}
.tool-btn.gold:active{box-shadow:0 1px 0 #b8860b}
.scene-btn.attn::after,.tool-btn.attn::after{content:'';position:absolute;top:-4px;right:-4px;width:11px;height:11px;background:#ff4d4d;border-radius:50%;border:2px solid #fff;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}

/* ============ 弹窗 ============ */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(30,20,10,.55);backdrop-filter:blur(3px);padding:14px}
.modal.open{display:flex}
.modal-card{width:min(96vw,540px);max-height:88vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#fffdf5,#fff4dc);border:3px solid #c9a36a;border-radius:22px;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:pop .28s cubic-bezier(.34,1.56,.64,1)}
.modal-card.small-card{width:min(92vw,400px)}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.modal-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:2px dashed #e0c9a0;background:linear-gradient(90deg,rgba(255,228,170,.55),rgba(255,244,214,.2));border-radius:19px 19px 0 0}
.modal-head h2{font-size:18px;color:var(--ink);flex:1}
.mk-coins{font-size:14px;color:var(--ink2);white-space:nowrap}
.mk-coins.lp b{color:#6a4bb8}
.close-btn{width:30px;height:30px;border:none;border-radius:50%;background:#ff8a65;color:#fff;font-size:14px;cursor:pointer;box-shadow:0 2px 0 #d95f3b;flex-shrink:0}
.close-btn:active{transform:translateY(2px);box-shadow:none}
.modal-body{padding:10px 14px;overflow-y:auto;flex:1}
.modal-body::-webkit-scrollbar{width:6px}
.modal-body::-webkit-scrollbar-thumb{background:#d8c5a5;border-radius:3px}
.modal-foot{padding:8px 16px 12px}
.tabs{display:flex;gap:8px;padding:10px 16px 0}
.tab-btn{flex:1;font-size:14px;padding:7px 4px;border:2px solid #d8c5a5;background:#f5ecd8;color:var(--muted);border-radius:10px;cursor:pointer}
.tab-btn.active{background:linear-gradient(180deg,#61b346,#3f8f2b);color:#fff;border-color:#3f8f2b;box-shadow:0 2px 0 #2e6b1e}
.market-note{display:none;margin:10px 16px 0;background:linear-gradient(90deg,#fff3b8,#ffe27a);border:2px dashed #e0a820;border-radius:10px;padding:5px 10px;font-size:13px;color:#8a6508;text-align:center}
.time-note{font-size:13px;color:var(--ink2);line-height:1.7}
.btn-row{display:flex;gap:8px;margin-top:10px}
.btn-row.col{flex-direction:column}
.btn-row .mbtn{flex:1}
.mrow{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid #eee0c5;border-radius:12px;padding:7px 9px;margin-bottom:7px}
.mrow.off{opacity:.55}
.mrow.auction{border-color:#e8c86a;background:linear-gradient(180deg,#fffbe8,#fff5d0)}
.micon{font-size:25px;width:36px;text-align:center;flex-shrink:0}
.minfo{flex:1;min-width:0}
.mname{font-size:14px;color:var(--ink)}
.mdesc{font-size:11px;color:var(--muted);line-height:1.4}
.mbtn{border:none;border-radius:9px;padding:6px 11px;font-size:12px;cursor:pointer;color:#fff;background:linear-gradient(180deg,#61b346,#3f8f2b);box-shadow:0 2px 0 #2e6b1e,inset 0 1px 0 rgba(255,255,255,.25);white-space:nowrap;font-weight:700}
.mbtn:active{transform:translateY(2px);box-shadow:none}
.mbtn.blue{background:linear-gradient(180deg,#4aa3e0,#2d7fc0);box-shadow:0 2px 0 #1f5f95}
.mbtn.gray{background:linear-gradient(180deg,#b8b0a0,#9a9284);box-shadow:0 2px 0 #7a7264}
.mbtn.gold-btn{background:linear-gradient(180deg,#f5c542,#e8a520);color:#5b3a1f;box-shadow:0 2px 0 #b8860b}
.mbtn.orange{background:linear-gradient(180deg,#e8923c,#c96f1e);box-shadow:0 2px 0 #96520e}
.mbtn.purple{background:linear-gradient(180deg,#8a6fd8,#6a4bb8);box-shadow:0 2px 0 #4e3488}
.mbtn.small{padding:3px 8px;font-size:11px}
.mbtn.big{width:100%;padding:11px;font-size:15px}
.mbtn:disabled{background:#c9c2b4!important;box-shadow:0 2px 0 #a89f8d!important;cursor:not-allowed;opacity:.8;transform:none}
.sect-title{font-size:13px;color:#9a7a4a;margin:11px 0 6px;display:flex;align-items:center;gap:6px}
.sect-title:first-child{margin-top:0}
.sect-title::after{content:'';flex:1;height:1px;background:#e0c9a0}
.sect-title.f-head::after{display:none}
.sect-title.f-head .mbtn{margin-left:auto}
.tag{font-size:10px;padding:1px 5px;border-radius:6px;margin-left:4px}
.off-tag{background:#eee;color:#a08a6a}
.gold-tag{background:#fff3b8;color:#b8860b}
.lp-tag{background:#f0e8ff;color:#6a4bb8}
.empty{text-align:center;color:#b0a088;padding:22px 0;font-size:13px}
.seed-opt{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid #cde8a5;border-radius:12px;padding:7px 9px;margin-bottom:7px;cursor:pointer;transition:transform .12s,border-color .12s;flex-wrap:wrap}
.seed-opt:hover{transform:translateX(4px);border-color:#7ec850}
.seed-opt.off{opacity:.5;cursor:not-allowed;filter:grayscale(.6)}
.seed-opt.off:hover{transform:none}
.s-icon{font-size:23px}
.s-name{flex:1;font-size:14px;color:var(--ink);min-width:90px}
.s-count{color:var(--muted);font-size:12px}
.morn-date{font-size:19px;color:var(--ink);text-align:center;margin-bottom:9px}
.morn-line{background:#fff;border-radius:10px;padding:6px 11px;margin-bottom:5px;font-size:13px;color:var(--ink2);border:1px solid #eee0c5;line-height:1.5}
.morn-line.warn{background:#fff0e8;border-color:#f5b8a0;color:#c0512a}
.morn-line.gold{background:#fffbe0;border-color:#f0d878;color:#a08010}
.morn-event{background:linear-gradient(90deg,#f0e8ff,#e8f0ff);border:2px dashed #a8b8f0;border-radius:12px;padding:8px 11px;font-size:13px;color:#4a5a9a;margin-top:4px;line-height:1.5}
.sleep-hint{font-size:14px;color:var(--ink2);text-align:center;line-height:1.6}
.help-body p{font-size:13px;color:var(--ink2);line-height:1.75;margin-bottom:4px}
.help-body b{color:#c67c1e}
.help-sect{font-size:14px;color:#3f8f2b;margin:9px 0 2px}
.help-stats{background:#fff;border:2px dashed #d8c5a5;border-radius:10px;padding:7px 9px;font-size:12px;color:var(--muted);margin-top:11px;line-height:1.6}

/* ============ 工厂/订单/超市 ============ */
.factory-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(4px,.6vw,8px);align-content:start;width:100%}
.machine-panel{background:linear-gradient(180deg,#fffef8,#fff7e6);border:2px solid #e6d3ac;border-radius:clamp(8px,1.1vw,13px);padding:clamp(5px,.7vw,8px);min-width:0}
.mp-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--ink);font-weight:700;margin-bottom:6px;border-bottom:1px dashed #e0c9a0;padding-bottom:4px}
.mp-head .mbtn{margin-left:auto}
.machine-panel .machine-card{background:#fff;border:2px solid #eee0c5;border-radius:12px;padding:7px 9px;margin-bottom:7px;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink);flex-wrap:wrap}
.machine-panel .machine-card:last-child{margin-bottom:0}
.machine-card>b{font-size:13px}
.machine-card .mbody{flex:1;display:flex;align-items:center;gap:9px;min-width:150px}
.batch-bar{flex:1;min-width:90px;height:7px}
.batch-bar i{background:linear-gradient(90deg,#f5c542,#e8923c)}
.batch-time{font-size:11px;color:var(--muted);white-space:nowrap}
.machine-up{font-size:10px;color:#6a4bb8;background:#f0e8ff;border-radius:6px;padding:1px 5px;margin-left:4px}
.order-card{background:#fff;border:2px solid #eee0c5;border-radius:12px;padding:9px 11px;margin-bottom:9px}
.ord-head{font-size:14px;color:var(--ink);margin-bottom:6px}
.ord-needs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.ord-ok{background:#e8f5d8;color:#3a7a1f;font-size:12px;padding:2px 7px;border-radius:8px}
.ord-lack{background:#fde8e0;color:#c0502a;font-size:12px;padding:2px 7px;border-radius:8px}
.ord-reward{font-size:13px;color:#c67c1e;margin-bottom:7px}
.need-lack{color:#d05030}
.need-ok{color:var(--ink2)}
.mega-card{background:linear-gradient(180deg,#fffbe8,#fff3c8);border:3px solid #e8c86a;border-radius:16px;padding:10px 12px;margin-bottom:10px;box-shadow:0 4px 14px rgba(230,180,60,.25)}
.mega-title{font-size:15px;color:#8a6508;margin-bottom:6px;font-weight:700}
.forecast-line{background:linear-gradient(90deg,#eef4ff,#e8f0ff);border:1px dashed #a8b8f0;border-radius:10px;padding:5px 10px;font-size:12px;color:#4a5a9a;margin-bottom:8px;line-height:1.6}

/* ============ 发展/技能/图鉴 ============ */
.dev-sec-title{font-size:15px;color:var(--ink);margin:13px 0 7px;display:flex;align-items:center;gap:6px;font-weight:700}
.dev-sec-title:first-child{margin-top:0}
.dev-sec-title::after{content:'';flex:1;height:2px;background:linear-gradient(90deg,#e0c9a0,transparent)}
.dev-star{background:linear-gradient(90deg,#fffbe0,#fff3b8);border:2px solid #f0d878;border-radius:10px;padding:6px 10px;font-size:13px;color:#a08010;margin-bottom:7px}
.dev-locked{font-size:12px;color:var(--muted);background:#f5efdf;border:1px dashed #d8c5a5;border-radius:10px;padding:6px 10px;margin-bottom:7px}
.dex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px;margin-bottom:8px}
.dex-cell{background:#fff;border:2px solid var(--line);border-radius:10px;padding:6px 2px;text-align:center;font-size:11px;color:var(--ink);line-height:1.4}
.dex-cell.off{opacity:.38;filter:grayscale(1)}
.dex-cell .di{font-size:22px;display:block;margin-bottom:2px}
.dex-done{background:#e8f5d8;border-color:#7ec850;color:#3a7a1f;font-size:12px;border-radius:10px;padding:4px 10px;display:inline-block;margin-bottom:8px}
.achv-row{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid #eee0c5;border-radius:12px;padding:7px 9px;margin-bottom:7px}
.achv-row.done{border-color:#cde8a5;background:linear-gradient(180deg,#f6ffe8,#eefbe0)}
.achv-row .micon{font-size:22px}

/* ============ 提示 ============ */
#toasts{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:7px;align-items:center;pointer-events:none;max-width:92vw}
.toast{background:rgba(255,255,255,.97);border:2px solid #7ec850;border-radius:14px;padding:7px 16px;font-size:14px;color:#4a6b2a;box-shadow:0 6px 20px rgba(0,0,0,.2);animation:toastIn .3s cubic-bezier(.34,1.56,.64,1);text-align:center}
.toast.warn{border-color:#f5a623;color:#a06510}
.toast.gold{border-color:#ffd54a;color:#b8860b;background:linear-gradient(180deg,#fffbe0,#fff3b8)}
.toast.out{animation:toastOut .4s forwards}
@keyframes toastIn{from{transform:translateY(-24px) scale(.8);opacity:0}}
@keyframes toastOut{to{transform:translateY(-16px);opacity:0}}
#tooltip{position:fixed;z-index:400;background:rgba(50,35,20,.92);color:#fff;padding:5px 9px;border-radius:8px;font-size:12px;pointer-events:none;opacity:0;transition:opacity .15s;max-width:250px;line-height:1.5}
#tooltip.show{opacity:1}
#confetti-layer{position:fixed;inset:0;z-index:500;pointer-events:none}
.confetti{position:fixed;font-size:20px;animation:burst 1.4s ease-out forwards}
@keyframes burst{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(540deg);opacity:0}}

/* ============ 响应式 ============ */
/* 中等高度屏幕 */
@media(max-height:760px){
.plot{font-size:clamp(8px,1.2vw,14px)}
#plots{gap:clamp(2px,.4vw,4px)}
#pens{gap:clamp(2px,.4vw,5px)}
.pen{padding:clamp(2px,.4vw,4px) clamp(3px,.5vw,7px)}
.animal{width:clamp(24px,4vw,34px);height:clamp(24px,4vw,34px)}
.a-body{font-size:clamp(14px,2.2vw,18px)}
.panel{padding:clamp(4px,.6vw,6px) clamp(6px,1vw,8px)}
.panel-title{font-size:clamp(12px,1.8vw,14px);margin-bottom:clamp(2px,.3vw,3px)}
.panel-title .hint{display:none}
.pen-feed{font-size:clamp(8px,1.2vw,10px);margin-top:2px}
#farm-toolbar,#pens-toolbar{margin-bottom:clamp(2px,.3vw,4px)}
#super-scene .shelf .sh-name{font-size:clamp(10px,1.3vw,13px)}
#super-scene .shelf .sh-note2{font-size:clamp(8px,1vw,11px)}
#super-scene .shelf .sh-price small{font-size:clamp(8px,1vw,11px)}
}
/* 小高度屏幕 */
@media(max-height:640px){
.plot{font-size:clamp(7px,1.1vw,11px)}
#plots{gap:clamp(1px,.3vw,3px)}
#pens{gap:clamp(2px,.3vw,4px)}
.pen{padding:clamp(2px,.3vw,3px) clamp(3px,.4vw,5px)}
.pen-head{font-size:clamp(10px,1.4vw,11px);margin-bottom:clamp(1px,.2vw,2px)}
.pen-animals{min-height:clamp(20px,3.5vw,28px);gap:clamp(3px,.5vw,4px)}
.animal{width:clamp(20px,3.5vw,28px);height:clamp(20px,3.5vw,28px)}
.a-body{font-size:clamp(12px,2vw,15px)}
.animal .bubble{width:clamp(12px,2vw,16px);height:clamp(12px,2vw,16px);font-size:clamp(7px,1.1vw,9px);top:-6px;right:-4px}
.animal .mood{font-size:clamp(7px,1.1vw,9px)}
.pen-feed{font-size:clamp(7px,1.1vw,9.5px)}
.panel{padding:clamp(3px,.5vw,4px) clamp(5px,.8vw,7px)}
.panel-title{font-size:clamp(11px,1.6vw,13px)}
.mbtn.small{padding:clamp(1px,.2vw,2px) clamp(4px,.6vw,6px);font-size:clamp(9px,1.3vw,10px)}
.stat{font-size:clamp(10px,1.4vw,11px);padding:clamp(1px,.2vw,2px) clamp(3px,.5vw,6px)}
.tool-btn{font-size:clamp(10px,1.5vw,12px);padding:clamp(3px,.5vw,5px) clamp(6px,.8vw,9px)}
#super-scene .shelf{padding:clamp(3px,.4vw,5px) clamp(4px,.5vw,7px)}
#super-scene .shelf .sh-icon{font-size:clamp(18px,2.5vw,25px)}
}
/* 极小高度屏幕 */
@media(max-height:560px){
#pens{gap:clamp(1px,.2vw,3px)}
.pen-feed{display:none}
.pen-animals{min-height:clamp(16px,3vw,22px);gap:clamp(2px,.3vw,3px)}
.animal{width:clamp(16px,3vw,24px);height:clamp(16px,3vw,24px)}
.a-body{font-size:clamp(10px,1.8vw,13px)}
.animal .bubble{width:clamp(10px,1.8vw,14px);height:clamp(10px,1.8vw,14px);font-size:clamp(6px,1vw,8px)}
.pen-head{font-size:clamp(9px,1.3vw,10px);margin-bottom:0}
.plot{font-size:clamp(6px,1vw,9px)}
#plots{gap:clamp(1px,.2vw,2px)}
.panel{padding:clamp(2px,.4vw,3px) clamp(4px,.6vw,5px)}
.panel-title{font-size:clamp(10px,1.4vw,12px)}
header{padding:clamp(3px,.5vw,4px) clamp(5px,.8vw,8px)}
.stat{font-size:clamp(8px,1.2vw,10px);padding:clamp(1px,.1vw,1px) clamp(2px,.3vw,4px)}
.stam-bar{width:clamp(30px,5vw,58px)}
footer{padding:clamp(3px,.5vw,4px) clamp(4px,.6vw,6px)}
.tool-btn{font-size:clamp(9px,1.3vw,11px);padding:clamp(2px,.4vw,4px) clamp(5px,.7vw,7px)}
.hud-stats{gap:clamp(3px,.5vw,4px)}
.game-title{font-size:clamp(14px,2.2vw,16px)}
#super-scene{gap:clamp(2px,.3vw,4px)}
#super-scene .shelf{padding:clamp(2px,.3vw,3px) clamp(3px,.4vw,5px)}
#super-scene .shelf .sh-icon{font-size:clamp(14px,2vw,20px)}
#super-scene .shelf .sh-name{font-size:clamp(8px,1.2vw,11px)}
#super-scene .shelf .sh-qty{font-size:clamp(11px,1.6vw,14px)}
}
/* 宽屏：保持10列 */
@media(min-width:900px){
#plots{grid-template-columns:repeat(10,1fr)}
}
/* 窄屏：减少列数 */
@media(max-width:600px){
#plots{grid-template-columns:repeat(8,1fr)}
}
@media(max-width:400px){
#plots{grid-template-columns:repeat(6,1fr)}
#pens{grid-template-columns:repeat(2,1fr)}
}

/* ============ 超市货架 ============ */
#super-scene{display:block;width:100%}
.super-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(4px,.6vw,8px);margin-bottom:clamp(5px,.7vw,9px)}
.sstat{background:linear-gradient(180deg,#fffef5,#fff6dc);border:2px solid #e6d3ac;border-radius:clamp(8px,1.1vw,13px);padding:clamp(4px,.6vw,7px) clamp(5px,.7vw,9px);display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center}
.sstat i{font-style:normal;font-size:clamp(14px,2vw,20px)}
.sstat b{font-size:clamp(10px,1.4vw,12px);color:var(--ink2)}
.sstat span{font-size:clamp(10px,1.4vw,12px);color:#c67c1e;font-weight:700}
.shelf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(4px,.6vw,8px);align-content:start;width:100%}
.shelf{background:linear-gradient(180deg,#fffef8,#fff7e6);border:2px solid #e6d3ac;border-radius:clamp(8px,1.1vw,13px);padding:clamp(5px,.7vw,8px);min-width:0;display:flex;flex-direction:column;gap:clamp(2px,.3vw,4px)}
.shelf.empty-shelf{background:linear-gradient(180deg,#fbf9f3,#f3ecdc);border-style:dashed}
.shelf.locked-shelf{background:linear-gradient(180deg,#efeaf4,#e4dcec);border-style:dashed;opacity:.92}
.sh-top{display:flex;align-items:center;gap:6px;min-width:0}
.sh-icon{font-size:clamp(20px,3vw,30px);flex-shrink:0}
.sh-name{font-size:clamp(11px,1.5vw,13px);color:var(--ink);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sh-qty{font-size:clamp(15px,2.2vw,20px);font-weight:700;color:#c67c1e}
.sh-qty small{font-size:clamp(9px,1.2vw,11px);color:var(--muted);font-weight:400}
.sh-price{font-size:clamp(11px,1.5vw,13px);color:#3a7a1f}
.sh-price small{display:block;font-size:clamp(9px,1.2vw,11px);color:var(--muted)}
.sh-note2{font-size:clamp(9px,1.2vw,11px);color:var(--muted)}
.sh-btns{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto}
@media(max-width:600px){.shelf-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.shelf-grid{grid-template-columns:repeat(2,1fr)}}
/* ============ 金色动物 ============ */
.animal.golden{background:linear-gradient(180deg,#ffe98a,#f5c542);box-shadow:0 3px 0 #b8860b,0 0 14px rgba(245,197,66,.85)}
.gtag{position:absolute;top:-8px;left:-6px;font-size:13px;z-index:3}