/* 《扣出多元宇宙》样式：暗色土壤→虚空主题 */
:root {
  --bg: #14100d;
  --bg2: #1e1814;
  --panel: #262019;
  --card: #2e2519;
  --card-hi: #3a2f1f;
  --text: #e8dcc8;
  --dim: #a89880;
  --accent: #e0af68;
  --good: #9ece6a;
  --bad: #f7768e;
  --info: #7aa2f7;
  --story: #bb9af7;
  --warn: #ff9e64;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: linear-gradient(160deg, #14100d 0%, #1a1410 50%, #12101a 100%);
  color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  font-size: 14px;
  display: flex; flex-direction: column; height: 100vh; overflow: hidden;
}

/* 顶栏 */
#topbar {
  padding: 6px 12px; background: var(--bg2); border-bottom: 1px solid #000;
  display: flex; flex-wrap: wrap; gap: 4px 16px; max-height: 140px; overflow-y: auto;
}
.res-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.res-group-name { color: var(--dim); font-size: 12px; margin-right: 2px; }
.res-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--panel); border-radius: 10px; padding: 2px 8px; font-size: 12px;
  border: 1px solid #00000044; cursor: default;
}
.res-chip b { color: var(--text); }
.res-chip i { color: var(--dim); font-size: 11px; font-style: normal; margin-left: 2px; }
.res-chip .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* 主区 */
main { flex: 1; display: flex; overflow: hidden; }
#center { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.story {
  margin: 10px 14px 0; padding: 10px 14px; min-height: 44px;
  background: linear-gradient(90deg, #2a2135, #1e1814);
  border-left: 3px solid var(--story); border-radius: 6px;
  color: #d8c8f0; font-style: italic; line-height: 1.5;
}
.story-flash { animation: flash 0.8s ease; }
@keyframes flash { 0% { background: #4a3a65; } 100% { background: linear-gradient(90deg, #2a2135, #1e1814); } }

#event-box { margin: 8px 8px 8px; display: none; flex-shrink: 0; border-top: 1px solid #00000055; padding-top: 8px; }
.event-card {
  background: #3a2a1a; border: 1px solid var(--warn); border-radius: 8px; padding: 10px 14px;
  animation: flash 0.6s ease;
}
.event-btn { display: block; width: 100%; margin-top: 6px; text-align: left; }

/* 页签 */
#tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 14px 0; }
.tab {
  background: var(--panel); color: var(--dim); border: 1px solid #00000044;
  padding: 6px 14px; border-radius: 8px 8px 0 0; cursor: pointer; font-size: 14px;
}
.tab.active { background: var(--card-hi); color: var(--accent); border-bottom-color: var(--card-hi); font-weight: bold; }
.tab:hover { color: var(--text); }

/* 面板 */
#panel { flex: 1; overflow-y: auto; padding: 12px 14px; background: #00000022; }
#panel h3 { color: var(--accent); margin: 14px 0 6px; font-size: 15px; }
#panel h4 { color: var(--dim); margin: 10px 0 4px; font-size: 13px; }

.card {
  background: var(--card); border: 1px solid #00000055; border-radius: 8px;
  padding: 8px 12px; margin-bottom: 8px; line-height: 1.6;
}
.card.can { border-color: #6a5a2a; box-shadow: 0 0 6px #e0af6833; }
.card.done { opacity: 0.75; border-color: #3a5a2a; }
.card.locked { opacity: 0.45; }
.card.warn, .warn { color: var(--warn); }
.card .desc { color: var(--dim); font-size: 12.5px; }
.card .lv { color: var(--info); font-size: 12px; margin-left: 6px; }
.maxed { color: var(--good); font-size: 12px; }

button {
  background: #4a3a20; color: var(--text); border: 1px solid #6a5a30;
  border-radius: 6px; padding: 4px 12px; margin: 4px 4px 0 0; cursor: pointer; font-size: 13px;
}
button:hover:not(:disabled) { background: #5a4a28; border-color: var(--accent); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.danger { background: #4a2020; border-color: #8a4040; }

.branch-box { margin: 6px 0; padding: 8px; background: #00000033; border-radius: 6px; }
.branch-btn { display: inline-block; min-width: 180px; vertical-align: top; background: #33283a; border-color: #5a4a6a; }

.slider-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.slider-row input[type=range] { flex: 0 0 140px; accent-color: var(--accent); }

/* 挖掘页 */
.dig-layout { display: flex; gap: 14px; flex-wrap: wrap; }
.toe-area {
  position: relative; flex: 0 0 300px; height: 300px;
  background: radial-gradient(circle at 50% 60%, #3a2a1a 0%, #1e1814 70%);
  border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
.toe-btn { background: none; border: none; cursor: pointer; transition: transform 0.08s; padding: 0; }
.toe-btn:hover { transform: scale(1.05); }
.toe-btn:active { transform: scale(0.93); }
.click-hint { color: var(--dim); font-size: 12px; margin-top: 8px; }
.dig-side { flex: 1; min-width: 280px; }
.stage-card { border-left: 3px solid var(--accent); }

.floater {
  position: absolute; pointer-events: none; color: var(--text);
  font-weight: bold; text-shadow: 0 1px 3px #000; animation: floatUp 1.2s ease-out forwards;
  white-space: nowrap; z-index: 10;
}
@keyframes floatUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-60px); } }

/* 日志 */
#log-wrap {
  flex: 0 0 320px; background: var(--bg2); border-left: 1px solid #000;
  display: flex; flex-direction: column;
}
.log-title { padding: 8px 12px; color: var(--accent); font-weight: bold; border-bottom: 1px solid #00000055; }
#log { flex: 1; overflow-y: auto; padding: 8px 12px; font-size: 12.5px; }
.log-line { padding: 2px 0; border-bottom: 1px dashed #00000033; line-height: 1.5; }
.log-time { color: #666; font-size: 11px; }
.log-line.good { color: var(--good); }
.log-line.bad { color: var(--bad); }
.log-line.warn { color: var(--warn); }
.log-line.story { color: var(--story); font-style: italic; }
.log-line.info { color: var(--dim); }

/* 底栏 */
footer {
  padding: 8px 14px; background: var(--bg2); border-top: 1px solid #000;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.footer-note { color: #666; font-size: 12px; margin-left: auto; }

.affix { font-size: 12.5px; }

/* 解锁通知 toast */
#toast-area { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 100; pointer-events: none; }
.toast {
  background: linear-gradient(90deg, #4a3a20, #2e3a20); border: 1px solid var(--accent);
  color: var(--text); padding: 10px 24px; border-radius: 20px; margin-bottom: 8px;
  box-shadow: 0 4px 20px #000a; animation: toastIn 0.4s ease; font-size: 14px; text-align: center;
}
.toast-out { animation: toastOut 0.7s ease forwards; }
@keyframes toastIn { 0% { opacity: 0; transform: translateY(-20px) scale(0.9); } 100% { opacity: 1; transform: none; } }
@keyframes toastOut { 100% { opacity: 0; transform: translateY(-16px); } }

/* 新页签闪烁 */
.tab-new { animation: tabFlash 1.2s ease infinite; color: var(--accent); }
@keyframes tabFlash { 0%, 100% { background: var(--panel); } 50% { background: #5a4a28; } }

/* 警示页签（贸易团/入侵）红光 */
.tab-alert { animation: tabAlert 0.9s ease infinite; color: #ff8888; font-weight: bold; }
@keyframes tabAlert { 0%, 100% { background: var(--panel); box-shadow: none; } 50% { background: #5a2424; box-shadow: 0 0 8px #ff444488; } }

/* 完成页签（探索归来等）绿光 */
.tab-done { animation: tabDone 1.1s ease infinite; color: #9fe08a; font-weight: bold; }
@keyframes tabDone { 0%, 100% { background: var(--panel); } 50% { background: #2a4a24; } }

/* 大按钮（开石等主操作） */
.big-btn {
  display: inline-block; padding: 14px 34px; font-size: 18px; font-weight: bold;
  background: linear-gradient(135deg, #4a3a65, #2a2135); color: var(--accent);
  border: 1px solid var(--accent); border-radius: 10px; cursor: pointer; margin-top: 12px;
}
.big-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* 存档区（复制/粘贴）：必须独占整行，否则在 flex footer 里被挤成竖条 */
.save-area { flex-basis: 100%; width: 100%; box-sizing: border-box; min-height: 96px; font-size: 12px; margin-top: 8px; }
#save-text { background: var(--panel); color: var(--text); border: 1px solid #00000055; border-radius: 6px; padding: 8px; line-height: 1.5; }

/* 资源悬浮明细框 */
#tooltip {
  position: fixed; z-index: 200; width: 330px; pointer-events: none;
  background: #1e1a14f2; border: 1px solid var(--accent); border-radius: 8px;
  padding: 10px 12px; font-size: 12.5px; box-shadow: 0 6px 24px #000c; line-height: 1.6;
}
#tooltip .desc { color: var(--dim); font-size: 12px; margin: 2px 0 6px; }
.tt-row { display: flex; justify-content: space-between; gap: 8px; }
.tt-sep { color: var(--accent); border-top: 1px solid #ffffff22; margin-top: 6px; padding-top: 4px; font-size: 11px; }

/* 引导任务卡 */
.quest-card { border-left: 3px solid var(--warn); background: #332a18; }
.quest-fill { background: linear-gradient(90deg, #8a5a2a, var(--warn)) !important; }

/* 无刻度进度条 */
.progress { height: 6px; background: #00000066; border-radius: 3px; margin-top: 6px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #6a5a2a, var(--accent)); border-radius: 3px; transition: width 1s; }
select { background: var(--panel); color: var(--text); border: 1px solid #555; border-radius: 4px; padding: 3px 6px; }

@media (max-width: 900px) {
  #log-wrap { display: none; }
}
/* 移动端：底部按钮更紧凑 */
@media (max-width: 640px) {
  footer { gap: 5px; padding: 6px 10px; }
  footer button { font-size: 11px; padding: 3px 8px; margin: 2px 2px 0 0; border-radius: 5px; }
  footer .footer-note { font-size: 10px; }
  .save-area { min-height: 80px; font-size: 11px; }
}