/* 牌阵翻牌与解读页：全屏网格，左侧牌阵、右侧纸张；背景为摆牌时同一张桌面的虚化版本。 */
.reading-room{--caption-h:3rem;--gap-y:1rem;--gap-x:clamp(.8rem,2.4vw,2.6rem);--pad-y:clamp(1rem,3.2vh,2.6rem);--close-h:2.9rem;position:relative;isolation:isolate;overflow:hidden;width:100vw;height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) min(60%,calc((100dvh - 2 * var(--pad-y) - var(--close-h)) * 839 / 896));gap:clamp(1rem,2.5vw,3rem);padding:var(--pad-y) clamp(1rem,2.6vw,3rem);background:#090e1c}
.reading-backdrop{position:absolute;left:50%;top:50%;width:max(100vw,177.7778dvh);height:max(56.25vw,100dvh);margin:calc(max(56.25vw,100dvh) / -2) 0 0 calc(max(100vw,177.7778dvh) / -2);object-fit:fill;z-index:-2;filter:blur(10px) brightness(.48) saturate(.85);transform-origin:center;pointer-events:none}
/* 左侧微亮、右侧压暗，牌阵更醒目，纸张边缘不与背景亮点打架。 */
.reading-room::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 45% 60% at 30% 52%,#2a2346 0,transparent 70%),linear-gradient(90deg,#090e1c33,#090e1c00 40%,#090e1c88)}

