/* === neko 草莓猫娘主题 — 自定义样式 === */
/* 注意：背景、主题色、字体已由 static/css/tailwind.css 的 CSS 变量接管 */

/* === 基础 === */
/* 注意：html/body/字体/标题/::selection/滚动条等基础样式已由 static/css/styles.css 统一提供，
   此处不再重复，以减少 CSS 体积和选择器匹配成本。 */

/* 链接 */
a {
  transition: color 0.2s;
}

/* === 卡片 === */
/* 卡片已改为实体背景，避免全站大量 .card 同时启用 backdrop-filter 导致 GPU 合成层爆炸。
   只有少量视觉焦点卡片使用 .glass-card 保留毛玻璃效果。 */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--glass-shadow);
  transition: box-shadow 0.3s, transform 0.3s, background 0.3s;
}
.card:hover {
  box-shadow: var(--glass-shadow-xl);
  transform: translateY(-2px);
}
.dark .card {
  background: var(--surface-alt);
  border-color: var(--border);
}
.dark .card:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.50);
}

/* 首页/今日发现页「每日一问」neko 回答高亮框，需随暗色模式切换背景 */
.daily-neko-answer {
  background-color: rgba(255, 255, 255, 0.6);
  border-left: 3px solid #ff9ec2;
}
.dark .daily-neko-answer {
  background-color: rgba(26, 20, 18, 0.6);
}

/* === 按钮 === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  border-radius: 2rem;
  font-weight: 600;
  transition: all 0.2s;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary {
  background: #ff5c96;
  color: white;
}
.btn-primary:hover {
  background: #e64d82;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 92, 150, 0.35);
}
.btn-outline {
  background: transparent;
  border: 2px solid #ff5c96;
  color: #ff5c96;
}
.btn-outline:hover {
  background: #ff5c96;
  color: white;
}

/* === 首页实时时钟 === */
.clock-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  min-width: 320px;
  max-width: 640px;
  width: 92%;
  padding: 1.5rem 1.75rem 1.25rem;
  border-radius: 9999px;
}

/* 可爱猫娘时钟 — 猫耳长条牌 */
.cute-clock-card {
  background: linear-gradient(135deg, #fff0f5 0%, #ffe8f0 45%, #fff5f8 100%);
  border: 2px solid #ffc2d8;
  overflow: visible;
  box-shadow: 0 8px 28px rgba(255, 92, 150, 0.14), var(--glass-shadow);
}
.dark .cute-clock-card {
  background: linear-gradient(135deg, #2a1f20 0%, #24181a 45%, #2a1820 100%);
  border-color: #5a3a42;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.30), var(--glass-shadow);
}

/* 猫耳朵 */
.clock-ears {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 9rem;
  pointer-events: none;
}
.clock-ear {
  position: relative;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 30px solid #ffc2d8;
}
.clock-ear::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 17px solid #ffe0eb;
}
.dark .clock-ear {
  border-bottom-color: #5a3a42;
}
.dark .clock-ear::after {
  border-bottom-color: #3a2a2a;
}

/* 长条牌主体：左中右三栏 */
.clock-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}
.clock-left {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 6.5rem;
}
.clock-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
}
.clock-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* neko 小头像 */
.clock-avatar {
  font-size: 2.75rem;
  line-height: 1;
  animation: clock-bob 2.5s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(255, 92, 150, 0.20));
}
@keyframes clock-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-5px) rotate(4deg); }
}

/* 时段问候语 */
.clock-greeting {
  font-family: 'Lolita', serif;
  font-size: 1rem;
  font-weight: 700;
  color: #ff5c96;
  white-space: nowrap;
}
.dark .clock-greeting {
  color: #ff7aac;
}

.clock-date {
  font-family: 'Lolita', serif;
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  text-align: center;
  margin-bottom: 0.1rem;
}
.clock-holiday {
  font-family: 'Lolita', serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #ff5c96;
  text-align: center;
  margin-bottom: 0.1rem;
  min-height: 1.2em;
}
.clock-holiday:empty {
  display: none;
}
.clock-time {
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 2px 10px rgba(255, 92, 150, 0.12);
}
.dark .clock-time {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.30);
}

/* 爪印装饰 */
.clock-paws {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 1.1rem;
  opacity: 0.65;
}
.clock-paws span {
  animation: clock-paw-tap 1.6s ease-in-out infinite;
}
.clock-paws span:nth-child(2) {
  animation-delay: 0.3s;
}
@keyframes clock-paw-tap {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.15); }
}

@media (max-width: 640px) {
  .clock-card {
    min-width: auto;
    max-width: 100%;
    padding: 1.25rem 1rem 1rem;
    border-radius: 2rem;
  }
  .clock-ears {
    gap: 6.5rem;
    top: -14px;
  }
  .clock-ear {
    border-left-width: 12px;
    border-right-width: 12px;
    border-bottom-width: 26px;
  }
  .clock-ear::after {
    top: 9px;
    border-left-width: 7px;
    border-right-width: 7px;
    border-bottom-width: 15px;
  }
  .clock-body {
    gap: 0.4rem;
  }
  .clock-left {
    flex-direction: column;
    gap: 0.15rem;
    min-width: 3.5rem;
  }
  .clock-right {
    min-width: 1.75rem;
  }
  .clock-avatar {
    font-size: 2rem;
  }
  .clock-greeting {
    font-size: 0.8rem;
  }
  .clock-date {
    font-size: 0.72rem;
  }
  .clock-holiday {
    font-size: 0.72rem;
  }
  .clock-time {
    font-size: 1.85rem;
  }
  .clock-paws {
    flex-direction: column;
    font-size: 0.85rem;
    gap: 0.2rem;
  }
}

/* === 标签 === */
.tag {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  background: #ffe0eb;
  color: #e64d82;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* === 博客文章内容 === */
.prose {
  line-height: 1.85;
  font-size: 1.05rem;
}
.prose h1, .prose h2, .prose h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.prose h2 {
  font-size: 1.5rem;
  border-left: 4px solid #ff7aac;
  padding-left: 0.75rem;
}
.prose p { margin-bottom: 1.25rem; }
.prose img {
  border-radius: 1rem;
  max-width: 100%;
}
.prose blockquote {
  border-left: 4px solid #ff9ec2;
  padding: 0.5rem 1rem;
  margin: 1.25rem 0;
  background: #fff0f5;
  border-radius: 0 0.5rem 0.5rem 0;
  color: #9b7e72;
  font-style: italic;
}
.prose code {
  background: #fff0f5;
  padding: 0.15rem 0.4rem;
  border-radius: 0.3rem;
  font-size: 0.9em;
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  color: #e64d82;
}
.prose pre {
  background: #2d1f1a;
  color: #fce4ec;
  padding: 1.25rem;
  border-radius: 1rem;
  overflow-x: auto;
  margin: 1.25rem 0;
}
.prose pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

/* === 樱花飘落动画 === */
@keyframes petal-fall {
  0%   { transform: translateY(-10vh) rotate(0deg) translateX(0); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(110vh) rotate(720deg) translateX(100px); opacity: 0; }
}

.sakura-petal {
  position: fixed;
  top: -10vh;
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 100;
  animation: petal-fall linear infinite;
  opacity: 0.3;
  font-size: 1.5rem;
}

/* === 滚动渐入 === */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* === 页面过渡 === */
.page-enter {
  animation: fadeInUp 0.4s ease;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === 装饰虚线分隔 === */
.decorative-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #ff9ec2;
}
.decorative-divider::before,
.decorative-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #ffc2d8, transparent);
}

/* === About 子导航活跃状态 === */
.subnav-link.active {
  background-color: #ff7aac;
  color: white;
}

/* === 博客 Tab 筛选 === */
.blog-tab {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  color: #cc3e6e;
  background-color: #ffe0eb;
  transition: background-color 0.15s, color 0.15s;
}
.blog-tab:hover {
  background-color: #ffc2d8;
}
.blog-tab.active {
  background-color: #ff7aac;
  color: white;
}

/* === Alpine.js 隐藏（历史遗留，保留以防其他组件使用）=== */
[x-cloak] { display: none !important; }

/* === 用户菜单默认隐藏（兜底，JS 通过 inline style 覆盖）=== */
#user-menu-dropdown { display: none; }

/* === 封面图上按钮 === */
.cover-remove {
  color: #cc3e6e;
  background: white;
}
.cover-remove:hover {
  color: #ef4444;
  background-color: #fef2f2;
}

/* === 头像裁剪模态框 === */
.avatar-crop-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1rem;
  /* 防止 iOS Safari 弹性滚动 */
  touch-action: none;
  -webkit-overflow-scrolling: auto;
}
.avatar-crop-box {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
  /* JS 会动态设置宽高，此处为默认值 */
  width: 280px;
  height: 280px;
}
.avatar-crop-box img {
  position: absolute;
  left: 0;
  top: 0;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}
.avatar-crop-box img:active {
  cursor: grabbing;
}
.avatar-crop-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
}
.avatar-crop-controls input[type="range"] {
  width: 140px;
  min-height: 36px; /* 移动端手指友好 */
  accent-color: #ff5c96;
}

/* 裁剪模态框移动端适配 */
@media (max-width: 400px) {
  .avatar-crop-box {
    width: 260px;
    height: 260px;
  }
  .avatar-crop-controls {
    gap: 0.5rem;
    margin-top: 1rem;
  }
  .avatar-crop-controls input[type="range"] {
    width: 120px;
  }
  .avatar-crop-controls .btn {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }
}

