/* =========================================================
   基础设置
========================================================= */

* {
    box-sizing: border-box;
}


:root {

    --text-main: #202630;
    --text-secondary: #6f7c8a;
    --text-light: #9aa5b0;

    --card-bg: rgba(255, 255, 255, 0.94);

    --pink: #f45b8a;
    --pink-light: #ff7ba4;

    --damage: #58a9ec;
    --damage-bg: rgba(88, 169, 236, 0.09);

    --resistance: #9781e8;
    --resistance-bg: rgba(151, 129, 232, 0.09);

}


html,
body {

    margin: 0;
    padding: 0;

}


body {

    min-height: 100vh;

    font-family:
        "Microsoft YaHei",
        "PingFang SC",
        "Noto Sans SC",
        sans-serif;

    color: var(--text-main);

    background:
        linear-gradient(
            155deg,
            #f8fafc 0%,
            #edf4f9 55%,
            #f8eff4 100%
        );

}


button,
input {

    font-family: inherit;

}


button {

    -webkit-tap-highlight-color:
        transparent;

}


[hidden] {

    display: none !important;

}



/* =========================================================
   背景
========================================================= */

.page-background {

    position: fixed;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 88% 5%,
            rgba(245, 91, 138, 0.11),
            transparent 29%
        ),

        radial-gradient(
            circle at 10% 70%,
            rgba(88, 169, 236, 0.10),
            transparent 35%
        );

}



/* =========================================================
   主体
========================================================= */

.app {

    position: relative;

    width: min(92%, 600px);

    margin: 0 auto;

    padding:
        55px
        0
        80px;

}



/* =========================================================
   顶部
========================================================= */

.hero {

    margin-bottom: 27px;

}


.hero-small {

    margin-bottom: 11px;

    font-size: 11px;

    letter-spacing: 3px;

    color: #8b99a8;

}


.hero h1 {

    margin: 0;

    font-size: 31px;

    font-weight: 800;

    letter-spacing: 1px;

}


.hero h2 {

    margin:
        7px
        0
        0;

    font-size: 20px;

    font-weight: 500;

    color: #687787;

}


.hero p {

    margin:
        20px
        0
        0;

    font-size: 14px;

    line-height: 1.85;

    color: #7a8795;

}



/* =========================================================
   主卡片
========================================================= */

.main-card {

    padding:
        27px
        28px
        28px;

    border:
        1px solid
        rgba(40, 55, 70, 0.055);

    border-radius: 24px;

    background:
        var(--card-bg);

    box-shadow:
        0
        22px
        60px
        rgba(53, 68, 84, 0.10);

    backdrop-filter:
        blur(12px);

}



/* =========================================================
   步骤标题
========================================================= */

.step-heading {

    display: flex;

    align-items:
        flex-start;

    gap: 13px;

    margin-bottom: 26px;

}


.step-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 39px;

    height: 39px;

    flex-shrink: 0;

    border-radius: 12px;

    font-size: 12px;

    font-weight: 800;

    color: white;

    background:

        linear-gradient(
            135deg,
            #6eb7ef,
            #887ce5
        );

}


.step-heading h3 {

    margin: 1px 0 4px;

    font-size: 19px;

}


.step-heading p {

    margin: 0;

    font-size: 12px;

    color: var(--text-light);

}



/* =========================================================
   属性组
========================================================= */

.attribute-group {

    margin-top: 25px;

}


.attribute-group:first-child {

    margin-top: 0;

}


.group-header {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    margin-bottom: 12px;

}


.group-title-area {

    display: flex;

    align-items: center;

    gap: 8px;

}


.group-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

}


.attribute-group.damage
.group-dot {

    background:
        var(--damage);

}


.attribute-group.resistance
.group-dot {

    background:
        var(--resistance);

}


.group-title {

    font-size: 15px;

    font-weight: 700;

}


.group-count {

    font-size: 11px;

    color:
        var(--text-light);

}



/* =========================================================
   属性卡片网格
========================================================= */

.attribute-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

}



/* =========================================================
   属性选择卡
========================================================= */

.attribute-card {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 54px;

    padding:
        0
        14px;

    border:
        1px solid
        rgba(50, 65, 80, 0.09);

    border-radius: 13px;

    cursor: pointer;

    color:
        #536171;

    font-size: 14px;

    font-weight: 600;

    background:
        #f8fafb;

    transition:
        transform 0.14s,
        border-color 0.14s,
        color 0.14s,
        background 0.14s,
        box-shadow 0.14s;

}


.attribute-card:hover {

    transform:
        translateY(-1px);

    background:
        white;

}


.attribute-card:active {

    transform:
        scale(0.98);

}



/* Checkbox */

.check-box {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 21px;

    height: 21px;

    margin-right: 10px;

    flex-shrink: 0;

    border:
        1.5px solid
        #cdd5dd;

    border-radius: 7px;

    font-size: 12px;

    font-weight: 800;

    color: transparent;

    background: white;

    transition: 0.15s;

}



/* 减伤率选中 */

.attribute-card.damage.selected {

    color:
        #357eb8;

    border-color:
        rgba(88, 169, 236, 0.50);

    background:
        var(--damage-bg);

    box-shadow:
        0
        6px
        18px
        rgba(88, 169, 236, 0.11);

}


.attribute-card.damage.selected
.check-box {

    color: white;

    border-color:
        var(--damage);

    background:
        var(--damage);

}



/* 抵抗力选中 */

.attribute-card.resistance.selected {

    color:
        #715dc4;

    border-color:
        rgba(151, 129, 232, 0.50);

    background:
        var(--resistance-bg);

    box-shadow:
        0
        6px
        18px
        rgba(151, 129, 232, 0.11);

}


.attribute-card.resistance.selected
.check-box {

    color: white;

    border-color:
        var(--resistance);

    background:
        var(--resistance);

}



/* =========================================================
   第一步底部
========================================================= */

.selection-footer {

    position: sticky;

    bottom: 12px;

    z-index: 5;

    display: grid;

    grid-template-columns:
        1fr auto;

    gap:
        12px
        14px;

    align-items: center;

    margin-top: 28px;

    padding:
        15px;

    border:
        1px solid
        rgba(40, 55, 70, 0.07);

    border-radius: 17px;

    background:
        rgba(255, 255, 255, 0.94);

    box-shadow:
        0
        12px
        35px
        rgba(45, 60, 75, 0.10);

    backdrop-filter:
        blur(12px);

}


.selection-info {

    font-size: 13px;

    color:
        var(--text-secondary);

}


.selection-info strong {

    margin:
        0
        3px;

    font-size: 17px;

    color:
        var(--pink);

}


.selection-tools {

    display: flex;

    gap: 5px;

}


.text-button {

    padding:
        6px
        8px;

    border: 0;

    cursor: pointer;

    font-size: 12px;

    color:
        #8894a0;

    background:
        transparent;

}


.text-button:hover {

    color:
        var(--pink);

}



/* =========================================================
   主按钮
========================================================= */

.primary-button {

    grid-column:
        1 / -1;

    width: 100%;

    padding: 15px;

    border: 0;

    border-radius: 14px;

    cursor: pointer;

    color: white;

    font-size: 15px;

    font-weight: 700;

    letter-spacing:
        0.5px;

    background:

        linear-gradient(
            90deg,
            #ff719c,
            #f34f82
        );

    box-shadow:
        0
        10px
        25px
        rgba(243, 79, 130, 0.23);

    transition:
        transform 0.15s,
        opacity 0.15s,
        box-shadow 0.15s;

}


.primary-button:hover:not(:disabled) {

    transform:
        translateY(-1px);

    box-shadow:
        0
        14px
        30px
        rgba(243, 79, 130, 0.30);

}


.primary-button:active:not(:disabled) {

    transform:
        translateY(1px);

}


.primary-button:disabled {

    cursor:
        not-allowed;

    opacity: 0.38;

    box-shadow: none;

}



/* =========================================================
   返回
========================================================= */

.back-button {

    margin-bottom: 22px;

    padding: 0;

    border: 0;

    cursor: pointer;

    color:
        #758394;

    font-size: 13px;

    background:
        transparent;

}


.back-button:hover {

    color:
        var(--pink);

}



/* =========================================================
   所选摘要
========================================================= */

.selected-summary {

    margin-bottom: 20px;

    padding: 14px;

    border-radius: 13px;

    background:
        rgba(87, 109, 133, 0.055);

}


.summary-title {

    display: block;

    margin-bottom: 9px;

    font-size: 11px;

    color:
        var(--text-light);

}


.selected-chips {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}


.selected-chip {

    padding:
        5px
        10px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 600;

}


.selected-chip.damage {

    color:
        #357fb7;

    background:
        rgba(88, 169, 236, 0.11);

}


.selected-chip.resistance {

    color:
        #725fc4;

    background:
        rgba(151, 129, 232, 0.12);

}



/* =========================================================
   权重列表
========================================================= */

.weight-list {

    display: flex;

    flex-direction: column;

    gap: 11px;

}


.weight-row {

    --accent:
        var(--damage);

    padding:
        16px;

    border:
        1px solid
        rgba(45, 60, 75, 0.07);

    border-radius: 15px;

    background:
        #fafbfc;

}


.weight-row.resistance {

    --accent:
        var(--resistance);

}


.weight-row-top {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    margin-bottom: 13px;

}


.weight-name {

    font-size: 15px;

    font-weight: 700;

}


.weight-input-area {

    display: flex;

    align-items: center;

    gap: 7px;

}


.weight-label {

    font-size: 11px;

    color:
        var(--text-light);

}


.weight-input {

    width: 70px;

    height: 36px;

    padding:
        0
        7px;

    border:
        1px solid
        rgba(45, 60, 75, 0.11);

    border-radius: 10px;

    outline: none;

    text-align: center;

    font-size: 15px;

    font-weight: 700;

    color:
        var(--text-main);

    background:
        white;

    transition:
        border-color 0.15s,
        box-shadow 0.15s;

}


.weight-input:focus {

    border-color:
        var(--accent);

    box-shadow:
        0
        0
        0
        3px
        color-mix(
            in srgb,
            var(--accent) 13%,
            transparent
        );

}



/* 删除浏览器 number 默认箭头 */

.weight-input::-webkit-inner-spin-button,
.weight-input::-webkit-outer-spin-button {

    margin: 0;

    -webkit-appearance:
        none;

}


.weight-input {

    -moz-appearance:
        textfield;

}



/* =========================================================
   权重控制
========================================================= */

.weight-control {

    display: grid;

    grid-template-columns:
        36px
        1fr
        36px;

    gap: 12px;

    align-items: center;

}


.step-button {

    width: 36px;

    height: 36px;

    padding: 0;

    border:
        1px solid
        rgba(45, 60, 75, 0.10);

    border-radius: 50%;

    cursor: pointer;

    color:
        #687788;

    font-size: 18px;

    background:
        white;

    transition:
        0.14s;

}


.step-button:hover {

    color:
        var(--accent);

    border-color:
        color-mix(
            in srgb,
            var(--accent) 35%,
            transparent
        );

}


.step-button:active {

    transform:
        scale(0.92);

}


.weight-slider {

    width: 100%;

    cursor: pointer;

    accent-color:
        var(--accent);

}



/* 输入异常 */

.weight-row.invalid {

    border-color:
        rgba(232, 82, 99, 0.45);

}


.weight-row.invalid
.weight-input {

    border-color:
        #e85b69;

}



/* =========================================================
   权重说明
========================================================= */

.weight-explanation {

    margin-top: 20px;

    padding:
        12px
        14px;

    border-radius: 11px;

    color:
        #87929e;

    font-size: 11px;

    line-height: 1.7;

    background:
        rgba(80, 104, 128, 0.05);

}


.start-button {

    margin-top: 20px;

}



/* =========================================================
   移动端
========================================================= */

@media (
    max-width: 620px
) {

    .app {

        width: 100%;

        padding:
            28px
            15px
            50px;

    }


    .hero h1 {

        font-size: 27px;

    }


    .main-card {

        padding:
            23px
            18px
            24px;

        border-radius: 20px;

    }


    .attribute-grid {

        gap: 8px;

    }


    .attribute-card {

        min-height: 51px;

        padding:
            0
            11px;

    }


    .selection-footer {

        bottom: 8px;

    }

}



/* 非常窄的手机 */

@media (
    max-width: 350px
) {

    .attribute-grid {

        grid-template-columns:
            1fr;

    }

}
/* =========================================================
   双端响应式适配
   ========================================================= */


/* ---------------------------------------------------------
   PC / 大屏
   --------------------------------------------------------- */

@media (min-width: 900px) {

    .app {
        width: min(92%, 760px);
        padding-top: 48px;
    }

    .main-card {
        padding: 30px 34px 32px;
    }

    .attribute-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .attribute-card {
        min-height: 58px;
    }

    .weight-row {
        padding: 18px 20px;
    }

    .weight-control {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        gap: 15px;
    }
}


/* ---------------------------------------------------------
   平板 / 小窗口
   --------------------------------------------------------- */