/* 左侧：标题、牌阵、提示三行。 */
.reading-table{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;min-width:0}
.reading-heading{text-align:center;padding-top:.6rem;text-shadow:0 2px 10px #000}
.reading-heading h1{margin:0;font-size:clamp(1.5rem,2.3vw,2.5rem);letter-spacing:.3em;color:#f0dfc5}
.reading-heading p{margin:.3em 0 0;font-size:clamp(.78rem,.9vw,.95rem);letter-spacing:.24em;color:#c5bed0}
.reading-hint{display:flex;justify-content:center;align-items:center;gap:1rem;min-height:2.6rem;margin:0;text-align:center;color:#c8bbd5;font-size:clamp(.8rem,.95vw,1rem);letter-spacing:.06em;text-shadow:0 1px 6px #000}
.reading-room:has(.is-next) .reading-hint{color:#f3d9a6}
.reading-room .ref-focus-back{position:static;font-size:inherit!important;padding:.35em 1em;border:1px solid #c3a87588;border-radius:2em;background:#1d1f33d9;color:#ecd8af}
.reading-room .ref-focus-back:hover{background:#3b3651}

/* 牌阵区：用自身尺寸推算牌高，按行列数自动缩放，牌始终保持2:3原比例。 */
.spread-stage{position:relative;container-type:size;min-height:0}
.spread-stage::before{content:'';position:absolute;left:50%;top:50%;width:min(92cqw,104cqh);aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px solid #d9bd8a26;box-shadow:inset 0 0 0 1.4rem #d9bd8a06,inset 0 0 0 calc(1.4rem + 1px) #d9bd8a1c,0 0 6rem #8f6fd01a;pointer-events:none}
.spread-layout{--rows:1;--cols:3;--card-h:min(calc((100cqh - var(--rows) * var(--caption-h) - (var(--rows) - 1) * var(--gap-y)) / var(--rows)),calc((100cqw - (var(--cols) - 1) * var(--gap-x)) / var(--cols) * 1.5),34rem);--card-w:calc(var(--card-h) * 2 / 3);position:relative;inset:auto;width:100%;height:100%;display:grid;place-content:center;grid-template-columns:repeat(var(--cols),var(--card-w));grid-template-rows:repeat(var(--rows),calc(var(--card-h) + var(--caption-h)));gap:var(--gap-y) var(--gap-x)}
.spread-love .spread-layout,.spread-choice .spread-layout{--rows:2}
.spread-triangle .slot-0{grid-area:1/1}.spread-triangle .slot-1{grid-area:1/2}.spread-triangle .slot-2{grid-area:1/3}
/* 爱情金字塔：关系现状居上，自己、对方、未来趋势在下。 */
.spread-love .slot-3{grid-area:1/2}.spread-love .slot-0{grid-area:2/1}.spread-love .slot-1{grid-area:2/2}.spread-love .slot-2{grid-area:2/3}
/* 二选一：当前处境居中，A、B 两条路分列左右，上为发展、下为结果。 */
.spread-choice .slot-0{grid-area:1/2/3/3;align-self:center}.spread-choice .slot-1{grid-area:1/1}.spread-choice .slot-2{grid-area:2/1}.spread-choice .slot-3{grid-area:1/3}.spread-choice .slot-4{grid-area:2/3}
.spread-slot{margin:0;display:flex;flex-direction:column;align-items:center;min-width:0}
.spread-slot figcaption{height:var(--caption-h);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.1em;width:calc(var(--card-w) + var(--gap-x));text-align:center;text-shadow:0 1px 6px #000;line-height:1.35;white-space:nowrap;overflow:hidden}
.spread-slot figcaption span{font-size:clamp(.72rem,.8vw,.88rem);letter-spacing:.12em;color:#cdb68d}
.spread-slot figcaption strong{font-family:var(--serif);font-weight:400;font-size:clamp(.85rem,1vw,1.08rem);letter-spacing:.06em;color:#f3e6cf;text-overflow:ellipsis;overflow:hidden;max-width:100%}

/* 牌面：覆盖旧画框里的绝对定位，交给网格排布。 */
.reading-room .ref-detail-card{position:relative;inset:auto;width:var(--card-w);height:var(--card-h);flex:none;border:1px solid #c6a977;border-radius:5%/3.4%;background:#25263b;box-shadow:0 1rem 2rem #000b,0 0 0 1px #0007;transition:filter .2s,translate .25s ease-out,box-shadow .25s}
.reading-room .ref-detail-card:not(:disabled):hover{filter:brightness(1.1);translate:0 -.35rem;box-shadow:0 1.4rem 2.4rem #000c,0 0 1.4rem #d7bc8655}
.reading-room .ref-detail-card.is-viewed{box-shadow:0 1rem 2rem #000b,0 0 0 1px #e6cf9f55}

/* 单卡聚焦：其余牌压暗，聚焦牌在牌阵中央放大，牌名一并显示。 */
.spread-stage::after{content:'';position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse 38% 48% at 50% 50%,#e8cf9c1f,transparent 70%);opacity:0;pointer-events:none;transition:opacity .3s}
.is-focusing .spread-stage::after{opacity:1;pointer-events:auto}
.is-focusing .spread-slot:not(.is-focused-slot){opacity:.16;filter:blur(2px) grayscale(.4);transition:opacity .3s,filter .3s}
.is-focusing .spread-stage::before{opacity:.35}
.is-focusing .spread-slot.is-focused-slot{--card-h:min(calc(100cqh - var(--caption-h) - 1rem),calc(80cqw * 1.5),40rem);--card-w:calc(var(--card-h) * 2 / 3);position:absolute;left:50%;top:50%;translate:-50% -50%;grid-area:auto;z-index:3}
.reading-room .ref-detail-card.is-focused{box-shadow:0 1.6rem 3rem #000d,0 0 2.4rem #e8cf9c55}
.is-focused-slot figcaption strong{font-size:clamp(1rem,1.25vw,1.3rem)}

/* 右侧纸张：美术素材（839×896，已去掉下方图标并上移分隔线）按原比例缩放；文字区按素材定位，字号随纸张宽度缩放。 */
.reading-side{display:grid;grid-template-rows:auto minmax(0,1fr);gap:.4rem;min-height:0;min-width:0}
/* 结束 / 返回放在右上角，符合关闭按钮的常见位置。 */
.reading-close{justify-self:end;z-index:4}
.paper-slot{container-type:size;min-height:0;min-width:0;display:grid;place-items:center}
.reading-paper{--paper-ink:#2b2442;--paper-soft:#6b6282;--paper-accent:#86622f;--paper-title:#40306a;position:relative;width:min(100cqw,calc(100cqh * 839 / 896));aspect-ratio:839/896;container-type:inline-size;background:url('/assets/reading-paper.webp') center/100% 100% no-repeat;filter:drop-shadow(0 1.4rem 2.4rem #000b);color:var(--paper-ink);font-family:'Long Cang',var(--serif);font-size:2.55cqw;-webkit-text-stroke:.012em currentColor}
.paper-meta{position:absolute;left:24.5%;top:7%;width:62%;margin:0;font-size:.82em;line-height:1.4;letter-spacing:.12em;color:var(--paper-soft)}
.paper-question{position:absolute;left:24.5%;top:14.4%;width:62%;max-height:7.6%;overflow:hidden;margin:0;font-size:1em;line-height:1.45;color:var(--paper-title);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.reading-paper h3,.reading-paper h4{font-family:inherit}
.paper-question::before{content:'「'}.paper-question::after{content:'」'}
/* 分隔线以上：目录（牌面 / 解读两行）；以下：当前小节的展示区。两区内容超出时各自滚动。 */
.paper-toc,.paper-scroll{position:absolute;left:10%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#86622f88 transparent;overflow-wrap:anywhere}
.paper-toc{top:22.6%;width:81%;height:20.2%;display:grid;grid-template-columns:auto 1fr;align-content:center;gap:.4em .8em}
.paper-scroll{top:46.2%;width:77%;height:43%;padding:.2em .8em 1.4em .2em;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 1.6em),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 1.6em),transparent);-webkit-touch-callout:default}
.paper-toc:focus-visible,.paper-scroll:focus-visible{outline:1px dashed #86622f88;outline-offset:2px}
.reading-paper ::selection{background:#b49adf66;color:#1e1834}
.toc-label{padding-top:.2em;font-size:.86em;letter-spacing:.3em;color:var(--paper-accent)}
.toc-row{display:flex;flex-wrap:wrap;gap:.2em .4em}
.toc-item{position:relative;display:inline-flex;align-items:baseline;gap:.25em;min-height:0;padding:.1em .5em;border:1px solid transparent;border-radius:.4em;background:none;color:var(--paper-ink);font:inherit;font-size:.98em;line-height:1.4;cursor:pointer;transition:background .2s,border-color .2s}
.toc-item small{font-size:.78em;color:var(--paper-soft)}
button.toc-item:hover{background:#86622f14;border-color:#86622f40}
.toc-item.is-active{background:#46356e14;border-color:#86622f88;color:var(--paper-title)}
.toc-item.is-active::before{content:'✦';position:absolute;left:50%;bottom:-.75em;translate:-50% 0;font-size:.5em;color:var(--paper-accent)}
.toc-item.is-pending{color:#9d93b0;cursor:default}
.toc-wait{padding:.15em .55em;font-size:.9em;color:var(--paper-soft)}
/* 展示区：一次只放一节，留出段首缩进与宽松行距。 */
.chapter-title{margin:0 0 .7em;font-size:1.22em;letter-spacing:.14em;color:var(--paper-title)}
.chapter-title::after{content:'';display:block;width:3.2em;height:1px;margin-top:.35em;background:linear-gradient(90deg,#86622f99,transparent)}
.paper-copy .chapter-text{margin:0;text-indent:2em;font-size:1.08em;line-height:1.95}
.chapter-steps{margin:0;padding:0;list-style:none;counter-reset:step}
.chapter-steps li{position:relative;counter-increment:step;margin-bottom:.7em;padding-left:2.1em;font-size:1.06em;line-height:1.85}
.chapter-steps li::before{content:counter(step);position:absolute;left:0;top:.35em;width:1.35em;height:1.35em;display:grid;place-items:center;border:1px solid #86622f;border-radius:50%;font-family:var(--serif);font-size:.78em;color:var(--paper-accent);-webkit-text-stroke:0}
.chapter-next{display:block;margin:1.2em 0 0 auto;padding:.2em .2em;min-height:0;border:0;background:none;color:var(--paper-accent);font:inherit;font-size:.92em;letter-spacing:.06em;cursor:pointer}
.chapter-next:hover{color:var(--paper-title);text-decoration:underline;text-underline-offset:.25em}
.paper-copy h3{margin:0 0 .4em;font-size:1.08em;letter-spacing:.1em;color:var(--paper-title)}
.paper-copy p{line-height:1.7;margin:0 0 .5em;white-space:pre-line}
.paper-copy .reading-title{margin:0 0 .35em;font-size:1.1em;letter-spacing:.14em;color:var(--paper-title)}
.paper-copy .reading-section + .reading-title{margin-top:.8em}
.paper-copy .reading-section{margin-bottom:.5em}
.paper-copy .reading-section h4{margin:0;font-family:inherit;font-weight:400;font-size:1em;letter-spacing:.06em;color:var(--paper-accent)}
.paper-copy .reading-section h4::before{content:'✦ ';width:auto;height:auto;rotate:none;background:none;font-size:.75em}
.paper-copy .reading-section p{margin:0;color:var(--paper-ink)}
.paper-copy .reading-steps li{margin-bottom:.4em;padding-left:1.8em;line-height:1.7;color:var(--paper-ink)}
.paper-copy .reading-steps li::before{top:.3em;border-color:#86622f;color:var(--paper-accent);font-family:var(--serif);-webkit-text-stroke:0}
.paper-copy .error{color:#7a2430;background:#b7787d22;border-color:#a0545c88;font-size:.9em;font-family:var(--serif);-webkit-text-stroke:0}
.paper-copy .secondary{font-size:.85em;padding:.4em 1em;min-height:0;font-family:var(--serif);-webkit-text-stroke:0}
.paper-copy .reading-orb{background:radial-gradient(circle at 38% 35%,#fff6e0 0,#9b7be0 32%,#5a3ea055 58%,transparent 70%)}
.paper-placeholder{margin:0;color:var(--paper-soft);font-size:.95em;letter-spacing:.06em}

/* 羽毛笔书写：字按书写进度逐个上墨，笔尖跟随最新的字轻轻摆动。 */
.reading-paper .ink-char{opacity:0}
.reading-paper .ink-char.is-inked{opacity:1}
.reading-paper:has(.ink-hint){cursor:pointer}
.ink-hint{position:absolute;left:9.5%;bottom:4%;z-index:6;font-size:.72em;letter-spacing:.08em;color:var(--paper-soft);pointer-events:none;animation:hint-breathe 1.8s ease-in-out infinite}
.ink-hint[data-tier]{color:var(--paper-accent)}
@keyframes hint-breathe{50%{opacity:.45}}
.ink-quill{position:absolute;left:0;top:0;z-index:6;width:2em;height:3.2em;margin:-3.1em 0 0 -.15em;pointer-events:none;transform-origin:8% 95%;filter:drop-shadow(0 .25em .2em #1d153a55);transition:opacity .15s;animation:quill-wobble .16s ease-in-out infinite alternate}
.ink-quill svg{display:block;width:100%;height:100%}
@keyframes quill-wobble{from{rotate:-5deg}to{rotate:4deg}}

/* 操作入口压在纸张底边，弹出面板在纸面上方展开。 */
.reading-room .ref-result-menu{position:absolute;left:31%;right:31%;bottom:2.4%;width:auto;margin:0;z-index:5;font-family:"Microsoft YaHei",sans-serif;font-size:max(13px,1.75cqw);-webkit-text-stroke:0}
.reading-room .ref-result-menu>summary{padding:.55em 2em .55em 1.2em}
.reading-room .ref-result-menu>summary strong{font-size:1.08em;letter-spacing:.12em}
.reading-room .ref-result-tools{left:-30%;right:-30%;transform:none;width:auto;max-height:min(60dvh,34rem);bottom:calc(100% + .6rem)}

/* 文字较多的窄屏暂以上下排布兜底，正式手机适配另行设计。 */
@media(prefers-reduced-motion:reduce){.reading-room .ref-detail-card,.spread-stage::after{transition:none}.ink-quill,.ink-hint{display:none}}