/* ============================================
   李宇春「皇后与梦想」歌迷游戏 - 样式表
   主题：金色 + 深紫黑，舞台皇后气质
   ============================================ */

:root {
  --bg-deep: #0a0a14;
  --bg-dark: #12122a;
  --bg-card: rgba(22, 20, 45, 0.85);
  --bg-card-hover: rgba(35, 30, 60, 0.95);
  --gold: #d4af37;
  --gold-light: #f0d77b;
  --gold-glow: rgba(212, 175, 55, 0.3);
  --coral: #e84257;
  --purple: #7c3aed;
  --purple-light: #a78bfa;
  --text: #f0f0f5;
  --text-dim: #a0a0b8;
  --text-faint: #6a6a80;
  --border: rgba(212, 175, 55, 0.15);
  --border-active: rgba(212, 175, 55, 0.5);
  --success: #4ade80;
  --error: #ef4444;
  --radius: 16px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-gold: 0 4px 24px rgba(212, 175, 55, 0.2);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  background: var(--bg-deep);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  /* 微信/iOS 浏览器防字体自动放大破坏布局 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 移动端触控优化：消除点击延迟与双击缩放，提升微信内响应速度 */
button, a, input, select, textarea, [role="button"], .game-card, .option-btn, .nav-btn {
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

/* 背景星空效果 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(232, 66, 87, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* 星星粒子 */
.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--gold-light);
  border-radius: 50%;
  opacity: 0;
  animation: twinkle 3s infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 0.8; transform: scale(1); }
}

/* 主容器 */
.app-container {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  padding-bottom: 60px;
}

/* ====== 顶部Banner ====== */
.hero {
  text-align: center;
  padding: 14px 0 40px;
  position: relative;
}

/* 北京地标装饰 - 固定在页面背景，与星空融为一体 */
.beijing-landmark {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.08));
  transition: opacity 0.6s, filter 0.6s;
  /* 底部渐变融入背景，从上到下：完全显示 → 逐渐透明 */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0.7) 75%, rgba(0,0,0,0.3) 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0.7) 75%, rgba(0,0,0,0.3) 90%, transparent 100%);
}

.beijing-landmark:hover {
  filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.2));
}

/* 左上角 - 极小，远处隐约可见 */
.landmark-1 {
  top: 30px;
  left: 25px;
  width: 45px;
  height: auto;
  opacity: 0.05;
  animation: landmarkDrift 8s ease-in-out infinite;
}

/* 右上角 - 较大 */
.landmark-2 {
  top: 25px;
  right: 25px;
  width: 130px;
  height: auto;
  opacity: 0.1;
  animation: landmarkDrift 9s ease-in-out infinite 1s;
}

/* 中部左侧 - 天坛（最大，视觉焦点） */
.landmark-tiantan {
  top: 30%;
  left: 0;
  width: 220px;
  height: auto;
  opacity: 0.14;
  animation: landmarkDrift 7.5s ease-in-out infinite 0.5s;
}

/* 中部右侧 - 较大 */
.landmark-4 {
  top: 40%;
  right: 0;
  width: 140px;
  height: auto;
  opacity: 0.09;
  animation: landmarkDrift 8.5s ease-in-out infinite 2s;
}

/* 底部左侧 - 故宫（大） */
.landmark-gugong {
  bottom: 40px;
  left: 5%;
  width: 200px;
  height: auto;
  opacity: 0.12;
  animation: landmarkDrift 9.5s ease-in-out infinite 1.2s;
}

/* 底部右侧 - 央视（中大） */
.landmark-cctv {
  bottom: 30px;
  right: 10%;
  width: 100px;
  height: auto;
  opacity: 0.08;
  animation: landmarkDrift 10s ease-in-out infinite 1.8s;
}

@keyframes landmarkDrift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (max-width: 768px) {
  .beijing-landmark { display: none; }
}

.hero-badge {
  display: inline-block;
  padding: 6px 20px;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid var(--border-active);
  border-radius: 100px;
  font-size: 13px;
  color: var(--gold-light);
  letter-spacing: 2px;
  margin-bottom: 24px;
  animation: fadeInDown 0.8s ease;
}

/* 信息条大标签：在线｜访问｜访客左右滚动（一个整体标签） */
.online-meta-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  font-size: 12px;
  color: var(--text-dim);
  opacity: 0.92;
  min-width: 0;
  max-width: 100%;
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.meta-sep {
  color: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.meta-ticker-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--gold-light);
  white-space: nowrap;
}

/* 访客昵称左右滚动（无缝，复制两份实现） */
.visitor-ticker-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 11px;
  opacity: 0.85;
  animation: tickerX 30s linear infinite;
  will-change: transform;
}

.visitor-nick {
  display: inline-flex;
  align-items: center;
  margin-right: 3em; /* 每个昵称间隔 3 个字符 */
  white-space: nowrap;
}

@keyframes tickerX {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* 返回顶部按钮（通识符号 ↑，金色发光更明显） */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd700, #d4af37, #a67c00);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  border: 2px solid rgba(255, 215, 0, 0.65);
  cursor: pointer;
  z-index: 95;
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.55), 0 0 0 4px rgba(212, 175, 55, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (max-width: 480px) {
  .back-to-top {
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
    font-size: 19px;
  }
}

.online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
  animation: onlinePulse 2s ease-in-out infinite;
}

@keyframes onlinePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.online-sep {
  color: var(--text-faint);
  margin: 0 2px;
}

/* 信息条数字层级：在线人数（最重要）> 访问次数（次级）> 访客滚动（点缀） */
#online-count {
  font-size: 15px;
  font-weight: 800;
  color: var(--gold-light);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.55);
  letter-spacing: 0.5px;
}
#visit-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.3px;
}

.hero-title {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 6px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fadeInUp 0.8s ease 0.1s both;
  text-shadow: 0 0 40px var(--gold-glow);
}

.hero-subtitle {
  font-size: 16px;
  color: var(--text-dim);
  letter-spacing: 4px;
  margin-bottom: 8px;
  animation: fadeInUp 0.8s ease 0.2s both;
}

.hero-date {
  font-size: 18px;
  color: var(--coral);
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 24px;
  animation: fadeInUp 0.8s ease 0.3s both;
}

.hero-tagline {
  max-width: 580px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-faint);
  font-style: italic;
  animation: fadeInUp 0.8s ease 0.4s both;
}

/* 21年旋律标语（21岁那句话下方、海报上方） */
.hero-journey {
  max-width: 580px;
  margin: 18px auto 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--gold-light);
  text-align: center;
  letter-spacing: 1px;
  animation: fadeInUp 0.8s ease 0.45s both;
}
.hero-journey-sub {
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.5px;
}
.hero-journey-final {
  color: var(--coral);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 2px;
}

/* 我想对 Lee 说 · 按钮（顶部引言卡内，弱化小手幽灵按钮） */
.hero-lee-wrap { margin-top: 22px; text-align: right; }
.hero-lee-btn {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  padding: 5px 14px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.5;
  text-align: left;
  color: rgba(212, 175, 55, 0.88);
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.82;
  max-width: 100%;
  box-shadow: none;
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.hero-lee-btn .lee-btn-title {
  font-weight: 700;
  color: rgba(255, 216, 140, 1);
  letter-spacing: 1px;
}
/* 小手上下跳动（提示可点击）+ 金色光晕圆底（更醒目，强调"点我"） */
.hero-lee-btn .lee-btn-hand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  font-size: 15px;
  line-height: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 224, 150, 0.95) 0%, rgba(212, 175, 55, 0.55) 55%, rgba(212, 175, 55, 0.2) 100%);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.15);
  color: #fff;
  text-shadow: 0 1px 2px rgba(120, 80, 0, 0.6);
  animation: leeHandBounce 1s ease-in-out infinite;
}
@keyframes leeHandBounce {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  30% { transform: translateY(-3px) scale(1.06) rotate(-8deg); }
  60% { transform: translateY(0) scale(0.98) rotate(4deg); }
}
.hero-lee-btn:hover { opacity: 1; background: rgba(212, 175, 55, 0.16); border-color: rgba(212, 175, 55, 0.6); transform: translateY(-1px); }
@media (max-width: 480px) {
  .hero-lee-wrap { text-align: center; }
}

/* 我想对 Lee 说 · 诗卡弹窗 */
.lee-letter-modal { z-index: 120; }
.lee-letter-card {
  position: relative;
  max-width: 440px;
  width: calc(100% - 32px);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  text-align: center;
  padding: 36px 28px 28px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.12), transparent 60%),
    var(--bg-dark);
  border: 1px solid var(--border-active);
}
.lee-letter-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-active);
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.lee-letter-close:hover { color: var(--gold-light); border-color: var(--gold-light); transform: rotate(90deg); }
.lee-letter-badge { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.lee-letter-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--gold-light);
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
  margin-bottom: 6px;
}
.lee-letter-sub { font-size: 12px; color: var(--text-dim); letter-spacing: 1px; margin-bottom: 18px; }
.lee-letter-poem { text-align: center; }
.lee-letter-poem p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 2.0;
  letter-spacing: 1px;
  color: #f3e9d2;
  font-family: "Songti SC", "STSong", "SimSun", serif;
}
.lee-letter-sign { margin-top: 6px; font-size: 13px; color: var(--coral); letter-spacing: 2px; font-weight: 600; }
@media (max-width: 480px) {
  .lee-letter-card { padding: 30px 20px 22px; }
  .lee-letter-poem p { font-size: 14px; }
}

/* Q版春春浮动装饰 */
.hero-mascot-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  margin: -14px auto 0;
  animation: fadeInUp 0.8s ease 0.2s both;
}

.hero-mascot-main {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: mascotBounce 3s ease-in-out infinite;
  z-index: 3;
  filter: drop-shadow(0 4px 12px rgba(212, 175, 55, 0.25));
}

.hero-mascot-float {
  position: absolute;
  width: 52px;
  height: 52px;
  object-fit: contain;
  z-index: 2;
  opacity: 0.85;
  animation: mascotFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(212, 175, 55, 0.15));
}

.hero-float-1 {
  top: 5%;
  left: 8%;
  animation-delay: 0s;
}

.hero-float-2 {
  top: 8%;
  right: 5%;
  animation-delay: 1.2s;
}

.hero-float-3 {
  bottom: 8%;
  left: 12%;
  animation-delay: 2.4s;
}

.hero-float-4 {
  bottom: 5%;
  right: 10%;
  animation-delay: 3.6s;
  width: 58px;
  height: 58px;
}

@keyframes mascotBounce {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  30% { transform: translate(-50%, -50%) translateY(-12px); }
  50% { transform: translate(-50%, -50%) translateY(0); }
  70% { transform: translate(-50%, -50%) translateY(-6px); }
}

@keyframes mascotFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(3deg); }
  50% { transform: translateY(3px) rotate(-2deg); }
  75% { transform: translateY(-6px) rotate(1deg); }
}

@keyframes mascotPop {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 巡演主题海报 */
.hero-poster {
  max-width: 680px;
  margin: 24px auto 16px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-active);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 30px rgba(212, 175, 55, 0.12);
  animation: fadeInUp 0.8s ease 0.45s both;
  transition: var(--transition);
  position: relative;
}

.hero-poster:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 40px rgba(212, 175, 55, 0.18);
}

.hero-poster-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 图片底部渐隐，避免腰部生硬切割 */
.hero-poster-img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
}

/* ====== 顶部引言区 ====== */
.hero-quote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin: 60px 0 40px;
  padding: 24px 28px 24px 56px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.06) 0%, rgba(124, 58, 237, 0.05) 100%);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  animation: fadeInUp 1s ease 0.1s both;
}

.hero-quote::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.08) 0%, transparent 60%);
  pointer-events: none;
  animation: quoteGlow 8s ease-in-out infinite;
}

@keyframes quoteGlow {
  0%, 100% { transform: translateX(0) scale(1); opacity: 0.6; }
  50% { transform: translateX(30%) scale(1.1); opacity: 1; }
}

/* 左侧人物形象 */
.hero-quote-figure {
  position: relative;
  flex-shrink: 0;
  width: auto;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.hero-quote-img {
  height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(212, 175, 55, 0.08))
          drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3));
  position: relative;
  z-index: 2;
  animation: figureFloat 5s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, rgba(0,0,0,0.5) 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 50%, rgba(0,0,0,0.5) 75%, transparent 100%);
}

@keyframes figureFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.hero-quote-figure-glow {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 20px;
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.18) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 1;
  filter: blur(10px);
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.7; transform: translateX(-50%) scale(1.1); }
}

/* 右侧文字区：按内容宽度（不再拉伸），配合整体居中消除右侧留白 */
.hero-quote-text-wrap {
  flex: 0 1 auto;
  min-width: 0;
  position: relative;
  z-index: 2;
}

/* 顶部引言·引导小字（与下方歌词正文协调：同衬线、金色调、斜体叙述） */
.hero-quote-lead {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-style: italic;
  color: rgba(212, 175, 55, 0.88);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.35),
               0 1px 2px rgba(0, 0, 0, 0.4);
}

.hero-quote-text {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 1.5px;
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;

  /* 流沙金色 */
  background: linear-gradient(
    120deg,
    #8b6914 0%,
    #d4af37 15%,
    #fff8dc 30%,
    #ffd700 45%,
    #d4af37 60%,
    #b8860b 75%,
    #ffd700 90%,
    #8b6914 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: goldFlow 6s linear infinite;

  /* 金属高光阴影 */
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.35))
          drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  text-shadow: none;
}

@keyframes goldFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* 大段文本 + 开心玉米图（右侧点缀） */
.hero-quote-text-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 12px 0;
}
.hero-quote-text-row .hero-quote-text {
  margin: 0;
}
/* 诗句 + 署名（— 李宇春）文本块：署名在诗句正下方、居右 */
.hero-quote-text-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.hero-quote-text-block .hero-quote-text {
  margin: 0;
}
.hero-quote-text-block .hero-quote-from {
  margin-left: auto;
  text-align: right;
  font-size: 12px;
  letter-spacing: 2px;
  opacity: 0.8;
  white-space: nowrap;
}
.hero-quote-happy {
  width: 66px;
  height: 66px;
  object-fit: contain;
  flex-shrink: 0;
  margin-left: auto;
  filter: drop-shadow(0 4px 10px rgba(212, 175, 55, 0.25))
          drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
  animation: happyBounce 2.4s ease-in-out infinite;
}
@keyframes happyBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-3deg); }
}

.hero-quote-from {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--gold-light);
  letter-spacing: 3px;
  opacity: 0.75;
  font-style: italic;
  text-align: right;
}

.hero-score {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-active);
  border-radius: 100px;
  padding: 10px 20px 10px 12px;
  margin: 20px auto 12px;
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-gold);
  animation: fadeInUp 0.8s ease 0.45s both;
}

.hero-score:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(212, 175, 55, 0.25);
}

.hero-score-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(124,58,237,0.1));
  border: 2px solid var(--border-active);
  flex-shrink: 0;
}

.hero-score-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-score-body {
  text-align: left;
}

.hero-score-label {
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.2;
}

.hero-score-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--gold-light);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* 倒计时 */
.countdown {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
  margin-bottom: 56px;
  animation: fadeInUp 0.8s ease 0.5s both;
}

.countdown-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  min-width: 80px;
  text-align: center;
  backdrop-filter: blur(10px);
}

.countdown-num {
  font-size: 32px;
  font-weight: 800;
  color: var(--gold-light);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.countdown-label {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 6px;
  letter-spacing: 1px;
}

/* ====== 玩家信息 ====== */
.player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 24px;
  margin-bottom: 32px;
  backdrop-filter: blur(10px);
  animation: fadeIn 1s ease 0.6s both;
}

.player-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.player-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--coral));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  color: var(--bg-deep);
  flex-shrink: 0;
}

.player-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.player-region {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 2px;
}

.player-rank {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 2px;
}

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

.score-label {
  font-size: 12px;
  color: var(--text-faint);
}

.score-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}

/* ====== 游戏选择卡片 ====== */
.section-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title::before {
  content: '';
  width: 4px;
  height: 22px;
  background: linear-gradient(to bottom, var(--gold), var(--coral));
  border-radius: 2px;
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 60px;
}

.game-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 92px 26px 24px;   /* 右侧预留：64px图 + 10px偏移 + 18px间距 = 92px */
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;        /* 名称/描述/简介左对齐 */
  text-align: left;
}

.game-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.05), transparent);
  transition: left 0.6s ease;
}

/* 🔥 做数据号召卡片（橙红火焰色，2026-08-24）：与七夕粉/默认金区分，突出「行动·冲数据」 */
.game-card.game-card-feed {
  background: linear-gradient(160deg, rgba(255, 122, 69, 0.18), rgba(255, 159, 67, 0.04) 70%);
  border-color: rgba(255, 122, 69, 0.5);
}
.game-card.game-card-feed:hover {
  border-color: #ff8a50;
  box-shadow: 0 10px 30px rgba(255, 122, 69, 0.25);
}
.game-card.game-card-feed .game-card-title { color: #ffb27a; }
.game-card.game-card-feed .game-diff .on { color: #ff9f43; }
.game-card.game-card-feed .game-play-count { color: #ff9f43; }

.game-card:hover::before {
  left: 100%;
}

.game-card:hover {
  border-color: var(--border-active);
  transform: translateY(-4px);
  box-shadow: var(--shadow-gold);
  background: var(--bg-card-hover);
}

.game-icon {
  font-size: 28px;
  margin-bottom: 10px;
  display: block;
}

.game-card-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--text);
}
/* 游戏难度星级（标题后黄色小星星） */
.game-diff {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  letter-spacing: 1px;
  vertical-align: 2px;
}
.game-diff .on {
  color: #ffd700;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.55);
}
.game-diff .off {
  color: rgba(255, 255, 255, 0.25);
}

.game-card-desc {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
  font-weight: 400;
  opacity: 0.78;
  margin-bottom: 12px;
}

.game-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-faint);
}

/* 🔧 移动端（≤768px）：卡片下方「10题 · 15秒/题 / 无限闯关 · 逐关加难」等描述字体调小 */
@media (max-width: 768px) {
  .game-card-meta { font-size: 11px; gap: 8px; }
}

