/* ============ 宜春长鹅·有问必答 ============ */
:root {
  --bg: #FDF9F3;
  --ink: #2A2723;
  --muted: #8A8175;
  --line: #EAE3D5;
  --orange: #E8842A;
  --orange-deep: #D06A14;
  --pill: #F4EDE0;
  --shadow: 0 6px 24px rgba(90, 70, 40, 0.10);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { background: #FDF9F3; }   /* 图片加载前兜底色 */
body {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
}
/* 背景板（bj3.png）：v182 起降级为兜底层——3D 加载前/WebGL 失败时铺底；
   模型就绪后 3D 场景内的背景板（model.js）不透明地盖住它。v30：摸摸模式
   自由视角已移除，不再有 --bgry/--bgrx 转向绑定 */
body::before {
  content: "";
  position: fixed;
  inset: -12px;
  z-index: -1;
  /* v178 用户指令②：实时长鹅阶段背景换 bj3.png；虚化定稿 blur(1px)（用户目验调整）
     v178c 指令①：背景压暗 brightness(0.8)——bj3 过亮抢主体，压背景零风险
     （3D 打光多轮调优不动，动 key light 会连带影响材质观感与影子） */
  background: url("bj3.png") center / cover no-repeat;
  filter: blur(1px) brightness(0.8);
}
.app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
  /* 底部留出互动底栏高度，避免输入框被盖住 */
  padding-bottom: calc(54px + env(safe-area-inset-bottom));
}

/* 顶栏：第一行工作室署名独占居中，第二行 主页图标 | 品牌
   v45 需求5：提升到视频层(z=4)之上——开场/跳舞视频播放时主页图标与顶部文字仍可见可点 */
.topbar {
  position: relative; z-index: 5;
  padding: 10px 2px 0;
}
.studio-credit {
  text-align: center;
  font-size: 12px; color: #FFF; letter-spacing: 1px;
  margin-bottom: 6px;
}
.topbar-row {
  display: flex; align-items: center; justify-content: space-between;
}
.home-link {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  color: var(--ink); background: rgba(244, 237, 224, 0.85);
  border: 1px solid var(--line); text-decoration: none;
  transition: transform .12s; flex: 0 0 auto;
  position: relative; left: -10px; top: -6px;   /* 再往左上角偏移一点 */
}
.home-link:hover { transform: scale(1.08); }

/* 舞台：长鹅最大化占满 */
.stage { flex: 1 1 auto; min-height: 0; position: relative; }
.figure-box { position: relative; width: 100%; height: 100%; }
/* v182 方案A：canvas 全屏固定（z=0，全部 UI 定位元素 z≥5 在其上）——背景板进
   3D 场景与角色一体变焦，取景以整窗为画幅（脚底贴页面底部、头顶约 75% 处）。
   v74 的 -80px 底部延伸随之取消（全窗画幅已天然覆盖输入栏后方） */
#model3d { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
/* v128：will-change 把 canvas 提为独立合成层——开场/跳舞视频遮罩（opacity 过渡）显隐
   触发合成器重栅格化时，部分 GPU/驱动会把相邻 canvas 层瞬时错缩放（用户实测「只有鹅
   变大、页内 A~G 全部指标正常」的显示层毛刺）。独立层隔离 + 不参与相邻层重栅格化 */
#model3d canvas { width: 100% !important; height: 100% !important; display: block; will-change: transform; }
/* SVG 仅作 3D 加载失败的兜底形象，平时隐藏 */
#goose {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  height: 92%; width: auto; display: block; overflow: visible;
}
.figure-box.model-ready > #goose { visibility: hidden; }

/* 对话气泡：悬浮在舞台下方（输入框上方） */
.speech-bubble {
  position: absolute; bottom: 54px; left: 50%; transform: translateX(-50%);
  max-width: min(88%, 560px);
  background: rgba(255, 253, 248, 0.88);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(234, 227, 213, 0.9);
  border-radius: 18px;
  padding: 12px 20px;
  font-size: 17px; line-height: 1.65;
  box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .25s;
  z-index: 5;
}
.speech-bubble.show { opacity: 1; }
#bubbleText { max-width: 100%; overflow-wrap: anywhere; }