@media (min-width: 601px) and (max-width: 899px) {

    .app {
        width: min(94%, 680px);
    }

    .attribute-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ---------------------------------------------------------
   手机
   --------------------------------------------------------- */

@media (max-width: 600px) {

    body {
        overflow-x: hidden;
    }

    .app {
        width: 100%;
        padding:
            22px
            12px
            50px;
    }


    /* ---------- 顶部 ---------- */

    .hero {
        margin-bottom: 20px;
        padding: 0 4px;
    }

    .hero-small {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .hero h1 {
        font-size: 25px;
        line-height: 1.3;
    }

    .hero h2 {
        font-size: 18px;
    }

    .hero p {
        margin-top: 14px;
        font-size: 13px;
        line-height: 1.7;
    }


    /* ---------- 主卡片 ---------- */

    .main-card {
        padding:
            21px
            16px
            24px;

        border-radius: 19px;
    }


    /* ---------- 步骤标题 ---------- */

    .step-heading {
        gap: 10px;
        margin-bottom: 22px;
    }

    .step-number {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }

    .step-heading h3 {
        font-size: 17px;
    }

    .step-heading p {
        font-size: 11px;
        line-height: 1.5;
    }


    /* ---------- 属性选择 ---------- */

    .attribute-grid {
        /*
           手机仍保持两列。
           15 个属性如果变成单列，页面会太长。
        */
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;
    }

    .attribute-card {
        min-height: 50px;

        padding:
            0
            10px;

        border-radius: 12px;

        font-size: 13px;
    }

    .check-box {
        width: 21px;
        height: 21px;

        margin-right: 8px;

        flex-shrink: 0;
    }

    .group-title {
        font-size: 14px;
    }

    .group-count {
        font-size: 10px;
    }


    /* ---------- 第一步底部操作 ---------- */

    .selection-footer {
        bottom: 8px;

        margin-top: 22px;

        padding:
            13px;

        border-radius: 15px;
    }

    .selection-info {
        font-size: 12px;
    }

    .selection-info strong {
        font-size: 16px;
    }

    .primary-button {
        min-height: 48px;
        font-size: 14px;
    }


    /* ---------- 权重页 ---------- */

    .weight-row {
        padding:
            14px
            13px;

        border-radius: 14px;
    }

    .weight-row-top {
        margin-bottom: 14px;
    }

    .weight-name {
        font-size: 15px;
    }

    .weight-label {
        display: none;
    }

    .weight-input {
        width: 64px;
        height: 40px;

        font-size: 16px;
    }


    /* ---------- 滑块 ---------- */

    .weight-control {
        grid-template-columns:
            44px
            minmax(0, 1fr)
            44px;

        gap: 10px;
    }

    .step-button {
        width: 44px;
        height: 44px;

        font-size: 20px;
    }

    .weight-slider {
        min-width: 0;
        width: 100%;
    }


    /* ---------- 当前选择标签 ---------- */

    .selected-summary {
        padding: 12px;
    }

    .selected-chip {
        padding:
            5px
            9px;
    }


    /* ---------- 提示 ---------- */

    .weight-explanation {
        font-size: 11px;
        line-height: 1.65;
    }

}


/* ---------------------------------------------------------
   小尺寸手机：360px 左右
   --------------------------------------------------------- */

@media (max-width: 390px) {

    .app {
        padding-left: 9px;
        padding-right: 9px;
    }

    .main-card {
        padding-left: 13px;
        padding-right: 13px;
    }

    .attribute-grid {
        gap: 7px;
    }

    .attribute-card {
        min-height: 49px;
        padding-left: 9px;
        padding-right: 7px;
        font-size: 12px;
    }

    .check-box {
        margin-right: 7px;
    }

    .weight-control {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            42px;

        gap: 8px;
    }

    .step-button {
        width: 42px;
        height: 42px;
    }

}


/* ---------------------------------------------------------
   极窄屏幕
   --------------------------------------------------------- */

@media (max-width: 330px) {

    .attribute-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   STEP 3：结果页
========================================================= */


/* ---------- 评价条件 ---------- */

.result-condition {

    margin-bottom: 22px;

    padding: 14px;

    border-radius: 14px;

    background:
        rgba(80, 105, 130, 0.055);

}


.result-condition-title {

    margin-bottom: 9px;

    font-size: 11px;

    color:
        var(--text-light);

}


.result-weight-chips {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

}


.result-weight-chip {

    padding:
        6px
        10px;

    border-radius:
        999px;

    font-size:
        11px;

    font-weight:
        600;

}


.result-weight-chip.damage {

    color:
        #357fb7;

    background:
        rgba(
            88,
            169,
            236,
            0.11
        );

}


.result-weight-chip.resistance {

    color:
        #725fc4;

    background:
        rgba(
            151,
            129,
            232,
            0.12
        );

}



/* ---------- 部位 Tab ---------- */

.slot-tabs {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 8px;

    margin-bottom: 22px;

}


.slot-tab {

    padding:
        11px
        8px;

    border:
        1px solid
        rgba(
            50,
            65,
            80,
            0.09
        );

    border-radius:
        12px;

    cursor:
        pointer;

    color:
        #71808f;

    background:
        #f7f9fb;

    font-size:
        13px;

    font-weight:
        600;

    transition:
        0.15s;

}


.slot-tab:hover {

    color:
        var(--pink);

}


.slot-tab.active {

    color:
        white;

    border-color:
        transparent;

    background:
        linear-gradient(
            90deg,
            #6eb4ee,
            #8b7fe5
        );

}



/* ---------- 排名顶部 ---------- */

.ranking-header {

    display: flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    margin-bottom:
        12px;

}


#currentSlotName {

    font-size:
        17px;

    font-weight:
        700;

}


.ranking-count {

    margin-left:
        7px;

    font-size:
        11px;

    color:
        var(--text-light);

}


.ranking-tip {

    font-size:
        10px;

    color:
        var(--text-light);

}



/* =========================================================
   PC 表格
========================================================= */

.ranking-table-wrapper {

    overflow-x:
        auto;

    border:
        1px solid
        rgba(
            50,
            65,
            80,
            0.07
        );

    border-radius:
        15px;

}


.ranking-table {

    width:
        100%;

    border-collapse:
        collapse;

    background:
        white;

}


.ranking-table th {

    padding:
        12px
        13px;

    white-space:
        nowrap;

    text-align:
        center;

    font-size:
        11px;

    color:
        #8793a0;

    background:
        #f6f8fa;

    border-bottom:
        1px solid
        rgba(
            50,
            65,
            80,
            0.08
        );

}


.ranking-table td {

    padding:
        12px
        13px;

    white-space:
        nowrap;

    text-align:
        center;

    font-size:
        12px;

    border-bottom:
        1px solid
        rgba(
            50,
            65,
            80,
            0.055
        );

}


.ranking-table tr:last-child td {

    border-bottom:
        0;

}


.ranking-table tbody tr:hover {

    background:
        rgba(
            88,
            169,
            236,
            0.045
        );

}


.rank-column {

    width:
        65px;

}


.name-column {

    min-width:
        140px;

}


.score-column {

    min-width:
        100px;

}


.rank-cell {

    font-weight:
        700;

}


.equipment-name-cell {

    text-align:
        left !important;

    font-weight:
        600;

}


.score-cell {

    color:
        var(--pink);

    font-weight:
        700;

}


.top-rank-row {

    background:
        rgba(
            248,
            200,
            89,
            0.035
        );

}



/* 手机卡片默认隐藏 */

.ranking-cards {

    display:
        none;

}

/* =========================================================
   STEP 3 手机
========================================================= */

@media (
    max-width: 600px
) {

    /*
       手机不用宽表格
    */

    .ranking-table-wrapper {

        display:
            none;

    }


    /*
       改为卡片
    */

    .ranking-cards {

        display:
            flex;

        flex-direction:
            column;

        gap:
            10px;

    }


    .slot-tabs {

        gap:
            6px;

    }


    .slot-tab {

        padding:
            10px
            4px;

        font-size:
            12px;

    }


    .ranking-header {

        align-items:
            center;

    }


    .ranking-tip {

        display:
            none;

    }


    .ranking-card {

        padding:
            15px;

        border:
            1px solid
            rgba(
                50,
                65,
                80,
                0.07
            );

        border-radius:
            15px;

        background:
            #fafbfc;

    }


    .ranking-card.rank-1 {

        border-color:
            rgba(
                232,
                179,
                58,
                0.28
            );

        background:
            rgba(
                255,
                248,
                225,
                0.38
            );

    }


    .ranking-card.rank-2 {

        border-color:
            rgba(
                150,
                160,
                175,
                0.24
            );

    }


    .ranking-card.rank-3 {

        border-color:
            rgba(
                181,
                121,
                78,
                0.22
            );

    }


    .ranking-card-top {

        display:
            flex;

        align-items:
            center;

        gap:
            10px;

    }


    .mobile-rank {

        min-width:
            28px;

        font-size:
            18px;

        font-weight:
            700;

    }


    .mobile-name {

        font-size:
            15px;

        font-weight:
            700;

    }


    .mobile-score {

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        margin-top:
            13px;

        padding-top:
            11px;

        border-top:
            1px solid
            rgba(
                50,
                65,
                80,
                0.06
            );

    }


    .mobile-score span {

        font-size:
            11px;

        color:
            var(--text-light);

    }


    .mobile-score strong {

        color:
            var(--pink);

        font-size:
            16px;

    }


    .ranking-attributes {

        display:
            grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            7px
            12px;

        margin-top:
            13px;

    }


    .ranking-attribute {

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        padding:
            7px
            9px;

        border-radius:
            9px;

        font-size:
            11px;

        background:
            white;

    }


    .ranking-attribute span {

        color:
            #83909c;

    }


    .ranking-attribute strong {

        color:
            #374453;

    }

}

/* =========================================================
   V1.1 —— 评分结果页最终视觉第一版
   仅覆盖结果页，不修改评分逻辑
========================================================= */


/* =========================================================
   结果页整体
========================================================= */

#resultStep {
    position: relative;

    color: #ece8df;

    background:
        radial-gradient(
            circle at 82% 8%,
            rgba(112, 178, 194, 0.10),
            transparent 22%
        ),
        radial-gradient(
            circle at 15% 90%,
            rgba(135, 28, 25, 0.10),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #0b0e12 0%,
            #0a0c0f 45%,
            #080a0c 100%
        );

    border:
        1px solid
        rgba(235, 231, 220, 0.10);

    box-shadow:
        0 22px 70px
        rgba(0, 0, 0, 0.40);

    overflow: hidden;
}


/* 极淡纹理，不影响阅读 */

#resultStep::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.22;

    background:
        repeating-linear-gradient(
            125deg,
            transparent 0,
            transparent 34px,
            rgba(255,255,255,0.012) 35px,
            transparent 36px
        );

    z-index: 0;
}


#resultStep > * {
    position: relative;
    z-index: 1;
}



/* =========================================================
   返回按钮
========================================================= */

#resultStep .back-button {
    color: #99968f;
    background: transparent;
    border: none;
}

#resultStep .back-button:hover {
    color: #efe9dd;
}



/* =========================================================
   03 标题
========================================================= */

#resultStep .step-number {
    color: #f0ebe1;

    background:
        linear-gradient(
            145deg,
            #222a30,
            #11161a
        );

    border:
        1px solid
        rgba(231, 225, 210, 0.26);

    box-shadow:
        inset 0 0 18px
        rgba(255,255,255,0.035);
}


#resultStep .step-heading h3 {
    color: #f0ece2;
    letter-spacing: 0.06em;
}


#resultStep .step-heading p {
    color: #777d81;
}



/* =========================================================
   本次评价条件
========================================================= */

#resultStep .result-condition {
    background:
        rgba(255,255,255,0.025);

    border:
        1px solid
        rgba(255,255,255,0.055);

    box-shadow:
        inset 0 0 20px
        rgba(0,0,0,0.20);
}


#resultStep .result-condition-title {
    color: #85898b;
}


#resultStep .result-weight-chip {
    color: #cbc7bc;

    background:
        rgba(255,255,255,0.045);

    border:
        1px solid
        rgba(255,255,255,0.06);
}


/* 减伤率 */

#resultStep .result-weight-chip.damage {
    color: #8fd9e4;

    background:
        rgba(75, 161, 178, 0.10);

    border-color:
        rgba(103, 197, 214, 0.18);
}


/* 抵抗力 */

#resultStep .result-weight-chip.resistance {
    color: #d393c4;

    background:
        rgba(135, 63, 116, 0.10);

    border-color:
        rgba(190, 103, 165, 0.16);
}



/* =========================================================
   四部位标签
========================================================= */

#resultStep .slot-tabs {
    gap: 8px;
}


#resultStep .slot-tab {
    position: relative;

    color: #a5a29a;

    background:
        linear-gradient(
            180deg,
            rgba(25,29,32,0.98),
            rgba(14,17,20,0.98)
        );

    border:
        1px solid
        rgba(226,219,203,0.13);

    box-shadow:
        inset 0 0 14px
        rgba(255,255,255,0.018);
}


#resultStep .slot-tab:hover {
    color: #eee8db;

    border-color:
        rgba(154, 45, 39, 0.48);
}


#resultStep .slot-tab.active {
    color: #f5eee2;

    background:
        linear-gradient(
            180deg,
            rgba(89, 25, 22, 0.88),
            rgba(45, 15, 15, 0.94)
        );

    border-color:
        rgba(174, 52, 44, 0.72);

    box-shadow:
        0 0 18px
        rgba(135, 30, 27, 0.17),
        inset 0 0 16px
        rgba(177, 48, 40, 0.08);
}


/* 选中标签底部红色细线 */

#resultStep .slot-tab.active::after {
    content: "";

    position: absolute;

    left: 26%;
    right: 26%;
    bottom: -1px;

    height: 2px;

    background: #a42e29;

    box-shadow:
        0 0 8px
        rgba(197, 57, 47, 0.6);
}



/* =========================================================
   当前部位标题
========================================================= */

#resultStep #currentSlotName {
    color: #eee9df;
}


#resultStep .ranking-count {
    color: #797d80;
}


#resultStep .ranking-tip {
    color: #73777a;
}



/* =========================================================
   手机排行榜卡片
========================================================= */

#resultStep .ranking-cards {
    gap: 14px;
}


/*
   关键：
   不允许固定卡片高度。
   用户选多少属性，卡片就自然增长多少。
*/

#resultStep .ranking-card {
    position: relative;

    height: auto !important;
    max-height: none !important;

    overflow: visible !important;

    padding: 17px;

    color: #e9e4da;

    background:
        linear-gradient(
            155deg,
            rgba(20,24,27,0.98),
            rgba(11,14,17,0.985)
        );

    border:
        1px solid
        rgba(220,211,194,0.12);

    border-radius: 14px;

    box-shadow:
        0 9px 25px
        rgba(0,0,0,0.18);

    transition:
        border-color .16s ease,
        transform .16s ease;
}


#resultStep .ranking-card:hover {
    border-color:
        rgba(203,190,167,0.25);
}



/* =========================================================
   TOP 1 —— 白色海百合强化
========================================================= */

#resultStep .ranking-card.rank-1 {
    padding: 20px 18px;

    background:
        radial-gradient(
            circle at 86% 11%,
            rgba(255,255,255,0.055),
            transparent 30%
        ),
        linear-gradient(
            155deg,
            rgba(17,21,23,0.99),
            rgba(7,10,12,0.99)
        );

    border:
        1px solid
        rgba(246,242,231,0.62);

    box-shadow:
        0 0 5px
        rgba(255,255,255,0.45),
        0 0 16px
        rgba(255,255,255,0.13),
        0 14px 34px
        rgba(0,0,0,0.34);
}


/*
   第一层白色生命枝网光感。
   暂时由 CSS 实现。
   后面替换成真正海百合透明素材。
*/

#resultStep .ranking-card.rank-1::before {
    content: "";

    position: absolute;

    inset: -3px;

    border-radius: 16px;

    pointer-events: none;

    border:
        1px solid
        rgba(255,255,255,0.40);

    filter:
        drop-shadow(
            0 0 4px
            rgba(255,255,255,0.72)
        );

    opacity: 0.70;
}


/* TOP1 第二层冷白光 */

#resultStep .ranking-card.rank-1::after {
    content: "";

    position: absolute;

    inset: -8px;

    pointer-events: none;

    border-radius: 20px;

    background:
        radial-gradient(
            ellipse at 10% 12%,
            rgba(255,255,255,0.20),
            transparent 18%
        ),
        radial-gradient(
            ellipse at 89% 82%,
            rgba(255,255,255,0.12),
            transparent 18%
        );

    opacity: 0.55;

    z-index: -1;
}



/* =========================================================
   TOP 2 / TOP 3
========================================================= */

#resultStep .ranking-card.rank-2 {
    border-color:
        rgba(183,188,190,0.22);
}


#resultStep .ranking-card.rank-3 {
    border-color:
        rgba(157,104,72,0.24);
}



/* =========================================================
   卡片顶部：排名 + 装备名
========================================================= */

#resultStep .ranking-card-top {
    display: flex;

    align-items: center;

    gap: 11px;

    padding-bottom: 12px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.055);
}


#resultStep .mobile-rank {
    flex: 0 0 auto;

    min-width: 36px;

    color: #c3b9a7;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;

    line-height: 1;

    text-align: center;
}


#resultStep .rank-1 .mobile-rank {
    color: #f1dfba;

    font-size: 20px;

    text-shadow:
        0 0 10px
        rgba(224,197,147,0.15);
}


#resultStep .mobile-name {
    flex: 1;

    min-width: 0;

    color: #efeadf;

    font-size: 16px;

    font-weight: 650;

    letter-spacing: 0.025em;
}



/* =========================================================
   综合评分
========================================================= */

#resultStep .mobile-score {
    margin-top: 13px;
    padding-top: 0;

    border-top: none;
}


#resultStep .mobile-score span {
    color: #83878a;

    font-size: 11px;
}


#resultStep .mobile-score strong {
    color: #cc6f72;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;

    font-weight: 500;

    letter-spacing: 0.04em;
}


/* TOP1 分数进一步突出 */

#resultStep .rank-1 .mobile-score strong {
    color: #d8eef0;

    font-size: 24px;

    text-shadow:
        0 0 11px
        rgba(116,193,205,0.12);
}



