/* =========================================================
 *  imgload.css —— 单图加载状态（骨架 / 失败 / 重试）
 *
 *  遮罩是图片的兄弟节点，绝对定位铺满父容器，
 *  所以容器本身必须有尺寸（站点里的图片容器都有）。
 *  父元素若原来是 static，JS 会给它加 .mload-host。
 * ========================================================= */

.mload-host { position: relative; }

.mload {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  /* 默认不吃点击：卡片该能点开灯箱就点开 */
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}

.mload.is-loading,
.mload.is-bad { display: block; }
.mload.is-done { display: none; }

/* ---------------- 加载中：骨架微光 ---------------- */
.mload-skel {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(255, 255, 255, 0.025) 28%,
      rgba(200, 220, 255, 0.085) 48%,
      rgba(255, 255, 255, 0.025) 68%);
  background-size: 240% 100%;
  animation: mloadShimmer 1.7s linear infinite;
}
@keyframes mloadShimmer {
  from { background-position: 130% 0; }
  to   { background-position: -130% 0; }
}

/* ---------------- 失败 ---------------- */
.mload-bad {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  text-align: center;
  /* 加载失败时图片是空的（没有像素可显示），所以背景不能纯黑 ——
     那样卡片像个洞。给一层偏蓝的星云底 + 极淡的斜纹，
     看起来是"这块还没来"，而不是"这块坏了"。 */
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.018) 0 2px,
      transparent 2px 9px),
    radial-gradient(120% 90% at 50% 38%,
      rgba(46, 62, 108, 0.55) 0%,
      rgba(24, 32, 60, 0.62) 45%,
      rgba(7, 10, 19, 0.88) 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mload.is-bad .mload-bad { display: flex; }
.mload.is-bad .mload-skel { display: none; }

.mload-ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: rgba(255, 205, 160, 0.85);
  flex: none;
}
.mload-ico svg { width: 100%; height: 100%; }

.mload-txt {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-3, #8c96b4);
  letter-spacing: 0.02em;
}

.mload-retry {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 99px;
  border: 1px solid rgba(255, 215, 154, 0.38);
  background: rgba(255, 215, 154, 0.1);
  color: var(--gold, #ffd79a);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.22s, background 0.22s, border-color 0.22s;
  -webkit-tap-highlight-color: transparent;
}
.mload-retry[hidden] { display: none; }
.mload-retry:hover,
.mload-retry:focus-visible {
  color: #241a08;
  background: linear-gradient(135deg, #ffe9bd, #ffc97f);
  border-color: transparent;
  outline: none;
}

/* ---------------- 小容器：只放图标 ---------------- */
/* 星轨上的圆形小缩略图、下载页 56px 的小图 —— 塞不下字，
   改成"点一下整块就重试"，位置够大点得中。 */
.mload.is-tiny .mload-bad {
  gap: 0;
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
  border-radius: inherit;
}
.mload.is-tiny .mload-txt,
.mload.is-tiny .mload-retry { display: none; }
.mload.is-tiny .mload-ico {
  width: 46%;
  max-width: 22px;
  height: auto;
  aspect-ratio: 1;
  opacity: 0.9;
}

/* 失败时给图片本体一点提示：压暗、轻微去色 */
/* 压暗到还能看出是张照片，但不抢文字和按钮 */
img.is-mfailed {
  filter: saturate(0.3) brightness(0.42) !important;
}

/* ---------------- 安静模式 / 减少动效 ---------------- */
html.calm .mload-skel,
html.no-anim .mload-skel { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .mload-skel { animation: none; }
}

/* ---------------- 灯箱里失败：给大一点的按钮 ---------------- */
.lb-media .mload-bad { gap: 12px; }
.lb-media .mload-ico { width: 34px; height: 34px; }
.lb-media .mload-txt { font-size: 13px; }
.lb-media .mload-retry { min-height: 34px; padding: 6px 18px; font-size: 12.5px; }

/* 首页圆形头像：字会被裁，收一点 */
.core-inner .mload-bad,
.sky-star-thumb .mload-bad { padding: 0; }