/*!
 * CAT API 多人联机模块样式
 * ---------------------------------------------------------------------------
 * 设计原则：
 *  - 不打扰主内容（z-index 高但视觉轻）
 *  - 远程光标明显但不抢戏（半透明 + 小尺寸）
 *  - 浮窗右上角，与站点现有右上角元素错开
 *  - prefers-reduced-motion 适配
 * ========================================================================= */

/* =========================================================================
 * §HUD 在线计数浮窗（右上角）
 * ======================================================================= */
.mp-hud {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 2147483646;  /* 接近最大值，但低于 modal */
  pointer-events: none;
  font: 12px/1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  color: rgba(60, 60, 60, 0.9);
  text-shadow: 0 1px 2px rgba(255,255,255,0.9), 0 0 4px rgba(255,255,255,0.7);
  user-select: none;
}

.mp-hud-online {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,200,80,0.55);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(255,255,255,0.6) inset;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 在线指示点（呼吸效果） */
.mp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,0.7);
  animation: mp-pulse 1.6s ease-in-out infinite;
}
@keyframes mp-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.7; }
}

.mp-count {
  font-weight: 700;
  color: #1B3A2E;  /* 站点深绿主色 */
  font-variant-numeric: tabular-nums;
  min-width: 1.2em;
  text-align: right;
}

.mp-label {
  color: rgba(60,60,60,0.7);
  font-size: 11px;
}

/* 自己的访客徽章 */
.mp-hud-self {
  display: inline-block;
}
.mp-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: hsl(var(--hue, 200), 70%, 30%);
  background: hsl(var(--hue, 200), 80%, 95%);
  border: 1px solid hsl(var(--hue, 200), 70%, 70%);
  border-radius: 8px;
  text-shadow: none;
  font-weight: 600;
}

/* =========================================================================
 * §远程光标幽灵
 * ======================================================================= */
.mp-remote-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483645;
  pointer-events: none;
  transition: transform 0.08s linear;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
  will-change: transform;
}

.mp-remote-label {
  display: inline-block;
  margin-left: 14px;
  margin-top: -2px;
  padding: 1px 6px;
  font: 10px/1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  color: hsl(var(--hue, 200), 80%, 30%);
  background: hsla(var(--hue, 200), 80%, 95%, 0.92);
  border: 1px solid hsla(var(--hue, 200), 70%, 70%, 0.7);
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0.9;
}

/* =========================================================================
 * §跨站消息浮窗（左下角）
 * ======================================================================= */
.mp-toast {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 2147483646;
  pointer-events: none;
  max-width: 340px;
  padding: 9px 14px;
  font: 12.5px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #1B3A2E;
  background: rgba(255, 248, 220, 0.94);  /* 暖象牙偏暖 */
  border: 1px solid rgba(255, 200, 80, 0.55);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.mp-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================================
 * §12 远程猫（多猫同屏）
 * ======================================================================= */
.mp-remote-cat {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483644;  /* 比远程光标低一层，避免遮挡交互 */
  pointer-events: none;
  width: 72px;          /* 比本地猫小一圈 */
  height: 50px;
  opacity: 0.78;
  transition: transform 0.3s linear;
  will-change: transform;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
}

.mp-remote-cat-body {
  width: 100%;
  height: 100%;
  /* 用 hue-rotate 给猫染色——所有 SVG 元素都会偏移到访客的色调 */
  filter: hue-rotate(calc(var(--hue, 200) * 1deg - 200deg));
}

.mp-remote-cat-body svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mp-remote-cat-label {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 1px 6px;
  font: 9.5px/1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  color: hsl(var(--hue, 200), 70%, 30%);
  background: hsla(var(--hue, 200), 80%, 96%, 0.92);
  border: 1px solid hsla(var(--hue, 200), 70%, 70%, 0.7);
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0.85;
}

/* 远程猫睡觉时缓慢呼吸 */
.mp-remote-cat-sleeping .mp-remote-cat-body {
  animation: mp-cat-sleep 2.4s ease-in-out infinite;
}
@keyframes mp-cat-sleep {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.04); opacity: 0.85; }
}

/* =========================================================================
 * §13 今日猫碗（左下角浮窗）
 * ======================================================================= */
.mp-bowl-widget {
  position: fixed;
  left: 14px;
  bottom: 60px;  /* 避开左下角的 toast 位置 */
  z-index: 2147483644;
  pointer-events: auto;
  width: 240px;
  padding: 10px 12px 10px 12px;
  font: 12px/1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #1B3A2E;
  background: rgba(250, 248, 245, 0.94);  /* 暖象牙 */
  border: 1px solid rgba(200, 163, 94, 0.5);  /* 古铜金 */
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.mp-bowl-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.mp-bowl-icon { font-size: 16px; }
.mp-bowl-title { font-weight: 700; flex: 1; }

.mp-bowl-feed-btn {
  padding: 3px 10px;
  font: 11px/1.4 -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  color: #FAF8F5;
  background: #1B3A2E;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease;
}
.mp-bowl-feed-btn:hover {
  background: #2C5345;
  transform: scale(1.04);
}
.mp-bowl-feed-btn:active { transform: scale(0.96); }

.mp-bowl-progress {
  position: relative;
  width: 100%;
  height: 14px;
  background: rgba(200, 163, 94, 0.18);
  border-radius: 7px;
  overflow: hidden;
}

.mp-bowl-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #C8A35E 0%, #ffd700 100%);
  border-radius: 7px;
  transition: width .35s ease;
  width: 0%;
}

