/* 导航栏视觉规范 · 1态 / 2态(悬浮放大) / 3态(选中同色但一态尺寸) / 次级面板 */
.header.pc {
    z-index: 20;
    overflow: visible;
}

.header.pc .left {
    overflow: visible;
    height: 0.7rem;
    align-items: stretch;
}

/* 音乐按钮垂直居中于导航栏 */
.header.pc .music_btn {
    align-self: center;
    position: relative;
    top: 0 !important;
    margin-top: 0;
    margin-bottom: 0;
    flex-shrink: 0;
}

.header.pc .left .btn.ff-nav-item,
.header.pc .left a.ff-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0.7rem;
    padding: 0 0.22rem;
    line-height: normal;
    font-size: 0;
    color: transparent;
    background: transparent !important;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    opacity: 1 !important;
}

/* 覆盖 comm.css 旧版 img 显隐逻辑，改由 opacity 控制二态 */
.header.pc .ff-nav-item img,
.header.pc .ff-nav-item:hover img,
.header.pc .ff-nav-item.active-item img,
.header.pc .ff-nav-item .ff-nav-sub img,
.header.pc .ff-nav-item:hover .ff-nav-sub img,
.header.pc .ff-nav-item:hover img:first-child,
.header.pc .ff-nav-item:hover img:last-child {
    display: block !important;
}

/* 覆盖 .btn-h / .btn-news 等对切图宽高的旧约束 */
.header.pc .btn-h.ff-nav-item img,
.header.pc .btn-news.ff-nav-item img,
.header.pc .btn-data.ff-nav-item img,
.header.pc .btn-charge.ff-nav-item img,
.header.pc .ff-nav-item .ff-nav-img1,
.header.pc .ff-nav-item .ff-nav-img2 {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.header.pc .ff-nav-item .ff-nav-sub img,
.header.pc .ff-nav-item .btn-tese img,
.header.pc .btn-news.ff-nav-item .ff-nav-sub img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
}

.header.pc .ff-nav-item span,
.header.pc .ff-nav-main span,
.header.pc .ff-nav-sub span {
    margin: 0 !important;
}

/* 服务中心等 <a> 次级项：覆盖 .header .left a 的 inline-block */
.header.pc .ff-nav-item a.ff-nav-sub {
    display: block !important;
    width: 0.54rem !important;
    height: 0.13rem !important;
    position: relative;
    line-height: 0;
    opacity: 1 !important;
}

.header.pc .left .btn.ff-nav-item:hover,
.header.pc .left a.ff-nav-item:hover,
.header.pc .left a.ff-nav-item:active,
.header.pc .left a.ff-nav-item:focus,
.header.pc .left a.ff-nav-item:visited,
.header.pc .left .btn.ff-nav-item.active-item,
.header.pc .left a.ff-nav-item.active-item {
    background: transparent !important;
    opacity: 1 !important;
}

/* —— 1态尺寸（默认 / 3态共用容器尺寸） —— */
.ff-nav-main {
    position: relative;
    width: 0.84rem;
    height: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.28s ease, height 0.28s ease;
    z-index: 2;
}

/*
 * 2态：仅鼠标悬浮时放大切图
 * 3态：active-item 未悬浮时保持 2态颜色/黄线/星星，但尺寸回到 1态，避免「当前页 + 悬浮项」双放大
 */
.ff-nav-item:hover .ff-nav-main,
.ff-nav-item.is-open .ff-nav-main {
    width: 1.08rem;
    height: 0.25rem;
}

.ff-nav-item.active-item:not(:hover) .ff-nav-main {
    width: 0.84rem;
    height: 0.2rem;
}

.ff-nav-img1,
.ff-nav-img2 {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    object-position: center center;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 2;
}

.ff-nav-img2 {
    opacity: 0 !important;
}

/* 2态 / 3态：显示彩色切图 */
.ff-nav-item:hover .ff-nav-img1,
.ff-nav-item.is-open .ff-nav-img1,
.ff-nav-item.active-item .ff-nav-img1 {
    opacity: 0 !important;
}

.ff-nav-item:hover .ff-nav-img2,
.ff-nav-item.is-open .ff-nav-img2,
.ff-nav-item.active-item .ff-nav-img2 {
    opacity: 1 !important;
}

/* 充值中心为 <a>，防止链接态/继承导致二态发虚 */
.header.pc a.ff-nav-item .ff-nav-img1,
.header.pc a.ff-nav-item .ff-nav-img2 {
    -webkit-filter: none;
    filter: none;
}

.ff-nav-stars {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.42rem;
    height: 0.18rem;
    transform: translate(-50%, -50%);
    background: url(../images/nav-spec/nav-stars.png) center center / contain no-repeat;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    z-index: 1;
}

.ff-nav-item:hover .ff-nav-stars,
.ff-nav-item.is-open .ff-nav-stars,
.ff-nav-item.active-item .ff-nav-stars {
    opacity: 1;
}

