:root{color-scheme:dark;--bg:#101c20;--text:#e5e5d6;--muted:#91a09a;--gold:#cbb281;--line:rgba(186,177,134,.2);--spirit-color:#cbb281;--serif:SimSun,STSong,serif;--sans:Microsoft YaHei,PingFang SC,sans-serif}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;font:14px/1.7 var(--sans);color:var(--text);background:radial-gradient(ellipse at 40% 0,rgba(54,89,79,.17),transparent 55%),var(--bg);min-width:320px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid #f0d99b;outline-offset:6px}button:disabled{cursor:wait}a{color:inherit;text-decoration:none}::selection{background:#8e8053;color:#fff}.page-grain{position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.035;background:repeating-linear-gradient(0deg,transparent 0 2px,#f5eed6 3px,transparent 4px)}.site-header{max-width:1400px;margin:auto;height:100px;padding:0 52px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #b6b1911f}.brand{display:flex;align-items:center;gap:14px;font:27px var(--serif);letter-spacing:5px}.brand-seal{display:grid;place-items:center;width:39px;height:44px;border:1px solid #aa966b;outline:1px solid #aa966b4d;outline-offset:3px;color:#ddc38e;font:27px var(--serif);letter-spacing:0;border-radius:2px;transform:rotate(-3deg)}.brand-sub{display:block;margin-top:7px;font:9px var(--sans);letter-spacing:2px;color:var(--muted)}.header-right{display:flex;gap:38px;align-items:center}.location{font-size:11px;letter-spacing:2px;color:#8c9d95}.location i{margin:0 10px;font-style:normal;color:#5f7269}.rules-button{border:0;background:none;color:#c6b78f;font-size:12px;letter-spacing:2px;padding:10px 0}.rules-button span{margin-left:9px;font-size:18px}.rules-button:hover{color:#f0d99b}main{max-width:1280px;padding:0 36px;margin:auto}.intro{text-align:center;padding:43px 0 34px}.eyebrow{display:flex;align-items:center;justify-content:center;gap:15px;font-size:10px;letter-spacing:4px;color:#b6a477}.eyebrow span{height:1px;width:30px;background:linear-gradient(90deg,transparent,#988764)}.eyebrow span:last-child{transform:rotate(180deg)}h1{font:38px/1.45 var(--serif);font-weight:400;letter-spacing:5px;margin:12px 0}h1 em{font-style:normal;color:#dfc798}.intro>p{font-size:12px;color:#8e9f96;letter-spacing:2px;margin:0}.experience{display:grid;grid-template-columns:minmax(0,1.68fr) minmax(320px,1fr);border:1px solid var(--line);background:#132226;min-height:650px}.stone-panel{position:relative;isolation:isolate;min-width:0;overflow:hidden;background:#14282b;min-height:650px;--spirit-color:#cbb281}.corner{position:absolute;width:13px;height:13px;z-index:5;pointer-events:none;border-color:#ad956b;border-style:solid}.top-left{left:-1px;top:-1px;border-width:2px 0 0 2px}.top-right{right:-1px;top:-1px;border-width:2px 2px 0 0}.bottom-left{left:-1px;bottom:-1px;border-width:0 0 2px 2px}.bottom-right{right:-1px;bottom:-1px;border-width:0 2px 2px 0}.scene-top{position:absolute;top:22px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;z-index:4;font-size:10px;letter-spacing:2px;color:#aab6a6}.scene-caption{display:flex;align-items:center;gap:8px}.status-dot{height:5px;width:5px;box-shadow:0 0 8px #acba8f;background:#acba8f;border-radius:50%}.scene-number{color:#7d9286}.scene{position:absolute;inset:0;overflow:hidden}.landscape{position:absolute;width:100%;height:100%;inset:0}.formation{opacity:.44;transition:opacity 1s}.stone-cracks{opacity:.17;transition:opacity .8s}.rune-glow{opacity:.18;transition:opacity 1s}.stone-rune{opacity:.8;transition:opacity .8s}.stone-aura{position:absolute;left:50%;top:43%;width:290px;height:340px;transform:translate(-50%,-50%);background:radial-gradient(ellipse,color-mix(in srgb,var(--spirit-color) 20%,transparent),transparent 65%);opacity:.12;transition:opacity 1.5s;pointer-events:none}.verse{position:absolute;top:27%;writing-mode:vertical-rl;letter-spacing:9px;font:16px/2.5 var(--serif);color:#b1b69c;opacity:.48}.verse-left{left:11%}.verse-right{right:10%}#spirit-effects{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}.scene-action{position:absolute;bottom:23px;left:15px;right:15px;text-align:center;z-index:4}.ritual-caption{font-size:11px;letter-spacing:3px;color:#a1b1a2;margin:0 0 13px}.test-button{display:flex;align-items:center;justify-content:center;gap:34px;width:260px;height:54px;margin:auto;color:#22332e;background:linear-gradient(110deg,#c5ac78,#e2cf9e 48%,#c7ac76);border:1px solid #e1ce9c;box-shadow:0 0 0 4px #ccb47e0f,0 4px 24px #0a15164d;font:19px var(--serif);font-weight:600;letter-spacing:6px;transition:filter .25s,box-shadow .25s,transform .25s}.test-button:not(:disabled):hover{filter:brightness(1.12);box-shadow:0 0 0 4px #ccb47e1a,0 0 25px #c1ae5430;transform:translateY(-1px)}.test-button:not(:disabled):active{transform:translateY(1px)}.button-mark{font-size:17px;letter-spacing:0;opacity:.6}.test-button:disabled{background:linear-gradient(110deg,#807956,#a29971,#807956);border-color:#a89b73;color:#1d2d28;filter:saturate(.7)}.ritual-progress{height:1px;width:260px;margin:7px auto 0;background:#b5a2731a;overflow:hidden}.ritual-progress span{display:block;width:0;height:100%;background:#decb92;transition:width .1s linear}.timing-note{color:#72887b;font-size:10px;letter-spacing:3px;margin:8px 0 0}.reveal-wave{position:absolute;width:70px;height:70px;left:50%;top:43%;border:1px solid var(--spirit-color);border-radius:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none}.stone-panel[data-phase=charging] .formation{opacity:.95}.stone-panel[data-phase=charging] .stone-cracks{opacity:.9}.stone-panel[data-phase=charging] .rune-glow{animation:charge-rune 3s both}.stone-panel[data-phase=charging] .stone-aura{animation:charge-aura 3s both}.stone-panel[data-phase=charging] .status-dot{animation:breathe 1s infinite}.stone-panel.has-result .stone-aura{opacity:.8}.stone-panel.has-result .formation{opacity:.8;stroke:var(--spirit-color)}.stone-panel.has-result .rune-glow{opacity:.55}.stone-panel.has-result .stone-cracks{opacity:.7}.stone-panel.revealing .reveal-wave{animation:reveal-wave 1.7s ease-out}.stone-panel.rare .stone-aura{opacity:1}.stone-panel[data-element=mortal] .rune-glow,.stone-panel[data-element=mortal] .stone-cracks{opacity:.05}.stone-panel[data-element=mortal] .stone-aura{opacity:0}.stone-panel[data-element=mortal] .formation,.stone-panel[data-element=mortal] .stone-rune{opacity:.2}.stone-panel[data-element=empty] .reveal-wave{border-style:dashed}.result-panel{min-width:0;padding:28px 30px 0;background:linear-gradient(145deg,#1b2c2d66,transparent 45%),#152428;border-left:1px solid var(--line);position:relative;display:flex;flex-direction:column;--spirit-color:#cbb281}.record-header{display:flex;align-items:center;justify-content:space-between}.small-eyebrow{font-size:8px;letter-spacing:2.5px;color:#7f9287}.record-header h2{font:24px var(--serif);letter-spacing:5px;font-weight:400;color:#d5c5a2;margin:5px 0 0}.record-stamp{font:11px/1.4 var(--serif);border:1px solid #977a54;color:#baa17a;padding:4px 5px;letter-spacing:3px;opacity:.7;transform:rotate(5deg)}.result-heading{margin-top:23px;text-align:center;min-height:88px}.result-category{font-size:9px;letter-spacing:3px;color:#a69a78}.result-heading h3{font:27px/1.5 var(--serif);letter-spacing:3px;font-weight:400;color:#e4dfcb;margin:5px 0 3px}.result-heading p{font-size:10px;letter-spacing:1.5px;color:#82978b;margin:0}.chart{width:100%;max-width:320px;aspect-ratio:320/290;margin:-4px auto -7px;position:relative}.chart svg{width:100%;height:100%;overflow:visible;display:block}.chart .axis-label{font-family:var(--serif);font-size:16px}.chart .axis-value{font-family:var(--sans);font-size:10px}.chart .grid-label{font:7px var(--sans);fill:#70857b}.chart .radar-shape,.chart .ring-art{animation:chart-in .8s ease-out both;transform-origin:160px 150px}.points-heading{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:2px;padding-bottom:12px;border-bottom:1px solid var(--line);color:#b8bca7}.points-heading>span:last-child{font-size:10px;letter-spacing:1px;color:#9aab9c}.attributes{display:grid;grid-template-columns:repeat(5,1fr);padding:15px 0 13px;gap:4px}.attribute{text-align:center}.attribute-name{font:13px var(--serif);color:var(--attribute-color,#aeaf9d);margin-bottom:4px}.attribute-value{font:17px var(--serif);color:#d6d9c7}.attribute-value small{font:9px var(--sans);color:#839587}.attribute.is-inactive{opacity:.4}.attributes.is-special{display:flex;justify-content:center;gap:28px;padding:13px 0}.special-stat{display:flex;flex-direction:column;text-align:center;gap:4px;min-width:65px}.special-stat>span{font-size:10px;letter-spacing:2px;color:#91a397}.special-stat>strong{font:24px var(--serif);font-weight:400;color:var(--spirit-color)}.special-stat>strong small{font:11px var(--sans);padding-left:4px}.stat-divider{width:1px;background:var(--line);margin:7px 0}.result-description{color:#93a395;font-size:11px;line-height:1.95;letter-spacing:.4px;margin:0 0 16px;min-height:42px}.record-footer{margin-top:auto;padding:15px 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:13px;color:#7b8f80;font:11px var(--serif);letter-spacing:2px}.tiny-diamond{font-size:10px;color:#b29f73}.below-scene{display:flex;justify-content:space-between;margin-top:14px;color:#6e8377;font-size:10px;letter-spacing:2px}.site-footer{max-width:1280px;margin:35px auto 0;padding:20px 36px 26px;display:flex;justify-content:space-between;border-top:1px solid #a9ae8a13;font-size:10px;letter-spacing:1.5px;color:#62796c}.site-footer i{font-style:normal;margin:0 7px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{background:#182b2d;color:var(--text);border:1px solid #8e825e;width:min(610px,calc(100vw - 32px));max-height:85vh;padding:30px 34px;box-shadow:0 24px 100px #0008;overscroll-behavior:contain}dialog::backdrop{background:#061416c9;backdrop-filter:blur(5px)}.dialog-top{display:flex;justify-content:space-between;align-items:center}.close-button{background:transparent;color:#c6b68f;border:0;font-size:29px;line-height:1;padding:2px 6px}dialog h2{font:30px var(--serif);letter-spacing:5px;margin:14px 0 8px;color:#dfc798}dialog h3{font:17px var(--serif);color:#d3c197;margin:25px 0 10px}dialog p{font-size:12px;color:#a3b2a5;line-height:1.9}dialog .dialog-intro{letter-spacing:2px;color:#a99772}.rules-table-wrap{overflow-x:auto}dialog table{width:100%;border-collapse:collapse;font-size:11px}dialog th,dialog td{text-align:left;padding:9px 6px;border-bottom:1px solid #b3a27422}dialog th{color:#cbb281;font-weight:400}dialog td{color:#a3b2a5}dialog th:last-child,dialog td:last-child{text-align:right}.result-panel.result-revealed .result-heading{animation:heading-in .6s ease-out}.result-category.is-rare{color:var(--spirit-color)}.result-panel.is-rare .result-heading h3{color:var(--spirit-color);text-shadow:0 0 24px color-mix(in srgb,var(--spirit-color) 25%,transparent)}
.page-grain{opacity:.025;background-image:url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22160%22%20height=%22160%22%3E%3Cfilter%20id=%22noise%22%3E%3CfeTurbulence%20type=%22fractalNoise%22%20baseFrequency=%22.8%22%20numOctaves=%223%22%20stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Cpath%20d=%22M0%200h160v160H0z%22%20fill=%22white%22%20filter=%22url(%23noise)%22/%3E%3C/svg%3E');background-repeat:repeat}
@keyframes breathe{50%{opacity:.35}}@keyframes charge-rune{0%{opacity:.2}60%{opacity:.7}100%{opacity:1}}@keyframes charge-aura{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}}@keyframes reveal-wave{0%{opacity:.9;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(9)}}@keyframes chart-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes heading-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1450px){.intro{padding-top:48px;padding-bottom:40px}.experience{min-height:690px}.stone-panel{min-height:690px}.chart{margin-top:3px;margin-bottom:0}.result-panel{padding-top:32px}.result-heading{margin-top:28px}}
@media(max-width:1000px){.site-header{padding:0 30px;height:88px}main{padding:0 24px}.experience{grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr)}.result-panel{padding:24px 22px 0}.stone-panel{min-height:640px}.verse-left{left:6%}.verse-right{right:5%}.result-heading h3{font-size:24px;letter-spacing:1px}.scene-top{left:18px;right:18px}.scene-number{display:none}.intro h1{font-size:34px}.site-footer{padding-left:24px;padding-right:24px}}
@media(max-width:720px){.site-header{height:82px;padding:0 23px}.brand{font-size:23px;gap:11px}.brand-seal{width:32px;height:36px;font-size:23px}.brand-sub{font-size:7px;letter-spacing:1.5px}.header-right{gap:0}.location{display:none}.rules-button{font-size:10px;letter-spacing:1px}.rules-button span{font-size:16px}.intro{padding:32px 0 27px}.intro h1{font-size:27px;letter-spacing:2px;margin:12px 0}.intro>p{font-size:10px;letter-spacing:1px;max-width:310px;margin:auto;line-height:1.9}.eyebrow{font-size:9px;letter-spacing:3px}.eyebrow span{width:20px}main{padding:0 17px}.experience{display:block}.stone-panel{min-height:560px}.scene-top{top:18px;font-size:9px;letter-spacing:1px}.scene-number{display:block;font-size:8px}.scene-action{bottom:20px}.verse{font-size:13px;top:28%;letter-spacing:7px}.verse-left{left:8%}.verse-right{right:7%}.ritual-caption{font-size:10px;letter-spacing:2px}.test-button{width:240px;height:51px;font-size:18px}.ritual-progress{width:240px}.result-panel{border-left:0;border-top:1px solid var(--line);padding:25px 27px 0}.record-header h2{font-size:24px}.result-heading{margin-top:22px;min-height:82px}.result-heading h3{font-size:27px;letter-spacing:2px}.chart{max-width:310px;margin-top:-6px;margin-bottom:0}.result-description{font-size:11px;min-height:0;margin:2px 0 20px}.attributes{padding:17px 0}.below-scene{font-size:8px;letter-spacing:1px;gap:10px;margin-top:12px}.site-footer{padding:18px 20px 25px;margin-top:28px;font-size:8px;letter-spacing:1px}.site-footer>span:last-child{display:none}.stone-aura{width:230px}}
/* 灵石、天象与图表的第二版表现。 */
.stone-motion{animation:stone-hover 5.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.stone-body{transform-box:fill-box;transform-origin:50% 65%}
.stone-shadow{transform-box:fill-box;transform-origin:center;animation:shadow-hover 5.4s ease-in-out infinite}
.stone-panel[data-phase=charging] .stone-motion{animation:stone-levitate 3s ease-in-out both}
.stone-panel[data-phase=charging] .stone-body{animation:stone-tremor 1.25s ease-out 2 both}
.stone-panel[data-phase=charging] .stone-shadow{opacity:.27;transform:scale(.76,.85);animation:none;transition:transform .7s,opacity .7s}
.floating-shards{opacity:.65;transition:opacity .7s}
.floating-shards>path{transform-box:fill-box;transform-origin:center;animation:shard-hover 4.5s ease-in-out infinite;animation-delay:var(--float-delay,0s)}
.stone-panel[data-phase=charging] .floating-shards{opacity:.95}
.scene-motes>circle{animation:mote-drift 6s ease-in-out infinite}
.scene-motes>circle:nth-child(2n){animation-delay:-2.5s;animation-duration:7.5s}
.scene-motes>circle:nth-child(3n){animation-delay:-4s;animation-duration:5.8s}
.moon-disc{animation:moon-glimmer 7s ease-in-out infinite}
.moon-halo{animation:moon-halo-breathe 7s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.sky-stars>*{opacity:.65;animation:star-twinkle var(--twinkle-duration,5s) ease-in-out infinite;animation-delay:var(--twinkle-delay,0s)}
.stone-panel[data-phase=charging] .moon-disc{animation:moon-response 3s ease-in-out both}
.chart .axis-label{font-size:17px}
.chart .axis-value{font-size:11px;font-weight:500}
.chart .grid-label{font-size:8px;fill:#a0ac96;paint-order:stroke;stroke:#152428;stroke-width:2px;stroke-linejoin:round}
.chart .radar-shape{filter:drop-shadow(0 0 5px #e8b34c24)}
@keyframes stone-hover{0%,100%{transform:translateY(-14px) rotate(-.3deg)}50%{transform:translateY(-28px) rotate(.5deg)}}
@keyframes stone-levitate{0%{transform:translateY(-14px)}30%{transform:translateY(-25px)}70%{transform:translateY(-34px)}100%{transform:translateY(-14px)}}
@keyframes stone-tremor{0%,100%{transform:translate(0,0) rotate(0)}10%{transform:translate(-11px,4px) rotate(-2deg)}22%{transform:translate(12px,-3px) rotate(2.2deg)}35%{transform:translate(-10px,3px) rotate(-1.8deg)}49%{transform:translate(9px,-2px) rotate(1.5deg)}64%{transform:translate(-7px,1px) rotate(-1deg)}82%{transform:translate(4px,-1px) rotate(.6deg)}}
@keyframes shadow-hover{0%,100%{transform:scale(.9,1);opacity:.4}50%{transform:scale(.76,.88);opacity:.27}}
@keyframes shard-hover{0%,100%{transform:translateY(-5px) rotate(-5deg)}50%{transform:translateY(-19px) rotate(9deg)}}
@keyframes mote-drift{0%,100%{transform:translate(0,-6px);opacity:.35}50%{transform:translate(9px,-29px);opacity:.95}}
@keyframes moon-glimmer{0%,100%{opacity:.36}46%{opacity:.64}60%{opacity:.56}}
@keyframes moon-halo-breathe{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.1)}}
@keyframes moon-response{0%,100%{opacity:.45}35%{opacity:.85}65%{opacity:.54}}
@keyframes star-twinkle{0%,100%{opacity:.22}45%{opacity:.95}65%{opacity:.45}}
@media(max-width:720px){.moon{transform:translateX(-110px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.stone-motion{transform:translateY(-14px)}.stone-panel[data-phase=charging] .rune-glow{opacity:.7}.stone-panel[data-phase=charging] .stone-aura{opacity:.5}.reveal-wave{display:none}.sky-stars>*{opacity:.65}}