/* 游戏卡片内的Q版小图 */
.game-card-mascot {
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -36px;   /* 垂直居中（72px 图的一半），不用 transform 以免覆盖 hover 动效 */
  width: 72px;
  height: 72px;
  object-fit: contain;
  opacity: 0.85;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.game-card:hover .game-card-mascot {
  transform: scale(1.3) rotate(-8deg);
  opacity: 1;
  filter: drop-shadow(0 4px 12px rgba(212, 175, 55, 0.5));
}

/* 游戏卡片吉祥物小图下的累计玩过次数（如 2,345 次） */
/* 🔧 2026-08-15：下移避开吉祥物悬浮放大(1.3x)遮挡 + 金色胶囊更醒目 */
.game-play-count {
  position: absolute;
  top: calc(50% + 60px);
  right: 4px;
  width: 84px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffd700;
  background: rgba(18, 16, 38, 0.72);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 999px;
  padding: 3px 6px;
  letter-spacing: 0.4px;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  opacity: 1;
  pointer-events: none;
  white-space: nowrap;
}

/* 🔧 移动端（≤768px）：次数不再悬浮右下角，改为流式排在小字(meta)下方，避免遮挡 */
@media (max-width: 768px) {
  .game-play-count {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    order: 99;                 /* 排到卡片最底部（meta 之后） */
    align-self: flex-start;
    margin-top: 8px;
    width: auto;
    min-width: 80px;
    font-size: 12px;
    padding: 2px 8px;
  }
}

.game-tag {
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
}


.tag-hot { background: rgba(232, 66, 87, 0.15); color: var(--coral); }
.tag-new { background: rgba(74, 222, 128, 0.15); color: var(--success); }
.tag-classic { background: rgba(212, 175, 55, 0.15); color: var(--gold-light); }
.tag-fun { background: rgba(124, 58, 237, 0.15); color: var(--purple-light); }

/* ====== 游戏区域 ====== */
.game-screen {
  display: none;
  animation: fadeInUp 0.5s ease;
}

.game-screen.active {
  display: block;
}

/* 🎨 游戏自定义背景（2026-08-16）：用户上传/内置预设，所有游戏共用 */
.game-screen { position: relative; }
.game-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.game-bg::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(15, 10, 32, .22); /* 压暗蒙版：轻压暗即可，太重会盖住背景 */
}
/* 图片背景模糊由 JS 按档位控制（0/3/7/12px），CSS 不再固定 */
/* 内置渐变预设（李宇春玉米黄系 + 通用风格） */
.game-bg-corn { background: linear-gradient(160deg, #f7d774, #d9a13b 45%, #8a5a1f); }
.game-bg-blackgold { background: linear-gradient(160deg, #14102a, #2a1c05 50%, #0b0812); }
.game-bg-darkblue { background: linear-gradient(160deg, #0e1a33, #16284d 55%, #0a1426); }
.game-bg-spring { background: linear-gradient(160deg, #123522, #1c5a3a 55%, #0d2717); }
.game-bg-sunset { background: linear-gradient(160deg, #4a1e3a, #7a3b2a 50%, #2a1220); }
/* 有背景时：内容半透明保证可读，背景隐约透出 */
.has-bg .game-header, .has-bg #game-content { position: relative; z-index: 1; }
.has-bg #game-content { background: rgba(15, 10, 32, .28); border-radius: 14px; }
.has-bg .connect-grid { background: rgba(255, 255, 255, .05); }
.has-bg .connect-cell { background: linear-gradient(135deg, rgba(58, 35, 112, .5), rgba(42, 21, 80, .5)); }
/* 首页"歌迷答题"模块标题下的更换游戏背景按钮 */
.quiz-bg-btn {
  margin-left: 10px; padding: 5px 12px; font-size: 12px;
  border-radius: 100px; background: rgba(212,175,55,.15);
  border: 1px solid rgba(212,175,55,.5); color: #ffd9a0; cursor: pointer;
  vertical-align: middle; transition: .2s; white-space: nowrap;
}
.quiz-bg-btn:hover { background: rgba(212,175,55,.3); color: #ffe9b0; }
/* 背景透明度调节 */
.bg-opacity-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; }
.bg-opacity-label { font-size: 13px; color: var(--gold-light); white-space: nowrap; }
.bg-opacity-val { font-size: 13px; color: #fff; min-width: 38px; text-align: right; }
.bg-opacity-row input[type="range"] {
  flex: 1; height: 4px; -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,.2); border-radius: 2px; outline: none; cursor: pointer;
}
.bg-opacity-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.bg-opacity-tip { font-size: 11px; color: rgba(255,255,255,.5); margin: 2px 0 6px; text-align: left; }
/* 背景模糊度档位 */
.bg-blur-title { font-size: 14px; color: var(--gold-light); margin: 10px 0 8px; text-align: left; }
/* 背景弹窗两个设置区标题（🖼 背景图片 / 🪟 题目面板）：金色底条 + 边框强化 */
.bg-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: #ffe9b0;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 14px 0 8px;
  text-align: left;
  letter-spacing: 0.5px;
}
.bg-blur-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bg-blur-opt {
  padding: 8px 4px; font-size: 12px; border-radius: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.8); cursor: pointer; transition: .2s;
}
.bg-blur-opt:hover { border-color: rgba(212,175,55,.5); color: #fff; }
.bg-blur-opt.active { background: rgba(212,175,55,.25); border-color: var(--gold); color: #ffe9b0; box-shadow: 0 0 10px rgba(212,175,55,.3); }
.bg-blur-tip { font-size: 11px; color: rgba(255,255,255,.5); margin: 6px 0 4px; text-align: left; }
/* 背景设置弹窗 */
.bg-modal-box { width: min(420px, 92vw); }
/* 网站介绍弹窗（长图 881×10328 纵向长图，弹窗内滚动查看） */
.intro-modal-box { width: min(500px, 94vw); }
.intro-img-wrap { max-height: calc(100vh - 210px); overflow-y: auto; border-radius: 12px; margin: 12px 0 14px; border: 1px solid rgba(212,175,55,.25); }
.intro-img-wrap img { width: 100%; display: block; border-radius: 12px; }
.bg-current { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; }
.bg-current-label { font-size: 12px; color: rgba(255, 255, 255, .75); }
.bg-upload-btn {
  display: inline-block; margin: 10px 0 4px; padding: 10px 18px;
  border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: #1a0a2e;
}
.bg-preset-title { font-size: 14px; color: var(--gold-light); margin: 14px 0 8px; text-align: left; }
.bg-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bg-preset {
  border: 2px solid rgba(255, 255, 255, .12); border-radius: 12px; overflow: hidden;
  cursor: pointer; text-align: center; padding-bottom: 6px; background: rgba(255, 255, 255, .04);
  transition: .2s;
}
.bg-preset:hover { transform: translateY(-2px); }
.bg-preset.active { border-color: var(--gold); box-shadow: 0 0 12px rgba(212, 175, 55, .4); }
.bg-preset-thumb { height: 64px; background-size: cover; background-position: center; }
.bg-preset-name { font-size: 12px; color: #fff; margin-top: 4px; }
.bg-preset-desc { font-size: 10px; color: rgba(255, 255, 255, .55); }
.bg-current-thumb { width: 60px; height: 42px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .2); }
.bg-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.bg-thumb-corn { background: linear-gradient(160deg, #f7d774, #d9a13b 45%, #8a5a1f); }
.bg-thumb-blackgold { background: linear-gradient(160deg, #14102a, #2a1c05 50%, #0b0812); }
.bg-thumb-darkblue { background: linear-gradient(160deg, #0e1a33, #16284d 55%, #0a1426); }
.bg-thumb-spring { background: linear-gradient(160deg, #123522, #1c5a3a 55%, #0d2717); }
.bg-thumb-sunset { background: linear-gradient(160deg, #4a1e3a, #7a3b2a 50%, #2a1220); }

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 8px 16px;
  border-radius: 100px;
  cursor: pointer;
  font-size: 14px;
  transition: var(--transition);
}

.back-btn:hover {
  border-color: var(--border-active);
  color: var(--gold-light);
}

.game-progress {
  display: flex;
  align-items: center;
  gap: 16px;
}

.progress-text {
  font-size: 14px;
  color: var(--text-dim);
}

.progress-bar {
  width: 120px;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--gold), var(--gold-light));
  border-radius: 3px;
  transition: width 0.3s ease;
  width: 0%;
}

/* 计时器 */
.game-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--coral);
  font-variant-numeric: tabular-nums;
}

.timer-bar {
  width: 80px;
  height: 4px;
  background: rgba(232, 66, 87, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.timer-fill {
  height: 100%;
  background: var(--coral);
  border-radius: 2px;
  transition: width 1s linear;
}

/* ====== 题目卡片 ====== */
.question-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  margin-bottom: 24px;
  position: relative;
}

.fill-blank-rail {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(260px, 1.4fr) minmax(120px, 1fr);
  align-items: center;
  gap: 12px;
}

.fill-blank-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fill-blank-side-text {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

.fill-blank-side-text.muted {
  opacity: 0.65;
}

.fill-blank-source-meta {
  margin-top: 16px;
  text-align: center;
}

.fill-blank-source-line {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.18);
  color: var(--gold-light);
  font-size: 12px;
  line-height: 1.6;
}

.lyrics-display {
  text-align: center;
  padding: 24px 0;
}

.lyrics-line {
  font-size: 20px;
  line-height: 2;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.lyrics-blank {
  display: inline-block;
  min-width: 80px;
  border-bottom: 2px solid var(--gold);
  margin: 0 4px;
  text-align: center;
  color: var(--gold-light);
  font-weight: 700;
}

.lyrics-blank.empty {
  color: transparent;
}

.lyrics-hint {
  font-size: 13px;
  color: var(--text-faint);
  margin-top: 16px;
  padding: 8px 16px;
  background: rgba(212, 175, 55, 0.05);
  border-radius: 8px;
  display: inline-block;
}

.question-text {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 8px;
  color: var(--text);
}

.question-explain {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
  padding: 12px 16px;
  background: rgba(74, 222, 128, 0.08);
  border-left: 3px solid var(--success);
  border-radius: 8px;
  margin-top: 16px;
  display: none;
}

.question-explain.show {
  display: block;
  animation: fadeIn 0.3s ease;
}

/* ====== 选项按钮 ====== */
.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.options-grid.single {
  grid-template-columns: 1fr;
}

.option-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  position: relative;
  z-index: 1;
}

.option-btn:hover:not(.disabled) {
  border-color: var(--border-active);
  background: var(--bg-card-hover);
}

.option-btn:active:not(.disabled) {
  background: var(--bg-card-hover);
  border-color: var(--gold);
  transform: scale(0.97);
  transition: transform 0.08s ease;
}

.option-btn .option-key {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  flex-shrink: 0;
  transition: var(--transition);
}

.option-btn:hover:not(.disabled) .option-key {
  background: var(--gold);
  color: var(--bg-deep);
}

.option-btn.correct {
  border-color: var(--success);
  /* 答对反馈不再让选项变透明：背景保持深色蒙版（面板可调），靠边框+图标提示 */
}

.option-btn.correct .option-key {
  background: var(--success);
  color: var(--bg-deep);
}

.option-btn.wrong {
  border-color: var(--error);
  /* 答错反馈不再让选项变透明：背景保持深色蒙版（面板可调），靠边框+图标提示 */
}

.option-btn.wrong .option-key {
  background: var(--error);
  color: var(--text);
}

.option-btn.disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.option-btn.disabled:not(.correct):not(.wrong) {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-dim);
}

/* ====== 下一题按钮 ====== */
.next-question-btn {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--border-active);
  border-radius: 100px;
  padding: 8px 16px;
  color: var(--gold-light);
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: var(--transition);
  margin-top: 14px;
}

.next-question-btn:hover {
  background: var(--bg-card-hover);
  transform: scale(1.05);
}

/* ====== 答题反馈 ====== */
.answer-reveal {
  text-align: center;
  padding: 14px 20px;
  margin-top: 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  animation: fadeInUp 0.4s ease;
}

.answer-reveal.correct {
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.25);
  color: var(--success);
}

.answer-reveal.wrong {
  background: rgba(232, 66, 87, 0.12);
  border: 1px solid rgba(232, 66, 87, 0.25);
  color: var(--coral);
}

/* 答题反馈：全屏点击拦截层（防止点【下一题】时误触下方选项） */
.feedback-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.25);
}

/* 答题反馈：整体弹窗（图 + 文字 + 下一题胶囊） */
.feedback-mascot {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  text-align: center;
  /* 带边框 + 50% 透明背景 */
  background: rgba(12, 10, 22, 0.5);
  border: 1.5px solid rgba(212, 175, 55, 0.55);
  border-radius: 22px;
  padding: 20px 30px 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  animation: feedbackPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  pointer-events: auto;
}

.feedback-mascot img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  display: block;
  margin: 0 auto 6px;
  animation: feedbackBounce 0.6s ease-in-out infinite;
}

.feedback-mascot .feedback-bubble {
  background: none;
  border: none;
  padding: 2px 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-light);
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* 答案行（提示文字下方、下一题上方） */
.feedback-mascot .feedback-answer {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-light);
}

.feedback-mascot .feedback-answer.correct {
  color: var(--success);
}

.feedback-mascot .feedback-answer.wrong {
  color: var(--coral);
}

.feedback-mascot.show-correct .feedback-bubble {
  color: var(--success);
}

.feedback-mascot.show-wrong .feedback-bubble {
  color: var(--coral);
}

/* 答题解析（答对/答错都展示，加深理解） */
.feedback-mascot .feedback-explain {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 320px;
  text-align: left;
  display: inline-block;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 6px 10px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
}

@keyframes feedbackPopIn {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes feedbackBounce {
  0%, 100% { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
}

/* ====== 结果页面 ====== */
.result-screen {
  text-align: center;
  padding: 28px 20px;
}

.result-title {
  font-size: 23px;
  font-weight: 800;
  margin-bottom: 6px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.result-score {
  font-size: 30px;
  font-weight: 900;
  color: var(--gold-light);
  margin: 12px 0 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

.result-message {
  font-size: 15px;
  color: var(--text-dim);
  margin-bottom: 8px;
  line-height: 1.6;
}

.result-detail {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-faint);
  margin-bottom: 18px;
}

.result-mascot {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  padding: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,.03) 70%);
  border: 2px solid rgba(242,201,76,.5);
  box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 0 20px rgba(242,201,76,.22);
}

.result-mascot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.result-round-score {
  color: var(--success);
  font-weight: 900;
}

.result-total-score {
  display: inline-block;
  padding: 10px 24px;
  margin-bottom: 24px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid var(--border-active);
  border-radius: 12px;
  font-size: 16px;
  color: var(--gold-light);
}

.result-total-score strong {
  font-size: 24px;
  color: var(--gold);
  font-weight: 900;
}

/* 积分明细卡 */
.result-score-box {
  display: inline-block;
  min-width: 260px;
  padding: 12px 20px;
  margin: 0 auto 22px;
  background: rgba(20, 18, 45, 0.5);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: left;
}
.result-score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 7px 0;
  font-size: 14px;
  color: var(--text-dim);
}
.result-score-row + .result-score-row {
  border-top: 1px dashed rgba(212, 175, 55, 0.18);
}
.result-score-row b {
  color: var(--gold-light);
  font-weight: 700;
  font-size: 15px;
}
.result-score-row .result-add-num {
  color: var(--success);
}
.result-score-row #result-total-score {
  color: var(--gold);
  font-size: 18px;
  font-weight: 900;
}

.result-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--bg-deep);
  border: none;
  padding: 14px 36px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  letter-spacing: 1px;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

/* 登录/注册等提交按钮加载态：禁用点击、降低透明度 */
.btn-primary:disabled,
.btn-primary.loading {
  opacity: 0.75;
  cursor: wait;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 14px 36px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  letter-spacing: 1px;
}

.btn-secondary:hover {
  border-color: var(--border-active);
  color: var(--gold-light);
}

/* ====== 排行榜 ====== */
.leaderboard {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 32px;
  backdrop-filter: blur(10px);
}

/* 排行榜 Tab 切换（总榜 / 地区榜）——金色线条风格 */
.lb-tabs {
  display: flex;
  gap: 0;
  justify-content: center;
  margin: 20px 0 14px;
  position: relative;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.lb-tab {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 10px 28px;
  color: var(--text-dim);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  position: relative;
  margin-bottom: -1px;
  letter-spacing: 1px;
}
.lb-tab:hover {
  color: var(--gold-light);
}
.lb-tab.active {
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.14);
  border-radius: 10px;
}
.lb-tab.active::after {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* 排行榜空状态：头像缩小、居中展示 */
.leaderboard-empty {
  text-align: center;
  padding: 20px 0;
}
.leaderboard-empty .empty-mascot {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin: 0 auto 12px;
}
.leaderboard-empty p {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
}

/* 地区筛选 */
.lb-region-wrap {
  margin-bottom: 12px;
}
.lb-region-scroll {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.lb-region-chip {
  position: relative; /* 🔧 NEW 角标右上角浮动定位基准 */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 16px;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}
.lb-region-chip.active {
  border-color: var(--gold);
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.12);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.25);
}

/* 市级/区级下钻筛选（选省后显示） */
.lb-city-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.lb-city-label {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--gold-light);
  font-weight: 600;
  letter-spacing: 1px;
}
.lb-city-scroll {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.lb-city-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}
.lb-city-chip.active {
  border-color: var(--gold);
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.12);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.25);
}

/* 区/县第三级：电脑端平铺 chips，移动端下拉选择 */
.lb-district-chips {
  display: flex;
  min-width: 0;
}
.lb-district-select {
  display: none;
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
@media (max-width: 768px) {
  .lb-district-chips { display: none; }
  .lb-district-select { display: block; }
}

.leaderboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.leaderboard-title {
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.5px;
}

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.leaderboard-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  transition: var(--transition);
}

.leaderboard-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.leaderboard-item.me {
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid var(--border-active);
}

.rank-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
}

.rank-1 { background: linear-gradient(135deg, #ffd700, #ffaa00); color: var(--bg-deep); }
.rank-2 { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); color: var(--bg-deep); }
.rank-3 { background: linear-gradient(135deg, #cd7f32, #b87333); color: var(--bg-deep); }

.rank-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.rank-score {
  font-size: 15px;
  font-weight: 800;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}

.rank-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.rank-region {
  font-size: 11px;
  color: var(--purple-light);
  background: rgba(124, 58, 237, 0.1);
  padding: 1px 8px;
  border-radius: 100px;
}

.rank-game {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}

/* ====== 排行榜详情页 - 完整列表项 ====== */
.leaderboard-full-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  transition: var(--transition);
}

.leaderboard-full-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.leaderboard-full-item.me {
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid var(--border-active);
}

.leaderboard-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(212, 175, 55, 0.3);
}
/* 前三名头像：徽章框（透明中心孔）盖在头像上，头像从孔中露出，徽章环包裹外侧 + 镜面反光扫过 */
.avatar-ring {
  --ring-c: #ffd700;
  position: relative;
  border-radius: 50%;
  padding: 2px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 前 3 名头像（含框）与序号、右侧文案拉开间距 */
  margin: 0 12px 0 10px;
}
.avatar-ring.rank-1 { --ring-c: #ffd700; }
.avatar-ring.rank-2 { --ring-c: #d4d9de; }
.avatar-ring.rank-3 { --ring-c: #cd7f32; }
/* 前三名头像从徽章框中心孔中露出（不被遮挡） */
.avatar-ring .leaderboard-avatar {
  border: none;
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 0;
}
/* 徽章框：透明背景+中心挖孔，盖在头像上，头像从孔中显示，徽章环包裹外侧（居中，头像保持本真颜色，无额外线框） */
.avatar-ring .rank-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
}
@keyframes avatar-ring-spin {
  to { transform: rotate(360deg); }
}

/* 前三名光特效：一道光横着扫过（镜面感），只扫头像/徽章外圈，不遮挡头像本色 */
.avatar-ring::before {
  content: '';
  position: absolute;
  inset: -17px;
  border-radius: 50%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.5) 40%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.5) 60%, transparent 100%);
  background-size: 45% 100%;
  background-repeat: no-repeat;
  -webkit-mask: radial-gradient(circle, transparent 46px, #000 50px);
  mask: radial-gradient(circle, transparent 46px, #000 50px);
  animation: shine-sweep 3.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
/* 光带横向扫过（镜面反光） */
@keyframes shine-sweep {
  0% { background-position: -60% 0; opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { background-position: 165% 0; opacity: 0; }
}

.rank-my {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
}

.my-rank-highlight {
  box-shadow: 0 0 0 1px var(--border-active), 0 4px 16px rgba(212, 175, 55, 0.15);
}

.leaderboard-full-item.admin-mode {
  position: relative;
}

/* ====== 时间线排序游戏 ====== */
.timeline-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timeline-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  cursor: grab;
  transition: var(--transition);
  backdrop-filter: blur(10px);
}

.timeline-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.timeline-item:hover {
  border-color: var(--border-active);
}

.timeline-year {
  width: 60px;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--gold-light);
  flex-shrink: 0;
}

.timeline-info {
  flex: 1;
}

.timeline-answer {
  font-size: 11px;
  margin-top: 4px;
  padding-right: 8px;
  text-align: right;
  color: var(--gold-light);
}
.timeline-answer.correct {
  color: #22c55e;
}

.timeline-song {
  font-size: 15px;
  font-weight: 600;
}

.timeline-hint {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 2px;
}

.timeline-handle {
  color: var(--text-faint);
  font-size: 20px;
}

.timeline-item.correct-order {
  border-color: var(--success);
  background: rgba(74, 222, 128, 0.05);
}

.timeline-item.wrong-order {
  border-color: var(--error);
  background: rgba(239, 68, 68, 0.05);
}

/* 时间线点选式（穿梭框） */
.timeline-slot-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.timeline-slot {
  flex: 1;
  min-width: 96px;
  min-height: 70px;
  border: 2px dashed rgba(212, 175, 55, 0.4);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 8px 6px;
  background: rgba(212, 175, 55, 0.06);
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.timeline-slot:hover {
  border-color: rgba(212, 175, 55, 0.7);
}
.timeline-slot.filled {
  border-style: solid;
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.14);
}
.timeline-slot.correct-order {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
}
.timeline-slot.wrong-order {
  border-color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}
.timeline-slot-num {
  font-size: 11px;
  color: var(--text-faint);
}
.timeline-slot-song {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-light);
  text-align: center;
  margin-top: 2px;
}
.timeline-pool {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.timeline-pool-item {
  display: flex;
  flex-direction: column;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}
.timeline-pool-item:hover {
  border-color: var(--border-active);
  background: rgba(255, 255, 255, 0.1);
}
.timeline-pool-song {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.timeline-pool-hint {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}
.timeline-pool-empty {
  text-align: center;
  color: var(--text-faint);
  padding: 16px;
  font-size: 13px;
}

@media (max-width: 480px) {
  .timeline-slot {
    min-width: 58px;
    min-height: 54px;
    padding: 6px 4px;
  }
  .timeline-slot-song {
    font-size: 11px;
  }
}

/* ====== 底部信息 ====== */
.footer {
  text-align: center;
  padding: 40px 0 20px;
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1.8;
}

.footer-divider {
  width: 60px;
  height: 1px;
  background: var(--border-active);
  margin: 0 auto 20px;
}

.footer-heart {
  color: var(--coral);
}

/* ====== 弹窗 ====== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
  animation: fadeIn 0.3s ease;
}

.modal-box {
  background: var(--bg-dark);
  border: 1px solid var(--border-active);
  border-radius: 24px;
  padding: 40px 32px;
  max-width: 440px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  text-align: center;
  animation: scaleIn 0.4s ease;
}

.modal-title {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--gold-light);
}

.modal-desc {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* 弹窗顶部小头像：固定尺寸，避免图片过大 */
.modal-mascot {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
  margin: 0 auto 14px;
}

/* 登录/注册切换链接 */
.login-register-switch {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-dim);
}
.login-register-switch a {
  color: var(--gold-light);
  font-weight: 600;
  margin-left: 4px;
}
.login-links {
  text-align: right;
  margin-top: 4px;
}
.login-links a {
  font-size: 12px;
  color: var(--text-faint);
}

/* 注册横幅：突出“首次注册” */
.register-banner {
  margin-bottom: 20px;
}
.register-title {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 4px;
  color: var(--gold-light);
  text-shadow: 0 0 20px rgba(255, 190, 90, 0.35);
}
.register-sub {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 6px;
  letter-spacing: 1px;
}

/* 账号唯一性实时检测提示 */
.username-check {
  min-height: 18px;
  font-size: 12px;
  margin: -10px 0 14px;
  padding-left: 4px;
  text-align: left;
}
.username-check.available { color: #22c55e; }
.username-check.taken { color: #f87171; }

/* 头像菜单（修改头像 / 退出登录） */
.avatar-menu-box {
  padding: 24px 20px;
}
.avatar-menu-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.avatar-menu-item {
  flex: 1 1 30%;
  min-width: 88px;
  max-width: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  transition: var(--transition);
}
.avatar-menu-item .ami-icon { font-size: 22px; line-height: 1; }
.avatar-menu-item .ami-text { font-size: 12px; color: var(--text-dim); }
.avatar-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--border-active);
}
.avatar-menu-item.danger { color: #f87171; }
.avatar-menu-item.danger .ami-text { color: #f87171; }
.avatar-menu-item.danger:hover {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.4);
}

.modal-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  color: var(--text);
  font-size: 16px;
  margin-bottom: 20px;
  font-family: inherit;
  outline: none;
  transition: var(--transition);
}

.modal-input:focus {
  border-color: var(--border-active);
  background: rgba(255, 255, 255, 0.08);
}

.modal-input::placeholder {
  color: var(--text-faint);
}

/* ====== 动画 ====== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bounceIn {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.shake {
  animation: shake 0.4s ease;
}

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

.pulse {
  animation: pulse 0.5s ease;
}

/* ====== 顶部导航条 ====== */
.nav-bar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
  margin-bottom: 28px;
}

/* 菜单栏：金色边框面板，凸显为独立功能条 */
.nav-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 8px 14px;
  background: rgba(12, 10, 22, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35),
              inset 0 0 22px rgba(212, 175, 55, 0.06);
  backdrop-filter: blur(10px);
}

/* 信息条：左侧在线/访客 + 右侧用户，与菜单栏分两行（弱化，突出菜单栏） */
.nav-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 6px;
}

.nav-info-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.nav-btn {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 100px;
  padding: 9px 18px;
  color: rgba(240, 240, 245, 0.62);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(10px);
}

/* 物料互换导航小火苗：轻微跳动吸引注意 */
.nav-fire { display:inline-block; font-size:0.9em; line-height:1; transform-origin:50% 90%; animation: navFireJump 1.6s ease-in-out infinite; }
/* 未选中（非当前页）时：火苗更亮更醒目，吸引点击；当前页(active)保持正常亮度 */
.nav-btn:not(.active) .nav-fire { filter: brightness(1.4) drop-shadow(0 0 5px rgba(255,150,40,.6)); }
@keyframes navFireJump {
  0%, 100% { transform: translateY(0) scale(1); opacity:.95; }
  30% { transform: translateY(-3px) scale(1.1); opacity:1; }
  60% { transform: translateY(-1px) scale(0.97); opacity:.9; }
}

/* 悬停：金色文字 + 微金边框（次级状态） */
.nav-btn:hover {
  border-color: rgba(212, 175, 55, 0.45);
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.08);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.15);
}