/* 新闻字幕条（v31 主播模式）：播报新闻时逐段显示口播文字，与气泡同层互斥 */
.news-caption {
  position: absolute; bottom: 54px; left: 50%; transform: translateX(-50%);
  width: min(88%, 560px);
  background: rgba(255, 253, 248, 0.9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(234, 227, 213, 0.9);
  border-radius: 18px;
  padding: 12px 18px;
  box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .25s;
  z-index: 5;
  text-align: left;
}
.news-caption.show { opacity: 1; pointer-events: auto; }   /* v35：显示时恢复鼠标命中，"查看原文"才可点击 */
.nc-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nc-tag {
  flex: 0 0 auto;
  background: var(--orange); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: 1px;
  border-radius: 6px; padding: 2px 8px;
}
.nc-title {
  font-size: 14px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nc-text {
  margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* v48 需求1：查看原文展开后每段首行缩进两字符，段间留空隙 */
.nc-text .nc-para { text-indent: 2em; margin: 0 0 10px; }
.nc-text .nc-para:last-child { margin-bottom: 0; }
.nc-src { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--muted); text-decoration: none; }
.nc-src:hover { color: var(--orange); }
.nc-back {
  display: none; margin-top: 6px; margin-left: 10px;
  font-size: 12px; color: var(--orange); background: none;
  border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 6px;
  padding: 2px 10px; cursor: pointer;
}
.nc-back:hover { border-color: var(--orange); }

/* v39：对话暂态——用户发指令打断播报时，新闻卡片缩小停靠右上角，不再遮挡对话气泡
   （气泡与卡片原本同位置同层级，卡片在 DOM 靠后故压住气泡；docked 降层级+靠边解决） */
.news-caption.docked {
  left: auto; right: 10px; transform: none;
  width: auto; max-width: 42%;
  padding: 6px 12px;
  opacity: .95;
  z-index: 4;   /* 低于气泡(5)：即使窄屏横向重叠也在对话层之下 */
}
.news-caption.docked .nc-text,
.news-caption.docked .nc-src,
.news-caption.docked .nc-back { display: none !important; }   /* 只留"栏目+标题"小标签 */
.news-caption.docked .nc-tag { font-size: 11px; padding: 1px 6px; }
.news-caption.docked .nc-title { font-size: 12px; max-width: 36vw; }

/* v34：查看原文展开态——卡片约扩大一倍，正文完整显示、装不下可滚动；回退按钮还原简报 */
.news-caption.expanded {
  width: min(94%, 900px);
  transition: opacity .25s, width .25s ease;
}
.news-caption.expanded .nc-title { white-space: normal; }
.news-caption.expanded .nc-text {
  display: block; -webkit-line-clamp: unset;
  max-height: min(46vh, 420px);
  overflow-y: auto;
  font-size: 14px;
  padding-right: 4px;
  scrollbar-width: thin;
}
.news-caption.expanded .nc-src { display: none !important; }
.news-caption.expanded .nc-back { display: inline-block; }

/* 状态胶囊：悬浮在舞台底部 */
.status-pill {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(244, 237, 224, 0.85);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 999px; padding: 5px 14px;
  font-size: 13px; color: var(--muted);
  z-index: 5;
}
/* v177 用户指令①：开场视频期间胶囊=「跳过」按钮——可点指针+按压反馈
   （注意保留 translateX(-50%) 居中变换；实时阶段无此类，显示与功能不变） */
.status-pill.clickable { cursor: pointer; user-select: none; }
.status-pill.clickable .dot { display: none; }   /* 跳过按钮不带状态指示灯 */
.status-pill.clickable:active {
  transform: translateX(-50%) scale(0.92);
  background: rgba(244, 237, 224, 0.98);
}
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #B9B1A2; transition: background .2s; }
.status-pill.listening .dot { background: #E5484D; animation: pulse 1s infinite; }
.status-pill.thinking .dot { background: #F5A623; animation: pulse 1.4s infinite; }
.status-pill.speaking .dot { background: #2BB673; animation: pulse 0.8s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* 输入区（v74：提升到 canvas 上层——鞋子延伸到其后方时输入框仍可正常显示与点击） */
.inputbar { position: relative; z-index: 5; display: flex; gap: 10px; align-items: center; padding: 4px 2px 18px; }
#textInput {
  flex: 1; height: 48px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 0 16px; font-size: 15px; outline: none;
  transition: border-color .15s;
}
#textInput:focus { border-color: var(--orange); }
.send-btn {
  width: 48px; height: 48px; border-radius: 12px; border: none; cursor: pointer;
  background: var(--ink); color: #FFF; display: grid; place-items: center;
  flex: 0 0 auto; transition: transform .12s;
}
.send-btn:hover { transform: scale(1.05); }

/* Toast 提示（互动底栏模板统一样式：顶部浮现，避免遮挡底栏） */

/* ════════ 互动底栏模板① CSS：底栏 / 微信转发浮层 / 评论面板 / toast ════════ */
/* ===== 底部互动栏（视频号风格：浅灰栏放图标，内容区整体上收） ===== */
#bottomBar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  height: calc(54px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  padding: 0 12px env(safe-area-inset-bottom);
  background: #f0f0f2;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
.bb-views {
  display: flex; align-items: center; gap: 5px;
  color: rgba(0, 0, 0, 0.68); font-size: 13px;
}
.bb-views svg { display: block; opacity: 0.68; }
#viewCount { font-weight: bold; }
.bb-actions { display: flex; align-items: center; gap: 0; }
.bb-btn {
  display: flex; align-items: center; gap: 5px;
  border: none; background: none; padding: 9px 10px;
  color: rgba(0, 0, 0, 0.72); font-size: 13px; font-weight: bold;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform 0.15s ease;
}
.bb-btn:active { transform: scale(0.88); }
.bb-btn svg { display: block; }
.bb-btn.liked { color: #ff5b5b; }
.bb-btn.liked svg { fill: currentColor; }
@keyframes popHeart { 0%{transform:scale(1)} 40%{transform:scale(1.3)} 100%{transform:scale(1)} }
.bb-btn.pop { animation: popHeart 0.35s ease; }

/* ===== 微信转发引导浮层 ===== */
#wxGuide {
  position: fixed; inset: 0; z-index: 25;
  background: rgba(0, 0, 0, 0.72);
  display: none;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
#wxGuide.open { display: block; }
#wxGuide .wxg-arrow {
  position: absolute; top: 52px; right: 26px;
  width: 44px; height: 44px;
  animation: wxgFloat 1.2s ease-in-out infinite;
}
@keyframes wxgFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
#wxGuide .wxg-card {
  position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  background: #fff; border-radius: 14px;
  padding: 26px 28px 18px; width: min(80vw, 300px); box-sizing: border-box;
  text-align: center; color: #333;
}
#wxGuide .wxg-title { font-size: 17px; font-weight: bold; margin-bottom: 14px; }
#wxGuide .wxg-line { font-size: 14px; line-height: 1.9; color: #555; }
#wxGuide .wxg-line b { color: #03507f; }
#wxGuide .wxg-ok {
  margin-top: 16px; padding: 9px 0; border-radius: 20px;
  background: #07c160; color: #fff; font-size: 15px; font-weight: bold;
}

/* ===== 评论面板（底部滑出） ===== */
#cpMask {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(0, 20, 40, 0.45);
  display: none;
}
#cpMask.open { display: block; }
#commentPanel {
  position: fixed; left: 0; right: 0;
  bottom: calc(-78vh);
  height: 78vh; z-index: 21;
  background: #fff; border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column;
  transition: bottom 0.28s ease;
  font: 14px "Microsoft YaHei", "PingFang SC", sans-serif; color: #333;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
}
#commentPanel.open { bottom: 0; }
.cp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid #eee; flex: none;
}
.cp-head b { font-size: 15px; }
.cp-head .cp-total { color: #999; font-weight: normal; font-size: 12px; margin-left: 6px; }
#cpClose {
  border: none; background: none; font-size: 22px; line-height: 1;
  color: #999; padding: 4px 8px; -webkit-tap-highlight-color: transparent;
}
#cpList { flex: 1; overflow-y: auto; padding: 4px 16px; -webkit-overflow-scrolling: touch; }
.cp-item { padding: 10px 0; border-bottom: 1px solid #f5f5f5; }
.cp-item .cp-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.cp-item .cp-name { font-weight: bold; color: #03507f; font-size: 13px; }
.cp-item .cp-time { color: #aaa; font-size: 11px; }
.cp-item .cp-text { word-break: break-word; line-height: 1.55; }
.cp-empty { text-align: center; color: #bbb; padding: 48px 0; font-size: 13px; }
.cp-input { flex: none; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #eee; background: #fafafa; }
.cp-input .cp-line1 { display: flex; gap: 8px; margin-bottom: 8px; }
#cpName {
  flex: 1; border: 1px solid #ddd; border-radius: 8px;
  padding: 7px 10px; font-size: 13px; outline: none; background: #fff;
}
#cpSend {
  border: none; border-radius: 8px; background: #03507f; color: #fff;
  padding: 7px 16px; font-size: 13px; font-weight: bold;
  -webkit-tap-highlight-color: transparent;
}
#cpSend:disabled { background: #9ec3dd; }
#cpText {
  width: 100%; box-sizing: border-box; border: 1px solid #ddd; border-radius: 8px;
  padding: 8px 10px; font-size: 14px; outline: none; background: #fff;
  resize: none; height: 64px; font-family: inherit;
}

/* ===== 轻提示 toast（沿用页面已有的 #toast 元素，样式与模板一致） ===== */
#toast {
  position: fixed; left: 50%; top: 18%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 300; background: rgba(0, 30, 60, 0.82); color: #fff;   /* v40：300 高于全屏视频层(200)，跳舞锁定期间的排队提示可见 */
  padding: 9px 18px; border-radius: 20px;
  font: 13px "Microsoft YaHei", "PingFang SC", sans-serif;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: 80vw; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ SVG 兜底形象的表情形态（3D 不可用时） ============ */
#goose .brow, #goose .eye, #goose .spark, #goose #tuft, #goose #head, #goose #beakLower, #goose #headInner {
  transform-box: fill-box;
}
#goose .brow, #goose .eye, #goose #tuft, #goose #head, #goose #beakLower {
  transform-origin: center;
  transition: transform .35s cubic-bezier(.34, 1.4, .64, 1);
}
#goose .spark { transform-origin: center; transition: transform .3s ease; }
#goose #head { transform-origin: 50% 95%; transition: transform .45s cubic-bezier(.34, 1.3, .64, 1); }
#goose #headInner { transform-origin: center; }
#goose #beakLower {
  transform-origin: 50% 0%;
  transform: rotate(calc(var(--beak, 0) * 24deg));
  transition: transform 80ms linear;
}
#goose.blink .eye { transform: scaleY(.08); transition: transform 70ms ease; }
#goose.emotion-happy .brow { transform: translateY(-6px); }
#goose.emotion-happy #browL { transform: translateY(-6px) rotate(-10deg); }
#goose.emotion-happy #browR { transform: translateY(-6px) rotate(10deg); }
#goose.emotion-happy .eye { transform: scaleY(.42); }
#goose.emotion-happy #head { transform: rotate(3deg); }
#goose.emotion-happy #tuft { animation: tuftWiggle .5s ease infinite alternate; }
#goose.emotion-thinking #browL { transform: translateY(2px) rotate(9deg); }
#goose.emotion-thinking #browR { transform: translateY(2px) rotate(-9deg); }
#goose.emotion-thinking .spark { transform: translate(3px, -3px); }
#goose.emotion-thinking #head { transform: rotate(-5deg) translateY(3px); }
#goose.emotion-surprised .brow { transform: translateY(-9px); }
#goose.emotion-surprised .eye { transform: scale(1.15, 1.18); }
#goose.emotion-surprised #head { transform: rotate(-3deg) translateY(-4px); }
#goose.emotion-surprised #tuft { transform: translateY(-4px) scaleY(1.12); }
#goose.emotion-confused #browR { transform: translateY(-8px) rotate(8deg); }
#goose.emotion-confused #head { transform: rotate(9deg); }
#goose.emotion-sad #browL { transform: translateY(4px) rotate(-11deg); }
#goose.emotion-sad #browR { transform: translateY(4px) rotate(11deg); }
#goose.emotion-sad .eye { transform: scaleY(.55) translateY(2px); }
#goose.emotion-sad #head { transform: translateY(4px); }
@keyframes tuftWiggle { from { transform: rotate(-3deg); } to { transform: rotate(4deg) translateY(-2px); } }
#goose.idle-sway #body { transform-box: fill-box; transform-origin: 50% 100%; animation: bodySway 4.5s ease-in-out infinite; }
#goose.talk-sway #body { transform-box: fill-box; transform-origin: 50% 100%; animation: bodySway 1.7s ease-in-out infinite; }
@keyframes bodySway { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.1deg); } }