/*
 * 主项黄线 + 次级黑框共用宽度（效果图：黄线与黑框等宽）
 * 2态主项高 0.25rem 垂直居中于 0.7rem 导航条
 * 黄线：bottom -0.08rem、高 0.03rem → 黄线底 = 50% + 0.125 + 0.08
 * 黑框顶紧贴黄线底，不遮挡黄线
 */
.header.pc .ff-nav-item {
    --ff-nav-drop-w: 1.02rem;
    --ff-nav-uline-bottom: calc(50% + 0.205rem);
}

.ff-nav-uline {
    position: absolute;
    left: 50%;
    bottom: -0.08rem;
    width: var(--ff-nav-drop-w);
    height: 0.03rem;
    margin-left: 0;
    background: #fff608;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center center;
    transition: transform 0.32s ease;
    pointer-events: none;
    z-index: 40;
}

.ff-nav-item:hover .ff-nav-uline,
.ff-nav-item.is-open .ff-nav-uline,
.ff-nav-item.active-item .ff-nav-uline {
    transform: translateX(-50%) scaleX(1);
}

/* 次级面板：效果图半透明黑底；顶边 = 黄线底边；宽度与黄线一致 */
.ff-nav-panel {
    position: absolute;
    top: var(--ff-nav-uline-bottom);
    left: 50%;
    transform: translateX(-50%);
    width: var(--ff-nav-drop-w);
    min-width: var(--ff-nav-drop-w);
    max-width: var(--ff-nav-drop-w);
    padding: 0.12rem 0 0.14rem;
    /* 效果图像素测算约 28%~32%，再略降以免偏重 */
    background: rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 20;
    box-sizing: border-box;
}

.ff-nav-item:hover .ff-nav-panel,
.ff-nav-item.is-open .ff-nav-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ff-nav-sub {
    position: relative;
    display: block;
    width: 0.54rem;
    height: 0.13rem;
    margin: 0.14rem auto 0;
    cursor: pointer;
    text-decoration: none;
    color: transparent;
    font-size: 0;
    box-sizing: border-box;
    opacity: 1 !important;
}

.ff-nav-sub:first-child {
    margin-top: 0;
}

.ff-nav-sub .s1,
.ff-nav-sub .s2 {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    object-position: center center;
    pointer-events: none;
    transition: opacity 0.18s ease;
    /* 切图自带半透明，提亮避免次级标题发暗 */
    -webkit-filter: brightness(1.25) contrast(1.08);
    filter: brightness(1.25) contrast(1.08);
}

.ff-nav-sub .s2 {
    opacity: 0;
}

/* 次级黄线：短线居中于标题下方 */
.ff-nav-sub .sub-uline {
    position: absolute;
    left: 50%;
    bottom: -0.06rem;
    width: 0.42rem;
    height: 0.02rem;
    margin-left: 0;
    background: #fff608;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.ff-nav-sub:hover .s1,
.ff-nav-sub.active-item .s1 {
    opacity: 0;
}

.ff-nav-sub:hover .s2,
.ff-nav-sub.active-item .s2 {
    opacity: 1;
}

.ff-nav-sub:hover .sub-uline,
.ff-nav-sub.active-item .sub-uline {
    opacity: 1;
}

/* ========== 职业介绍切图排版（八职业） ========== */
/* 职业内容整体下移，与顶部图标拉开间距 */
.page-zhiye .zy-box {
    margin-top: 0.4rem;
}

.zy-box .r-box {
    position: relative;
}

.r-box-vocation-spec {
    display: none;
    width: 5.13rem;
    box-sizing: border-box;
    text-align: left;
}

.page-zhiye.is-vocation-spec .r-box-dynamic {
    display: none;
}

.page-zhiye.is-vocation-spec .r-box-vocation-spec {
    display: block;
}

.page-zhiye.is-vocation-spec .zy-box .r-box {
    width: 5.13rem;
}

/* 特点切图宽于数值 513 时，容器随舞台加宽 */
.page-zhiye.spec-spirit .zy-box .r-box,
.page-zhiye.spec-spirit .r-box-vocation-spec {
    width: 5.23rem;
}

/* 隐匿特点现 492，窄于数值 513，容器保持默认 5.13rem */

/*
 * 标题切图 262x123 — 字形左缘与下方定位/特点严格左齐
 * 在测量值基础上再略左移，消除视觉偏右
 */
.r-box-vocation-spec .vs-tit {
    width: 2.62rem;
    height: 1.23rem;
    object-fit: contain;
    object-position: left top;
    display: block;
    margin: 0 0 0 -0.42rem;
}

.page-zhiye.spec-blade .vs-tit {
    margin-left: -0.06rem;
}

.page-zhiye.spec-element .vs-tit,
.page-zhiye.spec-spirit .vs-tit,
.page-zhiye.spec-guardian .vs-tit,
.page-zhiye.spec-violence .vs-tit {
    margin-left: -0.09rem;
}

/* 游侠标题字形距左约 44px，需更大负边距 */
.page-zhiye.spec-ranger .vs-tit {
    margin-left: -0.48rem;
}

/* 隐匿标题字形距左约 37px，与骑士接近 */
.page-zhiye.spec-stealth .vs-tit {
    margin-left: -0.42rem;
}

/*
 * 舞台宽 = 特点切图宽；视频右对齐特点右缘
 * 视频高度：定位顶 → 特点切图内「职业特点：」标题底（约 31px）
 *   定位0.44 + 间距0.06 + 难度0.46 + 间距0.10 + 标题0.31 = 1.37rem
 */
.r-box-vocation-spec .vs-stage {
    position: relative;
    width: 4.99rem;
    margin-top: 0.08rem;
    box-sizing: border-box;
}

.r-box-vocation-spec .vs-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.06rem;
    width: 2.33rem;
}