/* 当前页：金色实底 + 白字加粗 + 光晕 + 微浮起（最高层级） */
.nav-btn.active {
  border-color: var(--border-active);
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.42), rgba(212, 175, 55, 0.16));
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.38), inset 0 0 12px rgba(212, 175, 55, 0.10);
  transform: translateY(-1px);
}

/* ====== 右上角用户区域 ====== */
.user-area {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  height: 44px;
  box-sizing: border-box;
  padding: 4px 14px 4px 6px;
  border-radius: 100px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: var(--transition);
  backdrop-filter: blur(10px);
}

.user-area:hover {
  border-color: var(--border-active);
  background: rgba(212, 175, 55, 0.1);
}

.user-info-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.1;
}

.user-avatar-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* 2026-08-13 修复：移除 overflow:hidden，让消息角标能完整显示在头像外（不再被裁剪进圈内） */
  border: 2px solid var(--gold);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
  flex-shrink: 0;
}

.user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%; /* 图片自身成圆形，替代父容器 overflow 裁剪 */
}

.user-nickname {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-light);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-score-text {
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}

/* ====== 头像上传区域 ====== */
.avatar-upload-area {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto 20px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border: 2px dashed var(--border-active);
  transition: var(--transition);
}

.avatar-upload-area:hover {
  border-color: var(--gold);
}

.avatar-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-upload-hint {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: var(--text-dim);
  font-size: 11px;
  padding: 4px 0;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.avatar-upload-area:hover .avatar-upload-hint {
  opacity: 1;
}

/* ====== 粉丝留言板 ====== */
.posts-section {
  margin-bottom: 60px;
}

/* 留言区红牛提醒（左侧图 + 提醒文案） */
.post-redbull-tip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 14px;
  animation: fadeInUp 0.6s ease;
}
.post-redbull-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
  /* 白色发光边缘（弱化版），让深色图与背景区分开 */
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.55))
          drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
}
.post-redbull-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 4px;
  letter-spacing: 1px;
}
.post-redbull-sub {
  font-size: 12px;
  color: var(--text-dim);
}

/* 注册页头像（圆形展示） */
.reg-avatar {
  border-radius: 50%;
  width: 72px;
  height: 72px;
  object-fit: cover;
}

.post-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  backdrop-filter: blur(10px);
}

.post-input {
  width: 100%;
  min-height: 100px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  color: var(--text);
  font-size: 15px;
  margin-bottom: 12px;
  font-family: inherit;
  outline: none;
  resize: vertical;
  transition: var(--transition);
  line-height: 1.6;
}

.post-input:focus {
  border-color: var(--border-active);
  background: rgba(255, 255, 255, 0.08);
}

.post-input::placeholder {
  color: var(--text-faint);
}

.post-form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post-char-count {
  font-size: 12px;
  color: var(--text-faint);
}

.post-char-count.over {
  color: var(--error);
}

.posts-list {
  position: relative;
}
.posts-list .post-card {
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  margin-bottom: 0;
}

/* 留言板分页 */
.posts-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.page-btn {
  min-width: 36px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.page-btn:hover:not(:disabled):not(.active) {
  border-color: var(--gold);
  color: var(--gold);
}

.page-btn.active {
  background: linear-gradient(135deg, var(--gold), #c9a030);
  color: #1a0a2e;
  border-color: var(--gold);
  font-weight: 700;
}

.page-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.post-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  backdrop-filter: blur(10px);
  transition: var(--transition);
  /* 留言卡片可点击 → 弹详情（2026-08-24） */
  cursor: pointer;
}

.post-card:hover {
  border-color: var(--border-active);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.post-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.post-author-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--coral));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: bold;
  color: var(--bg-deep);
  flex-shrink: 0;
  overflow: hidden;
}

.post-mascot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-author-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-light);
}

.post-time {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 2px;
}

.post-actions {
  display: flex;
  gap: 8px;
}

.post-action-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 4px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  transition: var(--transition);
  font-family: inherit;
}

.post-action-btn:hover {
  border-color: var(--border-active);
  color: var(--gold-light);
}

.post-action-btn.delete:hover {
  border-color: var(--error);
  color: var(--error);
  background: rgba(239, 68, 68, 0.1);
}

/* 📌 置顶按钮（管理员）：置顶中金色高亮 */
.post-action-btn.pin:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212, 175, 55, 0.1);
}
.post-action-btn.pin.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212, 175, 55, 0.15);
}

/* 📌 置顶标记（管理员置顶后，卡片/物料标题旁金色小徽章） */
.post-pin-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  color: #ffd700;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.45);
  vertical-align: middle;
  white-space: nowrap;
}

.post-content {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.post-edit-area {
  width: 100%;
  min-height: 80px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-active);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  resize: vertical;
  line-height: 1.6;
}

.post-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: flex-end;
}

.post-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px;
  color: var(--text-faint);
  font-size: 14px;
  line-height: 1.8;
}

.post-empty .empty-mascot {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
}

.post-empty .empty-text {
  text-align: left;
}

.album-section {
  margin-bottom: 60px;
}

/* 板块引导提示（头像引子 + 统一字体） */
.section-desc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: #c6c6da;
  letter-spacing: 0.5px;
  margin-bottom: 24px;
}
.section-desc-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 8px rgba(212, 175, 55, 0.18);
  flex-shrink: 0;
}

/* ====== 春春相册 · 时光长卷（左年份+右横向时间轴） ====== */
.album-tl-layout {
  display: flex;
  gap: 0;
  height: 350px;
  background: rgba(22, 20, 45, 0.4);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

/* 年份导航容器（web 端保持原纵向侧栏，箭头按钮仅移动端显示） */
.album-year-nav {
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
}
.album-year-arrow {
  display: none;
}

/* 左侧：纵向年份列表 */
.album-year-sidebar {
  width: 110px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  padding: 12px 0;
  background: rgba(0, 0, 0, 0.15);
}
.album-year-sidebar::-webkit-scrollbar { width: 4px; }
.album-year-sidebar::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.3); border-radius: 2px; }

.album-year-btn {
  display: block;
  width: 100%;
  padding: 14px 8px;
  text-align: center;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--text-dim);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: inherit;
}
.album-year-btn:hover {
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.06);
}
.album-year-btn.active {
  color: var(--gold);
  border-left-color: var(--gold);
  background: rgba(212, 175, 55, 0.12);
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}
.album-year-count {
  display: block;
  font-size: 10px;
  font-weight: 400;
  opacity: 0.6;
  margin-top: 2px;
}

/* 右侧：横向时间轴视口 */
.album-tl-viewport {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  position: relative;
  min-height: 0;
}
.album-tl-viewport::-webkit-scrollbar { height: 6px; }
.album-tl-viewport::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
.album-tl-viewport::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.3); border-radius: 3px; }
.album-tl-viewport::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,0.5); }

/* 横向时间轴轨道 */
.album-tl-track {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 4px 120px 4px 24px;
  position: relative;
  height: 330px;
}
/* 横向发光金线（真实DOM元素，宽度由JS设置为scrollWidth） */
.tl-line {
  position: absolute;
  top: 50%;
  left: 0;
  height: 3px;
  min-width: 100%;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.5), rgba(212,175,55,0.8), rgba(212,175,55,0.5), transparent);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
  transform: translateY(-50%);
  z-index: 0;
}

/* 年份大标题已移除（不再渲染），时间轴从左侧直接开始 */

/* 横向时间轴节点：flex列布局，撑满容器高度 */
.tl-node {
  flex-shrink: 0;
  width: 230px;
  height: 100%;
  position: relative;
  z-index: 1;
}

/* 时间节点圆点：绝对定位在节点中央（金线位置） */
.tl-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  animation: tlDotPulse 2.5s ease-in-out infinite;
}
@keyframes tlDotPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(212, 175, 55, 0.6); }
  50% { box-shadow: 0 0 18px rgba(212, 175, 55, 0.9), 0 0 30px rgba(212, 175, 55, 0.3); }
}

/* ===== above 节点：日期+卡片在金线上方，紧贴金线 ===== */
.tl-node.above .tl-date {
  position: absolute;
  bottom: calc(50% + 5px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--gold-light);
  font-weight: 600;
  white-space: nowrap;
}
.tl-node.above .tl-card {
  position: absolute;
  bottom: calc(50% + 34px);
  left: 8px;
  right: 8px;
}

/* ===== below 节点：日期+卡片在金线下方，紧贴金线 ===== */
.tl-node:not(.above) .tl-date {
  position: absolute;
  top: calc(50% + 5px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--gold-light);
  font-weight: 600;
  white-space: nowrap;
}
.tl-node:not(.above) .tl-card {
  position: absolute;
  top: calc(50% + 34px);
  left: 8px;
  right: 8px;
}

/* 事件卡片 */
.tl-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  max-width: 210px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.tl-node.above .tl-card {
  transform: translateY(-35px);
}
.tl-node:not(.above) .tl-card {
  transform: translateY(35px);
}
.tl-card.visible {
  opacity: 1;
  transform: translateY(0) !important;
}
.tl-card:hover {
  border-color: var(--border-active);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.2);
  z-index: 3;
}
.tl-card[data-type="里程碑"] { border-left-color: var(--gold); }
.tl-card[data-type="音乐"]   { border-left-color: #b794f4; }
.tl-card[data-type="演出"]   { border-left-color: #4fd1c5; }
.tl-card[data-type="影视"]   { border-left-color: #fc8181; }
.tl-card[data-type="综艺"]   { border-left-color: #68d391; }
.tl-card[data-type="公益"]   { border-left-color: #f6ad55; }

.tl-card-type {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 100px;
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 600;
}
.tl-card-type.album-type-milestone { background: rgba(255,215,0,0.15); color: var(--gold); }
.tl-card-type.album-type-music { background: rgba(124,58,237,0.15); color: #b794f4; }
.tl-card-type.album-type-concert { background: rgba(56,178,172,0.15); color: #4fd1c5; }
.tl-card-type.album-type-film { background: rgba(237,100,100,0.15); color: #fc8181; }
.tl-card-type.album-type-variety { background: rgba(72,187,120,0.15); color: #68d391; }
.tl-card-type.album-type-charity { background: rgba(237,137,54,0.15); color: #f6ad55; }

.tl-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: 4px;
  line-height: 1.4;
}
.tl-card-desc {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 空状态 */
.tl-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: var(--text-faint);
  font-size: 14px;
  padding: 40px;
}

/* 响应式 */
@media (max-width: 768px) {
  .album-tl-layout {
    height: 350px;
    flex-direction: column;
  }
  .album-year-nav {
    width: 100%;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.15);
  }
  .album-year-sidebar {
    width: auto;
    flex: 1;
    height: 100%;
    border-right: none;
    border-bottom: none;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;           /* Firefox：隐藏年份滚动条 */
  }
  /* 移动端年份导航：去掉滚动条，改用左右箭头按钮翻页 */
  .album-year-sidebar::-webkit-scrollbar { display: none; }
  .album-year-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 4px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.45);
    background: rgba(212, 175, 55, 0.1);
    color: var(--gold);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .album-year-arrow:active { transform: scale(0.88); }
  .album-year-arrow.disabled { opacity: 0.28; pointer-events: none; }
  .album-year-btn {
    width: auto;
    padding: 8px 14px;
    border-left: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    font-size: 13px;   /* 移动端年份导航字体改小 */
  }
  /* 时间轴横向滚动条：移动端同样给可见金色滚动条 */
  .album-tl-viewport::-webkit-scrollbar { height: 4px; }
  .album-tl-viewport::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
  .album-tl-viewport::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.35); border-radius: 2px; }
  .album-year-btn.active {
    border-left: none;
    border-bottom-color: var(--gold);
  }
  /* 年份大标题已移除 */
  .tl-node { width: 180px; }
  .album-tl-track { height: 290px; padding: 4px 80px 4px 16px; }
  /* 移动端卡片距金线距离缩小，防止溢出 */
  .tl-node.above .tl-card { bottom: calc(50% + 24px); }
  .tl-node:not(.above) .tl-card { top: calc(50% + 24px); }
  .tl-node.above .tl-date { bottom: calc(50% + 5px); }
  .tl-node:not(.above) .tl-date { top: calc(50% + 5px); }
  /* 卡片字号缩小 */
  .tl-card { padding: 10px 12px; max-width: 160px; }
  .tl-card-title { font-size: 12px; }
  .tl-card-desc { font-size: 11px; line-height: 1.4; }
  .tl-card-type { font-size: 10px; padding: 1px 6px; margin-bottom: 4px; }
}



/* ====== 歌曲许愿墙 ====== */
.wishlist-section {
  margin-bottom: 60px;
}

.wishlist-desc {
  text-align: center;
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 24px;
  line-height: 1.6;
}

/* ====== 黑胶点唱 · 顶部黑胶 + 许愿星位 ====== */
.wishlist-jukebox {
  display: flex;
  align-items: center;
  gap: 28px;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  backdrop-filter: blur(10px);
}

/* SVG 黑胶唱片容器 */
.vinyl-container {
  position: relative;
  width: 160px;
  height: 160px;
  flex-shrink: 0;
}

/* 黑胶唱片：旋转 */
.vinyl-disc {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  animation: vinylSpin 6s linear infinite;
  box-shadow: 0 8px 26px rgba(0,0,0,0.55), inset 0 0 32px rgba(255,255,255,0.04);
}
.vinyl-disc svg {
  width: 100%;
  height: 100%;
}
/* 投票计数：HTML覆盖层，不旋转 */
.vinyl-count-overlay {
  position: absolute;
  top: 80px;
  left: 15px;
  width: 130px;
  height: 130px;
  transform: translateY(-65px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #1a1a1a;
  z-index: 5;
  pointer-events: none;
}
/* 唱臂：固定，唱头接触唱片右上边缘 */
.vinyl-tonearm {
  position: absolute;
  top: -10px;
  right: -12px;
  width: 90px;
  height: 150px;
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5));
}
.vinyl-container:hover .vinyl-tonearm {
  transform: translateY(-2px);
}
@keyframes vinylSpin { to { transform: rotate(360deg); } }

/* 许愿星位 */
.wish-stars {
  display: flex;
  gap: 16px;
  flex: 1;
  min-width: 240px;
  justify-content: space-between;
}
.wish-star-slot {
  position: relative;
  flex: 1;
  height: 92px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  box-sizing: border-box;
  transition: all 0.3s ease;
}
.wish-star-slot.filled {
  background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(212,175,55,0.05));
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 18px rgba(212,175,55,0.4);
}
.wish-star-slot.empty {
  border: 1.5px dashed rgba(255,255,255,0.16);
  background: transparent;
}
.wish-star {
  font-size: 22px;
  color: var(--gold-light);
  line-height: 1;
  text-shadow: 0 0 8px rgba(212,175,55,0.5);
}
.wish-star-plus {
  font-size: 26px;
  color: var(--text-faint);
  line-height: 1;
}
.wish-star-name {
  font-size: 13px;
  color: var(--text);
  margin-top: 4px;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  word-break: break-all;
}
.wish-star-cancel {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  border: 1.5px solid var(--bg-deep);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.wish-star-cancel:hover { background: #dc2626; }

/* ====== 中部 · 歌曲选择网格 ====== */
/* 左右布局：今日一选(2/3) + 人气Top10(1/3) */
.wishlist-bottom-layout {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
.wishlist-bottom-layout .wishlist-pick {
  flex: 2;
  margin-bottom: 0;
}
.wishlist-bottom-layout .wishlist-top10 {
  flex: 1;
}

.wishlist-pick {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  backdrop-filter: blur(10px);
}
.wishlist-pick-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}
.wishlist-stats-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wishlist-total-songs {
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 1px;
}
.wishlist-vote-count {
  font-size: 13px;
  color: var(--text-dim);
}
.wishlist-vote-count strong {
  color: var(--gold-light);
  font-size: 18px;
}
.wishlist-submit-btn {
  margin-bottom: 0;
}

.wishlist-search-box {
  margin-bottom: 14px;
}
.wishlist-search-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--bg-deep);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: var(--transition);
}
.wishlist-search-input::placeholder {
  color: var(--text-faint);
}
.wishlist-search-input:focus {
  border-color: var(--border-active);
  background: var(--bg-dark);
}

.wishlist-no-result {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px 0;
  color: var(--text-faint);
  font-size: 14px;
}

.song-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  max-height: 440px;
  overflow-y: auto;
  padding: 2px;
}

.song-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 30px 10px 12px;
  cursor: pointer;
  min-height: 64px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.song-card:hover:not(.disabled) {
  border-color: var(--border-active);
  transform: translateY(-2px);
  background: rgba(255,255,255,0.06);
}
.song-card.selected {
  border-color: var(--gold);
  background: rgba(212,175,55,0.12);
  box-shadow: 0 0 14px rgba(212,175,55,0.22);
}
.song-card.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.song-card-check {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--bg-deep);
  font-size: 11px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
}
.song-card.selected .song-card-check { display: flex; }
.song-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}
.song-card-votes {
  font-size: 11px;
  color: var(--gold-light);
  font-weight: 600;
}

.wishlist-hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 12px;
}

/* ====== 底部 · Top10 排行 ====== */
.wishlist-top10 {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  backdrop-filter: blur(10px);
}
.wishlist-top10-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.top10-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  overflow: hidden;
  transition: background 0.2s ease;
}
.top10-item:hover { background: rgba(255,255,255,0.04); }
.top10-rank {
  width: 30px;
  text-align: center;
  font-size: 15px;
  flex-shrink: 0;
}
.top10-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top10-votes {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-light);
  flex-shrink: 0;
}
.vote-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(to right, var(--gold), var(--gold-light));
  border-radius: 0 2px 2px 0;
  transition: width 0.8s ease;
}

/* ====== 管理员面板 ====== */
.admin-trigger-btn {
  border-color: rgba(239,68,68,0.3) !important;
}

.admin-trigger-btn:hover {
  border-color: var(--error) !important;
  color: var(--error) !important;
  background: rgba(239,68,68,0.1) !important;
}

.admin-controls-panel {
  background: linear-gradient(135deg, rgba(22, 20, 45, 0.95), rgba(35, 30, 60, 0.92));
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  animation: fadeInUp 0.5s ease;
}

.admin-controls-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.admin-controls-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.admin-controls-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 管理员功能分组卡片 */
.admin-group {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.admin-group-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-faint);
  margin-bottom: 10px;
}
.admin-group-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 管理员按钮系列 */
.admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 16px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.admin-btn:hover {
  border-color: var(--border-active);
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.1);
  transform: translateY(-1px);
}
.admin-btn:active {
  transform: translateY(0);
}
.admin-btn-danger {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}
.admin-btn-danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.6);
  color: #fff;
}
.admin-btn-gold {
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.4);
  color: var(--gold-light);
}
.admin-btn-gold:hover {
  background: rgba(212, 175, 55, 0.22);
  border-color: var(--gold);
}
/* 春春百科管理（CMS） */
.admin-album-form { border: 1px solid rgba(212,175,55,.35); border-radius: 10px; padding: 10px; background: rgba(255,255,255,.04); }
.admin-album-form-row { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-album-year { color: var(--gold-light); font-weight: 700; font-size: 13px; margin: 10px 0 4px; }
.admin-album-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 6px 4px; border-bottom: 1px dashed rgba(255,255,255,.12); }
.admin-album-item-main { flex: 1; min-width: 0; }
.admin-album-type { display: inline-block; font-size: 11px; color: #ffd9a0; background: rgba(255,217,160,.12); border-radius: 8px; padding: 1px 6px; margin-right: 6px; }
.admin-album-desc { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 2px; }
.admin-album-ops { display: flex; gap: 4px; flex-shrink: 0; }
.admin-album-empty { color: rgba(255,255,255,.5); text-align: center; padding: 10px; }
/* 管理员面板 4 大模块 tab */
.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.admin-tab { padding: 7px 12px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s ease; }
.admin-tab:hover { color: var(--gold-light); }
.admin-tab.active { background: rgba(212,175,55,.18); border-color: var(--gold); color: var(--gold-light); }
.admin-tab-panel { min-height: 40px; }
/* 春春百科管理：年份筛选 + 表格 */
.admin-album-filter { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--text-dim); }
.admin-album-filter select { background: rgba(255,255,255,.08); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; }
.admin-album-table-wrap { overflow-x: auto; }
.admin-album-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.admin-album-table th { text-align: left; padding: 6px 8px; color: var(--gold-light); border-bottom: 1px solid rgba(212,175,55,.35); white-space: nowrap; }
.admin-album-table td { padding: 6px 8px; border-bottom: 1px dashed rgba(255,255,255,.1); vertical-align: top; }
.admin-album-table tr:hover td { background: rgba(255,255,255,.03); }
.admin-album-td-desc { max-width: 260px; color: rgba(255,255,255,.7); }
.admin-album-td-time { white-space: nowrap; color: rgba(255,255,255,.55); }
.admin-album-thumb { width: 60px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid rgba(212,175,55,.4); }
.admin-album-noimg { color: rgba(255,255,255,.35); }
.admin-album-ops { white-space: nowrap; }
.admin-album-ops .admin-btn { padding: 3px 8px; font-size: 12px; }
.admin-btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-dim);
  font-size: 12px;
}
.admin-btn-ghost:hover {
  color: var(--gold-light);
  border-color: var(--border-active);
  background: rgba(212, 175, 55, 0.08);
}

/* 管理员用户列表卡片 */
.admin-user-item {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-user-item:hover {
  background: rgba(255, 255, 255, 0.03);
}
.admin-user-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}
.admin-user-name {
  color: var(--gold-light);
  font-weight: 600;
}
.admin-user-admin {
  font-size: 13px;
}
.admin-user-tag {
  color: var(--text-dim);
  font-size: 12px;
}
.admin-user-meta {
  color: var(--text-faint);
  font-size: 12px;
}
.admin-user-del {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 11px;
}
.admin-user-post {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  cursor: default;
}

