/* =====================================================================
   stage.css —— 挖掘舞台（模块 2/5）
   舞台只管“外面”：金线、节点、刻度、雾、挖掘钮、定位按钮。
   顶栏只留深度/金币/猫三个数，其余收进状态抽屉。
   ===================================================================== */
/* 全屏舞台 */
#viewport {
  width: 100vw; height: 100vh; position: relative; overflow: hidden;
  background: radial-gradient(circle at 50% 12%, #101622 0%, #05070a 70%);
  touch-action: none;
}
#viewport.shake { animation: shake .45s ease; }
@keyframes shake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-4px,2px); } 40% { transform: translate(4px,-2px); } 60% { transform: translate(-3px,-1px); } 80% { transform: translate(3px,1px); } }
#world { position: absolute; width: 100%; left: 0; top: 0; transform-origin: 50% 0; transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1); }
#world.dragging { transition: none; }

/* SVG 金线层 */
svg.shaft-svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.spine-inactive { stroke: var(--line-unexplored); stroke-width: 1.5; stroke-dasharray: 4 6; }
.spine-active { stroke: var(--gold); stroke-width: 2; filter: drop-shadow(0 0 8px var(--gold-glow)); }
.branch-line { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 2 4; opacity: 0.6; }

/* 大本营 */
.camp-citadel { position: absolute; left: 50%; top: 90px; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; z-index: 40; }
.citadel-disc {
  width: 88px; height: 88px; border-radius: 50%; background: #0b0f17; cursor: pointer;
  border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; box-shadow: 0 0 25px var(--gold-glow), inset 0 0 15px rgba(223,186,115,0.2);
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: tree-breathe 4s infinite ease-in-out; transform-origin: 50% 90%;
}
/* 黄金树呼吸：挤压拉伸（Squash & Stretch），零画帧成本，纯几何缩放。
   资产插槽：里面的 SVG 只是占位，后台换一张透明 WebP/PNG 即可（见 assets/README.md）。 */
