/* ══════════════════════════════════════════════════
   猜嵩歌 · 古籍 / 竖排 / 印章  —— 中国风线装书美学
   ══════════════════════════════════════════════════ */
: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;
  --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:var(--paper); z-index:2;}
.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:70px; font-weight:700; color:var(--ink); letter-spacing:.06em; text-indent:.06em; line-height:1; text-shadow:0 2px 0 #fff8ea; white-space:nowrap;}   /* C批:三字"猜嵩歌"适配,一行不换;#5:text-indent补偿letter-spacing尾隙→视觉真居中(原来末字右侧多.06em使整体偏左) */
.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:16px; padding:0 38px 40px;}
.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:column; gap:10px;}     /* 收藏册/关于 竖排紧凑一致(原横排窄屏换行→隔得很开) */

/* ════════ 揭晓 ════════ */
.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;}   /* #15:结算页按钮容器(修左右出画) */
/* 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;}   /* 说话层:导流提示=正常字距 */
.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; text-align:center; gap:14px; padding:0 34px; min-height:0;}
.result-rank-kicker{font-family:var(--serif); font-size:12px; color:var(--ink-faint); letter-spacing:.5em; text-indent:.5em;}
.result-rank{font-family:var(--serif); font-size:48px; font-weight:700; color:var(--ink); letter-spacing:.1em; text-shadow:0 2px 0 #fff8ea;}
/* A-E遗留:钤印揭幕——段位延迟"盖"下,仪式感(用户#5:称谓神秘) */
@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-rank.stamped{animation:stampDown .6s cubic-bezier(.3,1.5,.5,1) both;}
.result-rank-note{font-family:var(--serif); font-size:14px; color:var(--vermilion-deep); letter-spacing:.16em; margin-top:-4px;}
.result-seals{display:flex; gap:9px; flex-wrap:wrap; justify-content:center; max-width:300px; margin:6px 0;}
.result-seals i{width:26px; height:26px; border-radius:var(--r-sm); border:1.5px solid var(--ink-faint); position:relative; opacity:.5;}
.result-seals i.ok{border-color:var(--vermilion); background:var(--vermilion-wash); opacity:1;}
.result-seals i.ok::after{content:"中"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:13px; color:var(--vermilion); transform:rotate(-6deg);}
.result-nums{display:flex; align-items:center; gap:18px; font-family:var(--serif); margin:8px 0;}
.result-nums .n{display:block; font-size:30px; color:var(--ink); font-variant-numeric:tabular-nums;}
.result-nums .k{display:block; font-size:11px; color:var(--ink-faint); letter-spacing:.2em; margin-top:5px;}
.result-nums .sep{width:1px; height:34px; background:var(--rule);}
.result-best{font-family:var(--serif); font-size:13px; color:var(--vermilion-deep); letter-spacing:.16em; min-height:16px;}

/* 窄屏 */
@media (max-height:700px){
  .home-title{font-size:58px;}
  .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;}
  .result-rank{font-size:40px;}
}

/* ───────── 发心：揭晓页"为什么"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:"Hoefler Text",Baskerville,Georgia,"Times New Roman",serif; font-size:13.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;}   /* 点4:邮箱改优雅衬线(原无衬线难看);拉丁字形 iOS 用 Hoefler Text/Baskerville、跨平台 Georgia 兜。点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-text{font-family:var(--serif); font-size:14px; letter-spacing:.4em; text-indent:.4em; color:var(--ink-soft);}

/* ───── #5:满分10/10隐藏彩蛋——鎏金段位 + 硬核印 ───── */
.result-rank.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); }
.hardcore-mark{ display:inline-block; margin-top:7px; font-family:var(--serif); font-size:12px; letter-spacing:.3em; text-indent:.3em; color:var(--vermilion); border:1px solid var(--vermilion); border-radius:var(--r-sm); padding:2px 11px; transform:rotate(-3.5deg); }
.hardcore-mark[hidden]{ display:none; }

/* ───── #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;
  }
}