/* 管理员面板全屏放大：表格/列表自动适应全屏宽度 */
.admin-controls-panel.admin-fullscreen,
.admin-panel-box.admin-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 100000;
  width: 100vw;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  max-width: none;
  max-height: none;
  overflow: auto;
}
.admin-panel-box.admin-fullscreen .admin-controls-panel {
  margin: 0;
  border-radius: 0;
  min-height: 100%;
}
.admin-controls-panel.admin-fullscreen .admin-album-td-desc,
.admin-panel-box.admin-fullscreen .admin-album-td-desc {
  max-width: none;
}
.admin-controls-panel.admin-fullscreen .admin-album-table-wrap,
.admin-panel-box.admin-fullscreen .admin-album-table-wrap {
  overflow-x: auto;
}
.admin-controls-panel.admin-fullscreen .admin-album-table,
.admin-panel-box.admin-fullscreen .admin-album-table {
  width: 100%;
}
/* 无任何面板权限的提示 */
.admin-no-perm {
  color: var(--text-dim);
  font-size: 13px;
  padding: 8px 0;
}
/* 用户管理：手机号（有维护才显示）/ 角色 / 权限按钮 */
.admin-user-phone {
  font-size: 12px;
  color: rgba(100, 200, 255, 0.8);
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.admin-user-role {
  max-width: 230px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-user-perm {
  padding: 4px 10px;
  font-size: 11px;
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.4);
  color: var(--gold-light);
}
.admin-user-perm:hover {
  background: rgba(212, 175, 55, 0.22);
  border-color: var(--gold);
}
/* 春春百科管理：日期范围筛选控件 */
.admin-album-filter {
  flex-wrap: wrap;
}
.admin-album-filter-sep {
  color: var(--text-faint);
  font-size: 12px;
}
.admin-album-date {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 8px;
  color-scheme: dark;
  font-family: inherit;
}
/* 权限授权弹窗 */
.admin-perm-switch {
  display: block;
  font-size: 13px;
  color: var(--text);
  margin: 10px 0 4px;
  cursor: pointer;
}
.admin-perm-checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.admin-perm-group {
  margin: 8px 0 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.5px;
}
.admin-perm-group:first-child {
  margin-top: 0;
}.admin-perm-check {
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.admin-perm-check input,
.admin-perm-switch input {
  accent-color: var(--gold);
  width: 16px;
  height: 16px;
}

/* 管理员微标（头像旁的👑） */
.admin-badge {
  font-size: 16px;
  margin-left: 6px;
  cursor: default;
  animation: adminBadgePulse 2s ease-in-out infinite;
}

@keyframes adminBadgePulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3)); }
  50% { filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.8)); }
}

/* 管理员删除按钮（留言板） */
.post-action-btn.admin-delete {
  color: var(--error);
  border-color: rgba(239, 68, 68, 0.4);
}

.post-action-btn.admin-delete:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--error);
}

/* 排行榜管理员删除按钮 */
.admin-delete-btn {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--error);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-left: 8px;
}

.admin-delete-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: var(--error);
  transform: scale(1.08);
}

/* 顶部导航小装饰 */
.nav-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-btn {
  position: relative;
}

.nav-btn:hover::after,
.nav-btn.active::after {
  width: 60%;
}

/* 点击波纹效果（简单版） */
.game-card,
.option-btn,
.btn-primary,
.btn-secondary,
.timeline-card,
.song-card,
.lyrics-sort-item {
  -webkit-tap-highlight-color: transparent;
}

/* ====== 歌词排序·拖拽式 ====== */
.lyrics-sort-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.lyrics-sort-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  cursor: grab;
  transition: var(--transition);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none; /* 允许触屏拖拽手势 */
}

.lyrics-sort-item:hover {
  border-color: var(--border-active);
}

.lyrics-sort-item.dragging {
  opacity: 0.65;
  border-color: var(--border-active);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  cursor: grabbing;
  transform: scale(1.02);
  background: rgba(212, 175, 55, 0.08);
}

.lyrics-sort-item.correct-order {
  border-color: var(--success);
  background: rgba(74, 222, 128, 0.1);
  cursor: default;
}

.lyrics-sort-item.wrong-order {
  border-color: var(--coral);
  background: rgba(232, 66, 87, 0.1);
  cursor: default;
}

.lyrics-sort-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.15);
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.lyrics-sort-text {
  flex: 1;
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.4;
}

.lyrics-sort-move {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--gold-light);
  cursor: pointer;
  font-size: 11px;
  flex-shrink: 0;
  line-height: 1;
  transition: var(--transition);
  font-family: inherit;
}

.lyrics-sort-move:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: var(--border-active);
}

.lyrics-sort-handle {
  color: var(--text-faint);
  cursor: grab;
  font-size: 16px;
  flex-shrink: 0;
  letter-spacing: 2px;
}

/* 歌词排序：待排序歌词标识第一句（告诉用户从哪句开始排） */
.lyrics-sort-item.lyrics-sort-item-first {
  border-color: rgba(212, 175, 55, 0.7);
  background: rgba(212, 175, 55, 0.12);
}
.lyrics-sort-first-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd700, #d4af37);
  color: #3a2c00;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* ====== 歌词排序·正确答案弹窗 ====== */
.lyrics-sort-answer-box {
  max-width: 420px;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  /* 右下角悬浮图预留空间：图片 72px + 底部 8px + 安全间距 8px */
  padding-bottom: 88px;
}

.lyrics-sort-answer-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: var(--transition);
}

.lyrics-sort-answer-close:hover {
  color: var(--coral);
  border-color: var(--coral);
}

.lyrics-sort-answer-song {
  font-size: 15px;
  color: var(--gold-light);
  font-weight: 600;
  margin: 4px 0 12px;
}

.lyrics-sort-answer-label {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.lyrics-sort-answer-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lyrics-sort-answer-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--bg-card);
}

.lyrics-sort-answer-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.15);
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 700;
  margin-top: 1px;
}

.lyrics-sort-answer-text {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.4;
}

/* 歌词排序正确答案：第一句标识（告诉用户从哪句开始排） */
.lyrics-sort-answer-first-hint {
  font-size: 12px;
  color: var(--gold-light);
}
.lyrics-sort-answer-item.lyrics-sort-answer-first {
  border-color: rgba(212, 175, 55, 0.65);
  background: rgba(212, 175, 55, 0.12);
}
.lyrics-sort-answer-first-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd700, #d4af37);
  color: #3a2c00;
  font-size: 11px;
  font-weight: 700;
  margin-top: 1px;
  white-space: nowrap;
}

/* ====== 弹窗右下角悬浮结果图（摇晃动效，不遮挡内容） ====== */
.answer-corner-mascot {
  position: absolute;
  bottom: 8px;
  right: 14px;
  width: 72px;
  height: 72px;
  object-fit: contain;
  z-index: 5;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
  animation: mascotShake 1.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes mascotShake {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-8deg); }
  40% { transform: rotate(8deg); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(6deg); }
}

/* ====== 内容保护：禁止拖拽/长按保存图片、禁止选中复制（输入框除外） ====== */
img, picture, canvas, svg, video {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none; /* iOS/安卓长按不弹保存/分享菜单 */
  user-select: none;
  -webkit-user-select: none;
}
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* ====== 全国积分热力图 + 地区积分榜（地区榜） ====== */
.lb-map-wrap {
  margin: 14px 0 4px;
}
.lb-map-card {
  flex: 1;
  min-width: 0;
  background: rgba(20, 18, 45, 0.4);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lb-map-title {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-light);
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.5px;
  background: rgba(212, 175, 55, 0.06);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* 全国 / 全球 地图模式切换按钮 */
.lb-map-mode {
  display: inline-flex;
  gap: 4px;
}
.lb-mode-btn {
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: var(--transition);
}
.lb-mode-btn:hover {
  border-color: var(--border-active);
  color: var(--text);
}
.lb-mode-btn.active {
  color: #ffd700;
  border-color: #ffd700;
  background: rgba(212, 175, 55, 0.15);
}
/* 地区子 Tab（国内全国 / 全球）大菜单按钮 */
.lb-sub-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 14px 0 6px;
}
.lb-sub-tab {
  flex: 1;
  max-width: 340px;
  padding: 13px 16px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-dim);
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: var(--transition);
}
.lb-sub-tab:hover {
  border-color: var(--border-active);
  color: var(--text);
}
.lb-sub-tab.active {
  color: #ffd700;
  border-color: #ffd700;
  background: rgba(212, 175, 55, 0.12);
  box-shadow: var(--shadow-gold);
}
/* 广播站：全屏弹幕（金色大字从右往左划过 2 次） */
.broadcast-danmaku {
  position: fixed;
  top: 44%;
  left: 0;
  right: 0;
  z-index: 99999;
  pointer-events: none;
  overflow: hidden;
}
.broadcast-danmaku .bd-msg {
  display: inline-block;
  white-space: nowrap;
  color: #ffd700;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 3px;
  padding: 8px 24px;
  background: rgba(24, 21, 54, 0.55);
  border-radius: 16px;
  border: 1px solid rgba(255, 215, 0, 0.35);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85), 0 0 24px rgba(255, 215, 0, 0.55);
  animation: bd-scroll 8s linear 2;
}
@keyframes bd-scroll {
  from { transform: translateX(105vw); }
  to { transform: translateX(-120%); }
}
/* 移动端适配：字号更小、位置偏上、速度更慢，避免长文字在小屏上过快滑过 */
@media (max-width: 768px) {
  .broadcast-danmaku {
    top: 34%;
  }
  .broadcast-danmaku .bd-msg {
    font-size: 22px;
    letter-spacing: 2px;
    padding: 6px 16px;
    border-radius: 12px;
    animation: bd-scroll 9s linear 2;
  }
}
/* 广播面板：历史记录 */
.broadcast-history-item {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.broadcast-history-item .bh-meta { color: var(--text); }
.broadcast-history-item .bh-time { color: var(--text-faint); font-size: 11px; margin-top: 2px; }
.lb-map-body {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
/* 左侧：全国地区积分榜 */
/* 🔧 榜单固定宽度（250px），保证右侧地图空间/比例不受挤压；
   条形图用 flex:1 在榜单内自适应（宽度随可用空间伸缩、不折行），
   移动端由下方 media 覆盖为全宽（条形自动变宽，无空白） */
.lb-map-rank {
  width: 250px;
  flex-shrink: 0;
  background: rgba(20, 18, 45, 0.4);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lb-map-rank-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-light);
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.5px;
  background: rgba(212, 175, 55, 0.06);
  flex-shrink: 0;
}
.lb-map-rank-count {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-faint);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 8px;
  padding: 1px 7px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.lb-map-rank-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px;
  /* 超过 15 条开始内部上下滑动查看 */
  max-height: 435px;
}
.lb-map-rank-list::-webkit-scrollbar {
  width: 4px;
}
.lb-map-rank-list::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.3);
  border-radius: 2px;
}
.lb-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 16px 0 4px;
  flex-wrap: wrap;
}
/* 🔧 简洁分页：当前页 / 总页数（替代全部页码按钮） */
.lb-page-info {
  color: var(--text-dim);
  font-size: 13px;
  padding: 0 8px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lb-page-btn {
  min-width: 32px;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}
.lb-page-btn:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold-light);
}
.lb-page-btn.active {
  background: rgba(212, 175, 55, 0.14);
  border-color: var(--gold);
  color: var(--gold-light);
}
.lb-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* 📱 移动端分页紧凑化：压缩按钮/页码信息，保证「首页/上一页/页码/下一页/末页」单行不换行 */
@media (max-width: 640px) {
  .posts-pagination, .lb-pagination { gap: 4px; }
  .page-btn, .lb-page-btn { min-width: 28px; padding: 4px 8px; font-size: 12px; }
  .page-info, .lb-page-info { padding: 0 4px; font-size: 12px; line-height: 1; align-self: center; }
}
.lb-rank-row {
  position: relative; /* 🔧 NEW 角标右上角浮动定位基准 */
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 8px;
  font-size: 12px;
}
/* 🔧 6小时内新点亮地区：右上角浮动 NEW 角标 */
.lb-new-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: linear-gradient(135deg, #ff3b3b, #ff7a00);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 8px 4px 8px 4px;
  box-shadow: 0 2px 6px rgba(255, 59, 59, 0.45);
  letter-spacing: 0.5px;
  z-index: 2;
  pointer-events: none;
  animation: lbNewPulse 2s ease-in-out infinite;
}
@keyframes lbNewPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 6px rgba(255, 59, 59, 0.45); }
  50% { transform: scale(1.08); box-shadow: 0 3px 10px rgba(255, 59, 59, 0.65); }
}
/* 🔧 区域标签上的 NEW 角标（适配小圆角按钮） */
.lb-region-chip .lb-new-badge {
  top: -5px;
  right: -3px;
  font-size: 8px;
  padding: 2px 5px;
  border-radius: 7px 3px 7px 3px;
}
.lb-rank-row.bj {
  background: rgba(255, 45, 45, 0.08);
}
/* 🔧 全国地区积分榜专用：条形更贴近地区名、更长（海外榜保持默认列宽） */
.lb-rank-row.cn .lb-rank-name {
  width: 44px;
}
/* 🔧 积分列：宽度自适应内容（永不折行）；条形 flex:1 自动伸缩 →
   页面宽 → 条形长；页面窄/低分辨率 → 条形自动变短，全程自适应无空白 */
.lb-rank-row.cn .lb-rank-score {
  width: auto;
  min-width: 40px;
  font-size: 11px;
  letter-spacing: -0.3px;
}
.lb-rank-badge {
  width: 22px;
  text-align: center;
  font-size: 13px;
  flex-shrink: 0;
}
.lb-rank-num {
  color: var(--text-faint);
  font-size: 11px;
}
.lb-rank-name {
  color: var(--text);
  font-weight: 600;
  flex-shrink: 0;
  /* 🔧 固定名称列宽，保证条形图左侧起点一致 */
  width: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-rank-row.bj .lb-rank-name {
  color: #ff5a5a;
}
.lb-rank-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.lb-rank-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2f6fbd, #38b6ff, #ffd700);
  border-radius: 3px;
}
.lb-rank-row.bj .lb-rank-bar i {
  background: linear-gradient(90deg, #ff5a5a, #ff2d2d);
}
.lb-rank-score {
  color: var(--gold-light);
  font-weight: 700;
  flex-shrink: 0;
  /* 🔧 固定积分列宽+右对齐，保证条形图右侧满格刻度一致；永不折行 */
  width: 44px;
  text-align: right;
  white-space: nowrap;
}
.lb-map-rank-empty {
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
  padding: 20px 8px;
  line-height: 1.6;
}
.lb-map-rank-toggle {
  display: none;
  width: 100%;
  border: none;
  border-top: 1px solid var(--border);
  background: rgba(212, 175, 55, 0.06);
  color: var(--gold-light);
  font-size: 12px;
  padding: 8px 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}
.lb-map-rank-toggle:hover { background: rgba(212, 175, 55, 0.14); }
.lb-map-rank-toggle:active { background: rgba(212, 175, 55, 0.2); }
.lb-map {
  width: 100%;
  height: 420px;
  flex-shrink: 0;
}
.lb-map-hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 6px;
}

/* 游戏榜移动端：缩小文案层级、增加间距 */
@media (max-width: 768px) {
  .lb-region-wrap { margin-bottom: 14px; }
  .leaderboard-title { font-size: 15px; }
  .lb-map-title, .lb-map-rank-title { font-size: 13px; }
}
@media (max-width: 640px) {
  .leaderboard-title { font-size: 14px; }
  .lb-region-chip { padding: 5px 12px; font-size: 12px; }
  .lb-city-label { font-size: 11px; }
  .lb-city-chip { padding: 4px 10px; font-size: 11px; }
  .lb-map-title, .lb-map-rank-title { font-size: 12px; padding: 8px 6px; }
  .lb-tabs { margin: 16px 0 12px; }
  .leaderboard-header { margin-bottom: 12px; }
}
@media (max-width: 375px) {
  .lb-region-chip { padding: 4px 10px; font-size: 11px; }
  .lb-city-chip { padding: 3px 9px; font-size: 10px; }
  .leaderboard-title { font-size: 13px; }
}
@media (max-width: 768px) {
  .lb-map-body { flex-direction: column; }
  .lb-map-rank { width: 100%; max-height: 400px; }
  /* 移动端积分榜默认收起为前几名高度，展开后才显示更多（内部滚动） */
  .lb-map-rank-list:not(.expanded) { max-height: 150px; }
  .lb-map-rank-list.expanded { max-height: 320px; }
  .lb-map { height: 340px; }
}
@media (max-width: 640px) {
  .lb-map { height: 300px; }
}
@media (max-width: 375px) {
  .lb-map { height: 250px; }
}

/* ====== 响应式 ====== */
/* ====== 页脚 Ending 动画 ====== */
.site-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  margin: 60px auto 0;
  padding: 48px 20px 40px;
  text-align: center;
  border-top: 1px solid var(--border);
}

.footer-mascot-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  margin-bottom: 28px;
  flex-wrap: wrap;
  padding: 0 10px;
}

.footer-mascot-row img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  opacity: 0;
  transform: translateY(20px);
  animation: footerMascotAppear 0.5s ease forwards, footerBounce 2s ease-in-out infinite;
}

.footer-mascot-row img:nth-child(1)  { animation-delay: 0s, 0.5s; }
.footer-mascot-row img:nth-child(2)  { animation-delay: 0.08s, 0.58s; }
.footer-mascot-row img:nth-child(3)  { animation-delay: 0.16s, 0.66s; }
.footer-mascot-row img:nth-child(4)  { animation-delay: 0.24s, 0.74s; }
.footer-mascot-row img:nth-child(5)  { animation-delay: 0.32s, 0.82s; }
.footer-mascot-row img:nth-child(6)  { animation-delay: 0.40s, 0.90s; }
.footer-mascot-row img:nth-child(7)  { animation-delay: 0.48s, 0.98s; }
.footer-mascot-row img:nth-child(8)  { animation-delay: 0.56s, 1.06s; }
.footer-mascot-row img:nth-child(9)  { animation-delay: 0.64s, 1.14s; }
.footer-mascot-row img:nth-child(10) { animation-delay: 0.72s, 1.22s; }
.footer-mascot-row img:nth-child(11) { animation-delay: 0.80s, 1.30s; }
.footer-mascot-row img:nth-child(12) { animation-delay: 0.88s, 1.38s; }
.footer-mascot-row img:nth-child(13) { animation-delay: 0.96s, 1.46s; }
.footer-mascot-row img:nth-child(14) { animation-delay: 1.04s, 1.54s; }
.footer-mascot-row img:nth-child(15) { animation-delay: 1.12s, 1.62s; }
.footer-mascot-row img:nth-child(16) { animation-delay: 1.20s, 1.70s; }

@keyframes footerMascotAppear {
  0%   { opacity: 0; transform: translateY(20px) scale(0.5); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes footerBounce {
  0%, 100% { transform: translateY(0); }
  20%  { transform: translateY(-6px); }
  40%  { transform: translateY(0); }
}

.footer-tagline {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--gold-light);
  margin-bottom: 20px;
  animation: fadeInUp 0.8s ease 1.5s both;
}

.footer-credits {
  font-size: 13px;
  color: var(--text-faint);
  letter-spacing: 1px;
  animation: fadeInUp 0.8s ease 1.8s both;
}

.footer-credits-divider {
  margin: 0 8px;
  color: var(--border);
}

.credit-highlight {
  color: var(--gold-light);
  font-weight: 700;
}

.footer-contact {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.5px;
  line-height: 1.6;
  animation: fadeInUp 0.8s ease 2.1s both;
}

.footer-contact a {
  color: var(--gold);
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
}

.footer-thanks {
  margin-top: 14px;
  font-size: 12px;
  color: var(--gold-light);
  letter-spacing: 0.5px;
  line-height: 1.6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-thanks-sep {
  color: var(--text-dim);
}

/* 感谢名单入口（页脚 · 右侧小箭头） */
.footer-thanks-entry {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 16px 6px 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 214, 92, 0.16), rgba(255, 214, 92, 0.05));
  border: 1px solid rgba(255, 214, 92, 0.35);
  cursor: pointer;
  font-size: 12px;
  color: var(--gold-light);
  letter-spacing: 1px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  user-select: none;
}
.footer-thanks-entry:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 214, 92, 0.25);
  background: linear-gradient(135deg, rgba(255, 214, 92, 0.26), rgba(255, 214, 92, 0.08));
}
.footer-thanks-entry:active { transform: scale(0.97); }
.fte-arrow {
  font-size: 13px;
  transition: transform .25s ease;
  color: var(--gold-light);
}
.footer-thanks-entry:hover .fte-arrow { transform: translateX(2px); }

/* 感谢名单 · 3D 球体词云弹窗 */
.thanks-cloud-box {
  text-align: center;
}
.thanks-cloud-wrap {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  border-radius: 50%;
  cursor: grab; /* 提示可拖动 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  touch-action: none; /* 触摸拖动不触发页面滚动 */
  /* 模拟球体：中心亮、边缘暗 + 顶部高光、底部阴影 */
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 214, 92, 0.16) 0%, rgba(255, 214, 92, 0.05) 42%, rgba(8, 8, 24, 0.55) 78%, rgba(5, 5, 16, 0.85) 100%);
  box-shadow:
    inset 0 0 60px rgba(255, 214, 92, 0.10),
    inset -18px -14px 50px rgba(0, 0, 0, 0.55),
    0 10px 30px rgba(0, 0, 0, 0.4);
}
.thanks-cloud-name {
  position: absolute;
  left: 50%;
  top: 50%;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  color: var(--gold-light);
  text-shadow: 0 0 10px rgba(255, 214, 92, 0.5);
  will-change: transform, filter, opacity;
  backface-visibility: hidden;
  pointer-events: none;
  transform-origin: center;
}