/* ============ 响应式 ============ */
@media (max-width: 640px) {
  .brand { font-size: 18px; }
  .studio-credit { font-size: 10px; letter-spacing: 0; }
  .speech-bubble { font-size: 15px; padding: 10px 16px; }
  .news-caption { padding: 10px 14px; bottom: 50px; }
  .nc-text { font-size: 14px; -webkit-line-clamp: 2; }
  .nc-title { font-size: 13px; }
  /* v39：移动端对话暂态——收起的小标签更紧凑 */
  .news-caption.docked { right: 8px; max-width: 58%; padding: 4px 10px; bottom: 50px; }
  .news-caption.docked .nc-title { max-width: 44vw; }
}

/* ============ v40：全屏视频层（阶段A 开场动画 / 阶段D 跳舞视频） ============ */
/* 竖屏平铺：object-fit:cover 按比例裁切填满全屏，绝不拉伸变形（用户都手机打开）
   v45 需求5：z-index 200→4——开场/跳舞视频不再盖住主页图标、文字输入框与顶部文字
   （这些 UI 浮在视频上层，主页图标可点跳转；输入指令走"请稍等"排队机制）
   v132：opacity 0.35s 淡入淡出 → display 硬切。两重原因：
   ① 用户「忽然变大」毛刺与合成器重栅格化强相关（百宝箱线索实锤，见 .tb-panel 注释），
     视频层 opacity 渐变会让全屏视频层参与 0.35s 的逐帧混合/重栅格化，是最大的触发源；
   ② 用户偏好硬切换（页面转换不要淡入淡出）。display 切换只产生一次干净的合成提交 */