/* =========================================================
   所选属性区域

   这是硬约束：
   不隐藏、不截断、不限制数量。
========================================================= */

#resultStep .ranking-attributes {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        7px
        10px;

    width: 100%;

    height: auto !important;
    max-height: none !important;

    overflow: visible !important;

    margin-top: 14px;
}


#resultStep .ranking-attribute {
    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    padding:
        8px
        10px;

    color: #b9b8b2;

    background:
        rgba(255,255,255,0.025);

    border:
        1px solid
        rgba(255,255,255,0.035);

    border-radius: 7px;
}


#resultStep .ranking-attribute span {
    min-width: 0;

    color: #8c9091;

    font-size: 11px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


#resultStep .ranking-attribute strong {
    flex: 0 0 auto;

    color: #e8e4da;

    font-size: 12px;

    font-weight: 650;

    font-variant-numeric:
        tabular-nums;
}



/* =========================================================
   第一名属性更亮一点
========================================================= */

#resultStep .rank-1 .ranking-attribute {
    background:
        rgba(255,255,255,0.032);

    border-color:
        rgba(255,255,255,0.05);
}


#resultStep .rank-1 .ranking-attribute strong {
    color: #f3eee4;
}



/* =========================================================
   PC 表格暗色化
========================================================= */

#resultStep .ranking-table-wrapper {
    border-color:
        rgba(255,255,255,0.08);

    background: #0d1114;
}


#resultStep .ranking-table {
    color: #ddd8ce;

    background: #0d1114;
}


#resultStep .ranking-table th {
    color: #95989a;

    background: #13181b;

    border-bottom-color:
        rgba(255,255,255,0.08);
}


#resultStep .ranking-table td {
    border-bottom-color:
        rgba(255,255,255,0.05);
}


#resultStep .ranking-table tbody tr:hover {
    background:
        rgba(255,255,255,0.025);
}


#resultStep .equipment-name-cell {
    color: #eee9df;
}


#resultStep .score-cell {
    color: #c86d70;
}



/* =========================================================
   手机 600px 以下
========================================================= */

@media (max-width: 600px) {

    #resultStep {
        /*
           手机结果页不再使用原浅色大卡片感觉
        */
        padding:
            20px
            14px
            28px;

        border-radius:
            18px;
    }


    #resultStep .step-heading {
        margin-bottom:
            18px;
    }


    #resultStep .slot-tabs {
        grid-template-columns:
            repeat(4, minmax(0,1fr));

        gap:
            6px;

        margin-bottom:
            19px;
    }


    #resultStep .slot-tab {
        min-width: 0;

        padding:
            10px 3px;

        font-size:
            12px;
    }


    #resultStep .ranking-card {
        /*
           不设 fixed height
        */
        height:
            auto !important;

        min-height:
            0;

        padding:
            15px
            13px;
    }


    #resultStep .ranking-card.rank-1 {
        padding:
            18px
            14px;
    }


    #resultStep .mobile-name {
        font-size:
            15px;
    }


    #resultStep .ranking-attributes {
        /*
           手机必须两列。
           15项 = 8行，允许卡片自然增长。
        */
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    #resultStep .ranking-attribute {
        padding:
            7px
            8px;
    }


    #resultStep .ranking-attribute span {
        font-size:
            10.5px;
    }


    #resultStep .ranking-attribute strong {
        font-size:
            11.5px;
    }

}



/* =========================================================
   很窄的手机
========================================================= */

@media (max-width: 350px) {

    #resultStep {
        padding-left:
            10px;

        padding-right:
            10px;
    }


    #resultStep .ranking-card {
        padding-left:
            11px;

        padding-right:
            11px;
    }


    /*
       仍保持两列。
       不为了省空间删除属性。
    */

    #resultStep .ranking-attributes {
        gap:
            6px;
    }

}



/* =========================================================
   PC 大屏属性区域

   PC可以更多列，但显示内容完全相同
========================================================= */

@media (min-width: 900px) {

    #resultStep .ranking-attributes {
        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );
    }

}

/* =========================================================
   V1.1 —— STEP 01 属性选择页
   只改视觉，不修改任何交互逻辑
========================================================= */


/* =========================================================
   STEP 01 整体
========================================================= */

#selectStep {
    position: relative;

    color: #ece8df;

    background:
        radial-gradient(
            circle at 88% 5%,
            rgba(109, 184, 198, 0.08),
            transparent 26%
        ),
        radial-gradient(
            circle at 8% 92%,
            rgba(135, 28, 25, 0.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #0d1115 0%,
            #0a0d10 55%,
            #080a0d 100%
        );

    border:
        1px solid
        rgba(236, 231, 219, 0.09);

    box-shadow:
        0 22px 70px
        rgba(0, 0, 0, 0.34);

    overflow: hidden;
}


/* 非交互背景纹理 */

#selectStep::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.18;

    background:
        repeating-linear-gradient(
            128deg,
            transparent 0,
            transparent 34px,
            rgba(255,255,255,0.012) 35px,
            transparent 36px
        );
}


#selectStep > * {
    position: relative;
    z-index: 1;
}

/* =========================================================
   STEP 01 标题
========================================================= */

#selectStep .step-number {
    color: #eee9df;

    background:
        linear-gradient(
            145deg,
            #22292e,
            #11161a
        );

    border:
        1px solid
        rgba(232, 225, 210, 0.24);

    box-shadow:
        inset 0 0 18px
        rgba(255,255,255,0.035);
}


#selectStep .step-heading h3 {
    color: #f0ece3;

    letter-spacing: 0.035em;
}


#selectStep .step-heading p {
    color: #7d8285;
}

/* =========================================================
   属性分组标题
========================================================= */

#selectStep .attribute-group {
    color: #dad6cd;
}


#selectStep .group-header,
#selectStep .attribute-group-header {
    color: #d9d5cc;
}


/* 分组右侧“8项 / 7项” */

#selectStep .group-count {
    color: #6f767a;
}


/* 如果圆点是伪元素或单独元素，统一降低饱和度 */

#selectStep .damage-group .group-dot,
#selectStep .damage .group-dot {
    background: #70bac7;
}


#selectStep .resistance-group .group-dot,
#selectStep .resistance .group-dot {
    background: #9b6c91;
}

/* =========================================================
   属性选择卡
========================================================= */


/*
   同时覆盖几个常见类名。
   你的实际页面命中其中一个即可。
*/

#selectStep .attribute-option,
#selectStep .attribute-item,
#selectStep .attribute-card,
#selectStep .option-card {
    color: #a9adae;

    background:
        linear-gradient(
            145deg,
            rgba(24,29,33,0.96),
            rgba(15,19,22,0.98)
        );

    border:
        1px solid
        rgba(221,216,204,0.10);

    box-shadow:
        inset 0 0 12px
        rgba(255,255,255,0.015);

    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease,
        color .16s ease;
}


/* 鼠标经过 */

#selectStep .attribute-option:hover,
#selectStep .attribute-item:hover,
#selectStep .attribute-card:hover,
#selectStep .option-card:hover {
    color: #eee9df;

    border-color:
        rgba(220,214,201,0.23);
}

/* =========================================================
   Checkbox
========================================================= */

#selectStep input[type="checkbox"] {
    accent-color: #77c4cf;
}


/* 如果是自定义 checkbox 方块 */

#selectStep .checkbox,
#selectStep .check-box,
#selectStep .attribute-check {
    color: transparent;

    background: #11161a;

    border-color:
        rgba(225,220,209,0.20);
}

/* =========================================================
   减伤率：选中
========================================================= */

#selectStep .damage.selected,
#selectStep .damage.checked,
#selectStep .damage.active,

#selectStep .attribute-option.damage.selected,
#selectStep .attribute-card.damage.selected {
    color: #dff3f3;

    background:
        linear-gradient(
            145deg,
            rgba(24,43,47,0.96),
            rgba(13,25,29,0.98)
        );

    border-color:
        rgba(115, 201, 214, 0.68);

    box-shadow:
        0 0 12px
        rgba(88, 190, 206, 0.10),
        inset 0 0 14px
        rgba(97, 197, 212, 0.04);
}

/* =========================================================
   抵抗力：选中
========================================================= */

#selectStep .resistance.selected,
#selectStep .resistance.checked,
#selectStep .resistance.active,

#selectStep .attribute-option.resistance.selected,
#selectStep .attribute-card.resistance.selected {
    color: #eadbe6;

    background:
        linear-gradient(
            145deg,
            rgba(43,28,40,0.96),
            rgba(25,17,25,0.98)
        );

    border-color:
        rgba(166, 103, 151, 0.62);

    box-shadow:
        0 0 12px
        rgba(160, 86, 142, 0.08),
        inset 0 0 14px
        rgba(179, 103, 160, 0.035);
}

/* =========================================================
   STEP 01 底部操作栏
========================================================= */

#selectStep .selection-footer,
#selectStep .bottom-action,
#selectStep .selection-summary {
    color: #999c9d;

    background:
        rgba(17,21,24,0.96);

    border:
        1px solid
        rgba(255,255,255,0.075);

    box-shadow:
        0 -7px 24px
        rgba(0,0,0,0.18);
}


/* “已选择” */

#selectStep .selected-count,
#selectStep .selected-info {
    color: #a6a6a1;
}


/* 数字 */

#selectStep .selected-count strong,
#selectStep .selected-info strong {
    color: #d57376;
}


/* 全选 / 清空 */

#selectStep .select-all,
#selectStep .clear-all {
    color: #898e90;
}


#selectStep .select-all:hover,
#selectStep .clear-all:hover {
    color: #ece7dc;
}

/* =========================================================
   STEP 01 主按钮
========================================================= */

#selectStep .primary-button {
    color: #f0e8da;

    background:
        linear-gradient(
            180deg,
            #731e1a 0%,
            #4a1514 55%,
            #351112 100%
        );

    border:
        1px solid
        rgba(180, 59, 49, 0.70);

    box-shadow:
        0 0 18px
        rgba(145, 31, 27, 0.16),
        inset 0 0 16px
        rgba(210, 68, 55, 0.06);

    text-shadow:
        0 1px 2px
        rgba(0,0,0,0.42);

    transition:
        background .16s ease,
        box-shadow .16s ease,
        transform .12s ease;
}


#selectStep .primary-button:hover {
    background:
        linear-gradient(
            180deg,
            #85251f,
            #561816
        );

    box-shadow:
        0 0 22px
        rgba(167, 37, 30, 0.23);
}


#selectStep .primary-button:active {
    transform:
        translateY(1px);
}

/* =========================================================
   STEP 01 手机适配
========================================================= */

@media (max-width: 600px) {

    #selectStep {
        padding:
            20px
            14px
            110px;

        border-radius:
            18px;
    }


    /*
       属性仍然保持两列。
    */

    #selectStep .attribute-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:
            8px;
    }


    #selectStep .attribute-option,
    #selectStep .attribute-item,
    #selectStep .attribute-card,
    #selectStep .option-card {
        min-width: 0;

        min-height:
            48px;
    }


    /*
       不缩小文字到难以点击。
    */

    #selectStep .attribute-name {
        font-size:
            12px;
    }

}

#selectStep .attribute-card.selected .check-box {
    color: white;
}

/* =========================================================
   FINAL MOBILE ART DIRECTION · 2026-08
========================================================= */

