/* 瓷行万里 v3 — 现代 UI 刷新：贴合 IP 的印章系统、五款专属解锁动效、轮播与角色动态。 */
:root{--ink:#203f52;--navy:#244e69;--blue:#507984;--muted:#6c7b7c;--paper:#faf7f0;--line:#e5e0d4;--gold:#a88954;--ease-spring:cubic-bezier(.34,1.56,.64,1);--ease-out:cubic-bezier(.22,.61,.36,1)}
html,body{background:#eeece4;color-scheme:only light}
body{font-size:14px;line-height:1.75}
button,a{-webkit-tap-highlight-color:transparent}
.app-shell{background:var(--paper);box-shadow:0 12px 100px #203c4320}
main{padding-bottom:112px}
.app-header{height:72px;background:#faf7f0f2;backdrop-filter:blur(10px);gap:3px;padding:12px 20px;border-bottom:1px solid #e1dccb88}
.brand{font-size:27px;letter-spacing:3px;margin-right:auto;white-space:nowrap}
.seal{background:#a45e4d;border-radius:2px;outline:1px solid #a45e4d;outline-offset:2px;padding:5px 3px;font-weight:400}
.header-title{position:absolute;left:50%;transform:translateX(-50%);width:calc(100% - 168px);pointer-events:none}
.header-title+.icon-button{margin-left:auto}
.header-title h1{font-size:19px;letter-spacing:2px}
.header-title small{letter-spacing:1px;color:#7a837d}
.header-spacer{width:34px}
.icon-button{width:36px;height:36px}
.icon-button .icon{width:19px;height:19px}
.motion-toggle{width:30px;height:30px;margin-left:1px;border:1px solid #d9dfd6;color:#617b79}
.motion-toggle .icon{width:14px;height:14px}
.motion-play{display:none}
html[data-motion=off] .motion-play{display:block}
html[data-motion=off] .motion-pause{display:none}
.eyebrow{font-size:8px;letter-spacing:1.8px;color:#587779}
.primary{border-radius:12px;background:linear-gradient(150deg,#2d5d78,#1f4a5f);box-shadow:0 6px 16px #23445526,inset 0 1px 0 #ffffff2b;font-weight:600;letter-spacing:.5px}
.secondary{border-radius:12px;background:#fffdf7;border-color:#d6d9d0}
.primary,.secondary,.role-card,.product,.shortcut,.icon-button,.crew-mate,.feature-card,.landscape-story,.stamp,.station-symbol,.journal-dot{transition:transform .25s var(--ease-out),opacity .25s var(--ease-out),box-shadow .25s var(--ease-out)}
button:active{transform:scale(.97)}
.nav-item:active,.motion-toggle:active,.journal-dot:active{transform:none}
.bottom-nav{border-top:1px solid #dcded3;background:#fcfaf5f2;backdrop-filter:blur(14px);padding-top:8px;box-shadow:0 -5px 22px #3c594306}
.nav-item{flex:1;max-width:72px;min-width:52px;font-size:9.5px;letter-spacing:1.6px;gap:3px;border-radius:14px}
.nav-item .icon{transition:transform .35s var(--ease-spring)}
.nav-item.active{background:linear-gradient(160deg,#edf3ee,#e0ebe5);color:#244f5e;border-radius:14px;box-shadow:inset 0 1px 0 #ffffffd9,0 3px 10px #3c59430c}
.nav-item.active .icon{stroke-width:1.8;transform:translateY(-1px) scale(1.1)}
.section-heading{margin:25px 0 13px}
.section-heading h2{font-size:19px;letter-spacing:1px}
.section-heading h2:before{content:'';display:inline-block;width:3px;height:14px;background:#9da995;margin-right:9px;vertical-align:-1px;border-radius:2px}
.text-link{color:#526f74;font-size:11px}
.sea-hero{min-height:350px;margin:0 -22px;padding:27px 25px 50px;background:#e7ede6;isolation:isolate}
.sea-hero:before{display:none}
.hero-landscape{position:absolute;inset:0;z-index:-2;background:url('assets/silk-road-sea.webp') 62% 56%/cover no-repeat}
.sea-hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#fbf8eedb 0%,#fbf8ee99 39%,#fbf8ee00 75%),linear-gradient(0deg,#f6f5ea 0%,transparent 26%)}
.hero-copy{position:relative;z-index:1}
.sea-hero .eyebrow{display:flex;align-items:center;gap:7px;font-size:9px;letter-spacing:1px;margin-bottom:15px;color:#526e6e}
.eyebrow-line{width:16px;height:1px;background:#a58c63}
.sea-hero h1{font-size:36px;line-height:1.48;letter-spacing:3px;color:#224a5a;font-weight:600}
.sea-hero h1 span{color:#456f6d}
.sea-hero .subtitle{font-size:11px;color:#557071;margin-top:11px;letter-spacing:.3px}
.sea-hero .primary{margin:20px 0 0;width:auto;display:inline-flex;min-height:40px;padding:10px 15px;border-radius:10px;font-size:11px}
.hero-coordinate{position:absolute;right:17px;top:32px;writing-mode:vertical-rl;letter-spacing:4px;font:10px/1.5 var(--serif);color:#45646b}
.hero-bottom-note{position:absolute;bottom:16px;left:25px;right:23px;display:flex;justify-content:space-between;font-size:7px;letter-spacing:1.5px;color:#607c7d}
.sea-hero .wave{width:120%;left:-10%;height:32px;bottom:35px;color:#bdd5ce;opacity:.75}
.companions{padding-top:20px}
.companions-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.companions-heading h2{font-size:18px;letter-spacing:1px;margin-top:3px}
.companions-heading .eyebrow{font-size:7px;letter-spacing:1.4px}
/* —— 首页伙伴区：五位瓷灵各自独立动效 —— */
.crew-link{display:block;width:100%;padding:0;margin-top:12px}
.crew-row{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;width:100%}
.crew-mate{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 2px 7px;border-radius:14px}
.crew-mate:before{content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);width:72px;height:72px;border-radius:50%;background:radial-gradient(circle,#ffffff 12%,var(--tone) 78%);border:1px solid #ffffffc9;box-shadow:0 0 0 4px #ffffff2e}
.crew-mate b{position:relative;font:10px var(--serif);color:var(--role);letter-spacing:.5px;z-index:1}
.mate-img{position:relative;z-index:1;width:100%;height:98px;object-fit:contain;object-position:center bottom;mix-blend-mode:multiply;transform-origin:50% 94%}
.crew-mate:hover{transform:translateY(-3px)}
.shortcut-grid{gap:9px;margin-top:21px;padding:16px 0 0;border-top:1px solid var(--line)}
.shortcut{min-height:91px;background:#eeeade;border-color:#e6e2d5;border-radius:14px;padding-top:12px}
.shortcut:nth-child(2){background:#e6eeea}.shortcut:nth-child(3){background:#f1e9da}.shortcut:nth-child(4){background:#e8edf0}
.shortcut .icon{width:24px;height:24px;stroke-width:1.35;margin-bottom:4px;color:#426877}
.shortcut b{font-size:12px;letter-spacing:.5px}.shortcut small{color:#737e76;font-size:8px}
.feature-card{border-radius:14px;min-height:195px;padding:20px;background:linear-gradient(110deg,#e9eee5,#f3f4eb);border-color:#dbe3d7}
.feature-card:after{content:'';position:absolute;right:-30px;bottom:-70px;width:230px;height:230px;border-radius:50%;border:1px solid #98b2a433;box-shadow:0 0 0 15px #a3b9a917,0 0 0 30px #a3b9a90d;pointer-events:none}
.feature-copy{width:60%}.feature-copy h3{font-size:21px;line-height:1.55;margin-top:10px}
.feature-copy p{color:#61766e}.feature-character{right:3px;top:12px;height:215px;z-index:1}
.landscape-story{display:block;width:100%;position:relative;margin-top:21px;min-height:186px;padding:19px;text-align:left;border-radius:14px;border:1px solid #e4dfcf;overflow:hidden;background:linear-gradient(90deg,#f9f6eedd,#f9f6ee55 55%,transparent),url('assets/kiln-landscape.webp') center 54%/cover}
.landscape-story h3{margin-top:6px;font-size:21px;letter-spacing:1px;max-width:175px;line-height:1.65}
.landscape-story .text-link{margin-top:20px;font-size:10px}
.footer-note{letter-spacing:1px;color:#89948b;margin-top:30px}
.page-lead{padding:22px 0 21px}.page-lead h2{font-size:25px;letter-spacing:1px}
.page-lead p:not(.eyebrow){color:#5f776f;font-size:11px}
.catalog-lead,.shop-lead{margin:0 -22px 20px;padding:23px 22px 32px;position:relative;min-height:188px;background:linear-gradient(90deg,#faf7f0f2,#faf7f0a6 67%,#faf7f020),url('assets/kiln-landscape.webp') center 55%/cover;border-bottom:0}
.lead-index{display:block;font:10px/1.8 var(--serif);letter-spacing:2px;color:#8b7859;margin-bottom:17px}
.catalog-lead h2,.shop-lead h2{font-size:25px;letter-spacing:1px;margin-top:6px}
.catalog-lead .eyebrow,.shop-lead .eyebrow{font-size:7px;letter-spacing:1.6px}
.search-box{border-radius:999px;background:#fffdf8;border-color:#dcded3;min-height:46px}
.chip{border-radius:999px;min-height:37px;background:#edece3;color:#65766f;font-size:11px}
.chip.active{background:linear-gradient(150deg,#33606c,#27505c);border-color:#2c5560;box-shadow:0 4px 10px #2c556033}
.result-caption{color:#6e7e76;font-size:10px;letter-spacing:.3px}
/* —— 图鉴卡片：白芯 + 角色色晕环，拉开人物与底色 —— */
.role-grid{gap:14px}
.role-card{border-radius:16px;min-height:224px;border:1px solid #ffffffc2;background:radial-gradient(132% 98% at 50% 24%,#ffffff 0%,#ffffff 32%,var(--tone) 78%);box-shadow:0 8px 20px #2b4a4310,inset 0 0 0 1px #d9e2d84d}
.role-halo{position:absolute;top:19px;left:50%;transform:translateX(-50%);width:150px;height:150px;border-radius:50%;border:1.5px dashed var(--role);opacity:.42;box-shadow:0 0 0 10px #ffffff24;z-index:0}
html[data-motion=on] .role-halo{animation:halo-spin 30s linear infinite}
.role-number{position:absolute;left:12px;top:8px;font:italic 19px var(--serif);color:var(--role);opacity:.62;z-index:1}
.role-card .role-portrait{height:166px;position:relative;z-index:1;padding:0 14px}
.role-card .role-card-copy{z-index:2;padding:13px 13px 12px}.role-card h3{font-size:18px;letter-spacing:1px}
.role-card small{color:#54655f;font-size:9px;letter-spacing:.5px}
.role-card.wide{min-height:150px}.role-card.wide .role-portrait{height:172px}.role-card.wide .role-number{left:16px;top:10px;font-size:13px}
.role-card.wide .role-halo{left:auto;right:5%;top:8px;transform:none}
.role-card.wide .role-card-copy{padding:24px 18px}
.detail-hero{min-height:350px;padding-top:30px;background:linear-gradient(115deg,var(--tone),#faf7f0 86%);isolation:isolate}
.detail-hero:before{content:'';position:absolute;width:245px;height:245px;border-radius:50%;border:1px solid #b4c2b45e;right:-40px;top:28px;box-shadow:0 0 0 13px #ffffff3b,0 0 0 14px #acbca329;z-index:-1}
html[data-motion=on] .detail-hero:before{animation:spin-plain 60s linear infinite}
.detail-hero:after{content:'瓷 · 灵';position:absolute;right:20px;top:15px;writing-mode:vertical-rl;font:11px var(--serif);letter-spacing:7px;color:var(--role)}
.detail-copy h1{font-size:35px;letter-spacing:3px}.detail-copy p{color:#60756f}
.detail-tabs{justify-content:space-around;gap:20px;margin-bottom:20px}.detail-tab{min-height:51px;font-size:13px;letter-spacing:3px}
.detail-tab.active:after{height:2px;background:#6e9184}
.meta-cell{background:#eef0e7;border:1px solid #e2e5d8;gap:7px;padding:11px 9px;border-radius:12px}.meta-cell b{font-size:10px}
.body-copy{color:#5b716e;line-height:2.1}.quote{font-size:17px;margin:23px 0;padding:9px 0 9px 14px;background:linear-gradient(90deg,var(--tone),transparent)}
.vessel-panel{background:#f1efe5;min-height:185px;border-radius:14px}.pattern-panel{padding:16px 12px;background:#f0eee4;border-radius:14px;gap:13px}.pattern-panel img{width:103px;height:103px;border-radius:12px}.pattern-panel h3{font-size:18px}
/* —— 角色详情：角色入场、专属待机动效、互动欢呼 —— */
.detail-figure{position:absolute;right:2px;bottom:10px;height:328px;width:61%;border:0;background:none;padding:0;z-index:1;cursor:pointer}
.detail-img-wrap{display:block;width:100%;height:100%;transform-origin:50% 92%}
.detail-figure .detail-img{width:100%;height:100%;object-fit:contain;object-position:center bottom;mix-blend-mode:multiply}
html[data-motion=on] .detail-figure{animation:char-arrive .7s var(--ease-spring) backwards .08s}
.detail-figure.cheer .detail-img-wrap{animation:char-cheer .65s var(--ease-spring)!important}
.cheer-hearts{position:absolute;inset:0;pointer-events:none;z-index:2}
.cheer-heart{position:absolute;left:58%;bottom:42%;width:13px;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21S2 15 2 8a5 5 0 0 1 10-1A5 5 0 0 1 22 8c0 7-10 13-10 13Z' fill='%23d98a94'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;animation:cheer-rise 1s ease-out both;animation-delay:var(--dd,0ms)}
.detail-hint{position:absolute;left:-4px;bottom:20px;background:#fffdf7ee;border:1px solid var(--role);color:var(--role);font-size:9px;letter-spacing:1px;padding:4px 9px;border-radius:999px;box-shadow:0 3px 10px #2b4a4318;z-index:2;transition:opacity .4s}
html[data-motion=on] .detail-hint{animation:hint-float 2.6s ease-in-out infinite}
.detail-figure.cheer .detail-hint{opacity:0}
.journey-intro{padding-top:22px;padding-bottom:17px;background:#e6eeeb;isolation:isolate;min-height:332px}
.journey-scenery{position:absolute;inset:0;z-index:-2;background:url('assets/silk-road-sea.webp') 62% center/cover}
.journey-intro:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#faf7f0e8 0%,#faf7f0bd 26%,#e8efeb10 53%,#f2f4ecf5 77%,#f1f3eb 100%)}
.journey-intro .lead-index{margin-bottom:9px}.journey-intro h2{font-size:26px;letter-spacing:1px;margin-top:4px}
.journey-intro p{color:#597371;font-size:11px}.journey-intro p.eyebrow{font-size:7px;letter-spacing:1.5px}
.journey-horizon{height:72px;display:flex;align-items:center;justify-content:space-between;padding-right:9px}
.journey-horizon>span{font:11px var(--serif);letter-spacing:3px;color:#4f7170;padding:4px 8px;background:#f7f5e88c;border-radius:2px}
.compass{width:61px;height:61px;stroke:#536f70;fill:none;stroke-width:.8;opacity:.75}
html[data-motion=on] .compass{animation:compass-spin 40s linear infinite;transform-origin:center}
.route-map{margin-top:17px;padding-bottom:3px}.route-line{opacity:.65;top:23px}.station-symbol{border-color:#b7c9bf;background:#faf9ef;width:42px;height:42px;border-radius:50%}
.station.selected .station-symbol{background:#355e64;border-color:#355e64;box-shadow:0 0 0 4px #ffffffa6}
.station b{font-size:10px;letter-spacing:1px}.station small{font-size:9px;color:#61766f}
.progress-block{padding:22px 0 8px}.progress-label{font-size:11px;color:#5c736c}.progress-label b{color:#294e53;font-weight:600}
.progress-track{height:6px;background:#e3e7db;border-radius:99px;overflow:hidden}
.progress-fill{background:linear-gradient(90deg,#a5bba5,#577f76);border-radius:99px;transition:width .8s var(--ease-spring)}
.station-card{border-radius:16px;padding:21px 18px;background:linear-gradient(110deg,var(--tone),#f4f5ec);border-color:#d6e0d4}
.station-card h2{font-size:22px;line-height:1.65}.station-card .station-art{height:225px;top:21px;right:0;max-width:42%}.station-card-copy{width:55%}.station-card .body-copy{color:#5e736c;font-size:11px;min-height:75px}.station-card .primary{margin-top:15px}
.journey-note{color:#728078;background:#f0f0e6;border:1px solid #e6e6d8;padding:12px;border-radius:12px;font-size:10px}
/* —— 护照页 —— */
.passport-top{padding-top:25px;padding-bottom:25px;gap:8px}.passport-top h2{font-size:23px;letter-spacing:1px}.passport-top .eyebrow{font-size:7px;letter-spacing:1.2px}.passport-top p{font-size:10px}
.passport-mark{flex-shrink:0;width:54px;height:54px;border-radius:50%;border:1.5px solid #9fb6ad;background:linear-gradient(145deg,#eff4ef,#e0eae3);color:#5d8378;display:grid;place-items:center;position:relative;cursor:pointer}
.passport-mark .icon{width:24px;height:24px}
.passport-mark:after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px dashed #9fb6ad;opacity:.75}
html[data-motion=on] .passport-mark:after{animation:spin-plain 16s linear infinite}
.passport-mark:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 6px 16px #3c594318}
.passport{padding:16px 18px 24px;border-radius:14px;background:linear-gradient(95deg,#f2e7cf,#fcf6e8 47%,#e4d7bc 50%,#fdf8eb 53%,#f3e8d0);border-color:#c9b58d;box-shadow:0 3px 0 #e8dfcb,0 6px 0 #d6c9af,0 14px 34px #655a3512}
.passport:before{content:'';position:absolute;inset:8px;border:1px solid #c4ae834a;border-radius:8px;pointer-events:none}
.passport-coverline{display:flex;justify-content:space-between;color:#978365;font-size:6px;letter-spacing:1px;margin-bottom:20px}
.passport-title{font:12px var(--serif);color:#89714f;margin-bottom:24px;letter-spacing:1px}
.stamp-grid{row-gap:24px}
.stamp{padding:6px 2px 4px;text-align:center;min-height:118px;border-radius:14px;border-color:transparent}
.stamp:hover{transform:translateY(-3px)}
.stamp .seal-svg{width:78px;height:78px;margin:auto;display:block;filter:drop-shadow(0 3px 6px #6b5a3a26)}
.stamp.locked .seal-svg{opacity:.72;filter:grayscale(.35) drop-shadow(0 2px 4px #6b5a3a1a)}
.stamp.locked:hover{transform:none;animation:stamp-nudge .4s ease}
.stamp.locked:hover .seal-svg{opacity:.9}
.stamp.unlocked:hover .seal-svg{transform:rotate(-2.5deg) scale(1.04);transition:transform .3s var(--ease-spring)}
.stamp b{font:11px var(--serif);margin-top:8px;letter-spacing:1px;display:block}
.stamp small{font-size:9px;margin-top:4px;color:#887c66}
.stamp.unlocked small{color:var(--role);opacity:.85}
.stamp-ring{display:block;position:relative}
.stamp-tick{position:absolute;right:14px;bottom:6px;border-radius:50%;background:var(--role);color:#fffdf6;font-size:8px;width:16px;height:16px;display:grid;place-items:center;border:1.5px solid #fffdf6;box-shadow:0 2px 5px #00000022}
.passport-count{font-size:36px;align-self:center;text-align:center;font-family:var(--serif);color:var(--navy)}
.passport-count small{letter-spacing:1px}
.shop-lead{min-height:185px;background-position:center 75%}.shop-lead h2{font-size:24px}
.shop-banner{min-height:184px;padding:21px 18px;border:1px solid #dbd1bb;border-radius:16px;background:linear-gradient(100deg,#ebe2d0,#f6f0e5)}
.shop-banner h2{font-size:25px;letter-spacing:1px}.shop-banner .eyebrow{font-size:7px;letter-spacing:1px}.shop-banner img{height:195px;max-width:38%}
.shop-banner p{font-size:10px;max-width:205px}.product-grid{gap:19px 14px}.product{padding:9px;background:#f7f3e9;border:1px solid #e3ded0;border-radius:14px}
.product img{height:141px;background:#efece0;border-radius:10px;padding:5px}.product h3{font-size:13px}.product p{font-size:9px;line-height:1.7}.product-tag{font-size:7px;margin-top:9px;color:#938871}
.product-more .icon{width:13px;flex-shrink:0}.empty{background:#eeeee4;border:1px solid #e4e6d9;border-radius:16px}
/* —— 我的收藏：卡片化 + 入场/待机/心心动效 —— */
.collection-list{display:grid;gap:11px}
.collection-item{position:relative;border-radius:16px;background:linear-gradient(115deg,#ffffffd9,var(--tone) 140%);border:1px solid #e7e6da;box-shadow:0 4px 14px #2b4a430e;display:flex;align-items:center;padding:10px 12px 10px 10px;gap:4px;overflow:hidden}
.collection-open{flex:1;display:flex;align-items:center;gap:13px;min-width:0;padding:0;text-align:left;border:0;background:none}
.collection-portrait{width:62px;height:88px;flex-shrink:0;position:relative;display:grid;place-items:end center}
.collection-portrait:before{content:'';position:absolute;bottom:2px;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle,#ffffff 6%,var(--tone) 88%);border:1px solid #ffffffd0;box-shadow:0 0 0 4px #ffffff47}
.collection-portrait img{position:relative;z-index:1;width:56px;height:84px;object-fit:contain;object-position:center bottom;mix-blend-mode:multiply;transform-origin:50% 94%}
.collection-copy{min-width:0}
.collection-copy h3{font-size:17px;color:var(--role);letter-spacing:.5px}
.collection-copy small{display:block;color:#667078;font-size:10px;margin-top:1px}
.collection-tag{display:inline-block;margin-top:6px;font-size:8.5px;letter-spacing:.5px;color:#6f8078;background:#ffffffb6;border:1px solid #ffffffdd;padding:2px 8px;border-radius:999px}
.collection-go{color:var(--role);opacity:.65;margin-left:auto;flex-shrink:0;transition:transform .3s var(--ease-spring)}
.collection-go .icon{width:15px;height:15px}
.collection-item:hover .collection-go{opacity:1;transform:translateX(2px)}
.heart-btn{position:relative;width:38px;height:38px;border-radius:50%;background:#ffffffc9;border:1px solid #e8e4d6;flex-shrink:0}
.heart-btn svg{width:17px;height:17px;fill:#e3a7ae;stroke:#d98f98;transition:transform .25s var(--ease-spring)}
.heart-btn:hover svg{fill:#d97785;stroke:#d97785}
.heart-btn.favorite-pop{animation:heart-pop .5s var(--ease-spring)}
.heart-btn.favorite-pop:after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid #e3a7ae;animation:heart-ring .6s ease-out both}
/* —— 今日识瓷：循环轮播 —— */
.journal-carousel{margin-top:2px}
.journal-track{position:relative;height:112px;border-radius:16px;border:1px solid #e2e2d3;background:linear-gradient(115deg,#f5f3e9,#eaeee1);overflow:hidden;box-shadow:0 4px 16px #2b4a430c}
.journal-slide{position:absolute;inset:0;display:flex;align-items:center;gap:13px;padding:13px 14px;text-align:left;border:0;background:none;opacity:0;transform:translateX(36px) scale(.985);pointer-events:none;transition:opacity .45s ease,transform .55s var(--ease-spring)}
.journal-slide.active{opacity:1;transform:none;pointer-events:auto;z-index:1}
.journal-art{width:76px;height:86px;object-fit:contain;mix-blend-mode:multiply;background:radial-gradient(circle at 50% 60%,#ffffff 6%,var(--tone) 92%);border-radius:12px;padding:6px;flex-shrink:0;border:1px solid #ffffffc0}
.journal-copy{min-width:0;flex:1}
.journal-copy h3{font-size:16.5px;margin:3px 0 4px;color:var(--role);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.journal-copy p{font-size:10.5px;color:#6b7d76;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.journal-go{color:var(--role);opacity:0;transform:translateX(-6px);transition:.35s var(--ease-out);flex-shrink:0}
.journal-go .icon{width:15px;height:15px}
.journal-slide.active .journal-go{opacity:.75;transform:none}
.journal-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:0 4px}
.journal-dots{display:flex;gap:6px}
.journal-dot{width:7px;height:7px;border-radius:999px;background:#d5d5c6;padding:0;min-height:0;border:0}
.journal-dot.active{width:20px;background:#315c67}
.journal-count{font:10.5px var(--serif);color:#8a978d;letter-spacing:1.5px}
/* —— 弹窗（现代圆角 + 弹簧入场） —— */
dialog{border-radius:22px;border:1px solid #e6e2d3;background:#faf7f0;box-shadow:0 30px 90px #1b3e4438,0 4px 18px #1b3e4414;overflow:auto}
dialog::backdrop{background:#1c39485c;backdrop-filter:blur(6px)}
.modal-top{background:#fbf9f3;border-bottom:1px solid #efe9db}.modal-top h2{font-size:19px;letter-spacing:1px}.modal-body p{color:#5e746e}.modal-body .tag-label{font-size:10px;color:#8e7c59}
/* —— 印章回看（解锁后随时查看） —— */
.stamp-view{text-align:center}
.stamp-view-stage{position:relative;width:192px;height:192px;margin:4px auto 14px}
.stamp-view-stage .seal-svg{width:100%;height:100%;filter:drop-shadow(0 10px 22px #37503f2e)}
.view-ring{position:absolute;inset:8px;border-radius:50%;border:2px solid var(--role);opacity:0;pointer-events:none}
html[data-motion=on] .stamp-view-stage.seal-play .seal-svg{animation:seal-press .62s cubic-bezier(.22,1.2,.36,1) both .12s}
html[data-motion=on] .stamp-view-stage.seal-play .view-ring{animation:ink-ring .85s ease-out both;animation-delay:var(--d,.4s)}
html[data-motion=on] .stamp-view-stage.seal-play .view-ring.second{animation-delay:.58s}
.stamp-view-status{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:1px;color:var(--role);background:var(--tone);border:1px solid #ffffffd9;padding:5px 12px;border-radius:999px}
.stamp-view-status .icon{width:14px;height:14px}
.stamp-view-note{font:13px/2 var(--serif);color:#5b6d67;margin:13px auto 4px;max-width:280px}
.stamp-view .modal-actions{margin-top:14px}
/* —— 护照说明弹窗 —— */
.guide-seals{display:flex;justify-content:center;gap:0;margin:4px 0 14px}
.guide-seal{width:78px;opacity:.82;transition:transform .3s var(--ease-spring)}
.guide-seal:hover{transform:translateY(-3px) rotate(-2deg)}
.guide-seal.on{opacity:1}
.guide-seal .seal-svg{width:100%;height:auto}
/* —— 解锁reward：每位瓷灵专属动效 —— */
.reward-stage{position:relative;height:214px;margin:2px -4px 10px;border-radius:18px;background:radial-gradient(120% 135% at 50% 28%,#ffffff 0%,var(--tone) 76%);overflow:hidden;display:grid;place-items:center;box-shadow:inset 0 0 0 1px #ffffffb3}
.reward-ambient{position:absolute;inset:0;pointer-events:none;z-index:1}
.reward-seal-wrap{position:relative;z-index:2;width:148px;height:148px}
.reward-seal-svg{width:100%;height:100%;filter:drop-shadow(0 8px 18px #35503f33)}
html[data-motion=on] .reward-stage .reward-seal-svg{animation:seal-press .62s cubic-bezier(.22,1.2,.36,1) both .15s}
.reward-shadow{position:absolute;left:50%;bottom:4px;width:96px;height:13px;border-radius:50%;background:#2f4a3f24;transform:translateX(-50%);z-index:1}
html[data-motion=on] .reward-shadow{animation:shadow-press .62s ease both .15s}
.reward-eyebrow{text-align:center;font-size:8px;letter-spacing:2.4px;color:#728777;margin-top:2px}
.reward-title{font-size:21px;letter-spacing:1px;text-align:center}
.reward-sub{font-size:12px;text-align:center;color:#5e746e;line-height:2;margin-top:7px}
.reward-dots{display:flex;justify-content:center;gap:8px;margin:13px 0 16px}
.reward-dots i{width:9px;height:9px;border-radius:50%;background:#e3e0d2}
.reward-dots i.on{background:var(--c);box-shadow:0 0 0 2px #ffffff,inset 0 1px 2px #00000024}
html[data-motion=on] .reward-dots i.on{animation:dot-pop .55s var(--ease-spring) both;animation-delay:calc(.55s + var(--n,0)*1ms)}
.reward-continue{margin:10px auto 0;justify-content:center}
/* 通用章压动画 */
.fx-ring,.fx-petal,.fx-ripple,.fx-drop,.fx-lotus,.fx-ink,.fx-plum,.fx-glow,.fx-rays,.fx-wave{position:absolute;opacity:0;will-change:transform,opacity}
.fx-ring{left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border:2px solid var(--role);border-radius:50%}
html[data-motion=on] .fx-ring{animation:fx-ring .95s ease-out both;animation-delay:var(--d,0ms)}
.fx-petal{left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--role);border-radius:62% 0 62% 0}
html[data-motion=on] .fx-petal{animation:fx-petal 1.2s ease-out both;animation-delay:var(--d,0ms)}
.fx-ripple{left:50%;top:58%;width:180px;height:62px;margin:-31px 0 0 -90px;border:1.6px solid var(--role);border-radius:50%}
html[data-motion=on] .fx-ripple{animation:fx-ripple 1.35s ease-out both;animation-delay:var(--d,0ms)}
.fx-drop{left:50%;top:50%;width:7px;height:7px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--role)}
html[data-motion=on] .fx-drop{animation:fx-drop 1.05s ease-out both;animation-delay:var(--d,0ms)}
.fx-lotus{left:50%;top:50%;width:26px;height:44px;margin:-22px 0 0 -13px;background:linear-gradient(180deg,#ffffffd4,var(--tone));border:1.2px solid var(--role);border-radius:50%/62% 62% 38% 38%}
html[data-motion=on] .fx-lotus{animation:fx-lotus .95s var(--ease-spring) both;animation-delay:var(--d,0ms);animation-fill-mode:both}
.fx-ink{left:50%;top:50%;width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;background:radial-gradient(circle,#7892b26b 0%,#7892b22e 45%,transparent 68%)}
.fx-ink{transform:scale(var(--s,1))}
html[data-motion=on] .fx-ink{animation:fx-ink 1.15s ease-out both;animation-delay:var(--d,0ms)}
.fx-wave{left:-45%;width:80%;height:2px;top:46%;background:linear-gradient(90deg,transparent,#7892b2,transparent)}
html[data-motion=on] .fx-wave{animation:fx-wave 1.1s ease-in-out both;animation-delay:var(--d,0ms)}
.fx-plum{left:50%;top:32%;width:12px;height:12px;margin:-6px 0 0 -6px;background:#ecc9c2;border:1px solid #c98d8b;border-radius:74% 0 74% 0}
html[data-motion=on] .fx-plum{animation:fx-plum 1.6s ease-in both;animation-delay:var(--d,0ms)}
.fx-glow{left:50%;top:50%;width:212px;height:212px;margin:-106px 0 0 -106px;border-radius:50%;background:radial-gradient(circle,#f3d9c26e,transparent 64%)}
html[data-motion=on] .fx-glow{animation:fx-glow 1.7s ease-in-out both}
.fx-rays{left:50%;top:50%;width:264px;height:264px;margin:-132px 0 0 -132px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#c2b68126 0deg 8deg,transparent 8deg 24deg)}
html[data-motion=on] .fx-rays{opacity:.55;animation:fx-rays 9s linear infinite both}
html[data-motion=on] .reward-ambient>*{animation-delay:var(--d,0ms)}
/* —— 专属待机动效（首页五人 / 详情页 / 收藏列表共用关键帧） —— */
@keyframes hop{0%,100%{transform:translateY(0) scale(1)}14%{transform:translateY(-7px) scale(.98,1.05)}30%{transform:translateY(0) scale(1.03,.95)}44%{transform:translateY(-3px)}58%{transform:translateY(0) scale(1)}}
@keyframes sway{0%,100%{transform:rotate(0)}30%{transform:rotate(-2deg)}70%{transform:rotate(2deg)}}
@keyframes twirl{0%,100%{transform:rotate(0) translateX(0)}28%{transform:rotate(2.4deg) translateX(1.5px)}62%{transform:rotate(-2.4deg) translateX(-1.5px)}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-1.2deg)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.028)}}
@keyframes halo-spin{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes spin-plain{to{transform:rotate(360deg)}}
@keyframes compass-spin{to{transform:rotate(360deg)}}
@keyframes mate-pop{from{opacity:0;transform:translateY(16px) scale(.78)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes char-arrive{from{opacity:0;transform:translateX(48px) scale(.92)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes char-cheer{0%{transform:translateY(0) scale(1)}32%{transform:translateY(-12px) rotate(-3.5deg) scale(1.04)}62%{transform:translateY(0) scale(1.02,.96)}100%{transform:translateY(0) scale(1)}}
@keyframes cheer-rise{0%{opacity:0;transform:translate(0,0) scale(.5)}22%{opacity:1}100%{opacity:0;transform:translate(var(--dx,14px),-74px) scale(1.15)}}
@keyframes hint-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes seal-press{0%{opacity:0;transform:translateY(-44px) scale(1.85) rotate(-9deg)}55%{opacity:1;transform:translateY(5px) scale(.94) rotate(1.6deg)}76%{transform:translateY(-3px) scale(1.03) rotate(-.5deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes shadow-press{0%{opacity:0;transform:translateX(-50%) scale(1.6)}55%{opacity:1;transform:translateX(-50%) scale(.94)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes ink-ring{0%{opacity:.75;transform:scale(.45)}100%{opacity:0;transform:scale(1.5)}}
@keyframes fx-ring{0%{opacity:.7;transform:scale(.4)}100%{opacity:0;transform:scale(1.55)}}
@keyframes fx-petal{0%{opacity:0;transform:rotate(var(--a,0deg)) translate(10px,10px) scale(.4)}16%{opacity:1}100%{opacity:0;transform:rotate(calc(var(--a,0deg) + 44deg)) translate(calc(10px + var(--dx,20px)*1.9),88px) scale(1)}}
@keyframes fx-ripple{0%{opacity:.75;transform:scale(.4)}100%{opacity:0;transform:scale(1.5)}}
@keyframes fx-drop{0%{opacity:0;transform:translate(0,-8px) scale(.6)}22%{opacity:1}60%{transform:translate(calc(var(--dx,30px)*.7),-36px) scale(1)}100%{opacity:0;transform:translate(var(--dx,30px),28px) scale(.85)}}
@keyframes fx-lotus{0%{opacity:0;transform:rotate(var(--a,0deg)) translateY(-26px) scale(.3)}100%{opacity:1;transform:rotate(var(--a,0deg)) translateY(-56px) scale(1)}}
@keyframes fx-ink{0%{opacity:.85;transform:scale(calc(var(--s,1)*.35))}100%{opacity:0;transform:scale(calc(var(--s,1)*1.3))}}
@keyframes fx-wave{0%{opacity:0;transform:translateX(-30%)}28%{opacity:.9}100%{opacity:0;transform:translateX(165%)}}
@keyframes fx-plum{0%{opacity:0;transform:rotate(0deg) translate(0,-16px)}16%{opacity:1}100%{opacity:0;transform:rotate(var(--rot,140deg)) translate(var(--dx,12px),100px)}}
@keyframes fx-glow{0%{opacity:0;transform:scale(.5)}38%{opacity:1}100%{opacity:0;transform:scale(1.18)}}
@keyframes fx-rays{to{transform:rotate(360deg)}}
@keyframes modal-in{from{opacity:0;transform:translateY(28px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes dot-pop{0%{transform:scale(.4)}70%{transform:scale(1.45)}100%{transform:scale(1)}}
@keyframes heart-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}70%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes heart-ring{0%{opacity:.85;transform:scale(.62)}100%{opacity:0;transform:scale(1.55)}}
@keyframes stamp-nudge{0%,100%{transform:translateX(0)}28%{transform:translateX(-3px) rotate(-1.4deg)}64%{transform:translateX(3px) rotate(1.4deg)}}
@keyframes favorite{0%,100%{transform:scale(1)}45%{transform:scale(1.05)}}
/* 待机动效映射 */
html[data-motion=on] .crew-mate{animation:mate-pop .55s var(--ease-spring) backwards;animation-delay:calc(var(--i,0)*90ms)}
html[data-motion=on] .crew-mate[data-anim="hop"] .mate-img{animation:hop 2.9s ease-in-out infinite}
html[data-motion=on] .crew-mate[data-anim="sway"] .mate-img{animation:sway 4.6s ease-in-out infinite}
html[data-motion=on] .crew-mate[data-anim="twirl"] .mate-img{animation:twirl 3.7s ease-in-out infinite}
html[data-motion=on] .crew-mate[data-anim="float"] .mate-img{animation:floaty 4.2s ease-in-out infinite}
html[data-motion=on] .crew-mate[data-anim="breathe"] .mate-img{animation:breathe 3.4s ease-in-out infinite}
html[data-motion=on] .detail-img-wrap[data-anim="hop"]{animation:hop 3.4s ease-in-out infinite}
html[data-motion=on] .detail-img-wrap[data-anim="sway"]{animation:sway 5.2s ease-in-out infinite}
html[data-motion=on] .detail-img-wrap[data-anim="twirl"]{animation:twirl 4.4s ease-in-out infinite}
html[data-motion=on] .detail-img-wrap[data-anim="float"]{animation:floaty 5s ease-in-out infinite}
html[data-motion=on] .detail-img-wrap[data-anim="breathe"]{animation:breathe 4s ease-in-out infinite}
html[data-motion=on] .collection-item .collection-portrait img{animation:breathe 3.8s ease-in-out infinite}
html[data-motion=on] .collection-item[data-anim="sway"] .collection-portrait img{animation:sway 5s ease-in-out infinite}
html[data-motion=on] .collection-item[data-anim="float"] .collection-portrait img{animation:floaty 4.6s ease-in-out infinite}
html[data-motion=on] .collection-item{animation:arrive .45s var(--ease-out) backwards;animation-delay:calc(var(--i,0)*80ms)}
/* 印章铭文 */
.seal-svg text{font-family:var(--serif);font-weight:600}
.seal-svg .seal-mark{font-weight:400}
/* —— 既有通用动效 —— */
@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes tide{0%,100%{transform:translateX(-1.4%)}50%{transform:translateX(1.4%)}}
@keyframes imprint{0%{opacity:0;transform:scale(1.3) rotate(-14deg)}65%{opacity:1;transform:scale(.96) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(-4deg)}}
@keyframes ripple{from{opacity:.7;transform:translate(-50%,-50%) scale(.55)}to{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}
html[data-motion=on] .hero-copy,html[data-motion=on] .page-lead,html[data-motion=on] .detail-copy,html[data-motion=on] .station-card-copy,html[data-motion=on] #detail-panel,html[data-motion=on] .passport-top{animation:arrive .32s ease-out both}
html[data-motion=on] .role-card,html[data-motion=on] .product,html[data-motion=on] .shortcut{animation:arrive .3s ease-out backwards;animation-delay:var(--delay,0ms)}
html[data-motion=on] .wave{animation:tide 7s ease-in-out infinite}
html[data-motion=on] dialog[open]{animation:modal-in .5s var(--ease-spring)}
html[data-motion=on] dialog[open]::backdrop{animation:backdrop-in .3s ease both}
html[data-motion=on] .favorite-pop{animation:favorite .3s ease-out}
html[data-motion=on] .reveal-pending{opacity:0;transform:translateY(12px)}
html[data-motion=on] .reveal-in{animation:arrive .35s ease-out both}
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{animation:none!important;transition:none!important}
html.motion-suspended *,html.motion-suspended *:before,html.motion-suspended *:after{animation-play-state:paused!important}
@media(hover:hover){.primary:hover,.secondary:hover,.crew-link:hover,.feature-card:hover,.landscape-story:hover{transform:translateY(-2px)}.role-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px #2b4a4318}.role-card:hover .role-portrait{transform:translateY(4px)}.product:hover img{transform:scale(1.025)}.product img,.role-portrait{transition:transform .25s ease-out}.shortcut:hover{transform:translateY(-3px)}}
.desktop-scenery,.desktop-footnote{display:none}
@media(min-width:1080px){
  body{background:#eaece3}
  .desktop-scenery{display:block;position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#f6f3e9de 0%,#f6f3e98f 38%,#f6f3e920 70%),url('assets/silk-road-sea.webp') center/cover no-repeat}
  .app-shell{margin-left:calc(50% + 40px);border-left:1px solid #ffffffe0;border-right:1px solid #ffffffe0;box-shadow:0 0 100px #294c4728;min-height:100vh}
  .bottom-nav{left:calc(50% + 270px)}.toast{left:calc(50% + 270px)}
  .desktop-intro{display:block;left:max(6vw,calc(50% - 580px));top:16vh;width:470px;color:#254c59}
  .desktop-intro>.eyebrow{font-size:10px;letter-spacing:3px;color:#355d67}
  .intro-edition{font:12px var(--serif);letter-spacing:3px;display:flex;align-items:center;gap:12px;margin-top:53px;color:#6d806f}
  .intro-edition>span{width:23px;height:1px;background:#a18a5c}
  .desktop-intro h1{font-size:65px;line-height:1.45;letter-spacing:5px;font-weight:500;margin-top:20px;color:#254c59}
  .desktop-intro .seal{font-size:15px;letter-spacing:3px;padding:8px 4px;margin-left:17px;vertical-align:9px}
  .desktop-intro p.intro-description{font:13px/2.2 var(--sans);letter-spacing:1.5px;color:#4e716f;margin-top:25px}
  .intro-chapters{display:flex;align-items:center;gap:16px;margin-top:35px;font-size:9px;color:#708575;letter-spacing:1px}
  .intro-chapters b{font:15px var(--serif);margin-left:7px;color:#345e65}.intro-chapters i{height:1px;width:35px;background:#879b824d}
  .desktop-intro .intro-swatches{margin-top:38px;gap:11px}.intro-swatches i{width:12px;height:12px;border:2px solid #ffffff88;outline:1px solid #85998622}
  .desktop-intro small{font:10px var(--serif);letter-spacing:3px;color:#647b70;margin-top:13px}
  .desktop-footnote{display:flex;position:fixed;bottom:27px;left:6vw;gap:22px;color:#3a6469;font-size:8px;letter-spacing:2px}
  dialog{margin-left:calc(50% + 61px);max-width:418px}
}
@media(min-width:1080px) and (max-width:1200px){.desktop-intro{left:5vw;width:400px}.desktop-intro h1{font-size:53px}.desktop-intro>.eyebrow{font-size:8px}.intro-edition{margin-top:36px}.desktop-intro p.intro-description{font-size:12px}.app-shell{margin-left:calc(50% + 20px)}.bottom-nav,.toast{left:calc(50% + 250px)}dialog{margin-left:calc(50% + 41px)}}
@media(max-height:760px) and (min-width:1080px){.desktop-intro{top:9vh}.intro-edition{margin-top:25px}.desktop-intro h1{font-size:54px}.desktop-intro .intro-swatches{margin-top:22px}}
@media(max-width:350px){
  .app-header{padding-left:15px;padding-right:13px}.brand{font-size:25px}
  .sea-hero{padding-left:20px;padding-right:18px;min-height:330px}.sea-hero h1{font-size:32px}.sea-hero .subtitle{font-size:10px}.hero-coordinate{right:10px}
  .companions-heading h2{font-size:16px}.companions-heading .text-link{font-size:10px}
  .crew-row{gap:2px}.mate-img{height:84px}.crew-mate:before{width:60px;height:60px}
  .catalog-lead,.shop-lead{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}.catalog-lead h2,.shop-lead h2{font-size:22px}
  .role-halo{width:128px;height:128px;top:22px}
  .passport-top h2{font-size:20px}.passport-top .passport-mark{width:46px;height:46px}.passport-mark svg{width:20px}
  .stamp .seal-svg{width:62px;height:62px}.stamp{min-height:100px}.stamp-tick{right:10px}
  .journal-track{height:102px}.journal-art{width:58px;height:72px}.journal-copy h3{font-size:14.5px}
  .detail-meta{gap:6px}.meta-cell{gap:5px;padding:10px 6px}.meta-cell b{font-size:9px}
  .detail-copy h1{font-size:31px}.pattern-panel{gap:10px;padding:12px 9px}.pattern-panel img{width:85px;height:85px}.pattern-panel h3{font-size:16px}
  .role-card .role-portrait{height:154px}.product{padding:7px}.product img{height:125px}.product h3{font-size:11px}.feature-copy h3{font-size:19px}.shop-banner p{max-width:167px}
  .reward-stage{height:192px}.reward-seal-wrap{width:128px;height:128px}.stamp-view-stage{width:162px;height:162px}
  .guide-seal{width:60px}
}
@media(max-width:350px){.sea-hero{margin-left:-16px;margin-right:-16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal-pending{opacity:1!important;transform:none!important}}