.fullscreen-video {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 4;
  width: 100vw;
  /* v176 用户指令①：容器底边从视口底改到互动底栏顶——contain 居中于"浏览器头↔
     底栏"之间区域，视频顶缝=底缝（此前容器含底栏高度，视频偏下、顶部缝隙大） */
  height: calc(100vh - 54px - env(safe-area-inset-bottom));
  /* v175 用户指令：取消强制平铺（cover 会按手机竖屏高度裁切放大 16:9 视频）——
     微信浏览器有顶部浏览器头+底部互动底栏，可视区宽高比≈16:9，contain 完整
     呈现视频内容：宽度撑满、高度按比例留边，不放大不裁切 */
  object-fit: contain;
  /* v178 用户指令③：视频容器下层背景独立换 bj1.png（不再透 body::before 的 bj3，
     开场视频看 bj1、实时长鹅看 bj3，两阶段背景分离）；cover 填补 contain 留边 */
  background: url("bj1.png") center / cover no-repeat;
  display: none;
  pointer-events: none;
}
/* v178 用户指令③：开场视频期间隐藏主页/百宝箱图标与输入框（body.booting 由
   playBootVideo 挂/摘）——只保留顶部署名、互动底栏与"跳过"按钮；
   实时长鹅阶段全部恢复显示与功能 */