@media (max-width: 640px) {
  .hero-title { font-size: 28px; letter-spacing: 4px; }
  .hero-subtitle { font-size: 14px; }
  .hero-date { font-size: 16px; }
  .hero-poster { margin: 16px auto 12px; border-radius: 12px; }
  
  .games-grid { grid-template-columns: 1fr; }
  /* 移动端保持模块间距紧凑（桌面端已加大到 60px） */
  .games-grid, .album-section, .wishlist-section, .posts-section { margin-bottom: 40px; }
  
  .options-grid { grid-template-columns: 1fr; }
  
  /* 歌词填空：三栏（上一句/歌词/下一句）改单列，避免手机横向溢出 */
  .fill-blank-rail {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .fill-blank-side {
    flex-direction: row;
    justify-content: center;
    gap: 6px;
  }
  .fill-blank-side-text {
    text-align: center;
    flex: 1;
  }
  .lyrics-blank {
    min-width: 60px;
  }
  
  .countdown { gap: 8px; margin-bottom: 0; }
  .countdown-item { padding: 12px 14px; min-width: 64px; }
  .countdown-num { font-size: 24px; }
  
  .player-bar { flex-direction: column; gap: 12px; }
  
  .lyrics-line { font-size: 16px; }
  .question-text { font-size: 17px; }
  
  .game-card { padding: 20px 66px 20px 16px; }
  .game-icon { font-size: 28px; }
  
  /* 游戏顶部HUD：返回/进度/计时器窄屏压缩 */
  .game-header { gap: 8px; }
  .back-btn { padding: 7px 12px; font-size: 13px; }
  .game-progress { gap: 8px; }
  .progress-bar { width: 80px; }
  .game-timer { font-size: 14px; gap: 6px; }
  .timer-bar { width: 50px; }
  
  .timeline-year { font-size: 14px; width: 50px; }
  
  .result-score { font-size: 26px; }
  
  .app-container { padding: 0 16px; }


  .nav-bar { gap: 14px; }
  .nav-links { justify-content: center; flex-wrap: wrap; gap: 6px; padding: 6px 10px; }
  .nav-info-row { justify-content: center; gap: 8px; }
  .nav-info-left { flex: 1 1 100%; justify-content: center; }
  .online-meta-bar, .user-area { height: 40px !important; }
  .meta-ticker-wrap { max-width: 42vw; }
  .nav-btn { padding: 7px 12px; font-size: 13px; }
  .lb-tab { padding: 8px 16px; font-size: 12px; }
  #online-count { font-size: 14px; font-weight: 800; }
  #visit-count { font-size: 12px; font-weight: 700; }
  .user-nickname { max-width: 70px; font-size: 12px; }
  .user-score-text { font-size: 10.5px; }
  .user-avatar-wrap { width: 28px; height: 28px; }

  /* 移动端引言区 */
  .hero-quote { flex-direction: column; gap: 14px; padding: 20px 18px; margin: 30px 0 24px; text-align: center; }
  .hero-quote-figure { width: auto; height: 200px; }
  .hero-quote-text-wrap { width: 100%; }
  .hero-quote-lead { font-size: 13px; }
  .hero-quote-text { font-size: 16px; line-height: 1.7; letter-spacing: 1px; }
  .hero-quote-text-row { gap: 12px; justify-content: center; align-items: center; }
  .hero-quote-text-block { align-items: center; }
  .hero-quote-happy { width: 62px; height: 62px; margin-left: 0; flex-shrink: 0; }
  .hero-quote-text-block .hero-quote-from { font-size: 13px; letter-spacing: 2px; text-align: right; margin-left: auto; margin-top: 2px; }
  .hero-quote-from { text-align: right; }
  .hero-tagline { font-size: 13px; }

  .post-form { padding: 14px; }
  .post-card { padding: 14px; }
  .post-header { flex-wrap: wrap; gap: 8px; }

  .leaderboard-full-item { padding: 12px 14px; }

  .admin-login { flex-direction: column; align-items: stretch; }
  .admin-password-input { width: 100%; }

  .lyrics-sort-item { padding: 10px 12px; }
  .lyrics-sort-text { font-size: 13px; }
  .lyrics-sort-move { width: 26px; height: 26px; }

  .hero-mascot-wrap { width: 150px; height: 150px; }
  .hero-mascot-main { width: 70px; height: 70px; }
  .hero-mascot-float { width: 38px; height: 38px; }
  .games-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .game-card { padding: 18px 60px 18px 14px; border-radius: 14px; }
  .game-card-mascot { width: 44px; height: 44px; margin-top: -22px; right: 8px; }
  .game-icon { font-size: 22px; margin-bottom: 7px; }
  .game-card-title { font-size: 15px; margin-bottom: 4px; }
  .game-card-desc { font-size: 13px; margin-bottom: 8px; }
  .feedback-mascot img { width: 100px; height: 100px; }
  .feedback-mascot { padding: 16px 22px 14px; }
  .result-mascot { width: 76px; height: 76px; }
  .modal-mascot { width: 70px; height: 70px; }
  .leaderboard-avatar { width: 36px; height: 36px; }
  /* 前三名徽章框移动端（缩小，不遮挡序号/昵称） */
  .avatar-ring .leaderboard-avatar { width: 38px; height: 38px; }
  .avatar-ring .rank-frame { width: 66px; height: 66px; }
  .post-empty .empty-mascot { width: 50px; height: 50px; }



  .wishlist-jukebox { flex-direction: column; gap: 18px; padding: 18px; }
  .wishlist-bottom-layout { flex-direction: column; gap: 14px; }
  .vinyl-container { width: 130px; height: 130px; }
  .vinyl-disc { width: 104px; height: 104px; top: 8px; left: 8px; }
  .vinyl-tonearm { width: 64px; height: 112px; }
  .wish-star-slot { flex: 1; height: 76px; }
  .wish-stars { min-width: 0; gap: 8px; }
  .song-card-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); max-height: 360px; }
  .top10-name { font-size: 12px; }

  .result-total-score { font-size: 15px; padding: 10px 18px; }
  .result-total-score strong { font-size: 20px; }

  .admin-controls-panel { padding: 16px; }

  .site-footer { padding: 36px 16px 32px; }
  .footer-mascot-row img { width: 36px; height: 36px; }
  .footer-tagline { font-size: 15px; letter-spacing: 3px; }
  .footer-credits { font-size: 12px; }
}

/* ============================================
   玉米人格图鉴 · 样式
   ============================================ */

/* ===== 封面页 ===== */
.personality-cover {
  text-align: center;
  padding: 40px 20px 20px;
  position: relative;
  overflow: hidden;
}

.pc-deco {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}
.pc-deco-1 {
  top: -40px; left: -30px;
  width: 180px; height: 180px;
  background: rgba(124, 58, 237, 0.15);
}
.pc-deco-2 {
  bottom: -40px; right: -30px;
  width: 200px; height: 200px;
  background: rgba(212, 175, 55, 0.1);
}

.pc-icon-wrap {
  font-size: 56px;
  margin-bottom: 16px;
  animation: pcFloat 3s ease-in-out infinite;
}
@keyframes pcFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.pc-title {
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  letter-spacing: 2px;
}

.pc-subtitle {
  font-size: 15px;
  color: var(--text-dim);
  margin-bottom: 28px;
}

.pc-features {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.pc-feature {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dim);
}
.pc-f-icon { font-size: 16px; }

/* 🔧 测过人数统计（2026-08-15） */
.pc-tested-count {
  display: table;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: #ffe9b0;
  margin: 4px auto 22px;
  padding: 9px 26px;
  letter-spacing: 0.6px;
  background: linear-gradient(135deg, rgba(212,175,55,.28), rgba(212,175,55,.08));
  border: 1px solid rgba(212,175,55,.55);
  border-radius: 40px;
  box-shadow: 0 6px 22px rgba(212,175,55,.28), inset 0 0 14px rgba(212,175,55,.12);
}
.pc-tested-count b {
  font-size: 24px;
  font-weight: 800;
  color: #ffd97a;
  margin: 0 2px;
  text-shadow: 0 0 12px rgba(212,175,55,.8);
}

.pc-dimensions-preview {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}
.pc-dim-chip {
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
}

.pc-footer-text {
  font-size: 13px;
  color: var(--text-faint);
  margin-bottom: 28px;
  letter-spacing: 1px;
}

.pc-start-btn {
  font-size: 16px;
  padding: 14px 48px;
  letter-spacing: 2px;
}

.pc-inputs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.pc-input {
  width: 100%;
  max-width: 320px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  text-align: center;
  outline: none;
  transition: border-color 0.2s ease;
}
.pc-input:focus {
  border-color: var(--gold);
}
.pc-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4af37' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
}
.pc-input-hint {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 2px;
}
.pc-birth-tip {
  min-height: 18px;
  font-size: 12px;
  color: var(--gold-light);
  letter-spacing: 1px;
}

/* ===== 玉米图鉴 · 出生日期自定义日历 ===== */
.pc-birth-wrap {
  position: relative;
  width: 100%;
  max-width: 320px;
}
.pc-birth-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 38px;
}
.birth-cal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1990;
}
.birth-calendar {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(300px, calc(100vw - 48px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  padding: 14px;
  z-index: 2000;
}
.bc-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.bc-picker-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--gold);
  background: rgba(212, 175, 55, 0.14);
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
}
.bc-picker-btn:hover {
  background: var(--gold);
  color: #1a1206;
}
.bc-hspacer { flex: 1; }
.bc-nav {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  border-radius: 10px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.bc-nav:hover { border-color: var(--gold); color: var(--gold); }
.bc-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.bc-weekdays span { padding: 4px 0; }
.bc-weekdays span:first-child,
.bc-weekdays span:last-child { color: #e06c75; }
.bc-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.bc-day {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  height: 34px;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
}
.bc-day:hover { background: rgba(212, 175, 55, 0.15); color: var(--gold); }
.bc-day.bc-empty { visibility: hidden; }
.bc-day.today { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); }
.bc-day.selected { background: var(--gold); color: #1a1206; font-weight: 700; }
.bc-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.bc-today,
.bc-clear {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
}
.bc-today:hover { border-color: var(--gold); color: var(--gold); }
.bc-clear:hover { border-color: #e06c75; color: #e06c75; }
.bc-picker {
  position: absolute;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 130;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.bc-picker-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  min-width: 190px;
}
.bc-picker-item {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  padding: 8px 4px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.bc-picker-item:hover { background: rgba(212, 175, 55, 0.15); color: var(--gold); }
.bc-picker-item.active { background: var(--gold); color: #1a1206; font-weight: 700; }

/* ===== 答题页 ===== */
.personality-quiz {
  padding: 20px 4px;
  max-width: 640px;
  margin: 0 auto;
}

.pq-fade-in {
  animation: pqFadeIn 0.4s ease forwards;
}
.pq-fade-out {
  animation: pqFadeOut 0.35s ease forwards;
}
@keyframes pqFadeIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes pqFadeOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-20px); }
}

.pq-question-num {
  text-align: center;
  font-size: 13px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.pq-question-text {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--text);
  text-align: center;
  margin-bottom: 28px;
  padding: 0 8px;
}

.pq-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pq-option {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: inherit;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}

.pq-option:active:not(.pq-locked) {
  transform: scale(0.97);
  border-color: var(--border-active);
  background: var(--bg-card-hover);
}

.pq-option-key {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  transition: all 0.2s ease;
}

.pq-option-text {
  flex: 1;
}

.pq-option.pq-selected {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.08);
}
.pq-option.pq-selected .pq-option-key {
  background: var(--gold);
  color: var(--bg-deep);
}

.pq-option.pq-locked {
  pointer-events: none;
}
.pq-option.pq-locked:not(.pq-selected) {
  opacity: 0.4;
}

/* ===== 结果页 ===== */
.personality-result {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 4px;
}

.pr-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 24px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.pr-card-glow {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

.pr-header {
  text-align: center;
  margin-bottom: 16px;
}

.pr-greet {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 6px;
  letter-spacing: 1px;
}

.pr-label {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 2px;
  font-weight: 500;
}

.pr-name {
  font-size: 32px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: 3px;
}

.pr-tagline {
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 1px;
}

.pr-zodiacs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}
.pr-zodiac {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 20px;
  font-size: 11px;
  color: var(--gold-light);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.pr-divider {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 20px auto;
}

.pr-desc {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text);
  text-align: justify;
  margin-bottom: 20px;
  position: relative;
}

.pr-psych {
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.pr-psych-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.pr-psych-code {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 100px;
  padding: 3px 12px;
  margin-bottom: 10px;
}
.pr-psych-strengths {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.pr-psych-tag {
  font-size: 11px;
  color: var(--text);
  background: var(--bg-card-hover);
  border-radius: 100px;
  padding: 3px 10px;
}
.pr-psych-row {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-top: 6px;
}
.pr-psych-blind {
  color: var(--text-faint);
}

.pr-quote-box {
  text-align: center;
  padding: 16px 20px;
  background: rgba(212, 175, 55, 0.06);
  border-radius: 12px;
  margin-bottom: 24px;
  border: 1px solid rgba(212, 175, 55, 0.12);
}
.pr-quote-mark {
  font-size: 24px;
  color: var(--gold);
  opacity: 0.4;
  vertical-align: middle;
}
.pr-quote-text {
  font-size: 15px;
  color: var(--gold-light);
  font-weight: 500;
  margin: 0 4px;
}

.pr-dimensions {
  margin-bottom: 24px;
}
.pr-dim-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.pr-dim-label {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  min-width: 70px;
}
.pr-dim-bar-wrap {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 100px;
  overflow: hidden;
}
.pr-dim-bar {
  height: 100%;
  border-radius: 100px;
  transition: width 0.8s ease;
}
.pr-dim-score {
  font-size: 12px;
  color: var(--text-faint);
  min-width: 20px;
  text-align: right;
}

.pr-companion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.pr-companion-label {
  font-size: 12px;
  color: var(--text-dim);
}
.pr-companion-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-light);
}

.pr-invite {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 3px;
  padding: 16px 0 4px;
}

.pr-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.pr-actions-row {
  display: flex;
  gap: 10px;
}
.pr-actions-row .btn-primary,
.pr-actions-row .btn-secondary {
  flex: 1;
}

.pr-restart {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

/* ===== 彩蛋弹窗 ===== */
.easter-egg-box {
  text-align: center;
  padding-top: 26px;
}
/* 隐藏彩蛋：图标金色光环徽章（层次感） */
.ee-user {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 14px;
}
.ee-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(212, 175, 55, 0.7);
}
.ee-user-name {
  font-size: 14px;
  color: var(--gold-light);
  font-weight: 600;
  letter-spacing: 1px;
}
.ee-title {
  font-size: 24px;
  line-height: 1.4;
}
.ee-rule {
  width: 72px;
  height: 2px;
  margin: 12px auto 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(242, 201, 76, 0.85), transparent);
}
/* 正文内衬卡片：区域感 */
.ee-body {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 0 auto 16px;
}
.ee-line {
  font-size: 15px;
  line-height: 1.9;
  color: rgba(240, 240, 245, 0.88);
  margin: 0 0 6px;
}
.ee-line:last-child { margin-bottom: 0; }
/* 亮点行（积分/关键句）：金色胶囊徽章 */
.ee-line-strong {
  display: inline-block;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.32), rgba(212, 175, 55, 0.14));
  border: 1px solid rgba(242, 201, 76, 0.5);
  border-radius: 999px;
  color: var(--gold-light);
  font-weight: 700;
  font-size: 14px;
  padding: 6px 18px;
  margin: 2px 0 12px !important;
}
.ee-line-accent {
  color: var(--coral);
  font-weight: 600;
}
.ee-icon {
  font-size: 40px;
  margin-bottom: 8px;
}
.ee-result {
  margin: 16px 0;
}
.ee-sentence {
  font-size: 16px;
  line-height: 1.7;
  color: var(--gold-light);
  font-weight: 500;
  margin-bottom: 8px;
}
.ee-type {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.ee-copy-hint {
  font-size: 12px;
  color: var(--text-faint);
}
/* 按钮区：两列规整（隐藏彩蛋5按钮 = 微博/朋友圈 + 复制/分享图 + 关闭整行） */
.ee-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-top: 4px;
}
.ee-actions .ee-wide {
  grid-column: 1 / -1;
}
.ee-actions button {
  flex: none;
  padding: 11px 8px;
  font-size: 14px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.ee-actions button:focus {
  outline: none;
}
/* 彩蛋「我已收到」黄色确认按钮：黄底深字，保证可读 */
.easter-egg-box .ee-confirm {
  background: linear-gradient(135deg, #ffd700, #ffb300);
  color: #3a2c00;
  font-weight: 800;
  border: 1px solid rgba(255, 215, 0, 0.65);
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.25);
}
.easter-egg-box .ee-confirm:hover {
  background: linear-gradient(135deg, #ffe14d, #ffc107);
  color: #2a1f00;
}

/* ====== 我的彩蛋记录面板（头像菜单入口，存放所有彩蛋） ====== */
.easter-collection-box {
  width: min(480px, 92vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
}
.easter-collection-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
  padding: 2px;
}
.easter-record-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: var(--transition);
}
.easter-record-item:hover {
  border-color: var(--border-active);
  background: rgba(212, 175, 55, 0.08);
}
.easter-record-item.eri-locked {
  cursor: default;
  opacity: 0.55;
}
.easter-record-item.eri-locked:hover {
  border-color: var(--border);
  background: var(--bg-card);
}
.eri-icon {
  font-size: 26px;
  flex-shrink: 0;
}
.eri-info {
  flex: 1;
  min-width: 0;
}
.eri-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.eri-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}
.eri-arrow {
  color: var(--text-dim);
  font-size: 18px;
}

/* ====== 火眼金睛（歌词变句 + 歌名混淆） ====== */
.fire-head { text-align: center; font-weight: 700; font-size: 15px; margin: 6px 0 14px; color: var(--gold-light); }
.fire-head .fire-count { color: #7cf59b; }
.fire-head .fire-score { color: #ffd9a0; }
/* 火眼金睛难度等级徽章 */
.fire-badge { display: inline-block; vertical-align: middle; margin: 0 4px; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; border: 1px solid; }
.fire-badge-low { color: #7cf59b; border-color: rgba(124,245,155,.5); background: rgba(124,245,155,.12); }
.fire-badge-mid { color: #ffd9a0; border-color: rgba(255,217,160,.5); background: rgba(255,217,160,.12); }
.fire-badge-hard { color: #ff8d7a; border-color: rgba(255,141,122,.55); background: rgba(255,141,122,.14); }
/* 火眼金睛：查看本关答案 */
.fire-answers { padding: 4px 2px 8px; }
.fire-ans-item { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.fire-ans-head { font-size: 13px; font-weight: 700; color: var(--gold-light); margin-bottom: 4px; }
.fire-ans-q { font-size: 13px; color: var(--text); line-height: 1.6; }
.fire-ans-pick { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.fire-ans-explain { font-size: 12px; color: #7cf59b; background: rgba(124,245,155,0.08); border: 1px dashed rgba(124,245,155,0.3); border-radius: 8px; padding: 5px 8px; margin-top: 6px; line-height: 1.5; }
/* 火眼金睛：连续全对奖励提示 */
.fire-streak-bonus { text-align: center; margin-top: 10px; font-size: 14px; font-weight: 700; color: #ffd700; background: rgba(255,215,0,0.12); border: 1px dashed rgba(255,215,0,0.5); border-radius: 10px; padding: 8px 12px; }
.fire-streak-bonus b { color: #ffd700; font-size: 16px; }
.fire-streak-info { text-align: center; margin-top: 8px; font-size: 12px; color: var(--text-dim); }
/* 答题表情互动：开心/不开心 卡通小表情（右下角，不遮挡题目/选项） */
.emotion-tip {
  position: fixed;
  right: 14px;
  bottom: 22px;
  z-index: 4000;
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(18, 16, 38, 0.94);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 14px;
  padding: 8px 12px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
  animation: emotionIn 0.3s ease;
  cursor: pointer;
  max-width: 270px;
}
.emotion-tip-img { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; flex-shrink: 0; }
.emotion-tip-text { font-size: 13px; color: #fff; line-height: 1.45; }
@keyframes emotionIn { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* 结果页表情：小尺寸居中，不遮挡 */
.result-emotion { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px auto 2px; }
.result-emotion img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; }
.result-emotion span { font-size: 13px; color: var(--gold-light); font-weight: 600; }
/* 火眼金睛过关下一关预告 */
.fire-level-tip { text-align: center; margin-top: 10px; font-size: 14px; color: var(--gold-light); }
.fire-type { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 10px; margin-bottom: 8px; background: rgba(212,175,55,.15); border: 1px solid rgba(212,175,55,.4); color: var(--gold-light); }
.fire-prompt-tip { text-align: center; font-size: 13px; color: var(--text-dim); margin-top: 6px; }
.option-btn.opt-correct { border-color: #3cb371 !important; color: #7cf59b !important; }
.option-btn.opt-wrong { border-color: #e53935 !important; color: #ff8a80 !important; }
.option-btn:disabled { cursor: default; }

/* ===== Toast 提示 ===== */
.toast-msg {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-dark);
  border: 1px solid var(--border-active);
  border-radius: 100px;
  padding: 12px 24px;
  font-size: 14px;
  color: var(--text);
  z-index: 10000;
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-gold);
  white-space: nowrap;
}
.toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* 居中 toast（投票等强调提示，显示在页面中部） */
.toast-msg.center {
  bottom: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: rgba(18, 8, 40, 0.96);
  border: 1px solid #f2c94c;
  color: #f2c94c;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 26px;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(242, 201, 76, 0.22);
  z-index: 100000;
  max-width: 82vw;
  text-align: center;
  white-space: normal;
  line-height: 1.5;
}
.toast-msg.center.toast-show {
  transform: translate(-50%, -50%) scale(1);
}

/* ===== 响应式 ===== */
@media (max-width: 480px) {
  .pc-title { font-size: 24px; }
  .pc-subtitle { font-size: 13px; }
  .pc-features { gap: 12px; }
  .pc-feature { font-size: 12px; }

  .pq-question-text { font-size: 15px; }
  .pq-option { padding: 14px 14px; font-size: 13px; }
  .pq-option-key { width: 26px; height: 26px; font-size: 12px; }

  .pr-card { padding: 24px 18px; }
  .pr-name { font-size: 26px; }
  .pr-desc { font-size: 13px; }
  .pr-quote-text { font-size: 14px; }
  .pr-dim-label { font-size: 11px; min-width: 60px; }

  .pc-start-btn { padding: 12px 36px; font-size: 15px; }

  /* 超小屏倒计时紧凑布局 */
  .countdown { gap: 6px; }
  .countdown-item { padding: 10px 10px; min-width: 56px; }
  .countdown-num { font-size: 20px; }
  .countdown-label { font-size: 10px; }

  /* 超小屏游戏卡片2列紧凑 */
  .games-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .game-card { padding: 14px 52px 14px 12px; border-radius: 12px; }
  .game-card-mascot { width: 36px; height: 36px; margin-top: -18px; right: 7px; }
  .game-card-title { font-size: 13px; }
  /* 小屏也显示描述（最多2行），让卡片更高更充实 */
  .game-card-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.5; margin-bottom: 6px; }
  .game-icon { font-size: 19px; margin-bottom: 6px; }

  /* 超小屏青春相册进一步紧凑 */
  .album-tl-layout { height: 320px; }
  .album-tl-track { height: 260px; padding: 4px 60px 4px 12px; }
  .tl-node { width: 160px; }
  .tl-card { max-width: 140px; padding: 8px 10px; }
  .tl-card-title { font-size: 11px; }
  .tl-card-desc { font-size: 10px; }
  .tl-node.above .tl-card { bottom: calc(50% + 20px); }
  .tl-node:not(.above) .tl-card { top: calc(50% + 20px); }

  /* 超小屏黑胶唱片缩小 */
  .vinyl-container { width: 110px; height: 110px; }
  .vinyl-disc { width: 88px; height: 88px; top: 8px; left: 8px; }
  .vinyl-tonearm { width: 56px; height: 96px; }
  .wish-star-slot { height: 64px; }

  /* 超小屏许愿墙歌曲网格 */
  .song-card-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

  /* 超小屏标题 */
  .hero-title { font-size: 24px; letter-spacing: 3px; }
  .hero-subtitle { font-size: 13px; }
  .hero-date { font-size: 14px; }

  /* 超小屏导航更紧凑 */
  .nav-btn { padding: 6px 10px; font-size: 12px; }
  .lb-tab { padding: 7px 12px; font-size: 11px; }

  /* 超小屏留言板 */
  .post-card { padding: 12px 10px; }
  .post-content { font-size: 14px; }

  /* 弹窗小屏适配：保证完整显示且可滚动 */
  .modal-overlay { padding: 12px; align-items: flex-start; overflow-y: auto; }
  .modal-box {
    padding: 24px 16px;
    border-radius: 18px;
    max-height: calc(100vh - 24px);
    margin: auto 0;
  }
  .modal-title { font-size: 20px; }
  .modal-desc { font-size: 13px; margin-bottom: 16px; }
  .modal-input { padding: 12px 14px; font-size: 15px; margin-bottom: 14px; }
  .register-title { font-size: 24px; }

  /* 许愿墙：选中的歌名完整显示（不截断） */
  .wish-star-slot { height: auto; min-height: 64px; padding: 6px 6px; }
  .wish-star-name { -webkit-line-clamp: unset; overflow: visible; font-size: 12px; }
}

/* 超小屏（iPhone SE等375px以下） */
@media (max-width: 375px) {
  .hero-title { font-size: 20px; letter-spacing: 2px; }
  .countdown { gap: 4px; }
  .countdown-item { padding: 8px 8px; min-width: 48px; }
  .countdown-num { font-size: 18px; }
  .games-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tl-node { width: 150px; }
  .tl-card { max-width: 130px; }
  .nav-btn { padding: 5px 9px; font-size: 11px; }
  .lb-tab { padding: 6px 10px; font-size: 10px; }
  .app-container { padding: 0 12px; }
  /* 超小屏隐藏进度条，只保留数字，防止顶部HUD溢出 */
  .progress-bar { display: none; }
  /* 许愿墙选中歌名完整显示（覆盖 height:64px） */
  .wish-star-slot { height: auto; min-height: 60px; }
}

/* ====== 歌词库模块 ====== */
/* ===== 歌词库独立页（lyrics.html）===== */
.lyrics-page {
  max-width: 640px;
  margin: 8px auto 20px;
}
.lyrics-page-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--gold-light);
  text-align: center;
  margin: 18px 0 6px;
  letter-spacing: 1px;
}
.lyrics-page-desc {
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  margin: 18px 0 20px;
  line-height: 1.7;
}
.lyrics-page-desc-hl {
  color: var(--gold-light);
  font-weight: 700;
  margin-left: 2px;
}
.lyrics-page .lyrics-lib-search-wrap {
  margin-bottom: 16px;
}
.lyrics-page .lyrics-lib-list {
  max-height: 62vh;
  min-height: 180px;
}
@media (max-width: 640px) {
  .lyrics-page-title { font-size: 22px; margin-top: 12px; }
  .lyrics-page-desc { font-size: 12px; }
}

.lyrics-lib-box {
  max-width: 560px !important;
  width: 90vw !important;
  height: 82vh;
  max-height: 780px;
  padding: 28px 24px 24px !important;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  text-align: left !important;
}

.lyrics-lib-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.06);
  color: var(--text-dim);
  font-size: 15px;
  cursor: pointer;
  transition: var(--transition);
  z-index: 5;
}
.lyrics-lib-close:hover {
  background: rgba(255,87,34,0.15);
  color: var(--accent-pink);
  transform: rotate(90deg);
}

.lyrics-lib-box .modal-title {
  margin-bottom: 4px !important;
  padding-right: 34px;
}
.lyrics-lib-box .modal-desc {
  margin-bottom: 16px !important;
  font-size: 13px !important;
  text-align: left !important;
}

.lyrics-lib-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.lyrics-lib-search {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: var(--transition);
}
.lyrics-lib-search:focus {
  border-color: var(--border-active);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}
.lyrics-lib-search::placeholder {
  color: var(--text-faint);
}
.lyrics-lib-count {
  font-size: 12px;
  color: var(--gold-light);
  background: rgba(255,215,0,0.08);
  padding: 6px 12px;
  border-radius: 20px;
  white-space: nowrap;
  font-weight: 600;
}

.lyrics-lib-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lyrics-lib-list::-webkit-scrollbar {
  width: 6px;
}
.lyrics-lib-list::-webkit-scrollbar-track {
  background: transparent;
}
.lyrics-lib-list::-webkit-scrollbar-thumb {
  background: rgba(255,215,0,0.2);
  border-radius: 3px;
}
.lyrics-lib-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255,215,0,0.35);
}

.lyrics-lib-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 2;
}

.lyrics-lib-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: var(--transition);
}
.lyrics-lib-item:hover {
  background: rgba(255,215,0,0.07);
  border-color: var(--border-active);
  transform: translateX(3px);
}
.lyrics-lib-item:active {
  transform: translateX(1px) scale(0.99);
}

.lyrics-lib-item-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,107,157,0.15));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.lyrics-lib-item-info {
  flex: 1;
  min-width: 0;
}
.lyrics-lib-item-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lyrics-lib-item-sub {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lyrics-lib-item-arrow {
  font-size: 22px;
  color: var(--text-faint);
  transition: var(--transition);
  line-height: 1;
}
.lyrics-lib-item:hover .lyrics-lib-item-arrow {
  color: var(--gold-light);
  transform: translateX(2px);
}

/* 歌词详情弹窗 */
.lyrics-detail-box {
  max-width: 560px !important;
  width: 90vw !important;
  height: 85vh;
  max-height: 780px;
  padding: 28px 24px 20px !important;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  text-align: left !important;
}

.lyrics-detail-header {
  flex-shrink: 0;
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.lyrics-detail-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--gold-light);
  margin-bottom: 10px;
  padding-right: 30px;
  line-height: 1.3;
  word-break: break-all;
}
.lyrics-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.meta-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}
.meta-label {
  color: var(--text-faint);
  min-width: 42px;
  font-weight: 600;
}
.meta-value {
  color: var(--text-dim);
  word-break: break-all;
}

