/* ══════════════════════════════════════════════════
   重听许嵩 · 古籍 / 竖排 / 印章  —— 中国风线装书美学
   ══════════════════════════════════════════════════ */
/* 龙藏(Long Cang·OFL开源)子集:仅「正确率成 零一二三四五六七八九十」十余字、~4.4KB、自托管(不依赖谷歌),只给结算页正确率朱印用 */
@font-face{font-family:"LongCangSeal"; src:url("fonts/longcang-seal.woff2") format("woff2"); font-display:swap;}
:root{
  --paper:#E9E1CF; --paper-2:#E3DAC4; --paper-hi:#F1E9D8;
  --ink:#23211C; --ink-soft:#4A463C; --ink-faint:#807A6A;
  --vermilion:#B23A2E; --vermilion-deep:#8E2C22; --vermilion-wash:rgba(178,58,46,.10);
  --moss:#6E7355; --rule:#C7BCA1; --rule-soft:#D6CDB6;
  --serif:"Songti SC","STSong","Noto Serif SC",serif;
  --brush:"LongCangSeal","STXingkai","Long Cang",serif;   /* 印章专用(龙藏子集),回退本机行楷/宋体 */
  --sans:"PingFang SC",system-ui,-apple-system,sans-serif;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  /* #5:圆角令牌——统一全站圆角(原来散落 3/4/5/14/16px 不一致)。小元素(钮/签/小印)=sm,浮层卡/胶囊=lg,圆形仍用 50% */
  --r-sm:4px; --r-lg:14px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:var(--sans); color:var(--ink); background:#2c2922;
  overflow:hidden; user-select:none; -webkit-user-select:none;
}
#app{
  position:relative; width:100%; height:100dvh; max-width:480px; margin:0 auto;
  background:var(--paper);
  background-image:radial-gradient(150% 110% at 50% -10%, #F1E9D8 0%, var(--paper) 46%, var(--paper-2) 100%);
  overflow:hidden;
}
/* 宣纸肌理 + 上下微晕 */
#app::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:6;
  background:
    repeating-linear-gradient(0deg,#00000005 0 1px,#0000 1px 3px),
    radial-gradient(120% 80% at 50% 0%, #fff6e314 0%, #0000 45%),
    radial-gradient(110% 70% at 50% 100%, #5c513212 0%, #0000 52%);
  mix-blend-mode:multiply; opacity:.6;
}
/* 装订线（线装书） */
.bind{position:absolute; top:74px; bottom:64px; left:19px; width:0; z-index:4;
  border-left:1px solid var(--rule);}
.bind::after{content:""; position:absolute; top:0; bottom:0; left:-3.5px; width:7px;
  background-image:radial-gradient(circle,var(--ink-faint) 0 1.4px,#0000 1.6px);
  background-size:7px 32px; background-repeat:repeat-y; opacity:.45;}

/* ─── 屏幕切换 ─── */
.screen{position:absolute; inset:0; z-index:2; display:none; flex-direction:column;
  padding-top:var(--safe-t); padding-bottom:var(--safe-b);}
.screen.active{display:flex; animation:fade .4s ease;}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ─── 顶栏 + 印章 ─── */
.topbar{display:flex; align-items:center; justify-content:space-between; padding:22px 26px 0 38px; flex:none;}
.seal-mark{width:38px; height:38px; flex:none; border:1.5px solid var(--vermilion); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; color:var(--vermilion);}
.seal-mark span{font-family:var(--serif); font-size:17px; font-weight:600; line-height:1.05;
  writing-mode:vertical-rl; letter-spacing:0;}
.seal-mark.sm{width:34px; height:34px;} .seal-mark.sm span{font-size:15px;}
.topbar-right{text-align:right; line-height:1.6;}
.topbar-right .k{font-family:var(--serif); font-size:11px; color:var(--ink-faint); letter-spacing:.3em;}
.topbar-right .v{font-family:var(--serif); font-size:15px; color:var(--ink-soft); letter-spacing:.14em;}
.quit{background:none; border:1px solid var(--rule); color:var(--ink-soft); cursor:pointer;
  font-family:var(--serif); font-size:12px; letter-spacing:.2em; padding:6px 12px; border-radius:var(--r-sm);}
/* #3:挑战中三屏左上=品牌"重听许嵩"+小房子图标(回主页)。让任意截图都带品牌识别与来源,且明确可点回家 */
.brand-home{display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid var(--rule); border-radius:var(--r-sm); padding:5px 11px 5px 9px; cursor:pointer; color:var(--ink-soft); font-family:var(--serif); font-size:13px;}
.brand-home .ic{width:14px; height:14px; flex:none;}
.brand-home span{font-weight:600; color:var(--ink); letter-spacing:.1em;}
.brand-home:active{border-color:var(--vermilion);}
.brand-home:active .ic, .brand-home:active span{color:var(--vermilion);}
/* #8:功能图标(inline SVG)默认尺寸=随容器字号(1em);特定位置覆盖。印章类不在此列(保留手作方框) */
.ic{width:1em; height:1em; display:inline-block; vertical-align:-0.14em; flex:none;}
.play-ico .ic{vertical-align:middle;}
.ov-close .ic{width:13px; height:13px;}
.fav-soon .ic{vertical-align:-0.16em;}
.quit:active{background:var(--paper-2);}
.round-tag{font-family:var(--serif); font-size:13px; color:var(--ink-soft); letter-spacing:.18em;}

/* ─── 播放区（编曲声纹）─── */
/* D#3/#4/#5:答题页视觉中心——大播放钮(▶/❚❚图标+按钮感) + 正在演奏副标 + 主问;选项下移成"听-问-选"轴 */
.play-stage{flex:none; padding:34px 38px 16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;}
.play-ctl{flex:none; width:62px; height:62px; border-radius:50%; border:1.5px solid var(--vermilion); background:var(--vermilion-wash); color:var(--vermilion); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 10px rgba(178,58,46,.14); transition:transform .15s, box-shadow .2s, color .2s, border-color .2s;}
.play-ctl:active{transform:scale(.92);}
.play-ico{font-size:23px; line-height:1; letter-spacing:-1px;}
.playing .play-ctl{animation:playGlow 1.6s ease-in-out infinite;}
@keyframes playGlow{0%,100%{box-shadow:0 2px 10px rgba(178,58,46,.14);} 50%{box-shadow:0 2px 20px rgba(178,58,46,.36);}}
body.paused .play-ctl{border-color:var(--rule); color:var(--ink-faint); background:#0000; animation:none;}
.play-now{font-size:12.5px; letter-spacing:.22em; text-indent:.22em; color:var(--ink-soft);}
.play-now.t-groove{color:var(--vermilion-deep);}
.play-now.t-solo_mel{color:var(--moss);}
.play-ask{font-family:var(--serif); font-weight:600; font-size:30px; letter-spacing:.1em; text-indent:.1em; color:var(--ink); line-height:1.1;}
/* #8:发心右上常驻胶囊(不浮现、不挤主交互、想看的人主动点) */
.why-pill{ background:none; border:1px solid var(--vermilion-wash); border-radius:var(--r-sm); color:var(--vermilion); font-family:var(--serif); font-size:13px; letter-spacing:.02em; padding:5px 11px; cursor:pointer; align-self:center; }   /* 点2:与左上品牌钮(brand-home)同形——同圆角令牌/字号/内距,只保留朱砂作发心口的强调色。说话层=正常字距 */
.why-pill:active{ background:var(--vermilion-wash); }
.why-pill.pulse{ animation:whyPulse 1.2s ease-in-out 2; }
@keyframes whyPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(178,58,46,0);} 50%{box-shadow:0 0 0 5px rgba(178,58,46,.12);} }
.sound{flex:none; padding:28px 38px 12px; display:flex; align-items:flex-end; justify-content:space-between; gap:14px;}
.sound-col{display:flex; flex-direction:column; gap:9px;}
.stem-tag{display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-family:var(--serif); font-size:12px; letter-spacing:.22em; color:var(--ink-soft);
  border:1px solid var(--rule); border-radius:2px; padding:4px 11px;}
.stem-tag i{width:5px; height:5px; border-radius:50%; background:var(--vermilion);
  animation:breathe 2.4s ease-in-out infinite;}
@keyframes breathe{0%,100%{opacity:.35; transform:scale(.8)} 50%{opacity:1; transform:scale(1.15)}}
.now{font-family:var(--serif); color:var(--ink-soft); font-size:14px; letter-spacing:.16em;}
.wave{display:flex; align-items:center; gap:3px; height:48px;}
.wave i{width:2.5px; height:8px; background:var(--ink); border-radius:2px; opacity:.55;}
.playing .wave i{animation:eq 1.1s ease-in-out infinite;}
.wave i:nth-child(2){animation-delay:.12s} .wave i:nth-child(3){animation-delay:.24s}
.wave i:nth-child(4){animation-delay:.06s} .wave i:nth-child(5){animation-delay:.3s}
.wave i:nth-child(6){animation-delay:.18s} .wave i:nth-child(7){animation-delay:.36s}
.wave i:nth-child(8){animation-delay:.42s}
@keyframes eq{0%,100%{height:8px; opacity:.5} 50%{height:var(--h); opacity:.85}}

.meta-rule{height:1px; background:var(--rule); margin:6px 38px 0;}
.meta{display:flex; justify-content:space-between; align-items:baseline; padding:13px 38px 4px; font-family:var(--serif);}
.meta .lab{font-size:10.5px; color:var(--ink-faint); letter-spacing:.32em; display:block; margin-bottom:3px;}
.meta .num{font-size:21px; color:var(--ink); letter-spacing:.04em; font-variant-numeric:tabular-nums;}
.meta .right{text-align:right;} .meta .vermilion .num{color:var(--vermilion-deep);}

.ask{padding:16px 38px 8px; font-family:var(--serif); font-size:16px; color:var(--ink-soft); letter-spacing:.14em;}
.ask b{color:var(--ink); font-weight:600;}

/* ─── 选项：签牌 ─── */
/* D#9:封闭选项门——前3秒只听,选项隐去,中央"请欣赏器乐演奏"+倒计时,可提前跳过 */
.options-wrap{position:relative; flex:1; display:flex; flex-direction:column; min-height:0;}
.listen-gate{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; text-align:center; background:transparent; z-index:2;}   /* 第4条:封闭门改透明——选项此刻已veiled(opacity0且首帧前置不闪),无需纯色遮挡;透明让#app径向渐变透出,消除原flat var(--paper)与渐变背景的色差缝(尤其与底部"再听一次"区交界) */
.listen-gate[hidden]{display:none;}
.gate-text{font-family:var(--serif); font-size:17px; letter-spacing:.05em; text-indent:.05em; color:var(--ink-soft);}   /* 说话层:聆听提示=正常字距(原.3em逐字拉开太仪式) */
.gate-count{font-family:var(--serif); font-size:54px; font-weight:600; color:var(--vermilion); line-height:1; animation:gateTick 1s linear infinite;}
@keyframes gateTick{0%{transform:scale(1); opacity:1;} 100%{transform:scale(.84); opacity:.45;}}
.gate-skip{margin-top:6px; background:none; border:none; color:var(--ink-faint); font-size:13px; letter-spacing:.08em; cursor:pointer; padding:8px 16px; text-decoration:underline; text-underline-offset:4px;}
.gate-skip:active{color:var(--vermilion);}
.tablets{flex:1; display:flex; flex-direction:column; gap:12px; padding:4px 28px 16px 38px; justify-content:center; min-height:0; transition:opacity .45s ease, transform .45s ease;}
.tablets.veiled{opacity:0; transform:translateY(16px); pointer-events:none;}
.tablet{position:relative; display:flex; align-items:center; gap:15px; width:100%; text-align:left;
  background:linear-gradient(180deg,#efe8d9,#e6ddc8); border:1px solid var(--rule); border-radius:var(--r-sm);
  padding:15px 18px; min-height:60px; cursor:pointer; overflow:hidden;
  box-shadow:0 1px 0 #fffaef inset, 0 2px 5px -3px #00000026; transition:transform .08s, border-color .2s, background .2s;}
.tablet:active{transform:scale(.985);}
.tablet .idx{flex:none; width:30px; height:30px; border-radius:var(--r-sm); border:1px solid var(--ink-faint);
  font-family:var(--serif); font-size:15px; color:var(--ink-soft); display:flex; align-items:center; justify-content:center;}
.tablet .col{display:flex; flex-direction:column; min-width:0;}
.tablet .name{font-family:var(--serif); font-size:22px; color:var(--ink); letter-spacing:.16em; line-height:1.05;}
.tablet .name.long{font-size:16.5px; letter-spacing:.03em; line-height:1.18;}   /* E#4:长歌名(≥8字)缩字号+紧凑,不撑爆选项框/不挤拼音 */
.tablet .py{font-family:var(--serif); font-size:10px; color:var(--ink-faint); letter-spacing:.14em; margin-top:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px;}
.tablet .ghost{position:absolute; right:15px; top:50%; transform:translateY(-50%) rotate(-6deg);
  width:36px; height:36px; border:1.5px solid var(--vermilion); border-radius:var(--r-sm); opacity:.10;
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:11px;
  color:var(--vermilion); writing-mode:vertical-rl; letter-spacing:-1px;}
.tablet .stamp{position:absolute; right:13px; top:50%; transform:translateY(-50%) rotate(-7deg) scale(.6); opacity:0;
  width:42px; height:42px; border:2px solid var(--vermilion); border-radius:var(--r-sm); display:flex; align-items:center;
  justify-content:center; color:var(--vermilion); background:var(--vermilion-wash);
  transition:.25s cubic-bezier(.34,1.56,.64,1);}
.tablet .stamp span{font-family:var(--serif); writing-mode:vertical-rl; font-size:15px; font-weight:600; letter-spacing:-2px;}
.tablet.picked{border-color:var(--vermilion); background:linear-gradient(180deg,#f1e6d4,#ecdcc2);}
.tablet.picked .idx{border-color:var(--vermilion); color:var(--vermilion-deep);}
.tablet.picked .stamp{opacity:1; transform:translateY(-50%) rotate(-7deg) scale(1);}
.tablet.correct{border-color:var(--vermilion); background:linear-gradient(180deg,#f3e7d2,#eddcbf);}
.tablet.correct .idx{border-color:var(--vermilion); color:var(--vermilion-deep);}
.tablet.correct .stamp{opacity:1; transform:translateY(-50%) rotate(-7deg) scale(1); border-color:var(--vermilion); color:var(--vermilion);}
.tablet.wrong{opacity:.7;}
.tablet.wrong .stamp{opacity:1; transform:translateY(-50%) rotate(-7deg) scale(1); border-color:var(--ink-faint); color:var(--ink-faint); background:#80807008;}
.tablet.dim{opacity:.42;}
.tablet.locked{cursor:default;}

/* ─── 按钮 ─── */
.footer{flex:none; display:flex; gap:12px; padding:0 38px 26px;}
.btn{flex:1; font-family:var(--serif); font-size:14.5px; letter-spacing:.2em; padding:14px 0; text-align:center;
  border-radius:var(--r-sm); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid;}
.btn .gly{font-size:16px; line-height:1;}
.btn-ghost{background:#0000; border-color:var(--ink-soft); color:var(--ink);}
.btn-ghost:active{background:var(--paper-2);}
.btn-fill{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.btn-fill:active{background:#000;}
.btn[disabled]{opacity:.4; pointer-events:none;}
.btn.wide{flex:none; width:100%; margin-top:12px;}

.next-btn{width:100%; font-family:var(--serif); font-size:15px; letter-spacing:.3em; text-indent:.3em;
  padding:16px 0; text-align:center; border-radius:var(--r-sm); cursor:pointer;
  background:var(--vermilion); color:#f6ecdc; border:1px solid var(--vermilion-deep);
  display:flex; align-items:center; justify-content:center; gap:10px; transition:transform .08s;}
.next-btn:active{transform:scale(.98);} .next-btn .gly{font-size:15px;}
.next-btn[disabled]{opacity:.4; pointer-events:none;}

/* ════════ 扉页 / 首页 ════════ */
#home .home-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:20px; padding:0 30px;}
.home-kicker{font-family:var(--serif); font-size:13px; color:var(--vermilion-deep); letter-spacing:.6em; text-indent:.6em;}
.home-title{font-family:var(--serif); font-size:clamp(48px,14.5vw,64px); font-weight:700; color:var(--ink); letter-spacing:.14em; text-indent:.14em; line-height:1; text-shadow:0 2px 0 #fff8ea; white-space:nowrap;}   /* #11:去文字空格后用单一 letter-spacing:.14em 控字距(更紧、不贴边);text-indent 同值补尾隙居中。改名:四字"重听许嵩"流体适配(原70px为三字"猜嵩歌";四字+nowrap会撑窄屏)→clamp随屏宽流动:SE320=48px、iPhone375≈54px、大屏封顶64px;实测60px时文字314px宽算出系数,确保320+不溢出;#5:text-indent补偿letter-spacing尾隙→视觉真居中 */
.home-line{width:46px; height:2px; background:var(--vermilion); opacity:.85;}
.home-desc{font-family:var(--serif); font-size:19px; color:var(--ink); line-height:1.9; letter-spacing:.04em;}
/* C批:许嵩作品宇宙(替代曲库统计) */
.songverse{position:absolute; top:14px; right:16px; z-index:5; text-align:right;}   /* G#3:创作年模块移右上角(角标位,不抢首页主轴) */
.sv-seals{display:flex; gap:7px; flex-wrap:wrap; justify-content:center;}
.sv-seal{width:30px; height:30px; border:1px solid var(--vermilion); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:var(--vermilion); opacity:.82;}
.sv-seal span{font-family:var(--serif); font-size:12.5px; font-weight:600;}
/* G#3/#5:右上角创作年角标——整行做成可点按钮(去掉原突兀的圆圈"i",同时消除文字与图标的基线漂移),虚线下划线轻示意可点 */
.sv-line{display:inline-block; background:none; border:none; padding:0 0 3px; cursor:pointer; font-family:var(--serif); font-size:14px; color:var(--ink-soft); letter-spacing:.01em; white-space:nowrap; border-bottom:1px dotted var(--rule);}   /* 点2:右上创作年放大很多(10.5→14,数字→18) */
.sv-line b{color:var(--vermilion-deep); font-size:18px; font-weight:700;}
.sv-line:active{color:var(--ink-soft); border-bottom-color:var(--vermilion);}
/* D1:答题进度签牌(替代"已得分"实时数字,只显对错进度) */
.play-progress{display:flex; justify-content:center; gap:7px; flex-wrap:wrap; padding:20px 38px 18px;}   /* D#5:和主问/选项都拉开气口,不再挨太近 */
.pp-cell{width:18px; height:6px; border-radius:var(--r-sm); border:1px solid var(--ink-faint); opacity:.45; transition:.2s;}
.pp-cell.ok{background:var(--vermilion); border-color:var(--vermilion); opacity:1;}
.pp-cell.miss{opacity:.3;}
.pp-cell.cur{border-color:var(--vermilion); opacity:1; box-shadow:0 0 0 2px var(--vermilion-wash);}
/* D2:地狱题标识(groove纯鼓贝斯) */
.type-tag{display:inline-block; margin-top:7px; font-family:var(--serif); font-size:11px; letter-spacing:.25em; text-indent:.25em; color:var(--ink-soft); background:rgba(35,33,28,.05); border:1px solid var(--rule); border-radius:var(--r-sm); padding:3px 10px;}
.type-tag:empty{display:none;}
.type-tag.t-groove{color:var(--vermilion-deep); border-color:var(--vermilion-wash);}   /* 鼓贝斯=无旋律线、更难认,朱砂微提示 */
.type-tag.t-solo_mel{color:var(--moss); border-color:var(--rule);}                       /* 旋律声部=珍珠题 */

/* #12:微信X5/WKWebView 长按取词隔离——让长按热区内没有"可被系统命中的文本节点" */
.hold-btn, .hold-btn *{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
/* H#2:全局防长按拖拽(vivo"超级拖放"=长按拖拽手势)——所有按钮/图/长按元素禁拖,JS 再兜一层 dragstart 拦截 */
img, a, button, .tablet, .tablet *, .hold-btn, .hold-btn *, .play-ctl, .play-ctl *{ -webkit-user-drag:none; -khtml-user-drag:none; -moz-user-drag:none; -o-user-drag:none; user-drag:none; }
.hold-btn .hold-main{ pointer-events:none; -webkit-user-modify:read-only; }   /* 长按命中只落按钮容器、不落文本→不触发取词;E清理:hold-ico/hold-sub 元素已删 */
.hold-btn .hold-main::before{ content:attr(data-label); }   /* H#2:文字用伪元素渲染——不是 DOM 文本节点、系统遍历找不到可拖文本→根治微信里 vivo 超级拖放(治本:消灭选区,不是拦事件) */
#homeRank{color:var(--vermilion-deep); font-size:13px; letter-spacing:.14em;}   /* C批:段位右上低调朱砂(玩过才有内容,不突兀) */
#home .home-foot{flex:none; display:flex; flex-direction:column; align-items:center; gap:12px; padding:0 38px 40px;}   /* 第1条:foot gap 16→12,把两枚入口链拉近"开始挑战" */
.home-stats{display:flex; gap:24px; font-family:var(--serif); color:var(--ink-faint); font-size:12px; min-height:16px; letter-spacing:.1em;}
.home-stats b{color:var(--vermilion-deep); font-size:15px;}
.lib-note{font-family:var(--serif); font-size:12px; color:var(--ink-faint); letter-spacing:.04em;}   /* 说话层:曲库状态=正常字距 */
/* D2/D3:ICP 备案号——大陆已备案站法定要求,必须可点击跳工信部;极淡小字、只首页出现、不破坏沉浸 */
/* 点1:备案号钉在屏幕最底、极淡极小、远离视觉中心——法定要展示但不该被注意到 */
.beian{position:absolute; left:0; right:0; bottom:calc(var(--safe-b) + 5px); z-index:1; text-align:center; font-family:var(--sans); font-size:10px; color:var(--ink-faint); letter-spacing:.02em; text-decoration:none; opacity:.4;}
.beian:active{opacity:.7;}
/* #5:首页页脚节奏修整——消除疏密不均 */
.home-stats:empty{display:none;}                                   /* 段位已删→stats常空,别占16px幽灵高度 */
#home .home-foot .about-link{margin:0;}                            /* 清掉 about-link 自带14px上边距(原来和 foot 的 gap 叠加→忽远忽近) */
#home .home-foot .home-links{flex-direction:row; flex-wrap:nowrap; gap:13px;}     /* 第1条:收藏册/为什么 改左右并排(原竖排) */
#home .home-foot .home-links .about-link{letter-spacing:.05em; text-indent:.05em; padding:6px 12px; white-space:nowrap;}   /* 横排两枚朱砂闲章:收窄字距/内边距+nowrap禁止内部折行 */
@media (max-width:350px){ #home .home-foot .home-links{flex-direction:column;} }   /* SE320等极窄屏:两长链横排需~265px塞不下→回竖排,不折行不溢出(360+正常横排) */

/* ════════ 揭晓 ════════ */
.scroll{flex:1; display:flex; align-items:center; justify-content:center; gap:28px; padding:8px 36px; min-height:0;}
.title-stack{display:flex; flex-direction:column; align-items:center; gap:20px;}
.answer-title{writing-mode:vertical-rl; font-family:var(--serif); font-size:70px; font-weight:600; color:var(--ink);
  letter-spacing:.08em; line-height:1.05; text-align:center; text-shadow:0 1px 0 #fff8ea; max-height:58vh; overflow:hidden;}   /* E#C:overflow 防超长标题顶框与朱印/判词重叠 */
.answer-side{writing-mode:vertical-rl; display:flex; flex-direction:column; gap:16px; align-self:center;}
/* E#D:揭晓页错峰入场(专辑→歌名→判词依次升起),印章 seal-in 夹在中间,强化"钤印揭晓"仪式;reduced-motion 下 duration 自动趋零 */
#reveal.active .answer-side{ animation: revealRise .5s cubic-bezier(.2,.7,.3,1) both; animation-delay:.05s; }
#reveal.active .answer-title{ animation: revealRise .55s cubic-bezier(.2,.7,.3,1) both; animation-delay:.13s; }
#reveal.active .verdict{ animation: revealRise .5s ease both; animation-delay:.5s; }
@keyframes revealRise{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
.answer-side .album{font-family:var(--serif); font-size:15px; color:var(--ink-soft); letter-spacing:.3em;}
.answer-side .year{font-family:var(--serif); font-size:12.5px; color:var(--ink-faint); letter-spacing:.28em;}
.grand-seal{width:88px; height:88px; flex:none; position:relative; border:3px solid var(--vermilion); border-radius:7px;
  display:flex; align-items:center; justify-content:center; color:var(--vermilion); transform:rotate(-6deg);
  background:repeating-linear-gradient(48deg,#0000 0 6px,var(--vermilion-wash) 6px 7px), var(--vermilion-wash);
  animation:seal-in .45s cubic-bezier(.34,1.56,.64,1);}
.grand-seal span{writing-mode:vertical-rl; font-family:var(--serif); font-weight:600; font-size:29px; letter-spacing:6px; line-height:1.18;}   /* #7:字距-2→6、行高.9→1.18,"正解/答错"两字拉开、各自成字 */
.grand-seal.wrong{border-color:var(--ink-faint); color:var(--ink-faint); background:#80807008;}
@keyframes seal-in{0%{transform:rotate(-6deg) scale(1.8); opacity:0} 60%{transform:rotate(-6deg) scale(.92); opacity:1} 100%{transform:rotate(-6deg) scale(1)}}
.verdict{flex:none; text-align:center; padding:4px 38px 4px;}
.verdict .right-word{font-family:var(--serif); font-size:15px; color:var(--vermilion-deep); letter-spacing:.34em; text-indent:.34em;}
.verdict.miss .right-word{color:var(--ink-faint);}
.score-rule{height:1px; background:var(--rule); margin:14px 54px 0;}
.score{display:flex; align-items:baseline; justify-content:center; gap:3px; padding:12px 0 2px; font-family:var(--serif);}
.score .plus{font-size:28px; color:var(--vermilion); font-weight:600; line-height:1;}
.score .pts{font-size:60px; color:var(--vermilion-deep); font-weight:600; line-height:.9; font-variant-numeric:tabular-nums;}
.score .unit{font-size:14px; color:var(--ink-faint); letter-spacing:.2em; margin-left:6px;}
.score-sub{font-family:var(--serif); font-size:11px; color:var(--ink-faint); letter-spacing:.3em; text-align:center; text-indent:.3em; margin-top:3px;}
/* #14:揭晓页底部左右布局——左按住(主、占多)/右继续(次) */
.reveal-footer{flex:none; padding:16px 38px 26px; display:flex; flex-direction:column; gap:10px;}
.result-actions{display:flex; gap:10px;}                          /* #8:存图|听原曲 左右等分 */
.result-actions .btn{flex:1; min-width:0; margin:0;}              /* 拆除"左右出画"假约束=给按钮 flex:1+min-width:0 弹性收缩,窄屏也不溢出 */
/* H#4:四按钮分两层——主动作(再来一局/晒战绩)紧凑一组,次入口(收藏册/关于)用分隔线拉开、降权 */
#result .reveal-footer .home-links{margin-top:8px; padding-top:14px; border-top:1px solid var(--rule); gap:22px;}
#result .reveal-footer .about-link{margin:0;}
/* A3:结算页"听完整原曲"导流(网易云/QQ音乐许嵩主页)——淡色一行,不与主按钮抢注意 */
#result .reveal-footer .orig-links{display:flex; justify-content:center; align-items:center; gap:9px; flex-wrap:wrap; margin:4px 0 0; font-family:var(--serif); font-size:12.5px; letter-spacing:.02em;}   /* 说话层:导流提示=正常字距 */
#result .reveal-footer .orig-links[hidden]{display:none;}   /* #8:默认收起(点"听原曲"才展开);需高优先级压过上面的 display:flex,否则 [hidden] 失效 */
.orig-links .orig-lead{color:var(--ink-faint);}
.orig-links .orig-link{color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:2px;}
.orig-links .orig-link:active{color:var(--vermilion); border-color:var(--vermilion);}
.orig-links .orig-sep{color:var(--ink-faint); opacity:.5;}
/* 审计:hell 地狱模式答题页标识(原 body.hell 无任何样式) */
body.hell .round-tag::after{ content:" · 地 狱"; color:var(--vermilion); font-weight:700; letter-spacing:.06em; }
.reveal-actions{flex:none; display:flex; gap:12px; align-items:stretch; padding:6px 38px 2px;}
.reveal-actions .hold-btn{flex:1.5;}                    /* 左:主角动作(更宽) */
#reveal #nextBtn.next-side{flex:1; flex-direction:row; align-items:center; justify-content:center; gap:7px; background:var(--ink); border:1px solid var(--ink); border-radius:var(--r-lg); color:var(--paper); font-size:15.5px; letter-spacing:.06em; text-indent:.06em; padding:0 10px; white-space:nowrap;}   /* D#2:横排单行+气口,和按住密度平衡、不贴边 */
#reveal #nextBtn.next-side .gly{font-size:13px;}
#reveal .progress{padding:14px 38px 28px;}             /* 进度点单独一行 */

/* 揭晓页"按住听编曲"：按住=无人声编曲循环，松开=人声归来 */
.hold-btn{flex:none; margin:0; padding:19px 12px; display:flex; align-items:center; justify-content:center;   /* D#1:单行居中(只剩主字、按住时就地替换) */
  border:2px solid var(--vermilion); border-radius:var(--r-lg); background:var(--vermilion-wash); color:var(--vermilion-deep);
  font-family:var(--serif); cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
  touch-action:none; transition:transform .1s, background .15s, box-shadow .15s, color .15s;
  animation:holdRipple 1.9s ease-out infinite;}   /* #9:朱砂外扩涟漪,诱人去按 */
@keyframes holdRipple{0%{box-shadow:0 0 0 0 rgba(178,58,46,.30);} 70%,100%{box-shadow:0 0 0 16px rgba(178,58,46,0);}}
.hold-btn .hold-main{font-size:17.5px; letter-spacing:.1em; text-indent:.1em; font-weight:600; white-space:nowrap;}   /* D#2:单行不换行 */
.hold-btn.on{background:var(--vermilion); color:var(--paper-hi); box-shadow:inset 0 2px 12px rgba(0,0,0,.28); transform:scale(.985); animation:none;}
.progress{display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; padding:14px 0 0;}
.progress i{width:6px; height:6px; border-radius:50%; border:1px solid var(--ink-faint);}
.progress i.on{background:var(--vermilion); border-color:var(--vermilion);}
.progress i.miss{background:var(--ink-faint); border-color:var(--ink-faint); opacity:.5;}
.progress i.cur{background:var(--vermilion); border-color:var(--vermilion); box-shadow:0 0 0 3px var(--vermilion-wash);}

/* ════════ 结算（传播卡） ════════ */
.result-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 18px; min-height:0;}
/* 传播卡=截图单元:宣纸内框,判词主角 + 朱印几成 + ✓✗格子 + 钩子 + 右下角二维码 */
.share-card{width:100%; max-width:340px; background:var(--paper); border:1.5px solid var(--rule); border-radius:var(--r-lg);
  padding:26px 18px 18px; display:flex; flex-direction:column; align-items:center; text-align:center;}
.result-verdict{font-family:var(--serif); font-weight:700; color:var(--ink); letter-spacing:.04em; line-height:1.25;
  font-size:33px; margin-bottom:22px; text-shadow:0 2px 0 #fff8ea;}   /* 判词主角;字号由 app.js 按字数微调 */
/* 钤印揭幕——判词延迟"盖"下,仪式感 */
@keyframes stampDown{0%{opacity:0; transform:scale(1.5) rotate(-7deg);} 55%{opacity:1; transform:scale(.9) rotate(2deg);} 100%{opacity:1; transform:scale(1) rotate(0);}}
.result-verdict.stamped{animation:stampDown .6s cubic-bezier(.3,1.5,.5,1) both;}
/* 正确率=空心朱文方印(粗框)+龙藏+几成 */
.acc-seal{width:96px; height:96px; border:4.5px solid var(--vermilion); border-radius:var(--r-sm);
  display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--vermilion); margin-bottom:22px;}
.acc-seal .acc-lab{font-family:var(--brush); font-size:19px; letter-spacing:.08em; line-height:1.2;}
.acc-seal .acc-cheng{font-family:var(--brush); font-size:32px; letter-spacing:.06em; line-height:1.05;}
/* 印章格子:对=朱砂✓、错=淡灰✗(空心,和空心朱印呼应) */
.result-seals{display:flex; gap:5px; flex-wrap:wrap; justify-content:center; max-width:280px; margin-bottom:22px;}
.result-seals i{width:18px; height:18px; border-radius:3px; border:1.5px solid var(--ink-faint); position:relative; color:var(--ink-faint);}
.result-seals i::after{content:"✕"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-family:var(--sans);}
.result-seals i.ok{border-color:var(--vermilion); color:var(--vermilion);}
.result-seals i.ok::after{content:"✓"; font-size:12px; font-weight:700;}
/* 钩子:给没玩过的人看(说话层正常字距) */
.card-hook{font-family:var(--serif); font-size:15px; color:var(--ink); line-height:1.6;}
/* 二维码角(右下);开关关掉时整块隐藏、卡片自然收平 */
.qr-corner{align-self:flex-end; display:flex; align-items:center; gap:8px; margin-top:24px;}
.qr-corner[hidden]{display:flex; visibility:hidden;}   /* #9a:开关二维码只切 visibility、保留占位→整页不重排不抖动(原 display:none 改卡高=整页re-center=抖) */
.qr-cap{text-align:right; line-height:1.45;}
.qr-cap .qr-hint{display:block; font-family:var(--sans); font-size:11px; color:var(--ink-faint);}
.qr-cap .qr-cta{display:block; font-family:var(--serif); font-size:13px; color:var(--vermilion); letter-spacing:.06em;}
.qr-img{width:54px; height:54px; border-radius:3px; background:#fff; border:1px solid var(--rule); display:block;}
/* 二维码开关(卡外·默认开·记住选择) */
.qr-switch{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:4px 0 0; background:none; cursor:pointer; font-family:var(--sans); font-size:12px; color:var(--ink-faint);}   /* #8:显示二维码=标签左·开关右(对齐截图),铺满宽 */
.qr-switch .sw-track{width:38px; height:21px; border-radius:11px; background:var(--vermilion); position:relative; transition:background .2s;}
.qr-switch .sw-knob{position:absolute; top:2.5px; left:19.5px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .2s;}
.qr-switch[aria-checked="false"] .sw-track{background:var(--ink-faint);}
.qr-switch[aria-checked="false"] .sw-knob{left:2.5px;}

/* 窄屏 */
@media (max-height:700px){
  .home-title{font-size:48px;}
  .answer-title{font-size:56px;}
  .grand-seal{width:74px; height:74px;} .grand-seal span{font-size:26px;}
  .score .pts{font-size:50px;}
  .tablet{min-height:54px; padding:12px 16px;} .tablet .name{font-size:20px;}
  .share-card{padding:20px 14px 14px;} .acc-seal{width:84px; height:84px;} .acc-seal .acc-cheng{font-size:28px;} .acc-seal .acc-lab{font-size:17px;}
}

/* ───────── 发心：揭晓页"为什么"banner + 关于面板 ───────── */
.about-link{display:inline-flex; align-items:center; margin:14px auto 0; background:none; cursor:pointer;
  font-family:var(--serif); font-size:12px; letter-spacing:.16em; text-indent:.16em; color:var(--vermilion-deep);
  border:1px solid var(--vermilion); border-radius:var(--r-sm); padding:5px 13px;}   /* B批:发心入口改朱砂闲章(不再是不知能否点的下划线) */
.about-link:active{color:var(--vermilion);}

/* #13:发心常驻注脚(不浮现、不挤压按钮、比墨色淡字更明显——想看的人主动点) */
.why-banner{flex:none; margin:14px 38px 6px; display:flex; align-items:center; justify-content:center; gap:8px;
  background:none; border:none; color:var(--ink-soft); font-family:var(--serif); font-size:13px; letter-spacing:.06em; cursor:pointer; pointer-events:auto;}
.why-banner .why-cta{color:var(--vermilion-deep); font-weight:600; white-space:nowrap; font-size:12.5px;}

.about-overlay{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:24px;}
.about-overlay[hidden]{display:none;}
.about-scrim{position:absolute; inset:0; background:rgba(20,18,14,.5); opacity:0; transition:opacity .25s;}
.about-overlay.on .about-scrim{opacity:1;}
.about-card{position:relative; z-index:1; width:100%; max-width:380px; max-height:84vh; overflow-y:auto;
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-lg); padding:30px 26px 24px;
  box-shadow:0 18px 50px rgba(20,18,14,.4); transform:translateY(16px) scale(.98); opacity:0;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), opacity .28s;}
.about-overlay.on .about-card{transform:none; opacity:1;}
.about-seal{width:46px; height:46px; border:2px solid var(--vermilion); border-radius:7px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px;}
.about-seal span{font-family:var(--serif); font-weight:700; color:var(--vermilion); font-size:17px;}
.about-h{text-align:center; font-family:var(--serif); font-size:19px; color:var(--ink); margin:0 0 18px; letter-spacing:.08em;}
.about-text p{font-family:var(--serif); font-size:15px; line-height:1.85; color:var(--ink-soft); margin:0 0 14px; text-align:left;}   /* #7:全段左对齐(原justify);"重逢"句降为普通段落、不再居中 */
/* #7:版权声明+署名+邮箱 统一一档醒目度——强于原淡版权声明(去.66)、弱于正文(更小+淡墨色),全部左对齐 */
.about-foot{margin-top:24px;}
.about-foot p{font-family:var(--serif); font-size:12.5px; line-height:1.75; color:var(--ink-faint); text-align:left; margin:0 0 7px;}
.about-foot .about-sign{margin:14px 0 1px;}   /* 点3:署名"清晨"与免责声明拉开、与邮箱挨紧(成一个署名块) */
.about-mail-row{margin:0;}
.about-mail{font-family:var(--serif); font-size:12.5px; letter-spacing:.01em; color:var(--ink-faint); background:none; border:none; padding:0; cursor:pointer; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;}   /* #5:邮箱字体改回和"清晨"/免责声明一致的 var(--serif)宋体+12.5px(原拉丁衬线Hoefler渲染偏重、和其他小字不齐);拉丁字符在宋体里也能融入小字、视觉一致。点3:纯文字无视觉提示,轻触/长按→复制+toast */
/* G#5:三个独立页(发心/收藏册/专辑)统一关闭=右上角"× 合上"按钮 */
/* H#1:做成真胶囊按钮(描边+宣纸底,一眼可按),卡片顶部给它留出右上角(各卡 padding-top 已够、标题居中不顶边) */
.ov-close{position:absolute; top:11px; right:11px; z-index:5; display:inline-flex; align-items:center; gap:4px; background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-lg); padding:5px 11px 5px 9px; font-family:var(--serif); font-size:12px; letter-spacing:.06em; color:var(--ink-soft); cursor:pointer; box-shadow:0 1px 4px rgba(20,18,14,.08);}
/* #8:关闭 × 改 inline SVG(data-ic=close),原 ::before 乘号已删 */
.ov-close:active{background:var(--vermilion-wash); color:var(--vermilion); border-color:var(--vermilion);}

/* ───── D3:编曲收藏册 + 传说档(发心闭环:奖励真的去听编曲) ───── */
.coll-overlay{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:20px;}
.coll-overlay[hidden]{display:none;}
.coll-scrim{position:absolute; inset:0; background:rgba(20,18,14,.5); opacity:0; transition:opacity .25s;}   /* E#1:补动效(参照about,不再硬切) */
.coll-overlay.on .coll-scrim{opacity:1;}
.coll-card{position:relative; z-index:1; width:100%; max-width:440px; max-height:86vh; overflow-y:auto; background:var(--paper-hi); border:1px solid var(--rule); border-radius:var(--r-lg); padding:24px 20px 18px; box-shadow:0 24px 64px rgba(20,18,14,.34); transform:translateY(16px) scale(.98); opacity:0; transition:transform .28s cubic-bezier(.2,.7,.3,1), opacity .28s;}
.coll-overlay.on .coll-card{transform:none; opacity:1;}
/* #3 收藏册重设计:古籍藏书目录——去掉一墙边框签,曲目改流动文字,状态只用墨色深浅表达;收藏朱砂醒目、听过墨色、未得退入宣纸 */
.coll-kicker{text-align:center; font-family:var(--serif); font-size:11.5px; letter-spacing:.3em; text-indent:.3em; color:var(--vermilion); margin-bottom:7px;}
.coll-rank{text-align:center; font-family:var(--serif); font-weight:600; font-size:22px; letter-spacing:.1em; text-indent:.1em; color:var(--ink); margin:0 0 7px;}
.coll-prog{text-align:center; font-size:12.5px; letter-spacing:.02em; color:var(--ink-faint); margin-bottom:8px;}
.coll-note{text-align:center; font-size:12px; color:var(--ink-faint); line-height:1.6; margin:0 6px 22px;}
.coll-album{margin-bottom:26px;}                                                    /* 点2:专辑之间更大留白,块与块分清 */
.coll-al-head{display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--rule-soft); padding-bottom:6px; margin-bottom:15px;}   /* 点2:专辑头与曲目拉开 */
.coll-al-name{font-family:var(--serif); font-size:16.5px; font-weight:600; color:var(--ink); letter-spacing:.08em;}   /* 点2:专辑名更大更重=明确是分组标题(原14.5px与歌名太像) */
.coll-al-name::before{content:""; display:inline-block; width:3px; height:14px; background:var(--vermilion); border-radius:1px; margin-right:9px; vertical-align:-1px;}   /* 朱砂卷标,一眼区分专辑名↔歌名 */
.coll-al-n{font-size:11px; color:var(--ink-faint); font-variant-numeric:tabular-nums; letter-spacing:.05em;}
.coll-al-n.full{color:var(--vermilion);}
.coll-songs{display:flex; flex-wrap:wrap; gap:9px 18px;}
.coll-song{font-family:var(--serif); font-size:13px; font-style:normal; color:var(--ink-faint); opacity:.4;}   /* 未得=极淡,退入宣纸 */
.coll-song.heard{color:var(--ink-soft); opacity:.92;}                                                        /* 听过没收=墨 */
.coll-song.got{color:var(--vermilion); opacity:1; font-weight:600;}                                          /* 收藏=朱砂醒目 */
.coll-song.got::before{content:"●"; font-size:6px; vertical-align:.22em; margin-right:4px;}                  /* 收藏=朱印小点(藏家标记) */
/* G#5:coll-close 已统一为 .ov-close(右上角) */
.coll-reset{display:block; margin:11px auto 0; background:none; border:none; color:var(--ink-faint); font-family:var(--serif); font-size:12px; letter-spacing:.08em; cursor:pointer; text-decoration:underline; text-underline-offset:3px;}   /* E#2:重置入口(弱化、不显眼,避免误触) */
.coll-reset:active{color:var(--vermilion);}
.coll-reset.arm{color:var(--vermilion); font-weight:600; text-decoration:none;}   /* 待确认态 */

/* ───── E#1:专辑发行面板(首页 i 点开,每张专辑距今天数) ───── */
.disc-overlay{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:24px;}
.disc-overlay[hidden]{display:none;}
.disc-scrim{position:absolute; inset:0; background:rgba(20,18,14,.5); opacity:0; transition:opacity .25s;}
.disc-overlay.on .disc-scrim{opacity:1;}
.disc-card{position:relative; z-index:1; width:100%; max-width:400px; max-height:84vh; overflow-y:auto; background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-lg); padding:46px 22px 20px; box-shadow:0 20px 56px rgba(20,18,14,.4); transform:translateY(16px) scale(.98); opacity:0; transition:transform .28s cubic-bezier(.2,.7,.3,1), opacity .28s;}   /* H#1修:顶部留46px给右上关闭胶囊让位(标题"许嵩的九张录音室专辑"长,26px时与胶囊水平相撞) */
.disc-overlay.on .disc-card{transform:none; opacity:1;}
.disc-kicker{text-align:center; font-family:var(--serif); font-size:14px; letter-spacing:.16em; text-indent:.16em; color:var(--vermilion); margin-bottom:18px;}   /* #6:去掉副标"从自定义到安泊猜想"后,kicker 接管到 body 的间距 */
.disc-row{display:flex; align-items:center; gap:11px; padding:10px 3px; border-bottom:1px solid var(--rule);}
.disc-row:last-child{border-bottom:none;}
.disc-no{flex:none; width:20px; height:20px; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:11px; color:var(--ink-faint); border:1px solid var(--rule); border-radius:var(--r-sm);}
.disc-name{flex:1; font-family:var(--serif); font-size:16px; color:var(--ink); letter-spacing:.04em;}
.disc-meta{flex:none; text-align:right; display:flex; flex-direction:column; gap:2px;}
.disc-date{font-family:var(--sans); font-size:11px; color:var(--ink-faint);}
.disc-days{font-family:var(--serif); font-size:13px; color:var(--vermilion-deep); font-weight:600;}
/* G#5:disc-close 已统一为 .ov-close(右上角) */
/* 首页/结算:收藏册 + 关于 双入口并排 */
.home-links{display:flex; gap:16px; justify-content:center; align-items:center; flex-wrap:wrap;}
.home-tip{display:flex; align-items:center; justify-content:center; gap:7px; font-family:var(--serif); font-size:12.5px; letter-spacing:.02em; color:var(--ink-faint); margin:0 0 12px;}   /* H#6:开始上方耳机建议。说话层=正常字距;flex+gap给图标↔文字留气口 */

/* ───── #29:古籍开卷加载动画(盖住第一题首次下载,变入场仪式) ───── */
.loading-overlay{position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; background:var(--paper);}
.loading-overlay[hidden]{display:none;}
.loading-scroll{text-align:center; animation:caigeScrollOpen .55s cubic-bezier(.2,.7,.3,1);}
@keyframes caigeScrollOpen{from{transform:scaleX(.06); opacity:.15;} to{transform:scaleX(1); opacity:1;}}
.loading-seal{width:60px; height:60px; margin:0 auto 18px; border:2px solid var(--vermilion); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--vermilion); font-family:var(--serif); font-size:32px; animation:caigeSealPulse 1.4s ease-in-out infinite;}
@keyframes caigeSealPulse{0%,100%{opacity:.85;} 50%{opacity:.42;}}
.loading-tip{font-family:var(--serif); font-size:14px; line-height:1.65; color:var(--ink-soft); max-width:74vw; margin:0 auto;}   /* #6:开局俏皮话(warm-witty·随机),说话层=正常字距、可换行 */
.loading-bar{width:160px; height:3px; margin:18px auto 0; background:rgba(35,33,28,.10); border-radius:2px; overflow:hidden;}   /* #6:加载进度条 */
.loading-bar i{display:block; height:100%; width:0; background:var(--vermilion); border-radius:2px;}

/* ───── 满分10/10隐藏彩蛋——鎏金判词(硬核印已随传播卡改版移除) ───── */
.result-verdict.legend{ background:linear-gradient(118deg,#9a6c12,#e8c766 45%,#b8860b 70%,#7d5610); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#b8860b; text-shadow:0 0 20px rgba(184,134,11,.32); }

/* ───── #10:全程暂停 ───── */
/* E清理:暂停已改就地(body.paused+toast,#6),pause-btn/pause-overlay 整组死代码已删 */

/* #11:主动收藏(未收=虚线"待收"、已收=朱砂实底,对比成盖章仪式) */
.fav-soon{ display:flex; align-items:center; justify-content:center; gap:7px; height:30px; margin:9px auto 2px; background:none; border:none; color:var(--ink-faint); font-family:var(--serif); font-size:13px; letter-spacing:.02em; cursor:pointer; }   /* H#3:收成按住钮下方一行淡墨小字,从属、不抢"按住听演奏"主角。说话层=正常字距;gap给图标↔文字气口。固定height+flex居中→收藏切换(♡↔✓、字重400↔600)不改盒高,根治"点收藏整页下沉" */
.fav-soon:active{ color:var(--vermilion); }
.fav-soon.faved{ color:var(--vermilion); font-weight:600; }   /* 已收=朱砂小字(无底框) */
@keyframes favStamp{0%{transform:scale(.97); opacity:.5;} 100%{transform:scale(1); opacity:1;}}   /* H#3:去掉弹跳超调(原.9→1.07浮夸),改轻柔淡入显形 */
.fav-soon.stamp{ animation:favStamp .3s cubic-bezier(.2,.7,.3,1); }   /* #11:收藏/取消反馈,优雅不抢戏 */
/* E清理:续局已删(D#6),resume-link 僵尸样式已删 */

/* ───── E:无障碍·尊重"减少动态效果"系统偏好(前庭敏感/晕动症) ───── */
/* 用 duration 趋零 + iteration 1:既停掉十余个无限脉冲(playGlow/holdRipple/gateTick/breathe/eq/whyPulse/caigeSealPulse 等),又保留入场动画"终态"(seal-in/stampDown/favStamp 不丢可见态) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}