.mp-bowl-progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9.5px;
  color: #1B3A2E;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-shadow: 0 0 2px rgba(255,255,255,0.8);
}

.mp-bowl-stats {
  margin-top: 5px;
  font-size: 10.5px;
  color: rgba(60,60,60,0.7);
}
.mp-bowl-stats b { color: #1B3A2E; }

/* 猫碗满了之后的特效：边框变金、按钮变金色 */
.mp-bowl-widget.mp-bowl-full {
  border-color: #ffd700;
  box-shadow: 0 4px 18px rgba(255, 215, 0, 0.4);
  animation: mp-bowl-glow 1.4s ease-in-out infinite;
}
.mp-bowl-widget.mp-bowl-full .mp-bowl-feed-btn {
  background: #C8A35E;
  color: #fff;
}
@keyframes mp-bowl-glow {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.1); }
  50%      { box-shadow: 0 4px 22px rgba(255, 215, 0, 0.55); }
}

/* 金币粒子（庆祝用） */
.mp-bowl-particle {
  position: fixed;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #ffd700 0%, #daa520 60%, #8b6914 100%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2147483646;
  box-shadow: 0 0 6px #ffd700;
  animation: mp-bowl-fall 3.4s cubic-bezier(.36,.07,.19,.97) forwards;
}
@keyframes mp-bowl-fall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--drift, 0), calc(100vh + 60px)) rotate(var(--rot, 360deg)); opacity: 0.2; }
}

/* =========================================================================
 * §关闭按钮（通用）
 * ======================================================================= */
.mp-close-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(60, 60, 60, 0.5);
  font: 600 16px/1 -apple-system, BlinkMacSystemFont, sans-serif;
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s ease, color .15s ease, transform .12s ease;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.mp-close-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(60, 60, 60, 0.9);
  transform: scale(1.1);
}
.mp-close-btn:active { transform: scale(0.92); }

/* HUD 关闭按钮位置微调（HUD 整体较小，按钮要更靠边） */
.mp-hud-close {
  top: -2px;
  right: -2px;
}

/* 隐藏通用类——关闭后用 */
.mp-hidden {
  display: none !important;
}

/* =========================================================================
 * §移动端适配
 * ======================================================================= */
@media (max-width: 600px) {
  .mp-hud {
    top: 8px;
    right: 8px;
    font-size: 11px;
  }
  .mp-hud-online {
    padding: 4px 8px;
  }
  .mp-badge { font-size: 9.5px; padding: 1px 6px; }
  .mp-remote-label { display: none; }   /* 手机端隐藏他人名字，太挤 */
  .mp-toast { left: 8px; bottom: 8px; max-width: calc(100vw - 16px); font-size: 11.5px; }
  /* 远程猫手机端更小 */
  .mp-remote-cat { width: 56px; height: 40px; }
  .mp-remote-cat-label { display: none; }
  /* 今日猫碗手机端缩小 */
  .mp-bowl-widget { left: 8px; bottom: 52px; width: 200px; padding: 8px 10px; font-size: 11px; }
}

/* =========================================================================
 * §prefers-reduced-motion
 * ======================================================================= */
@media (prefers-reduced-motion: reduce) {
  .mp-dot { animation: none; }
  .mp-remote-cursor { transition: none; }
  .mp-toast { transition: opacity .15s ease; transform: none; }
  .mp-toast.show { transform: none; }
  .mp-remote-cat-sleeping .mp-remote-cat-body { animation: none; }
  .mp-bowl-widget.mp-bowl-full { animation: none; }
  .mp-bowl-particle { animation-duration: 2s; }
}

/* =========================================================================
 * §暗色主题适配（站点部分子页可能用深色背景）
 * ======================================================================= */
@media (prefers-color-scheme: dark) {
  .mp-hud {
    color: rgba(220, 220, 220, 0.9);
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  }
  .mp-hud-online {
    background: rgba(30, 30, 30, 0.92);
    border-color: rgba(255, 200, 80, 0.45);
    color: rgba(220, 220, 220, 0.9);
  }
  .mp-count { color: #FAF8F5; }
  .mp-label { color: rgba(220,220,220,0.7); }
  .mp-toast {
    color: #FAF8F5;
    background: rgba(28, 28, 28, 0.94);
    border-color: rgba(255, 200, 80, 0.45);
  }
  /* 今日猫碗暗色 */
  .mp-bowl-widget {
    color: #FAF8F5;
    background: rgba(28, 28, 28, 0.94);
    border-color: rgba(200, 163, 94, 0.4);
  }
  .mp-bowl-progress {
    background: rgba(200, 163, 94, 0.18);
  }
  .mp-bowl-progress-label { color: #FAF8F5; text-shadow: 0 0 2px rgba(0,0,0,0.8); }
  .mp-bowl-stats b { color: #FAF8F5; }
  .mp-bowl-feed-btn { background: #C8A35E; }
  /* 关闭按钮暗色 */
  .mp-close-btn { color: rgba(220, 220, 220, 0.5); }
  .mp-close-btn:hover { background: rgba(255,255,255,0.1); color: rgba(220,220,220,0.9); }
}