[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

:root {
    --ink: #070b0d;
    --ink-2: #0d1316;
    --bone: #e6e0d5;
    --muted-bone: #9d9a92;
    --blood: #8b2422;
    --blood-bright: #c13936;
    --line: rgba(219, 216, 205, .2);
}

html { background: #030608; }

body {
    margin: 0;
    color: var(--bone);
    background:
        radial-gradient(circle at 50% -10%, rgba(31, 52, 64, .48), transparent 34rem),
        linear-gradient(rgba(3, 7, 9, .87), rgba(3, 7, 9, .97)),
        repeating-linear-gradient(115deg, #101719 0 1px, #070b0d 1px 7px);
    font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
    min-height: 100vh;
}

.page-background { display: none; }

.app {
    width: min(100%, 920px);
    margin: 0 auto;
    padding: 0;
}

.landing-page {
    position: relative;
    display: grid;
    min-height: 100svh;
    place-items: center;
    overflow: hidden;
    padding: 32px;
    isolation: isolate;
}

.landing-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse at 76% 12%, transparent 0 16%, rgba(207, 224, 230, .16) 17%, transparent 35%),
        radial-gradient(ellipse at 50% 80%, rgba(112, 23, 19, .22), transparent 35%),
        linear-gradient(155deg, rgba(22, 40, 51, .65), rgba(2, 5, 7, .92) 52%, #020405);
}

.landing-page::after {
    content: "";
    position: absolute;
    inset: 4% 6%;
    z-index: -1;
    opacity: .35;
    border: 1px solid rgba(229, 237, 236, .12);
    box-shadow: inset 0 0 90px #000, 0 0 80px #000;
}

.landing-mark {
    position: absolute;
    width: 56vw;
    max-width: 440px;
    aspect-ratio: 1;
    right: -8%;
    top: 3%;
    border: 2px solid rgba(222, 235, 237, .42);
    border-radius: 50%;
    filter: drop-shadow(0 0 9px rgba(219, 234, 237, .45));
    opacity: .55;
}

.landing-mark::before,
.landing-mark::after {
    content: "";
    position: absolute;
    inset: 14%;
    border: 1px solid rgba(225, 235, 236, .45);
    border-radius: 45% 55% 38% 62%;
    transform: rotate(31deg);
}

.landing-mark::after { inset: 28%; transform: rotate(-25deg); }

.landing-copy { text-align: center; margin-top: 7vh; }
.landing-copy .hero-small { color: #aab6ba; letter-spacing: .24em; font: 11px/1.4 Arial, sans-serif; }
.landing-copy h1 { margin: 22px 0 8px; font-size: clamp(38px, 8vw, 68px); letter-spacing: .08em; text-shadow: 0 2px 18px #000; }
.landing-copy h2 { margin: 0; font-size: clamp(21px, 4vw, 34px); font-weight: 400; letter-spacing: .28em; }
.landing-copy p { color: var(--muted-bone); margin: 22px 0 34px; letter-spacing: .12em; }

.ornate-button,
#selectStep .primary-button,
#weightStep .primary-button,
.result-actions button:last-child {
    min-height: 58px;
    color: #f4e8db;
    border: 1px solid #b33b35;
    background: linear-gradient(145deg, #781b18, #2a0909 78%);
    box-shadow: inset 0 0 0 3px rgba(222, 157, 116, .08), 0 0 22px rgba(126, 25, 22, .22);
    font: 22px/1 "Noto Serif SC", "Songti SC", serif;
    letter-spacing: .18em;
}

.ornate-button { width: min(100%, 290px); }

.landing-progress {
    align-self: end;
    display: flex;
    align-items: center;
    gap: 24px;
    color: #bbb6ac;
    text-align: center;
}
.landing-progress span { display: grid; gap: 6px; font-size: 14px; letter-spacing: .1em; }
.landing-progress b { color: #eee8dd; font-size: 26px; font-weight: 400; }
.landing-progress i { color: #6f7676; font-size: 28px; font-style: normal; }

.main-card.step-page {
    position: relative;
    width: 100%;
    min-height: 100svh;
    margin: 0;
    padding: 42px clamp(24px, 6vw, 64px) 48px;
    color: var(--bone);
    border: 0;
    border-radius: 0;
    background: linear-gradient(rgba(4, 9, 12, .91), rgba(3, 7, 9, .97));
    box-shadow: none;
}

.main-card.step-page::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 0, rgba(34, 59, 68, .26), transparent 26rem);
}

.screen-back,
.back-button {
    position: relative;
    z-index: 2;
    padding: 5px 0;
    color: #ece8de;
    border: 0;
    background: none;
    font: 24px/1 Arial, sans-serif;
}

.step-heading { justify-content: center; text-align: center; margin: 0 0 30px; }
.step-heading .step-number { background: transparent; border: 1px solid rgba(228,224,213,.32); color: #eee8dc; border-radius: 50%; }
.step-heading h3 { color: #eee8dc; font-size: clamp(28px, 5vw, 42px); font-weight: 400; letter-spacing: .12em; }
.step-heading p { color: #8e9696; font-size: 14px; }

#selectStep .screen-back { position: absolute; left: 24px; top: 26px; }
#selectStep .attribute-group { margin-top: 28px; }
#selectStep .attribute-group-header { border-bottom: 1px solid rgba(218,216,207,.14); }
#selectStep .attribute-group-title { color: #ded8ce; font-size: 22px; letter-spacing: .16em; }
#selectStep .attribute-group-count { display: none; }
#selectStep .attribute-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
#selectStep .attribute-card {
    min-height: 74px;
    justify-content: center;
    color: #d1cec6;
    border: 1px solid rgba(209,216,213,.24);
    border-radius: 6px;
    background: linear-gradient(145deg, rgba(18,25,28,.82), rgba(6,10,12,.92));
    font-size: 17px;
}
#selectStep .attribute-card .check-box { width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; }
#selectStep .attribute-card.damage.selected { border-color: #dcebed; box-shadow: 0 0 8px #d7e7eb, inset 0 0 14px rgba(191,224,232,.16); }
#selectStep .attribute-card.resistance.selected { border-color: #8c718d; box-shadow: 0 0 7px rgba(126,91,128,.75), inset 0 0 14px rgba(102,71,105,.2); }
#selectStep .selection-footer { margin-top: 34px; background: transparent; border: 0; }
#selectStep .selection-info, #selectStep .selection-tools { color: #929795; }
#selectStep .primary-button { width: min(100%, 440px); margin-inline: auto; }

#weightStep .back-button,
#resultStep .back-button { position: absolute; left: 24px; top: 32px; font-size: 0; }
#weightStep .back-button::before,
#resultStep .back-button::before { content: "←"; font-size: 28px; }
#weightStep .selected-summary { color: #989b97; background: transparent; border-color: rgba(220,216,205,.14); }
#weightStep .weight-list { border: 1px solid rgba(223,219,208,.22); border-radius: 4px; overflow: hidden; }
#weightStep .weight-row { margin: 0; border: 0; border-bottom: 1px solid rgba(223,219,208,.17); border-radius: 0; background: rgba(7,12,14,.72); }
#weightStep .weight-row:last-child { border-bottom: 0; }
#weightStep .weight-name { color: #e0dbd1; font-size: 19px; }
#weightStep .weight-input { color: #e1dbd0; border-color: rgba(224,218,205,.3); background: #080d0f; }
#weightStep .weight-explanation { color: #8f918e; border: 0; background: transparent; text-align: center; }
#weightStep .start-button { display: block; width: min(100%, 390px); margin: 28px auto 0; }
#weightStep input[type="range"] { background: linear-gradient(90deg,#8b2b27 0%,#8b2b27 10%,#30363a 10%,#30363a 100%); }

#resultStep { max-width: 920px; }
#resultStep .step-heading .step-number { display: none; }
#resultStep .result-condition { text-align: center; background: transparent; border: 0; }
#resultStep .result-condition-title { font-size: 0; }
#resultStep .result-condition-title::after { content: "根据所选属性及权重计算得出"; color: #9b9892; font-size: 15px; }
#resultStep .result-weight-chips { display: none; }
#resultStep .slot-tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
#resultStep .slot-tab { color: #cfc9bf; border: 1px solid rgba(218,215,205,.24); border-radius: 4px; background: linear-gradient(#131719,#080b0c); font-size: 18px; }
#resultStep .slot-tab.active { color: #fff0e8; border-color: #9f2c29; background: linear-gradient(#2a1212,#100a0a); box-shadow: 0 0 12px rgba(156,42,39,.25); }
#resultStep .ranking-header { margin-top: 28px; border: 0; }
#resultStep #currentSlotName { font-size: 28px; }
#resultStep .ranking-tip { display: none; }
#resultStep .ranking-table-wrapper { display: none; }
#resultStep .ranking-cards { display: grid; gap: 14px; }
#resultStep .ranking-card {
    position: relative;
    display: grid;
    grid-template-columns: 72px 130px minmax(150px,1fr) 1.8fr;
    grid-template-areas: "rank image score attrs";
    align-items: center;
    min-height: 170px;
    padding: 16px;
    color: #ded9cf;
    border: 1px solid rgba(220,218,208,.24);
    border-radius: 5px;
    background: linear-gradient(145deg, rgba(15,20,21,.96), rgba(5,8,9,.98));
}
#resultStep .ranking-card-top { grid-area: rank; align-self: start; }
#resultStep .mobile-rank { color: #e6ded1; font-size: 24px; }
#resultStep .mobile-name { position: absolute; left: 238px; top: 25px; color: #f0e9df; font-size: 22px; white-space: nowrap; }
#resultStep .equipment-placeholder { grid-area: image; width: 112px; height: 130px; border: 1px solid rgba(220,218,208,.28); background: #000; display: grid; place-items: center; }
#resultStep .equipment-placeholder span { width: 48px; height: 78px; border-radius: 45% 45% 20% 20%; background: #050505; border: 1px solid #181818; box-shadow: 0 0 22px #121212; }
#resultStep .mobile-score { grid-area: score; padding-top: 34px; }
#resultStep .mobile-score span { color: #9c9992; }
#resultStep .mobile-score strong { display: block; color: #d85d72; font-size: 25px; font-weight: 400; }
#resultStep .ranking-attributes { grid-area: attrs; display: grid; grid-template-columns: repeat(2,1fr); gap: 8px 24px; }
#resultStep .ranking-attribute { border-bottom: 1px solid rgba(220,218,208,.1); }
#resultStep .ranking-attribute span { color: #c6c1b8; }
#resultStep .ranking-attribute strong { color: #eee8dd; }
#resultStep .rank-1 { min-height: 310px; border-color: rgba(231,225,211,.7); box-shadow: 0 0 13px rgba(232,229,217,.19); }
#resultStep .rank-1::before { content: ""; position: absolute; inset: -7px; pointer-events: none; border: 2px solid rgba(235,231,218,.55); filter: drop-shadow(0 0 5px #e8e5db); border-radius: 45% 55% 48% 52% / 3% 5% 4% 6%; }
#resultStep .rank-1 .mobile-rank { color: #f4e8da; background: #5d1312; padding: 7px 10px; }
#resultStep .result-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px; margin-top: 24px; }
#resultStep .result-actions button { min-height: 60px; color: #e5dfd4; border: 1px solid rgba(220,217,207,.35); background: #0b0f10; font: 20px/1 serif; letter-spacing: .1em; }
#resultStep .result-footnote { color: #777b79; text-align: center; }

@media (max-width: 600px) {
    .landing-page { padding: 20px; }
    .landing-copy { margin-top: 14vh; }
    .landing-copy h1 { font-size: 38px; }
    .landing-copy h2 { font-size: 21px; }
    .landing-progress { width: 100%; justify-content: space-around; gap: 4px; }
    .landing-progress b { font-size: 22px; }
    .landing-progress span { font-size: 12px; }

    .main-card.step-page { padding: 72px 16px 36px; }
    .step-heading { align-items: center; gap: 10px; }
    .step-heading h3 { font-size: 25px; }
    .step-heading p { font-size: 12px; }
    #selectStep .attribute-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
    #selectStep .attribute-card { min-height: 62px; font-size: 16px; }
    #selectStep .selection-tools { display: flex; }

    #weightStep .selected-summary { display: none; }
    #weightStep .weight-row { grid-template-columns: 1fr; padding: 14px 12px; }
    #weightStep .weight-row-main { display: grid; grid-template-columns: minmax(76px,1fr) 64px; }
    #weightStep .weight-control { grid-template-columns: 34px 1fr 34px; }

    #resultStep { padding-inline: 12px; }
    #resultStep .step-heading h3 { font-size: 30px; }
    #resultStep .slot-tabs { gap: 7px; }
    #resultStep .slot-tab { min-width: 0; padding: 13px 3px; font-size: 16px; }
    #resultStep .ranking-card {
        grid-template-columns: 46px 92px 1fr;
        grid-template-areas: "rank image score" "attrs attrs attrs";
        min-height: 154px;
        padding: 12px;
        gap: 10px;
    }
    #resultStep .equipment-placeholder { width: 86px; height: 104px; }
    #resultStep .mobile-name { left: 150px; top: 16px; max-width: calc(100% - 160px); overflow: hidden; text-overflow: ellipsis; font-size: 18px; }
    #resultStep .mobile-score { padding-top: 28px; }
    #resultStep .mobile-score strong { font-size: 21px; }
    #resultStep .ranking-attributes { margin-top: 6px; gap: 5px 18px; }
    #resultStep .rank-1 { min-height: 285px; }
    #resultStep .result-actions { gap: 10px; }
    #resultStep .result-actions button { min-height: 54px; font-size: 17px; }
}

/* =========================================================
   STEP 03 UNIFIED RESULT CARDS · readability pass
========================================================= */

/* STEP 01: reserve icon space without shipping temporary icons */
#selectStep .attribute-card .check-box {
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(213,217,211,.18);
    border-radius: 50%;
}
#selectStep .attribute-card .check-box::before { content: none !important; }
#selectStep .attribute-card.selected .check-box::after {
    content: "✓";
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #ebe9e1;
    font-size: 12px;
}

/* Make both back controls reliable tap targets above decoration layers. */
#weightStep .back-button,
#resultStep .back-button,
#selectStep .screen-back {
    z-index: 20 !important;
    display: grid !important;
    place-items: center;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    pointer-events: auto !important;
    cursor: pointer;
}

#resultStep .ranking-cards { gap: 11px; }

#resultStep .ranking-card,
#resultStep .ranking-card.rank-1,
#resultStep .ranking-card:not(.rank-1) {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0,1fr);
    grid-template-areas:
        "top top"
        "image score"
        "attrs attrs";
    gap: 8px 12px;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin: 0;
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(214,211,201,.22);
    border-radius: 4px;
    background: linear-gradient(145deg,rgba(12,17,19,.98),rgba(4,7,8,.99));
    box-shadow: none;
}

#resultStep .ranking-card.rank-1 {
    border-color: rgba(232,218,176,.72);
    box-shadow: inset 0 0 0 1px rgba(245,239,214,.08), 0 0 8px rgba(219,201,153,.08);
}

#resultStep .ranking-card.rank-1::before {
    content: "";
    position: absolute;
    inset: auto -8% -22% auto;
    z-index: 0;
    display: block;
    width: 46%;
    aspect-ratio: 1.6;
    opacity: .15;
    border: 0;
    background: url("../assets/sea-lily-white.png") right bottom / contain no-repeat;
    filter: sepia(.22);
    pointer-events: none;
}

#resultStep .ranking-card > * { position: relative; z-index: 1; }

#resultStep .ranking-card-top,
#resultStep .rank-1 .ranking-card-top {
    grid-area: top;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 28px;
}

#resultStep .mobile-rank,
#resultStep .rank-1 .mobile-rank {
    flex: 0 0 auto;
    padding: 3px 7px;
    color: #d8d3ca;
    border-left: 2px solid rgba(206,201,189,.32);
    background: transparent;
    font-size: 17px;
    line-height: 1.1;
}

#resultStep .rank-1 .mobile-rank {
    color: #f1dfaa;
    border-color: #c7a458;
}
#resultStep .rank-1 .mobile-rank::after { content: " ♛"; font-size: 14px; }

#resultStep .mobile-name,
#resultStep .rank-1 .mobile-name,
#resultStep .ranking-card:not(.rank-1) .mobile-name {
    position: static;
    min-width: 0;
    max-width: none;
    color: #ebe6dc;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    font-size: 18px;
    line-height: 1.3;
}

#resultStep .equipment-placeholder,
#resultStep .rank-1 .equipment-placeholder,
#resultStep .ranking-card:not(.rank-1) .equipment-placeholder {
    grid-area: image;
    align-self: center;
    width: 52px;
    height: 64px;
    border-color: rgba(214,210,199,.2);
}

#resultStep .mobile-score,
#resultStep .rank-1 .mobile-score,
#resultStep .ranking-card:not(.rank-1) .mobile-score {
    grid-area: score;
    align-self: center;
    padding: 0;
}
#resultStep .mobile-score span { display: block; color: #8e8d88; white-space: nowrap; font-size: 12px; }
#resultStep .mobile-score strong,
#resultStep .rank-1 .mobile-score strong {
    display: block;
    margin-top: 3px;
    color: #dc6478;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.1;
}

#resultStep .ranking-attributes,
#resultStep .rank-1 .ranking-attributes,
#resultStep .ranking-card:not(.rank-1) .ranking-attributes {
    grid-area: attrs;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 3px 13px;
    width: 100%;
    margin: 2px 0 0;
}

#resultStep .ranking-attribute {
    display: flex;
    justify-content: space-between;
    gap: 7px;
    min-width: 0;
    padding: 4px 2px;
    border-bottom: 1px solid rgba(216,212,201,.08);
}
#resultStep .ranking-attribute span,
#resultStep .ranking-attribute strong {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    font-size: 13px;
}

@media (max-width: 380px) {
    #resultStep .ranking-card,
    #resultStep .ranking-card.rank-1,
    #resultStep .ranking-card:not(.rank-1) { padding: 10px; }
    #resultStep .ranking-attributes { gap: 2px 9px; }
    #resultStep .ranking-attribute span,
    #resultStep .ranking-attribute strong { font-size: 12px; }
}

/* Final weight-row composition: name | dynamic slider | numeric value */
#weightStep .weight-row {
    display: grid !important;
    grid-template-columns: minmax(72px, 100px) minmax(120px, 1fr) 66px !important;
    align-items: center;
    gap: 14px;
    padding: 15px 14px !important;
}

#weightStep .weight-row-top { display: contents; }
#weightStep .weight-name { grid-column: 1; grid-row: 1; }
#weightStep .weight-control {
    grid-column: 2;
    grid-row: 1;
    display: block;
    min-width: 0;
}
#weightStep .weight-input-area { grid-column: 3; grid-row: 1; }
#weightStep .weight-label,
#weightStep .step-button { display: none !important; }
#weightStep .weight-slider { width: 100%; }
#weightStep .weight-input { width: 100%; text-align: center; }

@media (max-width: 420px) {
    #weightStep .weight-row {
        grid-template-columns: 68px minmax(105px, 1fr) 58px !important;
        gap: 9px;
        padding: 14px 10px !important;
    }
    #weightStep .weight-name { font-size: 17px; }
}

/* =========================================================
   STEP 01 OFFICIAL ATTRIBUTE ICONS · final cascade authority
========================================================= */

#selectStep .attribute-card .check-box {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid rgba(225,225,215,.16);
    border-radius: 50%;
    color: transparent;
    background: rgba(7,12,14,.75);
    opacity: 0;
    font-size: 0;
    transition: opacity .15s ease, border-color .15s ease, box-shadow .15s ease;
}

#selectStep .attribute-card .check-box::before {
    content: none !important;
}

#selectStep .attribute-card.selected .check-box {
    opacity: 1;
    border-color: rgba(235,235,225,.42);
}

#selectStep .attribute-card.selected .check-box::after {
    content: "✓";
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #ebe9e1;
    font-size: 11px;
}

