/* ==========================================================================
月见塔罗 · 视觉系统 v6「午夜书斋」
--------------------------------------------------------------------------
设计前提：这不是一个"网站"，是深夜翻开的一本书，桌上摊着一手牌。
所以整页只有三种材质，其余一切都是它们的边界：
墨夜 —— 背景。近黑，带月光锥、星尘、云气三层景深。
暖纸 —— 内容。有纤维、有压痕、有被灯照到的亮边。
烫金 —— 强调。只出现在标题第一笔、分隔线、选中态、主按钮、数字。
三条纪律：
1. 圆角收敛到 1–4px。这是"印刷品"和"互联网产品"的分界线。
2. 不用"1px 描边 + 均匀投影"的卡片语汇，改用材质本身的厚度与光。
3. 动效只做位移 8–14px、时长 500–900ms，快的东西一律删掉。
字体全部走本机栈，零外链（旧版 @import fonts.googleapis.com 在大陆不可达，
加载失败会静默回退，等于排版永远是另一个样子）。
========================================================================== */
/* ---------- 0. 材质常量 ---------- */
:root{
/* 墨夜（由深到浅） */
--void:#04030A;
--night:#0A0712;
--night-2:#120D1E;
--night-3:#1B1430;
--night-4:#271C3E;
/* 暖纸 */
--paper:#FBF7EF;
--paper-2:#F5EEE1;
--paper-3:#EAE0CE;
--paper-4:#D9CCB5;
/* 烫金 */
--gold:#C9A96C;
--gold-hi:#EBD5A2;
--gold-lo:#8C6E38;
--gold-line:rgba(201,169,108,.30);
--grad-gold:linear-gradient(100deg,#8C6E38 0%,#C9A96C 18%,#EBD5A2 34%,#FFF7DE 46%,#D8BC84 60%,#8C6E38 88%);
--grad-gold-flat:linear-gradient(168deg,#F0DFB7 0%,#D9BC84 48%,#C0A05F 100%);
/* 墨（纸面上的字） */
--ink:#171120;
--ink-2:#3E3448;
--ink-3:#6E6379;
--ink-4:#9C93A4;
/* 月色（夜里的字） */
--moon:#F3EEF8;
--moon-2:#C6BBD4;
--moon-3:#8B819A;
--moon-4:#5E5669;
/* 结构：印刷品的角 */
--r-xs:1px;
--r-sm:2px;
--r-md:3px;
--r-lg:4px;
/* 光：多层、低透明、大扩散 */
--lift-1:0 1px 1px rgba(0,0,0,.10), 0 3px 8px rgba(0,0,0,.07);
--lift-2:0 1px 1px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.09), 0 14px 30px rgba(0,0,0,.10);
--lift-3:0 2px 3px rgba(0,0,0,.14), 0 8px 18px rgba(0,0,0,.12), 0 30px 60px rgba(0,0,0,.16);
--lift-night:0 2px 6px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.55), 0 48px 90px rgba(0,0,0,.6);
/* 字 */
--serif:"Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC","SimSun","宋体",serif;
--sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑","Segoe UI",system-ui,sans-serif;
--latin:Georgia,"Times New Roman",Times,serif;
/* 节奏 */
--ease:cubic-bezier(.22,.61,.36,1);
--ease-expo:cubic-bezier(.16,1,.3,1);
--ease-soft:cubic-bezier(.4,0,.2,1);
--t1:200ms; --t2:420ms; --t3:680ms; --t4:920ms;
/* 首屏入场延迟 */
--stagger:70ms;
}
/* ---------- 1. 复位 ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;
min-height:100vh;
color:var(--moon);
font-family:var(--sans);
font-size:15px;
line-height:1.9;
letter-spacing:.012em;
background:var(--night);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
/* 夜空：三层景深 —— 底色 / 月晕 / 星尘 */
body::before{
content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
background:
/* 月晕：右上角一大团被云柔化的光 */
radial-gradient(58vw 58vw at 82% -12%, rgba(196,168,230,.16), rgba(196,168,230,0) 62%),
radial-gradient(34vw 34vw at 88% -6%, rgba(255,238,200,.10), rgba(255,238,200,0) 60%),
/* 左侧冷调补光 */
radial-gradient(46vw 40vw at 4% 8%, rgba(88,74,150,.20), rgba(88,74,150,0) 58%),
/* 桌面：底部一大块暖光，像台灯打在木头上 */
radial-gradient(90vw 40vh at 50% 108%, rgba(201,169,108,.13), rgba(201,169,108,0) 66%),
/* 天空本体 */
linear-gradient(178deg,var(--void) 0%,var(--night) 26%,var(--night-2) 62%,#0D0A17 100%);
}
/* 星尘：三组合成，不同密度与亮度，制造纵深 */
body::after{
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.85;
background-image:
radial-gradient(1.6px 1.6px at 18% 12%, rgba(255,250,240,.85), transparent 100%),
radial-gradient(1.2px 1.2px at 72% 8%, rgba(235,213,162,.9), transparent 100%),
radial-gradient(1px 1px at 42% 26%, rgba(235,232,255,.7), transparent 100%),
radial-gradient(1.4px 1.4px at 88% 34%, rgba(235,213,162,.65), transparent 100%),
radial-gradient(1px 1px at 8% 48%, rgba(235,232,255,.55), transparent 100%),
radial-gradient(1.1px 1.1px at 56% 62%, rgba(255,250,240,.5), transparent 100%),
radial-gradient(1.5px 1.5px at 30% 78%, rgba(235,213,162,.55), transparent 100%),
radial-gradient(1px 1px at 94% 88%, rgba(235,232,255,.45), transparent 100%),
radial-gradient(.9px .9px at 64% 44%, rgba(255,255,255,.4), transparent 100%),
radial-gradient(1.2px 1.2px at 12% 92%, rgba(255,250,240,.4), transparent 100%);
animation:star-drift 42s linear infinite alternate;
}
@keyframes star-drift{
from{transform:translate3d(0,0,0);opacity:.55}
to{transform:translate3d(-14px,-10px,0);opacity:.9}
}
/* 颗粒：整页覆一层极淡的噪点，消除大面积渐变的色带，并让画面"有胶片感" */
#grain{
position:fixed;inset:0;z-index:9999;pointer-events:none;
opacity:.05;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,header,footer{position:relative;z-index:1}
/* ---------- 2. 排版：真正的字号阶梯 ---------- */
h1,h2,h3,h4,h5{
margin:0;font-family:var(--serif);font-weight:400;
letter-spacing:.1em;line-height:1.55;
}
p{margin:0}
button,input,textarea,select{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
button,a{touch-action:manipulation}
a{color:inherit;text-decoration:none}
img{max-width:100%}
::selection{background:rgba(201,169,108,.30);color:var(--moon)}
::-moz-selection{background:rgba(201,169,108,.30);color:var(--moon)}
/* 滚条：一根细金线 */
*{scrollbar-width:thin;scrollbar-color:rgba(201,169,108,.35) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(201,169,108,.28);border-radius:0}
*::-webkit-scrollbar-thumb:hover{background:rgba(201,169,108,.5)}
/* 焦点：双环，金色的 */
:focus-visible{
outline:1px solid var(--gold-hi);
outline-offset:3px;
box-shadow:0 0 0 5px rgba(201,169,108,.14);
}
/* ---------- 3. 烫金 ---------- */
.gilt{
background:var(--grad-gold);
background-size:220% 100%;
-webkit-background-clip:text;background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
/* 一条两端渐隐的金线，代替所有
*/
.rule-gold{
height:1px;border:0;margin:0;
background:linear-gradient(90deg,transparent,rgba(201,169,108,.55) 22%,rgba(235,213,162,.9) 50%,rgba(201,169,108,.55) 78%,transparent);
}
/* ---------- 4. 页眉 ---------- */
header{
position:sticky;top:0;z-index:60;
height:78px;padding:0 clamp(16px,4.6vw,58px);
display:flex;align-items:center;gap:26px;
background:linear-gradient(180deg,rgba(6,4,12,.92) 0%,rgba(6,4,12,.66) 62%,rgba(6,4,12,0) 100%);
border-bottom:1px solid transparent;
transition:border-color var(--t2) var(--ease), background var(--t2) var(--ease);
}
header.is-scrolled{
background:rgba(6,4,12,.88);
backdrop-filter:saturate(150%) blur(18px);
-webkit-backdrop-filter:saturate(150%) blur(18px);
border-bottom-color:rgba(201,169,108,.16);
}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;font-family:var(--serif);font-size:16px;letter-spacing:.22em}
.brandmark{
width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
font-size:18px;line-height:1;color:var(--void);
background:radial-gradient(circle at 34% 30%,#FFF7DE,#E3C994 42%,#B4914F 100%);
box-shadow:0 0 0 1px rgba(235,213,162,.45), 0 0 24px rgba(201,169,108,.28), 0 2px 6px rgba(0,0,0,.5);
}
.brand small{
display:block;margin-top:4px;
font:400 8px/1 var(--latin);letter-spacing:.36em;text-transform:uppercase;
color:var(--gold);opacity:.8;
}
header nav{display:flex;gap:2px;margin-left:auto;font-size:13px}
header nav a{
position:relative;padding:9px 14px;color:var(--moon-3);
transition:color var(--t1) var(--ease);
letter-spacing:.08em;
}
header nav a::after{
content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px;
background:linear-gradient(90deg,transparent,var(--gold) 50%,transparent);
transform:scaleX(0);transform-origin:50% 50%;
transition:transform var(--t2) var(--ease-expo);
}
header nav a:hover{color:var(--moon)}
header nav a:hover::after{transform:scaleX(1)}
header nav a[aria-current="page"]{color:var(--gold-hi)}
header nav a[aria-current="page"]::after{transform:scaleX(1);opacity:.9}
.setting-link{
flex:0 0 auto;padding:8px 14px;font-size:11.5px;letter-spacing:.1em;
color:var(--gold);border:1px solid rgba(201,169,108,.28);border-radius:var(--r-sm);
transition:all var(--t1) var(--ease);
}
.setting-link:hover{color:var(--gold-hi);border-color:rgba(235,213,162,.55);background:rgba(201,169,108,.09)}
/* ---------- 5. 首屏：书封 ---------- */
.hero{
position:relative;
min-height:min(74vh,700px);
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;
padding:clamp(48px,8vh,104px) clamp(20px,5vw,40px) clamp(36px,6vh,64px);
overflow:hidden;
}
/* 月光锥：从右上角斜射下来的体积光 */
.hero::before{
content:"";position:absolute;top:-30%;right:-6%;
width:76vw;height:120vh;pointer-events:none;
background:conic-gradient(from 196deg at 86% 6%,
rgba(255,246,222,0) 0deg,
rgba(255,246,222,.05) 9deg,
rgba(226,208,255,.075) 15deg,
rgba(255,246,222,.045) 21deg,
rgba(255,246,222,0) 30deg);
filter:blur(26px);
mix-blend-mode:screen;
animation:moon-breathe 16s ease-in-out infinite;
}
@keyframes moon-breathe{50%{opacity:.62;transform:translateY(-10px) scale(1.03)}}
/* 月相：一个被阴影吃掉的圆 */
.moon-phase{
position:relative;width:58px;height:58px;border-radius:50%;
margin-bottom:clamp(24px,3.4vh,38px);
background:radial-gradient(circle at 36% 32%,#FFF9E9,#E8D4A8 46%,#B9985C 100%);
box-shadow:
0 0 42px rgba(235,213,162,.34),
0 0 110px rgba(201,169,108,.18),
0 0 0 1px rgba(255,247,222,.35) inset;
animation:moon-rise 1.6s var(--ease-expo) both;
}
.moon-phase::after{
content:"";position:absolute;inset:-15px;border-radius:50%;
border:1px solid rgba(201,169,108,.16);
border-right-color:rgba(201,169,108,.04);
animation:orbit 26s linear infinite;
}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes moon-rise{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
.hero-kicker{
font:400 10px/1 var(--latin);letter-spacing:.52em;text-transform:uppercase;
color:var(--gold);opacity:.9;
animation:rise var(--t4) var(--ease-expo) both;
animation-delay:calc(var(--stagger) * 1);
}
.hero h1{
text-wrap:balance;
margin:clamp(18px,2.6vh,30px) 0 0;
font-size:clamp(38px,6.4vw,78px);
line-height:1.22;letter-spacing:.1em;
color:var(--moon);
text-shadow:0 2px 40px rgba(150,120,200,.28);
animation:rise var(--t4) var(--ease-expo) both;
animation-delay:calc(var(--stagger) * 2);
}
.hero h1 .gilt{filter:drop-shadow(0 0 24px rgba(201,169,108,.28))}
.hero-lede{
text-wrap:pretty;
margin-top:clamp(20px,2.8vh,32px);
font-family:var(--serif);
font-size:clamp(13.5px,1.28vw,16.5px);
line-height:2.35;letter-spacing:.14em;
color:var(--moon-3);
animation:rise var(--t4) var(--ease-expo) both;
animation-delay:calc(var(--stagger) * 3);
}
.hero-lede em{font-style:normal;color:var(--moon-2)}
.hero-seal{
margin-top:clamp(26px,4vh,44px);
display:flex;align-items:center;gap:16px;
font:400 9px/1 var(--latin);letter-spacing:.4em;text-transform:uppercase;color:var(--moon-4);
animation:rise var(--t4) var(--ease-expo) both;
animation-delay:calc(var(--stagger) * 4);
}
.hero-seal i{display:block;width:clamp(28px,6vw,72px);height:1px;background:linear-gradient(90deg,transparent,var(--gold-line));font-style:normal}
.hero-seal i:last-child{background:linear-gradient(270deg,transparent,var(--gold-line))}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* ---------- 6. 版心 ---------- */
.section{
width:100%;max-width:1180px;margin:0 auto;
padding:clamp(52px,7vw,92px) clamp(18px,4.6vw,44px);
}
.section-first{padding-top:clamp(26px,3.4vw,48px)}
/* 牌组档案：一条几乎看不见的横线，把书封和正文接起来 */
.deck-meta{
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(10px,1.6vw,20px);
margin-bottom:clamp(22px,3vw,34px);
font:400 10px/1 var(--latin);letter-spacing:.28em;text-transform:uppercase;
color:var(--moon-4);
}
.deck-meta i{display:block;width:3px;height:3px;border-radius:50%;background:rgba(201,169,108,.5);font-style:normal}
.deck-meta span:nth-child(9){color:var(--gold);opacity:.8}
.section-top{
display:flex;justify-content:space-between;align-items:flex-end;gap:36px;
margin-bottom:clamp(26px,3.6vw,44px);
}
.eyebrow{
display:flex;align-items:center;gap:13px;
font:400 9.5px/1 var(--latin);letter-spacing:.36em;text-transform:uppercase;
color:var(--gold);opacity:.92;
}
.eyebrow span{width:34px;height:1px;flex:0 0 auto;background:linear-gradient(90deg,var(--gold),transparent)}
.section-top h2{
margin:20px 0 14px;
font-size:clamp(28px,3.6vw,44px);
letter-spacing:.1em;line-height:1.42;
color:var(--moon);
text-shadow:0 2px 30px rgba(150,120,200,.22);
}
.section-top h2 span{margin-left:.12em;color:var(--gold)}
.section-top p{
text-wrap:pretty;
font-size:13.5px;line-height:2.05;letter-spacing:.04em;
color:var(--moon-3);max-width:44ch;
}
/* ---------- 7. 按钮：烫金压印 ---------- */
.btn{
position:relative;
display:inline-flex;align-items:center;justify-content:center;gap:14px;
min-height:52px;padding:15px 28px;
border-radius:var(--r-sm);
font-size:14px;letter-spacing:.14em;white-space:nowrap;
transition:transform var(--t1) var(--ease), box-shadow var(--t2) var(--ease),
background var(--t2) var(--ease), color var(--t2) var(--ease),
border-color var(--t2) var(--ease);
}
.btn span{font-size:14px;opacity:.8;transition:transform var(--t2) var(--ease-expo)}
.btn:hover span{transform:translate(3px,-3px)}
.btn:active{transform:translateY(1px) scale(.995)}
/* 主按钮：金属箔面 + 顶部高光 + 底部压痕 */
.primary{
color:#1B1410;
font-weight:600;
background:var(--grad-gold-flat);
background-blend-mode:overlay;
box-shadow:
0 1px 0 rgba(255,255,255,.55) inset,
0 -2px 0 rgba(120,90,40,.35) inset,
0 0 0 1px rgba(235,213,162,.5),
0 6px 14px rgba(0,0,0,.42),
0 20px 44px rgba(0,0,0,.36);
}
.primary::before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(102deg,transparent 18%,rgba(255,255,255,.55) 34%,rgba(255,255,255,.05) 46%,transparent 62%);
opacity:0;transition:opacity var(--t2) var(--ease);
}
.primary:hover::before{opacity:1}
.primary:hover{
background:linear-gradient(168deg,#FCEFD2 0%,#E6CB94 46%,#CBA96B 100%);
box-shadow:
0 1px 0 rgba(255,255,255,.7) inset,
0 -2px 0 rgba(120,90,40,.3) inset,
0 0 0 1px rgba(255,247,222,.75),
0 8px 18px rgba(0,0,0,.46),
0 26px 60px rgba(201,169,108,.26);
transform:translateY(-1px);
}
.primary:disabled{opacity:.38;cursor:not-allowed;transform:none;box-shadow:0 0 0 1px rgba(235,213,162,.2);filter:grayscale(.4)}
/* 次按钮：只用一根金线勾边，不做填充 */
.outline{
color:var(--gold-hi);
border:1px solid rgba(201,169,108,.32);
background:linear-gradient(180deg,rgba(201,169,108,.05),rgba(201,169,108,.02));
}
.outline:hover{
color:#FFF7DE;border-color:rgba(235,213,162,.62);
background:linear-gradient(180deg,rgba(201,169,108,.14),rgba(201,169,108,.05));
transform:translateY(-1px);
}
/* 文字按钮：一条会生长出来的下划线 */
.quiet{
position:relative;padding:6px 1px;font-size:12.5px;letter-spacing:.1em;
color:var(--moon-3);transition:color var(--t1) var(--ease);
}
.quiet::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg,var(--gold),transparent);
transform:scaleX(0);transform-origin:0 50%;
transition:transform var(--t2) var(--ease-expo);
}
.quiet:hover{color:var(--gold-hi)}
.quiet:hover::after{transform:scaleX(1)}
/* ---------- 8. 纸：纤维、压痕、被灯照到的亮边 ---------- */
.paper{
position:relative;color:var(--ink);border-radius:var(--r-md);
background-color:var(--paper);
/* 三层纤维：横纹 / 竖纹 / 极淡的渗墨 */
background-image:
repeating-linear-gradient(0deg,rgba(120,96,60,.028) 0 1px,transparent 1px 3px),
repeating-linear-gradient(90deg,rgba(120,96,60,.018) 0 1px,transparent 1px 4px),
radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.9),rgba(255,255,255,0) 62%);
box-shadow:
0 1px 0 rgba(255,255,255,.85) inset,
0 0 0 1px rgba(201,169,108,.22),
var(--lift-2);
}
/* 纸的上沿被光擦过的一道亮边 */
.paper::before{
content:"";position:absolute;left:0;right:0;top:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 16%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.95) 84%,transparent);
pointer-events:none;
}
/* 极淡的噪点，让纸有颗粒 */
.paper::after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)' opacity='.28'/%3E%3C/svg%3E");
mix-blend-mode:multiply;
}
/* ---------- 9. 提问 ---------- */
.reading-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:stretch}
.reading-form{
position:relative;padding:clamp(22px,2.8vw,36px);border-radius:var(--r-md);
color:var(--ink);
background-color:var(--paper);
background-image:
repeating-linear-gradient(0deg,rgba(120,96,60,.028) 0 1px,transparent 1px 3px),
repeating-linear-gradient(90deg,rgba(120,96,60,.018) 0 1px,transparent 1px 4px),
radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.92),rgba(255,255,255,0) 60%);
box-shadow:
0 1px 0 rgba(255,255,255,.9) inset,
0 0 0 1px rgba(201,169,108,.22),
0 34px 64px -22px rgba(0,0,0,.78),
0 70px 130px -46px rgba(0,0,0,.62);
transform:rotate(-.26deg);
transform-origin:50% 0;
}
.reading-form::before{
content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 16%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.95) 84%,transparent);
}
.reading-form::after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='q'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23q)' opacity='.26'/%3E%3C/svg%3E");
mix-blend-mode:multiply;
}
.reading-form>*{position:relative;z-index:1}
.reading-form>label,.spread-label{
display:block;font-family:var(--serif);font-weight:600;
font-size:15px;letter-spacing:.14em;color:var(--ink);
}
.reading-form label small,.spread-label small{
margin-left:12px;
font:400 8.5px/1 var(--latin);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-4);
}
.reading-form textarea{
width:100%;margin-top:15px;height:112px;padding:18px 19px;
border:1px solid var(--paper-4);border-radius:var(--r-xs);
background:rgba(255,255,255,.58);
font-size:14.5px;line-height:1.95;letter-spacing:.03em;color:var(--ink);
resize:vertical;
box-shadow:inset 0 2px 4px rgba(60,40,20,.07), inset 0 1px 0 rgba(120,96,60,.09);
transition:border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease), background var(--t2) var(--ease);
}
.reading-form textarea::placeholder{color:#AEA3A6;letter-spacing:.04em}
.reading-form textarea:focus{
outline:none;background:#fff;
border-color:rgba(201,169,108,.85);
box-shadow:inset 0 2px 4px rgba(60,40,20,.05), 0 0 0 3px rgba(201,169,108,.14);
}
.field-foot{
display:flex;justify-content:space-between;gap:12px;margin-top:10px;
font-size:11.5px;letter-spacing:.03em;color:var(--ink-4);
}
.field-foot #count{font-family:var(--latin);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.question-help{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:17px;font-size:12px;color:var(--ink-4)}
.question-help button{
padding:6px 15px;border-radius:var(--r-xs);
font-size:12px;letter-spacing:.06em;color:#6E5478;
background:rgba(122,86,138,.07);
box-shadow:inset 0 0 0 1px rgba(122,86,138,.18);
transition:all var(--t1) var(--ease);
}
.question-help button:hover{
background:rgba(122,86,138,.14);color:#4E3459;
box-shadow:inset 0 0 0 1px rgba(122,86,138,.4);transform:translateY(-1px);
}
/* ---------- 10. 牌阵卡：像书页里的一则条目 ---------- */
.spread-label{margin-top:34px}
.spreads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:14px;background:rgba(120,96,60,.16);border:1px solid rgba(120,96,60,.16)}
.spread{
position:relative;text-align:left;
padding:17px 15px 15px;
background:linear-gradient(180deg,#FFFCF6,#F7F1E6);
color:var(--ink-2);
transition:all var(--t2) var(--ease);
}
.spread:hover{background:#FFFDF9;color:var(--ink)}
.spread:hover .spread-icon{color:var(--gold)}
/* 牌阵布局示意：一眼看清这个牌阵长什么样 */
.spread-map{
display:block;width:100%;max-width:78px;height:32px;margin-bottom:14px;
color:rgba(120,96,60,.26);
transition:color var(--t2) var(--ease), transform var(--t2) var(--ease-expo);
}
.spread-map svg{display:block;width:100%;height:100%}
.spread-map rect{fill:currentColor}
.spread:hover .spread-map{color:rgba(120,96,60,.5);transform:translateY(-1px)}
.spread.active .spread-map{color:rgba(140,110,52,.82)}
.spread-icon{
display:block;margin-bottom:12px;
font:400 17px/1 var(--latin);color:#B49A6E;
transition:color var(--t2) var(--ease);
}
.spread b{display:block;font-family:var(--serif);font-weight:600;font-size:14px;letter-spacing:.1em;color:var(--ink)}
.spread small{display:block;margin-top:7px;font-size:11.5px;line-height:1.65;color:var(--ink-4);letter-spacing:.02em}
.spread i{position:absolute;right:13px;top:14px;font:400 9.5px/1 var(--latin);font-style:normal;letter-spacing:.12em;color:var(--ink-4)}
.spread.active{background:linear-gradient(180deg,#FFF8E9,#F3E7CE)}
.spread.active::after{
content:"";position:absolute;inset:0;pointer-events:none;
box-shadow:inset 0 0 0 1.5px rgba(201,169,108,.85), inset 0 0 26px rgba(201,169,108,.14);
}
.spread.active .spread-icon{color:var(--gold-lo)}
.spread.active i{color:var(--gold-lo)}
.spread-help{
margin-top:14px;padding:13px 16px;
font-size:12px;line-height:1.85;letter-spacing:.02em;color:var(--ink-3);
background:rgba(120,96,60,.06);
border-left:2px solid rgba(120,96,60,.35);
}
.options{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:24px 0 20px;font-size:13px;color:var(--ink-2)}
.options input{width:15px;height:15px;accent-color:var(--gold-lo);vertical-align:middle}
.options span{font-size:11.5px;color:var(--ink-4)}
.draw-btn{width:100%;min-height:56px;font-size:14.5px;letter-spacing:.2em}
.gentle{margin-top:14px;text-align:center;font-size:11.5px;letter-spacing:.09em;color:var(--ink-4)}
/* ---------- 11. 右侧：一张立在夜里的牌 ---------- */
.reading-aside{
position:relative;overflow:hidden;border-radius:var(--r-md);
background:
radial-gradient(70% 50% at 50% 34%,rgba(168,132,214,.22),transparent 68%),
linear-gradient(168deg,#231A38 0%,#16101F 52%,#0C0913 100%);
box-shadow:
0 1px 0 rgba(235,213,162,.16) inset,
0 0 0 1px rgba(201,169,108,.20),
var(--lift-night);
}
.aside-inner{position:relative;height:100%;min-height:436px;padding:26px 22px 28px;display:flex;flex-direction:column;align-items:center}
.aside-caption{
align-self:flex-start;
font:400 8.5px/1.9 var(--latin);letter-spacing:.3em;text-transform:uppercase;color:var(--moon-4);
}
.aside-caption span{color:var(--gold)}
.aside-orbit{
position:absolute;top:92px;left:50%;transform:translateX(-50%);
width:214px;height:214px;border-radius:50%;
border:1px solid rgba(201,169,108,.15);
}
.aside-orbit::after{content:"";position:absolute;inset:-20px;border-radius:50%;border:1px solid rgba(201,169,108,.06)}
/* 一枚被阴影咬掉一块的月 */
.aside-orbit::before{
content:"";position:absolute;left:50%;top:-5px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;
background:radial-gradient(circle at 34% 30%,#FFF9E9,#D9BC84);
box-shadow:0 0 16px rgba(235,213,162,.7);
}
.aside-cards{position:relative;width:100%;flex:1 1 auto;min-height:214px;display:flex;align-items:center;justify-content:center}
.aside-cards img{top:auto}
.aside-cards img{
position:absolute;left:50%;top:24px;width:90px;height:155px;object-fit:cover;
border-radius:2px;
box-shadow:
0 0 0 1px rgba(235,213,162,.42),
0 0 0 4px rgba(251,247,239,.94),
0 12px 26px rgba(0,0,0,.62),
0 30px 60px rgba(0,0,0,.5);
transition:transform var(--t3) var(--ease-expo);
}
.aside-cards img:nth-child(1){transform:translateX(-102px) rotate(-13deg)}
.aside-cards img:nth-child(2){transform:translate(-50%,-11px);z-index:2}
.aside-cards img:nth-child(3){transform:translateX(12px) rotate(13deg)}
.reading-aside:hover .aside-cards img:nth-child(1){transform:translateX(-112px) rotate(-16deg)}
.reading-aside:hover .aside-cards img:nth-child(3){transform:translateX(22px) rotate(16deg)}
.aside-copy{margin-top:auto;padding-top:26px;text-align:center}
.aside-copy span{font:400 8.5px/1 var(--latin);letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.aside-copy p{margin-top:17px;font-family:var(--serif);font-size:18.5px;line-height:2;letter-spacing:.12em;color:var(--moon)}
.aside-copy em{font-style:normal;color:var(--gold-hi)}
/* ---------- 12. 牌背：一块被压过金纹的紫绒 ---------- */
.back-inner{
position:relative;display:flex;width:100%;height:100%;
flex-direction:column;align-items:center;justify-content:center;
border-radius:2px;color:var(--gold-hi);
background:
radial-gradient(circle at 50% 40%,rgba(178,142,226,.38),transparent 56%),
linear-gradient(162deg,#4B3765 0%,#2E2146 44%,#1A1330 100%);
box-shadow:
inset 0 0 0 1px rgba(235,213,162,.40),
inset 0 1px 0 rgba(255,255,255,.16),
inset 0 0 26px rgba(0,0,0,.55);
}
.back-inner::before{
content:"";position:absolute;inset:5px;border-radius:1px;
border:1px solid rgba(235,213,162,.26);
}
/* 中央的菱形金纹 */
.back-inner::after{
content:"";position:absolute;inset:5px;
background:
linear-gradient(45deg,transparent 48.6%,rgba(235,213,162,.16) 49.4%,rgba(235,213,162,.16) 50.6%,transparent 51.4%),
linear-gradient(-45deg,transparent 48.6%,rgba(235,213,162,.16) 49.4%,rgba(235,213,162,.16) 50.6%,transparent 51.4%),
radial-gradient(circle at 50% 50%,rgba(235,213,162,.14) 0 26%,transparent 26.5%);
pointer-events:none;
}
.back-inner i{position:relative;z-index:1;font:400 38px/1 var(--latin);font-style:normal;transform:rotate(-18deg);text-shadow:0 0 18px rgba(235,213,162,.5)}
.back-inner span{position:relative;z-index:1;font:400 8.5px/1 var(--latin);letter-spacing:.28em;opacity:.62}
.back-inner span:first-child{margin-bottom:11px}
.back-inner span:last-child{margin-top:11px}
/* ---------- 13. 真实牌面：一张能立起来的印刷品 ---------- */
.real-art{
position:relative;display:block;overflow:hidden;
aspect-ratio:111/192;border-radius:2px;background:#F2EADA;
box-shadow:
0 1px 0 rgba(255,255,255,.9) inset,
0 0 0 1px rgba(201,169,108,.5),
0 0 0 4px rgba(251,247,239,.96),
0 2px 4px rgba(0,0,0,.2),
0 10px 22px rgba(0,0,0,.26),
0 26px 54px rgba(0,0,0,.3);
}
.real-art img{display:block;width:100%;height:100%;object-fit:cover}
.real-art picture{display:block;width:100%;height:100%}
.real-art img.reversed{transform:rotate(180deg)}
/* 印刷网点：让牌图看起来是印在纸上的，不是贴上去的 */
.real-art::after{
content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Ccircle cx='1' cy='1' r='.55' fill='%23000'/%3E%3C/svg%3E");
mix-blend-mode:multiply;
}
.mini-card .real-art{
box-shadow:
0 0 0 1px rgba(201,169,108,.42),
0 0 0 3px rgba(251,247,239,.94),
0 6px 16px rgba(0,0,0,.4);
}
/* ---------- 14. 仪式：一块被灯照到的暗桌 ---------- */
#ritual{margin-top:24px;scroll-margin-top:26px}
.ritual-shell{
position:relative;overflow:hidden;border-radius:var(--r-md);
padding:clamp(24px,3.2vw,42px) clamp(20px,3.2vw,46px) 26px;
background:
radial-gradient(80% 60% at 78% 4%,rgba(150,116,200,.16),transparent 66%),
radial-gradient(60% 50% at 12% 96%,rgba(201,169,108,.09),transparent 70%),
linear-gradient(168deg,#1E1732 0%,#141020 52%,#0A0812 100%);
box-shadow:
0 1px 0 rgba(235,213,162,.14) inset,
0 0 0 1px rgba(201,169,108,.18),
var(--lift-night);
color:var(--moon);
}
/* 角落一枚极大的、被压暗的星座符号 */
.ritual-shell::before{
content:"✧";position:absolute;right:-30px;top:-64px;pointer-events:none;
font:400 280px/1 var(--latin);color:rgba(235,213,162,.045);
}
.ritual-heading{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.ritual-kicker{font:400 9px/1 var(--latin);letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.ritual-heading h3{
margin:16px 0 10px;
font-size:clamp(21px,2.4vw,28px);letter-spacing:.14em;color:var(--moon);
}
.ritual-heading p{max-width:52ch;font-size:12.5px;line-height:1.95;letter-spacing:.03em;color:var(--moon-3)}
.ritual-close{
flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;
border-radius:50%;font-size:18px;line-height:1;color:var(--moon-3);
transition:all var(--t1) var(--ease);
}
.ritual-close:hover{color:var(--moon);background:rgba(243,238,248,.07);transform:rotate(90deg)}
.ritual-steps{
display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;padding:15px 0;
border-top:1px solid rgba(201,169,108,.12);
border-bottom:1px solid rgba(201,169,108,.12);
}
.ritual-steps span{
display:inline-flex;align-items:center;gap:8px;
padding:5px 13px;font-size:11.5px;letter-spacing:.1em;color:var(--moon-4);
transition:all var(--t2) var(--ease);
}
.ritual-steps i{font:400 9px/1 var(--latin);font-style:normal;letter-spacing:.1em;opacity:.7}
.ritual-steps .now{
color:#1B1410;font-weight:600;
background:var(--grad-gold-flat);
box-shadow:0 0 0 1px rgba(235,213,162,.6), 0 4px 14px rgba(201,169,108,.28);
}
.ritual-steps .now i{opacity:.9}
.ritual-steps .done{color:var(--gold);background:rgba(201,169,108,.08);box-shadow:inset 0 0 0 1px rgba(201,169,108,.2)}
.ritual-body{position:relative;min-height:252px;padding:32px 0 8px;text-align:center}
.ritual-question{
max-width:640px;margin:0 auto;
font-family:var(--serif);font-size:15.5px;line-height:2.05;letter-spacing:.1em;
color:var(--moon-2);overflow-wrap:anywhere;
}
.ritual-hint{margin:20px auto 0;max-width:46ch;font-size:11.5px;line-height:1.95;color:var(--moon-4)}
.ritual-bottom{
margin-top:26px;padding-top:20px;text-align:center;
border-top:1px solid rgba(201,169,108,.12);
font-size:10.5px;letter-spacing:.14em;color:var(--moon-4);
}
.ritual-primary{
min-width:216px;border-radius:var(--r-sm);
color:#1B1410;font-weight:600;letter-spacing:.16em;
background:var(--grad-gold-flat);
box-shadow:
0 1px 0 rgba(255,255,255,.55) inset,
0 -2px 0 rgba(120,90,40,.32) inset,
0 0 0 1px rgba(235,213,162,.5),
0 8px 18px rgba(0,0,0,.5);
}
.ritual-primary:hover{background:linear-gradient(168deg,#FCEFD2,#E6CB94 46%,#CBA96B);transform:translateY(-1px)}
.ritual-primary:disabled{opacity:.34;cursor:not-allowed;transform:none;box-shadow:0 0 0 1px rgba(235,213,162,.18);filter:grayscale(.5)}
.ritual-quiet{
display:inline-block;margin-top:22px;padding:6px 2px;
font-size:11.5px;letter-spacing:.08em;color:var(--moon-3);
border-bottom:1px solid rgba(201,169,108,.28);transition:color var(--t1) var(--ease);
}
.ritual-quiet:hover{color:var(--gold-hi)}
/* ---------- 15. 洗牌：16 张牌背叠成一副 ---------- */
.shuffle-stack{position:relative;width:340px;height:216px;margin:4px auto 22px}
.riffle-card{
position:absolute;left:50%;top:20px;width:104px;height:168px;margin-left:-52px;
filter:drop-shadow(0 10px 22px rgba(0,0,0,.62));
will-change:transform;
}
.riffle-card .back-inner{width:100%;height:100%}
/* 副牌堆底下的一层垫影，让整摞牌"坐"在桌上 */
.shuffle-stack::after{
content:"";position:absolute;left:50%;bottom:-6px;width:210px;height:20px;margin-left:-105px;
background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.55),transparent 70%);
filter:blur(6px);
}
/* ---------- 16. 切牌：三叠有厚度的牌 ---------- */
.cut-piles{display:flex;justify-content:center;gap:clamp(26px,6vw,66px);margin:14px 0 26px}
.cut-pile{
display:flex;flex-direction:column;align-items:center;gap:16px;
font-size:11.5px;letter-spacing:.1em;color:var(--moon-3);
transition:color var(--t2) var(--ease);
}
.pile-stack{
position:relative;display:block;width:98px;height:158px;border-radius:2px;
box-shadow:
0 3px 0 -1px rgba(235,213,162,.20), 0 3px 0 0 #2C2145,
0 6px 0 -1px rgba(235,213,162,.14), 0 6px 0 0 #241B39,
0 9px 0 -1px rgba(235,213,162,.09), 0 9px 0 0 #1C152E,
0 22px 38px rgba(0,0,0,.6);
transition:transform var(--t2) var(--ease-expo), box-shadow var(--t2) var(--ease);
}
.cut-pile:hover .pile-stack,.cut-pile:focus-visible .pile-stack{transform:translateY(-13px)}
.cut-pile:hover{color:var(--gold-hi)}
.cut-piles.is-cut .cut-pile:not(.cut-selected){opacity:.2;transform:translateY(15px);transition:all var(--t3) var(--ease)}
.cut-piles.is-cut .cut-selected .pile-stack{
transform:translateY(-24px) scale(1.05);
box-shadow:
0 0 0 1px rgba(235,213,162,.75),
0 0 38px rgba(201,169,108,.4),
0 30px 50px rgba(0,0,0,.62);
}
/* ---------- 17. 选牌：78 张牌背摊在桌上 ---------- */
.selection-status{
display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
margin-bottom:15px;font-size:11.5px;letter-spacing:.08em;color:var(--moon-3);
}
.selection-status span:first-child{color:var(--gold-hi);font-weight:600;letter-spacing:.1em}
.picked-strip{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.picked-item{
display:inline-flex;align-items:center;gap:8px;
padding:5px 12px 5px 5px;border-radius:var(--r-xs);
font-size:10.5px;letter-spacing:.06em;color:var(--moon-4);
border:1px dashed rgba(201,169,108,.18);
transition:all var(--t2) var(--ease);
}
.picked-item i{
width:16px;height:16px;display:flex;align-items:center;justify-content:center;
font:500 9px/1 var(--latin);font-style:normal;color:var(--moon-4);
background:rgba(243,238,248,.06);
}
.picked-item em{font-style:normal}
.picked-item.on{
border-style:solid;border-color:rgba(201,169,108,.5);
background:rgba(201,169,108,.1);color:var(--gold-hi);
}
.picked-item.on i{background:var(--grad-gold-flat);color:#1B1410;font-weight:700}
.card-grid{
display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:8px;
margin:0 auto;padding:8px 2px 12px;
}
.pick-card{
position:relative;aspect-ratio:2/3;min-width:0;padding:0;border-radius:2px;
filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));
transition:transform var(--t2) var(--ease-expo), filter var(--t2) var(--ease);
animation:deal var(--t3) var(--ease-expo) backwards;
animation-delay:calc(var(--i,0) * 10ms);
}
@keyframes deal{
from{
opacity:0;
transform:
translate(calc((6 - var(--col,0)) * 19px), calc((var(--row,0) - .5) * 24px + 22px))
scale(.46) rotate(calc((6 - var(--col,0)) * 1.6deg));
}
62%{opacity:1}
to{opacity:1;transform:none}
}
.pick-card .back-inner::before{inset:3px}
.pick-card .back-inner i{font-size:14px}
.pick-card .back-inner span{font-size:4.5px;letter-spacing:.18em}
.pick-card:hover,.pick-card:focus-visible{
transform:translateY(-10px) scale(1.07);z-index:3;
filter:drop-shadow(0 12px 20px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(235,213,162,.28));
}
.pick-card.chosen{
transform:translateY(-14px) scale(1.09);z-index:4;
filter:drop-shadow(0 0 14px rgba(235,213,162,.7)) drop-shadow(0 14px 22px rgba(0,0,0,.55));
}
.pick-card.chosen .back-inner{box-shadow:inset 0 0 0 1.5px rgba(235,213,162,.95), inset 0 0 26px rgba(235,213,162,.28)}
.pick-num{
position:absolute;right:-5px;top:-6px;width:18px;height:18px;
display:flex;align-items:center;justify-content:center;
background:var(--grad-gold-flat);color:#1B1410;
font:600 10px/1 var(--latin);
box-shadow:0 2px 8px rgba(0,0,0,.55);
}
.card-pagination{
display:flex;align-items:center;justify-content:center;gap:16px;
margin-top:18px;font-size:11.5px;letter-spacing:.08em;color:var(--moon-3);
}
.card-pagination button{
padding:7px 16px;border-radius:var(--r-xs);font-size:11.5px;color:var(--moon-2);
background:rgba(243,238,248,.045);box-shadow:inset 0 0 0 1px rgba(201,169,108,.18);
transition:all var(--t1) var(--ease);
}
.card-pagination button:hover:not(:disabled){background:rgba(201,169,108,.13);color:var(--gold-hi)}
.card-pagination button:disabled{opacity:.28;cursor:not-allowed}
/* ---------- 18. 翻牌 ---------- */
.reveal-grid{display:flex;justify-content:center;gap:clamp(16px,3vw,42px);flex-wrap:wrap;margin:6px auto 26px}
.reveal-slot{
display:flex;flex-direction:column;align-items:center;gap:14px;
min-width:134px;font-size:11.5px;letter-spacing:.1em;color:var(--moon-3);
}
.reveal-slot b{font:400 13.5px var(--serif);letter-spacing:.1em;color:var(--moon-2);text-align:center}
.reveal-card{
position:relative;width:134px;height:232px;padding:0;border-radius:2px;
perspective:1000px;transition:transform var(--t2) var(--ease-expo);
}
.reveal-card .back-inner{position:absolute;inset:0}
.reveal-card:not(:disabled){animation:await-flip 2.8s ease-in-out infinite}
.reveal-card:not(:disabled):hover{transform:translateY(-9px)}
.reveal-card:disabled{opacity:.5}
.reveal-card.is-open{animation:flip-open var(--t3) var(--ease-expo) both;opacity:1;box-shadow:none}
.reveal-card.is-open::after{
content:"";position:absolute;inset:0;pointer-events:none;border-radius:2px;
background:linear-gradient(104deg,transparent 26%,rgba(255,247,222,.62) 44%,rgba(255,247,222,.1) 52%,transparent 68%);
animation:sweep 980ms var(--ease-expo) 90ms both;
}
@keyframes sweep{from{transform:translateX(-130%);opacity:0}38%{opacity:1}to{transform:translateX(130%);opacity:0}}
.reveal-card .real-art{width:100%;height:100%;aspect-ratio:auto;border-radius:2px}
.reveal-card .real-art img{object-fit:cover}
@keyframes await-flip{
0%,100%{box-shadow:0 0 0 1px rgba(235,213,162,.5), 0 0 18px rgba(201,169,108,.16)}
50%{box-shadow:0 0 0 2px rgba(235,213,162,.95), 0 0 36px rgba(201,169,108,.42)}
}
@keyframes flip-open{
0%{transform:rotateY(-98deg) scale(.93);opacity:.2}
58%{transform:rotateY(7deg) scale(1.015);opacity:1}
100%{transform:rotateY(0) scale(1);opacity:1}
}
/* ---------- 19. 结果：夜色底，纸上字 ---------- */
.result{
margin-top:24px;border-radius:var(--r-md);
padding:clamp(22px,3vw,40px);
background:
radial-gradient(70% 40% at 84% 0%,rgba(150,116,200,.14),transparent 64%),
linear-gradient(168deg,#1C1530 0%,#120F1D 54%,#09070F 100%);
box-shadow:
0 1px 0 rgba(235,213,162,.12) inset,
0 0 0 1px rgba(201,169,108,.18),
var(--lift-night);
color:var(--moon);
}
.result-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.result-head h3{margin-top:16px;font-size:clamp(23px,2.7vw,32px);letter-spacing:.13em;color:var(--moon)}
.result-sub{
margin-top:12px;padding-bottom:21px;
font-size:13px;line-height:1.95;letter-spacing:.05em;color:var(--moon-3);
border-bottom:1px solid rgba(201,169,108,.14);overflow-wrap:anywhere;
}
.result-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 18px}
.result-tabs button{
padding:9px 16px;border-radius:var(--r-xs);text-align:left;line-height:1.55;
font-size:11.5px;letter-spacing:.08em;color:var(--moon-3);
background:rgba(243,238,248,.04);box-shadow:inset 0 0 0 1px rgba(201,169,108,.14);
transition:all var(--t2) var(--ease);
}
.result-tabs button span{display:block;margin-top:4px;font:400 12.5px var(--serif);letter-spacing:.08em;color:var(--moon-2)}
.result-tabs button:hover{background:rgba(243,238,248,.085)}
.result-tabs button.active{
background:linear-gradient(168deg,rgba(201,169,108,.18),rgba(201,169,108,.05));
box-shadow:inset 0 0 0 1.5px rgba(201,169,108,.8);
color:var(--gold-hi);
}
.result-tabs button.active span{color:var(--moon)}
.result-cards{display:block}
.result-card{
display:grid;grid-template-columns:206px minmax(0,1fr);
gap:clamp(20px,3vw,36px);align-items:start;
padding:clamp(18px,2.4vw,26px);border-radius:var(--r-md);
color:var(--ink);
background-color:var(--paper);
background-image:
repeating-linear-gradient(0deg,rgba(120,96,60,.026) 0 1px,transparent 1px 3px),
radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.9),rgba(255,255,255,0) 60%);
box-shadow:
0 1px 0 rgba(255,255,255,.85) inset,
0 0 0 1px rgba(201,169,108,.26),
var(--lift-2);
}
.result-position{
display:inline-flex;align-self:flex-start;margin-bottom:14px;padding:4px 12px;
font-size:10.5px;letter-spacing:.2em;color:var(--gold-lo);
background:rgba(201,169,108,.11);
box-shadow:inset 0 0 0 1px rgba(201,169,108,.32);
}
.result-card>.real-art{grid-row:1/span 9;grid-column:1;width:100%;height:auto;margin:0}
.result-card>*:not(.real-art){grid-column:2}
.result-card h4{margin:0 0 13px;font-size:19px;letter-spacing:.12em;color:var(--ink)}
.result-card p{margin:9px 0;font-size:13px;line-height:2.05;letter-spacing:.02em;color:var(--ink-2)}
.result-card p strong{
display:block;margin-bottom:4px;
font:600 9.5px/1 var(--latin);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-lo);
}
.card-meaning{padding-bottom:13px;border-bottom:1px solid rgba(60,40,20,.1)}
.card-info{
align-self:flex-start;margin-top:auto;padding:13px 0 0;
font-size:11.5px;letter-spacing:.06em;color:#6E5478;
transition:color var(--t1) var(--ease);
}
.card-info:hover{color:#3E2A48}
.local-reflection{
margin-top:18px;border-radius:var(--r-md);overflow:hidden;color:var(--ink);
background-color:var(--paper);
background-image:
repeating-linear-gradient(0deg,rgba(120,96,60,.026) 0 1px,transparent 1px 3px),
radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.9),rgba(255,255,255,0) 60%);
box-shadow:
0 1px 0 rgba(255,255,255,.85) inset,
0 0 0 1px rgba(201,169,108,.24),
var(--lift-1);
}
.local-reflection summary{
display:flex;align-items:center;justify-content:space-between;
padding:18px 22px;cursor:pointer;list-style:none;
font-family:var(--serif);font-size:14.5px;letter-spacing:.1em;color:var(--ink);
}
.local-reflection summary::-webkit-details-marker{display:none}
.local-reflection summary span{font-size:15px;color:var(--gold-lo);transition:transform var(--t2) var(--ease-expo)}
.local-reflection[open] summary span{transform:rotate(135deg)}
.local-reflection>div,.local-reflection>h4,.local-reflection>p,.local-reflection>small{padding:0 22px}
.local-reflection>h4{margin:8px 0 12px;font-size:16.5px;letter-spacing:.09em}
.local-reflection>p{margin:11px 0;font-size:13px;line-height:2.05;color:var(--ink-2)}
.local-reflection>small{display:block;padding-bottom:22px;margin-top:14px;font-size:11px;line-height:1.9;color:var(--ink-4)}
.result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.result-actions .btn{flex:1 1 180px;min-width:0}
.service-note{margin-top:14px;font-size:11.5px;line-height:1.8;letter-spacing:.04em;color:var(--moon-4)}
.storage-note{margin-top:13px;font-size:10.5px;line-height:1.9;letter-spacing:.02em;color:var(--moon-4)}
/* ---------- 20. AI 对话 ---------- */
.conversation{
margin-top:20px;border-radius:var(--r-md);overflow:hidden;color:var(--ink);
background-color:var(--paper);
background-image:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.9),rgba(255,255,255,0) 58%);
box-shadow:
0 1px 0 rgba(255,255,255,.85) inset,
0 0 0 1px rgba(201,169,108,.26),
var(--lift-2);
}
.chat-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:21px 22px 0}
.chat-head span{font:400 9px/1 var(--latin);letter-spacing:.28em;text-transform:uppercase;color:var(--gold-lo)}
.chat-head h4{margin:9px 0 0;font-size:18px;letter-spacing:.1em;color:var(--ink)}
.chat-head button{font-size:11.5px;letter-spacing:.06em;color:var(--ink-4);padding:5px 0;transition:color var(--t1) var(--ease)}
.chat-head button:hover{color:#6E5478}
.chat-note{padding:10px 22px 0;font-size:11px;line-height:1.8;color:var(--ink-4)}
.chat-messages{max-height:410px;overflow:auto;padding:17px 22px;display:flex;flex-direction:column;gap:12px}
.chat-bubble{
max-width:88%;padding:14px 16px;
background:#FFFDF9;
box-shadow:inset 0 0 0 1px rgba(60,40,20,.09), var(--lift-1);
}
.chat-bubble.user{
align-self:flex-end;
background:linear-gradient(168deg,#F3EAF1,#EADCE7);
box-shadow:inset 0 0 0 1px rgba(122,86,138,.16), var(--lift-1);
}
.chat-bubble small{display:block;margin-bottom:6px;font:400 8.5px/1 var(--latin);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lo)}
.chat-bubble.user small{color:#8C7186}
.chat-bubble p{white-space:pre-wrap;font-size:13px;line-height:2;letter-spacing:.02em;color:var(--ink-2)}
.chat-bubble h5{margin:4px 0 10px;font-size:15px;color:var(--ink);line-height:1.6}
.chat-bubble p+p{margin-top:12px}
.grounded-reading{min-width:0;overflow-wrap:anywhere}
.chat-bubble.assistant:has(.grounded-reading){width:100%;max-width:100%;padding:0;background:transparent;box-shadow:none}
.grounded-reading .reading-boundary{font-size:11px;line-height:1.8;color:var(--ink-3);border-left:2px solid var(--gold-lo);padding-left:10px;margin:0 0 14px}
.reading-card-list{margin:12px 0;border-top:1px solid var(--gold-line)}
.reading-card,.reading-evidence{border-bottom:1px solid var(--gold-line)}
.reading-card summary,.reading-evidence summary{cursor:pointer;min-height:48px;padding:12px 0;font-size:12px;line-height:1.7;color:var(--ink-2);overflow-wrap:anywhere}
.reading-card summary{display:flex;justify-content:space-between;gap:12px;list-style:none}
.reading-card summary::-webkit-details-marker{display:none}
.reading-card summary b{display:block;font-size:11px;font-weight:400;color:var(--ink-3)}
.reading-card summary span span{font-size:14px}
.reading-expand{align-self:center;font-size:18px;color:var(--gold-lo);transition:transform .2s ease}
.reading-card[open] .reading-expand{transform:rotate(45deg)}
.reading-card-body{padding:0 0 14px}
.grounded-reading strong{display:block;font-size:11px;font-weight:500;color:var(--gold-lo);margin-bottom:4px}
.grounded-reading .reading-basis,.grounded-reading .reading-optional{font-size:11px;line-height:1.9;color:var(--ink-3)}
.reading-evidence p:last-child{padding-bottom:12px}
.reading-next{margin:16px 0 10px;padding:12px;border:1px solid var(--gold-line);border-radius:3px;background:rgba(183,151,93,.04)}
.reading-synthesis{margin:18px 0;padding:0 0 0 14px;border-left:2px solid var(--gold-line)}
.reading-synthesis strong{font-size:12px;color:var(--gold);letter-spacing:.04em}
.reading-synthesis p{margin:8px 0 0;line-height:1.85}
.grounded-reading .reading-check{font-size:12px;color:var(--ink-3)}
.grounded-reading summary:focus-visible{outline:2px solid var(--gold-lo);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){.reading-expand{transition:none}}
.chat-sources{padding:0 22px 14px;font-size:12px;color:var(--ink-3)}
.chat-sources summary{cursor:pointer;padding:8px 0}
.chat-sources a{color:#725633;text-decoration:underline;text-underline-offset:3px}
.chat-wait{
align-self:stretch;margin:2px 0 6px;padding:16px 18px 15px;
border-radius:12px;border:1px solid rgba(201,169,108,.24);
background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(251,247,239,.52));
box-shadow:0 10px 26px rgba(60,40,20,.06);
}
.wait-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wait-head b{font-size:13px;font-weight:600;letter-spacing:.02em;color:#3C3126}
.wait-head small{font-size:11.5px;color:var(--ink-4)}
.wait-orbit{
position:relative;width:15px;height:15px;border-radius:50%;flex:0 0 auto;
border:1.5px solid rgba(201,169,108,.26);border-top-color:var(--gold);
animation:spin 820ms linear infinite;
}
.wait-bar{position:relative;height:3px;margin:13px 0 12px;border-radius:999px;background:rgba(120,96,60,.14);overflow:hidden}
.wait-bar i{
position:absolute;top:0;bottom:0;left:0;width:0;border-radius:999px;
background:linear-gradient(90deg,var(--gold-lo),var(--gold),var(--gold-hi));
transition:width 700ms cubic-bezier(.22,1,.36,1);
}
.wait-skeleton{display:grid;gap:7px}
.wait-skeleton span{
display:block;height:9px;border-radius:4px;
background:linear-gradient(90deg,rgba(120,96,60,.10) 25%,rgba(120,96,60,.20) 37%,rgba(120,96,60,.10) 63%);
background-size:300% 100%;animation:waitShimmer 1.7s ease-in-out infinite;
}
.wait-skeleton span:nth-child(1){width:92%}
.wait-skeleton span:nth-child(2){width:100%;animation-delay:.16s}
.wait-skeleton span:nth-child(3){width:62%;animation-delay:.32s}
@keyframes waitShimmer{0%{background-position:120% 0}100%{background-position:-45% 0}}
@media(prefers-reduced-motion:reduce){
.wait-orbit{animation:none}
.wait-skeleton span{animation:none}
.wait-bar i{transition:none}
}
@keyframes spin{to{transform:rotate(360deg)}}
.chat-error{padding:2px 0;font-size:12px;color:#A65E5F}
.conversation form{padding:15px 22px 19px;border-top:1px solid rgba(60,40,20,.09)}
.conversation label{display:block;margin-bottom:9px;font-size:11.5px;letter-spacing:.08em;color:var(--ink-3)}
.chat-compose{display:flex;gap:9px;align-items:flex-start}
.chat-compose textarea{
flex:1;min-width:0;padding:12px 14px;border-radius:var(--r-xs);
border:1px solid var(--paper-4);background:#fff;
font-size:13px;line-height:1.8;color:var(--ink);resize:vertical;
box-shadow:inset 0 2px 3px rgba(60,40,20,.06);
}
.chat-compose textarea:focus{outline:none;border-color:rgba(201,169,108,.85);box-shadow:inset 0 2px 3px rgba(60,40,20,.04), 0 0 0 3px rgba(201,169,108,.13)}
.chat-compose button{
padding:12px 19px;border-radius:var(--r-xs);white-space:nowrap;
font-size:12.5px;letter-spacing:.1em;font-weight:600;color:#1B1410;
background:var(--grad-gold-flat);
box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 6px 16px rgba(0,0,0,.3);
transition:all var(--t1) var(--ease);
}
.chat-compose button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 9px 22px rgba(0,0,0,.36)}
.chat-compose button:disabled{opacity:.42;cursor:not-allowed}
.conversation form>small{display:block;margin-top:10px;font-size:10.5px;color:var(--ink-4)}
/* ---------- 21. 牌库 ---------- */
.deck-count{display:flex;align-items:baseline;gap:11px;font:400 44px/1 var(--latin);color:var(--gold)}
.deck-count span{font:400 8px/1.8 var(--latin);letter-spacing:.24em;text-transform:uppercase;color:var(--moon-4)}
.deck-controls{
display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;
padding-bottom:15px;margin-bottom:26px;border-bottom:1px solid rgba(201,169,108,.14);
}
.tabs{display:flex;gap:2px;overflow:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
position:relative;padding:9px 15px;white-space:nowrap;
font-size:12.5px;letter-spacing:.08em;color:var(--moon-3);
transition:color var(--t1) var(--ease);
}
.tabs button::after{
content:"";position:absolute;left:15px;right:15px;bottom:2px;height:1px;
background:linear-gradient(90deg,transparent,var(--gold) 50%,transparent);
transform:scaleX(0);transition:transform var(--t2) var(--ease-expo);
}
.tabs button:hover{color:var(--moon)}
.tabs button:hover::after{transform:scaleX(1)}
.tabs button.active{color:var(--gold-hi)}
.tabs button.active::after{transform:scaleX(1);opacity:.95}
.deck-controls input{
width:220px;padding:10px 15px;border-radius:var(--r-xs);
border:1px solid rgba(201,169,108,.2);background:rgba(243,238,248,.045);
font-size:12.5px;color:var(--moon);
transition:all var(--t1) var(--ease);
}
.deck-controls input::placeholder{color:var(--moon-4)}
.deck-controls input:focus{outline:none;border-color:rgba(235,213,162,.6);background:rgba(243,238,248,.09)}
.deck-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:15px}
.mini-card{
display:flex;flex-direction:column;padding:12px 12px 14px;
border-radius:var(--r-xs);text-align:left;color:var(--moon-2);
background:linear-gradient(180deg,rgba(243,238,248,.055),rgba(243,238,248,.02));
box-shadow:inset 0 0 0 1px rgba(201,169,108,.12);
transition:all var(--t2) var(--ease);
}
.mini-card:hover{
transform:translateY(-5px);
background:linear-gradient(180deg,rgba(243,238,248,.1),rgba(243,238,248,.035));
box-shadow:inset 0 0 0 1px rgba(201,169,108,.42), var(--lift-night);
}
.mini-card .real-art{width:100%;margin-bottom:14px}
.mini-card b{display:block;font:400 14px var(--serif);letter-spacing:.1em;color:var(--moon)}
.mini-card>small{display:block;margin-top:7px;font-size:11px;line-height:1.65;color:var(--moon-4)}
.library-pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:28px;font-size:11.5px;letter-spacing:.08em;color:var(--moon-3)}
.library-pager button{
padding:8px 17px;border-radius:var(--r-xs);font-size:11.5px;color:var(--moon-2);
background:rgba(243,238,248,.045);box-shadow:inset 0 0 0 1px rgba(201,169,108,.16);
transition:all var(--t1) var(--ease);
}
.library-pager button:hover:not(:disabled){background:rgba(201,169,108,.12);color:var(--gold-hi)}
.library-pager button:disabled{opacity:.28;cursor:not-allowed}
.source-line{margin-top:28px;font-size:11px;line-height:2;letter-spacing:.02em;color:var(--moon-4)}
.source-line a,.source-link{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(201,169,108,.4)}
.source-line a:hover,.source-link:hover{color:var(--gold-hi)}
/* ---------- 22. 记录 ---------- */
.history-list{
border-radius:var(--r-xs);overflow:hidden;
background:linear-gradient(180deg,rgba(243,238,248,.05),rgba(243,238,248,.018));
box-shadow:inset 0 0 0 1px rgba(201,169,108,.12);
}
.history-row{
display:flex;align-items:center;justify-content:space-between;gap:20px;
padding:20px 23px;border-bottom:1px solid rgba(201,169,108,.08);
transition:background var(--t1) var(--ease);
}
.history-row:last-child{border-bottom:0}
.history-row:hover{background:rgba(243,238,248,.038)}
.history-row strong{
display:block;font:400 15px/1.7 var(--serif);letter-spacing:.06em;
color:var(--moon);overflow-wrap:anywhere;
}
.history-row small{display:block;margin-top:9px;font-size:11px;line-height:1.8;letter-spacing:.03em;color:var(--moon-4)}
.history-actions{display:flex;gap:6px;flex:0 0 auto}
.history-actions button{
padding:7px 14px;border-radius:var(--r-xs);font-size:11.5px;color:var(--moon-3);
background:rgba(243,238,248,.045);box-shadow:inset 0 0 0 1px rgba(201,169,108,.14);
transition:all var(--t1) var(--ease);
}
.history-actions button:hover{color:var(--gold-hi);background:rgba(201,169,108,.11)}
.empty{padding:60px 24px;text-align:center;font-size:13px;line-height:2.2;letter-spacing:.06em;color:var(--moon-4)}
/* ---------- 22b. 牌桌：78 张牌常驻，靠重排位置推进 ---------- */
.table{
position:relative;height:360px;margin:6px auto 4px;
overflow-x:auto;overflow-y:hidden;
scrollbar-width:none;-ms-overflow-style:none;
cursor:default;
contain:layout paint;
overscroll-behavior-x:contain;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
}
.table::-webkit-scrollbar{display:none}
.table.is-deep{height:470px}
@media(max-width:680px){.table.is-deep{height:400px}}
.table-inner{position:relative;height:100%;width:100%;min-width:100%}
/* 一张牌 */
.t-card{
position:absolute;left:50%;top:50%;
width:100px;height:168px;margin:0;padding:0;border:0;background:transparent;
transform:
translate(-50%,-50%)
translate(calc(var(--x,0px) + var(--nudge,0px)), calc(var(--y,0px) + var(--lift,0px)))
rotate(var(--r,0deg)) scale(var(--s,1));
transform-origin:50% 50%;
transition:transform 360ms var(--ease-expo), opacity 300ms var(--ease);
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.t-card:disabled{cursor:default}
.t-card.is-in-flight{pointer-events:none}
.t-card.is-in-flight,.table.is-shuffling .t-card{will-change:transform}
.table.is-shuffling .t-card{pointer-events:none}
.t-card:focus-visible{outline:none}
.t-card:focus-visible .t-face{box-shadow:0 0 0 2px var(--gold-hi), 0 0 24px rgba(201,169,108,.55)}
.t-face{
position:absolute;inset:0;display:block;
transition:transform 480ms var(--ease-expo);
border-radius:2px;
}
.t-card.is-open .t-face{transform:rotateY(180deg)}
.t-card.is-dealt{perspective:900px}
.t-card.is-dealt .t-face{transform-style:preserve-3d}
.t-card:not(.is-dealt) .t-front{display:none}
.t-side{
position:absolute;inset:0;display:block;border-radius:2px;
backface-visibility:hidden;-webkit-backface-visibility:hidden;
overflow:hidden;
}
.t-back{
box-shadow:
inset 0 1px 0 rgba(255,247,222,.16),
0 0 0 1px rgba(235,213,162,.20),
0 3px 6px rgba(0,0,0,.45),
0 12px 26px rgba(0,0,0,.5);
transition:box-shadow 260ms var(--ease);
}
.t-back .back-inner{width:100%;height:100%;border-radius:2px}
.table-back-art{display:block;width:100%;height:100%;border-radius:2px}
.t-front{
transform:rotateY(180deg);
background:#F2EADA;
box-shadow:
0 0 0 1px rgba(235,213,162,.5),
0 0 0 4px rgba(251,247,239,.95),
0 4px 10px rgba(0,0,0,.35),
0 18px 40px rgba(0,0,0,.4);
}
.t-front .real-art{width:100%;height:100%;aspect-ratio:auto;box-shadow:none;border-radius:2px}
/* 悬停：指尖碰到的那张从牌扇里探出来，左右相邻的牌被挤开一点 */
.t-card:not(:disabled):not(.is-dealt):hover{--lift:-20px;transition-duration:280ms}
.t-card:has(+ .t-card:hover){--nudge:-4px}
.t-card:hover + .t-card{--nudge:4px}
@media(hover:none){.t-card:hover{--lift:0px!important;--nudge:0px}.t-card:has(+ .t-card:hover),.t-card:hover + .t-card{--nudge:0px}}
.t-card:not(:disabled):hover .t-back{
box-shadow:
0 0 0 1px rgba(235,213,162,.85),
0 0 26px rgba(201,169,108,.4),
0 10px 18px rgba(0,0,0,.5),
0 26px 44px rgba(0,0,0,.55);
}
/* 一摞牌叠在一起时，每张只留一道极细亮边 —— 读起来是"牌的厚度"，不是一整块金条 */
.table .t-card + .t-card .t-back{
box-shadow:inset 0 1px 0 rgba(255,247,222,.20), 0 0 0 1px rgba(235,213,162,.10);
}
.t-card.is-picked .t-back{
box-shadow:
0 0 0 2px rgba(235,213,162,.95),
0 0 28px rgba(201,169,108,.55),
0 10px 20px rgba(0,0,0,.55),
0 24px 44px rgba(0,0,0,.6);
}
.t-card.is-dealt .t-back{box-shadow:0 0 0 1px rgba(235,213,162,.4), 0 10px 24px rgba(0,0,0,.55), 0 28px 56px rgba(0,0,0,.5)}
/* 轮到翻的那一张：金色呼吸环，一眼能看出该点它 */
.t-card.is-next .t-back{
box-shadow:
0 0 0 2px rgba(235,213,162,.95),
0 0 34px rgba(201,169,108,.5),
0 10px 20px rgba(0,0,0,.5),
0 26px 46px rgba(0,0,0,.55);
}
.t-card.is-next::after{content:'';position:absolute;inset:-4px;border:1px solid var(--gold-hi);border-radius:3px;pointer-events:none;animation:next-pulse 2.2s ease-in-out infinite}
@keyframes next-pulse{
0%,100%{opacity:.35;transform:scale(1)}
50%{opacity:.9;transform:scale(1.03)}
}
.t-card.is-next{--lift:-10px}
/* 选中序号 */
.pick-num{
position:absolute;right:-7px;top:-8px;z-index:5;
width:20px;height:20px;display:flex;align-items:center;justify-content:center;
border-radius:50%;background:var(--grad-gold-flat);color:#1B1410;
font:700 11px/1 var(--latin);
box-shadow:0 2px 10px rgba(0,0,0,.6), 0 0 0 1px rgba(255,247,222,.7);
pointer-events:none;
}
/* 牌桌下方的控制区 */
.ritual-ctl{position:relative;min-height:96px;padding:6px 0 2px;text-align:center}
.ritual-ctl .ritual-question{margin:0 auto 20px}
.ritual-ctl .ritual-primary{margin-top:2px}
.pick-line{
display:flex;align-items:baseline;justify-content:center;gap:16px;
font-size:11.5px;letter-spacing:.09em;color:var(--moon-3);
margin-bottom:12px;
}
.pick-count{color:var(--gold-hi);font-weight:600;font-family:var(--latin);letter-spacing:.14em;font-size:13px}
.pick-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-bottom:18px}
.pick-slot{
display:inline-flex;align-items:center;gap:8px;
padding:5px 12px 5px 5px;border-radius:var(--r-xs);
font-size:10.5px;letter-spacing:.05em;color:var(--moon-4);
border:1px dashed rgba(201,169,108,.18);
transition:all var(--t2) var(--ease);
}
.pick-slot i{
width:16px;height:16px;display:flex;align-items:center;justify-content:center;
font:600 9px/1 var(--latin);font-style:normal;color:var(--moon-4);
background:rgba(243,238,248,.06);
}
.pick-slot.on{
border-style:solid;border-color:rgba(201,169,108,.5);
background:rgba(201,169,108,.1);color:var(--gold-hi);
}
.pick-slot.on i{background:var(--grad-gold-flat);color:#1B1410}
.drag-tip{
margin-top:14px;
font:400 10px/1.6 var(--latin);letter-spacing:.24em;
color:var(--gold);opacity:.7;
}
.cut-tip{
display:block;margin-top:8px;
font:400 9.5px/1 var(--latin);letter-spacing:.42em;color:var(--gold);
opacity:.75;
}
/* 小屏：牌桌更矮，牌更小 */
@media(max-width:680px){
.table{height:312px;mask-image:none;-webkit-mask-image:none}
.t-card{width:82px;height:138px}
}
.reading-recommendation{padding:4px 0 10px}
.reading-recommendation small{font-size:11px;letter-spacing:.08em;color:var(--gold-lo)}
.grounded-reading .reading-recommendation p{font-size:16px;line-height:1.9;color:var(--ink);margin:9px 0}
.reading-decision{padding:0 0 12px}
.grounded-reading .reading-decision p{font-size:13px;line-height:1.9}
/* ---------- 22c. 场景转场：同一张牌从牌桌移到结果里 ---------- */
.scene-shared-card{view-transition-name:shared-card}
header nav{view-transition-name:site-navigation}
::view-transition-group(root){animation-duration:420ms;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(root){animation:scene-out 300ms ease-out both}
::view-transition-new(root){animation:scene-in 420ms ease-out both}
@keyframes scene-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes scene-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.history-tools{display:flex;flex-wrap:wrap;gap:16px}
.request-receipt{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--paper-4);padding:12px 0}
.request-receipt .btn{font-size:12px;padding:10px 12px;flex-shrink:0}
::view-transition-group(shared-card){
animation-duration:640ms;
animation-timing-function:cubic-bezier(.16,1,.3,1);
}
::view-transition-old(shared-card),
::view-transition-new(shared-card){mix-blend-mode:normal}
::view-transition-image-pair(shared-card){isolation:auto}
/* ---------- 23. 弹层 ---------- */
dialog{border:0;padding:0;background:transparent;max-width:min(680px,92vw);max-height:88vh;color:var(--ink)}
dialog::backdrop{background:rgba(4,3,10,.78);backdrop-filter:blur(7px)}
.detail{
position:relative;max-height:88vh;overflow:auto;
padding:clamp(24px,3.2vw,38px);border-radius:var(--r-md);
background-color:var(--paper);
background-image:
repeating-linear-gradient(0deg,rgba(120,96,60,.026) 0 1px,transparent 1px 3px),
radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.92),rgba(255,255,255,0) 60%);
box-shadow:
0 1px 0 rgba(255,255,255,.9) inset,
0 0 0 1px rgba(201,169,108,.32),
var(--lift-3);
}
.detail .close{
position:absolute;right:14px;top:12px;width:34px;height:34px;
display:flex;align-items:center;justify-content:center;
border-radius:50%;font-size:19px;line-height:1;color:var(--ink-4);
transition:all var(--t1) var(--ease);
}
.detail .close:hover{color:var(--ink);background:rgba(60,40,20,.07);transform:rotate(90deg)}
.detail h2{margin:15px 0 17px;font-size:26px;letter-spacing:.12em;color:var(--ink)}
.detail .real-art{width:min(236px,56%);margin:8px auto 22px}
.detail p{margin:13px 0;font-size:13px;line-height:2.05;color:var(--ink-2)}
.detail p strong{display:block;margin-bottom:4px;font:600 9.5px/1 var(--latin);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-lo)}
.detail pre{
max-height:232px;overflow:auto;margin:16px 0;padding:16px;
white-space:pre-wrap;border-radius:var(--r-xs);
background:rgba(60,40,20,.045);box-shadow:inset 0 0 0 1px rgba(60,40,20,.08);
font:12px/1.95 var(--sans);color:var(--ink-2);
}
.reading-consent blockquote{margin:20px 0 14px;padding:14px 16px;border-left:2px solid var(--gold-lo);background:rgba(183,151,93,.06);font-size:15px;line-height:1.8;overflow-wrap:anywhere}
.consent-cards{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:23px}
.consent-cards span{padding:6px 10px;border:1px solid var(--gold-line);border-radius:3px;font-size:12px;color:var(--ink-2)}
.reading-consent .consent-note{font-size:11px;color:var(--ink-3);margin:12px 0}
.consent-privacy{font-size:11px;color:var(--ink-3);margin-top:12px}.consent-privacy summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.inquiry-form form label{display:block;margin:16px 0;font-size:12.5px;letter-spacing:.04em;color:var(--ink-2)}
.inquiry-form input:not([type=checkbox]),.inquiry-form textarea{
display:block;width:100%;margin-top:8px;padding:12px 14px;
border:1px solid var(--paper-4);border-radius:var(--r-xs);background:#fff;
font-size:13px;color:var(--ink);
box-shadow:inset 0 2px 3px rgba(60,40,20,.06);
}
.inquiry-form input:focus,.inquiry-form textarea:focus{outline:none;border-color:rgba(201,169,108,.85);box-shadow:inset 0 2px 3px rgba(60,40,20,.04), 0 0 0 3px rgba(201,169,108,.13)}
.inquiry-form .check-line{display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:1.8}
.inquiry-form .check-line input{margin-top:5px;accent-color:var(--gold-lo)}
.inquiry-form #humanMessage{min-height:1.2em;margin-top:13px;font-size:12px;color:var(--ink-3)}
/* ---------- 24. 提示条 ---------- */
#toast{
position:fixed;left:50%;bottom:34px;z-index:200;
padding:12px 24px;border-radius:var(--r-xs);
font-size:12.5px;letter-spacing:.08em;color:#1B1410;
background:var(--grad-gold-flat);
box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 14px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(235,213,162,.5);
opacity:0;pointer-events:none;transform:translate(-50%,16px);
transition:opacity var(--t2) var(--ease), transform var(--t2) var(--ease-expo);
}
#toast.show{opacity:1;transform:translate(-50%,0)}
/* ---------- 25. 页脚 ---------- */
footer{
padding:clamp(38px,5vw,64px) clamp(18px,4.6vw,44px) clamp(34px,4vw,52px);
border-top:1px solid rgba(201,169,108,.09);
background:linear-gradient(180deg,rgba(4,3,10,0),rgba(4,3,10,.55));
}
.foot-in{
max-width:1180px;margin:0 auto;
display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(30px,6vw,80px);flex-wrap:wrap;
}
.foot-lead{display:flex;align-items:center;gap:13px}
.foot-mark{
width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;
font-size:19px;color:var(--void);
background:radial-gradient(circle at 34% 30%,#FFF7DE,#E3C994 42%,#B4914F 100%);
box-shadow:0 0 0 1px rgba(235,213,162,.4), 0 0 20px rgba(201,169,108,.22);
}
.foot-lead b{display:block;font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:.22em;color:var(--moon)}
.foot-lead small{display:block;margin-top:5px;font:400 7.5px/1 var(--latin);letter-spacing:.34em;color:var(--gold);opacity:.75}
.foot-cols{display:flex;gap:clamp(28px,5vw,72px);flex-wrap:wrap}
.foot-cols h5{
margin:0 0 11px;font:400 8.5px/1 var(--latin);letter-spacing:.3em;text-transform:uppercase;
color:var(--gold);opacity:.8;
}
.foot-cols p{margin:0;font-size:11.5px;line-height:1.95;letter-spacing:.04em;color:var(--moon-4)}
.foot-cols a{color:var(--moon-3);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(201,169,108,.28);transition:color var(--t1) var(--ease)}
.foot-cols a:hover{color:var(--gold-hi)}
.foot-note{
max-width:1180px;margin:clamp(30px,4vw,44px) auto 0;padding-top:22px;
border-top:1px solid rgba(201,169,108,.07);
font-size:10.5px;line-height:1.9;letter-spacing:.06em;color:var(--moon-4);
}
/* ---------- 26. 响应式 ---------- */
@media(max-width:1024px){
.reading-grid{grid-template-columns:1fr}
.reading-aside{display:none}
.deck-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:860px){
.card-grid{grid-template-columns:repeat(9,minmax(0,1fr))}
.result-card{grid-template-columns:minmax(0,1fr)}
.result-card>.real-art{grid-row:auto;grid-column:1;max-width:200px;margin:0 auto 20px}
.result-card>*:not(.real-art){grid-column:1}
.hero{min-height:auto;padding-top:clamp(36px,7vh,64px)}
}
@media(max-width:680px){
header{height:auto;padding:13px 16px;flex-wrap:wrap;gap:10px}
header nav{order:3;width:100%;margin-left:0;gap:0;overflow:auto;padding-bottom:2px}
header nav a{padding:8px 12px;font-size:12.5px;white-space:nowrap}
header nav a::after{left:12px;right:12px;bottom:3px}
.brand{font-size:15px}
.brandmark{width:32px;height:32px;font-size:16px}
.setting-link{margin-left:auto;padding:7px 12px;font-size:11px}
.section{padding:30px 16px 48px}
.section-top{flex-direction:column;align-items:flex-start;gap:14px}
.section-top h2{margin:14px 0 10px}
.hero h1{font-size:clamp(30px,9vw,44px);letter-spacing:.08em}
.hero-lede{font-size:13px;line-height:2.15}
.moon-phase{width:46px;height:46px}
.reading-form{padding:20px 17px}
.spreads{grid-template-columns:repeat(2,minmax(0,1fr))}
.spread{padding:14px 13px}
.spread-icon{position:absolute;right:13px;top:13px;margin:0;font-size:15px}
.spread i{display:none}
.spread b{font-size:13px;letter-spacing:.08em}
.spread small{margin-top:5px;font-size:10.5px}
.card-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.deck-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.deck-controls input{width:100%}
.reveal-grid{gap:14px}
.reveal-slot{min-width:100px}
.reveal-card{width:100px;height:174px}
.result-actions .btn{flex:1 1 100%}
.history-row{flex-direction:column;align-items:flex-start;gap:12px}
.chat-bubble{max-width:95%}
.ritual-body{padding:24px 0 4px}
.shuffle-stack{width:290px;height:192px}
.riffle-card{width:90px;height:146px;margin-left:-45px}
.pile-stack{width:82px;height:132px}
.cut-piles{gap:22px}
.deck-count{font-size:34px}
}
@media(max-width:420px){
.card-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.reveal-slot{min-width:88px}
.reveal-card{width:88px;height:152px}
}
/* ---------- 27. 减少动效 ---------- */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms!important;
animation-iteration-count:1!important;
transition-duration:.001ms!important;
scroll-behavior:auto!important;
}
}
/* Phone-first: keep the question, spread and action close together. */
@media(max-width:680px){
body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
.chat-messages{padding:14px 16px;max-height:min(56svh,520px)}
.chat-head{padding:18px 16px 0}
.chat-note{padding:10px 16px 0}
.conversation form{padding:14px 16px 17px}
body::after{animation:none;opacity:.55}
#grain{opacity:.025}
header{position:relative;gap:4px;padding:10px 16px}
header.is-scrolled{backdrop-filter:none;-webkit-backdrop-filter:none}
header nav{position:fixed;z-index:80;left:0;right:0;bottom:0;width:100%;display:flex;justify-content:space-between;overflow:visible;padding:0 8px env(safe-area-inset-bottom);background:rgba(10,7,18,.96);border-top:1px solid rgba(201,169,108,.22);backdrop-filter:blur(12px)}
header nav a{flex:1;justify-content:center;min-height:56px;display:flex;align-items:center;padding:7px 8px;font-size:12px}
.hero{min-height:0;padding:22px 16px 12px}
.hero .moon-phase,.hero-kicker{display:none}
.hero h1{font-size:clamp(27px,7.4vw,35px);margin:0}
.hero-lede{font-size:12px;line-height:1.65;margin:9px 0 0}
.hero-seal{display:none}
.section-first{padding:12px 14px 38px}
.deck-meta{margin:0 0 14px;gap:6px;font-size:9px;line-height:1.7}
.deck-meta span:nth-of-type(3),.deck-meta i:nth-of-type(3){display:none}
.reading-form{min-width:0;padding:19px 17px;transform:none}
.reading-form textarea{font-size:16px;min-height:72px;height:78px;padding:13px}
.question-help{gap:6px;margin-top:8px}
.question-help button{min-height:36px}
.spread-label{margin-top:15px}
.spread-label::after{content:'左右滑动查看';float:right;font:10px/1.6 var(--sans);letter-spacing:0;color:#726674}
.spreads{display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding:3px 1px 10px;margin-right:-17px;padding-right:17px;overscroll-behavior-x:contain}
.spread{flex:0 0 140px;min-height:104px;padding:11px 12px;scroll-snap-align:start}
.spread-map{height:26px;margin-bottom:6px}
.spread b{font-size:13px}
.spread small{font-size:10px}
.spread-help{min-height:0;margin:5px 0 9px;font-size:11px;line-height:1.6}
.options{margin:8px 0 12px;gap:6px}
.options label{min-height:36px;display:flex;align-items:center}
.draw-btn{min-height:48px}
.gentle{margin-top:9px;font-size:10px}
.ritual-shell{padding:20px 14px}
.ritual-heading h3{font-size:23px}
.ritual-heading p{line-height:1.7}
.ritual-close{min-width:44px;min-height:44px}
.detail .close{width:44px;height:44px}
.result-tabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.result-tabs button{flex:0 0 auto;min-height:48px;scroll-snap-align:start}
.result-card{grid-template-columns:92px minmax(0,1fr);gap:10px 15px;padding:17px}
.result-card>.real-art{grid-column:1;grid-row:1/span 3;width:92px;max-width:none;margin:0}
.result-card>*:not(.real-art){grid-column:2}
.result-card>.position-meaning,.result-card>.card-info{grid-column:1/-1}
.result-position{font-size:10px;letter-spacing:.08em;padding:5px 7px;margin-bottom:0}
.result-card h4{font-size:16px;letter-spacing:.05em;margin:0}
.result-card p{font-size:12px;line-height:1.9;margin:4px 0}
.result-card .card-meaning{border:0;padding:0}
.chat-compose textarea,.inquiry-form input:not([type=checkbox]),.inquiry-form textarea{font-size:16px}
#toast{bottom:calc(76px + env(safe-area-inset-bottom))}
}
.service-note:has(#retryServices){display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}.service-note #retryServices{min-height:44px;padding:8px 16px;border:1px solid var(--gold,#bda26c);color:inherit;background:transparent;cursor:pointer;border-radius:4px}.service-note #retryServices:focus-visible{outline:2px solid #d8bd82;outline-offset:3px}
/* ---------- 17. 收尾打磨：入场、焦点、呼吸感（2026-10-31） ---------- */
/* 结果页：卡片逐张浮起，代替整块硬切 */
.result-card{animation:resultIn .52s cubic-bezier(.22,1,.36,1) both}
.result-card:nth-of-type(2){animation-delay:.06s}
.result-card:nth-of-type(3){animation-delay:.12s}
@keyframes resultIn{from{opacity:0;transform:translateY(12px) scale(.988)}to{opacity:1;transform:none}}
.result-head,.result-sub,.result-tabs{animation:softIn .45s ease-out both}
@keyframes softIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* AI 解读区出现时轻微上浮，避免"啪"地插入 */
.chat-head,.chat-note,.chat-messages,.conversation form{animation:softIn .4s ease-out both}
/* 键盘可达性：所有可交互元素统一焦点环 */
a:focus-visible,button:focus-visible,summary:focus-visible,textarea:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:6px;
}
/* 首页右侧装饰牌：极慢的呼吸浮动，静止但"活着" */
.aside-cards img{animation:asideFloat 9s ease-in-out infinite}
.aside-cards img:nth-child(2){animation-delay:-3s}
.aside-cards img:nth-child(3){animation-delay:-6s}
@keyframes asideFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
/* 首页月亮：极慢的光晕呼吸 */
.moon-phase{animation:moonGlow 11s ease-in-out infinite}
@keyframes moonGlow{0%,100%{box-shadow:0 0 0 1px rgba(235,213,162,.22),0 0 46px rgba(235,213,162,.18)}50%{box-shadow:0 0 0 1px rgba(235,213,162,.34),0 0 72px rgba(235,213,162,.3)}}
/* 牌库缩略牌：悬停微抬 */
.mini-card{transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease}
@media(hover:hover){.mini-card:hover{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){
.result-card,.result-head,.result-sub,.result-tabs,.chat-head,.chat-note,.chat-messages,.conversation form{animation:none}
.aside-cards img,.moon-phase{animation:none}
.mini-card{transition:none}
}
/* 18 / 解读失败时的「重新试一次」 */
.chat-error{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:10px 12px;border-radius:12px;background:rgba(166,94,95,.08);border:1px solid rgba(166,94,95,.22)}
.chat-error p{margin:0;font-size:12px;line-height:1.6;color:#9E5758}
.chat-error button{font:inherit;font-size:12px;letter-spacing:.04em;padding:7px 14px;border-radius:999px;border:1px solid rgba(201,168,95,.5);background:transparent;color:#B08E4C;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.chat-error button:hover{background:rgba(201,168,95,.14);border-color:rgba(201,168,95,.72);color:#8C6E33}
.chat-error button:focus-visible{outline:2px solid rgba(201,168,95,.8);outline-offset:2px}
/* ==========================================================================
29. v19 · 极致精修（2026-10-31）
--------------------------------------------------------------------------
这一层不动结构、不加依赖，只做四件事：
① 版心 —— 任何一段正文都不再横跨 1000px。中文一行 28–34 字最舒服，
所以 AI 判读、追问输入、边界说明一律收进 34em 并居中。
② 层次 —— 牌位／牌名／判读／依据，用字号、字体族与金色权重分出四层，
而不是靠大段留白撑开（原版结果卡 2000px 高，信息密度太低）。
③ 材质 —— 纸的厚度（露出的一叠纸边）、月亮上的环形山、牌桌上的灯、
弹层升起时的重量。都只用渐变和阴影，不增加一次请求。
④ 动效 —— 滚动时内容轻微浮起；页眉随滚动收窄；一律可被
prefers-reduced-motion 关掉。
========================================================================== */
/* ---------- 29.1 版心：把长文收进 34em ---------- */
.grounded-reading{max-width:34em;margin-inline:auto}
.grounded-reading p{font-size:13.5px;line-height:1.95;letter-spacing:.015em;color:var(--ink-2)}
.conversation .chat-compose{max-width:34em;margin-inline:auto}
.conversation form>label,.conversation form>small{max-width:34em;margin-inline:auto;display:block}
.conversation form>small{margin-top:10px}
.chat-head,.chat-note,.chat-usage,.chat-sources{max-width:calc(34em + 44px);margin-inline:auto}
#chatForm .chat-compose textarea{min-height:74px}
/* 结论段：换成衬线、加大、加行距，一眼看出这是"判读"而不是普通正文 */
.reading-recommendation{padding:0 0 2px}
.reading-recommendation small{display:block;margin-bottom:9px;font:400 9px/1 var(--latin);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-lo)}
.grounded-reading .reading-recommendation p{margin:0;font-family:var(--serif);font-size:17px;line-height:2;letter-spacing:.035em;color:var(--ink)}
/* 整组牌的走向：做成一段被引用的判词 */
.reading-synthesis{position:relative;margin:20px 0;padding:17px 18px 17px 24px;border-left:0;
background:linear-gradient(100deg,rgba(183,151,93,.11),rgba(183,151,93,.035) 62%,rgba(183,151,93,0));
box-shadow:inset 2px 0 0 rgba(201,169,108,.55)}
.reading-synthesis::before{content:"“";position:absolute;left:7px;top:4px;font:400 30px/1 var(--latin);color:var(--gold);opacity:.38;pointer-events:none}
.reading-synthesis strong{display:block;margin-bottom:8px;font:400 9px/1 var(--latin);letter-spacing:.28em;color:var(--gold-lo)}
.reading-synthesis p{margin:0;font-family:var(--serif);font-size:14.5px;line-height:2;letter-spacing:.03em;color:var(--ink)}
/* ---------- 29.2 牌位条目：一条像账目的行 ---------- */
.reading-card summary{display:flex;align-items:center;justify-content:space-between;gap:14px;
min-height:52px;padding:11px 4px;margin:0 -4px;border-radius:var(--r-sm);
transition:background var(--t1) var(--ease)}
.reading-card summary>span:first-child{display:grid;grid-template-columns:7.6em minmax(0,1fr);align-items:baseline;gap:0 10px;min-width:0}
.reading-card summary b{display:block;font:400 9.5px/1.7 var(--sans);font-weight:500;letter-spacing:.2em;color:var(--gold-lo)}
.reading-card summary span span{font-family:var(--serif);font-size:14.5px;letter-spacing:.08em;color:var(--ink)}
.reading-card summary:hover{background:rgba(183,151,93,.07)}
.reading-expand{align-self:center;flex:0 0 auto;display:grid;place-items:center;width:23px;height:23px;
border:1px solid rgba(201,169,108,.4);border-radius:50%;font-size:13px;line-height:1;color:var(--gold-lo);
transition:transform .3s var(--ease-expo),background var(--t1) var(--ease),border-color var(--t1) var(--ease)}
.reading-card summary:hover .reading-expand{background:rgba(201,169,108,.14);border-color:rgba(201,169,108,.62)}
.reading-card[open] .reading-expand{transform:rotate(135deg);background:rgba(201,169,108,.18)}
.reading-card-body{padding:2px 0 18px;animation:panelOpen .34s var(--ease) both}
@keyframes panelOpen{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.reading-evidence summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 4px;margin:0 -4px;border-radius:var(--r-sm);transition:background var(--t1) var(--ease)}
.reading-evidence summary:hover{background:rgba(183,151,93,.06)}
/* ---------- 29.3 结果页：牌位标签、牌面、版式 ---------- */
.result-card{grid-template-columns:176px minmax(0,1fr);gap:clamp(18px,2.4vw,32px);
transition:transform .34s var(--ease),box-shadow .34s var(--ease)}
@media(hover:hover){
.result-card:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 0 0 1px rgba(201,169,108,.34),var(--lift-3)}
}
.result-card>.real-art{
box-shadow:
0 1px 0 rgba(255,255,255,.9) inset,
0 0 0 1px rgba(201,169,108,.34),
0 10px 22px -12px rgba(60,40,20,.5),
0 30px 54px -28px rgba(60,40,20,.45);
}
.result-position{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:0 0 7px;
border-bottom:1px solid rgba(201,169,108,.42);
font-size:9.5px;letter-spacing:.3em;color:var(--gold-lo);background:none;box-shadow:none}
.result-position::before{content:"";width:5px;height:5px;flex:0 0 auto;transform:rotate(45deg);background:var(--gold);opacity:.85}
.result-card h4{margin:0 0 10px;font-size:20px;letter-spacing:.16em;color:var(--ink)}
.result-card p{margin:9px 0;font-size:12.8px;line-height:1.98;letter-spacing:.02em;color:var(--ink-2)}
.result-card p strong{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;color:var(--gold-lo)}
.card-meaning{padding-bottom:13px;border-bottom:1px solid rgba(60,40,20,.1)}
.card-info{width:100%;margin-top:4px;padding:11px 0 0;border-top:1px solid rgba(60,40,20,.1);
text-align:left;font-size:11.5px;letter-spacing:.06em}
.card-info::after{content:"↗";margin-left:6px;opacity:.7}
.result-tabs button{letter-spacing:.1em}
.result-head h3{letter-spacing:.16em}
.local-reflection summary{letter-spacing:.12em}
/* ---------- 29.4 首屏：书封的裁切角标 ---------- */
.hero{--crop:rgba(235,213,162,.30)}
.hero::after{
content:"";position:absolute;pointer-events:none;
inset:clamp(14px,2.2vw,26px) clamp(14px,3vw,34px);
background-image:
linear-gradient(90deg,var(--crop),var(--crop)),linear-gradient(180deg,var(--crop),var(--crop)),
linear-gradient(90deg,var(--crop),var(--crop)),linear-gradient(180deg,var(--crop),var(--crop)),
linear-gradient(90deg,var(--crop),var(--crop)),linear-gradient(180deg,var(--crop),var(--crop)),
linear-gradient(90deg,var(--crop),var(--crop)),linear-gradient(180deg,var(--crop),var(--crop));
background-repeat:no-repeat;
background-size:16px 1px,1px 16px,16px 1px,1px 16px,16px 1px,1px 16px,16px 1px,1px 16px;
background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom;
opacity:.85;
}
@media(max-width:680px){.hero::after{display:none}}
/* 月相：加上环形山与明暗交界，从"一个圆"变成"一颗月亮" */
.moon-phase{
background-image:
radial-gradient(circle at 67% 63%,rgba(122,96,58,.26) 0 8.5%,rgba(122,96,58,0) 9.2%),
radial-gradient(circle at 40% 74%,rgba(122,96,58,.20) 0 5.6%,rgba(122,96,58,0) 6.4%),
radial-gradient(circle at 57% 31%,rgba(122,96,58,.16) 0 4.2%,rgba(122,96,58,0) 5%),
radial-gradient(circle at 31% 45%,rgba(122,96,58,.13) 0 3.2%,rgba(122,96,58,0) 4%),
radial-gradient(circle at 74% 40%,rgba(255,255,255,.5) 0 12%,rgba(255,255,255,0) 34%),
radial-gradient(circle at 36% 32%,#FFF9E9,#E8D4A8 46%,#B9985C 100%);
box-shadow:
inset -5px -6px 14px rgba(92,68,38,.30),
0 0 42px rgba(235,213,162,.34),
0 0 110px rgba(201,169,108,.18),
0 0 0 1px rgba(255,247,222,.35) inset;
}
/* ---------- 29.5 纸的厚度：右下方露出的一叠纸边 ---------- */
.reading-form{
box-shadow:
0 1px 0 rgba(255,255,255,.9) inset,
0 0 0 1px rgba(201,169,108,.22),
3px 4px 0 -1px #F1E8D8,
5px 7px 0 -1px rgba(201,169,108,.18),
0 34px 64px -22px rgba(0,0,0,.78),
0 70px 130px -46px rgba(0,0,0,.62);
}
/* ---------- 29.6 牌阵卡：选中态像被压了一道金线 ---------- */
.spread{transition:background var(--t2) var(--ease),color var(--t2) var(--ease),box-shadow var(--t2) var(--ease),transform var(--t2) var(--ease)}
.spread:hover{box-shadow:inset 0 0 0 1px rgba(201,169,108,.3)}
.spread.active{
background:linear-gradient(180deg,#FFFDF7,#F8F1E3);
box-shadow:inset 0 0 0 1px rgba(201,169,108,.62),inset 0 -2px 0 rgba(201,169,108,.5),0 10px 22px -16px rgba(60,40,20,.8);
}
.spread.active .spread-map{color:var(--gold)}
.spread.active b{color:var(--ink)}
/* ---------- 29.7 牌库：悬停时图轻微推进 ---------- */
.mini-card{will-change:transform}
.mini-card .real-art{overflow:hidden}
.mini-card .real-art img{transition:transform .6s var(--ease-expo),filter .45s ease}
@media(hover:hover){
.mini-card:hover .real-art img{transform:scale(1.045)}
.mini-card:hover b{color:var(--gold-hi)}
}
.mini-card b{transition:color var(--t1) var(--ease)}
/* ---------- 29.8 弹层：升起时有一点重量 ---------- */
dialog[open]{animation:dlgIn .42s var(--ease-expo) both}
@keyframes dlgIn{from{opacity:0;transform:translateY(16px) scale(.986)}to{opacity:1;transform:none}}
dialog[open]::backdrop{animation:scrimIn .4s var(--ease) both}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
.detail::before{
content:"";position:absolute;left:clamp(24px,3.2vw,38px);right:clamp(24px,3.2vw,38px);top:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(201,169,108,.65),transparent);pointer-events:none;
}
.detail .real-art{
box-shadow:0 0 0 1px rgba(201,169,108,.3),0 14px 30px -16px rgba(60,40,20,.5),0 34px 60px -30px rgba(60,40,20,.42);
}
/* ---------- 29.9 页脚：一条金线、一枚月亮 ---------- */
footer{position:relative}
footer::before{
content:"";position:absolute;left:50%;top:-1px;transform:translateX(-50%);
width:min(560px,74vw);height:1px;
background:linear-gradient(90deg,transparent,rgba(201,169,108,.5),transparent);
}
footer::after{
content:"☾";position:absolute;left:50%;top:-11px;transform:translateX(-50%);
padding:0 14px;font-size:13px;line-height:1;color:var(--gold);
background:linear-gradient(180deg,rgba(10,7,18,1),rgba(10,7,18,1));
opacity:.8;
}
/* ---------- 29.10 页眉：滚动后收窄，视觉更"高级"---------- */
@media(min-width:861px){
header{transition:height var(--t2) var(--ease),background var(--t2) var(--ease),border-color var(--t2) var(--ease)}
header.is-scrolled{height:62px}
}
/* 锚点跳转别被吸顶页眉盖住 */
section[id],main>section{scroll-margin-top:92px}
/* ---------- 29.11 滚动浮起（Chrome 系生效，其余浏览器直接看到最终状态）---------- */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
.section-top,.deck-meta,.deck-controls,.deck-grid,.history-list,.spreads,.library-pager,.source-line,.foot-in{
animation:viewRise linear both;
animation-timeline:view();
animation-range:entry 4% cover 26%;
}
}
}
@keyframes viewRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* ---------- 29.12 把 v17/v18 里偏大的圆角收回印刷品尺度 ---------- */
.chat-wait,.chat-error{border-radius:var(--r-md)}
.chat-wait{box-shadow:0 6px 18px -10px rgba(60,40,20,.22),inset 0 0 0 1px rgba(201,169,108,.16)}
.chat-error button{border-radius:var(--r-sm)}
/* ---------- 29.13 统一收尾：动效降级 ---------- */
@media(prefers-reduced-motion:reduce){
.result-card,.reading-card-body,dialog[open],dialog[open]::backdrop{animation:none;transition:none}
.mini-card .real-art img{transition:none}
.section-top,.deck-meta,.deck-controls,.deck-grid,.history-list,.spreads,.library-pager,.source-line,.foot-in{animation:none}
}
/* ============================================================
30. v19.1 · 结构校正（栅格空行、版心度量、截断、对齐）
============================================================ */
/* 30.1 结果卡：art 的 span 9 会造出 4 个空行，行间距 32px 累计 128px 空白 —— 归零 */
.result-card{row-gap:0}
.result-card>.real-art{align-self:start}
.result-card>*:not(.real-art){min-width:0}
/* 30.2 牌位标签：只占自身宽度（原先被 grid 拉伸成通栏） */
.result-position{justify-self:start;width:max-content;max-width:100%}
/* 30.3 是块级，后面的
会多出一整行空档 */
.result-card p strong+br{display:none}
/* 30.4 按钮自带「↗」，不再叠加一次 */
.card-info::after{content:none}
.card-info{justify-self:start;align-self:start;margin-top:16px;padding-top:14px}
/* 30.5 版心度量：统一用一个绝对度量，避免 34em 在不同字号下各不相同 */
.conversation{--measure:510px}
.conversation .chat-head,
.conversation .chat-note,
.conversation .chat-usage,
.conversation .chat-sources,
.conversation .grounded-reading,
.conversation .chat-compose,
.conversation form>label,
.conversation form>small,
.conversation .chat-bubble.assistant small,
.conversation .chat-error{
max-width:min(100%, var(--measure));
margin-inline:auto;
}
.conversation .chat-head{padding-inline:0}
.conversation .chat-note{padding-inline:0}
.conversation .chat-bubble.assistant small{display:block}
/* 30.6 判读不再被 410px 内滚截断 */
.conversation .chat-messages{max-height:none;overflow:visible;padding:16px 22px 6px}
.conversation .chat-messages>.chat-bubble+.chat-bubble{margin-top:26px}
/* 30.7 追问区：细线跟着版心，不再通栏 */
.conversation form{border-top:0;padding-top:6px}
.conversation form>label{padding-top:20px;border-top:1px solid rgba(60,40,20,.1)}
.conversation form>small{margin-top:12px}
/* 30.8 结果页操作区：重量减一档 */
.result-actions .btn{min-height:52px;font-size:12.5px;letter-spacing:.14em}
@media (max-width:680px){
.conversation{--measure:100%}
.conversation .chat-messages{max-height:none;overflow:visible}
}
/* ============================================================
31. v19.2 · 滚动动效不再吃掉内容 + 行宽收敛
============================================================ */
/* 31.1 29.11 的滚动浮起会把「还在视口下方」的内容整块设为透明：
全页截图/打印/键盘用户会看到空白区。改为：只做位移，透明度不低于 .92，
并且只作用于装饰性区块，不作用于任何可交互控件（牌阵选择、牌库分页、按钮组）。 */
@keyframes viewRise{from{opacity:.92;transform:translateY(12px)}to{opacity:1;transform:none}}
/* 可交互区块（牌阵卡、牌库分页、历史列表、操作按钮）一律不做滚动淡入 */
.spreads,.deck-controls,.library-pager,.history-list,.result-actions,.deck-grid{animation:none}
/* 31.2 结果卡正文行宽收敛（原先 58 字一行，超出中文舒适阅读长度） */
.result-card p{max-width:40em}
.result-card .card-meaning,.result-card .position-meaning{max-width:40em}
/* 31.3 页脚注与版权行的小字排版 */
.foot-note{letter-spacing:.05em}
/* ==========================================================================
32. 邀友有礼 v19.3 —— 奖励页（邀请 / 反馈 / 群转发）
材质沿用「午夜书斋」：墨夜底 + 暖纸质卡 + 烫金细线；圆角 1–4px。
========================================================================== */
.rewards{padding:34px 0 10px}
.reward-body{display:grid;gap:26px;margin-top:30px}
.reward-head{
display:flex;align-items:center;gap:34px;flex-wrap:wrap;
padding:26px 30px;border-radius:var(--r-md);
background:linear-gradient(150deg,rgba(27,20,48,.9),rgba(12,9,22,.92));
border:1px solid var(--gold-line);
box-shadow:inset 0 1px 0 rgba(255,255,255,.04),var(--lift-night);
}
.reward-balance{display:flex;align-items:baseline;gap:10px;letter-spacing:.02em}
.reward-balance span{font:400 11px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--moon-3)}
.reward-balance b{font:400 48px/.9 var(--latin);color:var(--gold-hi);letter-spacing:.02em}
.reward-balance em{font:400 12px/1 var(--sans);font-style:normal;color:var(--gold);letter-spacing:.14em}
.reward-note{margin:0;max-width:46em;font:400 13px/1.85 var(--sans);color:var(--moon-3)}
.reward-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.reward-card{
position:relative;padding:26px 26px 22px;border-radius:var(--r-md);color:var(--ink);
background:linear-gradient(178deg,var(--paper),var(--paper-2));
box-shadow:var(--lift-2),inset 0 0 0 1px rgba(120,96,60,.12);
}
.reward-card::before{
content:"";position:absolute;left:16px;right:16px;top:0;height:1px;
background:linear-gradient(90deg,transparent,var(--gold-line),transparent);
}
.reward-card-wide{grid-column:1/-1}
.reward-card header{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.reward-num{font:400 11px/1 var(--latin);letter-spacing:.2em;color:var(--gold-lo)}
.reward-card h3{
margin:0;font:400 21px/1.2 var(--serif);color:var(--ink);letter-spacing:.02em;
display:flex;align-items:baseline;gap:9px;
}
.reward-card h3 small{font:400 9.5px/1 var(--latin);letter-spacing:.3em;color:var(--ink-4);text-transform:uppercase}
.reward-lead{margin:0 0 16px;font:400 13.5px/1.85 var(--sans);color:var(--ink-2)}
.reward-lead b{font-family:var(--latin);color:var(--gold-lo);font-size:15px}
.reward-code{
display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:10px;
border:1px dashed rgba(140,110,56,.42);border-radius:var(--r-sm);background:rgba(255,253,247,.6);
}
.reward-code span{font:400 10.5px/1 var(--sans);letter-spacing:.2em;color:var(--ink-4);text-transform:uppercase}
.reward-code code{font:400 17px/1 var(--latin);letter-spacing:.2em;color:var(--ink)}
.reward-code .reward-copy{margin-left:auto}
.reward-link{display:flex;gap:8px;margin-bottom:14px}
.reward-link input{
flex:1;min-width:0;padding:10px 12px;border:1px solid rgba(120,96,60,.2);border-radius:var(--r-sm);
background:rgba(255,255,255,.55);font:400 11.5px/1.3 var(--latin);color:var(--ink-2);letter-spacing:.02em;
}
.reward-copy{
flex:0 0 auto;padding:8px 13px;border:1px solid rgba(140,110,56,.34);border-radius:var(--r-sm);
background:transparent;color:var(--gold-lo);cursor:pointer;
font:400 11px/1 var(--sans);letter-spacing:.14em;transition:all var(--t1) var(--ease);
}
.reward-copy:hover{background:rgba(201,169,108,.14);border-color:var(--gold);color:var(--ink)}
.reward-copy:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.reward-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 0 14px;padding:12px 0 0;border-top:1px solid rgba(120,96,60,.14)}
.reward-stats>div{padding-right:10px}
.reward-stats>div+div{padding-left:14px;border-left:1px solid rgba(120,96,60,.14)}
.reward-stats dt{font:400 10.5px/1 var(--sans);letter-spacing:.16em;color:var(--ink-4);text-transform:uppercase;margin-bottom:7px}
.reward-stats dd{margin:0;font:400 15px/1 var(--latin);color:var(--ink)}
.reward-fine{margin:0;font:400 11.5px/1.8 var(--sans);color:var(--ink-4);letter-spacing:.01em}
.reward-form{display:grid;gap:12px}
.reward-form label{display:grid;gap:8px;font:400 11.5px/1 var(--sans);letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase}
.reward-form textarea,.reward-form input[type=text],.reward-form input:not([type]){
width:100%;padding:13px 14px;border:1px solid rgba(120,96,60,.22);border-radius:var(--r-sm);
background:rgba(255,255,255,.62);color:var(--ink);
font:400 14px/1.75 var(--sans);letter-spacing:.01em;text-transform:none;resize:vertical;
}
.reward-form textarea{min-height:118px}
.reward-form textarea:focus,.reward-form input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,169,108,.16)}
.reward-form-foot{display:flex;align-items:center;justify-content:space-between;gap:14px}
.reward-form-foot>span{font:400 11.5px/1 var(--latin);color:var(--ink-4);letter-spacing:.06em}
.reward-form-foot .btn{min-height:44px;padding:0 20px;font-size:11.5px;letter-spacing:.14em}
.rewards .btn[disabled]{opacity:.42;cursor:not-allowed}
.reward-copies{display:grid;gap:8px;margin-bottom:16px}
.reward-copy-row{
display:grid;grid-template-columns:7.6em minmax(0,1fr) auto;gap:14px;align-items:center;
padding:11px 14px;border-radius:var(--r-sm);background:rgba(255,255,255,.5);
border:1px solid rgba(120,96,60,.12);
}
.reward-copy-row>span{font:400 11px/1.4 var(--sans);letter-spacing:.1em;color:var(--ink-4)}
.reward-copy-row>p{margin:0;font:400 12.5px/1.7 var(--sans);color:var(--ink-2)}
.reward-drop{
display:grid;place-items:center;gap:10px;min-height:130px;padding:18px;
border:1px dashed rgba(140,110,56,.42);border-radius:var(--r-sm);
background:rgba(255,253,247,.5);cursor:pointer;transition:all var(--t1) var(--ease);
}
.reward-drop:hover{border-color:var(--gold);background:rgba(201,169,108,.09)}
.reward-drop.is-over{border-color:var(--gold);background:rgba(201,169,108,.16)}
.reward-drop>span{font:400 12px/1.7 var(--sans);color:var(--ink-4);text-align:center;letter-spacing:.02em}
.reward-drop>img{max-width:100%;max-height:280px;border-radius:var(--r-xs);box-shadow:var(--lift-1);border:1px solid rgba(120,96,60,.2)}
.reward-drop.has-image{background:rgba(255,255,255,.4)}
.reward-rules{margin-top:16px;border-top:1px solid rgba(120,96,60,.14);padding-top:14px}
.reward-rules summary{
cursor:pointer;font:400 12px/1 var(--sans);letter-spacing:.12em;color:var(--gold-lo);list-style:none;
}
.reward-rules summary::-webkit-details-marker{display:none}
.reward-rules summary::marker{content:""}
.reward-rules summary::before{content:"✦ ";opacity:.7}
.reward-rules[open] summary{margin-bottom:12px}
.reward-rules ol{margin:0 0 10px;padding-left:1.3em;display:grid;gap:7px}
.reward-rules li{font:400 12.5px/1.8 var(--sans);color:var(--ink-2)}
.reward-rules p{margin:0;font:400 11.5px/1.8 var(--sans);color:var(--ink-4)}
.reward-ledger{margin-top:4px;padding:22px 26px;border-radius:var(--r-md);background:rgba(18,13,30,.72);border:1px solid rgba(201,169,108,.16)}
.reward-ledger h3{margin:0 0 14px;font:400 13px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.reward-ledger ul{margin:0;padding:0;list-style:none;display:grid;gap:0}
.reward-ledger li{
display:grid;grid-template-columns:8.4em 7.4em minmax(0,1fr) 5.4em;gap:14px;align-items:center;
padding:11px 0;border-top:1px solid rgba(201,169,108,.12);
font:400 12.5px/1.5 var(--sans);color:var(--moon-2);
}
.reward-ledger li:first-child{border-top:0}
.reward-ledger .rk{color:var(--moon)}
.reward-ledger .rs{font-size:11px;letter-spacing:.12em;color:var(--moon-3)}
.reward-ledger .rs.granted{color:var(--gold-hi)}
.reward-ledger .rs.rejected{color:#C98A86}
.reward-ledger .rd{color:var(--moon-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reward-ledger .rc{text-align:right;font-family:var(--latin);color:var(--gold)}
.reward-guest{
max-width:560px;margin:0 auto;padding:40px 38px 34px;text-align:center;border-radius:var(--r-md);
background:linear-gradient(178deg,var(--paper),var(--paper-2));color:var(--ink);
box-shadow:var(--lift-2),inset 0 0 0 1px rgba(120,96,60,.12);
}
.reward-guest-mark{width:54px;height:54px;margin:0 auto 20px;display:grid;place-items:center;border-radius:50%;font:400 22px/1 var(--serif);color:var(--gold-lo);background:radial-gradient(circle at 34% 28%,#FFFDF6,#EFE4CE);box-shadow:inset 0 0 0 1px rgba(140,110,56,.28),0 6px 18px rgba(60,40,20,.14)}
.reward-guest h3{margin:0 0 12px;font:400 22px/1.35 var(--serif);color:var(--ink)}
.reward-guest p{margin:0 0 22px;font:400 13.5px/1.9 var(--sans);color:var(--ink-2)}
.reward-guest .btn{width:100%;min-height:50px}
.reward-guest .reward-fine{margin-top:16px}
.field-hint{display:block;margin-top:7px;font:400 11px/1.7 var(--sans);letter-spacing:.02em;color:var(--ink-4);text-transform:none}
.reward-flash{margin-top:14px;padding:10px 14px;border-radius:var(--r-sm);background:rgba(201,169,108,.16);border:1px solid rgba(140,110,56,.3);color:var(--gold-lo)!important}
@media (max-width:980px){
.reward-grid{grid-template-columns:minmax(0,1fr)}
.reward-card-wide{grid-column:auto}
.reward-head{gap:20px;padding:22px 20px}
.reward-balance b{font-size:38px}
.reward-copy-row{grid-template-columns:minmax(0,1fr) auto;gap:10px}
.reward-copy-row>span{grid-column:1/-1}
.reward-copy-row>p{grid-column:1}
.reward-ledger li{grid-template-columns:7.2em minmax(0,1fr) 4.6em}
.reward-ledger .rd{display:none}
}
@media (max-width:680px){
.rewards{padding-top:20px}
.reward-card{padding:22px 20px 18px}
.reward-code code{font-size:15px;letter-spacing:.14em}
.reward-link{flex-direction:column}
.reward-link .reward-copy{width:100%;padding:10px}
.reward-form-foot{flex-direction:column;align-items:stretch;gap:10px}
.reward-form-foot .btn{width:100%}
header nav a{padding:7px 6px;font-size:11.5px;letter-spacing:.02em}
}
@media (prefers-reduced-motion:reduce){
.reward-copy,.reward-drop{transition:none}
}
/* ==========================================================================
33. v19.4 —— 嵌套 header 复位 + 奖励栅格配平
站点页眉是 body 直系 header，带墨色 sticky 带；奖励卡里的
会连带吃到那条渐变带与 78px 高度，必须复位。
========================================================================== */
header:not(body > header){
position:static;top:auto;height:auto;min-height:0;z-index:auto;
padding:0;background:none;border-bottom:0;box-shadow:none;
backdrop-filter:none;-webkit-backdrop-filter:none;transition:none;
}
.reward-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.reward-card header{align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(120,96,60,.14)}
.reward-card h3{font-size:22px}
.reward-form-foot{margin-top:2px}
@media (max-width:980px){
.reward-grid{grid-template-columns:minmax(0,1fr)}
}
/* ==========================================================================
34. v20 · 手机优先（≤719px 主档）
手机是主战场：单手可达、44px 触点、纸面呼吸、横滑牌扇有引导。
========================================================================== */
@media (max-width:719px){
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,summary,label,[role=button]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
input,textarea,select{font-size:16px!important} /* 防 iOS 聚焦自动放大 */
#grain{opacity:.5}
/* ---------- 页眉与底部导航 ---------- */
body>header{height:56px;padding:0 14px;gap:8px}
body>header .brand{gap:9px;min-width:0}
body>header .brandmark{width:30px;height:30px;font-size:15px}
body>header .brand>span{font-size:16px;letter-spacing:.04em;white-space:nowrap}
body>header .brand>span small{display:none}
#identityButton,#accountButton{min-height:34px;padding:0 11px;font-size:11.5px;letter-spacing:.06em}
#accountButton{padding:0 13px}
body>header>nav{
position:fixed;left:0;right:0;bottom:0;z-index:60;
display:flex;justify-content:space-around;align-items:stretch;
height:auto;padding:0 4px calc(6px + env(safe-area-inset-bottom));
background:linear-gradient(180deg,rgba(10,7,18,.86),rgba(4,3,10,.97));
box-shadow:0 -1px 0 rgba(201,169,108,.22),0 -18px 32px -20px rgba(0,0,0,.9);
-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)
}
body>header>nav a{
flex:1 1 0;min-height:50px;display:flex;align-items:center;justify-content:center;
padding:10px 2px 6px;font-size:12px;letter-spacing:.06em;color:var(--moon-3);
position:relative;text-align:center
}
body>header>nav a::after{
content:"";position:absolute;left:50%;bottom:2px;width:16px;height:2px;
transform:translateX(-50%) scaleX(0);transform-origin:center;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
transition:transform .32s var(--ease)
}
body>header>nav a[aria-current="page"]{color:var(--gold-hi)}
body>header>nav a[aria-current="page"]::after{transform:translateX(-50%) scaleX(1)}
body{padding-bottom:calc(62px + env(safe-area-inset-bottom))!important}
/* ---------- 首屏 ---------- */
section[id]{scroll-margin-top:70px}
.hero{padding:14px 0 6px}
.hero::before{opacity:.7}
.hero-kicker{font-size:9.5px;letter-spacing:.34em}
.hero h1{font-size:34px;line-height:1.16;letter-spacing:.01em}
.hero-lede{margin-top:14px;font-size:14px;line-height:1.95}
.hero-meta{font-size:10px;letter-spacing:.2em;line-height:2.1;opacity:.92;margin-top:16px}
/* ---------- 提问纸 ---------- */
.page,.shell{padding-inline:14px}
.paper,.reading-form{padding:20px 17px 22px}
.paper::before,.reading-form::before{inset:5px}
.reading-form{margin-top:18px;transform:none}
.reading-form::after{opacity:.5}
.field-head h2,.reading-form h2{font-size:21px}
textarea#question{min-height:104px;padding:14px 13px;line-height:1.85}
textarea#question::placeholder{font-size:14px;line-height:1.8}
.field-foot{font-size:11px;margin-top:8px}
.question-help{gap:8px;margin-top:12px}
.question-help>span{font-size:11px;letter-spacing:.06em}
.question-help button{min-height:44px;padding:0 15px;font-size:12.5px}
.reversal-row,.field-check{min-height:44px;gap:10px}
.field-check input[type=checkbox]{width:20px;height:20px}
.primary,#startReading{min-height:54px;font-size:13px;letter-spacing:.16em}
/* ---------- 牌阵横滑 ---------- */
.spread-label{font-size:12px;margin-top:20px}
.spread-label small{font-size:9px;letter-spacing:.2em}
.spreads{
display:flex;flex-wrap:nowrap;gap:10px;margin-inline:-14px;padding:2px 14px 10px;
overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none
}
.spreads::-webkit-scrollbar{display:none}
.spread{
flex:0 0 47%;min-width:0;min-height:136px;padding:14px 12px;scroll-snap-align:center
}
.spread b{font-size:14px}
.spread small{font-size:10.5px;line-height:1.6}
.spread i{font-size:10px}
.spread-map{height:34px}
/* ---------- 仪式 ---------- */
.ritual-shell{padding:18px 15px 16px;border-radius:var(--r-md)}
.ritual-heading h3,.ritual-heading h2{font-size:23px;line-height:1.32}
.ritual-heading p,.ritual-lead{font-size:13px;line-height:1.8}
.ritual-kicker{font-size:9px;letter-spacing:.3em}
.ritual-close{width:44px;height:44px;right:6px;top:6px;display:flex;align-items:center;justify-content:center}
.ritual-steps{gap:6px;margin-top:16px;flex-wrap:nowrap;overflow:hidden}
.ritual-steps span{
min-height:34px;padding:7px 9px;font-size:10px;letter-spacing:.08em;white-space:nowrap;
display:inline-flex;align-items:center;gap:4px
}
.ritual-steps i{font-size:9px}
.ritual-body{margin-top:14px}
.table{height:min(46svh,360px);min-height:270px;margin-inline:-15px;padding-inline:15px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);
mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
.ritual-hint{font-size:12px;line-height:1.9;margin-top:12px}
.ritual-ctl{margin-top:12px}
.pick-line{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pick-count{font-size:15px}
.pick-next{font-size:11.5px}
.pick-strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-top:8px;padding-bottom:2px}
.pick-strip::-webkit-scrollbar{display:none}
.pick-slot{flex:0 0 auto;font-size:10.5px;padding:6px 9px;min-height:30px}
.ritual-primary{min-height:52px;font-size:12.5px}
.ritual-quiet{min-height:44px}
/* 牌扇引导：左右步进 + 位置轨 + 随机抽一张 */
.fan-nav{display:flex;align-items:center;gap:8px;margin-top:10px}
.fan-nav .fan-step{
flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
font-size:19px;line-height:1;color:var(--gold-hi);background:rgba(243,238,248,.05);
box-shadow:inset 0 0 0 1px rgba(201,169,108,.28);border-radius:var(--r-sm)
}
.fan-rail{position:relative;flex:1 1 auto;height:3px;border-radius:2px;background:rgba(201,169,108,.2);overflow:hidden}
.fan-rail i{position:absolute;top:0;bottom:0;left:0;width:24%;border-radius:2px;
background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));transition:left .18s linear,width .18s linear}
.fan-random{
flex:0 0 auto;min-height:44px;padding:0 14px;font-size:11.5px;letter-spacing:.08em;
color:var(--gold-hi);background:rgba(201,169,108,.1);box-shadow:inset 0 0 0 1px rgba(201,169,108,.34);
border-radius:var(--r-sm)
}
/* ---------- 结果 ---------- */
.result-wrap,.result-shell{padding-inline:14px}
.result-head h3{font-size:26px}
.result-head .eyebrow{font-size:9px;letter-spacing:.3em}
.result-sub{font-size:12.5px;line-height:1.75}
.result-tabs{gap:7px;margin:16px 0 14px;overflow-x:auto;flex-wrap:nowrap;scroll-snap-type:x mandatory;scrollbar-width:none}
.result-tabs::-webkit-scrollbar{display:none}
.result-tabs button{flex:0 0 auto;min-height:52px;padding:9px 13px;font-size:10.5px;scroll-snap-align:start}
.result-tabs button span{font-size:12.5px;margin-top:3px;white-space:nowrap}
.result-card{
grid-template-columns:minmax(0,1fr);gap:0;row-gap:0;
padding:20px 18px 22px;border-radius:var(--r-md)
}
.result-card>.real-art{
grid-column:1;grid-row:auto;align-self:center;
width:min(54%,196px);margin:2px auto 18px;
box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(201,169,108,.3),
0 12px 26px -14px rgba(60,40,20,.55),0 34px 60px -34px rgba(60,40,20,.5)
}
.result-card>*:not(.real-art){grid-column:1}
.result-position{
justify-self:center;width:auto;margin:0 0 12px;padding:0 0 8px;
font-size:9.5px;letter-spacing:.26em
}
.result-card h4{text-align:center;font-size:22px;line-height:1.4;letter-spacing:.12em;margin:0 0 16px}
.result-card p{font-size:14px;line-height:1.98;margin:12px 0;max-width:34em}
.result-card p strong{font-size:10px;letter-spacing:.24em;margin-bottom:7px}
.result-card .card-meaning,.result-card .position-meaning{max-width:34em}
.result-card .position-meaning{margin-top:16px;padding-top:15px;border-top:1px solid rgba(201,169,108,.22)}
.result-card .card-info{justify-self:center;min-height:44px;margin-top:18px;padding:12px 16px 0;font-size:12px}
.local-reflection,.result-card details{font-size:12.5px}
.local-reflection summary{min-height:44px;display:flex;align-items:center}
.result-actions{flex-direction:column;gap:10px;margin-top:20px}
.result-actions .btn{flex:1 1 auto;width:100%;min-height:52px}
.service-note{font-size:11px;line-height:1.8;margin-top:12px}
/* ---------- AI 对话 ---------- */
.chat-shell,.conversation{--measure:100%;padding-inline:14px}
.chat-head h4{font-size:19px}
.chat-head span,.chat-head .eyebrow{font-size:9px;letter-spacing:.3em}
.chat-note{font-size:12px;line-height:1.8}
.conversation .chat-messages{padding:8px 0 2px}
.chat-bubble{max-width:92%;padding:14px 15px;font-size:14px;line-height:1.95}
.chat-bubble small,.chat-bubble .bubble-tag{font-size:9.5px;letter-spacing:.2em}
.chat-bubble.assistant:has(.grounded-reading){padding:0}
.reading-recommendation{padding:16px 15px;font-size:14px;line-height:1.95}
.reading-recommendation small{font-size:9.5px;letter-spacing:.24em}
.reading-synthesis{padding:14px 15px;font-size:13.5px;line-height:1.95}
.reading-synthesis strong{font-size:10px;letter-spacing:.22em}
.reading-card summary{min-height:52px;padding:12px 4px;grid-template-columns:5.6em minmax(0,1fr)}
.reading-card summary b{font-size:9px}
.reading-card summary span span,.reading-card summary>span>span{font-size:13px}
.reading-expand{width:26px;height:26px}
.reading-card-body{font-size:13.5px;line-height:1.95;padding:4px 4px 14px}
.reading-evidence summary{min-height:44px;font-size:11.5px}
.wait-block,.chat-wait{padding:16px 15px}
/* 输入条：贴在底部导航上，随时可回话 */
.conversation form{
position:sticky;bottom:0;z-index:20;margin-top:14px;
padding:12px 0 calc(8px + env(safe-area-inset-bottom));
background:linear-gradient(180deg,rgba(251,247,239,0),rgba(251,247,239,.96) 22%,var(--paper))
}
.conversation form>label{font-size:11px;padding-top:0;border-top:0}
.chat-compose{gap:9px}
.chat-compose textarea,#chatInput{min-height:76px;padding:12px 13px;line-height:1.7}
.chat-compose button,#chatSend{flex:0 0 88px;min-height:76px;font-size:12px;letter-spacing:.1em}
.conversation form>small{font-size:10.5px;margin-top:7px}
/* ---------- 牌库 ---------- */
.library .page,.library .shell{padding-inline:14px}
.library h1,.library h2{font-size:30px;line-height:1.2}
.library .lede,.library-lead{font-size:13px;line-height:1.85}
.deck-meta,.deck-count{font-size:11px}
.deck-controls{gap:8px;margin-top:14px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding-bottom:4px}
.deck-controls::-webkit-scrollbar{display:none}
.deck-controls button{flex:0 0 auto;min-height:44px;padding:0 14px;font-size:12px}
.library input[type=search],.deck-search{min-height:48px;padding:0 14px}
.deck-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.deck-card,.mini-card{border-radius:var(--r-sm)}
.deck-card b,.mini-card b{font-size:11.5px}
.library-pager{gap:10px;margin-top:18px}
.library-pager button{min-height:44px;min-width:44px;font-size:12px}
.deck-note,.library-note{font-size:11px;line-height:1.8}
/* ---------- 记录 ---------- */
.history-row{padding:15px 0;gap:10px}
.history-row b{font-size:14px}
.history-row small,.history-row p{font-size:11.5px}
.history-actions button{min-height:44px;padding:0 14px;font-size:12px}
.history-tools{gap:8px}
.history-tools button{min-height:44px}
/* ---------- 邀友有礼 ---------- */
.rewards .page,.rewards .shell{padding-inline:14px}
.rewards h1,.rewards h2{font-size:28px;line-height:1.22}
.reward-head{flex-direction:column;align-items:flex-start;gap:6px}
.reward-balance b{font-size:44px}
.reward-grid{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:16px}
.reward-card{padding:18px 16px}
.reward-card h3{font-size:16px}
.reward-lead,.reward-note{font-size:12.5px;line-height:1.85}
.reward-code{font-size:17px;letter-spacing:.16em;padding:12px 14px}
.reward-copy,.reward-drop,.reward-link{min-height:44px;font-size:12.5px}
.reward-copy-row{gap:8px;flex-wrap:wrap}
.reward-form textarea{min-height:112px;padding:13px;font-size:16px}
.reward-form-foot{flex-direction:column;align-items:stretch;gap:8px}
.reward-form-foot button{min-height:50px;width:100%}
.reward-drop{min-height:150px}
.reward-stats{gap:10px;flex-wrap:wrap}
.reward-ledger{font-size:11.5px}
.reward-rules{font-size:11.5px;line-height:1.9}
/* ---------- 弹层（账号 / 牌义 / 授权） ---------- */
dialog[open]{
width:auto;max-width:none;margin:0;padding:0;
position:fixed;left:0;right:0;bottom:0;top:auto;
max-height:92svh;border-radius:14px 14px 0 0;
padding-bottom:calc(10px + env(safe-area-inset-bottom))
}
dialog[open]>form,dialog[open] .dialog-body,.dialog-body{padding:20px 18px 18px}
dialog[open] h3,dialog[open] h2{font-size:20px}
dialog[open] input,dialog[open] select,dialog[open] textarea{min-height:50px;font-size:16px}
dialog[open] .primary,dialog[open] .btn{min-height:52px;width:100%}
dialog[open] .field-hint,.field-hint{font-size:11px;line-height:1.75}
/* ---------- 页脚 ---------- */
.foot-in{padding:26px 0 8px}
.foot-lead span{font-size:18px}
.foot-cols{grid-template-columns:1fr 1fr;gap:14px 12px;font-size:11.5px}
.foot-note{font-size:10px;line-height:1.9}
}
/* 更窄的机器：iPhone SE / 小屏安卓 */
@media (max-width:379px){
.hero h1{font-size:30px}
.spread{flex-basis:56%}
body>header>nav a{font-size:11px}
.result-card{padding:18px 15px 20px}
}
/* 无 hover 的设备：把 hover 才出现的提示做成常显 */
@media (hover:none){
.t-card:not(:disabled):not(.is-dealt):hover{transform:none}
.deck-card:hover img,.mini-card:hover img{transform:none}
}
/* ========================================================================== */
/* 35. v20.1 · 仪式全屏 + 结果卡紧凑两栏（手机） */
/* ========================================================================== */
@media (max-width:719px){
/* --- 35.1 仪式：由页内 section 变成整屏 sheet，操作区始终在首屏 --- */
#ritual{
position:fixed; inset:0; z-index:90; margin:0 !important; padding:0;
overflow:hidden;
background:
radial-gradient(120% 68% at 82% -12%,rgba(150,116,200,.20),transparent 62%),
radial-gradient(90% 50% at 8% 108%,rgba(201,169,108,.10),transparent 66%),
linear-gradient(178deg,#151024 0%,#0C0916 58%,#08060E 100%);
}
#ritual[hidden]{display:none !important}
body:has(#ritual:not([hidden])){overflow:hidden}
body:has(#ritual:not([hidden])) > header{pointer-events:none}
#ritual .ritual-shell{
display:flex; flex-direction:column;
height:100%; min-height:0; overflow:hidden;
padding:calc(12px + env(safe-area-inset-top)) 15px calc(10px + env(safe-area-inset-bottom));
border-radius:0; box-shadow:none;
}
#ritual .ritual-shell::before{display:none}
#ritual .ritual-heading{flex:0 0 auto}
#ritual .ritual-heading h3{margin:8px 0 5px;font-size:21px;line-height:1.3}
#ritual .ritual-heading p{
font-size:12px; line-height:1.6;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#ritual .ritual-close{
position:relative; top:0; right:0; flex:0 0 auto;
width:40px;height:40px;margin:-6px -4px 0 8px;
}
#ritual .ritual-steps{
flex:0 0 auto; margin-top:10px; padding:9px 0; gap:6px;
border-top:1px solid rgba(201,169,108,.12);
border-bottom:1px solid rgba(201,169,108,.12);
}
#ritual .ritual-steps span{padding:6px 9px;font-size:10.5px;min-height:32px;letter-spacing:.06em}
/* 牌桌吃满剩余高度，横向仍可滑 */
#ritual .table{
flex:1 1 auto; min-height:0; height:auto;
margin:4px -15px 0; padding:0 15px;
overflow-x:auto; overflow-y:hidden;
}
#ritual .table.is-deep{height:auto}
/* 控件区固定在最底 */
#ritual .ritual-ctl{
flex:0 0 auto; min-height:0; margin-top:6px; padding:0;
}
#ritual .ritual-ctl .ritual-question{margin-bottom:8px}
#ritual .ritual-ctl .ritual-primary,
#ritual .ritual-ctl .btn{min-height:46px}
#ritual .fan-nav{margin-top:8px}
#ritual .fan-nav .fan-step{width:42px;height:42px}
#ritual .ritual-bottom{display:none}
/* --- 35.2 结果卡：牌面缩到左侧 98px，标题右边，正文立刻进首屏 --- */
.result-card{
grid-template-columns:98px minmax(0,1fr);
column-gap:14px; row-gap:0;
padding:16px 15px 18px;
}
.result-card > .real-art{
grid-column:1; grid-row:1 / span 2;
width:98px; margin:0; align-self:start; justify-self:start;
}
.result-card > .result-position{
grid-column:2; grid-row:1;
justify-self:start; width:max-content; max-width:100%;
margin:0 0 8px;
}
.result-card > h4{
grid-column:2; grid-row:2;
text-align:left; font-size:19px; line-height:1.34;
letter-spacing:.1em; margin:0; align-self:start;
}
.result-card > p,
.result-card > .card-info,
.result-card > .local-reflection,
.result-card > details{grid-column:1 / -1}
.result-card > p:first-of-type{margin-top:18px}
.result-card .card-info{justify-self:start;margin-top:14px;padding:12px 15px 0;min-height:44px}
/* --- 35.3 真人咨询未开放时的视觉弱化 --- */
#askHuman[data-off="1"]{opacity:.55}
#askHuman[data-off="1"]::after{content:" · 暂未开放";font-size:.92em;letter-spacing:.08em}
/* --- 35.4 首屏那块略亮的整宽矩形：改成柔和渐隐 --- */
.hero{
background:none !important;
border-radius:0;
}
}
/* ---- 35.5 v20.2 修正：v20 的 `.result-card>*:not(.real-art){grid-column:1}`
特异性 (0,2,0) 高于 `.result-card > h4` (0,1,1)，标题被挤到第 1 列、
压在牌面下面看不见。这里用同等特异性 + !important 把三块归位。 ---- */
@media (max-width:719px){
.result-card > .result-position{grid-column:2 !important;grid-row:1 !important;justify-self:start !important;width:max-content !important;max-width:100% !important;margin:0 0 8px !important}
.result-card > h4{grid-column:2 !important;grid-row:2 !important;text-align:left !important;align-self:start !important;font-size:19px !important;line-height:1.34 !important;letter-spacing:.1em !important;margin:0 !important}
.result-card > p,.result-card > .card-info,.result-card > .local-reflection,.result-card > details{grid-column:1 / -1 !important}
.result-card > .real-art{grid-column:1 !important;grid-row:1 / span 2 !important;width:98px !important;margin:0 !important;justify-self:start !important;align-self:start !important}
}
/* ---- 35.6 仪式 sheet 必须盖住页眉与页脚 ----
`main#home` 本身是 `position:relative;z-index:1` 的层叠上下文，
把 sheet 的 `z-index:90` 关在了里面，于是 header(z:60)/footer 画在 sheet 之上。
开会时把 main 抬到 header/footer 之上即可。 ---- */
@media (max-width:719px){
body:has(#ritual:not([hidden])) > main{position:relative;z-index:120}
body:has(#ritual:not([hidden])) > header,
body:has(#ritual:not([hidden])) > footer{pointer-events:none;visibility:hidden}
}
/* ---- 35.7 v20.4 · 结果卡头部收紧 + 牌桌高度贴身 ----
之前的 span 让 grid 把牌面高度分摊到两行，标题被顶到 170px 之下。
改成三件都放第 1 行：牌面在左列，标签与标题叠在右列（标题用 margin-top 让位）。 ---- */
@media (max-width:719px){
.result-card > .real-art{grid-row:1 !important;align-self:start !important}
.result-card > .result-position{grid-row:1 !important;align-self:start !important}
.result-card > h4{
grid-row:1 !important;align-self:start !important;
margin-top:36px !important;
}
.result-card > p:first-of-type{margin-top:20px !important}
/* 牌桌不再吃满整屏：贴近牌扇高度，上下自动留白，控件仍在最底 */
#ritual .table{
flex:0 1 auto;height:min(42svh,286px);
margin-block:auto;
}
}
/* ---- 35.8 v20.5 · 结果卡：基础牌义挪到牌面右侧，填掉标题下的空白 ---- */
@media (max-width:719px){
.result-card > p.card-meaning{
grid-column:2 !important;grid-row:1 !important;
align-self:start !important;margin-top:92px !important;
font-size:13px !important;line-height:1.85 !important;
}
.result-card > p.position-meaning{
grid-column:1 / -1 !important;
margin-top:6px !important;
padding-top:16px !important;
border-top:1px solid rgba(201,169,108,.22) !important;
}
}
/* ---- 35.9 v20.6 · 仪式牌桌：把空白收成一条，牌扇贴近步骤条，控件钉在底部 ---- */
@media (max-width:719px){
#ritual .table{
flex:0 0 auto;
height:min(38svh,244px);
margin:6px -15px 0;
padding:0 15px;
background:
radial-gradient(58% 74% at 50% 54%,rgba(201,169,108,.11),transparent 72%),
radial-gradient(90% 60% at 50% 120%,rgba(150,116,200,.10),transparent 70%);
box-shadow:inset 0 1px 0 rgba(201,169,108,.10),inset 0 -1px 0 rgba(201,169,108,.10);
}
#ritual .ritual-ctl{margin-top:auto}
}
/* ---- 35.10 v20.7 · 牌桌铺满剩余高度（空白落在桌面上而不是桌面下） ---- */
@media (max-width:719px){
#ritual .table{
flex:1 1 auto;height:auto;min-height:0;
max-height:min(46svh,322px);
}
#ritual .ritual-ctl{margin-top:10px}
}
/* ---- 35.11 v20.8 · AI 页手机排版收紧 ---- */
@media (max-width:719px){
.conversation{--measure:100%}
.grounded-reading{max-width:none}
.chat-bubble.assistant:has(.grounded-reading){padding:0}
.chat-messages{padding:12px 14px 4px}
.reading-recommendation{font-size:15.5px}
.reading-recommendation p,.reading-synthesis p{font-size:15.5px;line-height:1.9}
.reading-card summary b{font-size:9px}
.reading-card-body{font-size:14px;line-height:1.85}
.chat-bubble.user p{font-size:14.5px;line-height:1.8}
.chat-head h4{font-size:21px}
#chatForm .chat-compose textarea{min-height:64px}
}
/* ---- 35.12 v20.9 · 压过 `.grounded-reading .reading-recommendation p`（0,2,1） ---- */
@media (max-width:719px){
.conversation .grounded-reading .reading-recommendation p{
font-size:15.5px;line-height:1.88;letter-spacing:.02em;
}
.conversation .grounded-reading .reading-synthesis p{
font-size:15px;line-height:1.86;
}
.conversation .reading-recommendation{padding:12px 0 8px}
.conversation .chat-messages{padding:8px 6px 2px}
.conversation .reading-card summary{font-size:14px}
.conversation .reading-card-body p{font-size:13.8px;line-height:1.85}
}
/* ---- 36. v21 · 邮箱验证码 ---- */
.code-row{display:flex;gap:8px;align-items:stretch}
.code-row input{flex:1 1 auto;min-width:0;letter-spacing:.16em}
.code-send{flex:0 0 auto;min-height:48px;padding:0 14px;border:1px solid var(--gold-line);border-radius:var(--r-sm);
background:linear-gradient(168deg,rgba(201,169,108,.14),rgba(201,169,108,.04));color:var(--gold-hi);
font:500 12.5px/1 var(--sans);letter-spacing:.06em;cursor:pointer;white-space:nowrap;transition:background var(--t1) var(--ease),opacity var(--t1)}
.code-send:hover:not(:disabled){background:linear-gradient(168deg,rgba(201,169,108,.24),rgba(201,169,108,.08))}
.code-send:disabled{opacity:.55;cursor:default}
.code-row .code-send:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:719px){
#accountDialog .commerce-shell{padding:22px 18px 26px}
#accountDialog h2{font-size:24px}
#accountDialog .account-hint{font-size:13px;line-height:1.85}
#accountDialog label{font-size:12.5px}
#accountDialog input{min-height:48px;font-size:16px}
#accountDialog .btn{min-height:50px;font-size:14px}
.code-row{gap:6px}
.code-send{padding:0 11px;font-size:12px}
#accountDialog .account-links{font-size:13px}
#accountDialog dialog,#accountDialog{--dlg-pad:18px}
}
/* ---------------------------------------------------------------
37. v22 · 手机端版面校正
—— 修掉奖励页整截版心被 padding:0 吃掉、首屏与纸卡距离过大、
AI 正文行距过松、结果页顶部空档等问题。
--------------------------------------------------------------- */
@media (max-width:719px){
/* 奖励页：把被 .rewards{padding:34px 0 10px} 覆盖掉的版心补回来 */
.section.rewards{
padding:24px clamp(16px,4.4vw,22px) 10px;
overflow-x:clip;
}
.rewards .section-top{gap:10px;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px}
.rewards .section-top h2{margin:12px 0 8px;font-size:27px;letter-spacing:.05em;line-height:1.36}
.rewards .section-top p{font-size:12.8px;line-height:1.85;max-width:32ch}
.rewards .eyebrow{font-size:9px;letter-spacing:.3em}
#rewardBody{min-width:0;margin-top:16px;gap:16px}
.reward-card,.reward-card-wide,.reward-head,.reward-guest{min-width:0}
.reward-head{padding:18px 18px 16px;gap:10px;flex-direction:column;align-items:flex-start}
.reward-balance b{font-size:40px}
.reward-guest{padding:34px 22px 30px}
.reward-grid{grid-template-columns:minmax(0,1fr);gap:14px}
.reward-code code{font-size:15px;letter-spacing:.14em}
.reward-link{gap:6px}
.reward-stats{padding-top:10px}
/* 首屏：标题与纸卡之间收一口气 */
.hero{padding-bottom:6px}
.reading-form{margin-top:0}
#reading .hero + *{margin-top:0}
/* 结果：顶部空档收紧，牌面再收一格，正文行宽更稳 */
#result{padding-top:18px}
.result-wrap,.result-shell{padding-inline:12px}
.result-card{padding:16px 14px 18px;row-gap:0}
.result-card p{font-size:13.8px;line-height:1.95;letter-spacing:.01em}
/* AI：气泡节奏与行距（原 2 倍行高在手机上过于松散） */
.conversation .chat-messages{gap:18px;padding:10px 8px 2px}
.conversation .grounded-reading p,
.conversation .reading-recommendation p,
.conversation .reading-synthesis p{line-height:1.92}
.conversation .chat-bubble.user p{line-height:1.8}
.conversation .chat-bubble small{margin-bottom:5px}
/* 悬停类效果在触屏上无意义，去掉以免出现「粘住的 hover」 */
.reward-card:hover,.mini-card:hover,.result-card:hover{transform:none}
}
/* 任何宽度下都不该出现横向滚动 */
html,body{overflow-x:clip}
/* ---------------------------------------------------------------
38. v22.1 · 手机端细节（奖励页文案与按钮）
--------------------------------------------------------------- */
@media (max-width:719px){
/* 标题行：刷新挪到右侧，别单独占一行 */
.rewards .section-top{flex-wrap:nowrap;align-items:flex-end;gap:14px}
.rewards .section-top>div:first-child{flex:1 1 auto;min-width:0}
.rewards .history-tools{flex:0 0 auto;padding-bottom:6px}
.rewards #rewardsRefresh{font-size:11px;letter-spacing:.02em;white-space:nowrap}
/* 游客卡：22px + .1em 字距会让标题折成两截，收到能一行到两行自然断行的尺寸 */
.reward-guest{padding:30px 20px 26px;gap:14px}
.reward-guest h2,.reward-guest h3{
font-size:19px;line-height:1.62;letter-spacing:.01em;
max-width:15em;margin-inline:auto;
}
.reward-guest p{font-size:12.8px;line-height:1.85;letter-spacing:.01em}
.reward-guest .btn{min-height:50px;font-size:12.5px;letter-spacing:.1em}
.reward-guest>span:first-child,.reward-guest>div:first-child{transform:scale(.82)}
/* 结果页：牌义按钮与最后一行说明不要贴着卡片底边 */
.result-card{margin-bottom:2px}
.result-card .card-info{margin-top:12px;padding-top:12px}
}
/* ---------------------------------------------------------------
39. v22.2 · 奖励页标题对齐 & 游客卡文案断行
--------------------------------------------------------------- */
@media (max-width:719px){
/* 标题一律左对齐，刷新固定在右上角 */
.rewards .section-top{
flex-direction:row;flex-wrap:nowrap;align-items:flex-start;
justify-content:space-between;text-align:left;gap:12px;
}
.rewards .section-top>div:first-child{flex:1 1 auto;min-width:0;text-align:left}
.rewards .eyebrow{justify-content:flex-start}
.rewards .section-top h2{margin:10px 0 8px;text-align:left;font-size:26px}
.rewards .section-top p{text-align:left;max-width:none;padding-right:4px}
.rewards .history-tools{align-self:flex-start;padding-top:26px;padding-bottom:0}
.rewards #rewardsRefresh{font-size:10.5px;letter-spacing:.02em}
/* 游客卡：标题不再被 max-width 掐断 */
.reward-guest h2,.reward-guest h3{
font-size:18.5px;line-height:1.6;letter-spacing:.02em;
max-width:none;text-wrap:balance;
}
.reward-guest{padding:26px 18px 24px;gap:12px}
.reward-guest p{font-size:12.6px;line-height:1.85}
}
/* ==========================================================================
40. v23 · 切牌不卡 + 十张牌看得全
========================================================================== */
/* ---- 40.1 抬起一叠：容器一个属性，替掉每张牌各写一次样式 ---- */
.table-inner[data-lift="0"]>.t-card[data-pile="0"],
.table-inner[data-lift="1"]>.t-card[data-pile="1"],
.table-inner[data-lift="2"]>.t-card[data-pile="2"]{
--lift:-16px;
will-change:transform;
}
@media(hover:none){
.table-inner[data-lift]>.t-card{--lift:0px!important}
}
/* ---- 40.2 摊开的牌带序号：十张牌一眼对上牌位 ---- */
.t-card.is-dealt[data-pos]::after{
content:attr(data-pos);
position:absolute;left:-3px;top:-3px;z-index:3;
min-width:15px;padding:2px 3px;
font:600 8.5px/1.1 var(--latin);font-style:normal;letter-spacing:.04em;
color:var(--gold-hi);text-align:center;
background:rgba(6,4,12,.86);
border:1px solid rgba(201,169,108,.55);
border-radius:2px;
pointer-events:none;
}
@media(max-width:719px){
/* 摊牌 / 翻牌阶段：桌面留足高度，几何按这个高度算 */
#ritual[data-stage="deal"] .table,
#ritual[data-stage="reveal"] .table{
flex:1 1 auto;min-height:min(56svh,360px);max-height:min(58svh,392px);
}
/* 选牌条收成一行横向滚动：十格不再折成四行把桌面挤没 */
#ritual .pick-strip{
flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
gap:5px;margin-bottom:12px;padding-bottom:3px;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
#ritual .pick-strip::-webkit-scrollbar{display:none}
#ritual .pick-slot{flex:0 0 auto;padding:4px 9px 4px 4px;font-size:10px;letter-spacing:.02em}
#ritual .pick-slot i{width:14px;height:14px;font-size:8px}
#ritual .pick-line{margin-bottom:8px;font-size:11px;gap:10px}
/* 十张牌时牌桌更高一点，牌就能更大 */
#ritual[data-stage="deal"] .table.is-deep{min-height:min(60svh,392px);max-height:min(62svh,420px)}
}
/* ============================================================
41. v23.5 · 选牌台（手机）：牌更大、扇面居中、进度改圆点、
未选够的按钮改成描边
============================================================ */
/* 桌面与手机通用：牌位标签用 em 包裹，桌面保持原样 */
.pick-slot em{font-style:normal}
@media (max-width:719px){
/* 牌桌：桌面 + 地平线；空白变成"桌面留白"而不是空洞 */
#ritual .table{
background:
radial-gradient(64% 78% at 50% 56%,rgba(201,169,108,.13),transparent 74%),
radial-gradient(92% 58% at 50% 126%,rgba(150,116,200,.11),transparent 72%),
linear-gradient(180deg,transparent 62.7%,rgba(201,169,108,.15) 63%,transparent 63.3%);
box-shadow:inset 0 1px 0 rgba(201,169,108,.10),inset 0 -1px 0 rgba(201,169,108,.10);
}
/* 扇面弧线只向下鼓，肉眼看会偏低：整块上提，视觉居中 */
#ritual[data-stage="fan"] .table-inner{top:-34px}
/* 进度：十个圆形数字点，一行放得下，不再横向滚动切掉半个标签 */
#ritual .pick-strip{
flex-wrap:nowrap;overflow:visible;justify-content:center;
gap:7px;margin-bottom:14px;padding:0;
-webkit-mask-image:none;mask-image:none;
}
#ritual .pick-slot{
flex:0 0 auto;
width:27px;height:27px;padding:0;gap:0;
align-items:center;justify-content:center;
border-radius:50%;border-style:solid;border-color:rgba(201,169,108,.22);
background:rgba(243,238,248,.03);
}
#ritual .pick-slot em{display:none}
#ritual .pick-slot i{width:auto;height:auto;background:none;font-size:10px;color:rgba(243,238,248,.5)}
#ritual .pick-slot.on{
border-color:rgba(235,213,162,.9);
background:var(--grad-gold-flat);
box-shadow:0 0 0 3px rgba(201,169,108,.14),0 4px 10px rgba(0,0,0,.4);
}
#ritual .pick-slot.on i{background:none;color:#1B1410;font-weight:700}
/* 未选够：描边细字，不再是一整块灰 */
#ritual .ritual-primary:disabled{
opacity:1;filter:none;
background:transparent;
color:rgba(235,213,162,.62);
font-weight:500;letter-spacing:.2em;
box-shadow:inset 0 0 0 1px rgba(201,169,108,.3);
}
#ritual .drag-tip{font-size:10.5px;letter-spacing:.18em;opacity:.8;margin-top:10px}
#ritual .pick-line{margin-bottom:11px}
#ritual .pick-count{font-size:14px}
}
/* ---------- 41b. v23.5 选牌台：牌放大到原生尺寸 + 桌面光晕更集中 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .t-card{width:100px;height:168px}
#ritual[data-stage="fan"] .table{
background:
radial-gradient(58% 46% at 50% 46%, rgba(201,169,108,.13), rgba(201,169,108,0) 72%),
radial-gradient(120% 90% at 50% 40%, rgba(38,26,54,.9), rgba(12,8,20,0) 78%);
}
#ritual[data-stage="fan"] .table::after{
content:"";position:absolute;left:0;right:0;top:63%;height:1px;
background:linear-gradient(90deg,rgba(201,169,108,0),rgba(201,169,108,.34),rgba(201,169,108,0));
pointer-events:none;
}
}
/* ---------- 41c. v23.5 选牌台：收掉牌桌里的死黑，扇面贴着桌面 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{
flex:0 0 auto;width:100%;max-width:100%;min-width:0;height:262px;min-height:0;max-height:262px;margin:6px auto 0;
background:
radial-gradient(56% 44% at 50% 44%, rgba(201,169,108,.14), rgba(201,169,108,0) 74%),
radial-gradient(ellipse 62% 20% at 50% 94%, rgba(201,169,108,.17), rgba(201,169,108,0) 72%),
radial-gradient(130% 96% at 50% 38%, rgba(40,27,57,.92), rgba(10,7,18,0) 80%);
}
#ritual[data-stage="fan"] .table-inner{top:-6px}
#ritual[data-stage="fan"] .table::after{top:auto;bottom:12px;height:1px;
background:linear-gradient(90deg,rgba(201,169,108,0),rgba(201,169,108,.30),rgba(201,169,108,0))}
#ritual[data-stage="fan"] .ritual-ctl{margin-top:20px;padding-bottom:2px}
#ritual[data-stage="fan"] .t-card{width:104px;height:172px}
}
/* ---------- 41d. v23.5 选牌台：把屏幕竖直方向用满，控件贴底 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{
flex:1 1 auto;height:auto;min-height:236px;max-height:none;
display:flex;align-items:center;
}
#ritual[data-stage="fan"] .table-inner{top:-34px}
#ritual[data-stage="fan"] .ritual-ctl{margin-top:auto}
#ritual[data-stage="fan"] .ritual-ctl .pick-line{margin-bottom:2px}
}
/* ---------- 41e. v23.5 选牌台：桌面铺满，光晕跟着扇面走 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{
background:
radial-gradient(72% 34% at 50% 50%, rgba(201,169,108,.16), rgba(201,169,108,0) 76%),
radial-gradient(150% 62% at 50% 50%, rgba(44,30,62,.95), rgba(10,7,18,0) 82%),
linear-gradient(180deg, rgba(10,7,18,.92), rgba(17,12,27,.86) 46%, rgba(10,7,18,.94));
box-shadow:inset 0 1px 0 rgba(201,169,108,.10), inset 0 -1px 0 rgba(201,169,108,.14);
}
#ritual[data-stage="fan"] .t-card{width:120px;height:198px}
}
/* 牌桌改成 flex 之后，.table-inner 会被 flex 收缩（5648 → 330），牌全挤在一处：
必须显式禁止收缩，内层宽度由 JS 精确设置。 */
@media(max-width:719px){
#ritual[data-stage="fan"] .table-inner{flex:0 0 auto;min-width:max-content}
}
/* ---------- 41f. v23.5 选牌台：牌桌贴住扇面，控件沉底 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{
flex:1 1 auto;height:auto;min-height:340px;max-height:none;
background:
radial-gradient(64% 40% at 50% 54%, rgba(201,169,108,.14), rgba(201,169,108,0) 76%),
radial-gradient(120% 52% at 50% 104%, rgba(198,160,96,.12), rgba(198,160,96,0) 72%),
linear-gradient(180deg, rgba(9,6,16,.97), rgba(18,12,28,.93) 52%, rgba(7,5,12,.99));
box-shadow:inset 0 1px 0 rgba(201,169,108,.10), inset 0 -1px 0 rgba(201,169,108,.16);
}
#ritual[data-stage="fan"] .ritual-ctl{margin-top:auto}
/* 桌沿：一条极淡的落影，把"桌"和"墙"分开 */
#ritual[data-stage="fan"] .table::after{
content:"";position:absolute;left:8%;right:8%;bottom:-1px;height:10px;
background:linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,0));
pointer-events:none;
}
}
/* ---------- 41g. v23.5 选牌台：桌面通栏 + 禁用态不再像个空输入框 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{
width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
box-shadow:none;
-webkit-mask-image:linear-gradient(180deg,#000 0,#000 84%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0,#000 84%,transparent 100%);
}
#ritual[data-stage="fan"] .table::after{display:none}
/* 未选够时：不要一个空框，就是一句话 */
#ritual[data-stage="fan"] #toReveal:disabled{
border:0;background:none;box-shadow:none;
height:auto;min-height:0;padding:14px 0 6px;
font-size:12px;letter-spacing:.18em;
color:rgba(235,213,162,.55);
opacity:1;filter:none;
}
#ritual[data-stage="fan"] #toReveal:not(:disabled){
box-shadow:0 10px 26px rgba(0,0,0,.42), 0 0 0 1px rgba(235,213,162,.5);
}
}
/* ---------- 41h. v23.5 选牌台：把「空黑」做成被灯照到的桌面 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{
background:
radial-gradient(120% 62% at 50% 44%, rgba(214,180,120,.20), rgba(201,169,108,.07) 40%, rgba(201,169,108,0) 70%),
radial-gradient(70% 34% at 50% 58%, rgba(255,236,200,.10), rgba(255,236,200,0) 72%),
linear-gradient(180deg, #0b0813 0%, #100b1b 34%, #171021 62%, #0d0916 88%, #08060f 100%);
box-shadow:none;
}
#ritual[data-stage="fan"] .table::after{
display:block;content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(201,169,108,.26) 18%,rgba(235,213,162,.42) 50%,rgba(201,169,108,.26) 82%,transparent);
}
/* 扇面略微上移，让桌面在下方留出被照亮的余地 */
#ritual[data-stage="fan"] .table-inner{top:-52px}
/* 扇形下缘的一圈反光，像牌真的压在桌面上 */
#ritual[data-stage="fan"] .table-inner::after{
content:"";position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);
width:min(64vw,270px);height:52px;border-radius:50%;
background:radial-gradient(closest-side,rgba(235,213,162,.16),rgba(235,213,162,0));
filter:blur(6px);pointer-events:none;
}
}
/* ---------- 41i. v23.5 选牌台：控件压到桌面上，收掉扇面下方空桌 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .ritual-ctl{
position:relative;z-index:2;margin-top:-72px;
padding-top:0;
}
#ritual[data-stage="fan"] .ritual-ctl .pick-count{
text-shadow:0 1px 10px rgba(0,0,0,.7);
}
#ritual[data-stage="fan"] .table-inner{top:-64px}
}
/* ---------- 41j. v23.5 选牌台：桌高刚好包住扇面，不再有空桌 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{
flex:0 0 auto;
height:min(47svh,332px);
}
#ritual[data-stage="fan"] .table-inner{top:-26px}
#ritual[data-stage="fan"] .ritual-ctl{margin-top:auto;padding-top:6px}
}
/* ---------- 41k. v23.5 选牌台：桌面吃满中段，牌再放大一档 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{flex:1 1 auto;height:auto;max-height:none}
#ritual[data-stage="fan"] .t-card{width:140px;height:232px}
#ritual[data-stage="fan"] .table-inner{top:-44px}
#ritual[data-stage="fan"] .ritual-ctl{margin-top:0;padding-top:2px}
#ritual[data-stage="fan"] .table-inner::after{bottom:-40px;height:64px}
}
/* ---------- 41l. v23.5 选牌台：计数行压到桌沿，消灭空桌 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .ritual-ctl{margin-top:-104px;padding-top:0}
#ritual[data-stage="fan"] .table-inner{top:-28px}
#ritual[data-stage="fan"] .pick-count{
font-size:13px;letter-spacing:.14em;
text-shadow:0 1px 12px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.6);
}
#ritual[data-stage="fan"] .pick-next{font-size:11.5px;letter-spacing:.08em}
}
/* ---------- 41m. v23.5 选牌台：扇面在可见桌面里居中 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table-inner{top:-92px}
/* 桌面顶部补一层极淡的月光，避免大片死黑 */
#ritual[data-stage="fan"] .table::before{
background:
radial-gradient(90% 44% at 50% 6%, rgba(160,150,190,.13), rgba(160,150,190,0) 70%),
radial-gradient(120% 62% at 50% 44%, rgba(214,180,120,.20), rgba(201,169,108,.07) 40%, rgba(201,169,108,0) 70%),
linear-gradient(180deg, #0b0813 0%, #100b1b 34%, #171021 62%, #0d0916 88%, #08060f 100%);
}
}
/* ---------- 41n. v23.5 选牌台：桌高贴着扇面收，上下各留 72，控件压桌沿 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{
flex:0 0 auto;height:min(54svh,440px);max-height:none;
}
#ritual[data-stage="fan"] .table-inner{top:-32px}
#ritual[data-stage="fan"] .ritual-ctl{margin-top:-36px;padding-top:0}
}
/* ---------- 41o. v23.5 选牌台：控件沉底，底部不再留死黑 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .ritual-ctl{margin-top:auto;padding-top:2px}
#ritual[data-stage="fan"] .pick-strip{margin-top:10px}
#ritual[data-stage="fan"] .ritual-ctl>p,#ritual[data-stage="fan"] .drag-tip{margin-top:10px}
}
/* ---------- 41p. v23.5 选牌台：桌高收到刚好包住扇面，空桌归零 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{height:min(46svh,372px)}
#ritual[data-stage="fan"] .table-inner{top:-18px}
#ritual[data-stage="fan"] .table-inner::after{bottom:-26px;height:52px}
}
/* ---------- 41q. v23.5 选牌台：手机端精简牌面阴影（软件光栅下每帧重绘大模糊极贵） ---------- */
@media(max-width:719px){
#ritual .t-back{
box-shadow:
0 0 0 1px rgba(235,213,162,.22),
0 4px 10px rgba(0,0,0,.42);
transition:none;
}
#ritual .t-front{
box-shadow:
0 0 0 1px rgba(235,213,162,.45),
0 0 0 3px rgba(251,247,239,.9),
0 5px 12px rgba(0,0,0,.4);
}
#ritual .t-card{transition:transform 300ms var(--ease-expo)}
#ritual .t-card.is-picked .t-back,
#ritual .t-card.is-picked .t-front{box-shadow:0 0 0 1px rgba(235,213,162,.9),0 6px 16px rgba(0,0,0,.45)}
}
/* ---------- 41r. v23.5 选牌台：去掉每帧都要重算的大模糊 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table-inner::after{
filter:none;
background:radial-gradient(closest-side,rgba(235,213,162,.13),rgba(235,213,162,.05) 55%,rgba(235,213,162,0));
}
#ritual .t-back{
box-shadow:none;
box-shadow:inset 0 0 0 1px rgba(235,213,162,.22);
}
#ritual .t-front{box-shadow:inset 0 0 0 1px rgba(235,213,162,.4),inset 0 0 0 3px rgba(251,247,239,.85)}
#ritual .t-card.is-picked .t-back{box-shadow:inset 0 0 0 2px rgba(235,213,162,.95)}
}
/* ---------- 41s. v23.5 选牌台：扇面在桌面里上下均衡 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table-inner{top:-34px}
#ritual[data-stage="fan"] .table-inner::after{bottom:-20px;height:44px}
}
/* ---------- 41t. v23.5 选牌台：桌面吃满到控件上方，扇面居中，不留下沉黑带 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{
flex:1 1 auto;height:auto;min-height:0;max-height:none;
}
#ritual[data-stage="fan"] .table-inner{top:-30px}
#ritual[data-stage="fan"] .ritual-ctl{margin-top:0;padding-top:0}
#ritual[data-stage="fan"] .table-inner::after{bottom:-26px;height:52px}
}
/* ---------- 41u. v23.5 选牌台：正中那张牌有光，知道点哪儿 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .t-card.is-center .t-back{
box-shadow:inset 0 0 0 1px rgba(235,213,162,.75), 0 0 22px rgba(201,169,108,.34), 0 8px 20px rgba(0,0,0,.5);
}
#ritual[data-stage="fan"] .t-card.is-center .t-back .back-inner{filter:brightness(1.08)}
}
/* ---------- 42. v23.6 选牌台：桌面铺到屏幕底，控制条压在前缘 ---------- */
@media(max-width:719px){
/* ① 桌面吃满：从步骤条下沿一路铺到屏幕底，牌扇在“可见桌面”里居中 */
#ritual[data-stage="fan"] .table{
flex:1 1 auto;height:auto;min-height:0;max-height:none;
-webkit-mask-image:none;mask-image:none;
background:
radial-gradient(120% 54% at 50% 44%, rgba(214,180,120,.15), rgba(214,180,120,0) 64%),
radial-gradient(88% 38% at 50% 3%, rgba(160,150,190,.11), rgba(160,150,190,0) 72%),
linear-gradient(180deg,#08060f 0%,#0e0a18 24%,#150f20 56%,#110c1b 80%,#0a0714 100%);
box-shadow:none;
}
#ritual[data-stage="fan"] .table::after{display:none}
#ritual[data-stage="fan"] .table-inner{top:0}
/* ② 控制条叠在桌面前缘，与桌面连成一体 */
#ritual[data-stage="fan"] .ritual-ctl{
position:relative;z-index:6;margin-top:-172px;padding:0 0 8px;
}
#ritual[data-stage="fan"] .ritual-ctl::before{
content:"";position:absolute;left:50%;transform:translateX(-50%);
top:-58px;width:100vw;height:58px;pointer-events:none;
background:linear-gradient(180deg,rgba(10,7,20,0),rgba(10,7,20,.96) 82%);
}
/* ③ 计数 / 牌位点 / 下一个牌位 收成一行 */
#ritual[data-stage="fan"] .pick-line{
margin:0 auto 12px;padding:0 6px;position:relative;
justify-content:space-between;align-items:center;min-height:28px;
}
#ritual[data-stage="fan"] .pick-strip{
position:absolute;left:50%;top:-1px;transform:translateX(-50%);
margin:0;z-index:2;
}
/* ④ 收起说明行，屏幕已经够窄 */
#ritual[data-stage="fan"] .ritual-ctl>p{display:none}
/* ⑤ 主按钮：描边胶囊，未选够也在位，选够后才是金色实底 */
#ritual[data-stage="fan"] #toReveal{
display:block;width:min(100%,302px);margin:0 auto 10px;
min-height:48px;padding:14px 0;border-radius:2px;
font-size:12.5px;letter-spacing:.17em;
}
#ritual[data-stage="fan"] #toReveal:disabled{
border:1px solid rgba(201,169,108,.32);background:rgba(201,169,108,.055);
color:rgba(235,213,162,.64);box-shadow:none;
}
/* ⑥ 翻页条压到最矮，只留箭头、导轨与随机 */
#ritual[data-stage="fan"] .fan-nav{margin-top:0;padding-top:0;gap:9px}
#ritual[data-stage="fan"] .fan-nav>button{min-height:38px;height:38px;min-width:38px;padding:0}
#ritual[data-stage="fan"] #fanRandom{min-width:0;padding:0 14px;font-size:11.5px;letter-spacing:.1em}
}
/* ---------- 43. v23.7 选牌台：桌面真正通栏，扇面坐进可见桌面正中 ---------- */
@media(max-width:719px){
/* 100vw 会按 layout viewport 算、在部分环境下压不回容器，改用负边距把桌面顶满 */
#ritual[data-stage="fan"] .table{
width:auto;margin-left:-15px;margin-right:-15px;padding:0;
-webkit-mask-image:none;mask-image:none;
}
#ritual[data-stage="fan"] .table-inner{top:-88px}
#ritual[data-stage="fan"] .table-inner::after{bottom:-6px;height:60px}
/* 桌面底部收一条更深的压边，让控制条压在桌沿上而不是浮在空气里 */
#ritual[data-stage="fan"] .ritual-ctl::before{
top:-70px;height:70px;
background:linear-gradient(180deg,rgba(9,6,17,0),rgba(9,6,17,.62) 46%,rgba(9,6,17,.97) 100%);
}
}
/* ---------- 44. v23.8 选牌台：桌面真的通栏（max-width:100% 会把它卡回容器宽） ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{
max-width:none;width:auto;
margin-left:-15px;margin-right:-15px;
box-sizing:content-box;
}
}
/* ---------- 45. v23.9 选牌台：扇面上下居中；未选够时是一句提示，不是空输入框 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table-inner{top:-113px}
#ritual[data-stage="fan"] #toReveal:disabled{
border:0;background:none;box-shadow:none;
min-height:0;height:auto;padding:16px 0 8px;
font-size:12px;letter-spacing:.2em;
color:rgba(235,213,162,.6);opacity:1;filter:none;
}
#ritual[data-stage="fan"] #toReveal:disabled::after{
content:"";display:block;width:36px;height:1px;margin:10px auto 0;
background:linear-gradient(90deg,transparent,rgba(201,169,108,.5),transparent);
}
}
/* ---------- 46. v24.0 选牌台：牌放大一档，扇面自己把桌面填满 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .t-card{width:168px;height:278px}
#ritual[data-stage="fan"] .table{
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
#ritual[data-stage="fan"] .table-inner{top:-118px}
}
/* ---------- 47. v24.1 选牌台：牌再大一档；桌面光挪到扇面中心，下半场不再死黑 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .t-card{width:188px;height:311px}
#ritual[data-stage="fan"] .table{
background:
radial-gradient(76% 50% at 50% 52%, rgba(214,180,120,.22), rgba(214,180,120,.07) 46%, transparent 72%),
radial-gradient(120% 70% at 50% 96%, rgba(201,169,108,.10), transparent 70%),
linear-gradient(180deg,#0b0813 0%,#110c1c 28%,#191123 54%,#120c1b 78%,#0a070f 100%);
}
#ritual[data-stage="fan"] .table-inner{top:-150px}
}
/* ---------- 48. v24.2 选牌台：扇面下移到桌面视觉中心 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table-inner{top:-92px}
}
/* ---------- 49. v24.3 选牌台：牌幅收一档、多露两张；桌面加一道地平线光 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .t-card{width:156px;height:258px}
#ritual[data-stage="fan"] .table-inner{top:-110px}
#ritual[data-stage="fan"] .table{
background:
radial-gradient(62% 34% at 50% 30%, rgba(190,168,132,.16), rgba(190,168,132,.05) 58%, transparent 78%),
radial-gradient(96% 30% at 50% 66%, rgba(214,180,120,.20), rgba(214,180,120,.05) 60%, transparent 84%),
linear-gradient(180deg,#09060f 0%,#100b19 22%,#181020 46%,#1c1426 58%,#130d1c 76%,#09060f 100%);
}
#ritual[data-stage="fan"] .table::before{
content:"";position:absolute;left:-10%;right:-10%;top:64%;height:1px;
background:linear-gradient(90deg,transparent,rgba(214,180,120,.22) 22%,rgba(235,213,162,.34) 50%,rgba(214,180,120,.22) 78%,transparent);
pointer-events:none;
}
}
/* ---------- 50. v24.4 选牌台：扇面光学居中；底部操作区压成两行 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table-inner{top:-126px}
#ritual[data-stage="fan"] .ritual-ctl{margin-top:-196px}
#ritual[data-stage="fan"] .pick-line{padding-bottom:2px}
#ritual[data-stage="fan"] #toReveal:disabled{padding:10px 0 4px}
#ritual[data-stage="fan"] #toReveal:disabled::after{margin-top:6px}
#ritual[data-stage="fan"] .fan-nav{padding-top:4px}
}
/* ---------- 51. v24.5 选牌台：牌幅再放大，扇面撑满桌面 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .t-card{width:170px;height:281px}
#ritual[data-stage="fan"] .table-inner{top:-150px}
}
/* ---------- 52. v24.6 选牌台：扇脚下移压住地平线；桌面下半渐隐，去掉空场 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table-inner{top:-100px}
#ritual[data-stage="fan"] .table{
background:
radial-gradient(58% 30% at 50% 34%, rgba(190,168,132,.14), rgba(190,168,132,.04) 60%, transparent 80%),
radial-gradient(104% 26% at 50% 74%, rgba(214,180,120,.22), rgba(214,180,120,.05) 58%, transparent 86%),
linear-gradient(180deg,#09060f 0%,#0f0a18 20%,#17101f 40%,#1d1427 62%,#150e1e 80%,#0a0710 100%);
}
#ritual[data-stage="fan"] .table::before{top:73%}
#ritual[data-stage="fan"] .table::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
background:linear-gradient(180deg,transparent,rgba(4,3,8,.72) 76%,rgba(4,3,8,.92));
pointer-events:none;
}
}
/* ---------- 53. v24.7 选牌台：桌面收高到刚好托住扇面，控件紧贴桌沿 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{
flex:0 0 auto;height:min(56svh,470px);min-height:0;max-height:none;
}
#ritual[data-stage="fan"] .table-inner{top:0}
#ritual[data-stage="fan"] .ritual-ctl{margin-top:0;padding-top:12px}
#ritual[data-stage="fan"] .table::after{height:26%}
}
/* ---------- 54. v24.8 选牌台：桌面用满剩余高度，扇面在其中居中 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{height:min(62svh,540px)}
#ritual[data-stage="fan"] .table-inner{top:-14px}
#ritual[data-stage="fan"] .ritual-ctl{margin-top:auto}
}
/* ---------- 55. v24.9 选牌台：牌幅收一档多露两张；桌面顶部补一道光，收掉空洞感 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .t-card{width:152px;height:251px}
#ritual[data-stage="fan"] .table{
background:
radial-gradient(78% 26% at 50% 4%, rgba(168,150,196,.16), rgba(168,150,196,.04) 62%, transparent 84%),
radial-gradient(58% 30% at 50% 40%, rgba(196,172,132,.13), rgba(196,172,132,.04) 62%, transparent 82%),
radial-gradient(104% 26% at 50% 76%, rgba(214,180,120,.24), rgba(214,180,120,.06) 58%, transparent 86%),
linear-gradient(180deg,#0a0710 0%,#100b19 20%,#181120 40%,#1e1528 62%,#150e1e 80%,#0a0710 100%);
}
#ritual[data-stage="fan"] .table-inner{top:-6px}
#ritual[data-stage="fan"] .pick-line{padding-bottom:0}
#ritual[data-stage="fan"] #toReveal:disabled{padding:8px 0 2px}
#ritual[data-stage="fan"] #toReveal:disabled::after{margin-top:4px;width:28px}
#ritual[data-stage="fan"] .fan-nav{padding-top:0}
}
/* ---------- 56. v25.0 选牌台：桌面吃掉全部剩余高度，控件紧贴桌沿，边缘与夜色融合 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{
flex:1 1 auto;height:auto;min-height:0;max-height:none;
border-radius:0;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 88%,transparent 100%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 88%,transparent 100%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
mask-composite:intersect;
}
#ritual[data-stage="fan"] .table::after{display:none}
#ritual[data-stage="fan"] .ritual-ctl{margin-top:0;padding-top:10px}
#ritual[data-stage="fan"] .table-inner{top:-4px}
}
/* ---------- 57. v25.1 选牌台：余牌牌堆 + 扇面垂直居中 ---------- */
.table-deck{display:none}
@media(max-width:719px){
#ritual[data-stage="fan"] .table-deck{
display:block;position:absolute;left:180px;top:12%;transform:translateX(-50%);
width:66px;height:110px;pointer-events:none;z-index:1;
filter:drop-shadow(0 14px 26px rgba(0,0,0,.6));
}
#ritual[data-stage="fan"] .table-deck i{
position:absolute;inset:0;display:block;
background:url(card-back.svg) center/100% 100% no-repeat;
border-radius:3px;
}
#ritual[data-stage="fan"] .table-deck i:nth-child(1){transform:translate(-6px,4px) rotate(-7deg);opacity:.45}
#ritual[data-stage="fan"] .table-deck i:nth-child(2){transform:translate(-3px,2px) rotate(-3.5deg);opacity:.62}
#ritual[data-stage="fan"] .table-deck i:nth-child(3){transform:translate(0,0) rotate(0deg);opacity:.8}
#ritual[data-stage="fan"] .table-deck i:nth-child(4){transform:translate(3px,-2px) rotate(3deg);opacity:.6}
#ritual[data-stage="fan"] .table-inner{top:32px}
}
/* ---------- 58. v25.2 选牌台：牌收窄、间距收紧、弧线更明显、牌堆从扇后探出 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .t-card{width:124px;height:205px}
#ritual[data-stage="fan"] .table-inner{top:44px}
#ritual[data-stage="fan"] .table-deck{
left:180px;top:26%;width:84px;height:139px;
transform:translateX(-50%);opacity:.92;
}
#ritual[data-stage="fan"] .table-deck i{filter:saturate(.92) brightness(.82)}
}
/* ---------- 59. v25.3 选牌台：把上方空洞收掉，牌堆从扇顶探出，扇面整体上移并略放大 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .t-card{width:132px;height:218px}
#ritual[data-stage="fan"] .table-inner{top:-14px}
#ritual[data-stage="fan"] .table-deck{
left:180px;top:7%;width:94px;height:156px;
transform:translateX(-50%);opacity:.95;
}
#ritual[data-stage="fan"] .table-deck i{filter:saturate(.9) brightness(.8)}
/* 牌桌落地的暖光，避免扇面浮在纯黑里 */
#ritual[data-stage="fan"] .table::before{
content:"";position:absolute;left:-6%;right:-6%;bottom:4%;height:40%;
background:radial-gradient(58% 100% at 50% 100%,rgba(201,169,108,.11),transparent 72%);
pointer-events:none;
}
/* 未选够时的说明文字与底部导航之间不要那条孤立金线 */
#ritual[data-stage="fan"] #toReveal:disabled::after{display:none}
#ritual[data-stage="fan"] .fan-nav{padding-top:2px}
}
/* ---------- 60. v25.4 选牌台：把「牌堆 + 扇面」当成一个整体在桌面上居中，消掉下方死区 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .t-card{width:136px;height:224px}
#ritual[data-stage="fan"] .table-inner{top:34px}
#ritual[data-stage="fan"] .table-deck{
left:180px;top:14%;width:92px;height:152px;
transform:translateX(-50%);opacity:.95;
}
/* 控制区加一点顶部留白，让「0 / 3」那行不贴着桌面下沿 */
#ritual[data-stage="fan"] .ritual-ctl{padding-top:14px}
#ritual[data-stage="fan"] .pick-count{font-size:12.5px}
#ritual[data-stage="fan"] .pick-next{font-size:11px;opacity:.72}
}
/* ---------- 61. v25.5 选牌台：真正的手上扇面——大牌、重叠加、强旋转，牌堆垫在扇后 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .t-card{width:148px;height:244px}
#ritual[data-stage="fan"] .table-inner{top:6px}
#ritual[data-stage="fan"] .table-deck{
left:180px;top:9%;width:104px;height:172px;
transform:translateX(-50%) rotate(-4deg);opacity:.9;
}
#ritual[data-stage="fan"] .table-deck i{filter:saturate(.86) brightness(.72)}
/* 扇面下方一层很淡的投影，让牌「落在桌上」而不是漂着 */
#ritual[data-stage="fan"] .table::after{
content:"";display:block;position:absolute;left:12%;right:12%;bottom:9%;height:70px;
background:radial-gradient(52% 100% at 50% 0,rgba(0,0,0,.55),transparent 74%);
filter:blur(6px);pointer-events:none;z-index:0;
}
}
/* ---------- 62. v25.6 选牌台：圆点与数字行对齐、牌堆更醒目、桌面加一层暗角 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .pick-strip{top:50%;transform:translate(-50%,-50%)}
#ritual[data-stage="fan"] .pick-line{min-height:34px;align-items:center}
#ritual[data-stage="fan"] .table-deck{
left:180px;top:6%;width:112px;height:185px;
transform:translateX(-50%) rotate(-5deg);opacity:.92;
}
#ritual[data-stage="fan"] .table::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 78% at 50% 34%,rgba(201,169,108,.09),transparent 62%),
radial-gradient(100% 60% at 50% 100%,rgba(4,3,8,.55),transparent 70%);
}
}
/* ---------- 63. v25.7 选牌台：牌堆移到桌顶正中露出半截，扇面回收居中，控件区三行对齐 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table-inner{top:26px}
#ritual[data-stage="fan"] .table-deck{
left:180px;top:-6px;width:88px;height:146px;
transform:translateX(-50%) rotate(-6deg);opacity:.95;
}
#ritual[data-stage="fan"] .table-deck i{filter:saturate(.85) brightness(.78)}
/* 控件区：计数行与圆点同高，按钮紧跟，导航压底 */
#ritual[data-stage="fan"] .pick-line{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px}
#ritual[data-stage="fan"] .pick-strip{top:50%;transform:translate(-50%,-50%);margin:0}
#ritual[data-stage="fan"] #toReveal{margin:6px auto 2px}
#ritual[data-stage="fan"] .drag-tip{margin:0 0 6px}
#ritual[data-stage="fan"] .fan-nav{margin-top:auto}
}
/* ---------- 64. v25.8 选牌台：圆点不再绝对定位压住按钮，改成正常流里的一行 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .ritual-ctl{display:flex;flex-direction:column}
#ritual[data-stage="fan"] .pick-strip{
position:static;left:auto;top:auto;transform:none;
margin:2px auto 6px;justify-content:center;gap:10px;
}
#ritual[data-stage="fan"] .pick-slot{width:30px;height:30px;font-size:12px}
#ritual[data-stage="fan"] .pick-line{width:100%}
#ritual[data-stage="fan"] #toReveal{margin:0 auto 2px}
#ritual[data-stage="fan"] .drag-tip{margin:0 0 4px}
}
/* ---------- 65. v25.9 选牌台：把上方空场做成「牌堆 + 一句提示」，扇面回到视觉正中 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table-inner{top:-26px}
/* 牌堆：桌顶正中，比之前大，带一圈极淡的暖光 */
#ritual[data-stage="fan"] .table-deck{
left:180px;top:5%;width:96px;height:167px;
transform:translateX(-50%) rotate(-5deg);opacity:1;
filter:drop-shadow(0 18px 34px rgba(0,0,0,.62)) drop-shadow(0 0 26px rgba(201,169,108,.16));
}
#ritual[data-stage="fan"] .table-deck i{filter:saturate(.86) brightness(.8)}
/* 牌堆下方一句话，说明这一屏在做什么 */
#ritual[data-stage="fan"] .table-deck::after{
content:"从这副牌里挑 3 张";position:absolute;left:50%;top:calc(100% + 12px);
transform:translateX(-50%);white-space:nowrap;
font:500 11.5px/1 var(--sans);letter-spacing:.16em;
color:rgba(235,213,162,.52);pointer-events:none;
}
/* 圆点行：确保在流内、与计数行同高、不与按钮重叠 */
#ritual[data-stage="fan"] .pick-strip{
position:static!important;left:auto!important;top:auto!important;
transform:none!important;margin:4px auto 8px!important;z-index:auto!important;
}
#ritual[data-stage="fan"] .pick-line{margin:0 auto 2px;min-height:30px}
}
/* ---------- 66. v25.10 选牌台：余牌牌堆退到左后景，控制区并成两行 ---------- */
@media(max-width:719px){
/* 牌堆：左后景的小摞牌，不跟扇面抢中间 */
#ritual[data-stage="fan"] .table-deck{
left:7%!important;top:auto!important;bottom:9%!important;
width:74px;height:129px;transform:translateX(-50%) rotate(-7deg);
opacity:.5;z-index:0;
filter:drop-shadow(0 14px 26px rgba(0,0,0,.6));
}
#ritual[data-stage="fan"] .table-deck::after{content:none}
#ritual[data-stage="fan"] .table-inner{z-index:2}
/* 控制区：计数行 + 圆点同一行，按钮/提示/导航各一行 */
#ritual[data-stage="fan"] .ritual-ctl{
display:grid;grid-template-columns:1fr auto;align-items:center;
grid-template-areas:"line strip" "btn btn" "tip tip" "nav nav";
padding-top:8px;
}
#ritual[data-stage="fan"] .pick-line{grid-area:line;margin:0;min-height:30px;width:auto;justify-content:flex-start;gap:10px}
#ritual[data-stage="fan"] .pick-strip{
grid-area:strip;position:static!important;left:auto!important;top:auto!important;
transform:none!important;margin:0 0 0 auto!important;z-index:auto!important;
}
#ritual[data-stage="fan"] #toReveal{grid-area:btn;margin:4px auto 0;width:min(100%,302px)}
#ritual[data-stage="fan"] .drag-tip{grid-area:drag;display:none}
#ritual[data-stage="fan"] .fan-nav{grid-area:nav;margin-top:6px;padding-top:0}
}
/* ---------- 67. v25.11 选牌台：去掉会随滚动跑掉的牌堆，扇面在桌面里居中 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table-deck{display:none!important}
#ritual[data-stage="fan"] .table-inner{top:18px}
/* 桌面底部加一层很轻的雾，让扇面下方不空 */
#ritual[data-stage="fan"] .table::before{
content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
background:linear-gradient(180deg,transparent,rgba(4,3,8,.55));
pointer-events:none;z-index:0;
}
}
/* ---------- 68. v25.12 选牌台：牌摊在桌沿，上方空场放一句提示 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{position:relative}
#ritual[data-stage="fan"] .table::after{
content:"从这副牌里挑 3 张";position:absolute;left:0;right:0;top:14px;
text-align:center;z-index:5;pointer-events:none;display:block;
font:500 11.5px/1 var(--sans);letter-spacing:.18em;
color:rgba(235,213,162,.42);
}
#ritual[data-stage="fan"] .table-inner{top:62px}
/* 底部那层雾改成贴着桌沿的一条，而不是盖住半个桌面 */
#ritual[data-stage="fan"] .table::before{
height:16%;
background:linear-gradient(180deg,transparent,rgba(4,3,8,.5));
}
}
/* ---------- 69. v25.13 选牌台：牌收到 128×212，扇面垂直居中，提示落在上方留白里 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .t-card{width:128px;height:212px}
#ritual[data-stage="fan"] .table-inner{top:-44px}
#ritual[data-stage="fan"] .table::after{top:18px;font-size:11px;letter-spacing:.2em;color:rgba(235,213,162,.5)}
#ritual[data-stage="fan"] .table::before{height:22%}
/* 标题区收紧，把高度让给牌桌 */
#ritual[data-stage="fan"] .ritual-heading{padding-bottom:6px}
#ritual[data-stage="fan"] .ritual-heading h2{font-size:17px}
#ritual[data-stage="fan"] .ritual-heading p{font-size:11.5px;margin-top:3px}
#ritual[data-stage="fan"] .ritual-steps{margin-bottom:6px;min-height:26px}
#ritual[data-stage="fan"] .ritual-steps li{font-size:10px;padding:4px 9px}
}
/* ---------- 70. v25.14 选牌台：扇面在桌面里真正居中 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table-inner{top:0}
#ritual[data-stage="fan"] .table::after{top:22px}
}
/* ---------- 71. v25.15 选牌台：提示文字落到渐隐区之下，真正看得见 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table::after{
top:52px;font-size:11px;letter-spacing:.22em;color:rgba(235,213,162,.46);
text-shadow:0 0 18px rgba(0,0,0,.9);
}
/* 牌桌上沿给一点点内缩，让扇形不被切得那么齐 */
#ritual[data-stage="fan"] .table{mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%),linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
}
/* ---------- 72. v25.16 选牌台：牌放大填满桌面，去掉重复的桌面提示（标题已说明） ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .t-card{width:148px;height:246px}
/* 提示文字在 overflow 容器里会随横向滚动跑掉，直接不要 */
#ritual[data-stage="fan"] .table::after{content:none}
/* 桌面：牌下阴影更实一点，让扇形像立着的牌 */
#ritual[data-stage="fan"] .table{
background:
radial-gradient(60% 46% at 50% 74%, rgba(201,169,108,.16), transparent 72%),
radial-gradient(80% 60% at 50% 30%, rgba(120,110,160,.10), transparent 70%),
linear-gradient(180deg,#08060f 0%,#0c0817 30%,#14101f 62%,#0a0712 100%);
}
#ritual[data-stage="fan"] .table-inner{top:2px}
}
/* ---------- 73. v25.17 选牌台收尾：底部不再硬切、空场收紧 ---------- */
@media(max-width:719px){
/* 底部渐隐拉长，牌的下缘像陷进桌里，而不是被一刀切平 */
#ritual[data-stage="fan"] .table{
mask-image:
linear-gradient(180deg,transparent 0,#000 9%,#000 72%,rgba(0,0,0,.55) 88%,transparent 100%),
linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
/* 扇面略微上提，上方空场收窄 */
#ritual[data-stage="fan"] .table-inner{top:-14px}
/* 桌面光晕下移，和扇形上缘对齐 */
#ritual[data-stage="fan"] .table{
background:
radial-gradient(64% 40% at 50% 64%, rgba(201,169,108,.17), transparent 74%),
radial-gradient(86% 54% at 50% 22%, rgba(120,110,160,.09), transparent 72%),
linear-gradient(180deg,#07050e 0%,#0b0716 26%,#13101d 58%,#09060f 100%);
}
/* 「还差 3 张」与圆点、按钮成一组，不再孤零零一行 */
#ritual[data-stage="fan"] .pick-line{margin-bottom:6px}
}
/* ---------- 74. v25.18 选牌台：桌面顶端显示你问的那句话；禁用态按钮有边界感 ---------- */
@media(max-width:719px){
#ritual .fan-question{
margin:0 auto 4px;padding:0 14px;max-width:34em;
text-align:center;font:400 12px/1.6 var(--serif);
color:rgba(235,213,162,.46);letter-spacing:.03em;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#ritual .fan-question[hidden]{display:none}
/* 未选够时的主按钮：细金线包住，明确「这里是按钮，只是还不能点」 */
#ritual[data-stage="fan"] #toReveal:disabled{
border:1px solid rgba(235,213,162,.16);
border-radius:2px;background:rgba(255,255,255,.015);
padding:11px 0 10px;font-size:11.5px;letter-spacing:.2em;
color:rgba(235,213,162,.5);
}
#ritual[data-stage="fan"] #toReveal:disabled::after{display:none}
/* 位置轨加厚一点点，读得出是「进度」 */
#ritual[data-stage="fan"] .fan-rail{height:2px;background:rgba(235,213,162,.16)}
#ritual[data-stage="fan"] .fan-rail>i{height:2px;background:linear-gradient(90deg,rgba(201,169,108,.5),rgba(235,213,162,.95))}
}
/* ---------- 75. v25.19 选牌台：牌脚不再被吃掉；未选够的按钮是一条会走的进度 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 94%,rgba(0,0,0,.55) 99%,transparent 100%),linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 94%,rgba(0,0,0,.55) 99%,transparent 100%),linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
-webkit-mask-composite:source-in;mask-composite:intersect;
}
#ritual[data-stage="fan"] #toReveal:disabled{
position:relative;overflow:hidden;
border:1px solid rgba(235,213,162,.14);
background:linear-gradient(90deg,rgba(201,169,108,.16) var(--fill,0%),rgba(255,255,255,.012) var(--fill,0%));
color:rgba(240,226,200,.62);
}
#ritual[data-stage="fan"] #toReveal:disabled::before{
content:"";position:absolute;left:0;bottom:0;height:1px;width:var(--fill,0%);
background:linear-gradient(90deg,rgba(201,169,108,.35),rgba(235,213,162,.95));
transition:width 320ms var(--ease);
}
#ritual[data-stage="fan"] #toReveal.is-ready{
border-color:rgba(235,213,162,.45);
background:var(--grad-gold-flat);color:#20180c;
}
}
/* ---------- 76. v25.20 选牌台：未选够的按钮收成居中胶囊，并露出手上进度 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .ritual-ctl{justify-items:center}
#ritual[data-stage="fan"] #toReveal{
width:auto;min-width:210px;max-width:88%;
justify-self:center;margin:6px auto 2px;
padding:13px 30px 12px;
border-radius:2px;
}
#ritual[data-stage="fan"] #toReveal:disabled{
border:1px solid rgba(235,213,162,.2);
background:linear-gradient(90deg,rgba(201,169,108,.2) var(--fill,0%),rgba(255,255,255,.015) var(--fill,0%));
letter-spacing:.16em;font-size:11.5px;
}
#ritual[data-stage="fan"] #toReveal.is-ready{width:auto;min-width:230px}
/* 未选时的底部提示与翻页行，别把按钮再挤回去 */
#ritual[data-stage="fan"] .fan-nav{width:100%}
}
/* ---------- 77. v25.21 选牌台：扇面在桌面里垂直居中，牌脚不再压进渐隐区 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table-inner{top:-26px}
#ritual[data-stage="fan"] .table::before{height:24%}
}
/* ---------- 78. v25.22 选牌台：0 张时按钮退成一行提示，1 张起变成带进度的按钮 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] #toReveal.is-idle{
border-color:transparent!important;background:none!important;
color:rgba(235,213,162,.4)!important;
font-size:11px!important;letter-spacing:.22em;
padding:12px 0 10px!important;min-width:0!important;
}
#ritual[data-stage="fan"] #toReveal.is-idle::before{display:none}
/* 牌再大一点，把桌面的高度用满一些 */
#ritual[data-stage="fan"] .t-card{width:158px;height:262px}
}
/* ---------- 79. v25.23 选牌台：扇面在桌面里居中；0 张时不占一行按钮 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table-inner{top:2px}
#ritual[data-stage="fan"] #toReveal.is-idle{display:none}
/* 少了一行按钮，把多出来的高度还给扇面 */
#ritual[data-stage="fan"] .table{flex:1 1 auto}
#ritual[data-stage="fan"] .t-card{width:164px;height:272px}
#ritual[data-stage="fan"] .ritual-ctl{padding-top:6px;gap:2px}
#ritual[data-stage="fan"] .pick-line{margin-bottom:4px}
}
/* ---------- 80. v25.24 选牌台：两侧牌的落差收一点，牌脚不再被裁 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .t-card{width:156px;height:259px}
}
/* ---------- 81. v25.25 选牌台：扇面在桌面里居中，牌脚落影 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table-inner{top:-16px}
#ritual[data-stage="fan"] .t-card .t-back{filter:drop-shadow(0 6px 12px rgba(0,0,0,.45))}
#ritual[data-stage="fan"] .t-card.is-picked .t-back{filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
}
/* ---------- 82. v25.26 选牌台：牌脚用长渐隐收尾，不再是硬切一刀 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 74%,rgba(0,0,0,.72) 88%,rgba(0,0,0,.28) 96%,transparent 100%),linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 74%,rgba(0,0,0,.72) 88%,rgba(0,0,0,.28) 96%,transparent 100%),linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
}
/* ---------- 83. v25.27 选牌台：底部控件退成一行轻量操作，不再是一排方框 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .fan-nav{gap:10px}
#ritual[data-stage="fan"] .fan-nav .fan-step{
width:40px;height:40px;min-width:40px;min-height:40px;
border:0;background:none;box-shadow:none;border-radius:0;
color:rgba(235,213,162,.62);font-size:22px;line-height:1;
}
#ritual[data-stage="fan"] .fan-nav .fan-step:active{color:rgba(250,240,220,.95)}
#ritual[data-stage="fan"] .fan-random{
border:0;background:none;box-shadow:none;border-radius:0;
padding:0 4px;min-height:40px;
color:rgba(235,213,162,.7);font-size:11.5px;letter-spacing:.16em;
border-bottom:1px solid rgba(235,213,162,.22);
}
#ritual[data-stage="fan"] .fan-rail{flex:1 1 auto;min-width:60px}
/* 控制区留白收紧，牌桌多让出一点高度 */
#ritual[data-stage="fan"] .ritual-ctl{padding-top:2px;gap:0}
#ritual[data-stage="fan"] .pick-line{min-height:26px}
}
/* ---------- 84. v25.28 选牌台：未选够的按钮去掉色块，只留一线进度 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] #toReveal:disabled{
background:none!important;border:0!important;border-radius:0;
min-width:0!important;width:auto!important;padding:10px 2px 12px!important;
color:rgba(240,226,200,.5)!important;
font-size:11px!important;letter-spacing:.2em;
box-shadow:none!important;
}
#ritual[data-stage="fan"] #toReveal:disabled::before{
content:"";position:absolute;left:50%;transform:translateX(-50%);
bottom:4px;height:1px;width:calc(var(--fill,0%));max-width:180px;
background:linear-gradient(90deg,rgba(201,169,108,.3),rgba(235,213,162,.9));
transition:width 320ms var(--ease);
}
#ritual[data-stage="fan"] #toReveal.is-ready{
width:auto!important;min-width:200px!important;
padding:13px 26px!important;border-radius:2px;
}
/* 牌桌与控制区之间的空档收紧 */
#ritual[data-stage="fan"] .ritual-ctl{padding-top:0}
#ritual[data-stage="fan"] .fan-nav{margin-top:2px}
}
/* ---------- 85. v25.29 选牌台：牌脚不再被下半屏吞掉，桌面下沿收到牌脚附近 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 86%,rgba(0,0,0,.72) 94%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 86%,rgba(0,0,0,.72) 94%,transparent 100%);
}
#ritual[data-stage="fan"] .table-inner{top:6px}
/* 桌面下沿：一条柔和的地平光，紧贴牌脚 */
#ritual[data-stage="fan"] .table::before{
top:auto;bottom:26px;height:1px;
background:linear-gradient(90deg,transparent,rgba(201,169,108,.28) 18%,rgba(235,213,162,.5) 50%,rgba(201,169,108,.28) 82%,transparent);
}
#ritual[data-stage="fan"] .ritual-ctl{padding-top:4px}
}
/* ---------- 86. v25.30 选牌台：选中的牌排队亮在扇面上方，序号在左上不被压 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .t-card .pick-num{
left:-8px;right:auto;top:-8px;
width:22px;height:22px;font-size:11.5px;
box-shadow:0 3px 12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,247,222,.85);
}
#ritual[data-stage="fan"] .t-card.is-picked .t-back{
box-shadow:0 0 0 2px rgba(235,213,162,.92),
0 0 30px rgba(201,169,108,.45),
0 14px 30px rgba(0,0,0,.62);
}
}
/* ---------- 87. v25.31 选牌台：选中的牌与身后的牌扇拉开层次 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .t-card.is-picked{
z-index:600;
}
#ritual[data-stage="fan"] .t-card.is-picked .t-back{
box-shadow:0 0 0 1px rgba(235,213,162,.85),
0 0 0 3px rgba(201,169,108,.16),
0 18px 40px rgba(0,0,0,.72);
}
#ritual[data-stage="fan"] .t-card.is-picked .pick-num{
background:var(--grad-gold-flat);
color:#1B1410;font-weight:700;
}
}
/* ---------- 88. v25.32 选牌台：选中的牌浮出来，身后的牌扇退到背景 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .t-card{transition:transform 300ms var(--ease-expo), opacity 260ms var(--ease), filter 260ms var(--ease)}
#ritual[data-stage="fan"] .table-inner:has(.t-card.is-picked) .t-card:not(.is-picked){
opacity:.46;filter:brightness(.72) saturate(.85);
}
#ritual[data-stage="fan"] .t-card.is-picked{opacity:1;filter:none}
#ritual[data-stage="fan"] .t-card.is-picked .t-back{
box-shadow:0 0 0 1px rgba(235,213,162,.9),
0 0 34px rgba(201,169,108,.42),
0 18px 40px rgba(0,0,0,.72);
}
}
/* ---------- 89. v25.33 选牌台：控制区去掉重复的进度线，牌扇再放大一档 ---------- */
@media(max-width:719px){
/* 圆点已经表示进度，去掉「还差 N 张」下面的横线 */
#ritual[data-stage="fan"] #toReveal:disabled::before{display:none}
#ritual[data-stage="fan"] #toReveal:disabled{
padding:6px 2px 4px!important;
color:rgba(240,226,200,.44)!important;
font-size:10.5px!important;letter-spacing:.22em;
}
#ritual[data-stage="fan"] .ritual-ctl{padding-top:0;gap:0}
#ritual[data-stage="fan"] .pick-line{min-height:24px;margin-bottom:2px}
#ritual[data-stage="fan"] .fan-nav{margin-top:0;padding-top:2px}
/* 牌扇：略放大 + 整体下移，把桌子下方那条空带压掉 */
#ritual[data-stage="fan"] .t-card{width:162px;height:268px}
#ritual[data-stage="fan"] .table-inner{top:14px}
}
/* ---------- 90. v25.35 选牌台：选中后牌扇收进桌面，底边不再被硬切 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table:has(.t-card.is-picked){
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 92%,rgba(0,0,0,.55) 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 92%,rgba(0,0,0,.55) 100%);
}
#ritual[data-stage="fan"] .table:has(.t-card.is-picked)::before{opacity:.7}
}
/* ---------- 91. v25.36 选牌台：选中后牌扇不再被底边渐隐切断 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table:has(.t-card.is-picked){
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 100%);
}
#ritual[data-stage="fan"] .table:has(.t-card.is-picked)::after{display:none}
#ritual[data-stage="fan"] .table-inner:has(.t-card.is-picked) .t-card:not(.is-picked){
opacity:.6;filter:brightness(.8) saturate(.9);
}
}
/* ---------- 92. v25.37 选牌台：桌面边缘柔化，牌不再像被裁掉 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table:has(.t-card.is-picked){
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 90%,rgba(0,0,0,.68) 97%,rgba(0,0,0,.28) 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 90%,rgba(0,0,0,.68) 97%,rgba(0,0,0,.28) 100%);
}
}
/* ---------- 93. v25.38 选牌台：给每个牌位留一个写着名字的空位 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] #table{position:relative}
#ritual[data-stage="fan"] .pick-slots{position:absolute;inset:0;z-index:1;pointer-events:none}
#ritual[data-stage="fan"] .pick-frame{
position:absolute;display:flex;align-items:flex-end;justify-content:center;box-sizing:border-box;
border:1px dashed rgba(201,169,108,.34);border-radius:5px;background:rgba(255,255,255,.012);
padding-bottom:9px;
}
#ritual[data-stage="fan"] .pick-frame>span{
font-family:var(--serif);font-size:11px;letter-spacing:.16em;color:rgba(235,213,162,.52);
}
#ritual[data-stage="fan"] .pick-frame.is-filled{border-color:transparent;background:none}
#ritual[data-stage="fan"] .pick-frame.is-filled>span{display:none}
}
/* ---------- 94. v25.39 选牌台：选中后顶端不再被渐隐吃掉 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table:has(.t-card.is-picked){
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 2%,#000 92%,rgba(0,0,0,.66) 98%,rgba(0,0,0,.3) 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 2%,#000 92%,rgba(0,0,0,.66) 98%,rgba(0,0,0,.3) 100%);
}
}
/* ---------- 95. v25.40 选牌台：去掉重复的序号圆点与「还差 N 张」 ---------- */
@media(max-width:719px){
/* 顶部空位已经画出 1/2/3 的落点，底部再列一排圆点纯属重复 */
#ritual[data-stage="fan"] .pick-strip{display:none!important}
/* 未选够时把提示收成一行居中细字，不再占一整行按钮位 */
#ritual[data-stage="fan"] #toReveal:disabled{
justify-self:center;text-align:center;padding:2px 0 0;min-height:0;
font-size:11px;letter-spacing:.16em;color:rgba(240,226,200,.42);
}
#ritual[data-stage="fan"] .pick-line{justify-content:center;gap:0;min-height:0;margin-bottom:2px}
#ritual[data-stage="fan"] .pick-line .pick-count{font-size:12.5px;letter-spacing:.1em}
#ritual[data-stage="fan"] .pick-line .pick-next{display:none}
/* 牌脚渐隐放晚一点，别让牌像被裁掉 */
#ritual[data-stage="fan"] .table:has(.t-card.is-picked){
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 3%,#000 96%,rgba(0,0,0,.5) 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 3%,#000 96%,rgba(0,0,0,.5) 100%);
}
}
/* ---------- 96. v25.41 选牌台：空位与牌对齐、底部只留一行提示 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] #tableInner{position:relative}
#ritual[data-stage="fan"] .pick-slots{position:absolute;inset:0;z-index:1;pointer-events:none}
/* 未选够时不显示按钮文本，只留一行「2 / 3 下一张：可能趋势」 */
#ritual[data-stage="fan"] #toReveal:disabled{display:none}
#ritual[data-stage="fan"] .pick-line{justify-content:center;gap:10px;min-height:0;margin:2px 0 4px}
#ritual[data-stage="fan"] .pick-line .pick-next{display:inline;font-size:11.5px;letter-spacing:.08em;color:rgba(235,213,162,.5)}
#ritual[data-stage="fan"] .ritual-ctl{gap:0;padding-top:2px}
#ritual[data-stage="fan"] .fan-nav{margin-top:4px}
}
/* ---------- 97. v25.42 选牌台：牌脚被桌面托住 ---------- */
@media(max-width:719px){
/* 底边不再渐隐：让牌扇的底边正好被桌面下沿裁断，像牌被手托着 */
#ritual[data-stage="fan"] .table{
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 100%);
}
#ritual[data-stage="fan"] .table::before{opacity:.5}
#ritual[data-stage="fan"] .table::after{display:none}
/* 已选一排与牌扇之间给一条细金线，交代「这是两件事」 */
#ritual[data-stage="fan"] .pick-slots{box-shadow:0 1px 0 rgba(201,169,108,.10)}
#ritual[data-stage="fan"] .pick-frame>span{font-size:10.5px;letter-spacing:.06em}
}
/* ---------- 98. v25.43 牌扇底边柔和收尾 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 84%,rgba(0,0,0,.62) 94%,rgba(0,0,0,.18) 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 84%,rgba(0,0,0,.62) 94%,rgba(0,0,0,.18) 100%);
}
}
/* ---------- 99. v25.44 已选一排：不被上沿裁切，空位框清干净 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 2%,#000 84%,rgba(0,0,0,.62) 94%,rgba(0,0,0,.18) 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 2%,#000 84%,rgba(0,0,0,.62) 94%,rgba(0,0,0,.18) 100%);
}
#ritual[data-stage="fan"] .t-card .pick-num{top:-10px;left:-9px}
#ritual[data-stage="fan"] .pick-slots{z-index:0}
#ritual[data-stage="fan"] .t-card{z-index:2}
}
/* ---------- 100. v25.45 牌扇完整可见：底边不再被裁 ---------- */
@media(max-width:719px){
#ritual[data-stage="fan"] .table{
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 100%);
}
}
/* 101 · v25.47 牌扇定高：手机端桌面不再吃掉整屏，牌扇与控件靠在一起 */
@media (max-width:719px){
#ritual[data-stage="fan"] .table{flex:0 0 auto;height:clamp(320px,58svh,470px);margin-block:0}
#ritual[data-stage="fan"] .ritual-ctl{margin-top:0;padding-top:10px}
}
/* 102. v25.64 · 选牌台：牌幅收窄，露出更多牌面 */
@media (max-width:719px){
#ritual[data-stage="fan"] .t-card{width:148px;height:244px}
}
/* 103. v25.65 · 牌扇底部的落桌阴影，避免像被裁掉 */
@media (max-width:719px){
#ritual[data-stage="fan"] .table::before{
background:
radial-gradient(120% 40% at 50% 88%, rgba(201,169,108,.13), transparent 72%),
radial-gradient(90% 46% at 50% 6%, rgba(160,150,190,.10), transparent 74%) !important;
}
#ritual[data-stage="fan"] .table-inner::after{display:none}
#ritual[data-stage="fan"] .t-card .t-back{filter:drop-shadow(0 10px 16px rgba(0,0,0,.5))}
}
/* ══════════════════════════════════════════════════════════
104. v25.75 · 选牌台：牌扇铺满剩余空间、底边柔收
══════════════════════════════════════════════════════════ */
@media (max-width:719px){
#ritual[data-stage="fan"] .table{
flex:0 0 auto;
height:clamp(330px,60svh,470px);
margin-block:0;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 3.5%,#000 91%,rgba(0,0,0,.62) 97%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 3.5%,#000 91%,rgba(0,0,0,.62) 97%,transparent 100%);
}
/* 牌位名已经在虚线框里写着，底部不必再重复一遍 */
#ritual[data-stage="fan"] .pick-next{display:none!important}
#ritual[data-stage="fan"] .pick-line{justify-content:center;gap:0;font-size:13px;letter-spacing:.16em}
#ritual[data-stage="fan"] .ritual-ctl{padding-top:8px;gap:2px}
}
/* ══════════════════════════════════════════════════════════
105. v25.76 · 选牌台：解开高度上限（历史层里 max-height:46svh 把桌面卡在 305px）
══════════════════════════════════════════════════════════ */
@media (max-width:719px){
#ritual[data-stage="fan"] .table{
max-height:none!important;
height:clamp(330px,60svh,470px)!important;
}
}
/* 106. v25.79 · 牌脚落在桌面里，不再被下沿淡出吃掉 */
@media (max-width:719px){
#ritual[data-stage="fan"] .table{
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 3.5%,#000 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 3.5%,#000 100%);
}
}
/* ==========================================================================
107. v25.83 · 选牌台：0 张时也给出三个牌位空场
- 目的：未选牌时先看见「过去 / 现在 / 可能趋势」三格空位，知道要选几张、选完放哪。
- 同时把上方暗带压掉，让牌扇与步骤条、计数行贴成一组。
========================================================================== */
@media (max-width: 719px) {
/* 牌位空场：矮横条，虚线金框 + 牌位名，不抢牌扇的注意力 */
#ritual[data-stage="fan"] .pick-frame.is-slot {
height: 46px !important;
border-radius: 4px;
border: 1px dashed rgba(201, 169, 108, 0.30);
background:
linear-gradient(180deg, rgba(201, 169, 108, 0.05), rgba(201, 169, 108, 0.012));
box-shadow: inset 0 1px 0 rgba(235, 213, 162, 0.07);
display: flex;
align-items: center;
justify-content: center;
}
#ritual[data-stage="fan"] .pick-frame.is-slot > span {
font-size: 10.5px;
letter-spacing: 0.12em;
color: rgba(235, 213, 162, 0.46);
white-space: nowrap;
}
/* 步骤条到牌桌之间不再留第二条暗带 */
#ritual[data-stage="fan"] .ritual-steps {
margin-bottom: 2px;
}
/* 牌桌顶部渐隐收窄，牌位空场不被吃掉 */
#ritual[data-stage="fan"] .table {
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.2%, #000 100%) !important;
mask-image: linear-gradient(180deg, transparent 0, #000 1.2%, #000 100%) !important;
}
/* 计数行贴住牌桌下沿，不再孤零零浮在暗带里 */
#ritual[data-stage="fan"] .ritual-ctl {
padding-top: 4px;
}
#ritual[data-stage="fan"] .pick-line {
min-height: 22px;
align-items: center;
}
#ritual[data-stage="fan"] .pick-count {
font-size: 12px;
letter-spacing: 0.16em;
color: rgba(235, 213, 162, 0.66);
text-shadow: none;
}
}
/* ==========================================================================
108. v25.85 · 选牌台：问题文字被压扁（flex 收缩）+ 牌桌高度让位
- 现象：手机端 `.fan-question` 只剩 10px 高，问题原文被切一半。
- 原因：`.ritual-shell` 是 flex 列，问题行作为 flex item 被 `flex-shrink` 压扁。
========================================================================== */
@media (max-width: 719px) {
#ritual[data-stage="fan"] .fan-question {
flex: 0 0 auto;
min-height: 19px;
max-height: 38px;
margin: 0 auto 6px;
font-size: 12px;
line-height: 1.6;
color: rgba(235, 213, 162, 0.52);
}
/* 牌桌让出问题行的空间，整体仍落在首屏内 */
#ritual[data-stage="fan"] .table {
height: clamp(300px, 54svh, 430px) !important;
}
/* 牌位空场与牌扇之间不要空出第二条暗带 */
#ritual[data-stage="fan"] .pick-slots {
z-index: 1;
}
}
/* ==========================================================================
109. v25.86 · 选牌台收口：把底部压成一条控制栏，牌不再「被截」
- 问题（用户截图）：牌扇下沿发虚像被裁；「0 / 3」孤立悬浮；底部一段死黑；
翻页轨 + 随机抽一张各占一行，重心散。
- 做法：① 去掉牌面自身底部的透明渐隐，交给牌桌统一收边；
② 「0 / 3」+ 翻页轨 + 随机抽一张 合并成一行控制栏；
③ 牌桌吃掉空出来的高度，牌扇整体放大。
========================================================================== */
@media (max-width: 719px) {
/* ① 牌面完整：底部的透明渐隐去掉（原来 91% 起淡出，看上去像牌被切掉一截） */
#ritual[data-stage="fan"] .t-card .t-back {
-webkit-mask-image: none !important;
mask-image: none !important;
}
#ritual[data-stage="fan"] .t-card .t-front {
-webkit-mask-image: none !important;
mask-image: none !important;
}
/* ③ 牌桌加高：控制栏省下来的空间都给牌扇 */
#ritual[data-stage="fan"] .table {
height: min(58svh, 452px) !important;
max-height: none !important;
}
/* ② 底部一条控制栏 */
#ritual[data-stage="fan"] .ritual-ctl {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"line nav"
"btn btn";
align-items: center;
gap: 8px 12px;
padding-top: 10px;
width: 100%;
}
#ritual[data-stage="fan"] .pick-line {
grid-area: line;
justify-content: flex-start;
gap: 0;
min-height: 0 !important;
margin: 0 !important;
width: auto !important;
}
/* 牌位名已由上方虚线空位说明，这里不再重复「下一张：过去」 */
#ritual[data-stage="fan"] .pick-line .pick-next {
display: none !important;
}
#ritual[data-stage="fan"] .pick-line .pick-count {
font-size: 13px;
letter-spacing: 0.12em;
color: rgba(242, 228, 202, 0.82);
font-variant-numeric: tabular-nums;
}
#ritual[data-stage="fan"] .fan-nav {
grid-area: nav;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
gap: 6px;
justify-content: flex-end;
}
#ritual[data-stage="fan"] .fan-nav .fan-step {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
font-size: 19px !important;
}
#ritual[data-stage="fan"] .fan-nav .fan-rail {
flex: 1 1 auto;
min-width: 40px;
margin: 0 2px;
}
#ritual[data-stage="fan"] .fan-nav #fanRandom {
flex: 0 0 auto;
min-height: 34px;
padding: 0 2px;
font-size: 12px;
letter-spacing: 0.04em;
white-space: nowrap;
}
#ritual[data-stage="fan"] #toReveal {
grid-area: btn;
width: 100%;
justify-self: stretch;
}
/* 牌位空场再贴紧牌扇一点，上方不留第二条暗带 */
#ritual[data-stage="fan"] .pick-frame.is-slot {
height: 42px !important;
}
#ritual[data-stage="fan"] .ritual-ctl::before {
content: "";
grid-column: 1 / -1;
order: -1;
height: 1px;
margin-bottom: 2px;
background: linear-gradient(90deg, transparent, rgba(201, 169, 108, 0.22) 22%, rgba(201, 169, 108, 0.22) 78%, transparent);
}
}
/* ==========================================================================
110. v25.87 · 选牌台：牌位行压成一条细标签，牌扇吃掉整屏剩余高度
- 用户截图反馈：三个大虚线框占掉上半屏、牌扇被压在下面、底部留一大片死黑。
- 做法：① 未选状态把牌位做成一条 20px 高的胶囊标签行；
② 牌桌 flex 撑满剩余高度（不再写死 svh），牌扇随之变大；
③ 底栏贴住安全区，去掉多余留白。
========================================================================== */
@media (max-width: 719px) {
/* ① 牌位行：细胶囊标签 */
#ritual[data-stage="fan"] .pick-frame.is-slot {
height: 20px !important;
border-radius: 999px;
border: 1px dashed rgba(201, 169, 108, 0.26);
background: linear-gradient(180deg, rgba(201, 169, 108, 0.045), rgba(201, 169, 108, 0.012));
box-shadow: none;
}
#ritual[data-stage="fan"] .pick-frame.is-slot > span {
font-size: 10px;
letter-spacing: 0.18em;
color: rgba(235, 213, 162, 0.50);
line-height: 1;
}
/* ② 牌桌吃满剩余高度 */
.ritual-shell {
padding-bottom: 6px !important;
}
#ritual[data-stage="fan"] .table {
flex: 1 1 auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
#ritual[data-stage="fan"] .ritual-ctl {
flex: 0 0 auto;
padding-bottom: 2px !important;
}
/* ③ 牌位标签与牌扇之间收窄 */
#ritual[data-stage="fan"] .pick-slots {
z-index: 1;
}
}
/* ==========================================================================
111. v25.88 · 选牌台：牌不再撑满整屏，回到「一把牌摊在桌上」的比例
- 用户截图：牌被放到 238×284，两侧整张切出屏幕，看不出还剩几张。
- 做法：牌位标签行与牌扇之间留出一条台面孔隙；牌桌顶部渐隐收窄，
让最上面一排牌干净地立起来。
========================================================================== */
@media (max-width: 719px) {
/* 牌位标签行：更轻，像刻在桌面上的字 */
#ritual[data-stage="fan"] .pick-frame.is-slot {
height: 18px !important;
border-style: dashed;
border-color: rgba(201, 169, 108, 0.22);
background: rgba(201, 169, 108, 0.035);
}
#ritual[data-stage="fan"] .pick-frame.is-slot > span {
font-size: 9.5px;
letter-spacing: 0.22em;
color: rgba(235, 213, 162, 0.44);
}
/* 桌面顶部不再渐隐（牌顶要干净），只保留底部一条极淡收边 */
#ritual[data-stage="fan"] .table {
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 94%, rgba(0, 0, 0, 0.7) 99%, transparent 100%) !important;
mask-image: linear-gradient(180deg, #000 0, #000 94%, rgba(0, 0, 0, 0.7) 99%, transparent 100%) !important;
border-radius: 0 !important;
}
/* 牌位行与牌扇之间留 6px 台面，避免贴在一起 */
#ritual[data-stage="fan"] .pick-slots {
z-index: 1;
}
/* 底部控制栏贴住底沿，不再浮在暗带中间 */
#ritual[data-stage="fan"] .ritual-ctl {
padding-bottom: 0 !important;
gap: 6px 12px !important;
}
#ritual[data-stage="fan"] .fan-nav .fan-random {
border-bottom: 1px solid rgba(201, 169, 108, 0.34);
padding-bottom: 2px;
}
}
/* ==========================================================================
112. v25.89 · 选牌台：牌桌高度跟着牌扇走，不留上下两片死黑
========================================================================== */
@media (max-width: 719px) {
#ritual[data-stage="fan"] .table {
flex: 0 1 auto !important;
height: auto !important;
min-height: 300px !important;
align-self: center;
}
#ritual[data-stage="fan"] .ritual-ctl {
margin-top: auto !important;
}
}
/* ==========================================================================
113. v25.90 · 选牌台：牌桌撑满并按牌扇高度居中（撤销 112 的塌高）
- height:auto 让牌桌失去内在高度、塌到 min-height 300，牌跟着缩水。
- 正确做法：牌桌继续 flex:1 撑满，牌扇按宽度上限收敛后在其中居中。
========================================================================== */
@media (max-width: 719px) {
#ritual[data-stage="fan"] .table {
flex: 1 1 auto !important;
height: auto !important;
min-height: 0 !important;
align-self: stretch !important;
}
#ritual[data-stage="fan"] .ritual-ctl {
margin-top: 0 !important;
}
}
/* ==========================================================================
114. v25.91 · 选牌台：一条弧、贴着桌沿、上沿不切牌
- 用户截图：牌被放到近 200px 宽、整屏只看到 4 张半，牌顶还被桌沿切掉一截。
- 做法：牌幅收到屏宽 26.5%（约 103px），扇面间距收紧到 54px，
使一屏能看到 6–7 张；牌桌顶部完全去掉渐隐，牌顶干净站立。
========================================================================== */
@media (max-width: 719px) {
#ritual[data-stage="fan"] .table {
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 96%, rgba(0, 0, 0, 0.55) 100%) !important;
mask-image: linear-gradient(180deg, #000 0, #000 96%, rgba(0, 0, 0, 0.55) 100%) !important;
}
/* 牌位标签行：贴住牌桌顶沿，像桌面上的刻字 */
#ritual[data-stage="fan"] .pick-frame.is-slot {
height: 17px !important;
border-color: rgba(201, 169, 108, 0.20);
background: rgba(201, 169, 108, 0.03);
}
#ritual[data-stage="fan"] .pick-frame.is-slot > span {
font-size: 9px;
letter-spacing: 0.24em;
color: rgba(235, 213, 162, 0.42);
}
/* 底部控制栏更安静：计数与随机抽一张同一视觉重量 */
#ritual[data-stage="fan"] .pick-line .pick-count {
font-size: 12.5px;
letter-spacing: 0.14em;
color: rgba(242, 228, 202, 0.78);
}
#ritual[data-stage="fan"] .fan-nav .fan-random {
font-size: 12.5px;
letter-spacing: 0.02em;
color: rgba(242, 228, 202, 0.72);
border-bottom-color: rgba(201, 169, 108, 0.28);
}
}
/* ==========================================================================
115. v25.94 · 选牌台最后一刀
- 用户截图三处问题：
① 牌位标签行与牌扇之间约 100px 纯黑，牌扇上下留白不匀；
② 牌脚位置有一道金色弧线横穿（`.table-inner::after` 的椭圆光斑，bottom:-34px）；
③ 牌扇下方到控制栏又空出一条暗带。
- 做法：
① 牌位行贴到牌桌顶沿；牌桌高度不再吃满整屏，按牌幅收到 56svh；
② 关掉那道假地平线光斑；
③ 桌面底部改成一圈柔和暗角，牌脚自然收进桌面里。
========================================================================== */
@media (max-width: 719px) {
/* ② 去掉牌脚处那道弧线光斑（桌面地平线由 .table::before 统一负责） */
#ritual[data-stage="fan"] .table-inner::after {
display: none !important;
}
/* 牌位标签行贴顶，牌扇紧接着从上往下铺 */
#ritual[data-stage="fan"] .pick-slots {
top: 2px !important;
bottom: auto !important;
}
/* ① 牌桌收到 56svh：上下留白匀开，牌扇不再浮在中间一大片黑里 */
#ritual[data-stage="fan"] .table {
flex: 1 1 auto !important;
height: auto !important;
min-height: 0 !important;
max-height: 56svh !important;
align-self: center !important;
}
/* ③ 桌面下沿：柔和暗角代替硬边，牌脚落进桌面 */
#ritual[data-stage="fan"] .table::before {
top: auto !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 88px !important;
background: linear-gradient(180deg, rgba(4, 3, 8, 0), rgba(4, 3, 8, 0.5) 58%, rgba(4, 3, 8, 0.88)) !important;
pointer-events: none;
z-index: 3;
}
#ritual[data-stage="fan"] .ritual-ctl {
margin-top: 0 !important;
padding-top: 6px !important;
}
}
/* ==========================================================================
116. v25.95 · 选牌台：牌桌必须恰好是一屏宽，扇形弧度才有基准
- 根因：v25.94 给的 `align-self:center` 让 `.table` 按内容宽度撑开，
实测 clientWidth=4878（整条 78 张牌带），`arcFan()` 的 vw 取错基准，
算出的 d≈0 → 弧度与旋转归零 → 78 张牌糊成一堵直墙（用户截图）。
- 做法：牌桌回到 stretch，宽度锁死 `calc(100% + 30px)` 并配负边距做通栏，
内部牌带照常横向滚动；这样 vw=390，弧线恢复。
========================================================================== */
@media (max-width: 719px) {
#ritual[data-stage="fan"] .table {
align-self: stretch !important;
width: calc(100% + 30px) !important;
max-width: none !important;
margin-left: -15px !important;
margin-right: -15px !important;
box-sizing: border-box !important;
overflow-x: auto !important;
overflow-y: hidden !important;
}
}
/* ==========================================================================
117. v25.96 · 选牌台：两侧的牌柔化收进暗处
- 用户截图：牌扇左右两端被视口硬切，切口是一条笔直的竖边，很扎眼。
根因是 v25.88 把 `.table` 的 mask 换成了「只有竖直方向」的一层，
横向那层渐隐被整条覆盖掉了。
- 做法：重新叠加两层 mask（竖直 + 横向），用 mask-composite 取交集。
========================================================================== */
@media (max-width: 719px) {
#ritual[data-stage="fan"] .table {
-webkit-mask-image:
linear-gradient(180deg, #000 0, #000 96%, rgba(0, 0, 0, 0.55) 100%),
linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%) !important;
mask-image:
linear-gradient(180deg, #000 0, #000 96%, rgba(0, 0, 0, 0.55) 100%),
linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%) !important;
-webkit-mask-composite: source-in !important;
mask-composite: intersect !important;
}
/* 牌位标签行与牌扇之间再收一点，避免中间那条暗带太宽 */
#ritual[data-stage="fan"] .pick-slots {
top: 0 !important;
}
}