:root {
  --bg: #f6f3e7;
  --paper: #fffdf6;
  --paper-soft: #faf6e9;
  --green: #4f8b43;
  --green-dark: #2f7136;
  --green-soft: #e7f4dc;
  --ink: #2f2a22;
  --muted: #7e7466;
  --line: #e7ddc8;
  --shadow: 0 14px 34px rgba(70, 52, 23, .12);
  --radius: 24px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  padding-bottom: 96px;
  color: var(--ink);
  background: linear-gradient(180deg, #edf8e8 0%, var(--bg) 38%, #f8f0d8 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
button, input, select { font: inherit; }
button { cursor: pointer; }

.app-header {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 18px 12px;
}
.app-header h1 {
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .5px;
}
.page {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 18px 28px;
}
.two-col, .quick-grid, .feature-grid, .resource-grid, .animal-grid, .craft-grid, .order-service-grid, .area-grid {
  display: grid;
  gap: 14px;
}
.two-col, .feature-grid, .animal-grid, .craft-grid, .order-service-grid, .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.resource-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card, .hero-card, .debt-card, .feature-card, .animal-card, .craft-card, .order-service-card, .order-row, .area-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 246, .94);
  box-shadow: var(--shadow);
}
.card { padding: 18px; margin: 14px 0; }
.card h2, .hero-info h2, .debt-info h2, .feature-card b, .animal-card h2, .craft-card h2, .order-service-card h2 { margin: 0 0 8px; }
.small { color: var(--muted); font-size: 14px; }
.sync-pill, .tag, .status-tag {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--green-dark);
  background: var(--green-soft);
  font-size: 13px;
  font-weight: 800;
}
.input {
  width: 100%;
  margin: 8px 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  color: var(--ink);
}
.btn {
  border: 0;
  border-radius: 16px;
  padding: 12px 18px;
  color: #fff;
  background: linear-gradient(180deg, #59a751, #3e8038);
  box-shadow: 0 7px 14px rgba(54, 113, 47, .18);
  font-weight: 900;
}
.btn.secondary {
  border: 1px solid #e3d7bf;
  color: #516842;
  background: #f6f0df;
  box-shadow: none;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #eee6d8;
}
.row:last-child { border-bottom: 0; }
.money { color: #17813d; font-size: 30px; font-weight: 900; }
.toast {
  position: fixed;
  left: 50%;
  top: 24px;
  z-index: 5000;
  transform: translateX(-50%);
  max-width: min(640px, calc(100% - 32px));
  padding: 12px 16px;
  border-radius: 999px;
  background: #2b2b2b;
  color: #fff;
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 12px;
  z-index: 2000;
  width: min(760px, calc(100% - 24px));
  height: 76px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid #e7dece;
  border-radius: 26px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 38px rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
}
.nav-button {
  border: 0;
  background: transparent;
  color: #746d5f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 900;
}
.nav-button.active { color: var(--green-dark); }
.nav-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f5f0e5;
}
.nav-button.active .nav-icon { background: #dff1d4; }
.nav-img { width: 27px; height: 27px; object-fit: contain; }

.hero-card { overflow: hidden; margin: 10px 0 16px; }
.hero-image { background: #e7f3dc; }
.hero-img { display: block; width: 100%; height: 280px; object-fit: cover; }
.hero-card-split {
  width: 100%;
  max-width: 100%;
  margin: 10px 0 16px;
}
.hero-card-split .hero-single-image {
  height: auto;
  overflow: visible;
  background: transparent;
  border-radius: 26px 26px 0 0;
}
.hero-card-split .hero-img-combined {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
  display: block;
  border-radius: 26px 26px 0 0;
}
.hero-info { padding: 18px; background: rgba(255,253,246,.96); }
.hero-info span:first-child { color: var(--muted); }
.hero-info h2 { font-size: 28px; }

.debt-card { padding: 14px; margin: 14px 0; }
.debt-image-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #eef7eb;
}
.debt-stage-img {
  display: block;
  width: 100%;
  height: 400px;
  object-fit: contain;
  background: #eef7eb;
}
.debt-progress-panel {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: min(280px, calc(100% - 32px));
  padding: 12px 14px;
  border: 1px solid rgba(231,221,200,.9);
  border-radius: 18px;
  background: rgba(255,253,246,.88);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(70,52,23,.14);
}
.debt-progress-panel b { display: block; margin-bottom: 4px; }
.debt-progress-panel span { display: block; color: var(--muted); font-size: 13px; font-weight: 800; }
.progress-track.mini { height: 10px; margin: 8px 0 0; }
.debt-info { margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,253,246,.96); }
.debt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.progress-track { height: 13px; margin: 14px 0; border-radius: 999px; background: #e8e4d8; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #76bf63, #3f8a3f); }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.stat-grid span { padding: 10px; border: 1px solid #e9dec9; border-radius: 14px; background: #faf5e8; text-align: center; color: #6a5d48; }

.resource-grid { margin: 14px 0; }
.resource-grid div { padding: 14px; text-align: center; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: var(--shadow); }
.resource-grid span { display: block; margin-top: 5px; color: var(--green-dark); font-size: 22px; font-weight: 900; }

.feature-card {
  min-height: 150px;
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.feature-card { border-color: var(--line); }
.feature-img { width: 84px; height: 84px; object-fit: contain; border-radius: 20px; }
.feature-card small { color: var(--muted); }

.inventory-item {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #eee7d8;
}
.inventory-item:last-child { border-bottom: 0; }
.item-img { width: 48px; height: 48px; object-fit: contain; }
.inv-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: #eef7e8; }

.field-switch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 12px 0; }
.field-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 880;
  border: 1px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
  background: #dcefd1;
  box-shadow: var(--shadow);
}
.field-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.field-title {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: var(--green-dark);
  font-weight: 900;
}
.plot-grid {
  position: absolute;
  inset: 0;
  display: block;
}
.field-scene.field .plot-grid,
.field-scene.garden .plot-grid {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.plot-cell {
  border: 0;
  background: transparent;
  border-radius: 13px;
  display: grid;
  place-items: center;
  position: absolute;
  width: 7.4%;
  height: 8.4%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  box-sizing: border-box;
}
.plot-cell:focus { outline: 3px solid rgba(255,255,255,.85); }
.plot-lock { width: 24%; height: 24%; object-fit: contain; opacity: .86; }
.plot-crop { width: 78%; height: 78%; object-fit: contain; object-position: center; filter: drop-shadow(0 4px 4px rgba(92,65,22,.22)); z-index: 2; }
.plot-badge { position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); background: rgba(255,253,246,.92); border-radius: 999px; padding: 2px 6px; font-size: 10px; line-height: 1.1; white-space: nowrap; z-index: 3; box-shadow: 0 1px 4px rgba(70,46,20,.12); }
.modal-mask { position: fixed; inset: 0; z-index: 3000; padding: 22px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.25); }
.modal { width: min(760px, 100%); max-height: calc(100vh - 44px); overflow: auto; border-radius: 28px; background: var(--paper); box-shadow: 0 20px 80px rgba(0,0,0,.32); padding: 20px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plain-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #e7f2df; font-size: 22px; }
.plant-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.plant-choice { min-height: 104px; border: 1px solid var(--line); border-radius: 18px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-weight: 900; }
.plant-icon { width: 52px; height: 52px; object-fit: contain; }

.animal-card { padding: 14px; display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; }
.animal-art { width: 96px; height: 96px; border-radius: 18px; display: grid; place-items: center; background: #f8f2e5; }
.pen-img { width: 90px; height: 90px; object-fit: contain; border-radius: 18px; }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; grid-column: 1 / -1; }

.craft-card { padding: 14px; }
.craft-head { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; }
.building-img { width: 82px; height: 82px; object-fit: contain; border-radius: 18px; }
.recipe-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.order-service-card { padding: 14px; }
.order-img { width: 100%; height: 230px; object-fit: contain; border-radius: 18px; background: #f8f2e5; }
.order-row { display: grid; grid-template-columns: 116px 1fr; gap: 14px; padding: 14px; margin: 12px 0; }
.order-thumb-img { width: 100%; height: 96px; object-fit: contain; border-radius: 14px; background: #f8f2e5; }
.area-card { padding: 16px; overflow: hidden; }
.area-art { height: 150px; border-radius: 18px; margin-bottom: 10px; display: grid; place-items: center; background: #fff8e9; }
.area-img { width: 100%; height: 100%; object-fit: contain; border-radius: 18px; }


@media (max-width: 700px) {
  .app-header { padding: 20px 14px 10px; }
  .page { padding: 0 10px 24px; }
  .app-header h1 { font-size: 27px; }
  .two-col, .feature-grid, .animal-grid, .craft-grid, .order-service-grid, .area-grid, .quick-grid, .resource-grid, .stat-grid { grid-template-columns: 1fr; }
  .hero-img { height: 210px; }
  .debt-stage-img { height: 300px; }
  .debt-progress-panel { right: 10px; bottom: 10px; padding: 10px 12px; }
  .area-art { height: 120px; }
  .plant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .animal-card { grid-template-columns: 84px 1fr; }
  .animal-art { width: 84px; height: 84px; }
  .pen-img { width: 76px; height: 76px; }
  .order-service-card .order-img { height: 160px; }
  .order-row { grid-template-columns: 86px 1fr; }
}

.zoo-hero { overflow: hidden; }
.zoo-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.zoo-zone-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.zoo-zone-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,253,246,.94);
  box-shadow: var(--shadow);
  padding: 16px;
}
.zoo-zone-card.locked { opacity: .92; }
.zoo-zone-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.zoo-zone-head h2 { margin: 0 0 6px; }
.zoo-zone-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--green-soft);
  font-size: 30px;
}
.zoo-animal-list { display: grid; gap: 8px; margin: 12px 0; }
.zoo-animal-chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #eee2cd;
  border-radius: 16px;
  background: #fffaf0;
}
@media (max-width: 760px) {
  .zoo-zone-grid { grid-template-columns: 1fr; }
  .zoo-animal-chip { align-items: flex-start; flex-direction: column; }
}
.plot-cost{position:absolute;left:50%;right:auto;bottom:6%;transform:translateX(-50%);font-size:10px;line-height:1;color:#5f431f;background:rgba(255,253,246,.94);border:1px solid rgba(139,101,45,.18);border-radius:999px;padding:2px 6px;box-shadow:0 2px 5px rgba(70,46,20,.10);white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis;z-index:4;}
.plot-cost-can{color:#2e7137;background:rgba(238,250,231,.95);border-color:rgba(69,145,70,.25);font-weight:900;}
.plot-cell.locked-blocked{opacity:.72;filter:grayscale(.25);}
.plot-cell.locked-blocked .plot-cost{display:none;}
@media (max-width: 760px){
  .plot-lock{width:20%;height:20%;opacity:.82;}
  .plot-cost{font-size:8px;padding:1px 4px;bottom:5%;}
}
.plant-choice small{display:block;margin-top:3px;font-size:11px;color:#8a755f;}
.plant-choice.locked-choice{opacity:.55;filter:grayscale(.45);}

/* v1.4.7 新增内容材质接入：只服务新加入的动物园 / 研发中心资源，不改已定版订单入口 */
.zoo-zone-icon { width: 58px; height: 58px; display:flex; align-items:center; justify-content:center; flex:0 0 58px; }
.zoo-zone-img { width: 58px; height: 58px; object-fit: contain; }
.zoo-animal-chip { display:flex; align-items:center; gap:10px; }
.zoo-animal-art { width:46px; height:46px; flex:0 0 46px; display:flex; align-items:center; justify-content:center; }
.zoo-animal-img { width:46px; height:46px; object-fit:contain; }
.tech-card-head { display:flex; align-items:center; gap:10px; }
.tech-card-head h3 { margin:0; }
.tech-img { width:42px; height:42px; object-fit:contain; }

.feed-line {
  margin-top: 4px;
}
.warn-line {
  margin-top: 4px;
  color: #b45309;
  font-weight: 700;
}
.task-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.mini-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  padding: 12px;
}
.progress {
  height: 10px;
  margin: 10px 0;
  border-radius: 999px;
  overflow: hidden;
  background: #e8e4d8;
}
.progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #79c969, #3f8a3f);
}
.card-actions { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 720px) { .task-grid { grid-template-columns: 1fr; } }

.hero-split-grid { display:grid; grid-template-columns: 1.25fr .75fr; gap:0; align-items:stretch; background:#e7f3dc; }
.hero-img-town { height:280px; object-fit:cover; }
.hero-img-debt { height:280px; object-fit:contain; background:#edf8e8; border-left:1px solid rgba(231,221,200,.7); }
.recipe-panel { margin-top:12px; }
.recipe-panel h3 { margin: 8px 0 10px; }
.recipe-card { border:1px solid var(--line); border-radius:18px; background:#fffdf8; padding:12px; margin:10px 0; }
.recipe-title { display:flex; justify-content:space-between; gap:10px; font-weight:900; margin-bottom:10px; }
.recipe-title span { color:var(--muted); font-size:13px; }
.recipe-flow { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; margin-bottom:10px; }
.recipe-arrow { color:#c79c55; font-weight:900; font-size:20px; }
.item-chip-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.item-chip { display:inline-flex; align-items:center; gap:5px; padding:6px 8px; border:1px solid #eadfc9; border-radius:999px; background:#f8f1e2; font-size:13px; }
.chip-img { width:24px; height:24px; object-fit:contain; }
.order-service-card.locked { opacity:.88; }
.fishing-card .area-img { object-fit:contain; }
@media (max-width:700px){ .hero-split-grid{grid-template-columns:1fr;} .hero-img-town,.hero-img-debt{height:180px;} .recipe-flow{grid-template-columns:1fr;} .recipe-arrow{display:none;} }


/* v2.0.2 safe fixes: no original asset deletion/overwrite */
.hero-debt-top { grid-template-columns: 1fr; grid-template-rows: 280px 280px; }
.hero-debt-top .hero-img-debt { order:1; width:100%; border-left:0; border-bottom:1px solid rgba(231,221,200,.7); object-fit:cover; background:#eaf6e3; }
.hero-debt-top .hero-img-town { order:2; width:100%; object-fit:cover; }
@media (max-width:700px){ .hero-debt-top{grid-template-rows:180px 180px;} }

.craft-building-card { padding: 16px; }
.craft-head .building-img { width: 82px; height: 82px; object-fit: contain; border-radius: 18px; background:#fff6e6; }
.recipe-card { background: linear-gradient(180deg,#fffdf8,#fff7e7); border:1px solid #eadfc9; }
.recipe-label { font-size:13px; color:#7d6a55; font-weight:900; margin-bottom:6px; }
.item-chip em { font-style:normal; color:#8a6a3d; font-weight:900; }
.research-hero { display:grid; grid-template-columns: 160px 1fr; gap:16px; align-items:center; }
.research-building-img { width:150px; height:120px; object-fit:contain; border-radius:22px; background:#fff6e6; }
.fishing-art { background:#eaf8f4; }
.zoo-zone-icon { background:#edf7e8; overflow:hidden; }
.zoo-zone-img { width:58px; height:58px; object-fit:contain; }
.zoo-animal-img { width:48px; height:48px; object-fit:contain; border-radius:14px; background:#fff7e7; padding:3px; }


/* 3. 加工工坊：材料图标限制尺寸，禁止出现超大甘蔗/超大材料图。 */
.recipe-card img,
.recipe-card .item-img,
.recipe-card .chip-img,
.recipe-flow img,
.item-chip img {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  object-fit: contain !important;
}
.recipe-card .recipe-flow {
  grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr) !important;
  align-items:center !important;
}
.recipe-card .item-chip {
  min-height: 34px !important;
  max-width: 100% !important;
}
.recipe-card .item-chip-list {
  align-items:center !important;
}
.recipe-card {
  overflow:hidden !important;
}


.unlock-cost-line{margin-top:6px;color:#8a5a1f;font-weight:800;}
.farm-unlock-card h2{margin-bottom:8px;}

.fishing-card .fishing-art {
  margin: -4px -4px 12px;
}
.fishing-area-img {
  width: 100%;
  aspect-ratio: 960 / 610;
  display: block;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 8px 18px rgba(54, 76, 45, .12);
}

/* 2.0.30-homecachefix-20260628: 首页大图缓存与裁切修复。强制组合图完整显示，不受旧 .hero-img 高度规则影响。 */
.hero-card-split .hero-single-image {
  height: auto !important;
  overflow: visible !important;
  border-radius: 26px 26px 0 0;
}
.hero-card-split .hero-img-combined,
.hero-img.hero-img-combined {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

/* v2.0.30 fishing card clean: 钓鱼卡片只显示图片和按钮，动态说明文字不再压到图片上。 */
.fishing-card-clean {
  padding: 12px;
}
.fishing-card-clean .fishing-art {
  height: auto !important;
  margin: 0 0 12px !important;
  display: block !important;
  background: transparent !important;
  overflow: visible !important;
}
.fishing-card-clean .fishing-area-img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 18px !important;
}
.fishing-card-clean .card-actions {
  margin-top: 8px;
}
.fishing-card-clean .card-actions .btn {
  width: 100%;
}

/* v2.1.0 zoo selected assets: 9展馆图 + 已确认动物分组图 */
.zoo-zone-cover {
  width: 100%;
  margin-bottom: 12px;
  border-radius: 20px;
  overflow: hidden;
  background: #fff8e9;
  box-shadow: 0 8px 18px rgba(54, 76, 45, .10);
}
.zoo-zone-cover-img {
  width: 100%;
  display: block;
  aspect-ratio: 960 / 470;
  object-fit: cover;
}
.zoo-animal-art {
  background: #fffaf0;
  border: 1px solid #eadfc9;
  border-radius: 16px;
}
.zoo-animal-img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

/* v2.1.4 加工工坊：外层只显示工坊，进入后才显示配方制作 */
.craft-entry-note { margin-bottom: 14px; }
.craft-building-grid .craft-building-card {
  padding: 14px;
}
.craft-building-card.locked {
  opacity: .92;
}
.craft-building-card.selected {
  border-color: #9ecb8f;
  box-shadow: 0 10px 24px rgba(65, 122, 56, .16);
}
.craft-building-card .card-actions {
  margin-top: 12px;
}
.craft-workshop-detail {
  scroll-margin-top: 20px;
}
.craft-workshop-hero {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}
.craft-workshop-art {
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: #fff8e9;
  border: 1px solid #eadfc9;
}
.craft-workshop-img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  border-radius: 22px;
}
@media (max-width:700px){
  .craft-workshop-hero{ grid-template-columns:1fr; }
  .craft-workshop-art{ width:100%; height:180px; }
  .craft-workshop-img{ width:160px; height:160px; }
}

/* v2.1.7 首页负债总额调整 */
.debt-adjust-box {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #eadfc9;
  border-radius: 18px;
  background: #fffaf0;
}
.debt-adjust-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}
.debt-adjust-form .input {
  margin: 0;
}
@media (max-width:700px){
  .debt-adjust-form { grid-template-columns: 1fr; }
}

/* v2.1.8 工坊图片显示修正：使用确认过的整张工坊卡片图，不再塞进 82px 小图标 */
.workshop-large-card {
  padding: 14px;
  display: grid;
  grid-template-columns: 176px 1fr;
  gap: 16px;
  align-items: center;
}
.workshop-card-art {
  width: 176px;
  min-height: 250px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fff8e9;
  overflow: hidden;
}
.workshop-card-img {
  width: 100%;
  height: 250px;
  object-fit: contain;
  display: block;
}
.workshop-card-body h2 {
  margin: 0 0 8px;
}
.craft-workshop-art {
  width: 220px;
  height: 320px;
}
.craft-workshop-img {
  width: 100%;
  height: 320px;
  object-fit: contain;
}
@media (max-width:700px){
  .workshop-large-card {
    grid-template-columns: 128px 1fr;
    gap: 12px;
  }
  .workshop-card-art {
    width: 128px;
    min-height: 188px;
  }
  .workshop-card-img {
    height: 188px;
  }
  .craft-workshop-art {
    width: 100%;
    height: 320px;
  }
  .craft-workshop-img {
    height: 320px;
  }
}

/* 订单中心四张定版图 */
.order-img {
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 660;
  object-fit: cover;
  border-radius: 18px;
  background: #fff8e9;
}
.order-thumb-img {
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: 14px;
  background: #fff8e9;
}

/* v2.2.0 订单中心运输界面：鹿爸普通订单，猫妈/甜宝/清宝进入专属运输格子 */
.order-service-card.selected {
  border-color: #9ecb8f;
  box-shadow: 0 10px 24px rgba(65, 122, 56, .16);
}
.transport-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.transport-head h2 {
  margin: 0 0 6px;
}
.transport-scene {
  border-radius: 24px;
  padding: 16px;
  background: linear-gradient(180deg, #e9f7d7, #fff8e9);
  border: 1px solid #dce7c7;
  overflow: hidden;
}
.transport-panel.air .transport-scene {
  background: linear-gradient(180deg, #dff4ff, #fff8e9);
}
.transport-panel.ship .transport-scene {
  background: linear-gradient(180deg, #dff7ff, #e8f9ef);
}
.transport-engine {
  margin-bottom: 14px;
}
.transport-engine-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 18px;
  background: rgba(255,253,246,.96);
  border: 1px solid #eadfc9;
}
.transport-avatar {
  font-size: 36px;
}
.transport-engine-card small {
  color: var(--muted);
}
.transport-slots {
  display: grid;
  gap: 12px;
}
.transport-panel.train .transport-slots {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.transport-panel.air .transport-slots {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.transport-panel.ship .transport-slots {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.transport-slot {
  min-height: 170px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,253,246,.96);
  border: 1px solid #eadfc9;
  box-shadow: 0 6px 14px rgba(80, 65, 40, .08);
}
.transport-slot b {
  display: block;
  margin-bottom: 8px;
}
.transport-slot.transporting {
  background: #f8f1e2;
}
.transport-slot.completed {
  background: #f1fae8;
}
.transport-slot.empty {
  opacity: .72;
}
.slot-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 900;
  margin-bottom: 6px;
}
.transport-slot .item-chip-list {
  margin-bottom: 10px;
}
.transport-slot .btn {
  width: 100%;
  padding: 10px 12px;
}
@media (max-width: 900px) {
  .transport-panel.train .transport-slots,
  .transport-panel.air .transport-slots,
  .transport-panel.ship .transport-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .transport-head {
    align-items: stretch;
    flex-direction: column;
  }
  .transport-panel.train .transport-slots,
  .transport-panel.air .transport-slots,
  .transport-panel.ship .transport-slots {
    grid-template-columns: 1fr;
  }
}

.profile-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.profile-summary > div {
  background: rgba(255, 250, 236, 0.78);
  border: 1px solid rgba(127, 92, 54, 0.12);
  border-radius: 16px;
  padding: 12px;
}
.profile-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}
.profile-summary b {
  font-size: 16px;
}

/* v1.0.16 手机端菜地/花园交互重构：地图只展示状态，操作下沉到地块卡片 */
.mobile-plot-summary { display: none; }
.mobile-plot-summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.mobile-plot-summary-head h2 { margin: 0; }
.plot-card-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.plot-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
}
.plot-card.ready { background: #fff8df; border-color: #f1d48c; }
.plot-card.growing { background: #eef8e9; border-color: #cde8bf; }
.plot-card.locked { background: #f7f2e9; }
.plot-card-icon { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: #fffaf0; }
.plot-card-img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(92,65,22,.18)); }
.plot-card-lock { width: 28px; height: 28px; opacity: .78; filter: none; }
.plot-card-empty { font-size: 28px; font-weight: 900; color: #6ca35f; }
.plot-card-main { min-width: 0; display: grid; gap: 2px; }
.plot-card-main b { font-size: 14px; color: #2f2a22; }
.plot-card-main span { font-size: 13px; font-weight: 900; color: var(--green-dark); }
.plot-card-main small { font-size: 11px; color: #7a6b59; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plot-card-action { border: 0; border-radius: 14px; padding: 9px 10px; background: var(--green); color: #fff; font-weight: 900; white-space: nowrap; }
.plot-card-action:disabled { background: #d8d0c3; color: #8c8171; }
@media (max-width: 760px) {
  .field-scene { border-radius: 22px; }
  .field-title { top: 2.5%; padding: 5px 12px; font-size: 12px; }
  .plot-cell { width: 9.2%; height: 9.8%; border-radius: 11px; }
  .plot-cell.ready::after { content: '收'; position: absolute; right: -2px; top: -5px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #ffb02e; color: #fff; font-size: 10px; font-weight: 900; box-shadow: 0 2px 5px rgba(99,65,20,.2); }
  .plot-cell.locked:not(.locked-blocked)::after { content: '+'; position: absolute; right: -2px; top: -5px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #57a85c; color: #fff; font-size: 14px; font-weight: 900; box-shadow: 0 2px 5px rgba(99,65,20,.2); }
  .plot-crop { width: 92%; height: 92%; }
  .plot-badge, .plot-cost { display: none; }
  .mobile-plot-summary { display: block; }
  .plot-card-list { grid-template-columns: 1fr; }
  .farm-unlock-card { display: none; }
}


.invite-card .invite-code-box {
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 18px;
  background: #fff7e6;
  border: 1px solid rgba(153, 103, 43, .18);
  color: #5a3a1e;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  user-select: text;
}
@media (max-width: 640px) {
  .invite-card .invite-code-box {
    font-size: 20px;
    padding: 12px;
  }
}

/* v1.0.18 开荒重置与手机地块显示 */
.danger-card { border-color: rgba(187,78,61,.22); background: rgba(255,248,244,.92); }
.btn.danger { background: #c95745; color: #fff; }
.btn.danger:hover { filter: brightness(.98); }
.plot-badge { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .plot-badge { display: block; bottom: -8%; max-width: 58px; padding: 1px 5px; font-size: 9px; }
  .plot-cell.ready .plot-badge { background: rgba(255,241,174,.96); color: #835200; }
  .plot-card-icon { width: 56px; height: 56px; }
  .plot-card-img { width: 50px; height: 50px; }
}