.lyrics-detail-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px 4px 14px 0;
}
.lyrics-detail-scroll::-webkit-scrollbar {
  width: 6px;
}
.lyrics-detail-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.lyrics-detail-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,107,157,0.2);
  border-radius: 3px;
}
.lyrics-detail-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255,107,157,0.35);
}

.lyrics-detail-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lyrics-line {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text);
  padding: 2px 8px;
  border-radius: 6px;
  transition: background 0.2s ease;
  word-break: break-word;
  white-space: pre-wrap;
}
.lyrics-line:hover {
  background: rgba(255,215,0,0.05);
}
.lyrics-line.lyrics-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-faint);
  font-size: 14px;
}

.lyrics-detail-actions {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  position: relative;
}
.ld-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
}
.ld-btn:hover {
  transform: translateY(-2px);
}
.ld-btn:active {
  transform: translateY(0);
}
.ld-btn-share {
  border-color: var(--border-active);
  background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(255,107,157,0.1));
  color: var(--gold-light);
}
.ld-btn-share:hover {
  background: linear-gradient(135deg, rgba(255,215,0,0.18), rgba(255,107,157,0.18));
  box-shadow: 0 4px 14px rgba(255,215,0,0.15);
}
.ld-btn-copy {
  color: var(--accent-pink);
  border-color: var(--accent-pink);
  background: rgba(255,107,157,0.08);
}
.ld-btn-copy:hover {
  background: rgba(255,107,157,0.15);
  box-shadow: 0 4px 14px rgba(255,107,157,0.15);
}

.ld-toast {
  position: fixed;
  top: 14%;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 999999;
  background: linear-gradient(135deg, var(--gold), var(--accent-pink));
  color: #fff;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  max-width: 86vw;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 16px rgba(255,107,157,0.3);
}
.ld-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(8px);
}

/* 歌词库移动端适配 */
@media (max-width: 640px) {
  .lyrics-lib-box, .lyrics-detail-box {
    width: 95vw !important;
    height: 88vh;
    padding: 20px 16px 16px !important;
  }
  .lyrics-detail-title { font-size: 18px; }
  .lyrics-line { font-size: 14px; line-height: 1.8; }
  .lyrics-lib-search-wrap { flex-direction: column; align-items: stretch; }
  .lyrics-lib-count { align-self: flex-start; }
  .ld-btn { padding: 11px 12px; font-size: 13px; }
  .lyrics-lib-item { padding: 10px 12px; }
  .lyrics-lib-item-icon { width: 36px; height: 36px; min-width: 36px; font-size: 18px; }
  .lyrics-lib-item-title { font-size: 14px; }
}
@media (max-width: 375px) {
  .lyrics-lib-box, .lyrics-detail-box { padding: 16px 12px 12px !important; }
  .lyrics-detail-title { font-size: 17px; }
  .meta-item { font-size: 12px; }
}

/* ====== 物料互换区 ====== */
.materials-section {
  margin: 40px 0;
  scroll-margin-top: 90px;
}

.materials-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
}

.material-title-input {
  min-height: 48px;
  margin-bottom: 12px;
}

.material-upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.material-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: 1px dashed var(--gold);
  border-radius: 10px;
  background: rgba(212, 175, 55, 0.08);
  color: var(--gold-light);
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}

.material-upload-btn:hover {
  background: rgba(212, 175, 55, 0.16);
  border-color: var(--gold-light);
}

.material-upload-hint {
  font-size: 12px;
  color: var(--text-faint);
}

.material-preview-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.material-image-preview {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border-active);
}

.materials-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.materials-grid {
  position: relative;
  display: block;
}
.materials-grid .material-card {
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
}

.material-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.material-card:hover {
  border-color: var(--border-active);
  transform: translateY(-3px);
}

.material-img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  cursor: zoom-in;
}

.material-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.material-body {
  padding: 16px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.material-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1.4;
}

.material-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
}

.material-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  flex-wrap: wrap;
}

.material-author-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--coral));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--bg-deep);
  flex-shrink: 0;
  overflow: hidden;
}

.material-author-img,
.material-comment-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.material-author-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-light);
}

.material-time {
  font-size: 11px;
  color: var(--text-faint);
}

.material-actions {
  margin-left: auto;
}

.material-comments {
  border-top: 1px solid var(--border);
  padding: 10px 18px 14px;
}

.material-comments-toggle {
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px 0;
  transition: var(--transition);
  user-select: none;
}

.material-comments-toggle:hover {
  color: var(--gold-light);
}

.material-comments-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.material-comments-fav {
  flex-shrink: 0;
}

.material-comments-body {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.material-comments-empty {
  font-size: 12px;
  color: var(--text-faint);
  padding: 4px 0;
}

.material-comment-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

/* 🏠 楼中楼子回复（2026-08-17）：二级子回复统一向右缩进，字号稍小，开头显示 @对象 */
.material-comment-replies {
  margin-left: 20px;
  border-left: 2px solid rgba(255, 255, 255, .08);
  padding-left: 8px;
  margin-top: 4px;
}
.material-comment-item.reply .material-comment-author {
  font-size: 11px;
}
.material-comment-item.reply .material-comment-content {
  font-size: 12px;
}
.material-comment-item.reply .material-comment-avatar-wrap {
  width: 22px;
  height: 22px;
  font-size: 10px;
}
.material-comment-more-replies {
  margin-left: 20px;
  margin-top: 4px;
}
.material-comment-more-replies .post-action-btn {
  padding: 2px 8px;
  font-size: 11px;
  color: var(--gold-light);
  background: rgba(255, 255, 255, .04);
  border-color: transparent;
}

.material-comment-avatar-wrap {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--coral));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--bg-deep);
  flex-shrink: 0;
  overflow: hidden;
}

.material-comment-main {
  flex: 1;
  min-width: 0;
}

.material-comment-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}

.material-comment-head .material-time {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-faint);
}

.material-comment-author {
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}

.material-reply-to {
  display: inline-block;
  font-size: 12px;
  color: var(--gold-light);
  opacity: .85;
  margin-right: 4px;
  white-space: nowrap;
}

.material-comment-content {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  word-break: break-word;
  white-space: pre-wrap;
  margin-top: 2px;
  text-align: left;
}

/* 评论操作按钮：内容下方一行，回复/删除横向并排；按钮文字永不折行（防止窄卡片里"删除"被压成竖排） */
.material-comment-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 6px;
}
.material-comment-actions .post-action-btn {
  padding: 3px 8px;
  font-size: 11px;
  white-space: nowrap;
  line-height: 1.4;
}

.material-comment-form {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.material-comment-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: var(--transition);
}

.material-comment-input:focus {
  border-color: var(--border-active);
}

/* ====== 个人资料 - 头像上传 ====== */
.profile-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  justify-content: center;
}

.profile-avatar-img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
  box-shadow: 0 0 18px var(--gold-glow);
  background: linear-gradient(135deg, var(--gold), var(--coral));
}

.profile-avatar-change {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px dashed var(--gold);
  border-radius: 10px;
  background: rgba(212, 175, 55, 0.08);
  color: var(--gold-light);
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}

.profile-avatar-change:hover {
  background: rgba(212, 175, 55, 0.16);
}

/* 物料区移动端适配 */
@media (max-width: 640px) {
  .section-desc { font-size: 12px; }
  .materials-form { padding: 16px; }
  .material-body { padding: 10px 12px 8px; }
  .material-title { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .material-desc { display: none; }
  .material-author { gap: 6px; }
  .material-author-avatar { width: 22px; height: 22px; }
  .material-actions { margin-left: 0; width: 100%; }
  .material-comments { padding: 6px 12px 10px; }
  .material-comments-toggle { font-size: 12px; }
  /* 移动端窄卡片：列表卡片底部操作行改纵向排列，避免「留言/收藏/分享」错行（弹窗内不受影响） */
  .material-card .material-comments-foot { flex-direction: column; align-items: flex-start; gap: 4px; }
  .material-card .material-comments-fav { display: flex; gap: 6px; flex-wrap: wrap; }
  .material-card .material-comments-fav .material-fav-btn { padding: 4px 9px; font-size: 11px; margin-left: 0 !important; }
  .material-upload-hint { width: 100%; }
  .profile-avatar-img { width: 72px; height: 72px; }
}

/* ====== 物料互换独立页 ====== */
.materials-page {
  margin: 20px 0 40px;
  scroll-margin-top: 90px;
}

.material-login-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px dashed var(--border-active);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--text-dim);
  backdrop-filter: blur(10px);
}

.page-info {
  font-size: 12px;
  color: var(--text-faint);
  margin-right: 8px;
  white-space: nowrap;
}

/* ====== 物料收藏按钮（桃心风格） ====== */
.material-fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.15s ease;
  font-family: inherit;
  user-select: none;
}

.material-fav-btn:hover {
  border-color: var(--coral);
  color: var(--coral);
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(232, 66, 87, 0.2);
}

.material-fav-btn.active {
  background: linear-gradient(135deg, rgba(232, 66, 87, 0.2), rgba(212, 175, 55, 0.16));
  border-color: var(--coral);
  color: var(--coral);
  box-shadow: 0 0 12px rgba(232, 66, 87, 0.28);
  animation: fav-pop 0.2s ease;
}

.material-fav-btn.active:hover {
  transform: translateY(-1px) scale(1.03);
}

@keyframes fav-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.18); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.material-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

/* ====== 个人中心弹窗 ====== */
.profile-center-box {
  width: min(520px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
}

.profile-center-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.profile-center-user {
  min-width: 0;
}

.profile-center-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--gold-light);
}

.profile-center-sub {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 3px;
}

.profile-center-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.profile-center-fav-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.pc-fav-tab {
  flex: 1;
  padding: 8px 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}
.pc-fav-tab.active {
  border-color: var(--gold);
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.12);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.2);
}
.profile-center-favs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 44vh;
  overflow-y: auto;
}

.pc-fav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  transition: var(--transition);
  cursor: pointer;
}

.pc-fav-item:hover {
  border-color: var(--border-active);
}

.pc-fav-img {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  cursor: zoom-in;
}

.pc-fav-info {
  flex: 1;
  min-width: 0;
}

.pc-fav-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-fav-meta {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 4px;
}
.pc-fav-desc {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 留言卡片收藏按钮（评论一行右侧） */
.post-fav-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.post-fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.15s ease;
  font-family: inherit;
  user-select: none;
}
.post-fav-btn:hover { border-color: var(--gold); color: var(--gold-light); }
.post-fav-btn.active {
  border-color: var(--gold);
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.12);
}
.post-fav-count { font-size: 12px; color: var(--text-faint); }

@media (max-width: 480px) {
  .pc-fav-item { gap: 10px; padding: 8px 10px; }
  .pc-fav-img { width: 48px; height: 48px; }
  .profile-center-head { gap: 10px; }
  .pc-fav-tab { font-size: 12px; padding: 7px 0; }
  .post-fav-row { gap: 8px; }
  .post-fav-btn { padding: 4px 10px; font-size: 11px; }
}

/* ====== 图片全图放大（灯箱） ====== */
.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(5, 5, 15, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: lightbox-fade 0.25s ease;
}
@keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } }
.img-lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.2);
  object-fit: contain;
  animation: lightbox-zoom 0.3s ease;
}
@keyframes lightbox-zoom { from { transform: scale(0.9); } to { transform: scale(1); } }
.img-lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid var(--border);
}
.img-lightbox-close:hover {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}

/* ====== 留言“查看全部” ====== */
.material-comments-more {
  margin-top: 6px;
  font-size: 12px;
  color: var(--gold-light);
  cursor: pointer;
  text-align: center;
  padding: 6px 0;
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.06);
  border: 1px dashed var(--border);
  transition: var(--transition);
  user-select: none;
}
.material-comments-more:hover {
  background: rgba(212, 175, 55, 0.14);
  border-color: var(--gold);
}

/* ====== 物料详情弹窗（大图 + 介绍 + 全部留言） ====== */
.material-comments-modal-box {
  width: min(520px, 92vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
}
.mcm-material-wrap { text-align: center; }
.mcm-material-img {
  width: 100%;
  max-height: 42vh;
  object-fit: contain;
  border-radius: 12px;
  cursor: zoom-in;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}
.md-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1.4;
  margin-bottom: 6px;
  text-align: left;
}
.md-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  margin-bottom: 10px;
}
.md-author {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.md-author-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--coral));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--bg-deep);
  overflow: hidden;
  flex-shrink: 0;
}
.md-author-img { width: 100%; height: 100%; object-fit: cover; }
.md-author-name { font-size: 13px; font-weight: 600; color: var(--gold-light); }
.md-time { font-size: 11px; color: var(--text-faint); }
.md-actions { margin-left: auto; display: flex; gap: 8px; }
.mcm-list {
  flex: 1;
  min-height: 120px;
  max-height: 48vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px;
}
.material-comments-modal-box .material-comment-form {
  margin-top: 12px;
}

/* ====== 评论通知：头像小玉米 ====== */
.user-avatar-wrap {
  position: relative;
}
.notif-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 10px;
  background: #e53935;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 12px rgba(229, 57, 53, 0.8), 0 2px 6px rgba(0, 0, 0, 0.25);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  animation: notif-blink 0.9s ease-in-out infinite;
}
/* 头像外闪烁：一亮一暗 + 轻微缩放，让未读消息角标更显眼 */
@keyframes notif-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.88); }
}

/* ====== 消息弹窗 ====== */
.notif-box {
  width: min(520px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.notif-list {
  flex: 1;
  min-height: 100px;
  max-height: 52vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px;
}
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  transition: var(--transition);
}
.notif-item:hover { border-color: var(--border-active); }
.notif-item-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
}
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.notif-item-author {
  color: var(--gold-light);
  font-weight: 700;
}
.notif-type-tag {
  font-size: 11px;
  color: #b8860b;
  background: rgba(212, 175, 55, 0.12);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.notif-item-content {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  word-break: break-word;
}
.notif-item-time {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 6px;
}
/* 从消息中心跳转定位的高亮闪烁 */
.focus-flash {
  animation: focusFlash 1.2s ease-in-out 2 !important;
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.35) !important;
}
@keyframes focusFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
  50% { box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.55); }
}

/* ====== 留言板：左侧内容+评论，右侧约1/3大图 ====== */
/* ====== 留言板图片 ====== */
.post-image-wrap {
  margin-bottom: 10px;
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
}
.post-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.post-views,
.mat-views {
  font-size: 11px;
  color: var(--text-faint);
  margin-left: 6px;
  white-space: nowrap;
}
/* 物料收藏数量（👁 旁 ❤） */
.mat-fav-count {
  font-size: 11px;
  color: var(--text-faint);
  margin-left: 8px;
  white-space: nowrap;
}
/* 物料图片分享按钮（与收藏同款胶囊） */


/* ====== 留言板"查看全部" ====== */
.posts-more-btn {
  display: block;
  width: 100%;
  background: var(--bg-card);
  border: 1px dashed var(--border-active);
  color: var(--gold-light);
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  transition: var(--transition);
}
.posts-more-btn:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: var(--gold);
}