@keyframes tree-breathe {
  0%, 100% { transform: scale(1, 1); filter: drop-shadow(0 0 15px rgba(223,186,115,0.3)); }
  50% { transform: scale(0.96, 1.04) translateY(-3px); filter: drop-shadow(0 0 30px rgba(223,186,115,0.6)); }
}
.citadel-disc:active { transform: scale(0.92); box-shadow: 0 0 35px var(--gold); }
.citadel-name { margin-top: 8px; font-size: 0.75rem; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; font-weight: 500; text-shadow: 0 2px 4px #000; }

/* 先锋头像（线尾探针） */
.probe-head { position: absolute; left: 50%; transform: translate(-50%, -50%); z-index: 40; }
.probe-halo {
  width: 46px; height: 46px; border-radius: 50%; background: #0c121c; cursor: pointer;
  border: 2px solid #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 20px rgba(255,255,255,0.4), 0 0 30px var(--gold-glow);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: pulse-ring 2.5s infinite; overflow: hidden;
}
.probe-halo canvas { width: 40px; height: 40px; image-rendering: pixelated; image-rendering: crisp-edges; }
.probe-halo:active { transform: scale(0.92); }
@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 15px rgba(255,255,255,0.3), 0 0 25px var(--gold-glow); }
  50% { box-shadow: 0 0 25px rgba(255,255,255,0.6), 0 0 45px var(--gold); }
}
/* 卫星放射菜单 */
.radial-anchor { position: absolute; top: 0; left: 0; width: 0; height: 0; pointer-events: none; }
.radial-item {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(14, 20, 30, 0.92); backdrop-filter: blur(12px);
  border: 1px solid var(--gold); display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: 1.1rem;
  cursor: pointer; opacity: 0; pointer-events: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translate(-50%, -50%) scale(0.3);
  box-shadow: 0 8px 25px rgba(0,0,0,0.8);
}
.radial-item span.label {
  position: absolute; bottom: -18px; font-size: 0.65rem; color: var(--text);
  white-space: nowrap; font-weight: 400; text-shadow: 0 2px 4px #000;
}
.menu-open .radial-item { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.menu-open .radial-item:nth-child(1) { transition-delay: 0.02s; }
.menu-open .radial-item:nth-child(2) { transition-delay: 0.06s; }
.menu-open .radial-item:nth-child(3) { transition-delay: 0.10s; }
.menu-open .radial-item:nth-child(4) { transition-delay: 0.14s; }
.menu-open .radial-item:nth-child(5) { transition-delay: 0.18s; }
.radial-item:active { background: var(--gold); color: #000; transform: translate(-50%, -50%) scale(1.15); }

/* 节点 */
.shaft-node { position: absolute; transform: translate(-50%, -50%); cursor: pointer; z-index: 30; }
.node-disc {
  width: 36px; height: 36px; border-radius: 50%; background: #0c1017;
  border: 1.5px solid var(--gold); display: flex; align-items: center;
  justify-content: center; font-size: 1rem; transition: 0.2s;
  box-shadow: 0 0 12px rgba(0,0,0,0.8);
}
.shaft-node:active .node-disc { transform: scale(1.15); border-color: #fff; }
.shaft-node.gate .node-disc, .shaft-node.outpost .node-disc { box-shadow: 0 0 16px var(--gold-glow); border-width: 2px; }
.shaft-node.sel .node-disc { border-color: #fff; }
.node-label {
  position: absolute; left: 44px; top: 50%; transform: translateY(-50%);
  font-size: 0.75rem; color: var(--text); white-space: nowrap; letter-spacing: 0.5px;
  text-shadow: 0 2px 4px #000;
}
.node-label.left { left: auto; right: 44px; text-align: right; }

/* 神秘入口：门形节点（地下水脉），不是圆盘 */
.shaft-node.door .node-disc {
  border-radius: 10px 10px 3px 3px; width: 38px; height: 48px; line-height: 48px;
  background: linear-gradient(180deg, #2a2113, #14100a); border: 2px solid var(--gold);
  box-shadow: 0 0 18px rgba(223,186,115,0.35), inset 0 0 12px rgba(0,0,0,0.8);
}
/* 墓碑小标记 */
.grave-marker { position: absolute; transform: translate(-50%, -50%); cursor: pointer; z-index: 30; }
.grave-marker .grow { display: flex; align-items: center; gap: 4px; }
.grave-marker .gic { font-size: 1rem; filter: grayscale(0.4); opacity: 0.85; }
.grave-marker .gdp { font-size: 0.65rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.grave-exp {
  position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  width: 170px; font-size: 0.75rem; line-height: 1.5; color: var(--text);
  background: var(--glass-card); border: 1px solid var(--glass-border);
  border-radius: 8px; padding: 8px 10px; backdrop-filter: blur(8px);
}
.grave-exp button { margin-top: 6px; }

/* 左侧固定刻度尺（不跟随进度） */
#ruler { position: fixed; top: 0; left: 16px; width: 40px; height: 100%; z-index: 50; pointer-events: none; opacity: 0.6; }
.ruler-tick { position: absolute; left: 0; display: flex; align-items: center; gap: 6px; font-size: 0.65rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ruler-line { width: 8px; height: 1px; background: var(--text-dim); }
.ruler-line.major { width: 14px; background: var(--gold); }

/* 底部雾 veil（纯图形，无字）：两层雾缓慢漂移；正式版可换 GIF/WebP 资产 */
.fog-veil {
  position: fixed; bottom: 0; left: 0; width: 100%; height: 38vh;
  background: linear-gradient(to bottom, transparent 0%, rgba(5,7,10,0.85) 50%, #05070a 100%);
  pointer-events: none; z-index: 20; overflow: hidden;
}
.fog-veil::before, .fog-veil::after {
  content: ""; position: absolute; left: -20%; width: 140%; height: 100%;
  background: radial-gradient(ellipse 40% 60% at 30% 70%, rgba(120,130,160,0.12), transparent 70%);
  animation: fog-drift 26s ease-in-out infinite alternate; pointer-events: none;
}
.fog-veil::after { animation-duration: 34s; animation-direction: alternate-reverse;
  background: radial-gradient(ellipse 35% 55% at 70% 80%, rgba(120,130,160,0.10), transparent 70%); }
@keyframes fog-drift { from { transform: translateX(-4%); } to { transform: translateX(4%); } }

/* 手动挖掘：底部中央圆形金钮 + 外围精力环（黑魂式：点一下扣一格，不点自动恢复） */
#dig-wrap {
  position: fixed; bottom: 56px; left: 50%; transform: translateX(-50%); z-index: 60;
  width: 76px; height: 76px; display: none;
}
#dig-ring { position: absolute; left: 0; top: 0; width: 76px; height: 76px; transform: rotate(-90deg); pointer-events: none; }
#dig-ring .ring-bg { fill: none; stroke: rgba(223,186,115,0.18); stroke-width: 4; }
#dig-ring .ring-fg { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 213.6; stroke-dashoffset: 0; }
#btn-dig-main {
  position: absolute; left: 10px; top: 10px; width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--gold); background: linear-gradient(180deg, #e8c887, #c79a4b); color: #1a1206;
  font-size: 1.5rem; cursor: pointer; padding: 0;
  box-shadow: 0 0 30px var(--gold-glow), 0 4px 16px rgba(0,0,0,0.6);
  animation: dig-breathe 2.5s ease-in-out infinite;
}
#btn-dig-main:active { transform: scale(0.92); animation: none; }
#btn-dig-main.spent { filter: grayscale(0.7) brightness(0.6); }
@keyframes dig-breathe {
  0%, 100% { box-shadow: 0 0 22px rgba(223,186,115,0.35), 0 4px 16px rgba(0,0,0,0.6); }
  50% { box-shadow: 0 0 38px rgba(223,186,115,0.65), 0 4px 16px rgba(0,0,0,0.6); }
}
.dig-float {
  position: absolute; left: 50%; top: -8px; transform: translateX(-50%);
  color: var(--gold); font-size: 0.85rem; font-weight: 600; pointer-events: none;
  animation: floatUp 0.8s ease-out forwards; text-shadow: 0 0 8px var(--gold-glow);
}
@keyframes floatUp { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -28px); } }

/* 滑动时弹出的定位按钮（电报式）：回到起点 / 回到最新挖掘点，自由相机时出现 */
#scroll-nav {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 100;
  display: none; gap: 8px;
}
#scroll-nav button {
  padding: 6px 14px; border-radius: 20px; cursor: pointer;
  background: var(--glass-card); border: 1px solid var(--gold); color: var(--gold);
  font-size: 0.75rem; letter-spacing: 1px; backdrop-filter: blur(8px);
}
#scroll-nav button:active { background: var(--gold-dim); }

/* 探测涟漪：从头像扩散的金环 */
.ripple {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border: 2px solid var(--gold); border-radius: 50%; opacity: 0; pointer-events: none; z-index: 5;
}
.ripple.go { animation: ripple 1.2s ease-out; }
@keyframes ripple { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(4); opacity: 0; } }

/* 刻度上的探测标记（危险信号等） */
.rmark { position: absolute; left: 26px; transform: translateY(-50%); font-size: 0.7rem; pointer-events: none; }

/* 神秘入口：门形节点（地下水脉），不是圆盘 */
.shaft-node.door .node-disc {
  border-radius: 10px 10px 3px 3px; width: 38px; height: 48px; line-height: 48px;
  background: linear-gradient(180deg, #2a2113, #14100a); border: 2px solid var(--gold);
  box-shadow: 0 0 18px rgba(223,186,115,0.35), inset 0 0 12px rgba(0,0,0,0.8);
}
/* 残卷 glitch：读到恐怖残卷时文字偶尔抽风（恐怖片特效） */
.glitch { animation: glitch 0.7s steps(2) 2; }
@keyframes glitch {
  0%, 100% { transform: translateX(0); text-shadow: none; opacity: 1; }
  25% { transform: translateX(-2px); text-shadow: 2px 0 rgba(255,0,60,0.7), -2px 0 rgba(0,255,255,0.7); opacity: 0.85; }
  50% { transform: translateX(2px); text-shadow: -2px 0 rgba(255,0,60,0.7), 2px 0 rgba(0,255,255,0.7); opacity: 0.6; }
  75% { transform: translateX(-1px); text-shadow: none; opacity: 0.9; }
}

/* 首抽 CTA */
#start-cta { position: fixed; left: 50%; top: 34%; transform: translateX(-50%); z-index: 60; display: none; }
#start-cta button {
  background: var(--glass-card); border: 1px solid var(--gold); color: var(--gold);
  border-radius: 24px; padding: 12px 20px; font-size: 0.9rem; letter-spacing: 1px;
  backdrop-filter: blur(8px); box-shadow: 0 0 25px var(--gold-glow); cursor: pointer;
}
#start-cta button:active { background: var(--gold); color: #000; }


/* 顶栏（v1.0 收纳）：只留深度/金币/猫三个数 + 卡池/背包/设置三个入口。
   点顶栏空白处开状态抽屉（作物、声望、日志、探测提示都在里面，外面不堆）。 */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: linear-gradient(to bottom, rgba(5,7,10,0.9), rgba(5,7,10,0));
  pointer-events: none;
}
#topbar > * { pointer-events: auto; }
#topbar-depth { font-size: 1.05rem; font-weight: 200; color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: 0.5px; text-shadow: 0 0 12px rgba(223,186,115,0.35); }
#topbar-gold { font-size: 0.8rem; color: var(--gold); font-variant-numeric: tabular-nums; }
#topbar-cat { font-size: 0.9rem; }
#topbar .spacer { flex: 1; }
#topbar button {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: var(--glass-card); border: 1px solid var(--glass-border); color: var(--gold);
  font-size: 1rem; padding: 0; backdrop-filter: blur(8px);
}
#topbar button:active { background: var(--gold-dim); }