body.booting .topbar-row { display: none; }
body.booting .inputbar { visibility: hidden; }
/* v178：quickPick（原"上方栏目"快捷按钮）已整体移除——原 .quick-pick 承担的
   v132 防"瞬间放大"毛刺常驻合成层（opacity:0 + backdrop-filter + will-change，
   页面加载起存在不被合成器裁撤）由 body::after 接管，机制属性原样照搬 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15);
  will-change: transform, opacity;
}
.fullscreen-video.show { display: block; pointer-events: auto; }

/* v191 修复（用户 2026-11-02 反馈"要/不要按钮不显示"）：v178 移除快捷栏目按钮时
   把 .quick-pick 基础样式一并删除，但换一题/要-不要面板仍在用此类——没了定位、
   居中与显隐控制，按钮实际渲染在页面底部不可见。此处按 v70 形态重建基础层，
   v70 的"去玻璃背景+主题橙按钮"覆盖规则（下方 #skipPick/#quizPick）保持不变
   v203：#yesNoPick 已随要/不要面板一并删除 */
.quick-pick {
  position: fixed; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  z-index: 12;   /* 高于气泡/字幕(5)与底栏(10)，低于微信引导(25)/百宝箱(59+) */
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.quick-pick.show { opacity: 1; pointer-events: auto; }
.quick-pick button {
  border: 1px solid rgba(232, 132, 42, 0.6);
  border-radius: 999px;
  font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}

/* v70 换一题/换一个按钮与要/不要面板：去掉玻璃背景框只留按钮本体；
   位置不再固定屏幕上方（长鹅头顶），改为紧贴问题字幕卡上沿——
   bottom 由 JS 按 #newsCaption 顶边动态计算，每次显示/复用时重新定位
   v71：收起改原地淡出
   v73：按钮色定稿——主题橙半透明（bg 36% / 边框 60%，与 v71 观感一致） */
#skipPick, #quizPick {
  top: auto; width: auto; padding: 0;
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none; box-shadow: none;
}
#skipPick button { background: rgba(232, 132, 42, 0.36); border-color: rgba(232, 132, 42, 0.6); color: #fff; font-size: 15px; padding: 8px 22px; }
/* v197b2：考考你「猜到了/想不出来」双按钮尺寸（用户反馈按钮太小）；
   v203：要/不要面板已随"还想听下一题吗"问询一并删除 */
#quizPick button { background: rgba(232, 132, 42, 0.36); border-color: rgba(232, 132, 42, 0.6); color: #fff; font-size: 15px; padding: 8px 22px; }

/* ════════ v46 长鹅百宝箱：右上角入口按钮 + 半透明浮动功能面板 ════════
   层级：面板 60 / 遮罩 59——高于底栏(10)与微信引导(25)，低于 toast(300)；
   开关只切换 .show 类，不触碰长鹅任何播放/播报状态 */