#selectStep .attribute-icon {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    color: #c8ccca;
    opacity: .78;
    filter: drop-shadow(0 0 3px rgba(215,225,222,.10));
    transition: color .15s ease, opacity .15s ease, filter .15s ease, transform .15s ease;
}

#selectStep .attribute-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#selectStep .attribute-label {
    color: inherit;
    line-height: 1.1;
}

#selectStep .attribute-card.damage.selected .attribute-icon {
    color: #e4f3f4;
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(185,228,234,.42));
    transform: translateY(-1px);
}

#selectStep .attribute-card.resistance.selected .attribute-icon {
    color: #d6b9d3;
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(157,108,153,.42));
    transform: translateY(-1px);
}

/* Cascade lock: unified result cards must remain the final authority. */
#selectStep .attribute-card .check-box::before { content: none !important; }

#resultStep .ranking-card,
#resultStep .ranking-card.rank-1,
#resultStep .ranking-card:not(.rank-1) {
    display: grid !important;
    grid-template-columns: 56px minmax(0,1fr) !important;
    grid-template-areas: "top top" "image score" "attrs attrs" !important;
    gap: 8px 12px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
}
#resultStep .ranking-card.rank-1 { border-color: rgba(232,218,176,.72) !important; }
#resultStep .ranking-card.rank-1::before {
    inset: auto -8% -22% auto !important;
    width: 46% !important;
    opacity: .15 !important;
    background: url("../assets/sea-lily-white.png") right bottom / contain no-repeat !important;
}
#resultStep .ranking-card-top,
#resultStep .rank-1 .ranking-card-top { grid-area: top !important; display: flex !important; min-height: 28px !important; }
#resultStep .mobile-name,
#resultStep .rank-1 .mobile-name,
#resultStep .ranking-card:not(.rank-1) .mobile-name { position: static !important; max-width: none !important; white-space: normal !important; overflow: visible !important; }
#resultStep .equipment-placeholder,
#resultStep .rank-1 .equipment-placeholder,
#resultStep .ranking-card:not(.rank-1) .equipment-placeholder { grid-area: image !important; width: 52px !important; height: 64px !important; }
#resultStep .mobile-score,
#resultStep .rank-1 .mobile-score,
#resultStep .ranking-card:not(.rank-1) .mobile-score { grid-area: score !important; padding: 0 !important; }
#resultStep .ranking-attributes,
#resultStep .rank-1 .ranking-attributes,
#resultStep .ranking-card:not(.rank-1) .ranking-attributes {
    grid-area: attrs !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
}

/* =========================================================
   FINAL REFERENCE LOCK · supplied four-screen target
========================================================= */

.landing-page {
    background:
        linear-gradient(180deg,rgba(0,4,8,.03) 0%,rgba(1,5,8,.12) 46%,rgba(1,3,5,.38) 100%),
        url("../assets/abyss-hero-v2.png") center / cover no-repeat !important;
}
.landing-page::before { display: none !important; }
.landing-page::after {
    background: linear-gradient(180deg,transparent 28%,rgba(1,4,6,.12) 54%,rgba(1,3,4,.35) 100%) !important;
    box-shadow: inset 0 0 58px 10px rgba(0,0,0,.68) !important;
}
.landing-copy { margin-top: 12vh !important; }
.landing-copy .hero-small { display: none; }
.landing-copy h1 { font-size: clamp(34px,9vw,58px); }
.landing-copy h2 { font-size: clamp(18px,4.5vw,28px); }
.landing-copy p { color: #aaa79f; }
.landing-progress { padding-bottom: 2vh; }

#selectStep .attribute-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 8px !important; }
#selectStep .attribute-card {
    flex-direction: column;
    gap: 4px;
    min-height: 76px;
    padding: 7px 3px;
    font-size: 15px;
}
#selectStep .attribute-card .check-box {
    width: 24px;
    height: 24px;
    margin: 0;
    border: 0;
    background: transparent;
    font-size: 0;
}
#selectStep .attribute-card .check-box::before {
    content: "✦";
    color: #d8ddd9;
    font-size: 16px;
    text-shadow: 0 0 5px rgba(218,230,229,.35);
}
#selectStep .attribute-card.damage.selected,
#selectStep .attribute-card.resistance.selected {
    background: linear-gradient(145deg,rgba(17,27,31,.96),rgba(5,9,11,.98));
}
#selectStep .selection-info,
#selectStep .selection-tools { display: none !important; }
#selectStep .selection-footer { padding-top: 0; }

#weightStep .selected-summary { display: none !important; }
#weightStep .weight-list { border-radius: 3px; }
#weightStep .weight-row { min-height: 62px !important; border-radius: 0 !important; }
#weightStep .weight-name::before { content: "✦"; margin-right: 10px; color: #e1e4df; }
#weightStep .weight-explanation { margin: 12px 0 4px; }

#resultStep .step-heading { margin-bottom: 8px; }
#resultStep .result-condition { padding: 5px 0 12px; }
#resultStep .slot-tabs { gap: 8px; }
#resultStep .ranking-header { margin-top: 14px; }
#resultStep .rank-1 { min-height: 270px; margin-bottom: 12px; }
#resultStep .rank-1::before { opacity: .72; }
#resultStep .ranking-card:not(.rank-1) {
    grid-template-columns: 38px 62px minmax(90px,1fr) 1.65fr;
    min-height: 108px;
    padding: 9px;
}
#resultStep .ranking-card:not(.rank-1) .equipment-placeholder { width: 56px; height: 78px; }
#resultStep .ranking-card:not(.rank-1) .mobile-name { left: 112px; top: 19px; font-size: 17px; }
#resultStep .ranking-card:not(.rank-1) .mobile-score { padding-top: 31px; }
#resultStep .ranking-card:not(.rank-1) .ranking-attribute { padding: 2px; }

@media (max-width: 600px) {
    .landing-copy { margin-top: 11vh !important; }
    .landing-copy h1 { font-size: 32px; }
    .landing-copy p { font-size: 12px; }
    .ornate-button { width: 178px; min-height: 48px; font-size: 18px; }

    #selectStep { padding-inline: 12px; }
    #selectStep .attribute-card { min-height: 66px; font-size: 14px; }
    #selectStep .attribute-group { margin-top: 13px; }
    #selectStep .attribute-group-header { margin-bottom: 8px; }
    #selectStep .primary-button { min-height: 52px; font-size: 18px; }

    #weightStep .weight-row { padding: 10px 9px !important; }
    #weightStep .weight-name { font-size: 15px; }

    #resultStep .rank-1 { min-height: 270px; padding: 18px 14px; }
    #resultStep .rank-1 .equipment-placeholder { width: 100px; height: 126px; }
    #resultStep .ranking-card:not(.rank-1) {
        grid-template-columns: 32px 58px minmax(74px,1fr);
        grid-template-areas: "rank image score" "attrs attrs attrs";
        gap: 7px;
        height: auto !important;
    }
    #resultStep .ranking-card:not(.rank-1) .mobile-name { left: 102px; }
    #resultStep .ranking-card:not(.rank-1) .ranking-attributes { margin-top: 3px; }
}

/* =========================================================
   DESIGN-SPEC RECONSTRUCTION · SEA-LILY ART LAYER
========================================================= */

.landing-mark { display: none !important; }

.landing-page {
    background:
        linear-gradient(180deg, rgba(2,8,12,.06) 0%, rgba(2,7,10,.2) 34%, rgba(2,5,7,.92) 72%),
        radial-gradient(circle at 50% 18%, #19303f 0%, #07121a 46%, #020507 80%);
}

.landing-page::before {
    inset: -3% -42% auto -42%;
    height: 62%;
    z-index: -1;
    opacity: .94;
    background: url("../assets/sea-lily-white.png") center top / cover no-repeat;
    filter: drop-shadow(0 0 12px rgba(225,240,244,.48));
    transform: rotate(-4deg);
}

.landing-page::after {
    inset: 0;
    opacity: 1;
    border: 0;
    box-shadow: inset 0 0 100px 32px #010405;
    background:
        linear-gradient(180deg, transparent 24%, rgba(2,6,9,.34) 48%, rgba(1,3,4,.92) 76%),
        radial-gradient(ellipse at 50% 88%, rgba(101,22,18,.22), transparent 31%);
}

.landing-copy {
    position: relative;
    z-index: 2;
    align-self: center;
    margin-top: 29vh;
}
.landing-copy h1 { text-shadow: 0 3px 7px #000, 0 0 22px rgba(221,235,238,.22); }
.landing-copy h2::before,
.landing-copy h2::after { content: "◇"; color: #69777b; margin: 0 10px; font-size: .55em; }
.landing-progress { position: relative; z-index: 2; }

.main-card.step-page::before {
    inset: 0;
    opacity: .075;
    background:
        url("../assets/sea-lily-white.png") 112% -4% / 62% auto no-repeat,
        url("../assets/sea-lily-white.png") -35% 102% / 58% auto no-repeat;
    filter: grayscale(1) contrast(1.15);
}

#selectStep .attribute-card {
    position: relative;
    min-height: 66px;
    border-color: rgba(193,199,196,.25);
    background:
        linear-gradient(135deg, rgba(20,27,29,.86), rgba(5,9,11,.96));
    box-shadow: inset 0 0 18px rgba(255,255,255,.012);
}
#selectStep .attribute-card::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(230,226,213,.045);
    pointer-events: none;
}
#selectStep .attribute-card.damage.selected {
    border-color: rgba(194,225,229,.82);
    box-shadow: inset 0 0 12px rgba(178,221,228,.09), 0 0 4px rgba(201,233,237,.28);
}
#selectStep .attribute-card.resistance.selected {
    border-color: rgba(126,89,126,.88);
    box-shadow: inset 0 0 12px rgba(102,66,104,.12), 0 0 3px rgba(126,86,126,.24);
}

#weightStep .weight-list {
    position: relative;
    box-shadow: inset 0 0 32px rgba(0,0,0,.42), 0 12px 30px rgba(0,0,0,.22);
}
#weightStep .weight-row { min-height: 70px; background: linear-gradient(90deg,rgba(13,20,23,.96),rgba(5,9,11,.98)) !important; }
#weightStep .weight-row::before { content: "◇"; color: #d8d5cc; margin-right: 3px; }
#weightStep .weight-name { white-space: nowrap; }
#weightStep .weight-input { min-height: 38px; border-color: rgba(210,205,194,.32); border-radius: 2px; background: rgba(3,7,9,.82); }

.result-brand {
    position: relative;
    z-index: 2;
    margin: -10px 0 12px;
    color: #e4e0d8;
    text-align: center;
    font: 18px/1.2 Arial, sans-serif;
    letter-spacing: .03em;
}
.result-brand span { color: #d04954; }
#resultStep .ranking-card { overflow: visible; }
#resultStep .equipment-placeholder { background: linear-gradient(145deg,#050708,#000); }
#resultStep .equipment-placeholder span {
    width: 58%;
    height: 72%;
    border: 0;
    background: #010101;
    clip-path: polygon(50% 0, 75% 15%, 87% 45%, 70% 100%, 30% 100%, 13% 45%, 25% 15%);
    box-shadow: 0 0 20px rgba(110,110,106,.12);
}
#resultStep .rank-1 {
    margin: 10px 5px 22px;
    padding: 28px;
    border-color: rgba(226,225,218,.44);
    background: radial-gradient(circle at 68% 34%,rgba(24,39,43,.5),transparent 45%),#05090b;
}
#resultStep .rank-1::before {
    content: "";
    position: absolute;
    inset: -16px;
    z-index: 0;
    border: 0;
    opacity: .64;
    border-radius: 0;
    background: url("../assets/sea-lily-white.png") center / 100% 100% no-repeat;
    filter: drop-shadow(0 0 5px rgba(226,238,239,.55));
    pointer-events: none;
}
#resultStep .rank-1 > * { position: relative; z-index: 1; }
#resultStep .rank-1 .mobile-rank { letter-spacing: .06em; }
#resultStep .ranking-attributes { align-items: start; }
#resultStep .ranking-attribute { min-width: 0; }
#resultStep .ranking-attribute span,
#resultStep .ranking-attribute strong { white-space: normal; overflow: visible; text-overflow: clip; }

@media (max-width: 600px) {
    .landing-page::before { inset: 0 -50% auto -50%; height: 55%; background-size: cover; }
    .landing-copy { margin-top: 24vh; }
    .landing-copy .hero-small { opacity: .78; }
    .landing-copy h1 { font-size: 33px; }

    .main-card.step-page { padding-top: 64px; }
    .step-heading { margin-bottom: 22px; }
    #selectStep .attribute-group { margin-top: 20px; }
    #selectStep .attribute-group-title { font-size: 18px; }
    #selectStep .selection-footer { margin-top: 24px; }

    #weightStep .weight-list { margin-top: 6px; }
    #weightStep .weight-row { min-height: 64px; }
    #weightStep .weight-row::before { display: none; }

    #resultStep .result-brand { margin-top: 0; }
    #resultStep .ranking-card {
        height: auto !important;
        min-height: 0;
        overflow: visible;
    }
    #resultStep .rank-1 {
        grid-template-columns: 112px minmax(0,1fr);
        grid-template-areas: "rank rank" "image score" "attrs attrs";
        gap: 13px 16px;
        min-height: 330px;
        padding: 24px 18px 20px;
    }
    #resultStep .rank-1 .ranking-card-top { min-height: 35px; }
    #resultStep .rank-1 .mobile-name {
        left: 112px;
        top: 28px;
        max-width: calc(100% - 130px);
        white-space: normal;
        overflow: visible;
    }
    #resultStep .rank-1 .equipment-placeholder { width: 108px; height: 140px; }
    #resultStep .rank-1 .mobile-score { align-self: center; padding: 0; }
    #resultStep .rank-1 .mobile-score span { display: block; white-space: nowrap; }
    #resultStep .rank-1 .mobile-score strong { margin-top: 6px; font-size: 29px; }
    #resultStep .rank-1 .ranking-attributes,
    #resultStep .ranking-attributes {
        grid-template-columns: repeat(2,minmax(0,1fr));
        width: 100%;
    }
    #resultStep .ranking-attribute { padding: 5px 2px; }
    #resultStep .ranking-attribute span { font-size: 13px; }
    #resultStep .ranking-attribute strong { font-size: 14px; }
    #resultStep .mobile-name { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* =========================================================
   V1.1 —— STEP 02 设置相对权重
   仅修改视觉，不修改任何逻辑
========================================================= */


/* =========================================================
   STEP 02 整体
========================================================= */

#weightStep {
    position: relative;

    color: #ece8df;

    background:
        radial-gradient(
            circle at 88% 7%,
            rgba(104, 181, 198, 0.07),
            transparent 24%
        ),
        radial-gradient(
            circle at 8% 93%,
            rgba(137, 29, 25, 0.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #0d1115 0%,
            #0a0d10 55%,
            #080a0d 100%
        );

    border:
        1px solid
        rgba(236, 231, 219, 0.09);

    box-shadow:
        0 22px 70px
        rgba(0, 0, 0, 0.34);

    overflow: hidden;
}


#weightStep::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.18;

    background:
        repeating-linear-gradient(
            128deg,
            transparent 0,
            transparent 34px,
            rgba(255,255,255,0.012) 35px,
            transparent 36px
        );
}


#weightStep > * {
    position: relative;
    z-index: 1;
}



/* =========================================================
   返回按钮
========================================================= */

#weightStep .back-button {
    color: #949897;

    background: transparent;

    border: none;
}


#weightStep .back-button:hover {
    color: #eee9df;
}



/* =========================================================
   02 标题
========================================================= */

