/* ===== 农家捡鸡蛋 · 样式 ===== */
:root{
  --ink:#4a3b2a;
  --ink-soft:#8a7761;
  --line:#eadfcb;
  --card:#fffdf8;
  --bg:#f6efe2;
  --gold:#e8a33d;
  --gold-deep:#c9821f;
  --green:#5aa05a;
  --green-deep:#3f7d3f;
  --red:#d9534f;
  --radius:16px;
  --shadow:0 4px 16px rgba(120,95,60,.12);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{height:100%;margin:0}

body{
  background:#2f2a24;
  color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
}

#app{
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100dvh;
  max-width:1180px;
  margin:0 auto;
  background:var(--bg);
  overflow:hidden;
}

/* ---------- HUD ---------- */
.hud{
  flex:0 0 auto;
  padding:8px 12px 6px;
  background:linear-gradient(180deg,#fffaf0,#f7efdf);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 10px rgba(150,120,80,.08);
  z-index:5;
}

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

.stat{
  display:flex;align-items:baseline;gap:3px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 10px;
  font-size:13px;
  box-shadow:0 1px 3px rgba(150,120,80,.08);
  white-space:nowrap;
}
.stat-icon{font-size:13px;line-height:1}
.stat-val{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat-sub{font-size:10px;color:var(--ink-soft)}
.stat-coin{background:linear-gradient(180deg,#fff7e3,#ffeec4);border-color:#f2dda8}
.stat-coin .stat-val{color:var(--gold-deep)}
.stat-fence{background:linear-gradient(180deg,#f0f8ee,#e2f0de);border-color:#cfe4c9;margin-right:auto}
.stat-fence .stat-val{color:var(--green-deep)}

.icon-btn{
  width:32px;height:32px;
  flex:0 0 auto;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  font-size:14px;
  cursor:pointer;
  display:grid;place-items:center;
  transition:transform .12s;
}
.icon-btn:active{transform:scale(.9)}
.icon-btn.off{opacity:.4}

.hud-chips{
  display:flex;gap:6px;
  margin-top:6px;
  overflow-x:auto;
  scrollbar-width:none;
}
.hud-chips::-webkit-scrollbar{display:none}

.chip{
  flex:0 0 auto;
  display:flex;align-items:center;gap:5px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px 9px 3px 5px;
  font-size:12px;
  transition:transform .15s, box-shadow .15s;
}
.chip .dot{
  width:14px;height:14px;border-radius:50%;
  box-shadow:inset -1px -2px 3px rgba(0,0,0,.15);
}
.chip .num{font-weight:700;font-variant-numeric:tabular-nums}
.chip.flash{transform:scale(1.22);box-shadow:0 0 0 4px rgba(232,163,61,.28)}

.cap-bar{
  position:relative;
  margin-top:6px;
  height:14px;
  border-radius:999px;
  background:#efe6d4;
  overflow:hidden;
}
.cap-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,#9ed07a,#68ac52);
  border-radius:999px;
  transition:width .25s ease;
}
.cap-fill.warn{background:linear-gradient(90deg,#f2c36b,#e29b3b)}
.cap-fill.full{background:linear-gradient(90deg,#ef8b6a,#d9534f)}
.cap-text{
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:10px;font-weight:700;color:#5c4a33;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
  font-variant-numeric:tabular-nums;
}

/* ---------- 主体 ---------- */
.body{flex:1;display:flex;flex-direction:column;min-height:0}

.stage{
  position:relative;
  flex:1;
  min-height:0;
  background:#9dcf78;
  overflow:hidden;
}
#farm{display:block;width:100%;height:100%;touch-action:manipulation;cursor:pointer}

.stage-hint{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  background:rgba(74,59,42,.66);
  color:#fff;font-size:12px;
  padding:4px 12px;border-radius:999px;
  pointer-events:none;
  transition:opacity .5s;
}
.stage-hint.hide{opacity:0}

.stage-badge{
  position:absolute;left:10px;top:10px;
  display:flex;flex-direction:column;gap:4px;
  pointer-events:none;
}
.stage-badge .b{
  background:rgba(74,59,42,.72);
  color:#fff;font-size:11px;
  padding:4px 10px;border-radius:999px;
  animation:pop .3s ease;
}

@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- 侧栏 ---------- */
.side{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
  background:var(--card);
  border-top:1px solid var(--line);
}

.tabs{
  order:2;
  display:flex;
  border-top:1px solid var(--line);
  background:#fffdf8;
}
.tab{
  flex:1;
  border:0;
  background:transparent;
  padding:7px 0 9px;
  font-size:11px;
  color:var(--ink-soft);
  cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:color .15s;
  font-family:inherit;
}
.tab span{font-size:17px;line-height:1}
.tab.active{color:var(--gold-deep);font-weight:700}

.panel{
  order:1;
  height:min(35vh,290px);
  overflow-y:auto;
  padding:10px 12px 14px;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* ---------- 卡片 ---------- */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px 12px;
  margin-bottom:10px;
  box-shadow:var(--shadow);
}
.card h3{
  margin:0 0 8px;
  font-size:13px;
  color:var(--ink);
  display:flex;align-items:center;gap:6px;
}
.card h3 .tag{
  margin-left:auto;
  font-size:10px;font-weight:400;
  color:var(--ink-soft);
  background:#f7f2e8;
  padding:2px 8px;border-radius:999px;
}
.card p{margin:4px 0;font-size:12px;color:var(--ink-soft);line-height:1.6}

.row{
  display:flex;align-items:center;gap:10px;
  padding:7px 0;
  border-bottom:1px dashed var(--line);
}
.row:last-child{border-bottom:0;padding-bottom:0}
.row:first-child{padding-top:0}
.row-icon{
  width:38px;height:38px;flex:0 0 auto;
  border-radius:12px;
  display:grid;place-items:center;
  font-size:20px;
  background:linear-gradient(180deg,#fffaf0,#f4ecdc);
  border:1px solid var(--line);
}
.row-main{flex:1;min-width:0}
.row-title{font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px}
.row-title .own{
  font-size:10px;font-weight:400;
  color:var(--green-deep);
  background:#e9f5e4;
  padding:1px 7px;border-radius:999px;
}
.row-sub{font-size:11px;color:var(--ink-soft);margin-top:2px;line-height:1.5}

.btn{
  border:0;
  border-radius:10px;
  padding:7px 13px;
  font-size:12px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  background:linear-gradient(180deg,#f0b355,#dd9427);
  color:#fff;
  box-shadow:0 2px 0 #b8791a;
  transition:transform .1s, filter .15s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 #b8791a}
.btn:disabled{
  background:#e8e0d1;color:#a99b86;
  box-shadow:0 2px 0 #d6cbb7;
  cursor:not-allowed;
}
.btn.ghost{
  background:#fff;color:var(--ink);
  box-shadow:0 0 0 1px var(--line) inset;
}
.btn.ghost:active{transform:translateY(1px)}
.btn.green{background:linear-gradient(180deg,#7cbd6a,#559a48);box-shadow:0 2px 0 #3f7d3f}
.btn.green:active{box-shadow:0 1px 0 #3f7d3f}
.btn.small{padding:5px 10px;font-size:11px;border-radius:8px}
.btn.danger{background:linear-gradient(180deg,#e4706c,#c9453f);box-shadow:0 2px 0 #9c332e}

.btn-group{display:flex;gap:5px;flex:0 0 auto}

.seg{
  display:flex;gap:6px;
  margin:2px 0 6px;
}
.seg .btn{flex:1}
.btn.on{
  background:linear-gradient(180deg,#7cbd6a,#559a48);
  box-shadow:0 2px 0 #3f7d3f;
}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mini{
  background:#faf6ee;
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px;
  text-align:center;
}
.mini .k{font-size:10px;color:var(--ink-soft)}
.mini .v{font-size:15px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}

.slider-wrap{padding:2px 0 4px}
.slider-top{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}
.slider-top b{color:var(--gold-deep)}
input[type=range]{
  width:100%;height:6px;
  -webkit-appearance:none;appearance:none;
  border-radius:999px;
  background:linear-gradient(90deg,#dbeccf,#f2dda8);
  outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:20px;height:20px;border-radius:50%;
  background:#fff;border:3px solid var(--gold);
  box-shadow:0 2px 6px rgba(180,140,60,.35);
  cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--gold);
  cursor:pointer;
}

.stat-line{
  display:flex;justify-content:space-between;
  font-size:12px;padding:5px 0;
  border-bottom:1px dashed var(--line);
}
.stat-line:last-child{border-bottom:0}
.stat-line b{font-variant-numeric:tabular-nums}

.muted{color:var(--ink-soft);font-size:11px;line-height:1.7}
.empty{
  text-align:center;color:var(--ink-soft);
  font-size:12px;padding:22px 0;
}

/* ---------- Toast ---------- */
.toasts{
  position:fixed;left:50%;top:70px;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  pointer-events:none;z-index:99;
}
.toast{
  background:rgba(74,59,42,.9);
  color:#fff;font-size:12.5px;
  padding:7px 16px;border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  animation:toastIn .22s ease, toastOut .3s ease 1.5s forwards;
  max-width:82vw;text-align:center;
}
.toast.ok{background:rgba(70,140,70,.94)}
.toast.warn{background:rgba(200,120,30,.94)}
.toast.bad{background:rgba(190,70,65,.94)}
.toast.gold{background:rgba(196,140,30,.96)}

@keyframes toastIn{from{transform:translateY(-12px) scale(.9);opacity:0}to{transform:none;opacity:1}}
@keyframes toastOut{to{transform:translateY(-10px);opacity:0}}

/* ---------- 启动错误 ---------- */
.boot-error{
  position:fixed;inset:0;
  background:rgba(40,34,28,.94);
  display:none;place-items:center;
  padding:20px;z-index:200;
}
.boot-error.show{display:grid}
.boot-card{
  background:#fffdf8;
  border-radius:20px;
  padding:22px 24px;
  max-width:520px;
}
.boot-card h2{margin:0 0 10px;font-size:18px;color:var(--red)}
.boot-card p{font-size:13px;line-height:1.7;color:var(--ink-soft)}
.boot-card code{
  background:#f4ecd9;padding:1px 6px;border-radius:6px;
  font-size:12px;color:#8a5b17;
}
.boot-card pre{
  background:#2f2a24;color:#9fdc8a;
  padding:10px 14px;border-radius:10px;
  font-size:12.5px;overflow-x:auto;margin:8px 0;
}
.boot-mute{font-size:11px!important;color:#b0a08c!important;word-break:break-all}

/* ---------- 节日横幅 ---------- */
.festival-bar{
  flex:0 0 auto;
  display:flex;align-items:center;gap:7px;
  padding:6px 12px;
  font-size:12px;color:#fff;
  background:var(--fest,#e2468f);
  box-shadow:inset 0 -3px 8px rgba(0,0,0,.18);
  overflow:hidden;
}
.festival-bar b{font-size:12.5px;flex:0 0 auto}
.festival-bar .fest-icon{font-size:14px;flex:0 0 auto}
.festival-bar .fest-desc{
  opacity:.92;font-size:11px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- 任务 / 成就 ---------- */
.quest{
  border:1px solid var(--line);
  border-radius:12px;
  padding:9px 10px;
  margin-bottom:8px;
  background:#fffdf9;
}
.quest:last-child{margin-bottom:0}
.quest-done{opacity:.6;background:#f5f2ec}
.quest-top{display:flex;align-items:baseline;gap:8px;font-size:12.5px}
.quest-top b{flex:1;min-width:0}
.quest-prog{font-size:11px;color:var(--ink-soft);font-variant-numeric:tabular-nums;flex:0 0 auto}
.quest-desc{font-size:11px;color:var(--ink-soft);margin-top:3px;line-height:1.5}
.quest-bot{display:flex;align-items:center;gap:8px;margin-top:8px}
.quest-bot .reward{flex:1;min-width:0;font-size:11px;color:var(--gold-deep);font-weight:700}
.bar{height:7px;border-radius:999px;background:#ece4d4;overflow:hidden;margin-top:7px}
.bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#c8e0a8,#8cc667);transition:width .3s}
.bar i.full{background:linear-gradient(90deg,#f5cd6e,#e8a33d)}
.pill{font-size:10px;padding:3px 9px;border-radius:999px;white-space:nowrap;flex:0 0 auto}
.pill.ok{background:#e9f5e4;color:var(--green-deep)}
.pill.lock{background:#f1ece1;color:#a99b86}

/* ---------- 图鉴 ---------- */
.codex-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.codex-cell{text-align:center}
.codex-art{
  position:relative;
  width:100%;aspect-ratio:1/1;
  border-radius:12px;
  border:2px solid var(--line);
  overflow:hidden;
  display:grid;place-items:center;
  font-size:20px;color:#c3b7a2;
  box-shadow:inset 0 -3px 8px rgba(0,0,0,.07);
  background-color:#f7f2e8;
}
/* 蛋：单张精灵，居中等比缩放 */
.codex-art img.single{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  height:88%;width:auto;max-width:none;
}
/* 家禽：6 帧横向精灵表，把第 0 帧挪到正中 */
.codex-art img.sheet{
  position:absolute;top:8%;left:50%;
  height:84%;width:auto;max-width:none;
  margin-left:-42%;
}
.codex-art.locked{background:#e9e1d2}
.codex-name{font-size:11px;margin-top:5px;font-weight:700}
.codex-num{font-size:10px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.codex-cell.locked .codex-name{color:var(--ink-soft);font-weight:400}

/* ---------- 任务页红点 ---------- */
.tab{position:relative}
.tab.has-dot::after{
  content:attr(data-dot);
  position:absolute;top:2px;right:50%;margin-right:-26px;
  min-width:15px;height:15px;padding:0 3px;
  border-radius:999px;background:var(--red);color:#fff;
  font-size:9px;font-weight:700;line-height:15px;text-align:center;
  box-shadow:0 0 0 2px #fffdf8;
}

/* ---------- 加载层 ---------- */
.loading{
  position:fixed;inset:0;z-index:300;
  display:grid;place-items:center;
  background:linear-gradient(160deg,#fdf6e8,#eaf5e0);
  transition:opacity .45s;
}
.loading.hide{opacity:0;pointer-events:none}
.loading-card{text-align:center;padding:20px}
.loading-title{font-size:23px;font-weight:800;color:var(--gold-deep);letter-spacing:3px}
.loading-sub{margin-top:9px;font-size:12px;color:var(--ink-soft)}
.loading-bar{
  margin:18px auto 0;
  width:min(260px,64vw);height:8px;
  border-radius:999px;background:#e6ddc9;overflow:hidden;
}
.loading-bar i{
  display:block;height:100%;width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#f0b355,#dd9427);
  transition:width .2s;
}

/* ---------- 桌面端 / 手机横屏：左右分栏 ---------- */
@media (min-width:900px){
  .body{flex-direction:row}
  .stage{flex:1}
  .side{
    width:400px;
    border-top:0;
    border-left:1px solid var(--line);
    box-shadow:-4px 0 16px rgba(150,120,80,.08);
  }
  .tabs{order:0;border-top:0;border-bottom:1px solid var(--line)}
  .panel{order:0;height:auto;flex:1}
  .hud-row{gap:10px}
}

/* 手机横屏：高度不够，直接改成左右分栏，否则鸡舍只剩一条缝 */
@media (orientation:landscape) and (max-height:560px){
  .body{flex-direction:row}
  .stage{flex:1}
  .side{
    width:min(340px,42vw);
    border-top:0;
    border-left:1px solid var(--line);
  }
  .tabs{order:0;border-top:0;border-bottom:1px solid var(--line)}
  .panel{order:0;height:auto;flex:1}
  .hud{padding:4px 10px 4px}
  .hud-chips{margin-top:4px}
  .cap-bar{margin-top:4px;height:12px}
  .hud-row{gap:6px}
  .stat{padding:3px 8px;font-size:12px}
}