.tb-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 12px; border-radius: 10px;
  color: var(--ink); background: rgba(244, 237, 224, 0.85);
  border: 1px solid var(--line); cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .12s, border-color .15s;
  position: relative; right: -6px; top: -6px;   /* 与左侧主页图标同排微调 */
  flex: 0 0 auto;
}
.tb-btn:hover { transform: scale(1.05); border-color: var(--orange); }
.tb-btn:active { transform: scale(0.95); }
.tb-btn svg { display: block; color: var(--orange-deep); }

/* 透明点击捕获层：实现"点面板外部关闭"，本身无视觉 */
.tb-mask {
  position: fixed; inset: 0; z-index: 59;
  display: none; background: transparent;
}
.tb-mask.show { display: block; }

.tb-panel {
  position: fixed; top: 58px; right: 10px; z-index: 60;
  width: min(84vw, 320px);
  max-height: min(72vh, 560px);
  overflow-y: auto; overscroll-behavior: contain;
  /* v47 需求3 / v49 需求1：玻璃板质感且更透——半透明渐变底 + 毛玻璃模糊 + 高光描边 */
  background: linear-gradient(165deg, rgba(255, 253, 248, 0.24), rgba(253, 249, 243, 0.12));
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(90, 70, 40, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  opacity: 0; transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  /* v132：will-change 保持隐藏态合成层常驻（防合成器裁撤 opacity:0 层）。
     用户实测「点过一次百宝箱（即便关闭）后瞬间放大不再发生」——本层的常驻
     即抑制毛刺的实证开关；will-change 把该状态从"首次打开后"提前到"加载起"。
     v178 起同款常驻层另由 body::after 承担（.quick-pick 移除后）。 */
  will-change: transform, opacity;
}
.tb-panel.show { opacity: 1; transform: none; pointer-events: auto; }
/* ════════ v55 才艺秀二级面板（百宝箱 → 长鹅才艺秀）：四类才艺按钮 ════════
   v61：改右上原地展开（与"我的记忆/长鹅新闻榜"同位），不再屏幕居中；
   层级 61（压百宝箱面板 60），开关同样只切类名不触碰长鹅状态 */
.tp-panel {
  position: fixed; top: 58px; right: 10px; z-index: 61;
  width: min(80vw, 300px);
  background: linear-gradient(165deg, rgba(255, 253, 248, 0.28), rgba(253, 249, 243, 0.16));
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(90, 70, 40, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  opacity: 0; transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.tp-panel.show { opacity: 1; transform: none; pointer-events: auto; }
.tp-tip {
  margin: -2px 14px 10px; font-size: 13px; color: var(--muted); text-align: center;
}
.tp-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  padding: 0 14px 14px;
}
.tp-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px 12px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.22);
  color: var(--ink); font-size: 14px; font-weight: 700; font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .12s, border-color .15s, background .15s;
}
.tp-item:hover { border-color: var(--orange); background: rgba(255, 255, 255, 0.5); }
.tp-item:active { transform: scale(0.94); }
.tp-item .tp-ico { color: var(--orange-deep); display: inline-flex; }
.tp-item .tp-name { letter-spacing: 2px; }
.tb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px;
}
.tb-title {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.tb-title svg { color: var(--orange-deep); }
.tb-close {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.6);
  color: var(--muted); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: color .15s, border-color .15s;
}
.tb-close:hover { color: var(--orange-deep); border-color: var(--orange); }
.tb-close svg { width: 16px; height: 16px; }

/* 竖屏紧凑：2 列网格；v81 末行为「收藏我」+「装到手机桌面」两枚扁条（各占一列），
   6 格保持 v80 缩小后的尺寸 */
.tb-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 2px 12px 14px;
}
.tb-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 6px 6px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.40); background: rgba(255, 255, 255, 0.14);   /* v49 需求1：更透 */
  color: var(--ink); cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .12s, border-color .15s, background .15s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.tb-item:hover { border-color: var(--orange); background: rgba(255, 255, 255, 0.55); }