#weightStep .step-number {
    color: #eee9df;

    background:
        linear-gradient(
            145deg,
            #22292e,
            #11161a
        );

    border:
        1px solid
        rgba(232, 225, 210, 0.24);

    box-shadow:
        inset 0 0 18px
        rgba(255,255,255,0.035);
}


#weightStep .step-heading h3 {
    color: #f0ece3;

    letter-spacing: 0.035em;
}


#weightStep .step-heading p {
    color: #7d8285;
}



/* =========================================================
   当前选择属性标签区
========================================================= */

#weightStep .selected-summary,
#weightStep .current-selection,
#weightStep .selected-attributes {
    color: #999c9d;

    background:
        rgba(255,255,255,0.025);

    border:
        1px solid
        rgba(255,255,255,0.055);

    box-shadow:
        inset 0 0 18px
        rgba(0,0,0,0.18);
}


/* 当前选择文字 */

#weightStep .selected-summary-title,
#weightStep .current-selection-title {
    color: #83888b;
}



/* =========================================================
   当前属性 Chip
========================================================= */

#weightStep .selected-chip,
#weightStep .weight-chip,
#weightStep .attribute-chip {
    color: #c9c6bd;

    background:
        rgba(255,255,255,0.045);

    border:
        1px solid
        rgba(255,255,255,0.06);

    border-radius: 999px;
}


/* 减伤率 */

#weightStep .selected-chip.damage,
#weightStep .weight-chip.damage,
#weightStep .attribute-chip.damage {
    color: #91d5de;

    background:
        rgba(73, 160, 178, 0.10);

    border-color:
        rgba(103, 197, 214, 0.18);
}


/* 抵抗力 */

#weightStep .selected-chip.resistance,
#weightStep .weight-chip.resistance,
#weightStep .attribute-chip.resistance {
    color: #d297c3;

    background:
        rgba(135, 63, 116, 0.10);

    border-color:
        rgba(190, 103, 165, 0.16);
}



/* =========================================================
   单个权重卡片
========================================================= */

#weightStep .weight-card,
#weightStep .weight-item,
#weightStep .weight-row {
    color: #e4dfd6;

    background:
        linear-gradient(
            145deg,
            rgba(22,27,31,0.97),
            rgba(13,17,20,0.99)
        );

    border:
        1px solid
        rgba(220,213,200,0.09);

    box-shadow:
        inset 0 0 14px
        rgba(255,255,255,0.012);

    border-radius: 14px;
}



/* =========================================================
   属性名称
========================================================= */

#weightStep .weight-name,
#weightStep .attribute-name,
#weightStep .weight-label {
    color: #e9e4da;

    font-weight: 650;
}



/* =========================================================
   “权重”文字
========================================================= */

#weightStep .weight-text,
#weightStep .weight-caption {
    color: #7e8487;
}



/* =========================================================
   数值输入框
========================================================= */

#weightStep input[type="number"],
#weightStep .weight-input {
    color: #f0ebe2;

    background:
        #0e1316;

    border:
        1px solid
        rgba(221,214,200,0.13);

    box-shadow:
        inset 0 0 10px
        rgba(0,0,0,0.22);

    border-radius: 10px;

    font-variant-numeric:
        tabular-nums;
}


#weightStep input[type="number"]:focus,
#weightStep .weight-input:focus {
    outline: none;

    border-color:
        rgba(119, 196, 207, 0.62);

    box-shadow:
        0 0 0 2px
        rgba(88, 185, 200, 0.08),
        inset 0 0 10px
        rgba(0,0,0,0.22);
}



/* =========================================================
   + / - 按钮
========================================================= */

#weightStep .minus-button,
#weightStep .plus-button,
#weightStep .weight-minus,
#weightStep .weight-plus {
    color: #aeb2b2;

    background:
        linear-gradient(
            145deg,
            #161c20,
            #0d1215
        );

    border:
        1px solid
        rgba(222,215,202,0.12);

    box-shadow:
        inset 0 0 12px
        rgba(255,255,255,0.018);

    transition:
        border-color .15s ease,
        color .15s ease,
        background .15s ease;
}


#weightStep .minus-button:hover,
#weightStep .plus-button:hover,
#weightStep .weight-minus:hover,
#weightStep .weight-plus:hover {
    color: #f0ebe2;

    border-color:
        rgba(177, 58, 49, 0.55);

    background:
        linear-gradient(
            145deg,
            #241719,
            #151013
        );
}



/* =========================================================
   Slider 基础
========================================================= */

#weightStep input[type="range"] {
    appearance: none;
    -webkit-appearance: none;

    height: 4px;

    border-radius: 999px;

    outline: none;
}


/* WebKit 轨道 */

#weightStep input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;

    border-radius: 999px;

    background: transparent;
}


/* WebKit 滑块 */

#weightStep input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;

    width: 15px;
    height: 15px;

    margin-top: -5.5px;

    border-radius: 50%;

    background: #ece8df;

    border:
        3px solid
        #8b2b27;

    box-shadow:
        0 0 8px
        rgba(164, 46, 41, 0.26);

    cursor: pointer;
}


/* Firefox 轨道 */

#weightStep input[type="range"]::-moz-range-track {
    height: 4px;

    border-radius: 999px;

    background: #30363a;
}


/* Firefox 已填充 */

#weightStep input[type="range"]::-moz-range-progress {
    height: 4px;

    border-radius: 999px;

    background: #8b2b27;
}


/* Firefox 滑块 */

#weightStep input[type="range"]::-moz-range-thumb {
    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: #ece8df;

    border:
        3px solid
        #8b2b27;

    box-shadow:
        0 0 8px
        rgba(164, 46, 41, 0.26);
}



/* =========================================================
   权重说明文字
========================================================= */

#weightStep .weight-help,
#weightStep .weight-tip,
#weightStep .weight-description {
    color: #777d80;

    background:
        rgba(255,255,255,0.025);

    border:
        1px solid
        rgba(255,255,255,0.04);
}



/* =========================================================
   STEP 02 主按钮
========================================================= */

#weightStep .primary-button,
#weightStep .start-button {
    color: #f0e8da;

    background:
        linear-gradient(
            180deg,
            #731e1a 0%,
            #4a1514 55%,
            #351112 100%
        );

    border:
        1px solid
        rgba(180, 59, 49, 0.70);

    box-shadow:
        0 0 18px
        rgba(145, 31, 27, 0.16),
        inset 0 0 16px
        rgba(210, 68, 55, 0.06);

    text-shadow:
        0 1px 2px
        rgba(0,0,0,0.42);

    transition:
        background .16s ease,
        box-shadow .16s ease,
        transform .12s ease;
}


#weightStep .primary-button:hover,
#weightStep .start-button:hover {
    background:
        linear-gradient(
            180deg,
            #85251f,
            #561816
        );

    box-shadow:
        0 0 22px
        rgba(167, 37, 30, 0.23);
}


#weightStep .primary-button:active,
#weightStep .start-button:active {
    transform:
        translateY(1px);
}



/* =========================================================
   手机端
========================================================= */

@media (max-width: 600px) {

    #weightStep {
        padding:
            20px
            14px
            28px;

        border-radius:
            18px;
    }


    /*
       手机继续单列显示权重卡片
       不改变现有结构
    */

    #weightStep .weight-list,
    #weightStep .weights-list,
    #weightStep .weight-container {
        display: flex;

        flex-direction:
            column;

        gap:
            10px;
    }


    #weightStep .weight-card,
    #weightStep .weight-item,
    #weightStep .weight-row {
        min-width: 0;

        padding:
            15px
            13px;
    }


    #weightStep input[type="number"],
    #weightStep .weight-input {
        min-width: 0;
    }

}

/* =========================================================
   V1.1 STEP 02：加减按钮最终样式
========================================================= */

#weightStep .weight-card button:not(.primary-button),
#weightStep .weight-item button:not(.primary-button),
#weightStep .weight-row button:not(.primary-button) {
    color: #d8d5cd !important;

    background:
        linear-gradient(
            145deg,
            #171d21,
            #0d1215
        ) !important;

    border:
        1px solid
        rgba(226, 220, 208, 0.16) !important;

    box-shadow:
        inset 0 0 10px
        rgba(255,255,255,0.02),
        0 3px 10px
        rgba(0,0,0,0.18) !important;
}


#weightStep .weight-card button:not(.primary-button):active,
#weightStep .weight-item button:not(.primary-button):active,
#weightStep .weight-row button:not(.primary-button):active {
    color: #ffffff !important;

    border-color:
        rgba(172, 56, 48, 0.65) !important;

    background:
        #251416 !important;
}

/* Final narrow-screen overflow guards */
.landing-copy,
.landing-progress {
    min-width: 0;
    width: 100%;
}

@media (max-width: 600px) {
    .landing-copy h1 {
        font-size: 31px;
        letter-spacing: .03em;
        white-space: nowrap;
    }

    .landing-copy p {
        font-size: 14px;
        letter-spacing: .06em;
        white-space: normal;
    }
}

/* Final weight-row composition: name | dynamic slider | numeric value */
#weightStep .weight-row {
    display: grid !important;
    grid-template-columns: minmax(72px, 100px) minmax(120px, 1fr) 66px !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 15px 14px !important;
}
#weightStep .weight-row-top { display: contents !important; }
#weightStep .weight-name { grid-column: 1; grid-row: 1; }
#weightStep .weight-control { grid-column: 2; grid-row: 1; display: block !important; min-width: 0; }
#weightStep .weight-input-area { grid-column: 3; grid-row: 1; }
#weightStep .weight-label,
#weightStep .step-button { display: none !important; }
#weightStep .weight-slider { width: 100% !important; }
#weightStep .weight-input { width: 100% !important; text-align: center; }

@media (max-width: 420px) {
    #weightStep .weight-row {
        grid-template-columns: 68px minmax(105px, 1fr) 58px !important;
        gap: 9px !important;
        padding: 14px 10px !important;
    }
    #weightStep .weight-name { font-size: 17px; }
}

/* =========================================================
   STEP 01 FINAL VISUAL LAYER
   Keep at EOF: this replaces the former cascade-lock blocks.
========================================================= */

#selectStep {
    background:
        radial-gradient(ellipse at 83% 10%, rgba(92,145,157,.055), transparent 27%),
        radial-gradient(ellipse at 11% 83%, rgba(76,54,80,.045), transparent 30%),
        repeating-linear-gradient(116deg, transparent 0 42px, rgba(209,225,225,.009) 43px, transparent 44px),
        linear-gradient(180deg, #091014 0%, #070c0f 58%, #07090c 100%);
    overflow-x: hidden;
}

#selectStep::before {
    opacity: .34;
    background:
        radial-gradient(ellipse at 18% 25%, transparent 0 20%, rgba(112,139,144,.025) 38%, transparent 60%),
        radial-gradient(ellipse at 82% 74%, transparent 0 18%, rgba(91,72,97,.025) 40%, transparent 62%),
        url("../assets/sea-lily-white.png") 113% 102% / 46% auto no-repeat;
    filter: saturate(.3) contrast(.85);
}

#selectStep .screen-back {
    top: 22px;
    left: 20px;
    z-index: 5;
    width: 34px;
    height: 34px;
    padding: 0;
    color: rgba(224,224,215,.72);
    border: 0;
    background: transparent;
    font-size: 27px;
    font-weight: 300;
    line-height: 1;
}

#selectStep .step-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    margin: 0 0 18px;
    padding: 0 38px;
    text-align: center;
}

#selectStep .step-heading .step-number {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid rgba(220,219,207,.34);
    border-radius: 50%;
    color: #e8e5da;
    background: radial-gradient(circle, rgba(37,47,51,.8), rgba(8,13,16,.35) 70%);
    box-shadow: inset 0 0 12px rgba(230,239,236,.035), 0 0 0 3px rgba(189,199,194,.025);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    letter-spacing: 0;
}

#selectStep .step-heading .step-number::before,
#selectStep .step-heading .step-number::after {
    content: "◆";
    position: absolute;
    top: 50%;
    color: rgba(205,205,192,.25);
    font-size: 7px;
    transform: translateY(-50%);
}

#selectStep .step-heading .step-number::before { right: calc(100% + 4px); }
#selectStep .step-heading .step-number::after { left: calc(100% + 4px); }

#selectStep .step-heading > div:last-child { min-width: 0; }

#selectStep .step-heading h3 {
    margin: 0;
    color: #eee9de;
    font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .09em;
    text-shadow: 0 1px 4px rgba(0,0,0,.7);
}

#selectStep .step-heading p {
    margin: 2px 0 0;
    color: rgba(159,166,164,.58);
    font-size: 11px;
    letter-spacing: .06em;
}

#selectStep .attribute-group { margin-top: 14px; }

#selectStep .group-header {
    display: grid;
    grid-template-columns: auto minmax(20px, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    border: 0;
}

#selectStep .group-header::after {
    content: "";
    grid-column: 2;
    grid-row: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(192,198,194,.24), rgba(192,198,194,.03));
}

#selectStep .group-title-area {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: max-content;
}

#selectStep .group-title {
    color: #d8d5cb;
    font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .08em;
}

#selectStep .group-dot {
    width: 5px;
    height: 5px;
    border-radius: 0;
    transform: rotate(45deg);
    box-shadow: 0 0 5px currentColor;
}

#selectStep .attribute-group.damage .group-dot { color: #78c5d0; background: currentColor; }
#selectStep .attribute-group.resistance .group-dot { color: #9b6c91; background: currentColor; }

#selectStep .group-count {
    grid-column: 3;
    color: rgba(139,146,145,.38);
    font-size: 10px;
    letter-spacing: .04em;
}

#selectStep .attribute-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

#selectStep .attribute-card {
    position: relative;
    isolation: isolate;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 66px;
    padding: 7px 3px 6px;
    border: 1px solid rgba(174,183,180,.22);
    border-radius: 3px;
    color: #c9cbc5;
    background:
        radial-gradient(circle at 50% 18%, rgba(193,208,205,.025), transparent 45%),
        linear-gradient(145deg, rgba(13,21,24,.98), rgba(5,10,12,.99));
    box-shadow: inset 0 0 0 2px rgba(3,7,9,.9), inset 0 0 0 3px rgba(203,210,205,.08), inset 0 0 16px rgba(0,0,0,.3);
    overflow: visible;
}

#selectStep .attribute-card::before {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: 0;
    border: 1px solid rgba(210,215,207,.075);
    border-radius: 1px;
    pointer-events: none;
}

#selectStep .attribute-card .attribute-icon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    color: #d1d5d1;
    opacity: .91;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.12)) drop-shadow(0 0 3px rgba(218,229,226,.15));
}

#selectStep .attribute-card .attribute-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    overflow: visible;
    stroke-width: 1.95;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

#selectStep .attribute-card .attribute-label {
    position: relative;
    z-index: 2;
    line-height: 1;
    color: inherit;
    font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .05em;
}

#selectStep .attribute-card .check-box {
    position: absolute !important;
    display: grid !important;
    place-items: center;
    z-index: 4;
    top: 4px !important;
    right: 4px !important;
    width: 13px !important;
    height: 13px !important;
    margin: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 50% !important;
    color: transparent;
    border-color: transparent !important;
    background: rgba(3,7,9,.72) !important;
    box-shadow: none;
    opacity: 0;
    font-size: 0 !important;
    pointer-events: none;
}

#selectStep .attribute-card .check-box::before {
    content: none !important;
}

#selectStep .attribute-card.selected .check-box {
    opacity: .72;
    border-color: rgba(242,243,237,.42) !important;
}

#selectStep .attribute-card:not(.selected) .check-box {
    opacity: 0 !important;
    border-color: transparent !important;
}

#selectStep .attribute-card.selected .check-box::after {
    content: "✓";
    color: #eeeee7;
    font-size: 7px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 3px currentColor;
}