/* === 两行截断 === */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === 点赞按钮 === */
.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 2rem;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  box-shadow: var(--glass-shadow-sm);
}
.like-btn:hover {
  border-color: var(--color-neko-300);
  color: var(--color-neko-500);
  background: var(--color-neko-50);
}
.like-btn.liked {
  border-color: var(--color-neko-300);
  color: var(--color-neko-500);
  background: var(--color-neko-50);
}
.dark .like-btn {
  background: var(--surface-alt);
  border-color: var(--border);
  color: var(--text-muted);
}
.dark .like-btn:hover {
  border-color: var(--color-neko-700);
  color: var(--color-neko-400);
  background: rgba(58, 46, 40, 0.55);
}
.dark .like-btn.liked {
  border-color: var(--color-neko-700);
  color: var(--color-neko-400);
  background: rgba(58, 46, 40, 0.55);
}
.like-btn .heart-icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 0.2s ease;
}
.like-btn.liked .heart-icon {
  transform: scale(1.15);
}
.like-btn:active .heart-icon {
  transform: scale(0.85);
}
.like-btn-sm {
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  gap: 0.25rem;
}
.like-btn-sm .heart-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* === 评论区域 === */
#comments-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #f0d8d0;
}
.comment-card {
  padding: 1rem 0;
  border-bottom: 1px solid #f5e8e0;
}
.comment-card:last-child {
  border-bottom: none;
}
.comment-reply {
  margin-left: 2.5rem;
  padding-left: 1rem;
  border-left: 2px solid #ffe0eb;
}
@media (max-width: 640px) {
  .comment-reply {
    margin-left: 1.25rem;
    padding-left: 0.75rem;
  }
}
.comment-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.comment-actions button {
  background: none;
  border: none;
  color: #9b7e72;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 0.375rem;
  transition: color 0.15s;
}
.comment-actions button:hover {
  color: #ff5c96;
}
.comment-actions .delete-btn:hover {
  color: #ef4444;
}

/* === 回复表单 === */
.reply-form {
  margin-top: 0.75rem;
  display: none;
}
.reply-form.open {
  display: block;
}
.reply-form textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  font-size: 0.875rem;
  resize: vertical;
  min-height: 3.5rem;
  outline: none;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  box-shadow: var(--glass-shadow-sm);
}
.reply-form textarea:focus {
  border-color: var(--color-neko-300);
  box-shadow: 0 0 0 3px rgba(255, 92, 150, 0.1);
}
.dark .reply-form textarea {
  background: var(--surface-alt);
  border-color: var(--border);
  color: var(--text);
}
.dark .reply-form textarea:focus {
  border-color: var(--color-neko-400);
  box-shadow: 0 0 0 3px rgba(255, 122, 172, 0.2);
}

/* ═══════════════════════════════════════════
   暗色模式 (Dark Mode)
   通过 <html class="dark"> 触发
   ═══════════════════════════════════════════ */

.dark {
  color-scheme: dark;
}

