/* 🌍 与拾光一起重建地球 · 生态沙盘手账（暖羊皮纸 + 炭墨 + 翠绿 + 暖金） */
.earth-sandbox-overlay {
  --es-paper: #fdfbf7;
  --es-ink: #2c221e;
  --es-green: #2e6f40;
  --es-gold: #b8863b;
  --es-line: rgba(44, 34, 30, 0.16);
  position: fixed; inset: 0; z-index: 9500;
  display: none; align-items: center; justify-content: center;
  background: rgba(44, 34, 30, 0.55);
  font-family: "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  color: var(--es-ink);
}
.earth-sandbox-overlay.is-open { display: flex; animation: es-fade 0.3s ease; }
@keyframes es-fade { from { opacity: 0; } to { opacity: 1; } }

.earth-sandbox-book {
  width: min(960px, 94vw); max-height: 92vh; overflow-y: auto;
  background: var(--es-paper);
  border: 1px solid var(--es-gold); border-radius: 6px;
  box-shadow: 0 0 0 5px var(--es-paper), 0 0 0 6px var(--es-line), 0 20px 60px rgba(0,0,0,.35);
  padding: 26px 30px 22px; position: relative;
}
.earth-sandbox-close {
  position: absolute; top: 10px; right: 14px; width: 32px; height: 32px;
  border: 1px solid var(--es-line); border-radius: 50%; background: transparent;
  color: var(--es-ink); font: 16px/1 inherit; cursor: pointer;
}
.earth-sandbox-close:hover, .earth-sandbox-close:focus-visible { border-color: var(--es-gold); color: var(--es-gold); outline: none; }

.earth-sandbox-title { margin: 0; text-align: center; font-size: 20px; letter-spacing: 3px; font-weight: 700; }
.earth-sandbox-sub { margin: 6px 0 14px; text-align: center; font-size: 13px; opacity: .72; }

.earth-sandbox-stats { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 14px; }
.earth-stat {
  min-width: 120px; padding: 7px 14px; text-align: center; font-size: 13px;
  border: 1px solid var(--es-line); border-radius: 4px; background: rgba(184,134,59,.06);
}
.earth-stat b { display: block; font-size: 17px; color: var(--es-green); }
.earth-green-bar { height: 6px; margin: 0 auto 18px; max-width: 520px; border-radius: 3px; background: var(--es-line); overflow: hidden; }
.earth-green-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--es-green), var(--es-gold)); transition: width .6s ease; }

.earth-chapter { margin: 0 0 16px; }
.earth-chapter-title {
  margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--es-green);
  border-bottom: 1px dashed var(--es-gold); padding-bottom: 4px;
}
.earth-chapter-desc { margin: 0 0 8px; font-size: 12px; opacity: .7; }
.earth-landmark-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.landmark-card {
  position: relative; padding: 8px; text-align: center; cursor: pointer;
  background: var(--es-paper); border: 1px solid var(--es-line); border-radius: 4px;
  font: inherit; color: inherit; transition: transform .2s, border-color .2s, box-shadow .2s;
}
.landmark-card:hover, .landmark-card:focus-visible { transform: translateY(-2px); border-color: var(--es-gold); outline: none; }
.landmark-card .lm-img {
  width: 100%; aspect-ratio: 4/3; object-fit: contain; display: block;
  filter: grayscale(1) brightness(0.15) opacity(.55); transition: filter .6s ease;
}
.landmark-card .lm-name { margin-top: 6px; font-size: 13px; font-weight: 700; }
.landmark-card .lm-state { margin-top: 2px; font-size: 11px; opacity: .65; }
.landmark-card.is-locked .lm-name { opacity: .55; }
.landmark-card.is-unlocked { border-color: var(--es-gold); background: linear-gradient(180deg, #fffdf8, rgba(46,111,64,.07)); }
.landmark-card.is-unlocked .lm-img { filter: none; }
.landmark-card.is-unlocked .lm-state { color: var(--es-green); opacity: 1; }
.landmark-card.is-bloom { animation: es-bloom 1.4s ease; }
@keyframes es-bloom {
  0% { box-shadow: 0 0 0 0 rgba(184,134,59,.7); }
  100% { box-shadow: 0 0 0 22px rgba(184,134,59,0); }
}

.earth-story-panel {
  display: none; margin: 8px 0 14px; padding: 12px 16px; font-size: 13.5px; line-height: 1.8;
  border-left: 3px solid var(--es-gold); background: rgba(184,134,59,.07);
}
.earth-story-panel.is-open { display: block; }
.earth-story-panel h4 { margin: 0 0 4px; font-size: 14px; color: var(--es-green); }

.earth-sandbox-actions { display: flex; justify-content: center; margin-top: 12px; }
.earth-dungeon-btn {
  padding: 11px 26px; font: 700 14px inherit; font-family: inherit; letter-spacing: 1px; cursor: pointer;
  color: var(--es-paper); background: var(--es-green); border: 1px solid var(--es-gold); border-radius: 4px;
}
.earth-dungeon-btn:hover, .earth-dungeon-btn:focus-visible { background: #255a34; outline: 2px solid var(--es-gold); outline-offset: 2px; }

.earth-rebuild-toast {
  position: fixed; top: -120px; left: 50%; transform: translateX(-50%); z-index: 9600;
  min-width: 300px; max-width: 90vw; padding: 12px 26px; text-align: center;
  background: var(--es-paper, #fdfbf7); color: #2c221e;
  border: 1px solid #b8863b; border-radius: 4px; box-shadow: 0 8px 28px rgba(44,34,30,.3);
  font-family: "Noto Serif SC", "Songti SC", Georgia, serif; font-size: 14px;
  transition: top .55s cubic-bezier(.2,.9,.3,1.2);
}
.earth-rebuild-toast.is-show { top: 18px; }
.earth-rebuild-toast b { display: block; color: #2e6f40; font-size: 15px; margin-bottom: 2px; }

@media (max-width: 640px) {
  .earth-landmark-grid { grid-template-columns: repeat(2, 1fr); }
  .earth-sandbox-book { padding: 22px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .earth-sandbox-overlay.is-open, .landmark-card.is-bloom { animation: none; }
  .earth-rebuild-toast, .earth-green-bar i { transition: none; }
}