.tb-item:active { transform: scale(0.94); }
.tb-item svg { width: 20px; height: 20px; }   /* v80：图标随格子同步缩小 */
.tb-item .tb-ico { display: block; color: var(--orange-deep); }
.tb-item .tb-name { font-size: 12px; font-weight: 600; line-height: 1.2; }
.tb-item .tb-desc { font-size: 10px; color: var(--muted); line-height: 1.2; }
.tb-item.is-building { opacity: .78; }
.tb-item.is-building .tb-ico { color: #B9B1A2; }
/* v81：「收藏我」「装到手机桌面」引导扁条——各占一列，扁平虚线描边示意引导性质，无副文字
   v191（用户 2026-11-02）：文字橙色看不清 → 白色 → 定稿黑色（图标随 currentColor 一并变黑） */
.tb-desk {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 34px; padding: 0 4px; border-radius: 12px;
  border: 1px dashed rgba(208, 106, 20, 0.45);
  background: rgba(232, 132, 42, 0.08);
  color: #1f2937; font-size: 12.5px; font-weight: 700; font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .12s, background .15s;
}
.tb-desk:hover { background: rgba(232, 132, 42, 0.16); }
.tb-desk:active { transform: scale(0.97); }
.tb-desk svg { flex: none; }
/* 窄屏微调：留出安全边距，面板不贴边 */
@media (max-width: 360px) {
  .tb-panel { right: 6px; width: calc(100vw - 24px); }
  .tb-grid { gap: 6px; }
  .tb-item { padding: 6px 4px 5px; }
  .tb-desk { height: 30px; }
}

/* ════════ v49 我的记忆：个人记忆管理面板（memory.js 注入） ════════
   层级与百宝箱一致（面板 60 / 遮罩 58）；玻璃质感同款，开关不影响长鹅任务 */
.mem-mask {
  position: fixed; inset: 0; z-index: 58;
  display: none; background: transparent;
}
.mem-mask.show { display: block; }
.mem-panel {
  position: fixed; top: 58px; right: 10px; z-index: 60;
  width: min(88vw, 340px);
  max-height: min(78vh, 620px);
  overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(165deg, rgba(255, 253, 248, 0.24), rgba(253, 249, 243, 0.12));
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(90, 70, 40, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  opacity: 0; transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.mem-panel.show { opacity: 1; transform: none; pointer-events: auto; }
.mem-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 6px;
  position: sticky; top: 0;
  background: rgba(253, 249, 243, 0.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.mem-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.mem-close {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.35);
  color: var(--muted); cursor: pointer; font-size: 17px; line-height: 1;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.mem-close:hover { color: var(--orange-deep); }
.mem-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 14px 14px; }
.mem-sec-title { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.mem-consent-text { font-size: 13px; line-height: 1.75; color: var(--ink); }
.mem-consent-text + .mem-consent-text { margin-top: 8px; }
.mem-btn-row { display: flex; gap: 8px; }
.mem-btn {
  flex: 1; min-height: 38px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.3);
  color: var(--ink); font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .12s, border-color .15s, background .15s;
}
.mem-btn:hover { border-color: var(--orange); }
.mem-btn:active { transform: scale(0.96); }
.mem-btn.primary { background: rgba(232, 132, 42, 0.6); border-color: rgba(232, 132, 42, 0.75); color: #fff; }
.mem-btn.danger { color: #B3352B; border-color: rgba(179, 53, 43, 0.35); background: rgba(255, 236, 232, 0.3); }
.mem-name-row { display: flex; gap: 8px; }
.mem-input {
  flex: 1; min-width: 0; height: 38px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.4);
  padding: 0 10px; font-size: 13px; color: var(--ink); outline: none; font-family: inherit;
}
.mem-input:focus { border-color: var(--orange); }
.mem-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mem-chip {
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.2);
  color: var(--ink); font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .12s, background .15s, border-color .15s;
}
.mem-chip:active { transform: scale(0.94); }
.mem-chip.on { background: rgba(232, 132, 42, 0.55); border-color: rgba(232, 132, 42, 0.7); color: #fff; }
.mem-notes { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.mem-note {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(255, 255, 255, 0.26); border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px; padding: 7px 10px; font-size: 13px; color: var(--ink);
}
.mem-note span { flex: 1; overflow-wrap: anywhere; }
.mem-note-x {
  border: none; background: none; color: var(--muted);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 2px 4px;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}

/* ================================================================
   v56 摸摸长鹅：30 秒倒计时胶囊（动态创建 #petTimer，body 直挂）
   顶部居中悬浮；大字亮色（用户偏好：重要信息大而醒目）；
   最后 10 秒 .pet-urgent 变红加速脉动提醒
   ================================================================ */
#petTimer {
  position: fixed; top: 14px; left: 50%; z-index: 70;
  transform: translateX(-50%) translateY(-16px) scale(0.9);
  display: flex; align-items: baseline; gap: 4px;
  padding: 8px 22px 10px; border-radius: 999px;
  background: linear-gradient(165deg, rgba(232, 132, 42, 0.88), rgba(214, 108, 26, 0.82));
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 26px rgba(180, 90, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
#petTimer.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
#petTimer .pt-num {
  font-size: 30px; font-weight: 800; line-height: 1;
  color: #fff; letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(120, 55, 0, 0.45);
  font-variant-numeric: tabular-nums;
}
#petTimer .pt-unit { font-size: 14px; font-weight: 700; color: rgba(255, 248, 238, 0.95); }
#petTimer.pet-urgent { background: linear-gradient(165deg, rgba(226, 74, 58, 0.92), rgba(190, 44, 32, 0.88)); animation: petUrgent 1s ease-in-out infinite; }
@keyframes petUrgent {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(0) scale(1.07); }
}
.mem-note-x:hover { color: #B3352B; }
.mem-empty { font-size: 12px; color: var(--muted); }
.mem-foot {
  font-size: 11px; color: var(--muted); line-height: 1.7;
  border-top: 1px dashed rgba(138, 129, 117, 0.35); padding-top: 8px;
}

/* ════════ v61 长鹅新闻榜面板（百宝箱 → 长鹅新闻榜）：右上原地展开，与"我的记忆"同位 ════════
   层级 61（压百宝箱面板 60）；玻璃质感同款；开关只切类名，不触碰长鹅状态 */
.np-panel {
  position: fixed; top: 58px; right: 10px; z-index: 61;
  width: min(88vw, 340px);
  max-height: min(78vh, 620px);
  overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(165deg, rgba(255, 253, 248, 0.26), rgba(253, 249, 243, 0.14));
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(90, 70, 40, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  opacity: 0; transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.np-panel.show { opacity: 1; transform: none; pointer-events: auto; }
.np-tip {
  margin: -2px 14px 10px; font-size: 12.5px; color: var(--muted);
}
.np-cats {
  display: flex; gap: 6px; padding: 0 14px 10px;
}
.np-cat {
  flex: 1; padding: 9px 2px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.22);
  color: var(--ink); font-size: 13.5px; font-weight: 700; font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .12s, border-color .15s, background .15s, color .15s;
}
.np-cat:hover { border-color: var(--orange); background: rgba(255, 255, 255, 0.5); }
.np-cat:active { transform: scale(0.94); }
.np-cat.on {
  background: linear-gradient(135deg, #FFB25C, #FF8A3D); color: #fff;
  border-color: transparent; box-shadow: 0 4px 14px rgba(255, 138, 61, 0.35);
}
/* 今日重磅红色大按钮（用户指定红色，突出唯一入口） */
.np-top3 {
  display: flex; align-items: center; gap: 8px;
  width: calc(100% - 28px); margin: 0 14px 12px; padding: 11px 12px;
  border-radius: 12px; border: none;
  background: linear-gradient(135deg, #E5484D, #C62F35);
  color: #fff; font-size: 14px; font-weight: 700; font-family: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  box-shadow: 0 6px 18px rgba(198, 47, 53, 0.32);
  transition: transform .12s, box-shadow .15s;
}
.np-top3:active { transform: scale(0.97); }
.np-top3-tag {
  flex: none; padding: 2px 7px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.22); font-size: 11.5px; letter-spacing: 1px;
}
/* 标题列表：大字可读（重要文本大而亮），两行截断 */
.np-list {
  display: flex; flex-direction: column; gap: 6px; padding: 0 14px 14px;
}
.np-item {
  display: block; width: 100%; text-align: left; padding: 10px 12px;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.24); color: var(--ink); font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .12s, border-color .15s, background .15s;
}
.np-item:hover { border-color: var(--orange); background: rgba(255, 255, 255, 0.5); }
.np-item:active { transform: scale(0.97); }
.np-idx {
  display: inline-block; min-width: 20px; margin-right: 6px;
  color: var(--orange-deep); font-weight: 800; font-size: 13.5px;
}
.np-title {
  font-size: 13.5px; font-weight: 600; line-height: 1.5;
  display: inline; -webkit-line-clamp: 2;
}
/* 重磅条目：红色系卡片 + 排名徽标 + 评选理由 */
.np-rank { border-color: rgba(229, 72, 77, 0.35); background: rgba(229, 72, 77, 0.07); }
.np-rank:hover { border-color: #E5484D; background: rgba(229, 72, 77, 0.14); }
.np-rank-no {
  display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 6px;
  background: #E5484D; color: #fff; font-size: 11px; font-weight: 800; vertical-align: 1px;
}
.np-reason {
  display: block; margin-top: 5px; font-size: 12px; line-height: 1.55; color: #8A5A5C;
}
.np-empty {
  padding: 14px 2px 4px; text-align: center; font-size: 13px; color: var(--muted); line-height: 1.7;
}
@media (max-width: 360px) {
  .np-panel { right: 6px; width: calc(100vw - 24px); }
  .np-cat { font-size: 12.5px; }
}