/* --- 基础 --- */
.dark body {
  /* 背景渐变由 tailwind.css 提供，这里只保留文字色兜底 */
  color: var(--text);
}
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: var(--heading);
}
.dark ::selection {
  background-color: #6a3a50;
  color: #ede0d8;
}
.dark ::-webkit-scrollbar-track { background: #1a1412; }
.dark ::-webkit-scrollbar-thumb { background: #6a3a50; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb:hover { background: #8a4a68; }

/* --- 按钮 --- */
.dark .btn-outline {
  border-color: #ff7aac;
  color: #ff7aac;
}
.dark .btn-outline:hover {
  background: #ff7aac;
  color: #1a1412;
}

/* --- 标签 --- */
.dark .tag {
  background: #3a1a28;
  color: #ff9ec2;
}

/* --- 博客正文 --- */
.dark .prose blockquote {
  background: #2a1a20;
  color: #b8a098;
  border-left-color: #8a4a68;
}
.dark .prose code {
  background: #2a1a20;
  color: #ff9ec2;
}
.dark .prose pre {
  background: #0d0a08;
  color: #fce4ec;
}

/* --- 博客 tab --- */
.dark .blog-tab {
  background-color: #3a1a28;
  color: #ff9ec2;
}
.dark .blog-tab:hover {
  background-color: #4a2a38;
}
.dark .blog-tab.active {
  background-color: #ff7aac;
  color: #1a1412;
}

/* --- About 子导航 --- */
.dark .subnav-link.active {
  background-color: #ff7aac;
  color: #1a1412;
}

/* --- 装饰分隔线 --- */
.dark .decorative-divider { color: #8a4a68; }
.dark .decorative-divider::before,
.dark .decorative-divider::after {
  background: linear-gradient(to right, transparent, #4a2a38, transparent);
}

/* --- 评论 --- */
.dark #comments-section {
  border-top-color: #3a2e28;
}
.dark .comment-card {
  border-bottom-color: #3a2e28;
}
.dark .comment-reply {
  border-left-color: #3a1a28;
}

/* --- 输入框 --- */
.dark input[type="text"],
.dark input[type="password"],
.dark input[type="email"],
.dark input[type="search"],
.dark textarea,
.dark select {
  background-color: #1a1412;
  border-color: #3a2e28;
  color: #d8c8c0;
}
.dark input:focus,
.dark textarea:focus,
.dark select:focus {
  border-color: #ff7aac;
  box-shadow: 0 0 0 3px rgba(255, 122, 172, 0.2);
}

/* --- 暗色模式切换按钮 --- */
.dark .hover\:bg-neko-50:hover { background-color: #2a1a20; }

/* --- Tailwind 工具类暗色覆盖 --- */
/* 背景 */
.dark .bg-white { background-color: #1a1412; }
.dark .bg-white\/80 { background-color: rgba(26, 20, 18, 0.8); }
.dark .bg-white\/90 { background-color: rgba(26, 20, 18, 0.9); }
.dark .bg-surface { background-color: #1a1412; }
.dark .bg-surface-alt { background-color: #241c1a; }
.dark .bg-neko-50 { background-color: #2a1a20; }
.dark .bg-neko-100 { background-color: #352028; }
.dark .hover\:bg-neko-50:hover { background-color: #2a1a20; }
.dark .hover\:bg-neko-100:hover { background-color: #352028; }
.dark .bg-red-50 { background-color: #2a1018; }
.dark .hover\:bg-red-50:hover { background-color: #2a1018; }

/* 文字 */
.dark .text-text { color: #d8c8c0; }
.dark .text-text-muted { color: #a09088; }
.dark .text-heading { color: #ede0d8; }
.dark .text-accent { color: #ff7aac; }
.dark .hover\:text-accent:hover { color: #ff7aac; }
.dark .hover\:text-text:hover { color: #d8c8c0; }
.dark .text-neko-500 { color: #ff7aac; }
.dark .text-red-500 { color: #ff6b7a; }

/* 边框 */
.dark .border-border { border-color: #3a2e28; }
.dark .border-neko-200 { border-color: #4a2a38; }
.dark .border-neko-300 { border-color: #6a3a50; }
.dark .border-white { border-color: #3a2e28; }

/* 分割线 */
.dark .border-l { border-left-color: #3a2e28; }

/* 阴影 */
.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); }
.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4); }

/* 渐变 */
.dark .bg-gradient-to-b { --tw-gradient-from: inherit; --tw-gradient-to: inherit; }
.dark .from-neko-50 { --tw-gradient-from: #2a1a20; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.dark .to-surface { --tw-gradient-to: #1a1412; }
.dark .bg-gradient-to-t { --tw-gradient-from: inherit; --tw-gradient-to: inherit; }
.dark .bg-gradient-to-r { --tw-gradient-from: inherit; --tw-gradient-to: inherit; }
.dark .from-neko-50 { --tw-gradient-from: #2a1a20; }
.dark .to-white { --tw-gradient-to: #241c1a; }
.dark .to-surface { --tw-gradient-to: #1a1412; }

/* ring / focus */
.dark .focus\:ring-neko-300:focus { --tw-ring-color: #6a3a50; }
.dark .focus\:border-neko-300:focus { border-color: #6a3a50; }

/* nav-link */
.nav-link:hover {
  background-color: rgba(255, 240, 245, 0.5);
}
.dark .nav-link:hover {
  color: #ff7aac;
  background-color: rgba(42, 26, 32, 0.5);
}

/* === 点击 / 触摸屏幕特效 === */
.click-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 999;
  will-change: transform;
  animation: sparkle-burst ease-out forwards;
  transform: translate(-50%, -50%) scale(0);
}

@keyframes sparkle-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3) rotate(var(--rotate));
  }
}

/* === 每日占卜卡片 === */
.fortune-card {
  perspective: 800px;
  min-height: 280px;
}

.fortune-card-inner {
  position: relative;
  width: 100%;
  min-height: 280px;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.fortune-card.flipped .fortune-card-inner {
  transform: rotateY(180deg);
}

.fortune-front,
.fortune-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 280px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fortune-back {
  transform: rotateY(180deg);
}

.fortune-stars {
  font-size: 1.5rem;
  letter-spacing: 0.25rem;
}

.fortune-label {
  display: inline-block;
  background: linear-gradient(135deg, #ff5c96, #ff8db5);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  letter-spacing: 0.1em;
}

/* 暗色模式占卜卡片 */
.dark .fortune-label {
  background: linear-gradient(135deg, #d4487a, #a83a60);
}

.dark .fortune-card .card {
  background: #2a1f1f;
  border-color: #3a2a2a;
}

/* 占卜卡片禁用 card 默认的 hover 上浮，避免和 3D 翻转冲突 */
.fortune-front.card,
.fortune-back.card {
  transition: box-shadow 0.3s;
}

.fortune-front.card:hover {
  transform: none;
}
.fortune-back.card:hover {
  transform: rotateY(180deg);
}

/* ═══════════════════════════════════════════
   音乐盒 (Music Box)
   ═══════════════════════════════════════════ */

/* --- 容器定位 --- */
.music-box {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 12px;
}
/* 按钮在上半屏时面板向下展开 */
.music-box.music-box-flip {
  flex-direction: column;
}
/* 按钮在左半屏时面板靠左 */
.music-box.music-box-left {
  align-items: flex-start;
}

/* --- 浮动按钮 --- */
.music-toggle-btn {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5c96, #ff8db5);
  color: #fff;
  font-size: 1.5rem;
  border: 2px solid #ffc2d8;
  box-shadow: 0 4px 16px rgba(255, 92, 150, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
  line-height: 1;
}
.music-toggle-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(255, 92, 150, 0.5);
}
.music-toggle-btn:active {
  transform: scale(0.95);
}
.music-toggle-btn.playing {
  animation: music-pulse 2s ease-in-out infinite;
}

/* --- 按钮上方提示标签 --- */
.music-toggle-label {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: var(--surface);
  color: var(--color-neko-500);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  box-shadow: var(--glass-shadow-sm);
  border: 1px solid var(--border);
  white-space: nowrap;
  pointer-events: none;
  animation: music-label-float 3s ease-in-out infinite;
}
.dark .music-toggle-label {
  background: var(--surface-alt);
  color: var(--color-neko-400);
  border-color: var(--border);
}

@keyframes music-label-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@keyframes music-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* --- 音符飘出粒子 --- */
.music-note-particle {
  position: fixed;
  pointer-events: none;
  z-index: 101;
  font-size: 1rem;
  animation: note-float-up 3s ease-out forwards;
}
@keyframes note-float-up {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg) scale(0.5); }
  20%  { opacity: 1; transform: translateY(-15px) rotate(15deg) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) rotate(35deg) scale(0.3); }
}

/* --- 展开面板 --- */
.music-panel {
  width: 272px;
  max-width: calc(100vw - 48px);
  background: #fff;
  border: 1px solid #f0d8d0;
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(74, 48, 40, 0.15);
  overflow: hidden;
  animation: music-slide-up 0.2s ease-out;
}
.music-panel.hidden {
  display: none;
}

@keyframes music-slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- 面板头部 --- */
.music-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(135deg, #fff0f5, #ffe0eb);
  border-bottom: 1px solid #f0d8d0;
}
.music-panel-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #6a3a50;
}
.music-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 92, 150, 0.1);
  color: #9b7e72;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.music-close-btn:hover {
  background: rgba(255, 92, 150, 0.2);
  color: #ff5c96;
}

/* --- 面板主体 --- */
.music-panel-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- 曲目信息 --- */
.music-track-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.music-track-emoji {
  font-size: 1.5rem;
}
.music-track-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #4a3028;
}

/* --- 进度条 --- */
.music-progress-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.music-progress-bar {
  position: relative;
  height: 8px;
  background: #f0d8d0;
  border-radius: 4px;
  cursor: pointer;
  overflow: visible;
  /* 移动端扩大触摸区域 */
  padding: 6px 0;
  background-clip: content-box;
}
.music-progress-fill {
  position: absolute;
  top: 6px;
  left: 0;
  height: 8px;
  width: 0%;
  background: linear-gradient(90deg, #ff9ec2, #ff5c96);
  border-radius: 4px;
  transition: width 0.1s linear;
  pointer-events: none;
}
.music-progress-thumb {
  position: absolute;
  top: 10px;
  width: 14px;
  height: 14px;
  background: #ff5c96;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(74, 48, 40, 0.2);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.15s;
}
/* 桌面端：hover 才显示拖拽点；移动端触摸时通过 dragging 类显示 */
@media (hover: hover) and (pointer: fine) {
  .music-progress-thumb {
    opacity: 0;
  }
  .music-progress-bar:hover .music-progress-thumb,
  .music-progress-bar.dragging .music-progress-thumb {
    opacity: 1;
  }
}
.music-time {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #9b7e72;
  font-variant-numeric: tabular-nums;
}

/* --- 播放控制 --- */
.music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.music-ctrl-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: #9b7e72;
  font-size: 1rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.music-ctrl-btn:hover {
  color: #ff5c96;
  background: rgba(255, 92, 150, 0.08);
}
.music-play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5c96, #ff8db5);
  border: none;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(255, 92, 150, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.music-play-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 18px rgba(255, 92, 150, 0.45);
}
.music-play-btn:active {
  transform: scale(0.95);
}

/* --- 音量滑块 --- */
.music-volume {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.music-volume-icon {
  font-size: 0.8rem;
}
.music-mute-btn {
  cursor: pointer;
  transition: transform 0.15s;
  user-select: none;
}
.music-mute-btn:hover {
  transform: scale(1.2);
}
.music-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  height: 4px;
  background: #f0d8d0;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.music-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ff5c96;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(74, 48, 40, 0.2);
  cursor: pointer;
}
.music-volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ff5c96;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(74, 48, 40, 0.2);
  cursor: pointer;
}

/* --- 曲目列表 --- */
.music-playlist {
  border-top: 1px solid #f0d8d0;
  padding-top: 8px;
  max-height: 164px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.music-playlist::-webkit-scrollbar { width: 4px; }
.music-playlist::-webkit-scrollbar-track { background: transparent; }
.music-playlist::-webkit-scrollbar-thumb { background: #f0d8d0; border-radius: 2px; }

.music-playlist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-height: 40px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 0.82rem;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  color: #4a3028;
  font-family: inherit;
}
.music-playlist-item:hover {
  background: rgba(255, 92, 150, 0.06);
}
.music-playlist-item.active {
  background: rgba(255, 92, 150, 0.1);
  font-weight: 600;
  color: #ff5c96;
}
.music-playlist-item-emoji {
  font-size: 1rem;
  flex-shrink: 0;
  width: 1.4em;
  text-align: center;
}
.music-playlist-item-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-playlist-item-indicator {
  font-size: 0.7rem;
  color: #ff5c96;
  flex-shrink: 0;
  display: none;
}
.music-playlist-item.active .music-playlist-item-indicator {
  display: inline;
}

/* --- 音乐盒暗色模式 --- */
.dark .music-panel {
  background: #241c1a;
  border-color: #3a2e28;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.dark .music-panel-header {
  background: linear-gradient(135deg, #2a1a20, #352028);
  border-bottom-color: #3a2e28;
}
.dark .music-panel-title {
  color: #ff9ec2;
}
.dark .music-close-btn {
  background: rgba(255, 122, 172, 0.12);
  color: #a09088;
}
.dark .music-close-btn:hover {
  background: rgba(255, 122, 172, 0.25);
  color: #ff7aac;
}
.dark .music-track-title {
  color: #ede0d8;
}
.dark .music-progress-bar {
  background: #3a2e28;
}
.dark .music-progress-fill {
  background: linear-gradient(90deg, #d4487a, #ff7aac);
}
.dark .music-progress-thumb {
  border-color: #241c1a;
}
.dark .music-time {
  color: #a09088;
}
.dark .music-ctrl-btn {
  color: #a09088;
}
.dark .music-ctrl-btn:hover {
  color: #ff7aac;
  background: rgba(255, 122, 172, 0.1);
}
.dark .music-volume-slider {
  background: #3a2e28;
}
.dark .music-playlist {
  border-top-color: #3a2e28;
}
.dark .music-playlist::-webkit-scrollbar-thumb { background: #3a2e28; }
.dark .music-playlist-item {
  color: #d8c8c0;
}
.dark .music-playlist-item:hover {
  background: rgba(255, 122, 172, 0.08);
}
.dark .music-playlist-item.active {
  background: rgba(255, 122, 172, 0.15);
  color: #ff7aac;
}
.dark .music-playlist-item-indicator {
  color: #ff7aac;
}

/* === 游戏覆盖层按钮 === */
.game-overlay-btn {
  transition: transform 0.15s ease;
}
.game-overlay-btn:hover {
  transform: scale(1.06);
}

/* 游戏覆盖层显示控制 */
#game-start-overlay {
  display: flex;
}
#game-start-overlay.hidden {
  display: none !important;
}
#game-over-overlay:not(.hidden) {
  display: flex !important;
}

/* 游戏窗口大小按钮 */
.game-size-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f0d8d0;
  border-radius: 6px;
  background: #fff;
  color: #9b7e72;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  line-height: 1;
}
.game-size-btn:hover {
  border-color: #ff9ec2;
  color: #ff5c96;
  background: #fff0f5;
}
.game-size-btn.active {
  border-color: #ff5c96;
  color: #ff5c96;
  background: #fff0f5;
}

/* 游戏大小按钮暗色模式 */
.dark .game-size-btn {
  background: #241c1a;
  border-color: #3a2e28;
  color: #a09088;
}
.dark .game-size-btn:hover {
  border-color: #8a4a68;
  color: #ff7aac;
  background: #2a1a20;
}
.dark .game-size-btn.active {
  border-color: #ff7aac;
  color: #ff7aac;
  background: #2a1a20;
}

/* ── 移动端跳跃按钮 ── */
#game-jump-btn-container {
  display: none;
}
@media (max-width: 639px) {
  #game-jump-btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 16px 0 8px;
  }
  /* 隐藏桌面端键盘提示 */
  .game-keyboard-hint {
    display: none;
  }
}
#game-jump-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #ff9ec2;
  background: linear-gradient(135deg, #ff5c96, #ff8db2);
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 20px rgba(255, 92, 150, 0.35);
  transition: transform 0.1s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
#game-jump-btn:active {
  transform: scale(0.9);
  box-shadow: 0 2px 10px rgba(255, 92, 150, 0.25);
  background: linear-gradient(135deg, #e84a80, #ff7099);
}

/* Canvas 触摸优化 */
#game-canvas {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* ── 记忆翻牌覆盖层 ── */
#game-win-overlay:not(.hidden) {
  display: flex !important;
}

/* ── 难度选择按钮 ── */
.game-diff-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: 1px solid #f0d8d0;
  border-radius: 20px;
  background: #fff;
  color: #9b7e72;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.game-diff-btn:hover {
  border-color: #ff9ec2;
  color: #ff5c96;
  background: #fff0f5;
}
.game-diff-btn.active {
  border-color: #ff5c96;
  color: #fff;
  background: linear-gradient(135deg, #ff5c96, #ff8db2);
}
.dark .game-diff-btn {
  background: #241c1a;
  border-color: #3a2e28;
  color: #a09088;
}
.dark .game-diff-btn:hover {
  border-color: #8a4a68;
  color: #ff7aac;
  background: #2a1a20;
}
.dark .game-diff-btn.active {
  border-color: #ff7aac;
  color: #fff;
  background: linear-gradient(135deg, #c94a7a, #a03060);
}

/* ═══════════════════════════════════════════
   🎮 游戏通用 — 玩法弹窗
   ═══════════════════════════════════════════ */

.game-info-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 16px;
  border: none;
  border-radius: 16px;
  background: #ff9ec2;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  margin-top: 6px;
}
.game-info-btn:hover {
  background: #ff5c96;
  transform: scale(1.04);
}
.dark .game-info-btn {
  background: #c94a7a;
  color: #fff;
}
.dark .game-info-btn:hover {
  background: #e06090;
}

.game-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: modalFadeIn 0.2s ease;
}
.game-modal-overlay.hidden {
  display: none;
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.game-modal {
  background: #fff;
  border-radius: 16px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 8px 40px rgba(0,0,0,0.15);
  animation: modalSlideIn 0.25s ease;
  overflow: hidden;
}
.dark .game-modal {
  background: #241c1a;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
@keyframes modalSlideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.game-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0d8d0;
}
.dark .game-modal-header {
  border-bottom-color: #3a2e28;
}
.game-modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: #3e2018;
  font-family: 'Lolita', serif;
}
.dark .game-modal-title {
  color: #e8d5c8;
}
.game-modal-close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: #f5f0f0;
  color: #9b7e72;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
  line-height: 1;
}
.game-modal-close:hover {
  background: #ffe0eb;
  color: #e64d80;
}
.dark .game-modal-close {
  background: #3a2e28;
  color: #a09088;
}
.dark .game-modal-close:hover {
  background: #2a1a20;
  color: #ff7aac;
}

.game-modal-body {
  padding: 16px 20px 20px;
  font-size: 0.85rem;
  line-height: 1.7;
  color: #5a4030;
}
.dark .game-modal-body {
  color: #c0b0a0;
}
.game-modal-body p {
  margin: 0 0 8px;
}
.game-modal-body p:last-child {
  margin-bottom: 0;
}
.game-modal-body .game-modal-section {
  font-weight: 700;
  color: #ff5c96;
  margin-top: 10px;
  margin-bottom: 4px;
  font-size: 0.78rem;
}
.dark .game-modal-body .game-modal-section {
  color: #ff7aac;
}
.game-modal-body .game-modal-tag {
  display: inline-block;
  padding: 1px 8px;
  background: #fff0f5;
  border-radius: 10px;
  font-size: 0.7rem;
  color: #e64d80;
  margin-right: 4px;
}
.dark .game-modal-body .game-modal-tag {
  background: #2a1a20;
  color: #ff7aac;
}

/* ═══════════════════════════════════════════
   🍰 甜品店大厨 — Clicker 游戏样式
   ═══════════════════════════════════════════ */

/* ── 顶部状态栏 ── */
.clicker-top-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #f0d8d0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.dark .clicker-top-bar {
  background: #241c1a;
  border-color: #3a2e28;
}

.clicker-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
  padding: 2px 8px;
}
.clicker-stat-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9b7e72;
  margin-bottom: 1px;
}
.dark .clicker-stat-label {
  color: #a09088;
}
.clicker-stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: #3e2018;
  font-family: 'Courier New', monospace;
}
.dark .clicker-stat-value {
  color: #e8d5c8;
}
.clicker-stat-sub {
  font-size: 0.6rem;
  color: #ff5c96;
}
.dark .clicker-stat-sub {
  color: #ff7aac;
}
.clicker-stat-area .clicker-stat-value {
  font-size: 0.8rem;
  white-space: nowrap;
}

/* ── 离线收益消息 ── */
.clicker-offline-msg {
  text-align: center;
  padding: 8px 16px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #fff0f5, #ffe0eb);
  border-radius: 10px;
  font-size: 0.82rem;
  color: #e64d80;
  font-weight: 600;
  animation: clickerFadeIn 0.5s ease;
}
.dark .clicker-offline-msg {
  background: linear-gradient(135deg, #2a1a20, #1a1a20);
  color: #ff7aac;
}
@keyframes clickerFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── 主游戏区：双栏 ── */
.clicker-main {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
@media (max-width: 639px) {
  .clicker-main {
    flex-direction: column;
  }
}

/* ── 左栏：neko 点击区 ── */
.clicker-left {
  flex: 0 0 auto;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 639px) {
  .clicker-left {
    width: 100%;
  }
}

.clicker-order-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.clicker-order-icon {
  font-size: 1.5rem;
}
.clicker-order-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #3e2018;
}
.dark .clicker-order-name {
  color: #e8d5c8;
}

/* HP 条 */
.clicker-hp-outer {
  width: 100%;
  height: 22px;
  background: #f0e0e0;
  border-radius: 11px;
  overflow: hidden;
  position: relative;
  margin-bottom: 12px;
  border: 1px solid #f0d8d0;
}
.dark .clicker-hp-outer {
  background: #2a1a20;
  border-color: #3a2e28;
}
.clicker-hp-fill {
  height: 100%;
  border-radius: 11px;
  transition: width 0.15s ease, background 0.3s ease;
  background: linear-gradient(90deg, #ff9ec2, #ff5c96);
}
.clicker-hp-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #3e2018;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 4px rgba(255,255,255,0.7);
}
.dark .clicker-hp-text {
  color: #e8d5c8;
  text-shadow: 0 0 4px rgba(0,0,0,0.5);
}

/* neko 点击区域 */
.clicker-neko-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clicker-neko {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease;
  text-align: center;
  padding: 8px;
}
.clicker-neko:hover {
  transform: scale(1.04);
}
.clicker-neko-active {
  transform: scale(0.92) !important;
}
.clicker-neko-img {
  display: block;
  margin: 0 auto;
  image-rendering: pixelated;
  pointer-events: none;
}
.clicker-neko-hint {
  margin-top: 6px;
  font-size: 0.75rem;
  color: #9b7e72;
}
.dark .clicker-neko-hint {
  color: #a09088;
}

/* 飘出数字容器 */
.clicker-float-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.clicker-float-text {
  position: absolute;
  font-size: 0.9rem;
  font-weight: 800;
  color: #ff5c96;
  pointer-events: none;
  white-space: nowrap;
  animation: clickerFloatUp 0.85s ease-out forwards;
  text-shadow: 0 0 6px rgba(255,92,150,0.4);
}
.clicker-float-crit {
  font-size: 1.3rem;
  color: #ffb800;
  text-shadow: 0 0 10px rgba(255,184,0,0.6);
}
@keyframes clickerFloatUp {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  60%  { opacity: 0.8; transform: translateY(-40px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-70px) scale(0.8); }
}

/* ── 右栏：面板 ── */
.clicker-right {
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #f0d8d0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  overflow: hidden;
}
.dark .clicker-right {
  background: #241c1a;
  border-color: #3a2e28;
}

/* Tab 按钮 */
.clicker-tabs {
  display: flex;
  border-bottom: 1px solid #f0d8d0;
}
.dark .clicker-tabs {
  border-bottom-color: #3a2e28;
}
.clicker-tab-btn {
  flex: 1;
  padding: 10px 8px;
  border: none;
  background: transparent;
  font-size: 0.8rem;
  font-weight: 600;
  color: #9b7e72;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  border-bottom: 2px solid transparent;
}
.clicker-tab-btn:hover {
  color: #ff5c96;
  background: #fff0f5;
}
.clicker-tab-btn.active {
  color: #ff5c96;
  border-bottom-color: #ff5c96;
  background: #fff0f5;
}
.dark .clicker-tab-btn {
  color: #a09088;
}
.dark .clicker-tab-btn:hover {
  color: #ff7aac;
  background: #2a1a20;
}
.dark .clicker-tab-btn.active {
  color: #ff7aac;
  border-bottom-color: #ff7aac;
  background: #2a1a20;
}

/* 面板内容 */
.clicker-panel {
  padding: 4px;
  max-height: 360px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.clicker-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 帮手行 / 升级行 */
.clicker-helper-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.12s;
}
.clicker-helper-row:hover {
  background: #fff5f8;
}
.dark .clicker-helper-row:hover {
  background: #2a1a20;
}
.clicker-helper-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}
.clicker-helper-info {
  flex: 1;
  min-width: 0;
}
.clicker-helper-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #3e2018;
}
.dark .clicker-helper-name {
  color: #e8d5c8;
}
.clicker-helper-count {
  font-size: 0.7rem;
  color: #ff5c96;
  font-family: 'Courier New', monospace;
}
.dark .clicker-helper-count {
  color: #ff7aac;
}
.clicker-helper-desc {
  font-size: 0.68rem;
  color: #9b7e72;
  margin-top: 1px;
}
.dark .clicker-helper-desc {
  color: #a09088;
}

/* 购买按钮 */
.clicker-buy-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1px solid #ff9ec2;
  border-radius: 16px;
  background: linear-gradient(135deg, #ff5c96, #ff8db2);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.clicker-buy-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 2px 8px rgba(255,92,150,0.35);
}
.clicker-buy-btn:active {
  transform: scale(0.95);
}
.clicker-buy-btn-disabled {
  background: #e0d0d4 !important;
  border-color: #d0c0c4 !important;
  color: #a09088 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
.clicker-buy-btn-disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}
.dark .clicker-buy-btn-disabled {
  background: #3a2e28 !important;
  border-color: #4a3e38 !important;
  color: #6a5a50 !important;
}
.clicker-buy-icon {
  font-size: 0.7rem;
}

/* ── 转生面板 ── */
.clicker-prestige-current {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}
.clicker-prestige-divider {
  height: 1px;
  background: #f0d8d0;
  margin: 6px 0;
}
.dark .clicker-prestige-divider {
  background: #3a2e28;
}
.clicker-prestige-tier-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #9b7e72;
  padding: 4px 10px;
}
.clicker-prestige-tier {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
}
.clicker-prestige-earned {
  background: #f0fff0;
}
.dark .clicker-prestige-earned {
  background: #1a2a1a;
}
.clicker-prestige-ready {
  background: #fff8e0;
}
.dark .clicker-prestige-ready {
  background: #2a2010;
}
.clicker-prestige-progress-bar {
  height: 4px;
  background: #f0d8d0;
  border-radius: 2px;
  margin-top: 3px;
  overflow: hidden;
}
.clicker-prestige-progress-fill {
  height: 100%;
  background: #ff5c96;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.clicker-prestige-note {
  font-size: 0.68rem;
  color: #9b7e72;
  padding: 2px 10px;
}
.clicker-prestige-btn-wrap {
  padding: 10px;
  text-align: center;
}
.clicker-prestige-btn {
  padding: 8px 24px;
  border: none;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  background: linear-gradient(135deg, #ffb800, #ff8c00);
  color: #fff;
}
.clicker-prestige-btn:not(.clicker-buy-btn-disabled):hover {
  transform: scale(1.05);
  box-shadow: 0 3px 12px rgba(255,184,0,0.4);
}

/* ── 对话气泡 ── */
.clicker-speech-wrap {
  text-align: center;
  padding: 10px 0;
}
.clicker-speech {
  display: inline-block;
  padding: 8px 18px;
  background: #fff0f5;
  border-radius: 18px;
  font-size: 0.82rem;
  color: #9b7e72;
  max-width: 90%;
  transition: all 0.3s ease;
  border: 1px solid #ffe0eb;
}
.dark .clicker-speech {
  background: #2a1a20;
  border-color: #3a2e28;
  color: #a09088;
}
.clicker-speech-active {
  color: #e64d80 !important;
  background: #fff !important;
  border-color: #ff9ec2 !important;
  transform: scale(1.03);
  box-shadow: 0 2px 10px rgba(255,92,150,0.15);
}
.dark .clicker-speech-active {
  color: #ff7aac !important;
  background: #241c1a !important;
  border-color: #8a4a68 !important;
}

/* ── 区域推进提示 ── */
.clicker-area-msg {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  padding: 12px 24px;
  background: linear-gradient(135deg, #ff5c96, #ff8db2);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(255,92,150,0.4);
  animation: clickerAreaIn 0.4s ease, clickerAreaOut 0.4s 2.1s ease forwards;
  pointer-events: none;
  white-space: nowrap;
}
@keyframes clickerAreaIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes clickerAreaOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

/* ── 转生闪光 ── */
.clicker-flash {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(255,200,220,0.4) 50%, transparent 70%);
  opacity: 0;
  transition: opacity 0.2s;
}
.clicker-flash-active {
  opacity: 1;
  transition: opacity 0s;
  animation: clickerFlash 1.5s ease-out forwards;
}
@keyframes clickerFlash {
  0%   { opacity: 1; }
  60%  { opacity: 0.6; }
  100% { opacity: 0; }
}

/* ═══════════════════════════════════════════
   🐱 neko 宠物养成
   ═══════════════════════════════════════════ */

/* ── 顶部状态栏 ── */
.pet-top-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.75rem 1rem;
  background: white;
  border: 1px solid #f0d8d0;
  border-radius: 1rem;
  box-shadow: 0 1px 4px rgba(74,48,40,0.05);
}
.pet-stat {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  background: #fffaf7;
  border-radius: 2rem;
  font-size: 0.8125rem;
}
.pet-stat-label {
  color: #9b7e72;
  font-weight: 600;
  white-space: nowrap;
}
.pet-stat-value {
  color: #3e2018;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
}
.pet-stat-affection .pet-stat-value {
  color: #ff5c96;
}

/* ── 离线提示 ── */
.pet-offline-msg {
  padding: 0.5rem 1rem;
  margin-bottom: 0.75rem;
  background: linear-gradient(135deg, #fff0f5, #ffe0eb);
  border: 1px solid #ffc2d8;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  color: #e64d82;
  text-align: center;
  animation: clickerFadeIn 0.4s ease;
}

/* ── 主布局 ── */
.pet-main {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.pet-left {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.pet-right {
  flex: 1;
  min-width: 0;
}

/* ── neko 展示区 ── */
.pet-neko-display {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  width: 100%;
  background: linear-gradient(180deg, #fffaf7 0%, #fff0f5 100%);
  border: 1px solid #f0d8d0;
  border-radius: 1.5rem;
  min-height: 200px;
}
.pet-neko-img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #ffc2d8;
  box-shadow: 0 4px 16px rgba(255,92,150,0.2);
  transition: transform 0.3s ease, filter 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
  animation: petBreathe 3s ease-in-out infinite;
  user-select: none;
}
/* 各阶段头像尺寸递增 */
.pet-neko-img.stage-1 { width: 170px; height: 170px; }
.pet-neko-img.stage-2 { width: 185px; height: 185px; }
.pet-neko-img.stage-3 { width: 200px; height: 200px; }
.pet-neko-img.stage-4 { width: 220px; height: 220px; }

/* 心情滤镜 */
.pet-mood-happy {
  border-color: #ff9ec2;
  box-shadow: 0 4px 24px rgba(255,92,150,0.35);
  filter: brightness(1.08) saturate(1.15);
}
.pet-mood-sad {
  border-color: #c0c0d0;
  box-shadow: 0 4px 12px rgba(100,100,120,0.15);
  filter: brightness(0.85) saturate(0.7);
}
.pet-mood-hungry {
  border-color: #e0c090;
  box-shadow: 0 4px 12px rgba(200,160,100,0.2);
  filter: brightness(0.9) saturate(0.8);
}
.pet-mood-tired {
  border-color: #b0b0c0;
  box-shadow: 0 4px 10px rgba(100,100,120,0.12);
  filter: brightness(0.8) saturate(0.6);
}

/* 进化动画 */
.pet-neko-evolve {
  animation: petEvolve 1s ease !important;
}
@keyframes petEvolve {
  0%   { transform: scale(1); filter: brightness(1); }
  30%  { transform: scale(1.2); filter: brightness(1.8) saturate(1.5); }
  60%  { transform: scale(0.95); filter: brightness(1.3); }
  80%  { transform: scale(1.05); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* 传说猫娘 */
.pet-neko-legend {
  border-color: #ffd700 !important;
  box-shadow: 0 0 32px rgba(255,215,0,0.5), 0 0 64px rgba(255,150,200,0.3) !important;
  animation: petBreathe 2s ease-in-out infinite, petLegendGlow 2s ease-in-out infinite !important;
}
@keyframes petLegendGlow {
  0%, 100% { box-shadow: 0 0 32px rgba(255,215,0,0.5), 0 0 64px rgba(255,150,200,0.3); }
  50%      { box-shadow: 0 0 48px rgba(255,215,0,0.8), 0 0 80px rgba(255,150,200,0.5); }
}

.pet-neko-img.pet-neko-pat {
  animation: petPat 0.4s ease !important;
}

@keyframes petBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1, 1.04); }
}
@keyframes petPat {
  0% { transform: scale(1); }
  30% { transform: scale(0.88); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.pet-stage-badge {
  margin-top: 0.5rem;
  padding: 0.2rem 0.75rem;
  background: #ff5c96;
  color: white;
  border-radius: 2rem;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ── 称号显示 ── */
.pet-title-display {
  font-size: 0.875rem;
  color: #ff5c96;
  font-weight: 600;
  font-family: 'Lolita', serif;
}

/* ── 对话气泡 ── */
.pet-dialogue-wrap {
  width: 100%;
  text-align: center;
  min-height: 2.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pet-dialogue-show {
  opacity: 1 !important;
}
.pet-dialogue {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #fff0f5;
  border: 1px solid #ffc2d8;
  border-radius: 1rem;
  font-size: 0.8125rem;
  color: #4a3028;
  max-width: 280px;
  line-height: 1.5;
  animation: petBubblePop 0.3s ease;
}

@keyframes petBubblePop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── 互动按钮 ── */
.pet-interactions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.4rem;
  width: 100%;
}
.pet-interact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.45rem 0.35rem;
  border: 1px solid #f0d8d0;
  border-radius: 0.75rem;
  background: white;
  color: #4a3028;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  white-space: nowrap;
  font-family: inherit;
}
.pet-interact-btn:hover {
  border-color: #ff9ec2;
  background: #fff0f5;
}
.pet-interact-btn:active {
  transform: scale(0.96);
}
.pet-interact-icon {
  font-size: 1.1rem;
}
.pet-cooldown {
  position: absolute;
  right: 0.3rem;
  top: 0.15rem;
  font-size: 0.6rem;
  color: #e64d82;
  font-weight: 700;
}

/* ── Tab 栏 ── */
.pet-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid #f0d8d0;
  padding-bottom: 0.5rem;
}
.pet-tab-btn {
  padding: 0.35rem 0.85rem;
  border: none;
  border-radius: 2rem;
  background: transparent;
  color: #9b7e72;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.pet-tab-btn:hover {
  color: #4a3028;
  background: #fff0f5;
}
.pet-tab-btn.active {
  background: #ff5c96;
  color: white;
  font-weight: 600;
}

/* ── 面板通用 ── */
.pet-panel {
  min-height: 300px;
}
.pet-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* ── 工作列表 ── */
.pet-work-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #f0d8d0;
  border-radius: 0.75rem;
  background: #fffaf7;
  transition: all 0.15s;
}
.pet-work-row:hover {
  border-color: #ffc2d8;
}
.pet-work-row-disabled {
  opacity: 0.5;
}
.pet-work-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.pet-work-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.pet-work-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #3e2018;
}
.pet-work-meta {
  font-size: 0.6875rem;
  color: #9b7e72;
}
.pet-work-btn {
  padding: 0.35rem 0.85rem;
  border: none;
  border-radius: 2rem;
  background: #ff5c96;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  font-family: inherit;
}
.pet-work-btn:hover {
  background: #e64d82;
}
.pet-work-btn:disabled {
  background: #d0c0c0;
  cursor: not-allowed;
}

/* ── 打工倒计时 ── */
.pet-work-active {
  padding: 0.75rem;
  background: linear-gradient(135deg, #fff0f5, #ffe0eb);
  border: 1px solid #ffc2d8;
  border-radius: 0.75rem;
  margin-bottom: 0.5rem;
}
.pet-work-countdown {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.pet-work-timer {
  font-size: 1.25rem;
  font-weight: 700;
  color: #e64d82;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  margin-right: 0.5rem;
}
.pet-work-cancel-btn {
  padding: 0.25rem 0.65rem;
  border: 1px solid #f0d8d0;
  border-radius: 2rem;
  background: white;
  color: #9b7e72;
  font-size: 0.6875rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.pet-work-cancel-btn:hover {
  border-color: #e64d82;
  color: #e64d82;
}

/* ── 商店 ── */
.pet-shop-categories {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.pet-shop-cat-btn {
  padding: 0.3rem 0.75rem;
  border: 1px solid #f0d8d0;
  border-radius: 2rem;
  background: white;
  color: #9b7e72;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.pet-shop-cat-btn:hover {
  border-color: #ff9ec2;
  color: #4a3028;
}
.pet-shop-cat-btn.active {
  border-color: #ff5c96;
  background: #fff0f5;
  color: #ff5c96;
  font-weight: 600;
}
.pet-shop-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid #f0d8d0;
  border-radius: 0.65rem;
  background: #fffaf7;
}
.pet-shop-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}
.pet-shop-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.pet-shop-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #3e2018;
}
.pet-shop-effect {
  font-size: 0.65rem;
  color: #9b7e72;
}
.pet-shop-owned {
  font-size: 0.75rem;
  color: #ff5c96;
  font-weight: 600;
}
.pet-shop-btn {
  padding: 0.3rem 0.65rem;
  border: none;
  border-radius: 2rem;
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  transition: all 0.15s;
}
.pet-shop-buy {
  background: #ff5c96;
  color: white;
}
.pet-shop-buy:hover {
  background: #e64d82;
}
.pet-shop-buy:disabled {
  background: #d0c0c0;
  cursor: not-allowed;
}
.pet-shop-use {
  background: #fff0f5;
  color: #ff5c96;
  border: 1px solid #ffc2d8;
}
.pet-shop-use:hover {
  background: #ffc2d8;
  color: white;
}

/* ── 称号 ── */
.pet-title-equipped {
  font-size: 0.6875rem;
  color: #ff5c96;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  background: #fff0f5;
  border-radius: 2rem;
}

/* ── 故事/相册 ── */
.pet-story-content {
  max-height: 400px;
  overflow-y: auto;
}
.pet-story-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pet-story-entry {
  display: flex;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid #f0d8d0;
  font-size: 0.75rem;
}
.pet-story-time {
  color: #9b7e72;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.pet-story-desc {
  color: #4a3028;
  line-height: 1.5;
}

/* ── 故事弹窗 ── */
.pet-story-modal {
  max-width: 440px;
}
.pet-story-text {
  line-height: 2;
  color: #4a3028;
}
.pet-story-text p {
  margin: 0.5rem 0;
}
.pet-event-reward {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ff5c96;
  margin-top: 1rem !important;
}

/* ── 引导弹窗 ── */
.pet-tutorial-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.pet-tutorial-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.6rem;
  background: #fffaf7;
  border-radius: 0.75rem;
  border: 1px solid #f0d8d0;
}

/* ── 帮助浮动按钮 ── */
.pet-help-fab {
  position: fixed;
  bottom: 6rem;
  right: 1.5rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #f0d8d0;
  background: white;
  box-shadow: 0 2px 8px rgba(74,48,40,0.12);
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.pet-help-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(74,48,40,0.18);
}

/* ── 游戏信息按钮 ── */
.game-info-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid #f0d8d0;
  border-radius: 2rem;
  background: white;
  color: #9b7e72;
  font-size: 0.7rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.game-info-btn:hover {
  border-color: #ff9ec2;
  color: #ff5c96;
  background: #fff0f5;
}

/* ── 游戏弹窗页脚 ── */
.game-modal-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid #f0d8d0;
  display: flex;
  justify-content: center;
}

/* ===== 暗色模式 ===== */
.dark .pet-top-bar {
  background: #241c1a;
  border-color: #3a2e28;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.dark .pet-stat {
  background: #2a1a20;
}
.dark .pet-stat-label {
  color: #a09088;
}
.dark .pet-stat-value {
  color: #ede0d8;
}
.dark .pet-stat-affection .pet-stat-value {
  color: #ff7aac;
}
.dark .pet-offline-msg {
  background: linear-gradient(135deg, #2a1a20, #352028);
  border-color: #4a2a38;
  color: #ff7aac;
}
.dark .pet-neko-display {
  background: linear-gradient(180deg, #1a1412 0%, #241c1a 100%);
  border-color: #3a2e28;
}
.dark .pet-neko-img {
  border-color: #4a2a38;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.dark .pet-mood-happy {
  border-color: #ff7aac;
  box-shadow: 0 4px 24px rgba(255,122,172,0.3);
}
.dark .pet-mood-sad {
  border-color: #3a2e38;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.dark .pet-mood-hungry {
  border-color: #4a3020;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.dark .pet-mood-tired {
  border-color: #3a3040;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.dark .pet-neko-legend {
  border-color: #ffd700 !important;
  box-shadow: 0 0 32px rgba(255,215,0,0.5), 0 0 64px rgba(255,150,200,0.3) !important;
}
.dark .pet-stage-badge {
  background: #ff7aac;
}
.dark .pet-title-display {
  color: #ff7aac;
}
.dark .pet-dialogue {
  background: #2a1a20;
  border-color: #4a2a38;
  color: #d8c8c0;
}
.dark .pet-interact-btn {
  background: #241c1a;
  border-color: #3a2e28;
  color: #d8c8c0;
}
.dark .pet-interact-btn:hover {
  border-color: #ff7aac;
  background: #2a1a20;
}
.dark .pet-tabs {
  border-bottom-color: #3a2e28;
}
.dark .pet-tab-btn {
  color: #a09088;
}
.dark .pet-tab-btn:hover {
  color: #ede0d8;
  background: #2a1a20;
}
.dark .pet-tab-btn.active {
  background: #ff7aac;
  color: #1a1412;
}
.dark .pet-work-row {
  background: #1a1412;
  border-color: #3a2e28;
}
.dark .pet-work-row:hover {
  border-color: #4a2a38;
}
.dark .pet-work-name {
  color: #ede0d8;
}
.dark .pet-work-meta {
  color: #a09088;
}
.dark .pet-work-btn {
  background: #ff7aac;
  color: #1a1412;
}
.dark .pet-work-btn:hover {
  background: #ff9ec2;
}
.dark .pet-work-btn:disabled {
  background: #3a2e28;
  color: #6a5a50;
}
.dark .pet-work-active {
  background: linear-gradient(135deg, #2a1a20, #352028);
  border-color: #4a2a38;
}
.dark .pet-work-timer {
  color: #ff7aac;
}
.dark .pet-work-cancel-btn {
  background: #241c1a;
  border-color: #3a2e28;
  color: #a09088;
}
.dark .pet-work-cancel-btn:hover {
  border-color: #ff7aac;
  color: #ff7aac;
}
.dark .pet-shop-cat-btn {
  background: #241c1a;
  border-color: #3a2e28;
  color: #a09088;
}
.dark .pet-shop-cat-btn:hover {
  border-color: #ff7aac;
  color: #ede0d8;
}
.dark .pet-shop-cat-btn.active {
  border-color: #ff7aac;
  background: #2a1a20;
  color: #ff7aac;
}
.dark .pet-shop-row {
  background: #1a1412;
  border-color: #3a2e28;
}
.dark .pet-shop-name {
  color: #ede0d8;
}
.dark .pet-shop-effect {
  color: #a09088;
}
.dark .pet-shop-owned {
  color: #ff7aac;
}
.dark .pet-shop-buy:disabled {
  background: #3a2e28;
  color: #6a5a50;
}
.dark .pet-shop-use {
  background: #2a1a20;
  border-color: #4a2a38;
  color: #ff7aac;
}
.dark .pet-shop-use:hover {
  background: #4a2a38;
  color: #ede0d8;
}
.dark .pet-title-equipped {
  background: #2a1a20;
  color: #ff7aac;
}
.dark .pet-story-entry {
  border-bottom-color: #3a2e28;
}
.dark .pet-story-time {
  color: #a09088;
}
.dark .pet-story-desc {
  color: #d8c8c0;
}
.dark .pet-story-text {
  color: #d8c8c0;
}
.dark .pet-tutorial-item {
  background: #1a1412;
  border-color: #3a2e28;
}
.dark .pet-help-fab {
  background: #241c1a;
  border-color: #3a2e28;
  color: #d8c8c0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.dark .pet-help-fab:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
.dark .game-info-btn {
  background: #241c1a;
  border-color: #3a2e28;
  color: #a09088;
}
.dark .game-info-btn:hover {
  border-color: #ff7aac;
  color: #ff7aac;
  background: #2a1a20;
}
.dark .game-modal-footer {
  border-top-color: #3a2e28;
}

/* ── 响应式 ── */
@media (max-width: 639px) {
  .pet-main {
    flex-direction: column;
  }
  .pet-left {
    width: 100%;
    flex-shrink: 0;
  }
  .pet-neko-display {
    min-height: 160px;
    padding: 1.25rem;
  }
  .pet-neko-img {
    width: 120px;
    height: 120px;
  }
  .pet-neko-img.stage-1 { width: 130px; height: 130px; }
  .pet-neko-img.stage-2 { width: 140px; height: 140px; }
  .pet-neko-img.stage-3 { width: 150px; height: 150px; }
  .pet-neko-img.stage-4 { width: 160px; height: 160px; }
  .pet-interactions {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .pet-interact-btn {
    padding: 0.4rem 0.25rem;
    font-size: 0.7rem;
  }
  .pet-interact-icon {
    font-size: 1rem;
  }
  .pet-tabs {
    gap: 0.15rem;
  }
  .pet-tab-btn {
    padding: 0.3rem 0.55rem;
    font-size: 0.7rem;
  }
  .pet-top-bar {
    gap: 0.3rem;
    padding: 0.5rem 0.65rem;
  }
  .pet-stat {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
  }
  .pet-help-fab {
    bottom: 5rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }
}

/* ═══════════════════════════════════════════
   访客记忆 + 登录引导 Toast 样式（2026-07-01）
   ═══════════════════════════════════════════ */

/* ── Toast 登录引导 ── */
.auth-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  max-width: 420px;
  width: calc(100% - 2rem);
  background: linear-gradient(135deg, #ff5c96 0%, #ff8db5 100%);
  color: white;
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(255, 92, 150, 0.4);
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.25s ease;
}
.auth-toast--in {
  transform: translateY(0);
  opacity: 1;
}
.auth-toast--out {
  transform: translateY(120%);
  opacity: 0;
}
.auth-toast-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 1.25rem;
  position: relative;
}
.auth-toast-msg {
  flex: 1 1 100%;
  font-size: 0.925rem;
  font-weight: 600;
  line-height: 1.4;
}
.auth-toast-btns {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.auth-toast-hint {
  font-size: 0.8rem;
  opacity: 0.85;
}
.auth-toast-register,
.auth-toast-login {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: 2rem;
  font-size: 0.825rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}
.auth-toast-register {
  background: rgba(255,255,255,0.25);
  color: white;
  border: 1.5px solid rgba(255,255,255,0.5);
}
.auth-toast-register:hover {
  background: rgba(255,255,255,0.4);
  color: white;
}
.auth-toast-login {
  background: white;
  color: #ff5c96;
}
.auth-toast-login:hover {
  background: #fff0f5;
  color: #e64d82;
}
.auth-toast-close {
  position: absolute;
  top: 0.35rem;
  right: 0.5rem;
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  line-height: 1;
}
.auth-toast-close:hover {
  color: white;
}

/* ── 首页访客故事卡片 ── */
.visitor-story-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--glass-shadow);
  padding: 1.5rem 1.75rem;
  text-align: center;
}
.visitor-story-title {
  font-family: 'Lolita', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 0.5rem;
}
.visitor-story-soul {
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
  color: var(--heading);
}
.visitor-story-days {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.visitor-story-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
  font-size: 0.825rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.visitor-story-footer {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.visitor-forget-btn {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}
.visitor-forget-btn:hover {
  color: var(--color-neko-500);
  border-color: var(--color-neko-300);
  background: rgba(255, 240, 245, 0.4);
}

/* 暗色模式 */
.dark .visitor-story-card {
  background: var(--surface-alt);
  border-color: var(--border);
  box-shadow: var(--glass-shadow);
}
.dark .visitor-story-title {
  color: var(--heading);
}
.dark .visitor-story-soul {
  color: var(--heading);
}
.dark .visitor-story-days {
  color: var(--text-muted);
}
.dark .visitor-story-stats {
  color: var(--text-muted);
}
.dark .visitor-story-footer {
  color: var(--text-muted);
}
.dark .visitor-forget-btn {
  color: var(--text-muted);
  border-color: var(--glass-border);
}
.dark .visitor-forget-btn:hover {
  color: var(--color-neko-400);
  border-color: var(--color-neko-700);
  background: rgba(42, 26, 32, 0.4);
}

/* 首页侧边栏紧凑版"你和 neko 的故事" */
.visitor-story-compact .visitor-story-card {
  padding: 1rem 1.25rem;
}
.visitor-story-compact .visitor-story-title {
  font-size: 1rem;
  margin-bottom: 0.35rem;
}
.visitor-story-compact .visitor-story-soul {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}
.visitor-story-compact .visitor-story-days {
  font-size: 0.8rem;
  margin-bottom: 0.4rem;
}
.visitor-story-compact .visitor-story-stats {
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.4rem;
}
.visitor-story-compact .visitor-story-footer {
  margin-bottom: 0.5rem;
}

/* ── 页面顶部问候条（替代导航气泡，更显眼）── */
.visitor-greeting-bar {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: linear-gradient(135deg, #fff0f5 0%, #ffe0ec 100%);
  border-bottom: 2px solid #fbc8e0;
  color: #4a3028;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  animation: greetingSlideIn 0.4s ease-out;
  overflow: hidden;
}
.visitor-greeting-bar.hidden {
  display: none;
}
.visitor-greeting-bar.greeting-bar--out {
  animation: greetingSlideOut 0.35s ease-in forwards;
}
#greeting-bar-text {
  flex: 1;
  max-width: 600px;
  line-height: 1.5;
}
.greeting-bar-close {
  background: none;
  border: none;
  color: #c0909a;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0.15rem 0.4rem;
  line-height: 1;
  border-radius: 50%;
  transition: all 0.2s;
  flex-shrink: 0;
}
.greeting-bar-close:hover {
  color: #e88;
  background: rgba(255,150,150,0.15);
}
@keyframes greetingSlideIn {
  from {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-width: 0;
  }
  to {
    opacity: 1;
    max-height: 60px;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom-width: 2px;
  }
}
@keyframes greetingSlideOut {
  from {
    opacity: 1;
    max-height: 60px;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom-width: 2px;
  }
  to {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-width: 0;
  }
}

/* ── 移动端：问候条适配 ── */
@media (max-width: 640px) {
  .visitor-greeting-bar {
    font-size: 0.825rem;
    padding: 0.5rem 0.75rem;
    text-align: left;
  }
  #greeting-bar-text {
    max-width: 100%;
  }
  .greeting-bar-close {
    font-size: 1.1rem;
    padding: 0.1rem 0.3rem;
  }
}

/* ── 暗色模式适配 ── */
.dark .auth-toast {
  box-shadow: 0 8px 32px rgba(255, 92, 150, 0.25);
}
.dark .visitor-greeting-bar {
  background: linear-gradient(135deg, #2d1b2e 0%, #1e1520 100%);
  border-bottom-color: #4a2d3a;
  color: #e0c8c8;
}
.dark .greeting-bar-close {
  color: #806a70;
}
.dark .greeting-bar-close:hover {
  color: #e88;
}

/* ── 移动端：Toast 适配 ── */
@media (max-width: 640px) {
  .auth-toast {
    bottom: 0.75rem;
    right: 0.75rem;
    left: 0.75rem;
    max-width: none;
    width: auto;
    border-radius: 0.85rem;
  }
  .auth-toast-inner {
    padding: 0.85rem 1rem;
  }
  .auth-toast-msg {
    font-size: 0.85rem;
  }
  .auth-toast-btns {
    width: 100%;
    justify-content: flex-start;
  }
  .auth-toast-register,
  .auth-toast-login {
    font-size: 0.78rem;
    padding: 0.35rem 0.75rem;
  }
}

/* ── 移动端：故事卡片适配 ── */
@media (max-width: 640px) {
  .visitor-story-card {
    padding: 1.1rem 1.1rem;
    margin: 0 0.25rem;
    border-radius: 0.85rem;
  }
  .visitor-story-title {
    font-size: 1.05rem;
  }
  .visitor-story-soul {
    font-size: 0.95rem;
  }
  .visitor-story-stats {
    font-size: 0.78rem;
    gap: 0.35rem 0.6rem;
  }
}

/* ═══════════════════════════════════════════
   🍓 小屋统计面板
   ═══════════════════════════════════════════ */

.stats-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.25rem 1.5rem;
  text-align: center;
  box-shadow: var(--glass-shadow);
}
.stats-panel-title {
  font-family: 'Lolita', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading);
  margin: 0 0 1rem 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.stats-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255,255,255,0.25);
  border-radius: 0.75rem;
  text-align: left;
}
.stats-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}
.stats-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-neko-500);
  line-height: 1.2;
}
.stats-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.stats-personal {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: italic;
}

/* 暗色模式 */
.dark .stats-panel {
  background: var(--surface-alt);
  border-color: var(--border);
}
.dark .stats-panel-title {
  color: var(--heading);
}
.dark .stats-item {
  background: rgba(36,28,26,0.25);
}
.dark .stats-value {
  color: var(--color-neko-400);
}
.dark .stats-label {
  color: var(--text-muted);
}
.dark .stats-personal {
  color: var(--text-muted);
}

/* 移动端适配 */
@media (max-width: 640px) {
  .stats-panel {
    padding: 1rem 1rem;
    border-radius: 0.85rem;
  }
  .stats-grid {
    gap: 0.5rem;
  }
  .stats-item {
    padding: 0.4rem 0.5rem;
  }
  .stats-value {
    font-size: 1rem;
  }
}

/* ═══════════════════════════════════════════
   ✨ 星屑卷轴 (Stardust Scroll) 导航
   ═══════════════════════════════════════════ */

/* --- 卷轴面板：默认收起 --- */
.scroll-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease;
  background: var(--surface);
  border-bottom: 1px solid transparent;
  box-shadow: var(--glass-shadow-sm);
}
/* 收起时防止 tab 键聚焦到不可见链接 */
.scroll-panel:not(.scroll-panel--open) a {
  visibility: hidden;
}

/* --- 卷轴面板：展开 --- */
.scroll-panel--open {
  max-height: 72px;
  opacity: 1;
  border-bottom-color: var(--glass-border);
}

/* --- 装饰分割线 --- */
.scroll-divider {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--color-neko-200) 25%,
    var(--color-neko-300) 50%,
    var(--color-neko-200) 75%,
    transparent 100%
  );
}

/* --- 卷轴链接 pill --- */
.scroll-link {
  white-space: nowrap;
  text-decoration: none;
}

/* --- 切换按钮展开态 --- */
#scroll-toggle.scroll-toggle--active {
  color: var(--color-neko-500);
  background-color: rgba(255, 240, 245, 0.55);
}
#scroll-toggle.scroll-toggle--active .scroll-chevron {
  transform: rotate(180deg);
}

/* --- 暗色模式：卷轴面板 --- */
.dark .scroll-panel {
  background: var(--surface-alt);
}
.dark .scroll-panel--open {
  border-bottom-color: var(--border);
}
.dark .scroll-divider {
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--color-neko-700) 25%,
    var(--color-neko-500) 50%,
    var(--color-neko-700) 75%,
    transparent 100%
  );
}
.dark #scroll-toggle.scroll-toggle--active {
  color: var(--color-neko-400);
  background-color: rgba(42, 26, 32, 0.55);
}

/* ═══════════════════════════════════════════
   🏆 游戏排行榜样式
   ═══════════════════════════════════════════ */

/* ── 排行榜容器 ── */
.lb-container {
  max-height: 500px;
  overflow-y: auto;
}

.lb-table-wrapper {
  width: 100%;
}

/* ── 排行榜表格 ── */
.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.lb-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a7060;
  border-bottom: 2px solid #f0d8d0;
  white-space: nowrap;
}
.dark .lb-table th {
  color: #a09088;
  border-bottom-color: #3a2e28;
}

