/*20260728-Yapi*/
@charset "utf-8";html{font-size:calc(100vw / 7.5);}
@media screen and (min-width:751px){
    html{font-size:100px;}
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;font-style: normal;}
body{position:relative;max-width:7.5rem;min-width:320px;margin:0 auto;overflow-x:hidden;font:62.5%/1.5 "Source Han Sans CN","PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;color:#3d3d3d;background:#e6dfcf;padding-bottom:0.4rem;}
body.no-scroll{overflow:hidden;height:100vh;}
ul,ol,li{list-style:none;}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;border:0;}
button,input{font:inherit;border:0;outline:none;background:none;appearance:none;-webkit-appearance:none;}
button{cursor:pointer;}
.hidden{display:none !important;}
:root{--bg:#e6dfcf;--panel:#3d3d3d;--gold:#fdd072;--gold-deep:#fcb743;--orange:#ca5f02;--cream:#faf7ed;--cream-border:#e3d6c3;--muted:#9d988f;--text-sub:#605b52;}
/* ========== 首页 Banner ========== */
.home-banner{position:relative;width:7.5rem;height:6.68rem;overflow:hidden;}
.home-banner-img{width:100%;height:100%;object-fit:cover;object-position:center top;}
.home-banner-titles{position:absolute;left:0;right:0;bottom:1.2rem;}
.home-logo{width:5.84rem;height:auto;display:block;margin:0 auto;}
/* ========== 筛选卡片（收起） ========== */
.filter-card{position:relative;z-index:2;margin:-1rem 0.24rem 0;padding:0.3rem;background:url(../images/bg-filter-card.png) center / 100% auto no-repeat #3d3d3d;border-radius:0.3rem;box-shadow:0 0.06rem 0 rgba(0,0,0,0.06);overflow:hidden;}
.filter-search-row{position:relative;display:flex;align-items:center;z-index:1;}
.filter-search-row > * + *{margin-left:0.16rem;}
.search-box{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:space-between;height:0.64rem;padding:0 0.3rem;background:rgba(255,250,239,0.88);border:0.01rem solid #000;border-radius:0.4rem;max-width:4.06rem;}
.search-box input{flex:1;min-width:0;height:100%;font-size:0.24rem;color:#3d3d3d;background:transparent;}
.search-box input::placeholder{color:var(--muted);}
.search-box input::-webkit-search-cancel-button,.skill-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:0.24rem;height:0.24rem;margin-left:0.1rem;background:url(../images/ico-del.png) center / 100% 100% no-repeat;cursor:pointer;}
.search-icon{width:0.34rem;height:0.38rem;flex-shrink:0;margin-left:0.1rem;pointer-events:none;}
.btn-advanced{position:relative;z-index:2;display:inline-flex;align-items:center;height:0.6rem;padding:0 0.2rem;background:url(../images/btn-advanced.png) right 0 / auto 0.51rem no-repeat;background-color:var(--gold);border-radius:0.3rem;font-size:0.24rem;font-weight:500;color:#3e403f;white-space:nowrap;overflow:hidden;flex-shrink:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.btn-advanced > * + *{margin-left:0.08rem;}
.btn-advanced span,.btn-advanced i{pointer-events:none;}
.icon-caret{display:inline-block;width:0.22rem;height:0.16rem;flex-shrink:0;background:url(../images/ico-arrow.png) center / contain no-repeat;margin-left:0.06rem;margin-top:0.04rem;transform:rotate(180deg);transition:transform 0.2s;}
.filter-collapsed{position:relative;z-index:1;margin-top:0.3rem;}
.filter-row{display:flex;align-items:center;min-height:0.56rem;margin-bottom:0.3rem;}
.filter-row > * + *{margin-left:0.2rem;}
.filter-row:last-child{margin-bottom:0;}
.filter-label{display:flex;align-items:center;flex-shrink:0;width:1.26rem;font-size:0.26rem;font-weight:700;color:var(--gold);white-space:nowrap;}
.filter-label > * + *{margin-left:0.06rem;}
.filter-label::before{content:"";display:inline-block;width:0.16rem;height:0.16rem;background:url(../images/ico-filter-label.png) center / 100% 100% no-repeat;flex-shrink:0;margin-right:0.06rem;}
.filter-chips{display:flex;margin:-0.16rem 0 0 0;flex-wrap:wrap;flex:1;}
.filter-chips > *{margin:0.16rem 0 0 0.16rem;}
.filter-collapsed .filter-chips{margin-left:0.16rem;}
.filter-collapsed .filter-chip:first-child{margin-left:0;}
.filter-chips-scroll{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.filter-chips-scroll::-webkit-scrollbar{display:none;}
.filter-chip{display:inline-flex;align-items:center;height:0.52rem;padding:0 0.12rem;background:rgba(105,105,105,0.3);border:0.01rem solid #888;border-radius:0.3rem;color:#e7e3d9;font-size:0.24rem;font-weight:500;white-space:nowrap;flex-shrink:0;}
.filter-chip > * + *{margin-left:0.06rem;}
.filter-chip .chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:0.36rem;height:0.36rem;padding:0 0.1rem;background:rgba(0,0,0,0.15);border-radius:0.2rem;font-style:normal;font-size:0.24rem;font-weight:500;color:#f6e1ad;}
.filter-chip.is-active{background:var(--gold);border-color:var(--gold);color:#1a1a1a;font-weight:700;}
.filter-chip.is-active .chip-count{background:rgba(0,0,0,0.12);color:#3d3d3d;}
.type-icon{width:0.3rem;height:0.3rem;border-radius:50%;object-fit:cover;flex-shrink:0;}
.type-icon-lg{width:0.46rem;height:0.46rem;}
.type-icon-fallback{display:inline-flex;align-items:center;justify-content:center;font-size:0.18rem;color:#fff;font-weight:700;}
.filter-hint{position:relative;z-index:1;margin-top:0.24rem;font-size:0.22rem;color:#9e9e9e;line-height:1.4;}
/* ========== 高级筛选弹层 ========== */
.filter-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:none;visibility:hidden;pointer-events:none;max-width:7.5rem;margin:0 auto;}
.filter-overlay.is-open{display:block;visibility:visible;pointer-events:auto;}
.filter-mask{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.55);}
.filter-panel{position:absolute;left:0;right:0;top:0;max-height:92vh;display:flex;flex-direction:column;background:var(--panel);border-radius:0 0 0.32rem 0.32rem;box-shadow:0 0.16rem 0.4rem rgba(0,0,0,0.35);padding: 2rem 0.3rem 0.3rem;animation:panelIn 0.22s ease-out;margin-right:-0.2rem;}
.filter-collapse-btn{position:absolute;right:0;top: 1.9rem;z-index:3;display:inline-flex;align-items:center;height:0.56rem;padding:0 0.12rem 0 0.2rem;border:0;border-radius:0.3rem 0 0 0.3rem;background:#fdd072;color:#3e403f;font-size:0.24rem;font-weight:500;line-height:0.56rem;white-space:nowrap;overflow:hidden;}
.filter-collapse-btn::after{content:"";display:inline-block;width:0.2rem;height:0.16rem;background:url(../images/ico-arrow.png) center / contain no-repeat;flex-shrink:0;margin: 0.1rem .2rem .1rem .1rem;}
.filter-panel::before{content:"";position:absolute;left:0;right:0;top:0;height:0.08rem;background:linear-gradient(90deg,#f5c84a,#fcb743);}
@keyframes panelIn{
    from{transform:translateY(-0.3rem);opacity:0.6;}
    to{transform:translateY(0);opacity:1;}
}
.filter-panel-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0 0 0.3rem;padding-right:0.08rem;max-height:calc(92vh - 2.8rem);margin-right:-0.2rem;}
.filter-panel-body::-webkit-scrollbar{width:0.08rem;}
.filter-panel-body::-webkit-scrollbar-thumb{background:#505050;border-radius:0.08rem;}
.filter-block{margin-bottom:0.36rem;}
.filter-block .filter-label{width:auto;margin-bottom:0.16rem;}
.filter-panel-foot{display:flex;padding-top:0.1rem;}
.filter-panel-foot > * + *{margin-left:0.3rem;}
.btn-reset,.btn-confirm{height:0.64rem;border-radius:0.32rem;font-size:0.28rem;font-weight:700;}
.btn-reset{width:2.6rem;color:rgba(255,255,255,0.75);border:0.02rem solid rgba(255,255,255,0.35);background:transparent;}
.btn-confirm{flex:1;color:#1a1a1a;background:url(../images/btn-confirm.png) right 0 / auto 0.64rem no-repeat #fcb641;position:relative;overflow:hidden;}
/* ========== 精灵列表 ========== */
.spirit-list-wrap{position:relative;z-index:1;padding:0.3rem 0.24rem 0.6rem;}
.spirit-grid{display:grid;grid-template-columns:repeat(3,2.2rem);justify-content:space-between;row-gap:0.3rem;}
.spirit-card{width:2.2rem;height:3.26rem;overflow:hidden;background:url("../images/bg-li.png") center / 100% 100% no-repeat;}
.spirit-card a{display:flex;flex-direction:column;align-items:center;height:100%;padding:0.12rem 0.1rem 0.16rem;}
.card-head{display:flex;justify-content:space-between;align-items:baseline;width:100%;flex-shrink:0;}
.card-no{font-size:0.18rem;line-height:0.2rem;color:#8d8475;}
.card-stage{font-size:0.18rem;line-height:0.2rem;font-weight:700;color:#605b52;}
.card-art{position:relative;width:1.72rem;height:1.72rem;margin-top:0.08rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.card-art img{position:relative;width:100%;height:100%;object-fit:contain;}
.card-types{display:flex;justify-content:center;margin-top:0.04rem;flex-shrink:0;}
.card-types > * + *{margin-left:0.08rem;}
.card-types .type-icon,.card-types .type-icon-fallback{width:0.36rem;height:0.36rem;padding:0.04rem;background:#fff;border-radius:50%;box-sizing:border-box;object-fit:contain;}
.card-types .type-icon-fallback{font-size:0.16rem;}
.card-name{margin-top:auto;width:100%;height:0.4rem;line-height:0.4rem;text-align:center;font-size:0.26rem;font-weight:700;color:#111;white-space:nowrap;overflow:hidden;}
.card-name span{display:inline-block;white-space:nowrap;vertical-align:top;}
.list-empty{text-align:center;padding:0.8rem 0;font-size:0.28rem;color:#8a8174;}
/* ========== 详情页 ========== */
.page-detail{background:url(../images/detail/bg-detail.png) center 0 / 7.5rem auto no-repeat #e6dfcf;min-height:100vh;}
.detail-nav{height:1.8rem;}
.detail-hero{position:relative;z-index:1;padding:0.16rem 0.28rem 0;}
.hero-card{background:var(--cream);border:0.01rem solid var(--cream-border);border-radius:0.3rem;box-shadow:0 0.06rem 0 rgba(0,0,0,0.06);padding:0.2rem;}
.hero-inner{display:flex;flex-direction:column;align-items:center;min-height:4.56rem;padding:0.2rem 0.2rem 0.16rem;background:url(../images/detail/hero-inner.png) center / 100% 100% no-repeat;border-radius:0.2rem;overflow:hidden;}
.hero-head{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;width:100%;}
.hero-meta{flex:1;min-width:0;}
.hero-name{font-size:0.44rem;font-weight:700;color:#111;line-height:0.44rem;}
.hero-sub{font-size:0.2rem;line-height:0.28rem;color:var(--text-sub);margin-top:0.12rem;}
.hero-sub + .hero-sub{margin-top:0.08rem;}
.hero-stage{position:relative;z-index:2;flex-shrink:0;height:0.4rem;line-height:0.4rem;margin:0 -0.2rem 0 0.16rem;padding:0 0.2rem 0 0.3rem;background:#3d3d3d;color:#fedd6e;font-size:0.24rem;font-weight:700;border-radius:0.4rem 0 0 0.4rem;}
.hero-art-wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:3.2rem;margin-top:-0.2rem;}
.hero-art{position:relative;z-index:1;width:3.6rem;height:3.6rem;}
.hero-art img{width:100%;height:100%;object-fit:contain;}
.hero-nav{position:absolute;top:50%;z-index:2;width:0.48rem;height:0.48rem;margin-top:-0.24rem;border-radius:50%;background: url(../images/detail/hero-nav.png) center/100% 100% no-repeat;}
.hero-prev{left:0;}
.hero-next{right:0;transform: rotate(180deg);}
.hero-types{display:flex;justify-content:center;margin-top:-0.16rem;z-index:2;}
.hero-types > * + *{margin-left:0.1rem;}
.hero-type-badge{display:flex;align-items:center;justify-content:center;width:0.54rem;height:0.54rem;background:#fff;border-radius:50%;box-shadow:0 0.02rem 0.06rem rgba(0,0,0,0.08);}
.type-icon-lg{width:0.46rem;height:0.46rem;object-fit:contain;}
.detail-tabs{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1.6rem);justify-content:space-between;gap:0.16rem;padding:0.3rem 0.28rem 0.24rem;}
.detail-tab{display:flex;align-items:center;justify-content:center;width:1.6rem;height:0.72rem;background:var(--cream);border:0.01rem solid var(--cream-border);border-radius:0.32rem;box-shadow:0 0.06rem 0 rgba(0,0,0,0.06);font-size:0.26rem;color:var(--text-sub);}
.detail-tab > * + *{margin-left:0.1rem;}
.detail-tab::before{content:"";display:inline-block;width:0.44rem;height:0.44rem;flex-shrink:0;background:center / contain no-repeat;margin-right: .1rem;}
.detail-tab[data-tab="info"]::before{background-image:url(../images/detail/tab/tab-info.png);}
.detail-tab[data-tab="obtain"]::before{background-image:url(../images/detail/tab/tab-obtain.png);}
.detail-tab[data-tab="skill"]::before{background-image:url(../images/detail/tab/tab-skill.png);}
.detail-tab[data-tab="nature"]::before{background-image:url(../images/detail/tab/tab-nature.png);}
.detail-tab[data-tab="evo"]::before{background-image:url(../images/detail/tab/tab-evo.png);}
.detail-tab[data-tab="quest"]::before{background-image:url(../images/detail/tab/tab-quest.png);}
.detail-tab[data-tab="eco"]::before{background-image:url(../images/detail/tab/tab-eco.png);}
.detail-tab[data-tab="ride"]::before{background-image:url(../images/detail/tab/tab-ride.png);}
.detail-tab.is-active{background:var(--gold-deep);color:#333;font-weight:700;}
.detail-main{position:relative;z-index:1;padding:0 0.28rem;}
.detail-pane{display:none;}
.detail-pane.is-active{display:block;}
.detail-card{position:relative;background:url("../images/detail/card-bg.png") right 0 / auto 1.72rem no-repeat;background-color:var(--cream);border:0.01rem solid var(--cream-border);border-radius:0.3rem;box-shadow:0 0.06rem 0 rgba(0,0,0,0.06);padding:0.24rem 0.24rem 0.28rem;margin-bottom:0.3rem;overflow:hidden;}
.card-hd{position:relative;z-index:1;display:flex;align-items:center;min-height:0.5rem;margin-bottom:0.2rem;padding:0 0.1rem 0 0.1rem;border-radius:0.08rem;background:url("../images/detail/card-hd-bg.png") right center/ auto 0.18rem no-repeat #f2eadb;}
.hd-ico{width:0.36rem;height:0.34rem;margin-right:0.1rem;object-fit:contain;flex-shrink:0;}
.card-hd h2{font-size:0.28rem;font-weight:700;color:#3d3d3d;line-height:0.5rem;}
.hd-pattern{position:absolute;right:0.1rem;top:50%;transform:translateY(-50%);width:2.22rem;height:0.18rem;object-fit:contain;opacity:0.9;pointer-events:none;}
.total-val{margin-left:auto;margin-right:0.08rem;position:relative;z-index:1;font-size:0.22rem;color:var(--text-sub);line-height:0.5rem;height:0.5rem;white-space:nowrap;}
.total-val b{font-size:0.36rem;color:var(--orange);margin-left:0.06rem;}
.desc-text{position:relative;z-index:1;font-size:0.24rem;line-height:0.44rem;color:var(--text-sub);}
.stats-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:0.16rem;}
.stat-item{display:flex;align-items:center;height:0.64rem;}
.stat-item > * + *{margin-left:0.1rem;}
.stat-ico{width:0.32rem;height:0.32rem;object-fit:contain;flex-shrink:0;}
.stat-name{width:0.56rem;flex-shrink:0;font-size:0.28rem;color:var(--text-sub);}
.stat-bar{flex:1;min-width:0;height:0.12rem;background:rgba(232,225,209,0.75);border-radius:0.2rem;overflow:hidden;}
.stat-bar i{display:block;height:100%;background:#fcb743;border-radius:0.2rem;}
.stat-val{width:0.56rem;flex-shrink:0;font-size:0.28rem;font-weight:500;color:var(--text-sub);text-align:right;}
.basics-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:0.16rem;}
.basic-item{display:flex;align-items:center;padding:0.16rem 0.2rem;background:rgba(232,225,209,0.75);border-radius:0.2rem;}
.basic-item > * + *{margin-left:0.2rem;}
.basic-ico-wrap{width:0.72rem;height:0.72rem;border-radius:0.22rem;background:#3d3d3d;overflow:hidden;flex-shrink:0;}
.basic-ico{width:100%;height:100%;object-fit:cover;}
.basic-text{display:flex;flex-direction:column;min-width:0;}
.basic-text > * + *{margin-top:0.12rem;}
.basic-name{font-size:0.2rem;line-height:0.2rem;color:var(--text-sub);}
.basic-val{font-size:0.3rem;line-height:0.2rem;color:var(--text-sub);font-weight:700;white-space: nowrap;}
.trait-box{position:relative;z-index:1;display:flex;align-items:center;}
.trait-box > * + *{margin-left:0.12rem;}
.trait-ico{width:1.2rem;height:1.2rem;border-radius:50%;object-fit:cover;flex-shrink:0;}
.trait-body{flex:1;min-width:0;padding-top:0.1rem;}
.trait-body strong{display:block;font-size:0.28rem;line-height:0.32rem;color:#4e4e4e;margin-bottom:0.1rem;}
.trait-body p{font-size:0.2rem;line-height:0.28rem;color:var(--text-sub);}
.resist-list{position:relative;z-index:1;display:flex;flex-direction:column;}
.resist-row{display:flex;flex-direction:column;padding:0.16rem;}
.resist-row > * + *{margin-top:0.1rem;}
.resist-row + .resist-row{border-top:0.01rem solid rgba(96,91,82,0.18);}
.resist-label{font-size:0.2rem;line-height:0.2rem;color:var(--text-sub);}
.resist-items{display:flex;margin:0 0 0 -0.1rem;flex-wrap:wrap;}
.resist-items > *{margin:0.1rem 0 0 0.1rem;}
.resist-chip{display:inline-flex;align-items:center;height:0.4rem;padding:0 0.04rem 0 0.1rem;background:#3d3d3d;border-radius:0.3rem;}
.resist-chip > * + *{margin-left:0.06rem;}
.resist-chip .type-icon,.resist-chip .type-icon-fallback{width:0.3rem;height:0.3rem;border-radius:50%;object-fit:contain;}
.resist-type{font-style:normal;font-size:0.2rem;font-weight:500;color:#e7e3d9;}
.resist-mul{display:inline-flex;align-items:center;justify-content:center;min-width:0.52rem;height:0.36rem;padding:0 0.1rem;background:rgba(0,0,0,0.15);border-radius:0.2rem;font-style:normal;font-size:0.2rem;font-weight:500;color:#f6e1ad;}
.place-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:0.2rem 0.12rem;}
.place-chip{display:inline-flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:0.36rem;padding:0.12rem 0.1rem;background:rgba(232,225,209,0.75);border-radius:0.2rem;font-size:0.24rem;line-height:0.24rem;color:#333;white-space:nowrap;max-width:1.5rem;overflow:hidden;box-sizing:border-box;}
.place-chip > * + *{margin-left:0.06rem;}
.place-chip:before{content:"";display:block;width:0.2rem;height:0.26rem;background:url(../images/detail/obtain-pin.png) center / 100% 100% no-repeat;margin-right:0.06rem;flex-shrink:0;}
.place-chip > span{display:block;flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-align:left;}
.hatch-panel{position:relative;z-index:1;display:flex;align-items:stretch;}
.hatch-panel > * + *{margin-left:0.2rem;}
.hatch-art{width:2.56rem;height:2.56rem;border-radius:0.2rem;background:url(../images/detail/hatch-art-bg.png) center / 100% 100% no-repeat;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
.hatch-art img{width:2.56rem;height:2.56rem;object-fit:contain;}
.hatch-rows{flex:1;min-width:0;display:flex;flex-direction:column;}
.hatch-rows > * + *{margin-top:0.16rem;}
.hatch-row{display:flex;align-items:center;justify-content:space-between;padding:0.12rem 0.2rem;background:rgba(232,225,209,0.75);border-radius:0.2rem;}
.hatch-row > * + *{margin-left:0.12rem;}
.hatch-row-left{display:inline-flex;align-items:center;font-size:0.24rem;color:var(--text-sub);}
.hatch-row-left > * + *{margin-left:0.1rem;}
.hatch-row-ico{width:0.48rem;height:0.48rem;border-radius:0.12rem;background:#3d3d3d;overflow:hidden;flex-shrink:0;margin-right:0.1rem;}
.hatch-row-ico img{width:100%;height:100%;object-fit:cover;}
.hatch-row strong{font-size:0.26rem;color:var(--text-sub);white-space:nowrap;}
.hatch-row strong.is-accent,.is-accent{color:var(--orange) !important;}
.evo-panel{position:relative;z-index:1;}
.evo-pair{display:flex;align-items:center;justify-content:space-between;}
.evo-pair > * + *{margin-left:0.12rem;}
.evo-spirit{flex:1;min-width:0;text-align:center;}
.evo-art{width:2.56rem;height:2.56rem;margin:0 auto;border-radius:50%;background:url(../images/detail/bg-evo-from.png) center / 100% 100% no-repeat;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.evo-spirit.is-target .evo-art{background-image:url(../images/detail/bg-evo-to.png);}
.evo-art img{width:2.6rem;height:2.6rem;object-fit:contain;}
.evo-spirit p{margin-top:0.12rem;font-size:0.28rem;font-weight:700;color:#333;line-height:0.28rem;}
.evo-spirit.is-target p{color:var(--orange);}
.evo-arrow{width:0.42rem;height:0.42rem;flex-shrink:0;margin-bottom:0.4rem;background:url(../images/detail/evo-arrow.png) center / 100% 100% no-repeat;}
.evo-conds{display:flex;flex-wrap:wrap;margin: 0.08rem auto;justify-content: center;flex-direction: column;}
.evo-conds > *{/* margin:0.12rem 0 0 0.12rem; */}
.evo-chip{display: flex;align-items: flex-start;padding: 0.12rem;background:rgba(232,225,209,0.75);border-radius:0.2rem;font-size:0.22rem;color:var(--text-sub);line-height:0.24rem;margin: 0 .06rem;/* flex: 1; */margin-top: .1rem;justify-content: flex-start;}
.evo-chip em{font-style:normal;white-space: nowrap;display: block;}
.evo-chip b{font-weight:700;color:var(--text-sub);}
.fruit-panel{position:relative;z-index:1;display:flex;align-items:center;}
.fruit-panel > * + *{margin-left:0.2rem;}
.fruit-ico{width:1rem;height:1rem;border-radius:0.2rem;background:#fff;border:0.01rem solid #e6e2d3;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
.fruit-ico img{width:0.76rem;height:0.76rem;object-fit:contain;}
.fruit-panel p{font-size:0.26rem;font-weight:700;color:#333;line-height:0.28rem;}
.task-chips{position:relative;z-index:1;display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:0.2rem;}
.task-chips > * + *{margin-left:0.12rem;}
.task-chips::-webkit-scrollbar{display:none;}
.task-chip{flex-shrink:0;height:0.52rem;padding:0 0.16rem;background:#fff;border:0.01rem solid #e6e2d3;border-radius:0.2rem;font-size:0.24rem;color:#333;white-space:nowrap;}
.task-chip.is-active{background:var(--gold-deep);border-color:transparent;font-weight:700;}
.task-detail{position:relative;z-index:1;padding:0.2rem 0.22rem;background:#fff;border:0.01rem solid #e6e2d3;border-radius:0.2rem;font-size:0.24rem;color:var(--text-sub);line-height:0.44rem;}
.task-detail strong.is-accent{font-weight:700;}
.nature-line{position:relative;z-index:1;font-size:0.24rem;color:var(--text-sub);line-height:0.44rem;padding-left:0.28rem;}
.nature-line::before{content:"";position:absolute;left:0;top:0.12rem;width:0.21rem;height:0.22rem;background:url(../images/detail/bg-li-nature.png) center / 100% 100% no-repeat;}
.nature-line strong{color:var(--orange);}
.nature-link{float:right;font-size:0.2rem;color:#938875;text-decoration:underline;background:url(../images/detail/ico-nature-link.png) center right / auto 0.13rem no-repeat;padding-right:0.2rem;}
.specialty-list{position:relative;z-index:1;display:flex;flex-direction:column;margin-top:0.16rem;}
.specialty-list > * + *{margin-top:0.12rem;}
.specialty-item{display:flex;align-items:center;padding:0.12rem 0.2rem;background:rgba(232,225,209,0.75);border-radius:0.2rem;}
.specialty-item > * + *{margin-left:0.16rem;}
.specialty-name{flex-shrink:0;min-width:1.2rem;max-width:1.6rem;font-size:0.24rem;line-height:0.24rem;color:#333;white-space:nowrap;}
.specialty-bar{flex:1;min-width:0;height:0.1rem;background:#d2cab5;border-radius:0.2rem;overflow:hidden;}
.specialty-bar i{display:block;height:100%;background:#fcb743;border-radius:0.2rem;}
.specialty-rate{flex-shrink:0;min-width:0.9rem;font-size:0.24rem;line-height:0.24rem;color:#333;text-align:right;}
.placeholder-tip{text-align:center;padding:0.6rem 0;font-size:0.28rem;color:#938875;}
/* —— 生态模块 —— */
.eco-info-box{position:relative;z-index:1;display:flex;flex-direction:column;width:100%;/* height:1.6rem;*/ margin-top:0.18rem;padding:0.18rem;border:0.01rem solid #e6e2d3;border-radius:0.2rem;overflow:hidden;}
.eco-label{font-size:0.24rem;line-height:0.44rem;color:var(--text-sub);}
.eco-gender{margin-top:0.1rem;font-size:0.28rem;font-weight:700;line-height:0.44rem;color:#333;}
.eco-egg-box{height:1.4rem;margin-top:0.2rem;}
.eco-egg-groups{display:flex;align-items:center;margin-top:0.1rem;}
.eco-egg-groups > * + *{margin-left:0.12rem;}
.eco-egg-chip{display:inline-flex;align-items:center;justify-content:center;height:0.4rem;padding:0 0.2rem;background:#f3f0e7;border-radius:0.18rem;font-size:0.24rem;font-weight:500;line-height:0.4rem;color:#333;white-space:nowrap;}
.eco-place-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.2rem 0.12rem;margin-top:0.18rem;}
.eco-place-grid .place-chip{max-width:none;width:100%;}
.eco-place-chip{display:inline-flex;align-items:center;justify-content:center;width:100%;height:0.5rem;padding:0 0.16rem;background:rgba(232,225,209,0.75);border-radius:0.2rem;color:#333;overflow:hidden;}
.eco-place-chip > * + *{margin-left:0.06rem;}
.eco-place-chip span{display:block;flex:1;min-width:0;overflow:hidden;font-size:0.24rem;line-height:0.24rem;white-space:nowrap;}
/* —— 骑乘模块 —— */
.ride-list{position:relative;z-index:1;display:flex;flex-direction:column;}
.ride-list > * + *{margin-top:0.16rem;}
.ride-item{display:flex;flex-direction:column;width:100%;padding:0.24rem 0.16rem;border:0.01rem solid #e6e2d3;border-radius:0.2rem;overflow:hidden;}
.ride-item > * + *{margin-top:0.2rem;}
.ride-item h3{font-size:0.32rem;font-weight:700;line-height:0.32rem;color:#333;}
.ride-item p{font-size:0.26rem;line-height:0.36rem;color:var(--text-sub);}
.ride-item p strong{font-weight:400;color:var(--orange);}
/* —— 课题模块 —— */
.quest-intro{position:relative;z-index:1;margin:0.16rem 0 0.1rem;font-size:0.24rem;line-height:0.44rem;color:var(--text-sub);}
.quest-intro strong{color:var(--orange);font-weight:700;}
.quest-list{position:relative;z-index:1;display:flex;flex-direction:column;}
.quest-list > * + *{margin-top:0.16rem;}
.quest-item{display:flex;align-items:flex-start;width:100%;padding:0.24rem 0.16rem;background:rgba(250,247,237,0.72);border:0.01rem solid #e6e2d3;border-radius:0.2rem;overflow:hidden;}
.quest-no{width:0.6rem;flex-shrink:0;font-size:0.28rem;font-weight:700;line-height:0.28rem;color:var(--gold-deep);text-align:center;}
.quest-body{flex:1;min-width:0;padding:0 0.2rem;}
.quest-title{font-size:0.28rem;line-height:0.28rem;color:#333;}
.quest-rewards{display:flex;flex-wrap:wrap;margin:0 0 0 -0.08rem;}
.quest-rewards > *{margin:0.2rem 0 0 0.08rem;}
.quest-reward{display:inline-flex;align-items:center;min-height:0.52rem;padding:0.1rem 0.2rem;background:rgba(232,225,209,0.75);border-radius:0.2rem;font-size:0.24rem;line-height:0.24rem;color:var(--text-sub);white-space:nowrap;}
.quest-reward > * + *{margin-left:0.08rem;}
.quest-reward.is-point{color:var(--orange);}
.quest-reward-icon{width:0.32rem;height:0.32rem;flex-shrink:0;object-fit:contain;}
.quest-reward b{font-weight:400;color:#333;}
/* —— 技能模块 —— */
.skill-module{position:relative;padding-top:0;}
.skill-toolbar{position:relative;z-index:1;display:flex;align-items:center;margin-top:0.06rem;margin-bottom:0.3rem;}
.skill-toolbar > * + *{margin-left:0.16rem;}
.skill-search{flex:1;display:flex;align-items:center;justify-content:space-between;height:0.64rem;padding:0 0.3rem;background:rgba(255,250,239,0.88);border:0.01rem solid #e6e2d3;border-radius:0.4rem;}
.skill-search input{flex:1;min-width:0;height:100%;font-size:0.24rem;color:#3d3d3d;background:transparent;border:0;outline:none;}
.skill-search input::placeholder{color:var(--muted);}
.skill-search-ico{width:0.34rem;height:0.38rem;flex-shrink:0;margin-left: 0.16rem;object-fit:contain;}
.skill-filter-btn{position:relative;z-index:2;display:inline-flex;align-items:center;height:0.6rem;padding:0 0.2rem 0 0.16rem;background:url(../images/detail/skill-filter-btn.png) right center/ auto 0.6rem no-repeat #fdd072;border:0;border-radius:0.3rem;font-size:0.24rem;font-weight:500;color:#3e403f;overflow:hidden;flex-shrink:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.skill-filter-btn > * + *{margin-left:0.06rem;}
.skill-filter-btn.is-open{background:#fdd072;}
.skill-filter-deco{position:absolute;left:0;top:0;width:1.3rem;height:100%;object-fit:cover;pointer-events:none;opacity:0.9;}
.skill-filter-btn::before{content:"";position:relative;display:inline-block;z-index:1;width:0.4rem;height:0.4rem;background:url(../images/detail/skill-filter-ico.png) center / contain no-repeat;object-fit:contain;pointer-events:none;}
.skill-filter-btn span{position:relative;z-index:1;pointer-events:none;}
.skill-filter-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;max-width:7.5rem;margin:0 auto;pointer-events:none;visibility:hidden;}
.skill-filter-layer.is-hidden{display:none;visibility:hidden;pointer-events:none;}
.skill-filter-layer:not(.is-hidden){display:block;visibility:visible;}
.skill-filter-mask{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.6);pointer-events:auto;}
.skill-filter-panel{position:absolute;left:0;right:0;top:0;z-index:1;display:flex;flex-direction:column;max-height:80vh;padding: 2.2rem 0.3rem 0.3rem;background:#fff;border-radius:0 0 0.3rem 0.3rem;box-shadow:0 0.06rem 0 rgba(0,0,0,0.06);pointer-events:auto;animation:skillFilterIn 0.22s ease-out;}
@keyframes skillFilterIn{
    from{transform:translateY(-0.24rem);opacity:0.7;}
    to{transform:translateY(0);opacity:1;}
}
.skill-filter-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.skill-filter-body > * + *{margin-top:0.3rem;}
.skill-filter-body::-webkit-scrollbar{display:none;}
.skill-filter-body + .skill-filter-foot{margin-top:0.3rem;}
.skill-filter-block{display:flex;flex-direction:column;}
.skill-filter-block > * + *{margin-top:0.16rem;}
.skill-filter-label{font-size:0.26rem;font-weight:700;line-height:0.4rem;color:#333;}
.skill-filter-chips{display:grid;grid-template-columns:repeat(4,1.56rem);gap:0.16rem;}
.skill-chip{display:inline-flex;align-items:center;justify-content:center;width:100%;height:0.52rem;padding:0 0.16rem;background:#f3f0e7;border:0.02rem solid transparent;border-radius:0.3rem;font-size:0.24rem;color:#3e403f;overflow:hidden;flex-shrink:0;}
.skill-chip > * + *{margin-left:0.06rem;}
.skill-chip span{flex:1;min-width:0;text-align:center;line-height:0.52rem;white-space:nowrap;}
.skill-chip-ico{width:0.32rem;height:0.32rem;object-fit:contain;flex-shrink:0;}
.skill-filter-chips[data-group="types"] .skill-chip-ico{width:0.3rem;height:0.3rem;}
.skill-chip.is-active{background:#fff0c2;border-color:#cc9e12;font-weight:700;}
.skill-filter-foot{display:flex;align-items:center;flex-shrink:0;}
.skill-filter-foot > * + *{margin-left:0.3rem;}
.skill-filter-reset,.skill-filter-confirm{height:0.64rem;border:0;border-radius:0.3rem;font-size:0.28rem;font-weight:700;color:#3e403f;}
.skill-filter-reset{width:2.6rem;flex-shrink:0;background:#f3f0e7;font-weight:500;}
.skill-filter-confirm{position:relative;flex:1;overflow:hidden;background:#fcb641;}
.skill-list{position:relative;z-index:1;display:flex;flex-direction:column;}
.skill-list > * + *{margin-top:0.2rem;}
.skill-empty{padding:0.48rem 0;text-align:center;font-size:0.26rem;color:#938875;}
.skill-card{position:relative;display:flex;flex-direction:column;padding:0.2rem;background:#fff;border:0.01rem solid #e6e2d3;border-radius:0.2rem;overflow:hidden;}
.skill-card > * + *{margin-top:0.2rem;}
.skill-card-top{display:flex;align-items:stretch;min-height:0.92rem;}
.skill-card-top > * + *{margin-left:0.2rem;}
.skill-ico{width:0.92rem;height:0.92rem;flex-shrink:0;object-fit:cover;border-radius:0.08rem;}
.skill-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding: 0.12rem 0 0.06rem;}
.skill-title-row{display:flex;align-items:center;padding-right:1.2rem;}
.skill-title-row > * + *{margin-left:0.12rem;}
.skill-name{font-size:0.28rem;font-weight:700;color:#333;line-height:0.28rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.skill-type-tag{position:absolute;top:0.2rem;right:0.2rem;display:inline-flex;align-items:center;justify-content:center;height:0.36rem;padding:0 0.1rem;background:#f3f0e7;border-radius:0.18rem;}
.skill-type-tag > * + *{margin-left:0.06rem;}
.skill-type-tag em{font-style:normal;font-size:0.2rem;font-weight:500;color:#333;line-height:0.36rem;white-space:nowrap;}
.skill-type-tag .type-icon,.skill-type-tag .type-icon-sm{width:0.28rem;height:0.28rem;}
.skill-meta{display:flex;align-items:center;font-size:0.24rem;color:var(--text-sub);line-height:0.32rem;white-space:nowrap;}
.skill-meta > * + *{margin-left:0.3rem;}
.skill-meta-cat{display:inline-flex;align-items:center;}
.skill-meta-cat > * + *{margin-left:0.04rem;}
.skill-meta-cat img{width:0.32rem;height:0.32rem;object-fit:contain;}
.skill-desc{font-size:0.22rem;line-height:0.3rem;color:#333;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* ========== 性格详情页 ========== */
.nature-main{position:relative;z-index:1;padding:0.16rem 0.28rem 0.4rem;}
.nature-card{padding-bottom:0.3rem;}
.nature-table-wrap{position:relative;z-index:1;overflow:hidden;border:0.01rem solid #e6e2d3;border-radius:0.12rem;}
.nature-table{width:100%;border-collapse:collapse;table-layout:fixed;}
.nature-table th,.nature-table td{border:0.02rem solid #e6e2d3;vertical-align:middle;word-break:break-all;}
.nature-table thead th{height:0.72rem;padding:0 0.08rem;background:#ede7d8;font-size:0.2rem;font-weight:500;color:#605b52;text-align:center;line-height:0.28rem;}
.nature-table tbody td{min-height:0.76rem;padding:0.1rem 0.08rem;font-size:0.2rem;color:#3e403f;line-height:0.28rem;}
/* .nature-table tbody tr:nth-child(even) td{background:#faf7ed;}
*/
.nature-table .col-name{width:0.9rem;text-align:center;font-weight:500;}
.nature-table .col-up,.nature-table .col-down{width:1rem;text-align:center;}
.nature-table .col-subs{width:auto;padding-left:0.16rem;padding-right:0.12rem;text-align:left;font-size:0.2rem;line-height:0.28rem;}
.nature-table th.col-subs{text-align:center;}
.nature-stat{display:inline-flex;align-items:center;justify-content:center;}
.nature-stat > * + *{margin-left:0.06rem;}
.nature-arrow{display:inline-block;width:0.17rem;height:0.14rem;flex-shrink:0;background:url(../images/detail/nature-arrow.png) center / contain no-repeat;margin-left:0.06rem;}
.nature-arrow-down{transform:rotate(180deg);}
.nature-empty{padding:0.48rem 0.2rem !important;text-align:center;color:#938875;}
.nature-source{position:relative;z-index:1;margin-top:0.16rem;font-size:0.18rem;color:#9e9e9e;line-height:1.4;text-align:center;}
/* ========== 进化模块 ========== */
.evolution-tabs{display:flex;margin-bottom:0.2rem;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.evolution-tab{flex-shrink:0;height:0.48rem;padding:0 0.16rem;background:#fff;border:0.02rem solid #e8e1d1;border-radius:0.34rem;font-size:0.24rem;color:#7b766c;display:flex;align-items:center;justify-content:center;transition:all 0.2s;font-weight:500;margin-right:0.12rem;}
.evolution-tab.is-active{background:#fcb743;border-color:#fcb743;color:#333;font-weight:700;}
.evolution-chain{position:relative;z-index:1;display:none;}
.evolution-chain.is-active{display:block;}
/* 进化阶段列表 - 垂直排列 */
.evo-stage-list{display:flex;flex-direction:column;}
.evo-stage-list > * + *{margin-top:0.16rem;}
/* 进化箭头分隔 */
.evo-arrow-divider{display:flex;justify-content:center;align-items:center;padding:0.16rem 0;}
.evo-arrow-icon{width:0.64rem;height:0.36rem;background:url("../images/detail/evo-arrow.png") center / contain no-repeat;transform:rotate(90deg);}
/* 进化阶段卡片 */
.evo-stage-card{height:2.8rem;background:#fff;border-radius:0.2rem;padding:0.1rem 0.31rem;display:flex;align-items:center;border:0.02rem solid #e8e1d1;box-sizing:border-box;}
.evo-stage-card.is-current{border-color:#e8e1d1;background:#fff;}
/* 精灵形象区域 */
.evo-stage-art{flex-shrink:0;width:2.4rem;height:2.4rem;border-radius:0;background:none;display:flex;align-items:center;justify-content:center;overflow:visible;position:relative;margin-right:0.4rem;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent;}
a.evo-stage-art{cursor:pointer;}
.evo-stage-art img{width:2.4rem;height:2.4rem;object-fit:contain;z-index:1;position:relative;}
.evo-stage-art::before{content:"";width:1.96rem;height:0.36rem;border-radius:100%;background:#ede7d8;display:block;position:absolute;z-index:0;bottom:0.1rem;}
/* 精灵信息区域 */
.evo-stage-info{flex:1;min-width:0;display:flex;flex-direction:column;}
.evo-stage-info > * + *{margin-top:0.2rem;}
/* 精灵名称 */
.evo-stage-name{font-size:0.36rem;font-weight:700;color:#333;line-height:0.4rem;}
.evo-stage-card.is-current .evo-stage-name{color:#333;}
/* 阶段徽章 */
.evo-stage-badge{display:inline-flex;align-items:center;justify-content:center;padding:0.08rem 0.2rem;background:rgba(232,225,209,0.85);border-radius:0.32rem;font-size:0.22rem;color:#605b52;font-weight:500;align-self:flex-start;}
.evo-stage-badge.is-level{background:#fcb743;color:#333;font-weight:700;}
.evo-stage-badge.is-leader{background:#fcb743;color:#333;font-weight:700;}
/* 进化条件列表 */
.evo-stage-conditions{display: inline;background: #e8e1d1;border-radius: .2rem;max-width: fit-content;}
.evo-stage-conditions > * + *{margin-top:0.1rem;}
.evo-condition-item{color:#605b52;max-width:100%;width:auto;margin: 0.18rem 0.2rem;box-sizing:border-box;background:#e8e1d1;display: flex;font-size:0.2rem;line-height:0.26rem;min-height: .28rem;max-height: calc(1.3rem + .1rem);overflow-y:auto;overflow-x:hidden;word-break:break-word;-webkit-overflow-scrolling:touch;}
/* ========== 侧边导航（回首页 / 回顶部） ========== */
.side-rail{position:fixed;right:0.16rem;bottom:2.2rem;z-index:90;display:flex;flex-direction:column;align-items:flex-end;transition:transform 0.28s ease;will-change:transform;}
.side-rail > * + *{margin-top:0.16rem;}
.side-rail.is-collapsed{transform:translateX(0.58rem);}
.side-rail-btn{display:block;width:1.04rem;height:1.04rem;padding:0;border:0;background:transparent;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent;}
.side-rail-btn.is-hidden{display:none;}
.side-rail-btn img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;}
.side-rail-home{text-decoration:none;}