/* mcres/static/css/components/achievement-toast.css
   MC 风格「进度达成」提示（右上角）。

   布局全部按模板 https://img.mcresource.cn/ui/achievement/template.png 的像素坐标来。
   模板是 320×64（已实测下载核对），**按 1:1 原尺寸显示，不做缩放**：
       图标  (16,16) - (47,47)   32×32
       标题  左上角 (60,13)      16×16 单字
       描述  左上角 (60,35)      16×16 单字
   标题颜色随稀有度由 JS 内联写入，描述恒为白色。

   坐标以「模板左上角第一个像素 = (1,1)」为基准；CSS 的 left/top 从 0 起算，
   所以契约里的 16 → CSS 15、60 → CSS 59、13 → CSS 12、35 → CSS 34。
*/

/* ===== 字体 ===== */
/* mcfont.otf 5.3MB，只在需要时下载：主站其他页面不引用这个 CSS 就不会拉。
   只声明 normal，不写 400/700，避免浏览器把标题加粗后再走一遍合成。 */
@font-face {
  font-family: "MC Font";
  src: url("/static/fonts/mcfont.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  /* 别用 font-display: block —— 5.3MB 的字体下载期间文字会整段不可见（FOIT），
     本地实测会有明显的「先空着再蹦出来」。swap 是最坏情况先用系统字体顶上。 */
  font-display: swap;
}

/* ===== 右上角「进度达成」小胶囊按钮 =====
   只在有待提示项时由模板渲染出来（没有就整块不存在）。
   位置：导航栏右侧下方，和浮条出现的区域对齐，点击后浮条从头顶滑出。
   为什么做成按钮而不是自动弹：浏览器禁止无手势播放音频（见 JS 注释）。 */
.ach-pending-btn {
  position: fixed;
  top: 72px;
  right: 12px;
  z-index: 99999;

  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;

  border: 1px solid rgba(85, 216, 139, 0.45);
  border-radius: 999px;
  background: rgba(18, 24, 30, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);

  color: #e8ecf0;
  font-family: "MC Font", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;

  /* 出现动画：轻微上浮 + 淡入，不抢戏 */
  animation: ach-btn-in 0.25s ease both;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.12s;
}

@keyframes ach-btn-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ach-pending-btn:hover {
  background: rgba(26, 36, 44, 0.98);
  border-color: rgba(85, 216, 139, 0.8);
}

.ach-pending-btn:active {
  transform: scale(0.97);
}

.ach-pending-btn i {
  font-size: 12px;
  color: #55d88b;
  flex-shrink: 0;
}

.ach-pending-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #55d88b;
  color: #0b0f14;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  flex-shrink: 0;
}

/* 点完（没有剩余）时的收起动画 */
.ach-pending-btn-hide {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

/* 移动端：导航栏 56/52px，按钮往上贴一点，别被压住 */
@media (max-width: 600px) {
  .ach-pending-btn {
    top: 60px;
    right: 8px;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
  }
}

/* ===== 容器：右上角竖排 ===== */
/* position:fixed，紧贴右上角。顶部的 76px（= 导航栏 64 + 12）
   由 JS 按 TOP_GAP 写进内联 top，媒体查询只兜底。 */
.mc-ach-layer {
  position: fixed;
  top: 76px;
  right: 12px;
  z-index: 99998;
  pointer-events: none;
}

/* ===== 单条 ===== */
.mc-ach-slot {
  position: absolute;
  box-sizing: border-box;
  /* 模板底图：原始 1:1，不拉伸 */
  background-image: url("https://img.mcresource.cn/ui/achievement/template.png");
  background-size: 320px 64px;
  background-repeat: no-repeat;
  background-position: 0 0;

  /* 入场前：藏在右侧屏幕外，位移量 = 自身宽度 + 右侧留白 */
  transform: translateX(calc(100% + 12px));
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.25, 0.8, 0.35, 1),
    opacity 0.5s ease;
  will-change: transform;

  /* 像素锐利：模板是 320x64 的原尺寸位图，按 1:1 铺，不做任何缩放。
     ⚠️ 不要加 image-rendering: pixelated —— 在 2x 屏上把位图放大 2 倍时，
     它会让圆角和半透明边缘变成锯齿块（实测过，边缘明显发毛）。 */
  -webkit-font-smoothing: none;
}

/* 进场：滑到位置 + 淡入 */
.mc-ach-slot.in {
  transform: translateX(0);
  opacity: 1;
}

/* 出场：滑回右侧 + 淡出 */
.mc-ach-slot.out {
  transform: translateX(calc(100% + 12px));
  opacity: 0;
}

/* ===== 图标：(16,16)-(47,47) ===== */
.mc-ach-icon {
  position: absolute;
  left: 15px; /* 16 - 1 */
  top: 15px; /* 16 - 1 */
  width: 32px;
  height: 32px;
  object-fit: contain;
  /* icon_url 是后端给的图（彩图 / 小尺寸像素都可能是），
     这里保持平滑缩放，避免 32x32 里塞一个非整数尺寸的图时出现锯齿碎块 */
  /* FontAwesome 兜底时的字号：32 见方里居中放一个图标 */
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  color: #ffffff;
}

/* ===== 文字公共 ===== */
.mc-ach-title,
.mc-ach-desc {
  position: absolute;
  font-family: "MC Font", "PingFang SC", "Microsoft YaHei", monospace;
  font-size: 16px;
  line-height: 16px;
  height: 16px;
  /* 单字 16×16：字宽由字体本身决定，这里不额外撑开字符间距，
     文字块从 (60,x) 的左边缘起排。 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 像素字不受 @font-face 缩放影响的关键：不做 subpixel 排版 */
  font-kerning: none;
  font-synthesis: none;
  text-rendering: geometricPrecision;
  letter-spacing: 0;
  /* 像素字的阴影是 MC 里的「描边感」来源，给一点点 */
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}

/* ===== 标题：(60,13) ===== */
.mc-ach-title {
  left: 59px; /* 60 - 1 */
  top: 12px; /* 13 - 1 */
  /* 颜色由 JS 按稀有度内联写入（common #FFFFFF / rare #FFFF55 /
     epic #55FFFF / legendary #FF55FF），这里不写死 */
  right: 8px;
}

/* ===== 描述：(60,35) ===== */
.mc-ach-desc {
  left: 59px; /* 60 - 1 */
  top: 34px; /* 35 - 1 */
  right: 8px;
  color: #ffffff;
}

/* 移动端 ≤600px 时导航栏更矮（56/52），76px 的起点偏高；
   这里只把整层往下挪一点，尺寸仍保持 320×64 原样。 */
@media (max-width: 600px) {
  .mc-ach-layer {
    top: 64px;
    right: 8px;
  }
}