/* ====== 留言互动弹窗 ====== */
.posts-modal-box {
  width: min(560px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.posts-modal-list {
  flex: 1;
  min-height: 140px;
  max-height: 52vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 2px;
}
.posts-modal-box .material-comment-form {
  margin-top: 12px;
}

/* ====== 物料留言弹窗：顶部图片 ====== */
.mcm-material-wrap {
  margin-bottom: 10px;
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
  max-height: 200px;
}
.mcm-material-img {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 12px;
}

/* ===== 连连看（春春连字） ===== */
.connect-wrap { padding: 4px 0; }
.connect-level-info { text-align: center; font-size: 14px; color: var(--gold-light); margin-bottom: 10px; }
.connect-level-info b { color: #f2c94c; font-size: 16px; }
.connect-targets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 12px; }
.connect-target { font-size: 13px; padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(212,175,55,.3); color: #fff; transition: .2s; }
.connect-target-done { background: rgba(212,175,55,.25); color: #f2c94c; text-decoration: line-through; }
.connect-board { position: relative; max-width: 640px; margin: 0 auto; }
.connect-grid { display: grid; justify-content: center; gap: 4px; padding: 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(212,175,55,.25); border-radius: 14px; width: fit-content; max-width: 100%; margin: 0 auto; }
.connect-cell { width: var(--cell, 40px); height: var(--cell, 40px); display: flex; align-items: center; justify-content: center; font-size: calc(var(--cell, 40px) * 0.5); font-weight: 700; color: #fff; background: linear-gradient(135deg,#3a2370,#2a1550); border-radius: 8px; border: 1px solid rgba(212,175,55,.45); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
.connect-empty { background: transparent; border-color: transparent; }
.connect-done { background: linear-gradient(135deg,#d4af37,#c9a030); color: #1a0a2e; border-color: #f2c94c; box-shadow: 0 0 12px rgba(212,175,55,.5); }
.connect-fail { background: #c0392b; border-color: #e74c3c; }
.connect-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.connect-line-preview { stroke: #f2c94c; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; fill: none; }
.connect-hint { text-align: center; font-size: 12px; color: rgba(255,255,255,.55); margin-top: 10px; }
.connect-level-pass { text-align: center; font-size: 20px; color: #f2c94c; margin-top: 24px; line-height: 1.8; }
.connect-quit { margin-left: 8px; padding: 2px 10px; font-size: 11px; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color: #ffd9a0; cursor: pointer; vertical-align: middle; }
.connect-quit:active { transform: scale(.96); }
.connect-quit.disabled { opacity: .45; pointer-events: none; }
/* 🎲 棋盘检视遮罩（2026-08-16）：进入棋盘前 3 秒倒计时 + 布局核对，覆盖整个棋盘 */
.connect-intro {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(18, 12, 40, .82);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border-radius: 14px;
  pointer-events: auto;
}
.connect-intro-count { font-size: 68px; font-weight: 800; color: #ffd966; line-height: 1; text-shadow: 0 2px 14px rgba(255,217,102,.5); animation: connectIntroPulse 1s ease-in-out infinite; }
.connect-intro-text { font-size: 14px; color: #fff; opacity: .92; letter-spacing: 3px; }
@keyframes connectIntroPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
/* 连连看提醒：整句格子金色呼吸闪烁 */
.connect-cell.connect-hint {
  border-color: #ffe27a;
  box-shadow: 0 0 14px rgba(255,226,122,.9);
  animation: connectHintBlink .9s ease-in-out infinite;
  z-index: 2;
}
@keyframes connectHintBlink {
  0%, 100% { box-shadow: 0 0 6px rgba(255,226,122,.5); transform: scale(1); }
  50% { box-shadow: 0 0 18px rgba(255,226,122,1); transform: scale(1.06); }
}
/* 连连看提醒：顶部整句文字气泡 */
.connect-hint-bubble {
  text-align: center; margin: 6px 0 10px; padding: 6px 12px;
  background: rgba(212,175,55,.16); border: 1px solid rgba(212,175,55,.5);
  border-radius: 10px; color: #ffe27a; font-size: 14px;
  animation: connectHintFade .3s ease;
}
.connect-hint-bubble b { color: #fff; }
@keyframes connectHintFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.connect-resume { text-align: center; padding: 40px 16px; }
.connect-resume-icon { font-size: 52px; margin-bottom: 12px; }
.connect-resume-title { font-size: 20px; font-weight: 700; color: #f2c94c; margin-bottom: 8px; }
.connect-resume-sub { font-size: 14px; color: rgba(255,255,255,.75); margin-bottom: 24px; }
.connect-resume-sub b { color: #f2c94c; }
.connect-resume-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* 连连看返回确认弹窗（存档退出 / 结束本局 / 取消） */
.connect-confirm-mask {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 26, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.connect-confirm-box {
  width: min(320px, 86vw);
  padding: 24px 20px 20px;
  border-radius: 18px;
  background: linear-gradient(160deg, #241f47, #181433);
  border: 1px solid rgba(242, 201, 76, 0.35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(242, 201, 76, 0.12);
  text-align: center;
}
.connect-confirm-title { font-size: 20px; font-weight: 800; color: var(--gold); margin-bottom: 8px; }
.connect-confirm-sub { font-size: 14px; color: rgba(255, 255, 255, 0.78); margin-bottom: 20px; line-height: 1.7; }
.connect-confirm-sub b { color: var(--gold-light); }
.connect-confirm-actions { display: flex; flex-direction: column; gap: 10px; }
.connect-confirm-actions .btn { width: 100%; }
/* 结算页顶部按钮组（重玩/存档提到答案模块上方） */
.result-actions-top { margin-bottom: 18px; }
.connect-answers { margin: 14px auto 0; max-width: 440px; text-align: left; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 12px 14px; }
.connect-answers-title { font-weight: bold; font-size: 14px; margin-bottom: 8px; color: #7cf59b; }
.connect-answers-tip { font-size: 12px; color: var(--gold-light); margin-bottom: 8px; padding: 6px 8px; background: rgba(212,175,55,.1); border: 1px dashed rgba(212,175,55,.4); border-radius: 8px; text-align: center; }
.connect-answer-item { font-size: 13px; line-height: 2; color: #f0ead9; }
.connect-answer-item.miss { color: #ffd9a0; }
.connect-answer-item b { color: #fff; }
.connect-answer-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  margin-right: 6px;
  vertical-align: 1px;
  line-height: 1.6;
  cursor: pointer; /* 可点击查看整首歌 */
}
.connect-answer-tag.tag-name {
  color: #2a1f00;
  background: linear-gradient(135deg, #f6d365, #d4af37);
  box-shadow: 0 1px 6px rgba(212,175,55,.35);
}
.connect-answer-tag.tag-lyric {
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
}
/* 连连看结算页：歌词/歌名可点击查看整首歌 */
.connect-lyric {
  position: relative;
  cursor: pointer;
}
/* 连连看查看整首歌弹窗：歌名 + 完整歌词（可滚动浏览复习） */
.connect-song-box {
  width: min(520px, 92vw);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
}
.connect-song-lyrics {
  flex: 1;
  overflow-y: auto;
  margin-top: 6px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.9;
  color: #f0ead9;
  max-height: 56vh;
}
.connect-song-lyrics div { margin-bottom: 2px; }
.connect-song-empty { color: var(--text-dim); text-align: center; padding: 20px 0; }
.connect-lyric-src {
  display: none;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-light);
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 214, 92, 0.35);
  border-radius: 6px;
  padding: 1px 8px;
  white-space: nowrap;
  vertical-align: middle;
}
.connect-lyric:hover .connect-lyric-src,
.connect-lyric.show-src .connect-lyric-src {
  display: inline-block;
}
.personality-page { max-width: 780px; margin: 0 auto; padding: 26px 16px 60px; min-height: 70vh; }
@media (max-width: 480px) { .connect-cell { width: var(--cell, 30px); height: var(--cell, 30px); font-size: calc(var(--cell, 30px) * 0.5); } .connect-grid { gap: 2px; padding: 4px; } }

/* ===== 积分规则弹窗（答题标题问号） ===== */
.quiz-rules-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4af37, #c9a030);
  color: #1a0a2e;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
}
.quiz-rules-btn:hover { transform: scale(1.08); }
.quiz-rules-box { max-width: 520px; }
/* 规则弹窗：双页签（积分规则 / 局数统计） */
.quiz-tabs { display:flex; gap:8px; margin-bottom:14px; }
.quiz-tab { flex:1; padding:10px 8px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text-faint); font-size:14px; font-weight:700; cursor:pointer; transition:all .2s; }
.quiz-tab.active { background:rgba(212,175,55,.14); color:var(--gold-light); border-color:#d4af37; }
.quiz-round-tip { padding:10px 12px; border-radius:10px; border:1px dashed rgba(212,175,55,.4); background:rgba(212,175,55,.06); color:var(--gold-light); font-size:13px; line-height:1.6; margin-bottom:12px; }
.quiz-round-tip b { color:#fff; }
.quiz-round-num { font-size:13px; color:#f2c94c; font-weight:800; }
.quiz-rule-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.quiz-rule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  cursor: pointer;
  user-select: none;
}
.quiz-rule-head:hover { background: rgba(255, 255, 255, 0.06); }
.quiz-rule-name { font-size: 15px; font-weight: 700; color: #fff; }
.quiz-rule-star { color: #f2c94c; letter-spacing: 1px; font-size: 12px; }
.quiz-rule-full { font-size: 13px; color: #f2c94c; font-weight: 700; }
.quiz-rule-toggle { font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.quiz-rule-summary {
  padding: 0 14px 11px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}
.quiz-rule-detail {
  padding: 0 14px 12px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(212, 175, 55, 0.08);
  border-top: 1px dashed rgba(212, 175, 55, 0.3);
}

/* ===== 数据看板（管理员埋点统计） ===== */
.ana-empty { color: #999; font-size: 12px; padding: 8px 0; }
.ana-sec { margin: 10px 0; padding: 10px 12px; background: rgba(255, 255, 255, 0.05); border-radius: 10px; border: 1px solid rgba(245, 197, 24, 0.15); }
.ana-sec-title { font-size: 13px; font-weight: 600; color: #f5c518; margin-bottom: 8px; }
.ana-kpis { display: flex; flex-wrap: wrap; gap: 8px; }
.ana-kpi { flex: 1 1 90px; min-width: 90px; background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 8px 6px; text-align: center; }
.ana-kpi b { display: block; font-size: 18px; color: #fff; }
.ana-kpi span { display: block; font-size: 11px; color: #aaa; margin-top: 2px; }
.ana-kpi-main { background: rgba(245, 197, 24, 0.18); border: 1px solid rgba(245, 197, 24, 0.4); }
.ana-kpi-main b { font-size: 24px; color: #f5c518; }
.ana-kpi-main span { color: #ffe9a8; }
.ana-kpi-dim b { color: #bbb; }
.ana-kpi-dim span { color: #888; }
.ana-note { margin-top: 6px; font-size: 11px; color: #9a9; line-height: 1.5; }
.ana-bar { flex: 1; height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin: 0 6px; }
.ana-bar-fill { height: 100%; background: linear-gradient(90deg, #f5c518, #ff8c00); border-radius: 4px; transition: width .4s; }
.ana-sec-sub { font-size: 12px; font-weight: 600; color: #f5c518; margin: 8px 0 4px; }
.ana-dist-list { display: flex; flex-direction: column; gap: 5px; }
.ana-dist-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #ccc; }
.ana-dist-row span { min-width: 120px; }
.ana-dist-row em { min-width: 56px; text-align: right; font-style: normal; color: #aaa; }
.ana-mod { font-style: normal; font-size: 10px; color: #888; }
.ana-hours { display: flex; align-items: flex-end; gap: 2px; height: 90px; padding-top: 6px; }
.ana-hour { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 2px; }
.ana-hour i { display: block; width: 100%; max-width: 16px; background: linear-gradient(180deg, #f5c518, #ff8c00); border-radius: 3px 3px 0 0; min-height: 2px; }
.ana-hour span { font-size: 9px; color: #888; }
.ana-hot-row, .ana-nu-row { display: flex; align-items: center; font-size: 12px; color: #ddd; margin: 6px 0; }
.ana-hot-name { width: 110px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ana-hot-count { width: 44px; text-align: right; color: #f5c518; }
.ana-nu-row span { width: 48px; flex-shrink: 0; color: #bbb; }
.ana-nu-row b { width: 32px; text-align: right; color: #f5c518; }
.ana-journey-row, .ana-streak-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #e8e8e8; padding: 5px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.08); }
.ana-journey-row em, .ana-streak-row em { color: #f5c518; font-style: normal; font-size: 12px; white-space: nowrap; }
/* 日访问人数趋势 */
.ana-days-toggle { float: right; display: inline-flex; gap: 4px; }
.ana-days-toggle button { background: rgba(255,255,255,0.08); color: #aaa; border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; padding: 2px 8px; font-size: 11px; cursor: pointer; font-family: inherit; }
.ana-days-toggle button.on { background: rgba(245,197,24,0.2); border-color: #f5c518; color: #f5c518; }
.ana-daily { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding: 6px 2px 0; }
.ana-daily-col { flex: 1; min-width: 8px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; }
.ana-daily-bar { width: 100%; max-width: 18px; min-height: 2px; background: linear-gradient(180deg, #f5c518, #ff8c00); border-radius: 3px 3px 0 0; transition: height .4s; }
.ana-daily-label { font-size: 9px; color: #999; white-space: nowrap; transform: scale(0.85); transform-origin: center; }
.ana-daily-col { position: relative; }
.ana-daily-tip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 8, 20, 0.92);
  color: #fff;
  font-size: 10px;
  line-height: 1.4;
  padding: 4px 7px;
  border-radius: 6px;
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 6;
  border: 1px solid rgba(245, 197, 24, 0.45);
}
.ana-daily-col:hover .ana-daily-tip { opacity: 1; }
/* 活跃用户 */
.ana-active { display: flex; gap: 10px; flex-wrap: wrap; }
.ana-active-col { flex: 1 1 200px; min-width: 200px; background: rgba(255,255,255,0.04); border-radius: 8px; padding: 8px 10px; }
.ana-active-col-title { font-size: 12px; font-weight: 600; color: #f5c518; margin-bottom: 4px; }
/* 🐞 Top 前端错误（2026-08-16） */
.ana-err-badge { display: inline-block; background: #e74c3c; color: #fff; font-size: 11px; border-radius: 10px; padding: 1px 8px; vertical-align: middle; }
.ana-errors { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.ana-err-row { background: rgba(231, 76, 60, 0.08); border: 1px solid rgba(231, 76, 60, 0.25); border-radius: 8px; padding: 6px 10px; }
.ana-err-msg { font-size: 12px; color: #ffd7d0; word-break: break-all; line-height: 1.4; }
.ana-err-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 11px; flex-wrap: wrap; }
.ana-err-loc { color: #f5c518; font-family: ui-monospace, Menlo, monospace; }
.ana-err-meta em { color: #e74c3c; font-style: normal; font-weight: 600; }
.ana-err-meta i { color: #999; font-style: normal; }
.ana-au-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #e8e8e8; padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,0.07); }
.ana-au-row em { color: #f5c518; font-style: normal; white-space: nowrap; }

/* ===== 日志统计分析 · Bug 工单 ===== */
.ana-refresh { background: none; border: 1px solid rgba(255,255,255,0.25); color: #ccc; border-radius: 6px; font-size: 11px; padding: 1px 8px; margin-left: 6px; cursor: pointer; vertical-align: middle; }
.ana-refresh:hover { border-color: #f5c518; color: #f5c518; }
.ana-bug-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.ana-bug-stat { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: #bbb; font-size: 11px; border-radius: 12px; padding: 2px 10px; cursor: pointer; }
.ana-bug-stat b { color: #fff; }
.ana-bug-stat.open { border-color: rgba(231,76,60,0.5); }
.ana-bug-stat.open.on { background: rgba(231,76,60,0.25); color: #ffd7d0; }
.ana-bug-stat.fixing { border-color: rgba(245,197,24,0.5); }
.ana-bug-stat.fixing.on { background: rgba(245,197,24,0.2); color: #ffe9a8; }
.ana-bug-stat.fixed { border-color: rgba(46,204,113,0.5); }
.ana-bug-stat.fixed.on { background: rgba(46,204,113,0.2); color: #b7f0cf; }
.ana-bug-stat.ignored { border-color: rgba(150,150,150,0.5); }
.ana-bug-stat.ignored.on { background: rgba(150,150,150,0.2); color: #ddd; }
.ana-bug-stat.all.on { background: rgba(255,255,255,0.18); color: #fff; }
.ana-bug-row { background: rgba(231,76,60,0.06); border: 1px solid rgba(231,76,60,0.2); border-left: 3px solid #e74c3c; border-radius: 8px; padding: 6px 10px; }
.ana-bug-row .ana-bug-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.ana-bug-id { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #f5c518; font-weight: 700; }
.ana-bug-status { font-size: 10px; padding: 1px 8px; border-radius: 9px; }
.ana-bug-status.open { background: rgba(231,76,60,0.3); color: #ffb3ab; }
.ana-bug-status.fixing { background: rgba(245,197,24,0.25); color: #ffe9a8; }
.ana-bug-status.fixed { background: rgba(46,204,113,0.25); color: #b7f0cf; }
.ana-bug-status.ignored { background: rgba(150,150,150,0.25); color: #ccc; }
.ana-bug-count { font-size: 11px; color: #aaa; margin-left: auto; }
.ana-bug-count em { color: #e74c3c; font-style: normal; font-weight: 700; }
.ana-bug-note { margin-top: 3px; font-size: 11px; color: #b7f0cf; background: rgba(46,204,113,0.08); border-radius: 6px; padding: 3px 8px; }
.ana-bug-ver { display: inline-block; background: rgba(245,197,24,0.2); color: #f5c518; border-radius: 6px; padding: 0 6px; font-family: ui-monospace, monospace; }
.ana-bug-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.ana-bug-btn { font-size: 11px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); color: #ccc; border-radius: 6px; padding: 2px 9px; cursor: pointer; }
.ana-bug-btn:hover { filter: brightness(1.2); }
.ana-bug-btn.fixed { border-color: rgba(46,204,113,0.5); color: #b7f0cf; }
.ana-bug-btn.fixing { border-color: rgba(245,197,24,0.5); color: #ffe9a8; }
.ana-bug-btn.ignored { border-color: rgba(150,150,150,0.5); color: #ccc; }
.ana-bug-btn.copy { border-color: rgba(245,197,24,0.4); color: #f5c518; }
.ana-bug-btn.copy:hover { background: rgba(245,197,24,0.15); }
.ana-bug-scene { display: inline-block; background: rgba(245,197,24,0.12); color: #ffe9a8; border-radius: 6px; padding: 0 6px; font-size: 11px; }
.ana-bug-user { display: inline-block; background: rgba(52,152,219,0.12); color: #a9d7f5; border-radius: 6px; padding: 0 6px; font-size: 11px; }
.ana-bug-btn.note { border-color: rgba(52,152,219,0.5); color: #aed6f1; }
.ana-bug-btn.open { border-color: rgba(231,76,60,0.5); color: #ffb3ab; }

/* ===== 管理员面板弹窗（类收藏中心） ===== */
.admin-panel-box { max-width: 720px; max-height: calc(100vh - 60px); overflow-y: auto; }
.admin-panel-box .admin-controls-panel { margin-bottom: 0; border-radius: 12px; }
/* 管理员面板弹窗顶部返回条（返回上一级头像菜单，避免每次滚到底部） */
.admin-panel-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.admin-panel-topbar .admin-topbar-back { padding: 5px 16px; font-size: 12px; }
/* 管理员面板弹窗内回到顶部：复用首页 .back-to-top 金色圆钮样式，仅覆盖定位为弹窗内悬浮 */
#admin-panel-modal .back-to-top {
  position: sticky;
  right: 16px;
  bottom: 16px;
  margin: 0 14px 0 auto;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  font-size: 20px;
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ===== 留言发布全屏 loading 遮罩（2026-08-12 并发优化） ===== */
#post-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 20, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.post-loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 36px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.post-loading-spinner {
  width: 38px;
  height: 38px;
  border: 4px solid rgba(212, 175, 55, 0.25);
  border-top-color: #d4af37;
  border-radius: 50%;
  animation: post-spin 0.8s linear infinite;
}
.post-loading-text {
  font-size: 15px;
  color: #333;
  font-weight: 600;
}
@keyframes post-spin {
  to { transform: rotate(360deg); }
}

/* ====== 性能优化：系统开启「减少动效」时，自动关闭所有持续动画（低性能设备/手机更流畅） ====== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ====== 留言板：留言总量统计徽章 ====== */
.posts-total-badge,
.materials-total-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #d4af37;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 20px;
  padding: 3px 12px;
  margin-left: 10px;
  vertical-align: middle;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

/* ============ PK 赛（2026-08-15） ============ */
.pk-page { max-width: 640px; margin: 18px auto 60px; padding: 0 14px; }
.pk-view { display: none; }
.pk-title { text-align:center; font-size: 22px; font-weight: 800; color: var(--gold-light); margin: 18px 0 6px; letter-spacing: .5px; }
.pk-sub { text-align:center; color: var(--text-faint); font-size: 13px; line-height: 1.7; margin-bottom: 14px; }
.pk-card { background: rgba(20,18,45,.45); border:1px solid var(--border); border-radius:14px; padding:14px; margin-bottom: 12px; }
.pk-card-label { color: var(--gold-light); font-size:14px; font-weight:700; margin-bottom:10px; }
.pk-options { display:flex; gap:10px; flex-wrap:wrap; }
.pk-option { flex:1; min-width:80px; padding:12px 10px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text); font-size:15px; font-weight:600; cursor:pointer; transition:all .2s; }
.pk-option.active { background: rgba(212,175,55,.14); color: var(--gold-light); border-color: #d4af37; box-shadow: none; }
.pk-option.active::before { content: '✔ '; }
/* ⚖️ PK 赛制规则说明 */
.pk-rules { margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px; border:1px dashed rgba(212,175,55,.4); background: rgba(212,175,55,.06); }
.pk-rules-title { color: var(--gold-light); font-size: 13px; font-weight: 800; margin-bottom: 6px; letter-spacing: .5px; }
.pk-rules-row { font-size: 13px; line-height: 1.7; color: var(--text-faint); }
.pk-rules-row b { color: var(--gold-light); }
.pk-create-btn { display:block; width:100%; margin-top:6px; padding:14px; border:none; border-radius:12px; background:linear-gradient(135deg,#d4af37,#b8860b); color:#1a0a2e; font-size:16px; font-weight:800; cursor:pointer; box-shadow:0 3px 14px rgba(212,175,55,.3); }
.pk-create-btn:hover { filter:brightness(1.08); }
.pk-end-btn { display:inline-block; padding:12px 18px; border-radius:10px; border:1px solid rgba(255,80,80,.5); background:rgba(255,80,80,.12); color:#ff8080; font-size:14px; font-weight:700; cursor:pointer; }
.pk-back-btn { display:inline-block; padding:12px 18px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--text-faint); font-size:14px; cursor:pointer; }
.pk-join-hint { text-align:center; margin-top:16px; color:var(--text-faint); font-size:13px; }
.pk-room-input { width:120px; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:rgba(255,255,255,.06); color:var(--text); text-align:center; letter-spacing:2px; margin:0 6px; }
.pk-join-btn { padding:8px 14px; border-radius:8px; border:none; background:linear-gradient(135deg,#d4af37,#b8860b); color:#1a0a2e; font-weight:700; cursor:pointer; }
.pk-room-meta { display:flex; justify-content:space-between; align-items:center; background:rgba(20,18,45,.45); border:1px solid var(--border); border-radius:12px; padding:12px 16px; margin-bottom:12px; }
.pk-room-no { color:var(--text-faint); font-size:14px; } .pk-room-no b { color:var(--gold-light); font-size:18px; letter-spacing:1px; }
.pk-room-round { color:var(--gold-light); font-size:13px; font-weight:700; }
.pk-invite { background:rgba(20,18,45,.45); border:1px solid var(--border); border-radius:12px; padding:14px; margin-bottom:12px; }
.pk-invite-label { color:var(--gold-light); font-size:14px; font-weight:700; margin-bottom:10px; }
.pk-invite-body { display:flex; gap:14px; align-items:center; }
.pk-qr { width:150px; height:150px; background:#fff; border-radius:10px; padding:6px; flex-shrink:0; }
.pk-qr canvas { width:100%; height:100%; }
.pk-invite-info { flex:1; min-width:0; }
.pk-invite-link { font-size:12px; color:var(--text-faint); word-break:break-all; background:rgba(255,255,255,.05); border-radius:6px; padding:8px; margin-bottom:8px; }
.pk-copy-btn { padding:8px 14px; border-radius:8px; border:1px solid var(--border); background:rgba(212,175,55,.12); color:var(--gold-light); font-size:13px; font-weight:600; cursor:pointer; }
.pk-players { background:rgba(20,18,45,.45); border:1px solid var(--border); border-radius:12px; padding:14px; }
.pk-players-label { color:var(--gold-light); font-size:14px; font-weight:700; margin-bottom:10px; }
.pk-players-list { display:flex; flex-direction:column; gap:8px; }
.pk-player { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:10px; padding:8px 12px; }
.pk-player-avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; }
.pk-player-avatar-fallback { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#2f6fbd,#38b6ff); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.pk-player-name { flex:1; font-size:14px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pk-player-done { color:var(--success,#4ade80); font-size:12px; }
.pk-player-wait { color:var(--text-faint); font-size:12px; }
/* ✅ 准备/作答状态标签（更醒目的小胶囊） */
.pk-player-done, .pk-player-wait {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 100px;
  flex-shrink: 0;
  white-space: nowrap;
}
.pk-player-done { background: rgba(76,175,80,0.18); color: #7ce38b; }
.pk-player-wait { background: rgba(212,175,55,0.12); color: var(--text-dim); }

/* ✅ PK 准备区：全员准备好后房主可开始本局 */
.pk-ready {
  margin-top: 14px;
  padding: 14px;
  background: rgba(212, 175, 55, 0.06);
  border: 1px dashed rgba(212, 175, 55, 0.35);
  border-radius: 14px;
  text-align: center;
}
.pk-ready-btn {
  padding: 12px 28px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.5);
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}
.pk-ready-btn:hover { background: rgba(212, 175, 55, 0.22); }
.pk-ready-btn.ready {
  background: linear-gradient(135deg, #d4af37, #c9a030);
  color: #1a0a2e;
}
.pk-ready-tip {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-dim);
}
.pk-waiting { text-align:center; color:var(--text-faint); font-size:13px; padding:14px 0 4px; }
.pk-waiting-big { text-align:center; color:var(--text-faint); font-size:15px; padding:22px 0; animation:pkPulse 1.6s ease-in-out infinite; }
@keyframes pkPulse { 0%,100%{opacity:.5} 50%{opacity:1} }
.pk-quiz-head { display:flex; align-items:center; justify-content:space-between; background:rgba(20,18,45,.45); border:1px solid var(--border); border-radius:12px; padding:10px 16px; margin-bottom:12px; }
.pk-quiz-progress { color:var(--text-faint); font-size:13px; }
.pk-quiz-timer { color:var(--gold-light); font-size:24px; font-weight:800; }
.pk-quiz-score { color:var(--gold-light); font-size:13px; font-weight:700; }
.pk-quiz-body .pk-quiz-qcard { margin-bottom:12px; }
.pk-result-list { display:flex; flex-direction:column; gap:10px; margin:16px 0; }
.pk-result-row { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:12px; padding:12px 14px; }
.pk-result-row.me { border-color:#d4af37; background:rgba(212,175,55,.08); }
.pk-result-badge { font-size:22px; width:36px; text-align:center; flex-shrink:0; }
.pk-result-name { flex:1; font-size:15px; font-weight:700; color:var(--text); }
.pk-result-score { font-size:15px; font-weight:800; color:var(--gold-light); }
.pk-result-actions { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
@media (max-width:480px){
  .pk-invite-body { flex-direction:column; align-items:center; }
  .pk-invite-info { width:100%; }
}

/* PK 答题/结果吉祥物反馈（开心/不开心小玉米） */
.pk-feedback { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 99999; background: rgba(20,18,45,.96); border: 2px solid var(--border); border-radius: 18px; padding: 14px 22px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,.5); animation: pkFbPop .25s ease-out; pointer-events: none; }
.pk-feedback.ok { border-color: rgba(74,222,128,.6); }
.pk-feedback.no { border-color: rgba(255,90,90,.6); }
.pk-feedback img { width: 72px; height: 72px; object-fit: contain; display: block; margin: 0 auto 6px; border-radius: 12px; }
.pk-fb-text { color: var(--gold-light); font-size: 13px; font-weight: 700; }
@keyframes pkFbPop { 0% { transform: translate(-50%,-50%) scale(.6); opacity: 0; } 100% { transform: translate(-50%,-50%) scale(1); opacity: 1; } }
.pk-result-mascot { text-align: center; margin: 6px 0 2px; }
.pk-result-mascot-img { width: 84px; height: 84px; object-fit: contain; border-radius: 14px; box-shadow: 0 4px 18px rgba(0,0,0,.4); }
.pk-result-mascot-text { color: var(--gold-light); font-size: 14px; font-weight: 800; margin-top: 6px; }

/* PK 房间号复制小按钮 */
.pk-copy-code-btn { margin-left: 8px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border); background: rgba(212,175,55,.14); color: var(--gold-light); font-size: 12px; cursor: pointer; vertical-align: middle; }
.pk-copy-code-btn:hover { background: rgba(212,175,55,.28); }

/* PK 房间顶部退出按钮 */
.pk-room-top { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.pk-leave-btn { padding: 6px 14px; border-radius: 8px; border: 1px solid rgba(255,80,80,.5); background: rgba(255,80,80,.12); color: #ff8080; font-size: 13px; font-weight: 600; cursor: pointer; }
.pk-leave-btn:hover { background: rgba(255,80,80,.24); }

/* 🔑 加入房间：醒目卡片（好友找不到入口时一眼可见） */
.pk-join-card { margin-top: 18px; padding: 16px 14px; border-radius: 14px; border: 1.5px solid rgba(212,175,55,.45); background: linear-gradient(135deg, rgba(212,175,55,.12), rgba(56,182,255,.07)); box-shadow: 0 3px 14px rgba(212,175,55,.12); }
.pk-join-title { font-size: 16px; font-weight: 800; color: var(--gold-light); margin-bottom: 4px; letter-spacing: .5px; }
.pk-join-desc { font-size: 12px; color: var(--text-faint); margin-bottom: 12px; line-height: 1.6; }
.pk-join-row { display: flex; gap: 10px; align-items: center; }
.pk-room-input { flex: 1; min-width: 0; padding: 13px 14px; border-radius: 10px; border: 1px solid rgba(212,175,55,.4); background: rgba(255,255,255,.08); color: var(--text); text-align: center; letter-spacing: 2px; font-size: 16px; font-weight: 700; }
.pk-room-input:focus { outline: none; border-color: #d4af37; background: rgba(212,175,55,.12); }
.pk-join-btn { padding: 13px 24px; border-radius: 10px; border: none; background: linear-gradient(135deg,#d4af37,#b8860b); color: #1a0a2e; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 10px rgba(212,175,55,.3); white-space: nowrap; }
.pk-join-btn:hover { filter: brightness(1.08); }
@media (max-width:480px){ .pk-join-row { flex-direction: column; } .pk-join-btn { width: 100%; } }

/* 题库类型：一行 3 个（最后一行居左对齐） */
#pk-type-options { gap: 8px; }
#pk-type-options .pk-option { flex: 0 0 calc(33.333% - 6px); min-width: 0; padding: 12px 6px; font-size: 14px; white-space: nowrap; }

/* 🔁 顶部「继续进入」有效房间（无有效房间时整块隐藏） */
.pk-resume { margin-bottom: 18px; padding: 14px; border-radius: 14px; border: 1.5px solid rgba(86,204,120,.5); background: linear-gradient(135deg, rgba(86,204,120,.14), rgba(56,182,255,.08)); box-shadow: 0 3px 14px rgba(86,204,120,.15); }
.pk-resume-title { font-size: 15px; font-weight: 800; color: #6ee7a0; margin-bottom: 10px; letter-spacing: .5px; }
.pk-resume-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pk-resume-info { flex: 1; min-width: 0; }
.pk-resume-no { font-size: 15px; font-weight: 800; color: var(--text); }
.pk-resume-no b { color: var(--gold-light); letter-spacing: 1px; }
.pk-resume-sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.pk-resume-status { font-size: 12px; color: #6ee7a0; margin-top: 2px; }
.pk-resume-btn { padding: 12px 22px; border-radius: 10px; border: none; background: linear-gradient(135deg,#34d399,#0ea5a5); color: #06312b; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 10px rgba(52,211,153,.3); white-space: nowrap; }
.pk-resume-btn:hover { filter: brightness(1.08); }

/* 📜 底部历史记录（与上方保持间距） */
.pk-history { margin-top: 34px; padding-top: 18px; border-top: 1px dashed rgba(212,175,55,.35); }
.pk-history-title { font-size: 16px; font-weight: 800; color: var(--gold-light); margin-bottom: 12px; letter-spacing: .5px; }
.pk-history-empty { padding: 22px; text-align: center; color: var(--text-faint); font-size: 13px; border-radius: 12px; border: 1px dashed rgba(212,175,55,.3); }
.pk-history-item { margin-bottom: 10px; border-radius: 12px; border: 1px solid var(--border); background: rgba(20,18,45,.45); overflow: hidden; cursor: pointer; }
.pk-history-item:hover { border-color: rgba(212,175,55,.5); }
.pk-history-main { display: flex; align-items: center; gap: 10px; padding: 13px 14px; flex-wrap: wrap; }
.pk-history-no { font-weight: 800; color: var(--text); font-size: 14px; letter-spacing: 1px; }
.pk-history-meta { font-size: 12px; color: var(--text-faint); }
.pk-history-time { font-size: 12px; color: var(--text-faint); margin-left: auto; }
.pk-history-score { font-size: 13px; font-weight: 800; color: var(--gold-light); white-space: nowrap; }
.pk-history-detail { padding: 4px 14px 14px; border-top: 1px dashed rgba(212,175,55,.25); }
.pk-history-detail-sub { font-size: 12px; color: var(--text-faint); margin: 10px 0 8px; }
.pk-history-players { display: flex; flex-direction: column; gap: 6px; }
.pk-history-player { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,.05); font-size: 13px; }
.pk-history-player-name { color: var(--text); }
.pk-history-player-score { font-weight: 700; color: var(--gold-light); }
@media (max-width:480px){ .pk-history-main { flex-wrap: wrap; } .pk-history-time { margin-left: 0; width: 100%; } }

/* 🎬 开局 3-2-1 倒计时覆盖层 */
.pk-countdown { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(10,6,26,.88); backdrop-filter: blur(2px); }
.pk-countdown-num { font-size: 130px; font-weight: 900; color: var(--gold-light); text-shadow: 0 0 46px rgba(212,175,55,.65); animation: pkCountZoom .85s ease; }
@keyframes pkCountZoom { from { transform: scale(2.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 📍 资料弹窗：归属地提示 */
.profile-region-tip { font-size: 12px; color: var(--text-faint); margin: 2px 2px 10px; line-height: 1.6; }

/* ============================================
   📡 最新动态速报模块（2026-08-24 新增）
   数据源：自动抓取官方微博 + 外部推送（微博/抖音/小红书）
   ============================================ */
.feed {
  margin: 18px 0 6px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 14px 18px;
  box-shadow: 0 0 30px rgba(212,175,55,.06);
}
.feed-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.feed-title { display:flex; align-items:center; gap:8px; font-size:17px; font-weight:800; color: var(--text); }
.feed-live-dot { width:9px; height:9px; border-radius:50%; background: var(--gold); box-shadow:0 0 12px var(--gold); animation: feedPulse 1.6s infinite; }
@keyframes feedPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.75)} }
.feed-sub { font-size:12px; color: var(--text-faint); }
.feed-tabs { display:flex; gap:6px; margin-left:auto; }
.feed-tab { background:transparent; border:1px solid rgba(255,255,255,.14); color: var(--text-dim); padding:4px 12px; border-radius:999px; font-size:12px; cursor:pointer; transition: var(--transition); }
.feed-tab:hover { border-color: var(--border-active); color: var(--text); }
.feed-tab.active { border-color: var(--gold); color: var(--gold-light); background: rgba(212,175,55,.1); }
.feed-tab-sep { width:2px; height:14px; align-self:center; background: rgba(255,255,255,.12); border-radius:1px; }
.feed-tabs { flex-wrap:wrap; }

/* 做数据提醒条（跑马灯上方，号召玉米去微博做数据） */
.feed-remind-bar { background: linear-gradient(90deg, rgba(212,175,55,.2), rgba(212,175,55,.05)); border:1px solid rgba(212,175,55,.4); border-radius:10px; padding:9px 14px; margin-bottom:10px; font-size:13.5px; font-weight:700; color:#f0d060; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.feed-remind-actions { display:inline-flex; align-items:center; font-size:11.5px; font-weight:800; color:#0a0a0f; background:linear-gradient(135deg, var(--gold), #b8942e); border-radius:999px; padding:3px 10px; box-shadow:0 2px 8px rgba(212,175,55,.35); white-space:nowrap; }
.feed-remind-score { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:800; color:#0a0a0f; background:linear-gradient(135deg, #ff9f43, #ff7a45); border-radius:999px; padding:3px 10px; box-shadow:0 2px 8px rgba(255,122,69,.4); white-space:nowrap; }
/* 详情弹窗：做数据提醒（点击跳转微博前提示） */
.feed-remind { background:rgba(212,175,55,.1); border:1px dashed rgba(212,175,55,.5); border-radius:10px; padding:10px 12px; margin-bottom:12px; font-size:13px; line-height:1.65; color:var(--text); }
.feed-remind b { color:#f0d060; }
/* 跑马灯（最新动态滚动）——已隐藏：与下方卡片重复多余，保留代码便于随时恢复 */
.feed-ticker { display:none; overflow:hidden; white-space:nowrap; background: rgba(212,175,55,.07); border:1px solid rgba(212,175,55,.15); border-radius:10px; padding:7px 12px; margin-bottom:12px; font-size:12.5px; color: var(--text-dim); }
.feed-ticker-track { display:inline-block; animation: feedTicker 60s linear infinite; padding-right:40px; }
.feed-ticker-item { margin-right:48px; display:inline-block; }
.feed-ticker-tag { color: var(--gold-light); margin-right:6px; }
@keyframes feedTicker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* 卡片横向滚动（scrollLeft 驱动，JS 自动滚动 + 拖动 + 箭头导航） */
.feed-scroll-wrap { position:relative; }
.feed-viewport { overflow:hidden; position:relative; cursor:grab; touch-action:pan-y; -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); }
.feed-viewport.dragging { cursor:grabbing; }
.feed-viewport.no-scroll { cursor:default; }
.feed-track { display:flex; gap:14px; width:max-content; }

/* 左右导航箭头 */
.feed-nav { position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; background:rgba(10,10,15,.62); border:1px solid rgba(212,175,55,.45); color:var(--gold-light); font-size:20px; line-height:1; cursor:pointer; z-index:6; display:flex; align-items:center; justify-content:center; transition:all .2s; box-shadow:0 2px 10px rgba(0,0,0,.3); }
.feed-nav:hover { background:var(--gold); color:#0a0a0f; border-color:var(--gold); }
.feed-nav:active { transform:translateY(-50%) scale(.92); }
.feed-nav-prev { left:2px; }
.feed-nav-next { right:2px; }

/* 单张卡片 */
.feed-card { width:264px; flex:0 0 auto; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1); border-radius:14px; overflow:hidden; cursor:pointer; transition: transform .25s, border-color .25s, box-shadow .25s; }
.feed-card:hover { transform:translateY(-4px); border-color: var(--border-active); box-shadow: 0 10px 30px rgba(212,175,55,.18); }
.feed-cover { height:138px; position:relative; overflow:hidden; background: var(--bg-card); }
.feed-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.feed-cover-empty { display:flex; align-items:center; justify-content:center; height:100%; background: radial-gradient(circle at 50% 40%, #2a2350, #15122e); }
.feed-src-badge { position:absolute; top:8px; left:8px; background: rgba(10,10,15,.72); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:2px 9px; font-size:11px; color:#fff; backdrop-filter: blur(4px); z-index:2; }
.feed-type-tag { position:absolute; top:8px; right:8px; border-radius:999px; padding:2px 9px; font-size:11px; font-weight:600; background: rgba(255,255,255,.18); color:#fff; z-index:2; }
.feed-type-tag.hot { background: rgba(212,175,55,.92); color:#0a0a0f; }
.feed-body { padding:10px 12px 12px; }
.feed-card-author { font-size: 11px; font-weight: 600; color: var(--gold-light); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-list-author { color: var(--gold-light); font-weight: 600; }
.feed-modal-author { color: var(--gold-light); font-weight: 600; }
.feed-card-title { font-size:14px; font-weight:700; line-height:1.45; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:40px; }
.feed-meta { display:flex; align-items:center; justify-content:space-between; margin-top:9px; font-size:11px; color: var(--text-faint); }
.feed-go { color: var(--gold-light); display:flex; align-items:center; gap:3px; font-weight:600; }

/* 空状态 */
.feed-empty { padding: 26px 0; text-align:center; color: var(--text-faint); font-size:13px; width:100%; }

/* 详情弹窗 */
.feed-modal-mask { position:fixed; inset:0; z-index:9999; background: rgba(10,6,26,.82); backdrop-filter: blur(4px); display:flex; align-items:center; justify-content:center; padding:20px; }
.feed-modal { position:relative; width:100%; max-width:420px; max-height:88vh; overflow-y:auto; background: linear-gradient(180deg,#171230,#0f0d22); border:1px solid var(--border-active); border-radius:18px; box-shadow: var(--shadow-gold), 0 20px 60px rgba(0,0,0,.5); }
/* 右上角悬浮小关闭按钮 */
.feed-modal-x { position:absolute; top:10px; right:10px; z-index:6; width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,.28); background:rgba(10,10,15,.62); color:#fff; font-size:15px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; backdrop-filter:blur(4px); }
.feed-modal-x:hover { background:var(--gold); color:#0a0a0f; border-color:var(--gold); }
.feed-modal-img { width:100%; max-height:300px; object-fit:cover; border-radius:12px; display:block; background:#000; }
.feed-modal-imgs { margin:0 0 14px; }
.feed-modal-imgs .feed-modal-img { border-radius:12px; }
.feed-modal-imgs .feed-modal-img:not(:first-child) { max-height:220px; margin-top:2px; }
.feed-modal-body { padding:16px 18px 18px; }
.feed-modal-title { font-size:16px; font-weight:800; line-height:1.5; color:var(--text); margin-bottom:10px; }
.feed-modal-content { font-size:14px; line-height:1.8; color: var(--text-dim); white-space:pre-wrap; margin-bottom:14px; }
.feed-modal-meta { display:flex; align-items:center; justify-content:space-between; font-size:12px; color: var(--text-faint); margin-bottom:16px; }
.feed-modal-btn { display:block; width:100%; padding:12px; border-radius:12px; border:none; font-size:15px; font-weight:700; cursor:pointer; text-align:center; text-decoration:none; box-sizing:border-box; }
.feed-modal-btn.go { background: linear-gradient(135deg, var(--gold), #b8942e); color:#0a0a0f; margin-bottom:14px; }

/* ====== 最新动态信息流页（feed.html） ====== */
.feed-page { max-width: 760px; margin: 0 auto; padding: 20px 16px 40px; }
.feed-page-head { margin-bottom: 14px; }
.feed-page-title { font-size: 20px; font-weight: 800; color: var(--text); display:flex; align-items:center; gap:8px; }
.feed-page-sub { font-size: 12px; color: var(--text-faint); margin-top: 4px; }
.feed-page .feed-tabs { margin-left: 0; margin-bottom: 14px; }
.feed-list { display: flex; flex-direction: column; gap: 14px; }
.feed-list-item { display: flex; gap: 14px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 14px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.feed-list-item:hover { border-color: var(--border-active); box-shadow: 0 8px 24px rgba(212,175,55,.14); transform: translateY(-2px); }
.feed-list-imgwrap { width: 160px; flex: 0 0 auto; }
.feed-list-img { width: 100%; height: 104px; object-fit: cover; border-radius: 10px; display: block; background: var(--bg-card); }
.feed-list-img-empty { height: 104px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, #2a2350, #15122e); border-radius: 10px; }
.feed-avatar-text { font-size: 20px; font-weight: 800; color: var(--gold-light); max-width: 100%; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.feed-list-body { flex: 1; min-width: 0; }
.feed-list-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text-faint); margin-bottom: 6px; }
.feed-list-title { font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--text); margin-bottom: 6px; }
.feed-list-content { font-size: 13px; line-height: 1.7; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feed-list-actions { margin-top: 10px; }
.feed-list-go { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--gold), #b8942e); color: #0a0a0f; padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.feed-list-go:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(212,175,55,.35); }
.feed-list-go b { font-size: 12px; }
@media (max-width: 640px) {
  .feed-list-item { flex-direction: column; }
  .feed-list-imgwrap { width: 100%; }
  .feed-list-img, .feed-list-img-empty { height: 140px; }
}
.feed-modal-btn.close { background: rgba(255,255,255,.07); color: var(--text-dim); margin-top:8px; }

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .feed-track, .feed-ticker-track { animation:none; }
}

/* 移动端适配 */
@media (max-width: 640px) {
  .feed { padding: 12px 12px 16px; }
  .feed-title { font-size:15px; }
  .feed-sub { display:none; }
  .feed-tabs { margin-left:0; }
  .feed-card { width: 150px; }
  .feed-cover { height: 86px; }
  .feed-card-title { font-size: 12px; min-height: 32px; }
  .feed-meta { font-size:10px; }
  .feed-track { gap:10px; }
  .feed-nav { width:26px; height:26px; font-size:15px; }
  .feed-cover-empty .feed-avatar-text { font-size: 15px; }
}
@media (max-width: 480px) {
  .feed-card { width: 132px; }
  .feed-cover { height: 78px; }
  .feed-head { gap:8px; }
  .feed-tab { padding:3px 9px; font-size:11px; }
  .feed-cover-empty .feed-avatar-text { font-size: 13px; }
}

/* ====== 留言详情弹窗 · 帖子区图片（2026-08-24） ====== */
.pcm-post-image-wrap {
  margin: 6px 0 4px;
  border-radius: 10px;
  overflow: hidden;
  max-width: 100%;
  border: 1px solid var(--border);
}
.pcm-post-image {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  cursor: zoom-in;
  border-radius: 10px;
}