.lb-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f5e8e0;
  vertical-align: middle;
}
.dark .lb-table td {
  border-bottom-color: #2a201c;
}

.lb-row-even {
  background: #fdfaf7;
}
.dark .lb-row-even {
  background: #211a18;
}

.lb-rank {
  width: 40px;
  text-align: center;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: #5a4030;
}

.lb-player {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lb-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #f0d8d0;
  flex-shrink: 0;
}
.dark .lb-avatar {
  border-color: #3a2e28;
}

.lb-nickname {
  font-weight: 600;
  color: #3a2a20;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.dark .lb-nickname {
  color: #d0b8a8;
}

.lb-score {
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 700;
  color: #ff5c96;
  white-space: nowrap;
}
.dark .lb-score {
  color: #ff7aac;
}

.lb-tb {
  font-size: 0.65rem;
  color: #8a7060;
  font-weight: 400;
}

.lb-date {
  text-align: right;
  font-size: 0.7rem;
  color: #a09088;
  white-space: nowrap;
}

.lb-empty {
  text-align: center;
  padding: 24px 0;
  color: #a09088;
  font-size: 0.85rem;
}

.lb-self {
  margin-top: 10px;
  padding: 8px 12px;
  background: #fff5f8;
  border-radius: 8px;
  font-size: 0.8rem;
  text-align: center;
  color: #5a4030;
}
.dark .lb-self {
  background: #2a1a20;
  color: #c0b0a0;
}