.r-box-vocation-spec .vs-position {
    width: 2.22rem;
    height: 0.44rem;
    object-fit: contain;
    object-position: left center;
    display: block;
}

.r-box-vocation-spec .vs-difficulty {
    width: 2.33rem;
    height: 0.46rem;
    object-fit: contain;
    object-position: left center;
    display: block;
}

/* 职业特点 — 默认骑士 499x80 原尺寸 */
.r-box-vocation-spec .vs-traits {
    width: 4.99rem;
    height: 0.8rem;
    object-fit: contain;
    object-position: left top;
    display: block;
    margin-top: 0.1rem;
}

/* 视频：右对齐特点右缘；顶对齐定位顶，底对齐特点标题底 */
.r-box-vocation-spec .vs-preview {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.4rem;
    height: 1.37rem;
    overflow: hidden;
    z-index: 2;
}

.r-box-vocation-spec .vs-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    cursor: pointer;
    border-radius: 0.02rem;
}

.r-box-vocation-spec .vs-preview .play-button-on-poster {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.28rem;
    height: 0.28rem;
    background: rgba(0, 0, 0, 0.48);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.r-box-vocation-spec .vs-preview .play-button-on-poster::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.06rem 0 0.06rem 0.1rem;
    border-color: transparent transparent transparent #fff;
    margin-left: 0.02rem;
}

/* 能力数据切图 513x204 */
.r-box-vocation-spec .vs-stats {
    width: 5.13rem;
    height: 2.04rem;
    object-fit: contain;
    object-position: left top;
    display: block;
    margin-top: 0.14rem;
}

/* —— 刀锋战士：特点 492x80 —— */
.page-zhiye.spec-blade .vs-stage,
.page-zhiye.spec-blade .vs-traits {
    width: 4.92rem;
}

.page-zhiye.spec-blade .vs-traits {
    height: 0.8rem;
}

/* —— 元素使者：特点 491x61 —— */
.page-zhiye.spec-element .vs-stage,
.page-zhiye.spec-element .vs-traits {
    width: 4.91rem;
}

.page-zhiye.spec-element .vs-traits {
    height: 0.61rem;
}

/* —— 精神使者：定位 222x44（与默认一致）、特点 523x61 —— */
.page-zhiye.spec-spirit .vs-meta {
    width: 2.33rem;
}

.page-zhiye.spec-spirit .vs-position {
    width: 2.22rem;
}

.page-zhiye.spec-spirit .vs-stage,
.page-zhiye.spec-spirit .vs-traits {
    width: 5.23rem;
}

.page-zhiye.spec-spirit .vs-traits {
    height: 0.61rem;
}

/* —— 守护使者：定位 224x44、特点 501x80 —— */
.page-zhiye.spec-guardian .vs-position {
    width: 2.24rem;
}

.page-zhiye.spec-guardian .vs-stage,
.page-zhiye.spec-guardian .vs-traits {
    width: 5.01rem;
}

.page-zhiye.spec-guardian .vs-traits {
    height: 0.8rem;
}

/* —— 暴力技师：定位 224x44、特点 493x61 —— */
.page-zhiye.spec-violence .vs-position {
    width: 2.24rem;
}

.page-zhiye.spec-violence .vs-stage,
.page-zhiye.spec-violence .vs-traits {
    width: 4.93rem;
}

.page-zhiye.spec-violence .vs-traits {
    height: 0.61rem;
}

/* —— 游侠：定位与默认同宽显示（素材 232x44，手机端由 gamedata-mobile 统一框） —— */
.page-zhiye.spec-ranger .vs-position {
    width: 2.22rem;
}

.page-zhiye.spec-ranger .vs-stage,
.page-zhiye.spec-ranger .vs-traits {
    width: 4.74rem;
}

.page-zhiye.spec-ranger .vs-traits {
    height: 0.61rem;
}

/* —— 隐匿者：定位与默认同宽显示（素材 222x44，定位二字与其他职业一致） —— */
.page-zhiye.spec-stealth .vs-meta {
    width: 2.33rem;
}

.page-zhiye.spec-stealth .vs-position {
    width: 2.22rem;
}

.page-zhiye.spec-stealth .vs-stage,
.page-zhiye.spec-stealth .vs-traits {
    width: 4.92rem;
}

.page-zhiye.spec-stealth .vs-traits {
    height: 0.8rem;
}