/* ═══════════════════════════════════════════ */
/*  知几 · 小日晷加载动画 — 解读等待时浮现                 */
/* ═══════════════════════════════════════════ */

/* 覆盖层 */
#loading-overlay{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  opacity:0;transition:opacity 0.35s ease;
}
#loading-overlay.active{opacity:1}

/* 无卡片 — 纯日晷 + 文字 */
.loading-card{
  display:flex;flex-direction:column;align-items:center;gap:0.9rem;
}

/* ── 小日晷 — 4层同心环，LIUYAO暖玉色系 ── */
.mini-sundial{
  position:relative;width:100px;height:100px;flex-shrink:0;
}
.ms-ring{
  position:absolute;top:50%;left:50%;border-radius:50%;
  border-style:solid;transform-origin:center center;
  border-color:rgba(166,130,69,0.22);
}
.ms-ring.outer{
  width:96px;height:96px;margin:-48px 0 0 -48px;
  border-width:1.5px;
}
.ms-ring.mid{
  width:72px;height:72px;margin:-36px 0 0 -36px;
  border-width:1.2px;
  border-color:rgba(166,130,69,0.18);
}
.ms-ring.inner{
  width:48px;height:48px;margin:-24px 0 0 -24px;
  border-width:1px;
  border-color:rgba(139,115,85,0.16);
}
.ms-ring.core{
  width:8px;height:8px;margin:-4px 0 0 -4px;
  background:radial-gradient(circle,rgba(166,130,69,0.45),rgba(139,115,85,0.08));
  border:none;border-radius:50%;
  box-shadow:0 0 12px rgba(166,130,69,0.18);
}
/* 十二地支 */
.ms-dizhi{position:absolute;top:50%;left:50%;width:96px;height:96px;margin:-48px 0 0 -48px;pointer-events:none}
.ms-dz{position:absolute;left:50%;font-family:"Noto Serif SC",serif;font-size:0.6rem;font-weight:600;color:rgba(122,92,53,0.38);transform-origin:0 48px}

/* 状态文字 */
#loading-status{
  font-family:"Noto Serif SC","SimSun",serif;
  font-size:0.88rem;font-weight:400;
  color:rgba(105,105,105,0.6);
  letter-spacing:0.14em;text-align:center;
  min-width:12em;min-height:1.4em;
  text-shadow:0 0 18px rgba(212,175,55,0.10);
  transition:opacity 0.45s ease;
}
#loading-status.fading{opacity:0.15}

@media(max-width:768px){
  .loading-card{padding:1.3rem 1.5rem;gap:0.7rem}
  #loading-status{font-size:0.78rem}
  .mini-sundial{width:80px;height:80px}
  .ms-ring.outer{width:76px;height:76px;margin:-38px 0 0 -38px}
  .ms-ring.mid{width:56px;height:56px;margin:-28px 0 0 -28px}
  .ms-ring.inner{width:38px;height:38px;margin:-19px 0 0 -19px}
}