#selectStep .attribute-card.damage.selected {
    color: #edf8f7;
    border-color: rgba(239,251,251,.9) !important;
    background: radial-gradient(circle at 50% 35%, rgba(146,215,224,.12), transparent 58%), linear-gradient(145deg,rgba(16,31,35,.99),rgba(4,10,12,.99));
    box-shadow:
        inset 0 0 0 2px rgba(3,8,10,.78),
        inset 0 0 0 3px rgba(233,250,250,.18),
        inset 0 0 17px rgba(130,209,219,.18),
        0 0 0 1px rgba(247,255,255,.22),
        0 0 8px rgba(191,236,241,.44) !important;
}

#selectStep .attribute-card.damage.selected .attribute-icon {
    color: #edfafa;
    filter:
        drop-shadow(0 0 2px rgba(239,252,252,.52))
        drop-shadow(0 0 6px rgba(125,203,215,.34));
    transform: translateY(-1px) scale(1.04);
}

#selectStep .attribute-card.resistance.selected {
    color: #e7d9e5;
    border-color: rgba(235,224,234,.88) !important;
    background: radial-gradient(circle at 50% 35%, rgba(149,95,145,.13), transparent 58%), linear-gradient(145deg,rgba(28,18,30,.99),rgba(8,6,11,.99));
    box-shadow:
        inset 0 0 0 2px rgba(7,4,9,.78),
        inset 0 0 0 3px rgba(229,208,227,.14),
        inset 0 0 17px rgba(126,76,124,.21),
        0 0 0 1px rgba(242,231,241,.2),
        0 0 8px rgba(157,105,154,.43) !important;
}

#selectStep .attribute-card.resistance.selected .attribute-icon {
    color: #e2cde0;
    filter:
        drop-shadow(0 0 2px rgba(237,217,235,.42))
        drop-shadow(0 0 6px rgba(139,87,137,.36));
    transform: translateY(-1px) scale(1.04);
}

#selectStep .selection-footer {
    margin-top: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#selectStep .selection-info,
#selectStep .selection-tools { display: none !important; }

#selectStep .primary-button {
    position: relative;
    width: min(100%, 310px);
    min-height: 50px;
    margin-inline: auto;
    border: 1px solid rgba(153,75,62,.78);
    border-radius: 3px;
    color: #e5d6c8;
    background:
        linear-gradient(90deg, rgba(255,255,255,.025), transparent 24% 76%, rgba(255,255,255,.02)),
        linear-gradient(180deg, #651a17 0%, #441110 57%, #2f0c0d 100%);
    box-shadow: inset 0 0 0 2px rgba(31,6,7,.85), inset 0 0 0 3px rgba(187,97,76,.22), inset 0 0 18px rgba(203,48,39,.08), 0 0 14px rgba(107,23,20,.16);
    font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .12em;
    text-shadow: 0 1px 2px rgba(0,0,0,.75);
}

#selectStep .primary-button:not(:disabled):hover {
    background: linear-gradient(180deg, #74201b, #4d1412 58%, #350e0e);
    box-shadow: inset 0 0 0 2px rgba(31,6,7,.85), inset 0 0 0 3px rgba(205,111,87,.28), 0 0 16px rgba(135,31,26,.2);
}

#selectStep .primary-button:disabled {
    opacity: .48;
    filter: saturate(.62);
}

@media (max-width: 420px) {
    #selectStep {
        padding: 18px 12px 28px;
        border-radius: 0;
    }

    #selectStep .screen-back { top: 17px; left: 12px; }

    #selectStep .step-heading {
        gap: 5px;
        margin-bottom: 13px;
        padding-inline: 32px;
    }

    #selectStep .step-heading .step-number {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 16px;
    }

    #selectStep .step-heading h3 { font-size: 22px; }
    #selectStep .step-heading p { font-size: 10px; }
    #selectStep .attribute-group { margin-top: 12px; }
    #selectStep .group-header { margin-bottom: 8px; }

    #selectStep .attribute-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    #selectStep .attribute-card {
        min-width: 0;
        min-height: 66px;
        padding: 6px 2px 5px;
    }

    #selectStep .selection-footer { margin-top: 16px; }
    #selectStep .primary-button { min-height: 48px; font-size: 17px; }
}

/* STEP 02 attribute icons: reuse STEP 01 SVGs without competing with controls. */
#weightStep .weight-row::before,
#weightStep .weight-name::before {
    content: none !important;
    display: none !important;
}

#weightStep .weight-name {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

#weightStep .weight-attribute-icon {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: rgba(214, 220, 217, .78);
    filter: drop-shadow(0 0 2px rgba(211, 224, 221, .10));
}

#weightStep .weight-attribute-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

#weightStep .weight-row.damage .weight-attribute-icon {
    color: rgba(190, 224, 226, .80);
}

#weightStep .weight-row.resistance .weight-attribute-icon {
    color: rgba(205, 184, 204, .76);
}



/* =========================================================
   V1.1 —— 装备详情功能
   新增唯一选择器，避免继续覆盖旧版结果卡规则
========================================================= */

/* STEP 03：真实装备缩略图 */
#resultStep .equipment-thumb-button {
    grid-area: image;
    align-self: center;
    width: 52px;
    height: 64px;
    min-width: 0;
    padding: 0;
    border: 1px solid rgba(220, 214, 201, .20);
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    color: #8f8c84;
    background: linear-gradient(145deg, #080b0c, #020304);
    box-shadow: inset 0 0 14px rgba(255,255,255,.018);
}

#resultStep .equipment-thumb-button:hover {
    border-color: rgba(229, 221, 204, .42);
}

#resultStep .equipment-thumb-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#resultStep .equipment-thumb-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 4px;
    color: #6f716e;
    font-size: 9px;
    line-height: 1.35;
    text-align: center;
}

#resultStep .equipment-thumb-fallback[hidden] {
    display: none !important;
}

/* 手机结果卡：低优先级详情入口 */
#resultStep .equipment-detail-link {
    grid-column: 1 / -1;
    justify-self: end;
    padding: 5px 1px 1px;
    border: 0;
    cursor: pointer;
    color: #858681;
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: .04em;
}

#resultStep .equipment-detail-link:hover {
    color: #ddd7cb;
}

#resultStep .equipment-detail-link span {
    margin-left: 3px;
    color: #a88163;
}

/* PC 表格：装备名称即详情入口 */
#resultStep .equipment-name-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    cursor: pointer;
    color: inherit;
    background: transparent;
    font: inherit;
}

#resultStep .equipment-name-button:hover {
    color: #f1eadc;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#resultStep .equipment-name-button span {
    color: #9d765d;
}


/* =========================================================
   V1.1 · 装备详情页最终目标版
   目标：手机 360×800 长页 + 桌面端宽幅弹层
========================================================= */

.equipment-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 26px 22px 34px;
    color: #e8e0d3;
    background:
        radial-gradient(circle at 14% 16%, rgba(42, 68, 72, .17), transparent 28%),
        radial-gradient(circle at 86% 78%, rgba(94, 35, 28, .10), transparent 32%),
        rgba(2, 6, 8, .93);
    backdrop-filter: blur(10px);
}

.equipment-detail-panel {
    position: relative;
    isolation: isolate;
    width: min(100%, 1160px);
    margin: 0 auto;
    padding: 24px 28px 30px;
    overflow: hidden;
    border: 1px solid rgba(201, 172, 123, .48);
    border-radius: 5px;
    background:
        linear-gradient(rgba(5, 9, 11, .92), rgba(5, 8, 10, .96)),
        radial-gradient(circle at 18% 14%, rgba(74, 101, 103, .12), transparent 30%),
        #05090b;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.018),
        inset 0 0 55px rgba(0,0,0,.62),
        0 24px 72px rgba(0,0,0,.62);
}

.equipment-detail-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .055;
    background:
        url("../assets/sea-lily-white.png") 109% -9% / 41% auto no-repeat,
        url("../assets/sea-lily-white.png") -18% 110% / 35% auto no-repeat;
    filter: grayscale(1) sepia(.18);
}

.equipment-detail-panel::after {
    content: "装\A备\A详\A情";
    position: absolute;
    z-index: -1;
    left: 22px;
    top: 86px;
    white-space: pre;
    pointer-events: none;
    color: rgba(214, 200, 176, .038);
    font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
    font-size: 68px;
    line-height: .92;
    letter-spacing: -.08em;
    transform: rotate(-4deg);
}

.equipment-detail-panel > * {
    position: relative;
    z-index: 1;
}

.equipment-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    margin-bottom: 8px;
}

.equipment-detail-back,
.equipment-detail-close {
    border: 0;
    cursor: pointer;
    color: #c3b9a8;
    background: transparent;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    transition:
        color .16s ease,
        transform .16s ease;
}

.equipment-detail-back {
    padding: 7px 2px;
    font-size: 13px;
    letter-spacing: .04em;
}

.equipment-detail-close {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 29px;
    font-weight: 200;
    line-height: 1;
}

.equipment-detail-back:hover,
.equipment-detail-close:hover {
    color: #f3eadc;
}

.equipment-detail-close:hover {
    transform: rotate(4deg);
}


/* ---------- 装备基本信息 ---------- */

.equipment-detail-hero {
    display: grid;
    grid-template-columns:
        minmax(310px, 46%)
        minmax(0, 1fr);
    grid-template-areas:
        "image title"
        "image note";
    column-gap: 44px;
    row-gap: 8px;
    align-items: center;
    min-height: 310px;
    padding: 10px 18px 28px;
    border-bottom: 1px solid rgba(198, 167, 116, .33);
}

.equipment-detail-title-area {
    grid-area: title;
    align-self: end;
    min-width: 0;
    padding-top: 18px;
}

.equipment-detail-slot {
    display: inline-block;
    margin-bottom: 13px;
    padding: 5px 15px 4px;
    border: 1px solid rgba(191, 152, 96, .50);
    border-radius: 2px;
    color: #d4b788;
    background: rgba(18, 17, 14, .42);
    font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .12em;
}

.equipment-detail-title-area h2 {
    margin: 0;
    color: #efe2cc;
    font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
    font-size: clamp(36px, 4.2vw, 52px);
    font-weight: 500;
    line-height: 1.16;
    letter-spacing: .08em;
    text-shadow:
        0 2px 12px rgba(0,0,0,.78),
        0 0 20px rgba(207, 171, 112, .055);
}

.equipment-detail-title-area::after {
    content: "";
    display: block;
    width: min(280px, 78%);
    height: 1px;
    margin-top: 22px;
    background:
        linear-gradient(
            90deg,
            rgba(210, 173, 113, .82),
            rgba(210, 173, 113, .16),
            transparent
        );
}

.equipment-detail-image-frame {
    grid-area: image;
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 300px;
    padding: 8px;
    overflow: hidden;
    border: 0;
    background:
        radial-gradient(circle at 50% 47%, rgba(73, 94, 96, .16), transparent 57%);
}

.equipment-detail-image-frame::after {
    content: "";
    position: absolute;
    inset: 12% 9%;
    pointer-events: none;
    border-bottom: 1px solid rgba(188, 156, 108, .19);
    background:
        radial-gradient(circle at 50% 78%, rgba(173, 137, 86, .075), transparent 42%);
}

.equipment-detail-icon {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 430px;
    max-height: 310px;
    object-fit: contain;
    filter:
        contrast(1.04)
        brightness(1.02)
        drop-shadow(0 18px 30px rgba(0,0,0,.58));
}

.equipment-detail-note {
    grid-area: note;
    align-self: start;
    max-width: 590px;
    margin: 0;
    color: #b5afa5;
    font-family: "STSong", "SimSun", "Noto Serif SC", serif;
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: .035em;
}

.equipment-detail-image-fallback {
    display: grid;
    place-items: center;
    min-height: 150px;
    padding: 18px;
    color: #797871;
    font-size: 12px;
    text-align: center;
}

.equipment-detail-image-fallback[hidden] {
    display: none !important;
}


/* ---------- 完整 15 项属性 ---------- */

.equipment-detail-attributes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    padding: 28px 18px 26px;
}

.equipment-detail-group {
    min-width: 0;
}

.equipment-detail-group-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(207, 188, 153, .20);
}

.equipment-detail-group-heading h3 {
    margin: 0;
    font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .10em;
}

.equipment-detail-group-icon {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
}

.equipment-detail-group-icon svg,
.equipment-detail-stat-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.equipment-detail-group.damage .equipment-detail-group-heading {
    color: #72d1df;
    text-shadow: 0 0 9px rgba(86, 202, 219, .16);
}

.equipment-detail-group.resistance .equipment-detail-group-heading {
    color: #c58bc0;
    text-shadow: 0 0 9px rgba(196, 116, 187, .14);
}

.equipment-detail-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

.equipment-detail-stat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 46px;
    padding: 8px 6px;
    border-bottom: 1px solid rgba(219, 205, 181, .14);
}

.equipment-detail-stat-label {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
    color: #bbb2a4;
    font-size: 14px;
}

.equipment-detail-stat-icon {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: #c8b18c;
    opacity: .92;
}

.equipment-detail-group.damage
.equipment-detail-stat:nth-child(4n + 1)
.equipment-detail-stat-icon,
.equipment-detail-group.damage
.equipment-detail-stat:nth-child(4n + 2)
.equipment-detail-stat-icon {
    color: #b8c9c8;
}

.equipment-detail-group.resistance
.equipment-detail-stat-icon {
    color: #d0b8ce;
}

.equipment-detail-stat-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.equipment-detail-stat strong {
    flex: 0 0 auto;
    color: #f2e9dc;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.equipment-detail-stat strong.negative {
    color: #ed6b62;
    text-shadow: 0 0 8px rgba(237, 107, 98, .11);
}


/* ---------- 游戏内详情截图 ---------- */

.equipment-game-detail-section {
    padding: 8px 18px 6px;
}

.equipment-detail-section-heading {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    align-items: center;
    margin: 2px 0 19px;
}

.equipment-detail-section-heading span {
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(205, 166, 104, .56)
        );
}

.equipment-detail-section-heading span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(205, 166, 104, .56),
            transparent
        );
}

.equipment-detail-section-heading h3 {
    margin: 0;
    color: #d9b671;
    font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .12em;
    text-shadow: 0 0 8px rgba(213, 172, 105, .08);
}

.equipment-game-detail-frame {
    position: relative;
    overflow: hidden;
    padding: 6px;
    border: 1px solid rgba(202, 164, 105, .46);
    background:
        linear-gradient(#060809, #030506);
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.72),
        inset 0 0 0 2px rgba(211,176,118,.035);
}