/* ── 排行榜入口按钮 ── */
.lb-entry-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: 9999px;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(255, 92, 150, 0.3);
  background: linear-gradient(135deg, #ff5c96, #ff9ec2);
}
.lb-entry-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 92, 150, 0.4);
  color: #fff;
}

/* ═══ 今日热点列表 ═══ */
.hot-topics-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hot-topic-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background 0.2s ease;
}

.hot-topic-item:hover {
  background: rgba(255, 92, 150, 0.06);
}

/* 排名数字 */
.hot-topic-rank {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 6px;
  background: #f0d8d0;
  color: #9b7e72;
  line-height: 1;
}

/* 前三名特殊样式 */
.hot-topic-rank-1 {
  background: linear-gradient(135deg, #ff4444, #ff6b6b);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3);
}

.hot-topic-rank-2 {
  background: linear-gradient(135deg, #ff8c42, #ffa94d);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 140, 66, 0.3);
}

.hot-topic-rank-3 {
  background: linear-gradient(135deg, #ffc048, #ffd43b);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 192, 72, 0.3);
}

/* 热点标题 */
.hot-topic-title {
  font-size: 0.9rem;
  line-height: 1.4;
  overflow: hidden;
}

.hot-topic-link {
  color: #4a3028;
  text-decoration: none;
  transition: color 0.2s ease;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hot-topic-link:hover {
  color: #ff5c96;
}

/* 前三条加粗 */
.hot-topic-top .hot-topic-link {
  font-weight: 600;
  color: #3e2018;
}

/* 热度数值 */
.hot-topic-heat {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: #c4a89b;
  font-variant-numeric: tabular-nums;
}

/* 刷新按钮旋转动画 */
.hot-topics-refreshing svg {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 底部说明 */
.hot-topics-footer {
  opacity: 0.7;
}

/* ═══ 暗色模式 — 今日热点 ═══ */
.dark .hot-topic-item:hover {
  background: rgba(255, 156, 194, 0.1);
}

.dark .hot-topic-rank {
  background: #3d2a30;
  color: #a09090;
}

.dark .hot-topic-rank-1 {
  background: linear-gradient(135deg, #cc3030, #e05555);
  color: #fff;
}

.dark .hot-topic-rank-2 {
  background: linear-gradient(135deg, #cc6e30, #e08844);
  color: #fff;
}

.dark .hot-topic-rank-3 {
  background: linear-gradient(135deg, #b89630, #c9a840);
  color: #fff;
}

.dark .hot-topic-link {
  color: #d4ccc4;
}

.dark .hot-topic-link:hover {
  color: #ff9ec2;
}

.dark .hot-topic-top .hot-topic-link {
  color: #e8ddd0;
}

.dark .hot-topic-heat {
  color: #7a6a66;
}

.dark .hot-topics-refresh:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ═══════════════════════════════════════════
   分页导航
   ═══════════════════════════════════════════ */

.pagination-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 0 0;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  justify-content: center;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
  user-select: none;
}

.pagination-btn:hover {
  color: #ff9ec2;
  border-color: #ff9ec2;
  background: #fff0f5;
}

.pagination-current {
  color: #fff !important;
  background: #ff9ec2 !important;
  border-color: #ff9ec2 !important;
  font-weight: 600;
}

.pagination-current:hover {
  color: #fff !important;
  background: #ff9ec2 !important;
}

.pagination-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  font-size: 0.875rem;
  color: var(--text-muted, #6b7280);
  user-select: none;
}

.pagination-info {
  font-size: 0.8rem;
  color: var(--text-muted, #9ca3af);
}

/* 暗色模式 */
.dark .pagination-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: #c5bfb8;
}

.dark .pagination-btn:hover {
  background: rgba(255, 158, 194, 0.1);
  border-color: rgba(255, 158, 194, 0.3);
  color: #ff9ec2;
}

.dark .pagination-current {
  background: #ff9ec2 !important;
  border-color: #ff9ec2 !important;
  color: #fff !important;
}

.dark .pagination-disabled {
  opacity: 0.3;
}

/* ═══════════════════════════════════════════
   通知系统（铃铛 / 徽章 / 通知列表）
   ═══════════════════════════════════════════ */

/* 铃铛按钮 */
.notification-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  color: var(--text-muted, #6b7280);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.notification-bell:hover {
  color: #ff9ec2;
  background: #fff0f5;
}

/* 未读数量徽章 */
.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 4px;
  border-radius: 9999px;
  background: #ff5c96;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.125rem;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 0 0 2px #fff;
}

.notification-badge-mobile {
  top: -2px;
  right: -6px;
}

/* 通知列表项 */
.notif-item {
  transition: background 0.15s, opacity 0.15s;
  cursor: pointer;
}

.notif-item:hover {
  background: #fff0f5;
}

.notif-item--unread {
  background: rgba(255, 158, 194, 0.06);
}

/* 暗色模式 */
.dark .notification-bell {
  color: #b0a89e;
}

.dark .notification-bell:hover {
  color: #ff9ec2;
  background: rgba(255, 158, 194, 0.1);
}

.dark .notification-badge {
  box-shadow: 0 0 0 2px #2a2420;
}

.dark .notif-item:hover {
  background: rgba(255, 158, 194, 0.05);
}

.dark .notif-item--unread {
  background: rgba(255, 158, 194, 0.08);
}