/* ============================================================
   行星页  专属样式
   ============================================================ */

.planet-name-panel { left: 44px; top: 249px; width: 320px; animation: ui-rise 0.7s 0.15s ease both; }
.planet-desc-panel { left: 44px; top: 368px; width: 320px; min-height: 279px; animation: ui-rise 0.7s 0.28s ease both; }

.planet-name-panel .panel-meta { margin-top: 10px; }

/* 资源块 */
.resource-block { margin-top: 18px; }
.tier-planet .resource-title {
  font-size: 15px;
  color: var(--accent-2);
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.tier-planet .resource-list { display: flex; flex-direction: column; gap: 10px; }

.resource-item {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 矿物图标（素材来自「矿物/」目录） */
.resource-item .r-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: rgba(120, 200, 255, 0.08);
  border: 1px solid var(--line);
  padding: 3px;
  box-sizing: border-box;
}
.resource-item .r-icon-empty { background: rgba(120, 200, 255, 0.04); }
.resource-item .r-body { flex: 1 1 auto; min-width: 0; }
.resource-item .r-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  color: var(--text);
}
.resource-item .r-amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}
.resource-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(120, 200, 255, 0.12);
  overflow: hidden;
}
.resource-bar > i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 8px rgba(56, 214, 255, 0.6);
  /* 储量条载入时自左向右填充（width 由 JS 设定，scaleX 负责动效） */
  transform-origin: left center;
  animation: bar-fill 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes bar-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 中央星球模型（设计稿 819,350 315x297，中心约 977,499） */
.planet-stage {
  position: absolute;
  left: 977px;
  top: 499px;
  width: 360px;
  height: 360px;
  margin: -180px 0 0 -180px;   /* 以 (977,499) 为中心（避免 transform 被 fade-in 动画覆盖） */
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 40px rgba(56, 214, 255, 0.35));
}
/* 行星周身呼吸光晕（叠在模型之后） */
.planet-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(56, 214, 255, 0.18), transparent 68%);
  animation: planet-aura 6s ease-in-out infinite;
}
@keyframes planet-aura {
  0%, 100% { opacity: 0.5; transform: scale(0.95); }
  50%      { opacity: 0.9; transform: scale(1.06); }
}
/* 切换星球时的入场：缩放+淡入（由 planet.js 重新触发） */
.planet-stage.swapping { animation: planet-swap 0.5s ease both; }
@keyframes planet-swap { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
.planet-stage img {
  max-width: 100%;
  max-height: 100%;
  animation: planet-float 6s ease-in-out infinite, planet-rotate 40s linear infinite;
}
@keyframes planet-float {
  0%, 100% { transform: translateY(-10px); }
  50%      { transform: translateY(10px); }
}
/* 轻微自转用伪 3D 错觉（缩放横轴） */
@keyframes planet-rotate {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.15); }
  100% { filter: brightness(1); }
}

/* 切换箭头（设计稿：左 585,441 / 右 1283,440） */
.arrow {
  position: absolute;
  top: 488px;
  width: 74px;
  height: 92px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: var(--text-dim);
  background: var(--bg-panel);
  border: 0;                       /* 去整圈描边，改用四角角标（见 common.css） */
  border-radius: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: color 0.25s ease, box-shadow 0.25s ease;
  animation: ui-fade 0.6s 0.5s ease both;
}
.arrow:hover,
.arrow:focus-visible {
  color: var(--accent);
  box-shadow: var(--glow);
}
.arrow:hover::before,
.arrow:focus-visible::before { --bc: var(--accent); }   /* 悬停/聚焦：角标提亮为主色 */
.arrow:focus-visible {
  outline: none;
  box-shadow: var(--glow), 0 0 0 3px rgba(56, 214, 255, 0.35);
}
.arrow:active { transform: translateY(-50%) scale(0.95); }
.arrow-left  { left: 585px; }
.arrow-right { left: 1283px; }