.equipment-game-detail-frame::before,
.equipment-game-detail-frame::after {
    content: "";
    position: absolute;
    z-index: 2;
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.equipment-game-detail-frame::before {
    left: 3px;
    top: 3px;
    border-left: 1px solid rgba(231,198,138,.66);
    border-top: 1px solid rgba(231,198,138,.66);
}

.equipment-game-detail-frame::after {
    right: 3px;
    bottom: 3px;
    border-right: 1px solid rgba(231,198,138,.66);
    border-bottom: 1px solid rgba(231,198,138,.66);
}

.equipment-game-detail-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.equipment-image-zoom-hint {
    margin: 10px 0 1px;
    color: #8f8778;
    font-size: 11px;
    letter-spacing: .08em;
    text-align: center;
}


/* ---------- 详情页图片交互 ---------- */

.equipment-detail-image-frame,
.equipment-game-detail-frame {
    cursor: zoom-in;
    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        filter .16s ease;
}

.equipment-detail-image-frame[role="button"]:focus-visible,
.equipment-game-detail-frame[role="button"]:focus-visible {
    outline: 1px solid rgba(221, 204, 173, .72);
    outline-offset: 3px;
}

.equipment-detail-image-frame:hover,
.equipment-game-detail-frame:hover {
    border-color: rgba(221, 204, 173, .60);
    filter: brightness(1.025);
}


/* ---------- 手机：360×800 为主适配 ---------- */

@media (max-width: 600px) {

    .equipment-detail-overlay {
        padding: 0;
        background: #030709;
        backdrop-filter: none;
    }

    .equipment-detail-panel {
        width: 100%;
        min-height: 100dvh;
        margin: 0;
        padding:
            max(8px, env(safe-area-inset-top))
            13px
            max(28px, env(safe-area-inset-bottom));
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .equipment-detail-panel::after {
        display: none;
    }

    .equipment-detail-panel::before {
        opacity: .038;
        background:
            url("../assets/sea-lily-white.png") 132% 2% / 72% auto no-repeat,
            url("../assets/sea-lily-white.png") -55% 108% / 62% auto no-repeat;
    }

    .equipment-detail-header {
        position: sticky;
        top: 0;
        z-index: 10;
        min-height: 42px;
        margin: 0 -4px 4px;
        padding: 4px 4px;
        background:
            linear-gradient(
                180deg,
                rgba(4,8,10,.99) 0%,
                rgba(4,8,10,.92) 72%,
                rgba(4,8,10,0) 100%
            );
        backdrop-filter: blur(8px);
    }

    .equipment-detail-back {
        font-size: 12px;
    }

    .equipment-detail-close {
        width: 34px;
        height: 34px;
        font-size: 27px;
    }

    .equipment-detail-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "image"
            "note";
        gap: 10px;
        min-height: 0;
        padding: 4px 8px 22px;
        text-align: center;
    }

    .equipment-detail-title-area {
        align-self: auto;
        padding-top: 2px;
    }

    .equipment-detail-slot {
        margin-bottom: 8px;
        padding: 4px 10px 3px;
        font-size: 10px;
    }

    .equipment-detail-title-area h2 {
        font-size: clamp(28px, 9vw, 34px);
        line-height: 1.18;
    }

    .equipment-detail-title-area::after {
        width: 72px;
        margin: 12px auto 0;
        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(210, 173, 113, .72),
                transparent
            );
    }

    .equipment-detail-image-frame {
        width: min(100%, 286px);
        min-height: 216px;
        margin: 0 auto;
        padding: 0;
    }

    .equipment-detail-image-frame::after {
        inset: 17% 8% 7%;
    }

    .equipment-detail-icon {
        max-width: 286px;
        max-height: 232px;
    }

    .equipment-detail-note {
        max-width: 300px;
        margin: 0 auto;
        color: #aaa399;
        font-size: 11px;
        line-height: 1.75;
        text-align: center;
    }

    .equipment-detail-attributes {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 21px 7px 18px;
    }

    .equipment-detail-group-heading {
        margin-bottom: 7px;
        padding-bottom: 8px;
    }

    .equipment-detail-group-heading h3 {
        font-size: 19px;
    }

    .equipment-detail-group-icon {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
    }

    .equipment-detail-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 10px;
    }

    .equipment-detail-stat {
        min-height: 39px;
        padding: 6px 2px;
        gap: 5px;
    }

    .equipment-detail-stat-label {
        gap: 5px;
        font-size: 11px;
    }

    .equipment-detail-stat-icon {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
    }

    .equipment-detail-stat strong {
        font-size: 13px;
    }

    .equipment-game-detail-section {
        padding: 4px 6px 0;
    }

    .equipment-detail-section-heading {
        gap: 9px;
        margin: 2px 0 12px;
    }

    .equipment-detail-section-heading h3 {
        font-size: 16px;
        letter-spacing: .10em;
    }

    .equipment-game-detail-frame {
        padding: 4px;
    }

    .equipment-image-zoom-hint {
        margin-top: 7px;
        font-size: 10px;
    }

    #resultStep .equipment-thumb-button {
        width: 52px;
        height: 64px;
    }
}


/* ---------- 更窄手机：保证两列属性不挤坏 ---------- */

@media (max-width: 360px) {

    .equipment-detail-panel {
        padding-left: 10px;
        padding-right: 10px;
    }

    .equipment-detail-attributes {
        padding-left: 4px;
        padding-right: 4px;
    }

    .equipment-detail-stat-grid {
        column-gap: 7px;
    }

    .equipment-detail-stat-label {
        font-size: 10.5px;
    }

    .equipment-detail-stat-icon {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }

    .equipment-detail-stat strong {
        font-size: 12.5px;
    }
}


/* ---------- 桌面大屏：接近目标稿 1200×800 弹层 ---------- */

@media (min-width: 900px) {

    .equipment-detail-overlay {
        display: grid;
        align-items: start;
        justify-items: center;
    }

    .equipment-detail-panel {
        min-height: min(800px, calc(100dvh - 52px));
    }

    .equipment-game-detail-frame {
        max-width: 100%;
        margin: 0 auto;
    }
}




/* =========================================================
   V1.1 · 统一图片放大查看器
   STEP 03 缩略图 / 详情页装备图 / 游戏详情截图
========================================================= */

#resultStep .equipment-thumb-button,
.equipment-detail-image-frame,
.equipment-game-detail-frame {
    cursor: zoom-in;
}

.equipment-detail-image-frame[role="button"]:focus-visible,
.equipment-game-detail-frame[role="button"]:focus-visible {
    outline: 1px solid rgba(221, 204, 173, .72);
    outline-offset: 3px;
}

.equipment-detail-image-frame,
.equipment-game-detail-frame {
    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        filter .16s ease;
}

.equipment-detail-image-frame:hover,
.equipment-game-detail-frame:hover {
    border-color: rgba(221, 204, 173, .42);
    box-shadow:
        inset 0 0 18px rgba(255,255,255,.018),
        0 0 12px rgba(193,157,105,.08);
}

.equipment-image-zoom-hint {
    margin: 8px 0 0;
    color: #75766f;
    font-size: 11px;
    letter-spacing: .08em;
    text-align: center;
}

.image-viewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 2200;

    display: grid;
    place-items: center;

    padding: 18px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(30, 38, 40, .28),
            transparent 58%
        ),
        rgba(0, 2, 3, .96);

    backdrop-filter: blur(10px);
}

.image-viewer-stage {
    position: relative;

    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    justify-items: center;

    width: min(100%, 1280px);
    height: min(
        calc(100dvh - 36px),
        980px
    );

    min-height: 0;
}

.image-viewer-image {
    display: block;

    max-width: 100%;
    max-height: calc(100dvh - 92px);

    width: auto;
    height: auto;

    object-fit: contain;

    user-select: none;

    filter:
        drop-shadow(
            0 18px 50px
            rgba(0,0,0,.62)
        );
}

.image-viewer-close {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));

    z-index: 2;

    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    padding: 0;

    border:
        1px solid
        rgba(226, 220, 208, .30);

    border-radius: 50%;

    cursor: pointer;

    color: #eee7da;

    background:
        rgba(7, 10, 11, .72);

    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;

    backdrop-filter: blur(8px);
}

.image-viewer-close:hover {
    border-color:
        rgba(226, 220, 208, .62);

    background:
        rgba(20, 23, 24, .86);
}

.image-viewer-caption {
    min-height: 22px;

    margin-top: 8px;

    color: #aaa69d;

    font-size: 12px;
    letter-spacing: .08em;
    text-align: center;
}

.image-viewer-fallback {
    display: grid;
    place-items: center;

    width: min(90vw, 560px);
    min-height: 220px;

    border:
        1px solid
        rgba(220, 214, 201, .18);

    color: #8b8b84;

    background:
        #050708;

    font-size: 13px;
}

.image-viewer-fallback[hidden] {
    display: none !important;
}

@media (max-width: 600px) {

    .image-viewer-overlay {
        padding:
            max(8px, env(safe-area-inset-top))
            8px
            max(8px, env(safe-area-inset-bottom));
    }

    .image-viewer-stage {
        width: 100%;
        height: 100%;
    }

    .image-viewer-image {
        max-width: 100%;
        max-height:
            calc(
                100dvh
                - 72px
                - env(safe-area-inset-top)
                - env(safe-area-inset-bottom)
            );
    }

    .image-viewer-close {
        width: 40px;
        height: 40px;
        font-size: 27px;
    }

    .image-viewer-caption {
        padding: 0 44px;
        font-size: 11px;
    }

    .equipment-image-zoom-hint {
        margin-top: 7px;
        font-size: 10px;
    }
}



/* =========================================================
   V1.1 · 装备详情页封版前最后小修
   只收紧首屏与装备展示，不改数据/交互
========================================================= */

/* 装备图四周融入暗背景，弱化“方形截图”感 */
.equipment-detail-icon {
    -webkit-mask-image:
        radial-gradient(
            ellipse 84% 80% at 50% 46%,
            #000 56%,
            rgba(0,0,0,.96) 69%,
            rgba(0,0,0,.42) 84%,
            transparent 100%
        );
    mask-image:
        radial-gradient(
            ellipse 84% 80% at 50% 46%,
            #000 56%,
            rgba(0,0,0,.96) 69%,
            rgba(0,0,0,.42) 84%,
            transparent 100%
        );
}

/* 中性说明进一步弱化，避免像网页提示语 */
.equipment-detail-note {
    color: #918b81;
    letter-spacing: .055em;
}

@media (max-width: 600px) {

    /* 手机首屏收紧：更早进入属性区 */
    .equipment-detail-hero {
        gap: 5px;
        padding:
            2px
            8px
            15px;
    }

    .equipment-detail-title-area {
        padding-top: 0;
    }

    .equipment-detail-slot {
        margin-bottom: 6px;
    }

    .equipment-detail-title-area::after {
        margin-top: 8px;
    }

    /* 容器缩短约 17%，但通过裁切/轻放大维持装备主体存在感 */
    .equipment-detail-image-frame {
        width: min(100%, 274px);
        min-height: 178px;
        height: 188px;
        margin-top: -2px;
    }

    .equipment-detail-image-frame::after {
        inset: 15% 7% 4%;
    }

    .equipment-detail-icon {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
        object-position: 50% 43%;
        transform: scale(1.055);
    }

    .equipment-detail-note {
        max-width: 280px;
        margin-top: 2px;
        font-size: 10px;
        line-height: 1.55;
        opacity: .82;
    }

    .equipment-detail-attributes {
        padding-top: 17px;
    }
}

@media (min-width: 900px) {
    /* 桌面端进一步弱化原图边缘，让装备像悬浮在展示区 */
    .equipment-detail-image-frame {
        background:
            radial-gradient(circle at 50% 46%, rgba(73,94,96,.18), transparent 49%),
            radial-gradient(circle at 50% 74%, rgba(173,137,86,.065), transparent 39%);
    }

    .equipment-detail-icon {
        filter:
            contrast(1.045)
            brightness(1.025)
            drop-shadow(0 20px 34px rgba(0,0,0,.62));
    }
}


/* =========================================================
   V1.1 · 属性图标最终实图版
   直接显示用户确认的图标设计稿素材
========================================================= */

/* ---------- 共用图片规则 ---------- */

#selectStep .attribute-icon .attribute-icon-image,
#weightStep .weight-attribute-icon .attribute-icon-image,
.equipment-detail-group-icon .attribute-icon-image,
.equipment-detail-stat-icon .attribute-icon-image {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;
    max-height: none;

    object-fit: contain;

    user-select: none;
    pointer-events: none;

    -webkit-user-drag: none;

    opacity: .96;

    filter:
        drop-shadow(
            0 0 2px
            rgba(220, 226, 222, .14)
        );
}


/* ---------- STEP 01 ----------
   这里是主要展示场景，尺寸提高到 31px；
   卡片本身不改，只提升图标在卡片里的视觉存在感。
*/

#selectStep .attribute-card .attribute-icon {
    width: 31px !important;
    height: 31px !important;
    flex: 0 0 31px !important;

    margin-bottom: 1px;

    color: inherit !important;
    opacity: 1 !important;

    filter: none !important;
}


#selectStep .attribute-card .attribute-icon svg {
    display: none !important;
}


#selectStep .attribute-card.selected
.attribute-icon
.attribute-icon-image {
    opacity: 1;

    transform:
        translateY(-1px)
        scale(1.06);

    filter:
        drop-shadow(
            0 0 3px
            rgba(235, 241, 237, .34)
        )
        drop-shadow(
            0 0 7px
            rgba(194, 218, 213, .12)
        );
}


/* 细长武器稍微放大，避免实际手机里又缩成“符号” */

#selectStep
.attribute-card[data-attribute="斩击"]
.attribute-icon-image,

#selectStep
.attribute-card[data-attribute="突刺"]
.attribute-icon-image,

#selectStep
.attribute-card[data-attribute="术法"]
.attribute-icon-image {
    transform:
        scale(1.10);
}


#selectStep
.attribute-card[data-attribute="斩击"].selected
.attribute-icon-image,

#selectStep
.attribute-card[data-attribute="突刺"].selected
.attribute-icon-image,

#selectStep
.attribute-card[data-attribute="术法"].selected
.attribute-icon-image {
    transform:
        translateY(-1px)
        scale(1.15);
}


/* 蚰蜒需要略放大，保证长足在 360px 手机上仍然可读 */

#selectStep
.attribute-card[data-attribute="蚀命"]
.attribute-icon-image {
    transform:
        scale(1.12);
}

#selectStep
.attribute-card[data-attribute="蚀命"].selected
.attribute-icon-image {
    transform:
        translateY(-1px)
        scale(1.17);
}


/* ---------- STEP 02 ----------
   数据密度更高，保持 22px。
*/

#weightStep .weight-attribute-icon {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;

    color: inherit !important;

    filter: none !important;
}


#weightStep .weight-attribute-icon svg {
    display: none !important;
}


#weightStep
.weight-attribute-icon
.attribute-icon-image {
    opacity: .94;

    filter:
        drop-shadow(
            0 0 2px
            rgba(216, 223, 219, .13)
        );
}


/* ---------- 装备详情 ----------
   详情标题图标更大，单项数据图标仍保持紧凑。
*/

.equipment-detail-group-icon {
    width: 25px !important;
    height: 25px !important;
    flex: 0 0 25px !important;
}


.equipment-detail-stat-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;

    color: inherit !important;
    opacity: 1 !important;
}


.equipment-detail-group-icon svg,
.equipment-detail-stat-icon svg {
    display: none !important;
}


.equipment-detail-group-icon
.attribute-icon-image {
    opacity: .96;
}


.equipment-detail-stat-icon
.attribute-icon-image {
    opacity: .90;

    filter:
        drop-shadow(
            0 0 1.5px
            rgba(224, 218, 207, .13)
        );
}


/* ---------- 360px 手机 ----------
   不再把图标缩回 22/24px，避免再次丢失确认稿细节。
*/

@media (max-width: 600px) {

    #selectStep
    .attribute-card
    .attribute-icon {
        width: 29px !important;
        height: 29px !important;
        flex-basis: 29px !important;
    }


    #weightStep
    .weight-attribute-icon {
        width: 21px !important;
        height: 21px !important;
        flex-basis: 21px !important;
    }


    .equipment-detail-stat-icon {
        width: 16px !important;
        height: 16px !important;
        flex-basis: 16px !important;
    }

}


/* =========================================================
   V1.1 · 装备详情页顶部操作最终规则
   手机端：左上角“返回装备排名”承担退出职责，
           隐藏右上角 ×，把右上角留给全局音乐按钮。
   桌面端：继续保留 ×，符合弹层关闭习惯。
========================================================= */

@media (max-width: 600px) {

    .equipment-detail-close {
        display: none !important;
    }

}