/* ===== 设计变量 · 全界面排版 ===== */
:root {
    --bg-deep: #06080d;
    --bg-mid: #0c1018;
    --bg-elevated: #141a26;
    --bg-card: linear-gradient(165deg, rgba(20, 26, 38, 0.97) 0%, rgba(10, 13, 22, 0.98) 100%);
    --bg-card-solid: rgba(18, 23, 34, 0.96);
    --border: rgba(201, 162, 39, 0.42);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-jade: rgba(90, 160, 140, 0.22);
    --text: #e8eaf2;
    --text-muted: #8b95ab;
    --text-faint: #5c6578;
    --accent: #e4c76a;
    --accent-dim: rgba(228, 199, 106, 0.14);
    --accent-glow: rgba(228, 199, 106, 0.38);
    --jade: #5ab89a;
    --jade-dim: rgba(90, 184, 154, 0.12);
    --danger: #e05252;
    --gold: #f2d57a;
    --hp: #c23c3c;
    --exp: #8b7fd8;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 20px 56px rgba(0, 0, 0, 0.55);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    --font-ui: "Noto Sans SC", system-ui, sans-serif;
    --font-display: "Cinzel", "Noto Sans SC", serif;
    --font-xian: "ZCOOL XiaoWei", "Noto Sans SC", serif;
    --app-max: 28rem;
    --space-xs: 0.35rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
}

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

h1 { font-size: 1.85rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 0.82rem; }
h5 { font-size: 0.85rem; }
h6 { font-size: 0.75rem; }

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    font-style: normal;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
}

i {
    margin-right: 0.35rem;
    opacity: 0.88;
    flex-shrink: 0;
}

body {
    min-height: 100dvh;
    font-family: var(--font-ui);
    font-size: 0.92rem;
    color: var(--text);
    background:
        radial-gradient(ellipse 120% 80% at 50% -20%, rgba(228, 199, 106, 0.09), transparent 58%),
        radial-gradient(ellipse 50% 45% at 100% 0%, rgba(90, 184, 154, 0.07), transparent 45%),
        radial-gradient(ellipse 45% 50% at 0% 85%, rgba(100, 80, 180, 0.06), transparent 48%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.012) 2px,
            rgba(255, 255, 255, 0.012) 3px
        ),
        linear-gradient(172deg, #05070c 0%, var(--bg-mid) 42%, #070a10 100%);
    -webkit-font-smoothing: antialiased;
}

/* ===== 修仙封面页（加点前） ===== */
.modal-container--intro {
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-screen {
    width: min(var(--app-max), 92vw);
    border-radius: calc(var(--radius) + 6px);
    background: #000;
    border: 1px solid rgba(201, 162, 39, 0.45);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.15rem 1.15rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.intro-screen::before {
    content: "";
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(circle at 50% 40%, rgba(228, 199, 106, 0.23) 0%, rgba(228, 199, 106, 0.04) 38%, rgba(0, 0, 0, 0) 70%),
        radial-gradient(circle at 50% 40%, rgba(90, 184, 154, 0.10) 0%, rgba(0, 0, 0, 0) 62%);
    filter: blur(0px);
    opacity: 0;
    pointer-events: none;
}

.intro-screen__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 0.15rem 0.15rem 0.3rem;
}

.intro-hero {
    width: 100%;
    max-width: 19.5rem;
    margin-top: 0.15rem;
    margin-bottom: 0.2rem;
    position: relative;
}

.intro-hero__bg {
    position: absolute;
    inset: -20% -18% -30% -18%;
    background-image: url("../img/xiu.png");
    background-size: cover;
    background-position: center;
    filter: blur(18px) saturate(0.9) brightness(0.45) contrast(1.05);
    opacity: 0;
    transform: scale(1.02);
    pointer-events: none;
}

.intro-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
}

.intro-hero__frame {
    position: relative;
    width: min(19.5rem, 86%);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 18px;
    padding: 0;
    background: rgba(0, 0, 0, 0.82);
    border: 1px solid rgba(201, 162, 39, 0.58);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    overflow: hidden;
}

.intro-hero__img {
    width: 100%;
    height: 100%;
    display: block;
    margin-top: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: center;
    background: rgba(0, 0, 0, 1);
}

.intro-screen__title {
    margin-top: 0.15rem;
    font-family: var(--font-xian);
    font-weight: 600;
    font-size: 1.9rem;
    letter-spacing: 0.12em;
    color: var(--gold);
    text-shadow: 0 10px 40px rgba(228, 199, 106, 0.22);
}

.intro-screen__sub {
    color: rgba(232, 234, 242, 0.72);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
}

.intro-screen__divider {
    width: 6.4rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(228, 199, 106, 0.55), rgba(0, 0, 0, 0));
    margin: 0.15rem 0 0.1rem;
}

.intro-screen__lore {
    margin-top: 0.2rem;
    color: rgba(232, 234, 242, 0.82);
    font-size: 0.92rem;
    line-height: 1.55rem;
    font-family: var(--font-ui);
    max-width: 22rem;
}

.intro-screen__lore--em {
    color: rgba(232, 234, 242, 0.9);
    letter-spacing: 0.04em;
}

.intro-screen__hint {
    margin-top: 0.35rem;
    color: rgba(228, 199, 106, 0.78);
    letter-spacing: 0.08em;
    font-size: 0.86rem;
    opacity: 0.92;
}

@media (max-width: 420px) {
    .intro-screen {
        padding: 1.2rem 1.05rem 1.05rem;
    }
    .intro-hero__frame {
        width: 92%;
    }
    .intro-screen__title {
        font-size: 1.6rem;
    }
}

input,
select,
textarea {
    font-family: var(--font-ui);
}

input {
    font-size: 1rem;
    padding: 0.6rem 0.85rem;
    margin: 0;
    background: var(--bg-deep);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text);
    user-select: text;
    -webkit-user-select: text;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input:hover {
    border-color: var(--border);
}

input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

select {
    cursor: pointer;
    font-size: 0.88rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    background: var(--bg-deep);
    border: 1px solid var(--border-subtle);
    color: var(--text);
    border-radius: var(--radius-sm);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238892a8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    padding-right: 1.85rem;
}

.select-field {
    flex: 1;
    min-width: 0;
}

option {
    background-color: var(--bg-mid);
    color: var(--text);
}

img {
    pointer-events: none;
    margin-top: 0.75rem;
    border-radius: var(--radius-sm);
    max-width: 100%;
    height: auto;
}

/* ===== 按钮 ===== */
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
    background: transparent;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
}

button:hover {
    background: var(--accent-dim);
    border-color: var(--border);
}

button:active {
    transform: scale(0.98);
}

.btn--primary {
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.32), rgba(212, 175, 55, 0.1));
    border-color: var(--accent);
    color: #fffaf0;
}

.btn--primary:hover {
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.48), rgba(212, 175, 55, 0.18));
    box-shadow: 0 0 18px var(--accent-glow);
}

.btn--accent {
    background: var(--bg-elevated);
    border-color: var(--accent);
    color: var(--gold);
    font-weight: 600;
}

.btn--ghost {
    background: transparent;
    border-color: var(--border-subtle);
    color: var(--text-muted);
}

.btn--ghost:hover {
    color: var(--text);
    border-color: var(--border);
}

.btn--sm {
    font-size: 0.82rem;
    padding: 0.38rem 0.65rem;
}

.btn--block {
    width: 100%;
}

.icon-btn {
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: var(--bg-deep);
    color: var(--text-muted);
    flex-shrink: 0;
}

.icon-btn:hover {
    color: var(--text);
    border-color: var(--border);
    background: var(--bg-elevated);
}

/* ===== 通用 ===== */
.w-100 { width: 100%; }

.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.row span {
    min-width: 1.25rem;
    text-align: center;
}

.center-text { text-align: center; }
.pad { padding: 0.35em 0.5em; }
.center { text-align: center; }

/* ===== 应用根与面板外壳 ===== */
.app-root {
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--space-sm);
    padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
}

.game-container {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    max-width: var(--app-max);
    min-height: 0;
}

.app-panel.screen {
    position: relative;
    border-radius: var(--radius);
    border: 1px solid rgba(212, 175, 55, 0.22);
    background: var(--bg-card-solid);
    background-image:
        linear-gradient(165deg, rgba(28, 34, 48, 0.55) 0%, rgba(12, 15, 24, 0.92) 100%);
    box-shadow:
        var(--shadow),
        0 0 0 1px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
}

.app-panel.screen::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(228, 199, 106, 0.06) 0%,
        transparent 42%,
        transparent 58%,
        rgba(90, 184, 154, 0.04) 100%
    );
    z-index: 0;
}

.app-panel.screen > * {
    position: relative;
    z-index: 1;
}

.screen--title {
    display: flex;
    flex-direction: column;
    flex: 1;
    max-height: min(100dvh - 1rem, 40rem);
    min-height: min(100dvh - 1rem, 36rem);
    cursor: pointer;
}

.screen--hub {
    flex: 1;
    max-height: calc(100dvh - 1rem);
    min-height: min(calc(100dvh - 1rem), 44rem);
    display: flex;
    flex-direction: column;
}

.screen--loading {
    justify-content: center;
    align-items: center;
    min-height: 10rem;
    max-width: 16rem;
}

/* ===== 标题页 ===== */
.title-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg) var(--space-md);
    text-align: center;
}

.title-layout__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.screen-brand__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.75rem;
    height: 4.75rem;
    margin-bottom: var(--space-md);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--accent-glow), transparent 72%);
    border: 1px solid var(--border);
    font-size: 2.1rem;
    color: var(--gold);
}

.screen-title {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 28px var(--accent-glow);
    margin-bottom: 0.25rem;
}

.screen-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.title-layout__divider {
    width: min(12rem, 60%);
    height: 1px;
    margin: var(--space-lg) 0;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.screen-hint {
    font-size: 0.88rem;
    color: var(--text-muted);
}

.tap-hint {
    animation: hint-pulse 2.2s ease-in-out infinite;
}

@keyframes hint-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.loading-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
}

.loading-text {
    color: var(--text-muted);
    font-size: 0.88rem;
}

/* ===== 主界面 Hub ===== */
.hub-layout {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
}

.hub-layout__primary {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
    flex-shrink: 0;
}

@media (min-width: 800px) {
    #dungeon-main.game-container.scrollable.screen--hub {
        max-width: min(96vw, 52rem);
        overflow: hidden;
    }

    .hub-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(16.25rem, 33vw, 21.5rem);
        grid-template-rows: minmax(0, 1fr);
        gap: var(--space-md);
        align-items: stretch;
        padding: var(--space-md);
    }

    .hub-layout__primary {
        flex-shrink: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 0.15rem;
    }

    .hub-layout__log.log-panel {
        flex: unset;
        min-height: 0;
        max-height: none;
        height: auto;
        align-self: stretch;
        background:
            linear-gradient(180deg, rgba(228, 199, 106, 0.04) 0%, transparent 28%),
            linear-gradient(165deg, rgba(22, 30, 44, 0.85) 0%, rgba(6, 8, 14, 0.92) 100%);
        border: 1px solid rgba(212, 175, 55, 0.2);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            inset -1px 0 0 rgba(90, 184, 154, 0.06),
            0 0 36px rgba(0, 0, 0, 0.35);
    }

    .hub-layout__log .log-panel__head {
        text-align: left;
    }

    .hub-layout__log .log-panel__status {
        text-align: left;
    }
}

.hud-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-sm);
    background:
        linear-gradient(145deg, rgba(30, 38, 52, 0.55) 0%, rgba(8, 10, 18, 0.75) 100%);
    border: 1px solid rgba(212, 175, 55, 0.18);
    box-shadow: var(--shadow-inset), 0 8px 28px rgba(0, 0, 0, 0.22);
}

.hud-bar__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, auto));
    gap: 0.4rem;
    align-items: center;
    align-self: center;
    justify-content: end;
}

.hud-bar__pet {
    white-space: nowrap;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    border: 1px solid rgba(212, 175, 55, 0.22);
}

.hud-bar__menu {
    white-space: nowrap;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
}

.hud-bar__main {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.hud-bar__avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, rgba(228, 199, 106, 0.35), transparent 55%),
        radial-gradient(circle at 70% 80%, rgba(90, 184, 154, 0.15), transparent 45%),
        linear-gradient(160deg, #1a2230, #0c1018);
    border: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 20px rgba(228, 199, 106, 0.08);
    font-family: var(--font-xian);
    font-size: 1.05rem;
    color: rgba(242, 213, 122, 0.88);
    text-shadow: 0 0 12px rgba(228, 199, 106, 0.35);
}

.hud-bar__avatar::before {
    content: "炁";
}

.hud-bar__avatar.hud-bar__avatar--custom::before {
    content: none;
}

.hud-bar__avatar.hud-bar__avatar--custom {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-size: 0;
    color: transparent;
    text-shadow: none;
}

.hud-bar__identity {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.hud-bar__titles {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.hud-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.28em;
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.35;
    font-family: var(--font-xian);
    letter-spacing: 0.06em;
    color: #f5f2ea;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

.hud-name > i {
    flex-shrink: 0;
    margin-right: 0;
    opacity: 0.75;
}

.hud-realm {
    margin: 0;
    padding-left: 1.35rem;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: rgba(242, 213, 122, 0.88);
    line-height: 1.3;
    word-break: keep-all;
}

.hud-sect {
    margin: 0;
    padding-left: 1.35rem;
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: rgba(140, 200, 180, 0.82);
    line-height: 1.35;
    word-break: keep-all;
}

.hud-bar__meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.hud-bar__inv,
.hud-bar__skills {
    white-space: nowrap;
}

.hud-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    background: rgba(6, 8, 14, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--text-muted);
    margin: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hud-pill__lbl {
    color: var(--text-muted);
    font-weight: 500;
}

.hud-pill__val {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.hud-pill--exp .hud-pill__lbl { color: #b5a8ec; }
.hud-pill--exp {
    border-color: rgba(139, 127, 216, 0.22);
    background: rgba(40, 32, 72, 0.25);
}
.hud-pill--gold .hud-pill__val { color: var(--gold); }
.hud-pill--gold {
    border-color: rgba(212, 175, 55, 0.25);
    background: rgba(48, 40, 20, 0.35);
}

/* 进度条：时间 | 楼层 | 房间 | 按钮 */
.run-bar {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

.run-bar__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "time time"
        "floor room"
        "act act";
    gap: 0.45rem;
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    background:
        linear-gradient(160deg, rgba(26, 34, 48, 0.65) 0%, rgba(8, 11, 18, 0.82) 100%);
    border: 1px solid rgba(90, 184, 154, 0.14);
    box-shadow: var(--shadow-inset), 0 6px 24px rgba(0, 0, 0, 0.2);
}

@media (min-width: 380px) {
    .run-bar__grid {
        grid-template-columns: 1fr 1fr auto;
        grid-template-areas:
            "time time time"
            "floor room act";
        align-items: center;
    }
}

.run-bar__cell {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 0.45rem 0.5rem;
    border-radius: var(--radius-sm);
    background: rgba(4, 6, 12, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.run-bar__cell--time {
    grid-area: time;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gold);
    text-shadow: 0 0 18px rgba(228, 199, 106, 0.2);
    padding: 0.55rem 0.5rem;
    border-color: rgba(212, 175, 55, 0.2);
    background: linear-gradient(180deg, rgba(48, 42, 28, 0.5) 0%, rgba(12, 14, 22, 0.65) 100%);
}

.run-bar__cell--time::before {
    content: "洞天历时";
    display: block;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    color: var(--text-faint);
    margin-bottom: 0.2rem;
    text-shadow: none;
}

.run-bar__cell--floor {
    grid-area: floor;
    font-weight: 600;
    color: var(--text);
}

.run-bar__cell--room {
    grid-area: room;
    font-weight: 600;
    color: var(--text);
}

.run-bar__actions {
    grid-area: act;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: stretch;
    width: 100%;
}

.run-bar__actions .run-bar__action {
    flex: 1 1 auto;
    min-width: 0;
}

.run-bar__action {
    width: 100%;
    font-weight: 600;
    letter-spacing: 0.12em;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
}

@media (min-width: 380px) {
    .run-bar__action {
        width: auto;
        min-width: 5.25rem;
    }
}

/* 押镖 / 采矿：独立一行，位于秘境进度条下方、属性面板上方 */
.hub-layout__run-extra {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

.run-bar__extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: stretch;
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    background:
        linear-gradient(160deg, rgba(32, 28, 44, 0.6) 0%, rgba(8, 11, 18, 0.82) 100%);
    border: 1px solid rgba(212, 175, 55, 0.16);
    box-shadow: var(--shadow-inset), 0 4px 16px rgba(0, 0, 0, 0.18);
}

.run-bar__extra-actions .run-bar__action {
    flex: 1 1 auto;
    min-width: 0;
}

@media (min-width: 380px) {
    .run-bar__extra-actions .run-bar__action {
        width: auto;
        min-width: 5.25rem;
    }
}

.run-bar__item { margin: 0; }
.run-bar__item--strong {
    color: var(--text);
    font-weight: 600;
}

/* 属性双列 */
.hub-stats.stat-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    margin: 0;
    flex-shrink: 0;
}

@media (min-width: 360px) {
    .hub-stats.stat-panel {
        grid-template-columns: 1fr 1fr;
    }
}

.stat-card {
    min-width: 0;
    padding: var(--space-md) var(--space-md);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65rem;
    bottom: 0.65rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, rgba(228, 199, 106, 0.55), rgba(90, 184, 154, 0.35));
    opacity: 0.85;
}

.stat-card__body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.stat-card__body p,
.stat-card .stat-card__body p {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin: 0;
    padding: 0.42rem 0;
    padding-left: 0.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.stat-card__body p i,
.stat-card .stat-card__body p i {
    color: rgba(228, 199, 106, 0.55);
    opacity: 1;
}

.stat-card__body p:last-child {
    border-bottom: none;
}

.stat-card__lbl {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.stat-card__val {
    text-align: right;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.card__title {
    font-size: 0.95rem;
    letter-spacing: 0.2em;
    color: var(--accent);
    margin-bottom: var(--space-sm);
    margin-left: 0.35rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    font-family: var(--font-xian);
    font-weight: 400;
}

/* 主界面 Hub：道体 / 机缘双列略缩小字号 */
.hub-stats.stat-panel > .stat-card {
    padding: var(--space-sm) var(--space-sm);
}

.hub-stats.stat-panel .card__title {
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    margin-bottom: 0.3rem;
    margin-left: 0.28rem;
    padding-bottom: 0.32rem;
}

.hub-stats.stat-panel .stat-card::before {
    top: 0.5rem;
    bottom: 0.5rem;
}

.hub-stats.stat-panel .stat-card__body p,
.hub-stats.stat-panel .stat-card .stat-card__body p {
    font-size: 0.72rem;
    padding: 0.3rem 0;
    padding-left: 0.1rem;
    gap: 0.28rem 0.4rem;
}

.hub-stats.stat-panel .stat-card__body p i,
.hub-stats.stat-panel .stat-card .stat-card__body p i {
    font-size: 0.7rem;
    width: 0.95rem;
    text-align: center;
}

.hub-stats.stat-panel .stat-card__lbl {
    font-size: 0.68rem;
}

.hub-stats.stat-panel .stat-card__val {
    font-size: 0.72rem;
}

.hub-stats.stat-panel .stat-card__body p.stat-card__note {
    display: block;
    font-size: 0.62rem;
    line-height: 1.45;
    color: var(--text-faint);
    padding-top: 0.32rem;
    margin-top: 0.1rem;
}

/* 日志区占满剩余高度 */
.hub-layout__log.log-panel {
    flex: 1;
    min-height: 9rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-sm);
}

.log-panel__head {
    flex-shrink: 0;
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid rgba(212, 175, 55, 0.12);
    background: linear-gradient(90deg, rgba(228, 199, 106, 0.06) 0%, transparent 65%);
}

.log-panel__heading {
    margin: 0 0 0.35rem;
    font-family: var(--font-xian);
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0.35em;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(228, 199, 106, 0.2);
}

.log-panel__status {
    margin: 0;
    text-align: center;
    font-weight: 500;
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.log-panel__scroll,
#dungeonLog {
    flex: 1;
    min-height: 0;
    overflow: auto;
    font-size: 0.88rem;
    line-height: 1.72;
    color: rgba(200, 206, 220, 0.88);
    padding-right: 0.15rem;
}

.primary-panel {
    border-radius: var(--radius-sm);
    border: 1px solid rgba(212, 175, 55, 0.12);
    background: linear-gradient(175deg, rgba(14, 18, 28, 0.72) 0%, rgba(6, 8, 14, 0.88) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.card {
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(168deg, rgba(20, 26, 38, 0.55) 0%, rgba(8, 10, 16, 0.72) 100%);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-inset);
}

.hub-layout .logBox {
    margin: 0;
}

/* ===== 背包 · 行囊（大尺寸 · 栅格卡片） ===== */
#inventory .content {
    width: min(100%, min(96vw, 52rem));
    max-width: none;
    max-height: min(90dvh, 52rem);
    min-height: min(70dvh, 36rem);
    /* 明确高度上限，便于 flex 子项把滚动交给 .inv-grid */
    height: min(90dvh, 52rem);
}

.modal-sheet--inventory {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* 行囊：装备/材料分区占满剩余高度，把滚动交给囊中之物栅格 */
.modal-sheet--inventory .inv-split {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* [hidden] 默认会被上面的 display:flex 盖掉，材料/装备分页切换失效，必须写回 none */
.modal-sheet--inventory .inv-split[hidden] {
    display: none !important;
}

.modal-sheet__head--inv {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    background: linear-gradient(165deg, rgba(212, 175, 55, 0.11) 0%, rgba(0, 0, 0, 0.22) 45%, rgba(8, 10, 18, 0.55) 100%);
    border-bottom: 1px solid rgba(212, 175, 55, 0.14);
}

.modal-sheet__eyebrow--inv {
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    color: var(--accent);
    opacity: 0.9;
    margin: 0 0 0.35rem;
}

.modal-sheet__head--inv h3 {
    font-size: 1.45rem;
    margin: 0 0 0.25rem;
    color: var(--text);
    text-shadow: 0 1px 18px rgba(212, 175, 55, 0.14);
}

.modal-sheet__sub {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
    max-width: 22rem;
}

.inv-tabs {
    flex-shrink: 0;
    display: flex;
    gap: 0;
    padding: 0 var(--space-lg);
    border-bottom: 1px solid rgba(212, 175, 55, 0.12);
    background: rgba(0, 0, 0, 0.22);
}

.inv-tab {
    flex: 1;
    max-width: none;
    padding: 0.65rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.inv-tab:hover {
    color: var(--text);
    background: rgba(212, 175, 55, 0.06);
}

.inv-tab--active {
    color: var(--accent);
    border-bottom-color: rgba(212, 175, 55, 0.55);
    background: rgba(212, 175, 55, 0.05);
}

.inv-split--materials .inv-panel--materials {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 var(--space-lg) var(--space-lg);
}

.inv-split--gems .inv-panel--gems {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 var(--space-lg) var(--space-lg);
}

.inv-panel--gems .inv-panel__hint {
    display: block;
}

.eq-meta-gems {
    font-size: 0.72rem;
    margin: 0.28rem 0;
    color: rgba(220, 200, 255, 0.92);
}

.eq-meta-gems--muted {
    color: var(--text-muted);
}

/* 灵窍说明接在基础属性列表之后，与上方数值列表划清层次 */
#equipmentInfo .content > ul + .eq-meta-gems,
.eq-compare__panel .eq-compare__ul + .eq-meta-gems {
    margin-top: 0.6rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(180, 100, 220, 0.15);
}

.eq-gem-actions {
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(180, 100, 220, 0.2);
}

.eq-gem-actions__title {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-bottom: 0.38rem;
}

.eq-gem-slot-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.28rem;
    font-size: 0.7rem;
}

.eq-gem-slot-row--locked {
    color: var(--text-faint);
}

.eq-gem-slot-row__locked {
    opacity: 0.85;
}

.eq-gem-slot-row__hint {
    font-size: 0.62rem;
    color: var(--text-muted);
}

.inv-gem-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem 0.5rem;
    align-content: start;
    width: 100%;
}

@media (max-width: 520px) {
    .inv-gem-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 340px) {
    .inv-gem-grid {
        grid-template-columns: 1fr;
    }
}

.inv-gem-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    min-height: 0;
    border-radius: 11px;
    border: 1px solid rgba(200, 165, 255, 0.22);
    background: linear-gradient(150deg, rgba(44, 28, 58, 0.58) 0%, rgba(10, 10, 18, 0.88) 100%);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.26);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.inv-gem-card:hover {
    border-color: rgba(228, 199, 106, 0.28);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);
}

.inv-gem-card--hp {
    border-color: rgba(255, 120, 140, 0.25);
}
.inv-gem-card--atk {
    border-color: rgba(255, 180, 100, 0.28);
}
.inv-gem-card--def {
    border-color: rgba(120, 180, 255, 0.25);
}
.inv-gem-card--atkSpd {
    border-color: rgba(120, 230, 200, 0.22);
}
.inv-gem-card--critDmg {
    border-color: rgba(255, 220, 120, 0.3);
}

.inv-gem-card__icon {
    flex-shrink: 0;
    width: 2.35rem;
    height: 2.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(200, 130, 255, 0.1);
    border: 1px solid rgba(200, 130, 255, 0.28);
    font-size: 1rem;
    color: rgba(240, 210, 255, 0.95);
}

.inv-gem-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.inv-gem-card__name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.04em;
}

.inv-gem-card__lvl {
    font-size: 0.68rem;
    color: rgba(180, 165, 220, 0.95);
    letter-spacing: 0.08em;
}

.inv-gem-card__qty {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.inv-gem-card__eff {
    margin: 0.25rem 0 0;
    font-size: 0.65rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.inv-gem-card__eff strong {
    color: rgba(200, 220, 255, 0.95);
    font-weight: 600;
}

.inv-gem-card__hint {
    margin: 0.35rem 0 0;
    font-size: 0.65rem;
    line-height: 1.4;
    color: var(--text-faint);
}

.inv-gem-card .inv-gem-merge-btn {
    margin-top: 0.45rem;
    align-self: flex-start;
    letter-spacing: 0.06em;
}

.inv-gem-merge-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.3rem;
    font-size: 0.76rem;
}

.inv-mat-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.1rem;
    min-height: 9.6rem;
    height: 100%;
    border-radius: 11px;
    border: 1px solid rgba(180, 100, 220, 0.22);
    background: linear-gradient(145deg, rgba(40, 22, 52, 0.55) 0%, rgba(10, 8, 16, 0.85) 100%);
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.28);
}

.inv-mat-card__icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(200, 120, 255, 0.12);
    border: 1px solid rgba(200, 120, 255, 0.28);
    font-size: 1.35rem;
    color: rgba(230, 180, 255, 0.95);
}

.inv-mat-card__name {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
}

.inv-mat-card__count {
    display: block;
    font-size: 0.78rem;
    color: rgba(200, 180, 255, 0.9);
    letter-spacing: 0.06em;
    margin-bottom: 0.45rem;
}

.inv-mat-card__desc {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.inv-mat-card--enchant {
    margin-top: 0;
    border-color: rgba(242, 213, 122, 0.28);
    background: linear-gradient(145deg, rgba(50, 36, 14, 0.5) 0%, rgba(16, 12, 8, 0.86) 100%);
}

#invSplitMat .inv-panel__hint {
    display: none;
}

.inv-mat-card--enchant .inv-mat-card__icon {
    background: rgba(242, 213, 122, 0.12);
    border-color: rgba(242, 213, 122, 0.32);
    color: rgba(255, 232, 170, 0.96);
}

.eq-meta-stars {
    margin: 0.28rem 0 0.5rem;
    font-size: 0.6rem;
    line-height: 1.4;
    color: rgba(255, 210, 140, 0.88);
    letter-spacing: 0.04em;
}

.eq-meta-enchant {
    margin: -0.15rem 0 0.5rem;
    font-size: 0.6rem;
    line-height: 1.4;
    color: rgba(255, 235, 185, 0.9);
    letter-spacing: 0.04em;
}

.eq-meta-armor-class {
    margin: 0.15rem 0 0.4rem;
    font-size: 0.6rem;
    line-height: 1.42;
    color: var(--text-muted);
}

.eq-set-block {
    margin: 0.35rem 0 0.45rem;
    font-size: 0.58rem;
    line-height: 1.38;
    color: var(--text-muted);
}

.eq-set-block__title {
    margin: 0 0 0.2rem;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
}

.eq-set-block__meta {
    margin: 0 0 0.28rem;
    font-size: 0.56rem;
    line-height: 1.35;
    opacity: 0.92;
}

.eq-set-block__ul {
    margin: 0;
    padding-left: 0.95rem;
    list-style: disc;
    font-size: 0.56rem;
    line-height: 1.36;
}

.eq-set-block__ul li {
    margin: 0.05rem 0;
}

/* 套装信息折叠按钮（details/summary） */
.eq-set-collapse {
    margin: 0.55rem 0 0;
}

.eq-set-collapse__summary {
    cursor: pointer;
    user-select: none;
    list-style: none;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text);
    padding: 0.32rem 0.55rem;
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.22);
    background: rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* 隐藏默认披露三角 */
.eq-set-collapse__summary::-webkit-details-marker {
    display: none;
}

/* 折叠符号：三角（关闭向下 / 展开向上） */
.eq-set-collapse__summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--gold);
    /* 默认 details 关闭：向下（下翻） */
    transform: rotate(180deg);
    transition: transform 0.16s ease;
    opacity: 0.95;
}

.eq-set-collapse[open] .eq-set-collapse__summary::before {
    transform: rotate(0deg);
}

.eq-enhance-block {
    margin: 0.6rem 0 0;
    padding: 0.35rem 0.48rem;
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    background: rgba(0, 0, 0, 0.28);
}

.eq-enhance-row {
    margin-top: 0.6rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
}

.eq-enhance-row .eq-enhance-block {
    margin: 0;
}

.eq-enhance-block__title {
    margin: 0 0 0.22rem;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--accent);
}

.eq-enhance-block__line {
    margin: 0 0 0.18rem;
    font-size: 0.56rem;
    line-height: 1.36;
    color: var(--text);
}

.eq-enhance-block__muted {
    color: var(--text-muted);
    font-size: 0.52rem;
}

.eq-enhance-block__btn {
    margin-top: 0.32rem;
    font-size: 0.58rem;
    padding: 0.16rem 0.38rem;
}

.eq-enchant-block {
    border-color: rgba(242, 213, 122, 0.28);
    background: linear-gradient(145deg, rgba(42, 30, 12, 0.38) 0%, rgba(8, 6, 3, 0.5) 100%);
}

@media (max-width: 740px) {
    .eq-enhance-row {
        grid-template-columns: 1fr;
    }
}

.icon-btn--inv-close {
    flex-shrink: 0;
    margin-top: 0.2rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(212, 175, 55, 0.2);
    background: rgba(0, 0, 0, 0.25);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.icon-btn--inv-close:hover {
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.4);
    color: var(--accent);
}

.inv-toolbar {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(0, 0, 0, 0.18);
}

.inv-toolbar--view {
    border-top: 1px solid rgba(212, 175, 55, 0.08);
    background: rgba(0, 0, 0, 0.12);
}

.inv-toolbar--view .inv-toolbar__filter {
    flex: 1 1 10rem;
    min-width: min(100%, 12rem);
    max-width: 22rem;
}

.inv-toolbar__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.inv-toolbar__group--sell {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.75rem;
}

.inv-auto-batch {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.72rem;
    color: rgba(180, 188, 204, 0.92);
    letter-spacing: 0.05em;
}

.inv-auto-batch__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.inv-auto-batch__track {
    position: relative;
    flex-shrink: 0;
    width: 2.45rem;
    height: 1.32rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(212, 175, 55, 0.22);
    transition: background 0.2s, border-color 0.2s;
}

.inv-auto-batch__track::after {
    content: "";
    position: absolute;
    top: 0.11rem;
    left: 0.14rem;
    width: 1.02rem;
    height: 1.02rem;
    border-radius: 50%;
    background: rgba(200, 206, 220, 0.88);
    transition: transform 0.2s ease, background 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.inv-auto-batch__input:checked + .inv-auto-batch__track {
    background: rgba(212, 175, 55, 0.2);
    border-color: rgba(212, 175, 55, 0.42);
}

.inv-auto-batch__input:checked + .inv-auto-batch__track::after {
    transform: translateX(1.05rem);
    background: var(--gold);
}

.inv-auto-batch__input:focus-visible + .inv-auto-batch__track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.inv-auto-batch__text {
    white-space: nowrap;
}

.inv-toolbar__label {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
}

.inv-toolbar__sell {
    min-height: 2.25rem;
    padding-inline: 1rem;
}

.inv-toolbar__filter {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: min(100%, 14rem);
    flex: 1 1 12rem;
}

.inv-toolbar__filter-lbl {
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

.select-field--inv {
    width: 100%;
    min-height: 2.35rem;
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(212, 175, 55, 0.22);
    background: rgba(0, 0, 0, 0.35);
    color: var(--text);
    font-size: 0.88rem;
}

.select-field--inv:focus-visible {
    border-color: var(--accent);
}

.inv-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

@media (min-width: 880px) {
    .inv-body {
        flex-direction: row;
        align-items: stretch;
    }

    .inv-panel--bag {
        border-right: 1px solid rgba(212, 175, 55, 0.1);
    }

    .inv-panel--wear {
        width: 17.5rem;
        flex-shrink: 0;
        padding: var(--space-md) var(--space-lg) var(--space-lg) var(--space-md);
        display: flex;
        flex-direction: column;
    }

    .inv-panel--wear .inv-equip-card {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .equip-strip--inv {
        flex: 1;
        align-content: flex-start;
    }
}

.inv-panel--bag {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.inv-panel__hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    flex-shrink: 0;
    padding: var(--space-md) var(--space-lg) var(--space-sm);
}

.inv-panel__title {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--gold);
}

.inv-panel__title-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.inv-panel__cap {
    font-size: 0.75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: rgba(180, 188, 204, 0.82);
}

.inv-panel__hint {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.inv-grid {
    flex: 1;
    /* flex 子项必须 min-height:0，否则网格会撑满父级并被 overflow:hidden 裁切而无法滚动 */
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--space-sm) var(--space-lg) var(--space-lg);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.75rem, 1fr));
    gap: 0.65rem;
    align-content: start;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* 宝石分页：内层 .inv-gem-grid 已负责三列，外层若沿用 auto-fill 会生成多列，
   唯一子元素只占第一轨，列宽被均分后极窄，卡片会塌成竖条 */
#playerInventoryGems.inv-grid {
    grid-template-columns: minmax(0, 1fr);
}

/* 行囊列表：略加宽滚动条，便于发现可滚动 */
#playerInventory.inv-grid::-webkit-scrollbar,
#playerInventoryMaterials.inv-grid::-webkit-scrollbar,
#playerInventoryGems.inv-grid::-webkit-scrollbar {
    width: 8px;
}

.inv-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    margin: 0.5rem 0 1rem;
    border-radius: var(--radius-sm);
    border: 1px dashed rgba(212, 175, 55, 0.2);
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.inv-empty__icon {
    font-size: 2rem;
    color: var(--accent);
    opacity: 0.38;
    margin-bottom: 0.75rem;
    line-height: 1;
}

.inv-empty strong {
    display: block;
    color: var(--text);
    font-size: 1rem;
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.inv-empty span {
    max-width: 18rem;
}

.inv-empty--equip {
    padding: 1.25rem 1rem;
    margin: 0;
    min-height: auto;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.06);
}

.inv-empty--equip .inv-empty__icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.inv-slot {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.8rem 0.9rem;
    padding-top: 2.1rem;
    border-radius: 11px;
    border: 1px solid rgba(212, 175, 55, 0.16);
    background: linear-gradient(145deg, rgba(22, 28, 42, 0.9) 0%, rgba(10, 12, 20, 0.75) 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.inv-slot--mythic {
    overflow: hidden;
    isolation: isolate;
    border-color: rgba(255, 220, 160, 0.5);
    box-shadow: 0 0 18px rgba(255, 185, 92, 0.2), 0 0 34px rgba(175, 120, 255, 0.12), inset 0 0 14px rgba(255, 255, 255, 0.04);
    animation: rarity-card-enter-mythic 0.52s cubic-bezier(0.22, 0.9, 0.2, 1.05) both, mythic-card-pulse 2.1s ease-in-out infinite 0.52s;
}

.inv-slot--mythic::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg, rgba(255, 220, 160, 0.92) 0%, rgba(167, 139, 250, 0.95) 30%, rgba(244, 114, 182, 0.95) 60%, rgba(255, 220, 160, 0.92) 100%);
    background-size: 240% 100%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
    animation: mythic-card-border-sheen 2.4s linear infinite;
}

.inv-slot--mythic::after {
    content: "";
    position: absolute;
    inset: -18%;
    border-radius: 12px;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 224, 138, 0.28), transparent 42%),
        radial-gradient(circle at 78% 24%, rgba(167, 139, 250, 0.24), transparent 40%),
        radial-gradient(circle at 52% 86%, rgba(244, 114, 182, 0.2), transparent 44%);
    filter: blur(10px);
    animation: mythic-card-aura-breath 2.6s ease-in-out infinite;
}

.inv-slot--locked {
    border-color: rgba(212, 175, 55, 0.32);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.12);
}

/* 全品质阶梯特效：越高越亮、越有动态感 */
.inv-slot--common {
    border-color: rgba(188, 196, 216, 0.22);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 10px rgba(188, 196, 216, 0.06);
    animation: rarity-card-enter-common 0.2s ease-out both;
}

.inv-slot--uncommon {
    border-color: rgba(74, 222, 128, 0.26);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 14px rgba(74, 222, 128, 0.1);
    animation: rarity-card-enter-uncommon 0.24s ease-out both;
}

.inv-slot--rare {
    border-color: rgba(96, 165, 250, 0.34);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 18px rgba(96, 165, 250, 0.16);
    animation: rarity-card-enter-rare 0.28s ease-out both;
}

.inv-slot--epic {
    border-color: rgba(192, 132, 252, 0.42);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 22px rgba(192, 132, 252, 0.2);
    animation: rarity-card-enter-epic 0.34s ease-out both, rarity-card-epic-breath 3.2s ease-in-out infinite 0.34s;
}

.inv-slot--legendary {
    border-color: rgba(255, 211, 110, 0.56);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 26px rgba(255, 185, 92, 0.3);
    animation: rarity-card-enter-legendary 0.4s ease-out both, rarity-card-legendary-breath 2.8s ease-in-out infinite 0.4s;
}

.inv-slot--heirloom {
    border-color: rgba(251, 113, 133, 0.6);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 28px rgba(251, 113, 133, 0.32);
    animation: rarity-card-enter-heirloom 0.45s ease-out both, rarity-card-heirloom-breath 2.6s ease-in-out infinite 0.45s;
}

.inv-slot--common .inv-slot__icon { filter: drop-shadow(0 0 2px rgba(226, 228, 235, 0.2)); }
.inv-slot--uncommon .inv-slot__icon { filter: drop-shadow(0 0 5px rgba(74, 222, 128, 0.3)); }
.inv-slot--rare .inv-slot__icon { filter: drop-shadow(0 0 7px rgba(96, 165, 250, 0.36)); }
.inv-slot--epic .inv-slot__icon { filter: drop-shadow(0 0 9px rgba(192, 132, 252, 0.44)); }
.inv-slot--legendary .inv-slot__icon { filter: drop-shadow(0 0 11px rgba(255, 211, 110, 0.5)); }
.inv-slot--heirloom .inv-slot__icon { filter: drop-shadow(0 0 12px rgba(251, 113, 133, 0.54)); }

.inv-slot__lock {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    z-index: 2;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    background: rgba(0, 0, 0, 0.45);
    color: rgba(228, 199, 106, 0.92);
    cursor: pointer;
    font-size: 0.78rem;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.inv-slot__lock:hover {
    background: rgba(212, 175, 55, 0.14);
    border-color: rgba(212, 175, 55, 0.45);
}

.inv-slot__lock:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.inv-slot__stars {
    position: absolute;
    top: 0.4rem;
    left: 0.5rem;
    z-index: 2;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: rgba(255, 220, 140, 0.95);
    text-shadow: 0 0 8px rgba(255, 200, 80, 0.35);
    pointer-events: none;
}

.inv-slot:hover {
    border-color: rgba(212, 175, 55, 0.42);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(212, 175, 55, 0.08);
    transform: translateY(-1px);
}

.inv-slot--mythic:hover {
    transform: translateY(-2px) scale(1.018);
    border-color: rgba(255, 232, 170, 0.82);
    box-shadow: 0 0 24px rgba(255, 194, 106, 0.38), 0 0 46px rgba(167, 139, 250, 0.26), inset 0 0 18px rgba(255, 255, 255, 0.08);
}

.inv-slot--chronarch.inv-slot--mythic::before {
    background: linear-gradient(120deg, rgba(255, 246, 202, 0.98) 0%, rgba(252, 211, 77, 0.98) 35%, rgba(245, 158, 11, 0.96) 65%, rgba(255, 246, 202, 0.98) 100%);
    background-size: 240% 100%;
}

.inv-slot--apexother.inv-slot--mythic::before {
    background: linear-gradient(120deg, rgba(255, 230, 246, 0.98) 0%, rgba(244, 114, 182, 0.98) 30%, rgba(167, 139, 250, 0.98) 62%, rgba(129, 140, 248, 0.95) 82%, rgba(255, 230, 246, 0.98) 100%);
    background-size: 250% 100%;
}

.inv-slot:active {
    transform: translateY(0);
}

.inv-slot__icon {
    flex-shrink: 0;
    width: 2.85rem;
    height: 2.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(212, 175, 55, 0.07);
    border: 1px solid rgba(212, 175, 55, 0.22);
    font-size: 1.15rem;
}

.inv-slot--mythic .inv-slot__icon {
    position: relative;
    overflow: visible;
    z-index: 1;
}

.inv-slot--mythic .inv-slot__icon::before {
    content: "";
    position: absolute;
    inset: -20%;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    background:
        conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 245, 210, 0.9) 48deg, rgba(255, 255, 255, 0) 110deg, rgba(255, 170, 84, 0.55) 170deg, rgba(255, 255, 255, 0) 240deg, rgba(167, 139, 250, 0.62) 320deg, rgba(255, 255, 255, 0) 360deg);
    filter: blur(1px) saturate(1.2);
    animation: mythic-icon-rotate 3.6s linear infinite;
    opacity: 0.95;
}

.inv-slot--mythic .inv-slot__icon::after {
    content: "";
    position: absolute;
    inset: -35%;
    border-radius: 50%;
    pointer-events: none;
    z-index: -2;
    background:
        radial-gradient(circle at 26% 24%, rgba(255, 245, 210, 0.88) 0 7%, transparent 8% 100%),
        radial-gradient(circle at 74% 26%, rgba(167, 139, 250, 0.78) 0 6%, transparent 7% 100%),
        radial-gradient(circle at 68% 76%, rgba(244, 114, 182, 0.75) 0 7%, transparent 8% 100%),
        radial-gradient(circle at 32% 72%, rgba(252, 211, 77, 0.8) 0 6%, transparent 7% 100%);
    filter: blur(0.8px);
    animation: mythic-icon-particles 2.8s ease-in-out infinite;
    opacity: 0.78;
}

.inv-slot--chronarch.inv-slot--mythic .inv-slot__icon::before {
    background:
        conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 248, 220, 0.95) 54deg, rgba(255, 255, 255, 0) 120deg, rgba(252, 211, 77, 0.62) 182deg, rgba(255, 255, 255, 0) 248deg, rgba(245, 158, 11, 0.72) 324deg, rgba(255, 255, 255, 0) 360deg);
}

.inv-slot--apexother.inv-slot--mythic .inv-slot__icon::before {
    background:
        conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 230, 246, 0.95) 52deg, rgba(255, 255, 255, 0) 116deg, rgba(244, 114, 182, 0.68) 182deg, rgba(255, 255, 255, 0) 248deg, rgba(129, 140, 248, 0.8) 324deg, rgba(255, 255, 255, 0) 360deg);
}

.inv-slot__icon .eq-weapon-icon {
    margin-right: 0;
}

.inv-slot__icon i,
.inv-equip-btn i {
    margin-right: 0;
}

.inv-slot__meta {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.inv-slot__tier {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: none;
    line-height: 1.2;
}

.inv-slot__name {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
    word-break: break-word;
}

.inv-slot__name--mythic {
    position: relative;
    display: inline-block;
    font-weight: 700;
    letter-spacing: 0.02em;
    filter: saturate(1.2) brightness(1.08);
}

.inv-slot__name--mythic::after {
    content: attr(data-name);
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.55;
    z-index: -1;
    filter: blur(5px);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.1) 18%, rgba(255, 255, 255, 0.95) 36%, rgba(255, 255, 255, 0.12) 54%, rgba(255, 255, 255, 0.95) 72%, rgba(255, 255, 255, 0.18) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: rarity-name-ghost-sheen 2.8s linear infinite;
}

.inv-slot__name.Common {
    text-shadow: 0 0 2px rgba(226, 228, 235, 0.2);
}

.inv-slot__name.Uncommon {
    text-shadow: 0 0 6px rgba(74, 222, 128, 0.32);
}

.inv-slot__name.Rare {
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
}

.inv-slot__name.Epic {
    text-shadow: 0 0 10px rgba(192, 132, 252, 0.48);
}

.inv-slot__name.Legendary {
    text-shadow: 0 0 14px rgba(255, 211, 110, 0.72), 0 0 26px rgba(255, 170, 84, 0.42), 0 0 36px rgba(255, 220, 140, 0.22);
    animation: rarity-name-pulse-legendary 2.4s ease-in-out infinite;
}

.inv-slot__name.Heirloom {
    text-shadow: 0 0 15px rgba(251, 113, 133, 0.72), 0 0 28px rgba(251, 113, 133, 0.45), 0 0 38px rgba(251, 113, 133, 0.25);
    animation: rarity-name-pulse-heirloom 2.3s ease-in-out infinite;
}

.inv-slot__name.Etherbound {
    text-shadow: 0 0 16px rgba(94, 234, 212, 0.74), 0 0 30px rgba(94, 234, 212, 0.44), 0 0 40px rgba(94, 234, 212, 0.24);
    animation: rarity-name-pulse-etherbound 2.2s ease-in-out infinite;
}

.inv-slot__name.StellarSign {
    text-shadow: 0 0 17px rgba(165, 180, 252, 0.78), 0 0 32px rgba(165, 180, 252, 0.5), 0 0 44px rgba(165, 180, 252, 0.28);
    animation: rarity-name-pulse-stellarsign 2.1s ease-in-out infinite;
}

.inv-slot__name.Nullforge {
    text-shadow: 0 0 18px rgba(196, 181, 253, 0.8), 0 0 34px rgba(196, 181, 253, 0.52), 0 0 46px rgba(196, 181, 253, 0.3);
    animation: rarity-name-pulse-nullforge 2s ease-in-out infinite;
}

.inv-slot__name.Chronarch {
    text-shadow: 0 0 20px rgba(252, 211, 77, 0.85), 0 0 38px rgba(252, 211, 77, 0.58), 0 0 52px rgba(252, 211, 77, 0.34);
    animation: rarity-name-pulse-chronarch 1.9s ease-in-out infinite;
    background: linear-gradient(120deg, #fff6cc 0%, #fde68a 28%, #f59e0b 52%, #fde68a 76%, #fff6cc 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0.35px rgba(255, 248, 210, 0.85);
    animation: rarity-name-pulse-chronarch 1.9s ease-in-out infinite, rarity-name-sheen-gold 2.6s linear infinite;
}

.inv-slot__name.Apexother {
    text-shadow: 0 0 22px rgba(244, 114, 182, 0.9), 0 0 42px rgba(167, 139, 250, 0.66), 0 0 58px rgba(244, 114, 182, 0.4);
    background: linear-gradient(120deg, #ffe6f6 0%, #f9a8d4 22%, #c4b5fd 48%, #818cf8 66%, #f9a8d4 84%, #ffe6f6 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0.35px rgba(255, 230, 246, 0.9);
    animation: rarity-name-pulse-apexother 1.75s ease-in-out infinite, rarity-name-sheen-cosmic 2.2s linear infinite;
}

@keyframes rarity-name-pulse-legendary {
    0%, 100% { text-shadow: 0 0 12px rgba(255, 211, 110, 0.62), 0 0 22px rgba(255, 170, 84, 0.34), 0 0 30px rgba(255, 220, 140, 0.16); }
    50% { text-shadow: 0 0 18px rgba(255, 211, 110, 0.9), 0 0 34px rgba(255, 170, 84, 0.6), 0 0 48px rgba(255, 220, 140, 0.34); }
}

@keyframes rarity-name-pulse-heirloom {
    0%, 100% { text-shadow: 0 0 13px rgba(251, 113, 133, 0.62), 0 0 24px rgba(251, 113, 133, 0.34), 0 0 34px rgba(251, 113, 133, 0.18); }
    50% { text-shadow: 0 0 20px rgba(251, 113, 133, 0.9), 0 0 38px rgba(251, 113, 133, 0.62), 0 0 52px rgba(251, 113, 133, 0.34); }
}

@keyframes rarity-name-pulse-etherbound {
    0%, 100% { text-shadow: 0 0 14px rgba(94, 234, 212, 0.62), 0 0 26px rgba(94, 234, 212, 0.34), 0 0 36px rgba(94, 234, 212, 0.18); }
    50% { text-shadow: 0 0 21px rgba(94, 234, 212, 0.92), 0 0 40px rgba(94, 234, 212, 0.64), 0 0 54px rgba(94, 234, 212, 0.34); }
}

@keyframes rarity-name-pulse-stellarsign {
    0%, 100% { text-shadow: 0 0 15px rgba(165, 180, 252, 0.66), 0 0 28px rgba(165, 180, 252, 0.36), 0 0 40px rgba(165, 180, 252, 0.2); }
    50% { text-shadow: 0 0 23px rgba(165, 180, 252, 0.95), 0 0 44px rgba(165, 180, 252, 0.68), 0 0 58px rgba(165, 180, 252, 0.36); }
}

@keyframes rarity-name-pulse-nullforge {
    0%, 100% { text-shadow: 0 0 16px rgba(196, 181, 253, 0.68), 0 0 30px rgba(196, 181, 253, 0.38), 0 0 42px rgba(196, 181, 253, 0.22); }
    50% { text-shadow: 0 0 24px rgba(196, 181, 253, 0.98), 0 0 46px rgba(196, 181, 253, 0.7), 0 0 60px rgba(196, 181, 253, 0.38); }
}

@keyframes rarity-name-pulse-chronarch {
    0%, 100% { text-shadow: 0 0 17px rgba(252, 211, 77, 0.72), 0 0 32px rgba(252, 211, 77, 0.42), 0 0 46px rgba(252, 211, 77, 0.24); }
    50% { text-shadow: 0 0 26px rgba(252, 211, 77, 1), 0 0 50px rgba(252, 211, 77, 0.74), 0 0 66px rgba(252, 211, 77, 0.42); }
}

@keyframes rarity-name-pulse-apexother {
    0%, 100% { text-shadow: 0 0 18px rgba(244, 114, 182, 0.78), 0 0 34px rgba(167, 139, 250, 0.5), 0 0 48px rgba(244, 114, 182, 0.28); }
    50% { text-shadow: 0 0 30px rgba(244, 114, 182, 1), 0 0 56px rgba(167, 139, 250, 0.8), 0 0 74px rgba(244, 114, 182, 0.5); }
}

@keyframes rarity-name-sheen-gold {
    0% { background-position: 0% 50%; }
    100% { background-position: 220% 50%; }
}

@keyframes rarity-name-sheen-cosmic {
    0% { background-position: 0% 50%; }
    100% { background-position: 240% 50%; }
}

@keyframes rarity-name-ghost-sheen {
    0% { background-position: 0% 50%; opacity: 0.35; }
    50% { opacity: 0.62; }
    100% { background-position: 220% 50%; opacity: 0.35; }
}

@keyframes mythic-card-border-sheen {
    0% { background-position: 0% 50%; }
    100% { background-position: 240% 50%; }
}

@keyframes mythic-card-pulse {
    0%, 100% { box-shadow: 0 0 16px rgba(255, 185, 92, 0.18), 0 0 30px rgba(175, 120, 255, 0.11), inset 0 0 12px rgba(255, 255, 255, 0.04); }
    50% { box-shadow: 0 0 28px rgba(255, 194, 106, 0.34), 0 0 52px rgba(175, 120, 255, 0.24), inset 0 0 22px rgba(255, 255, 255, 0.09); }
}

@keyframes mythic-card-aura-breath {
    0%, 100% { transform: scale(0.98); opacity: 0.55; }
    50% { transform: scale(1.03); opacity: 0.88; }
}

@keyframes mythic-icon-rotate {
    0% { transform: rotate(0deg) scale(0.98); }
    50% { transform: rotate(180deg) scale(1.04); }
    100% { transform: rotate(360deg) scale(0.98); }
}

@keyframes mythic-icon-particles {
    0%, 100% { transform: translateY(0) scale(0.96); opacity: 0.56; }
    50% { transform: translateY(-4px) scale(1.06); opacity: 0.9; }
}

@keyframes rarity-card-epic-breath {
    0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 16px rgba(192, 132, 252, 0.14); }
    50% { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), 0 0 28px rgba(192, 132, 252, 0.26); }
}

@keyframes rarity-card-legendary-breath {
    0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 20px rgba(255, 185, 92, 0.2); }
    50% { box-shadow: 0 6px 26px rgba(0, 0, 0, 0.32), 0 0 34px rgba(255, 185, 92, 0.38); }
}

@keyframes rarity-card-heirloom-breath {
    0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 22px rgba(251, 113, 133, 0.24); }
    50% { box-shadow: 0 7px 28px rgba(0, 0, 0, 0.34), 0 0 38px rgba(251, 113, 133, 0.42); }
}

@keyframes rarity-card-enter-common {
    0% { opacity: 0; transform: translateY(2px) scale(0.992); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rarity-card-enter-uncommon {
    0% { opacity: 0; transform: translateY(3px) scale(0.99); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rarity-card-enter-rare {
    0% { opacity: 0; transform: translateY(4px) scale(0.988); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rarity-card-enter-epic {
    0% { opacity: 0; transform: translateY(5px) scale(0.986); filter: brightness(1); }
    55% { filter: brightness(1.06); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes rarity-card-enter-legendary {
    0% { opacity: 0; transform: translateY(7px) scale(0.982); filter: brightness(1); }
    50% { filter: brightness(1.1); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes rarity-card-enter-heirloom {
    0% { opacity: 0; transform: translateY(8px) scale(0.978); filter: brightness(1); }
    48% { filter: brightness(1.13); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes rarity-card-enter-mythic {
    0% { opacity: 0; transform: translateY(10px) scale(0.972); filter: brightness(1); }
    42% { filter: brightness(1.18); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

.inv-panel--wear {
    flex-shrink: 0;
    padding: 0 var(--space-lg) var(--space-lg);
}

.inv-equip-card {
    border-radius: var(--radius-sm);
    border: 1px solid rgba(212, 175, 55, 0.18);
    background: linear-gradient(180deg, rgba(18, 22, 32, 0.95) 0%, rgba(8, 10, 16, 0.88) 100%);
    padding: var(--space-md) var(--space-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.inv-equip-card__hd {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: 0.35rem;
}

.inv-equip-card__eyebrow {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    color: var(--accent);
    opacity: 0.85;
    margin-bottom: 0.2rem;
}

.inv-equip-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gold);
    font-family: var(--font-display);
    letter-spacing: 0.06em;
}

.icon-btn--unequip-all {
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

.icon-btn--unequip-all:hover {
    border-color: rgba(224, 82, 82, 0.45);
    color: var(--danger);
    background: rgba(224, 82, 82, 0.08);
}

.inv-equip-card__hint {
    margin: 0 0 var(--space-md);
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.equip-strip--inv {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: stretch;
}

.inv-equip-slot {
    flex: 0 0 auto;
}

.inv-equip-slot .inv-equip-btn {
    position: relative;
    width: 3.35rem;
    height: 3.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    background: rgba(0, 0, 0, 0.35);
    padding: 0;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    font-size: 1.2rem;
}

.inv-equip-btn__stars {
    position: absolute;
    top: 0.12rem;
    right: 0.12rem;
    font-size: 0.52rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 220, 140, 0.95);
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 1;
}

.inv-equip-slot .inv-equip-btn:hover {
    border-color: rgba(212, 175, 55, 0.45);
    background: rgba(212, 175, 55, 0.1);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.12);
}

.inv-equip-slot__empty {
    width: 3.35rem;
    min-height: 3.35rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.22);
    padding: 0.2rem;
    box-sizing: border-box;
}

.inv-equip-slot__lbl {
    font-size: 0.58rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1.25;
    max-width: 3rem;
}

.inv-equip-slot__ph {
    font-size: 0.72rem;
    color: var(--text-faint);
    margin-top: 0.12rem;
}

#playerInventory {
    min-height: 0;
}

@media (max-width: 520px) {
    #inventory .content {
        width: 100%;
        min-height: min(85dvh, 40rem);
        max-height: 92dvh;
        height: min(92dvh, 40rem);
        border-radius: var(--radius-sm);
    }

    .inv-grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .modal-sheet__head--inv {
        padding: var(--space-md);
    }

    .inv-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .inv-toolbar__filter {
        min-width: 0;
    }
}

#sectPassivesModal .content {
    width: min(100%, 32rem);
    max-height: min(92dvh, 42rem);
}

.modal-sheet--sect-passives {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.modal-sheet__head--sect {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-md) var(--space-sm);
    background: linear-gradient(165deg, rgba(212, 175, 55, 0.09) 0%, rgba(0, 0, 0, 0.2) 48%, rgba(0, 0, 0, 0.35) 100%);
    border-bottom: 1px solid rgba(212, 175, 55, 0.12);
}

.modal-sheet__head-text .modal-sheet__eyebrow {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 0.25rem;
    font-family: var(--font-ui);
    opacity: 0.95;
}

.modal-sheet__head--sect h3 {
    font-size: 1.18rem;
    margin: 0;
    color: var(--text);
    text-shadow: 0 1px 12px rgba(212, 175, 55, 0.12);
}

.icon-btn--sect-close {
    margin-top: 0.15rem;
    border-radius: var(--radius-sm);
    transition: background 0.2s, color 0.2s;
}

.icon-btn--sect-close:hover {
    background: rgba(212, 175, 55, 0.12);
    color: var(--accent);
}

.modal-sheet--sect-passives .sect-passives-modal-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    background: linear-gradient(180deg, rgba(8, 10, 15, 0.35) 0%, rgba(15, 18, 25, 0.5) 100%);
}

#petModal {
    overflow: hidden;
}

html.pet-modal-open,
body.pet-modal-open {
    overflow: hidden;
}

#petModal .content {
    width: min(calc(100vw - 1.25rem), 70rem);
    max-width: 100%;
    height: min(calc(92dvh - env(safe-area-inset-bottom, 0px)), 52rem);
    max-height: min(calc(92dvh - env(safe-area-inset-bottom, 0px)), 52rem);
}

/* —— 灵宠面板 · 修仙卷轴 / 玉简风 —— */
.modal-container--pet {
    background: radial-gradient(ellipse 85% 70% at 50% 40%, rgba(20, 32, 28, 0.55), rgba(4, 6, 12, 0.82));
    overflow-x: hidden;
    overflow-y: hidden;
}

#petModal .modal-sheet--pet {
    border: 1px solid rgba(201, 162, 39, 0.38);
    box-shadow:
        0 0 0 1px rgba(90, 160, 140, 0.12),
        0 24px 64px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    background:
        radial-gradient(ellipse 120% 80% at 0% 0%, rgba(212, 175, 55, 0.07), transparent 52%),
        radial-gradient(ellipse 90% 60% at 100% 100%, rgba(90, 140, 120, 0.06), transparent 50%),
        linear-gradient(168deg, rgba(16, 22, 32, 0.98) 0%, rgba(8, 11, 18, 0.99) 100%);
}

.modal-sheet--pet {
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}

.modal-sheet--pet::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.35;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

.modal-sheet__head--pet {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg) var(--space-sm);
    background:
        linear-gradient(180deg, rgba(32, 42, 38, 0.45) 0%, transparent 100%),
        linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, transparent 28%);
    border-bottom: 1px solid rgba(90, 160, 140, 0.18);
    position: relative;
}

.modal-sheet__head--pet::after {
    content: "";
    position: absolute;
    left: var(--space-lg);
    right: var(--space-lg);
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.28), transparent);
}

.modal-sheet__eyebrow--pet {
    font-family: var(--font-xian);
    font-size: 0.68rem;
    letter-spacing: 0.35em;
    color: rgba(180, 205, 190, 0.75);
    text-transform: none;
}

.modal-sheet__title--pet {
    font-family: var(--font-xian);
    font-size: 1.28rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    margin: 0.2rem 0 0;
    color: #f0e6c8;
    text-shadow: 0 0 24px rgba(212, 175, 55, 0.25);
}

.icon-btn--pet-close {
    margin-top: 0.15rem;
    border-radius: 4px;
    border: 1px solid rgba(201, 162, 39, 0.35);
    background: rgba(0, 0, 0, 0.35);
    color: rgba(220, 200, 150, 0.85);
}

.icon-btn--pet-close:hover {
    background: rgba(90, 160, 140, 0.15);
    color: var(--jade);
    border-color: rgba(90, 184, 154, 0.45);
}

.pet-modal-body {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(40, 52, 48, 0.12) 3px,
            rgba(40, 52, 48, 0.12) 4px
        ),
        linear-gradient(175deg, rgba(12, 16, 22, 0.92) 0%, rgba(6, 9, 14, 0.96) 100%);
}

#petModal .pet-modal-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#petModal .pet-modal-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

#petModal .pet-modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(160, 130, 70, 0.55), rgba(90, 70, 40, 0.65));
    border-radius: 4px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.pet-ui {
    padding: var(--space-md) var(--space-md) calc(var(--space-md) + 0.15rem);
    font-size: 0.86rem;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

.pet-ui__hero {
    display: grid;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
}

.pet-ui__kicker {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pet-ui__title {
    margin: 0.2rem 0 0;
    font-size: 1.05rem;
    color: var(--text);
}

.pet-ui__realm {
    color: var(--accent);
}

.pet-ui__intro-block {
    position: relative;
    margin-bottom: var(--space-sm);
    padding: 0.5rem 0.75rem 0.5rem 1rem;
    border-radius: 2px;
    background:
        linear-gradient(90deg, rgba(212, 175, 55, 0.08) 0%, rgba(0, 0, 0, 0.12) 40%),
        rgba(8, 12, 18, 0.5);
    border: 1px solid rgba(201, 162, 39, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.pet-ui__intro-block::before {
    content: "";
    position: absolute;
    left: 0.45rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 3px;
    border-radius: 1px;
    background: linear-gradient(180deg, rgba(90, 184, 154, 0.55), rgba(212, 175, 55, 0.45));
    box-shadow: 0 0 8px rgba(90, 184, 154, 0.25);
}

.pet-ui__hint {
    margin: 0;
    color: rgba(190, 198, 210, 0.92);
    line-height: 1.5;
    font-size: 0.8rem;
}

.pet-ui__hint strong {
    color: #f2e4b8;
    font-weight: 600;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}

/* 灵宠：左栏列表 · 右栏详情 */
.pet-ui__layout {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1;
    height: 100%;
    gap: var(--space-md);
    min-height: 0;
    position: relative;
}

.pet-ui__layout::before {
    content: "";
    position: absolute;
    left: 33%;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.22), transparent);
    opacity: 0.9;
    pointer-events: none;
}

.pet-ui__col {
    min-width: 0;
}

.pet-ui__col--left {
    flex: 0 1 31%;
    max-width: 35%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pet-ui__col--right {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.pet-ui__roster-head {
    margin: 0 0 0.65rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(90, 160, 140, 0.2);
}

.pet-ui__roster-title {
    margin: 0;
    font-family: var(--font-xian);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.pet-ui__roster-cap {
    color: rgba(230, 215, 175, 0.95);
}

.pet-ui__roster-count {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(160, 170, 185, 0.88);
}

.pet-ui__detail-panel {
    flex: 1;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: var(--space-sm) var(--space-md);
    border-radius: 2px;
    background:
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(212, 175, 55, 0.06), transparent 55%),
        linear-gradient(165deg, rgba(18, 24, 30, 0.75) 0%, rgba(6, 10, 16, 0.82) 100%);
    border: 1px solid rgba(201, 162, 39, 0.28);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    position: relative;
}

.pet-ui__detail-panel::before,
.pet-ui__detail-panel::after {
    content: "◆";
    position: absolute;
    font-size: 0.45rem;
    color: rgba(212, 175, 55, 0.35);
    pointer-events: none;
}

.pet-ui__detail-panel::before {
    top: 0.35rem;
    left: 0.35rem;
}

.pet-ui__detail-panel::after {
    bottom: 0.35rem;
    right: 0.35rem;
}

.pet-ui__detail {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    min-width: 0;
}

.pet-ui__detail-head {
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid rgba(90, 160, 140, 0.15);
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.04), transparent 70%);
}

.pet-ui__realm-line {
    margin: 0.35rem 0 0;
    font-size: 0.84rem;
    font-weight: 600;
    font-family: var(--font-xian);
    color: #d4c896;
    letter-spacing: 0.08em;
}

.pet-ui__section {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(90, 160, 140, 0.12);
}

.pet-ui__section--identity {
    margin-top: 0.55rem;
    padding-top: 0;
    border-top: none;
}

/* 机缘加成 · 斗法推演 并排（窄屏自动纵向堆叠） */
.pet-ui__bonus-combat-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-lg);
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(90, 160, 140, 0.12);
}

.pet-ui__bonus-combat-row .pet-ui__section {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    flex: 1 1 0;
    min-width: 0;
}

.pet-ui__bonus-combat-row .pet-ui__section--combat {
    padding-left: var(--space-md);
    border-left: 1px solid rgba(90, 160, 140, 0.15);
}

.pet-ui__section-title {
    margin: 0 0 0.4rem;
    font-size: 0.88rem;
    font-weight: 700;
    font-family: var(--font-xian);
    letter-spacing: 0.1em;
    color: rgba(230, 220, 195, 0.95);
}

.pet-ui__section-title::before {
    content: "「";
    opacity: 0.45;
    margin-right: 0.15em;
}

.pet-ui__section-title::after {
    content: "」";
    opacity: 0.45;
    margin-left: 0.15em;
}

.pet-ui__section--combat .pet-ui__section-title::before,
.pet-ui__section--combat .pet-ui__section-title::after {
    content: none;
    margin: 0;
}

.pet-ui__section--combat .pet-ui__section-title {
    letter-spacing: 0.06em;
}

.pet-ui__section--combat .pet-ui__section-title::before {
    content: "";
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.4rem;
    vertical-align: middle;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.6), transparent 70%);
}

.pet-ui__section-tag {
    margin-left: 0.35rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.62rem;
    font-weight: 600;
    vertical-align: middle;
    border-radius: 2px;
    font-family: var(--font-xian);
    letter-spacing: 0.08em;
    color: rgba(40, 32, 20, 0.92);
    background: linear-gradient(165deg, #e8d49a 0%, #b89850 100%);
    border: 1px solid rgba(120, 90, 40, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.pet-ui__section-note {
    margin: 0 0 0.45rem;
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.pet-ui__type-readonly {
    margin: 0 0 0.5rem;
    line-height: 1.5;
}

.pet-ui__type-lock {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 400;
}

.pet-ui__stats--cols {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 0.45rem;
}

.pet-ui__stats--cols li {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.38rem 0.45rem;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(201, 162, 39, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.pet-ui__stat-name {
    color: rgba(170, 180, 195, 0.9);
    font-size: 0.72rem;
    line-height: 1.25;
    flex: none;
    min-width: 0;
}

.pet-ui__stat-pct {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #e8c86a;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
    font-size: 0.76rem;
    line-height: 1.2;
    width: 100%;
    text-align: right;
    align-self: flex-end;
}

.pet-ui__stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 0.5rem;
}

.pet-ui__stat-cell {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.4rem 0.45rem;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(90, 160, 140, 0.18);
}

.pet-ui__stat-cell--wide {
    grid-column: 1 / -1;
}

.pet-ui__stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.pet-ui__stat-val {
    font-size: 0.92rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

@media (max-width: 640px) {
    .pet-ui__layout::before {
        display: none;
    }

    .pet-ui__layout {
        flex-direction: column;
        min-height: 0;
    }

    .pet-ui__col--left {
        max-width: none;
        flex: 0 0 auto;
    }

    .pet-ui__col--right {
        flex: 1 1 auto;
    }

    .pet-ui__bonus-combat-row {
        flex-direction: column;
        gap: 0.65rem;
    }

    .pet-ui__bonus-combat-row .pet-ui__section--combat {
        padding-left: 0;
        border-left: none;
        padding-top: 0.65rem;
        border-top: 1px solid rgba(90, 160, 140, 0.12);
    }
}

.pet-ui__expbar {
    position: relative;
    height: 1.5rem;
    border-radius: 2px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(20, 28, 32, 0.4));
    border: 1px solid rgba(90, 160, 140, 0.25);
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45);
}

.pet-ui__expbar--jade .pet-ui__expbar-fill {
    background: linear-gradient(
        90deg,
        rgba(70, 140, 120, 0.75) 0%,
        rgba(90, 184, 154, 0.55) 35%,
        rgba(212, 175, 55, 0.42) 100%
    );
    box-shadow: 0 0 16px rgba(90, 184, 154, 0.25);
}

.pet-ui__expbar-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(138, 99, 210, 0.55), rgba(212, 175, 55, 0.35));
    transition: width 0.25s ease;
}

.pet-ui__expbar-lbl {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--font-xian);
    letter-spacing: 0.06em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    color: rgba(248, 244, 230, 0.95);
}

.pet-ui__grid {
    display: grid;
    gap: var(--space-md);
}

@media (min-width: 540px) {
    .pet-ui__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.pet-ui__card {
    padding: var(--space-md);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.1);
}

.pet-ui__card h5 {
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    color: var(--accent);
}

.pet-ui__roots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.4rem 0 0.45rem;
}

.pet-root-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    padding: 0.28rem 0.42rem;
    border-radius: 2px;
    font-size: 0.74rem;
    font-family: var(--font-xian);
    letter-spacing: 0.06em;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(165deg, rgba(28, 36, 44, 0.9), rgba(12, 16, 22, 0.95));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 4px rgba(0, 0, 0, 0.35);
}

.pet-root-tag--metal { border-color: rgba(212, 175, 55, 0.45); color: #e8d49a; }
.pet-root-tag--wood { border-color: rgba(90, 180, 120, 0.45); color: #a8ddb8; }
.pet-root-tag--water { border-color: rgba(90, 160, 220, 0.45); color: #a8c8f0; }
.pet-root-tag--fire { border-color: rgba(220, 100, 80, 0.5); color: #f0a898; }
.pet-root-tag--earth { border-color: rgba(180, 140, 90, 0.45); color: #d8c4a0; }

.pet-ui__lbl {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0.25rem;
}

.pet-ui__select {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(212, 175, 55, 0.18);
    color: var(--text);
}

.pet-ui__muted {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 0.45rem 0 0.5rem;
    line-height: 1.4;
}

.pet-ui__stats {
    margin: 0;
    padding-left: 1.1rem;
    line-height: 1.55;
}

.pet-ui--collection .pet-ui__roster {
    flex: 1;
    min-height: 0;
    margin-bottom: 0;
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border-radius: 2px;
    background:
        linear-gradient(180deg, rgba(20, 28, 32, 0.5) 0%, rgba(8, 12, 18, 0.65) 100%);
    border: 1px solid rgba(201, 162, 39, 0.2);
    overflow: hidden;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.25);
}

.pet-ui--collection .pet-ui__roster h5 {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--accent);
}

.pet-ui--collection .pet-ui__roster-list {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 0.1rem;
}

.pet-roster__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 0.5rem;
    align-items: center;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.4rem;
    border-radius: 2px;
    cursor: pointer;
    border: 1px solid rgba(201, 162, 39, 0.12);
    background: rgba(8, 12, 18, 0.45);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.pet-roster__row:hover {
    border-color: rgba(90, 160, 140, 0.35);
    background: rgba(20, 32, 28, 0.35);
}

.pet-roster__row--focus {
    border-color: rgba(212, 175, 55, 0.42);
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.1), rgba(8, 12, 18, 0.5));
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.08);
}

.pet-roster__name {
    font-weight: 600;
    font-family: var(--font-xian);
    letter-spacing: 0.06em;
    color: rgba(236, 230, 215, 0.96);
}

.pet-roster__meta {
    font-size: 0.72rem;
    color: rgba(160, 170, 185, 0.9);
    grid-column: 1 / -1;
}

.pet-roster__acts {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.pet-roster__totem {
    color: #c9a227;
    margin-right: 0.35rem;
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.45));
}

.pet-ui--xian .pet-roster__acts .btn--sm {
    font-family: var(--font-xian);
    letter-spacing: 0.06em;
    border-radius: 2px;
}

.pet-ui--xian .pet-roster__acts .btn--ghost {
    border-color: rgba(201, 162, 39, 0.28);
    background: rgba(0, 0, 0, 0.25);
}

.pet-ui--xian .pet-roster__acts .btn--ghost:hover {
    border-color: rgba(90, 184, 154, 0.45);
    color: var(--jade);
}

.pet-ui--xian .pet-roster__acts .btn--accent {
    background: linear-gradient(165deg, rgba(90, 140, 120, 0.35), rgba(40, 60, 52, 0.6));
    border-color: rgba(90, 184, 154, 0.45);
    color: #c8f0e4;
}

.pet-roster__badge {
    font-size: 0.68rem;
    font-family: var(--font-xian);
    letter-spacing: 0.12em;
    color: rgba(200, 190, 160, 0.85);
    line-height: 1.8;
    padding: 0.1rem 0.35rem;
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.2);
}

.pet-ui__detail-title {
    margin: 0;
    font-size: 1.12rem;
    font-family: var(--font-xian);
    letter-spacing: 0.14em;
    color: #f5ecd8;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

.pet-ui__empty {
    color: rgba(160, 170, 185, 0.95);
    font-size: 0.84rem;
    line-height: 1.55;
}

/* —— 门派功法 · 新布局 —— */
.sect-ui {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    font-size: 0.86rem;
}

.sect-ui__hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-md);
    align-items: start;
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
    background: radial-gradient(ellipse 80% 120% at 0% 0%, rgba(212, 175, 55, 0.06), transparent 55%);
}

.sect-ui__kicker {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.sect-ui__sect-title {
    font-size: 1.05rem;
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    color: var(--gold);
    margin: 0 0 0.4rem;
    font-weight: 600;
}

.sect-ui__weapon-type {
    font-weight: 500;
    font-size: 0.92em;
    color: rgba(180, 215, 200, 0.88);
    letter-spacing: 0.04em;
}

.sect-ui__blurb {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.sect-ui__hero-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    min-width: 7.5rem;
}

.sect-ui__slots-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    padding: 0.45rem 0.55rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(212, 175, 55, 0.22);
    background: rgba(0, 0, 0, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.sect-ui__slots-label {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.sect-ui__slot-dots {
    display: flex;
    gap: 0.4rem;
}

.sect-ui__slot-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.35);
    transition: background 0.2s, box-shadow 0.2s;
}

.sect-ui__slot-dot.is-on {
    background: linear-gradient(145deg, var(--gold) 0%, var(--accent) 100%);
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 0 10px var(--accent-glow);
}

.sect-ui__slots-num {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.sect-ui__rule {
    margin: 0;
    font-size: 0.68rem;
    color: var(--text-muted);
    text-align: right;
    max-width: 9rem;
    line-height: 1.4;
}

.sect-ui__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-sm) var(--space-md) var(--space-md);
    -webkit-overflow-scrolling: touch;
}

.sect-ui__scroll::-webkit-scrollbar {
    width: 6px;
}

.sect-ui__scroll::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.22);
    border-radius: 4px;
}

.sect-ui__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.sect-ui__card {
    position: relative;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: rgba(0, 0, 0, 0.22);
    padding: 0.55rem 0.65rem 0.6rem;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.sect-ui__card:hover {
    border-color: rgba(212, 175, 55, 0.2);
    background: rgba(22, 27, 38, 0.55);
}

.sect-ui__card--on {
    padding-left: 0.85rem;
    border-color: rgba(212, 175, 55, 0.42);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.07) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.sect-ui__card--on::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6rem;
    bottom: 0.6rem;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(180deg, var(--gold), var(--accent));
    opacity: 0.9;
}

.sect-ui__card--locked {
    opacity: 0.78;
}

.sect-ui__card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.45rem 0.55rem;
    margin-bottom: 0.4rem;
}

.sect-ui__idx {
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    opacity: 0.85;
    min-width: 1.4rem;
}

.sect-ui__title-row {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.sect-ui__name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    letter-spacing: 0.02em;
}

.sect-ui__badge-on {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 0.12rem 0.35rem;
    border-radius: 999px;
    background: var(--accent-dim);
    color: var(--gold);
    border: 1px solid rgba(212, 175, 55, 0.28);
}

.sect-ui__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
}

.sect-ui__pill {
    font-size: 0.68rem;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
}

.sect-ui__pill--cost {
    color: var(--gold);
    border-color: rgba(240, 208, 96, 0.25);
    background: rgba(240, 208, 96, 0.06);
}

.sect-ui__pill--cost i {
    margin-right: 0.25rem;
    font-size: 0.65rem;
    opacity: 0.9;
}

.sect-ui__pill--free {
    color: var(--text-muted);
    border-style: dashed;
}

.sect-ui__desc {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.sect-ui__foot {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.1rem;
}

.sect-ui__btn {
    min-width: 4.2rem;
}

.sect-ui--empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    padding: var(--space-lg);
}

.sect-ui__empty-inner {
    text-align: center;
    max-width: 14rem;
}

.sect-ui__empty-inner i {
    font-size: 2.25rem;
    color: var(--accent);
    opacity: 0.45;
    margin-bottom: var(--space-md);
    display: block;
}

.sect-ui__empty-inner p {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
    color: var(--text);
}

.sect-ui__empty-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

@media (max-width: 540px) {
    .sect-ui__hero {
        grid-template-columns: 1fr;
    }

    .sect-ui__hero-side {
        align-items: stretch;
        width: 100%;
        min-width: 0;
    }

    .sect-ui__slots-box {
        align-items: stretch;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

    .sect-ui__rule {
        text-align: left;
        max-width: none;
        width: 100%;
    }
}

/* 武器图标：统一框线与尺寸，与十二品类成套 */
.eq-weapon-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.28em;
    height: 1.28em;
    margin-right: 0.14em;
    vertical-align: -0.14em;
    border-radius: 0.2em;
    background: rgba(180, 140, 60, 0.08);
    border: 1px solid rgba(180, 140, 60, 0.22);
}
.eq-weapon-icon .ra,
.eq-weapon-icon .fas {
    font-size: 1.12em;
    line-height: 1;
    color: var(--gold);
    opacity: 0.94;
}
.eq-weapon-icon .eq-weapon-icon__speartip {
    font-size: 1.02em;
    transform: scaleY(1.5);
    color: #f0d878;
}
.eq-weapon-icon .eq-weapon-icon__glaive {
    transform: scaleX(-1) scale(0.94);
    opacity: 0.9;
}
.eq-weapon-icon .fa-slash {
    transform: rotate(105deg);
    font-size: 1.05em;
}

/* ===== 模态层 ===== */
.modal-container {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 100;
    padding: var(--space-md);
    padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
    background: rgba(4, 6, 12, 0.76);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 塑道本源：整块面板一次排开，不嵌套内层滚动条；内容过高时由整层模态滚动（:has + 类名双保险） */
#defaultModal:has(.content.allocate-sheet),
#defaultModal.modal-container--allocate {
    overflow-y: auto;
    overflow-x: hidden;
    align-items: flex-start;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-top: max(var(--space-md), env(safe-area-inset-top));
    padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
}

.modal-container .content {
    background: var(--bg-card);
    color: var(--text);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    max-width: min(var(--app-max), 100%);
    max-height: min(92dvh, 44rem);
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.modal-container .content .button-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.modal-sheet__head {
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--border-subtle);
}

.modal-sheet__head h3 {
    margin: 0;
}

#equipmentInfo .content {
    padding: var(--space-md) var(--space-lg);
    gap: 0.55rem;
    /* 套装说明等较长时勿裁切底部；flex 子项需 min-height:0 才能在 max-height 内滚动 */
    min-height: 0;
    max-height: min(92dvh, 44rem);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

#equipmentInfo .content > h3 {
    font-size: 0.86rem;
    line-height: 1.32;
    margin: 0 0 0.3rem;
}

#equipmentInfo .content.content--eq-compare {
    max-width: min(46rem, 96vw);
    width: 100%;
}

#equipmentInfo .button-container--eq {
    flex-wrap: wrap;
    gap: 0.38rem;
    margin-top: 0.15rem;
}

#equipmentInfo .button-container--eq button {
    font-size: 0.74rem;
    padding: 0.26rem 0.5rem;
}

#equipmentInfo .eq-gem-actions .btn.btn--sm {
    font-size: 0.58rem;
    padding: 0.14rem 0.32rem;
}

#equipmentInfo .btn-item-lock {
    min-height: 2.1rem;
    padding: 0.38rem 0.72rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: rgba(0, 0, 0, 0.35);
    color: var(--gold);
    cursor: pointer;
    font-size: 0.76rem;
}

#equipmentInfo .btn-item-lock:hover {
    background: rgba(212, 175, 55, 0.1);
}

#equipmentInfo #sell-equip:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#equipmentInfo .content ul {
    margin: 0;
    padding-left: 1rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.42;
}

#equipmentInfo .eq-compare__slot-hint {
    font-size: 0.56rem;
}

#equipmentInfo .eq-compare__panel h3 {
    font-size: 0.78rem;
}

#equipmentInfo .eq-compare__panel h4.eq-compare__kicker {
    font-size: 0.56rem;
}

#equipmentInfo .eq-compare__ul {
    font-size: 0.66rem;
}

#equipmentInfo .eq-compare__slot-empty {
    font-size: 0.64rem;
}

/* 行囊 · 与同槽已装备对比 */
.eq-compare {
    width: 100%;
}

.eq-compare__slot-hint {
    margin: 0 0 0.5rem;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.eq-compare__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
    align-items: start;
}

.eq-compare__panel {
    min-width: 0;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(212, 175, 55, 0.22);
    background: rgba(0, 0, 0, 0.22);
}

.eq-compare__panel--new {
    border-color: rgba(120, 180, 160, 0.35);
}

.eq-compare__kicker {
    margin: 0 0 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: none;
    color: rgba(180, 200, 190, 0.85);
}

.eq-compare__panel h3 {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
    line-height: 1.35;
    word-break: break-word;
}

.eq-compare__slot-empty {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.76rem;
    color: rgba(160, 160, 170, 0.9);
    line-height: 1.45;
}

.eq-compare__ul {
    margin: 0;
    padding-left: 1rem;
    list-style: disc;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.5;
}

.eq-compare__ul li {
    margin: 0.15rem 0;
}

.eq-compare-stat-txt {
    word-break: break-word;
}

.eq-diff {
    display: inline-block;
    margin-left: 0.2rem;
    font-size: 0.75em;
    font-weight: 700;
    vertical-align: middle;
}

.eq-diff--up {
    color: #5fd89a;
}

.eq-diff--down {
    color: #e86b6b;
}

.eq-diff--same {
    color: rgba(150, 155, 170, 0.65);
}

.eq-swap-delta {
    margin-left: 0.25rem;
    font-size: 0.82em;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 520px) {
    .eq-compare__cols {
        grid-template-columns: 1fr;
    }
}

#menuModal .content {
    min-width: min(18rem, 100%);
    padding: 0;
    display: grid;
    gap: 0;
}

#menuModal .content-head {
    padding: var(--space-md);
    grid-column: 1 / -1;
}

#menuModal .content > button {
    margin: 0 var(--space-md);
    width: calc(100% - 2 * var(--space-md));
    justify-content: flex-start;
    border-radius: var(--radius-sm);
}

#menuModal .content > button + button {
    margin-top: 0;
}

#menuModal .content > button:first-of-type {
    margin-top: var(--space-sm);
}

#menuModal .content > button:last-of-type {
    margin-bottom: var(--space-md);
}

#defaultModal .content {
    padding: var(--space-lg);
    gap: var(--space-md);
}

#defaultModal .content-head {
    padding: 0;
    margin-bottom: 0.2rem;
}

#settings-save-tab .settings-profile-block {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
}

#settings-save-tab .settings-profile-block__title {
    margin: 0;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    text-transform: none;
}

#settings-save-tab .settings-profile-block__lbl {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
}

#settings-save-tab .settings-profile-block__avatar-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.15rem;
}

#settings-save-tab .settings-profile-block__avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

#settings-save-tab .settings-profile-block__hint {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-faint);
    line-height: 1.35;
}

#settings-save-tab .settings-avatar-preview {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background:
        radial-gradient(circle at 32% 28%, rgba(228, 199, 106, 0.35), transparent 55%),
        radial-gradient(circle at 70% 80%, rgba(90, 184, 154, 0.15), transparent 45%),
        linear-gradient(160deg, #1a2230, #0c1018);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#settings-save-tab .settings-avatar-preview::before {
    content: "炁";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-xian);
    font-size: 1.1rem;
    color: rgba(242, 213, 122, 0.88);
}

#settings-save-tab .settings-avatar-preview.settings-avatar-preview--custom::before {
    content: none;
}

#settings-save-tab .settings-avatar-preview.settings-avatar-preview--custom {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#settings-save-tab .settings-save-divider {
    margin: 0.5rem 0 0.1rem;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    opacity: 0.95;
}

#update-log-tab .update-log-body {
    max-height: min(52dvh, 20rem);
    overflow-y: auto;
    text-align: left;
    -webkit-overflow-scrolling: touch;
}

#update-log-tab .update-log__date {
    margin: 0 0 0.65rem;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--gold);
    opacity: 0.92;
}

#update-log-tab .update-log__item {
    margin: 0.4rem 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* —— 塑道本源（开局加点） —— */
#defaultModal .content.allocate-sheet {
    /* 覆盖 .modal-container .content 的 flex，否则 max-height 下子项 flex-shrink 会把说明区压扁并与按钮重叠 */
    display: block;
    max-width: min(38rem, 100%);
    /* 不设 max-height：与门派说明、按钮一并完整展示；视口不够时由 #defaultModal 外层滚动 */
    max-height: none;
    overflow: visible;
    padding: var(--space-lg);
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    margin: auto 0;
    flex-shrink: 0;
}

.allocate-sheet__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
}

.allocate-sheet__head h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0.08em;
}

.allocate-sheet__sub {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.allocate-sheet__close {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.allocate-sheet__close:hover {
    color: var(--text);
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.04);
}

.allocate-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--space-sm);
}

.allocate-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.92rem;
}

.allocate-stat-row:last-of-type {
    border-bottom: none;
}

.allocate-stat-row__label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    color: var(--text);
}

.allocate-stat-row__label i {
    color: var(--accent);
    opacity: 0.9;
    width: 1.1rem;
    text-align: center;
}

.allocate-stat-row__stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.allocate-stat-row__stepper button {
    min-width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: rgba(0, 0, 0, 0.35);
    color: var(--text);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.allocate-stat-row__stepper button:hover {
    border-color: var(--accent);
    background: rgba(180, 140, 60, 0.12);
}

.allocate-stat-row__num {
    min-width: 1.25rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--accent);
}

.allocate-points-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin: var(--space-md) 0 var(--space-sm);
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-subtle);
}

.allocate-points-row__pts {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

.allocate-sect-heading {
    margin: var(--space-md) 0 var(--space-sm);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: none;
    color: var(--text-muted);
    font-weight: 600;
}

.allocate-sect-heading--info {
    margin-top: var(--space-lg);
    margin-bottom: 0.4rem;
}

.allocate-sect-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem 0.4rem;
    align-content: start;
}

.allocate-sect-card {
    margin: 0;
    padding: 0.5rem 0.3rem;
    min-height: 2.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.22);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    text-align: center;
    font: inherit;
}

.allocate-sect-card:hover {
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.04);
}

.allocate-sect-card.is-selected {
    border-color: var(--gold);
    background: rgba(180, 140, 60, 0.12);
    box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.25);
}

.allocate-sect-card__name {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    word-break: keep-all;
}

.allocate-sect-blurb {
    margin-top: var(--space-md);
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: rgba(0, 0, 0, 0.2);
    min-height: min-content;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: visible;
    width: 100%;
}

.allocate-sect-blurb__text {
    margin: 0;
    padding: 0;
}

.allocate-sect-weapon {
    display: block;
    margin: 0.65rem 0 0;
    padding: 0.65rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    line-height: 1.5;
    color: rgba(180, 215, 200, 0.9);
}

.allocate-confirm-btn {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    justify-content: center;
}

@media (max-width: 520px) {
    #defaultModal .content.allocate-sheet {
        max-width: 100%;
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
    .allocate-sect-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem 0.35rem;
    }
    .allocate-sect-card__name {
        font-size: 0.76rem;
    }
}

@media (max-width: 360px) {
    .allocate-sect-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ===== 战斗界面 ===== */
#combatPanel .content.combat-sheet {
    max-height: min(94dvh, 48rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(212, 175, 55, 0.22);
    background: linear-gradient(165deg, rgba(18, 22, 34, 0.98) 0%, rgba(8, 10, 18, 0.98) 100%);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}

.combat-sheet__head {
    padding: 0.65rem var(--space-md);
    background: linear-gradient(90deg, rgba(120, 32, 48, 0.45) 0%, rgba(40, 18, 28, 0.55) 50%, rgba(18, 22, 32, 0.9) 100%);
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}

.combat-sheet__head-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.combat-sheet__badge {
    font-family: var(--font-xian, var(--font-display));
    font-size: 1.05rem;
    letter-spacing: 0.45em;
    color: #f0c8c8;
    text-shadow: 0 0 18px rgba(220, 90, 90, 0.45);
}

.combat-sheet__sub {
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    color: rgba(200, 206, 220, 0.55);
}

.combat-sheet__body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: var(--space-md);
}

/* 人物卡与灵兽卡并排；无灵兽时人物仍占满一行 */
.combat-sheet__player-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.65rem;
    width: 100%;
    min-width: 0;
}

.combat-sheet__player-row .combat-card--player {
    flex: 1 1 0;
    min-width: 0;
}

.combat-sheet__player-row .combat-card--pet {
    flex: 0 1 40%;
    max-width: 44%;
    min-width: 0;
}

@media (max-width: 480px) {
    .combat-sheet__player-row {
        flex-direction: column;
    }

    .combat-sheet__player-row .combat-card--pet {
        flex: 1 1 auto;
        max-width: none;
    }
}

.combat-card {
    border-radius: 12px;
    padding: var(--space-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.combat-card--enemy {
    background: linear-gradient(145deg, rgba(48, 22, 28, 0.35) 0%, rgba(12, 14, 22, 0.55) 100%);
    border-color: rgba(200, 80, 80, 0.18);
}

.combat-card--player {
    background: linear-gradient(145deg, rgba(22, 36, 52, 0.45) 0%, rgba(10, 12, 20, 0.55) 100%);
    border-color: rgba(100, 140, 200, 0.2);
}

.combat-card--pet {
    background: linear-gradient(145deg, rgba(28, 48, 38, 0.48) 0%, rgba(10, 18, 14, 0.58) 100%);
    border-color: rgba(120, 200, 150, 0.22);
}

.combat-avatar--pet {
    background: radial-gradient(circle at 32% 30%, rgba(90, 180, 120, 0.45), rgba(12, 28, 18, 0.92));
    color: #a8f0c0;
    border-color: rgba(140, 220, 160, 0.35);
}

.combat-card__badge--pet {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(160, 235, 185, 0.9);
    margin-bottom: 0.15rem;
}

.combat-pet-name {
    color: #b8f5d0;
    font-weight: 600;
}

.combat-card__row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.combat-avatar {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    border: 1px solid rgba(212, 175, 55, 0.25);
}

.combat-avatar--enemy {
    background: radial-gradient(circle at 30% 30%, rgba(180, 60, 60, 0.35), rgba(20, 12, 16, 0.9));
    color: #e8a0a0;
}

/* 敌阵头像 · 妖躯品质（凡物→劫主） */
.combat-avatar--enemy.combat-avatar--qt {
    transition: border-color 0.2s, box-shadow 0.2s, color 0.2s, background 0.2s;
}

.combat-avatar--enemy.combat-avatar--qt-0 {
    background: radial-gradient(circle at 32% 28%, rgba(140, 140, 150, 0.5), rgba(16, 16, 22, 0.94));
    border-color: rgba(170, 175, 190, 0.45);
    color: #d1d5dc;
}

.combat-avatar--enemy.combat-avatar--qt-1 {
    background: radial-gradient(circle at 32% 28%, rgba(120, 140, 160, 0.42), rgba(14, 20, 28, 0.94));
    border-color: rgba(130, 170, 210, 0.45);
    color: #b8d4ee;
    box-shadow: 0 0 12px rgba(100, 160, 220, 0.15);
}

.combat-avatar--enemy.combat-avatar--qt-2 {
    background: radial-gradient(circle at 32% 28%, rgba(90, 140, 90, 0.4), rgba(12, 22, 14, 0.94));
    border-color: rgba(110, 190, 120, 0.42);
    color: #a8e8b0;
}

.combat-avatar--enemy.combat-avatar--qt-3 {
    background: radial-gradient(circle at 32% 28%, rgba(70, 120, 180, 0.42), rgba(10, 16, 28, 0.94));
    border-color: rgba(100, 160, 230, 0.48);
    color: #9ec8ff;
}

.combat-avatar--enemy.combat-avatar--qt-4 {
    background: radial-gradient(circle at 32% 28%, rgba(130, 80, 180, 0.4), rgba(22, 10, 28, 0.94));
    border-color: rgba(180, 120, 230, 0.5);
    color: #d8b8ff;
    box-shadow: 0 0 14px rgba(150, 100, 220, 0.22);
}

.combat-avatar--enemy.combat-avatar--qt-5 {
    background: radial-gradient(circle at 32% 28%, rgba(180, 100, 60, 0.45), rgba(28, 12, 8, 0.94));
    border-color: rgba(230, 150, 90, 0.52);
    color: #ffd0a8;
    box-shadow: 0 0 16px rgba(220, 120, 60, 0.25);
}

.combat-avatar--enemy.combat-avatar--qt-6 {
    background: radial-gradient(circle at 32% 28%, rgba(200, 70, 50, 0.48), rgba(32, 10, 8, 0.95));
    border-color: rgba(255, 140, 100, 0.55);
    color: #ffc4a8;
    box-shadow: 0 0 18px rgba(240, 90, 50, 0.3);
}

.combat-avatar--enemy.combat-avatar--qt-7 {
    background: radial-gradient(circle at 32% 28%, rgba(220, 180, 60, 0.42), rgba(36, 24, 6, 0.95));
    border-color: rgba(255, 210, 120, 0.58);
    color: #ffe8a0;
    box-shadow: 0 0 20px rgba(255, 200, 80, 0.32);
}

.combat-avatar--enemy.combat-avatar--qt-8 {
    background: radial-gradient(circle at 32% 28%, rgba(180, 60, 120, 0.48), rgba(28, 6, 22, 0.95));
    border-color: rgba(255, 120, 180, 0.52);
    color: #ffb8e0;
    box-shadow: 0 0 22px rgba(255, 80, 160, 0.35);
}

.combat-avatar--enemy.combat-avatar--qt-9 {
    background: radial-gradient(circle at 32% 28%, rgba(200, 40, 160, 0.52), rgba(40, 4, 32, 0.96));
    border-color: rgba(255, 160, 240, 0.6);
    color: #ffe0fc;
    box-shadow: 0 0 0 1px rgba(255, 120, 220, 0.25), 0 0 26px rgba(220, 60, 200, 0.42);
}

.combat-card__quality {
    margin: 0.28rem 0 0;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    font-weight: 600;
}

.combat-card__quality--t0 { color: rgba(180, 186, 198, 0.92); }
.combat-card__quality--t1 { color: rgba(150, 190, 230, 0.95); }
.combat-card__quality--t2 { color: rgba(140, 220, 160, 0.95); }
.combat-card__quality--t3 { color: rgba(140, 190, 255, 0.95); }
.combat-card__quality--t4 { color: rgba(200, 160, 255, 0.95); }
.combat-card__quality--t5 { color: rgba(255, 180, 120, 0.96); }
.combat-card__quality--t6 { color: rgba(255, 150, 120, 0.96); }
.combat-card__quality--t7 { color: rgba(255, 220, 140, 0.98); }
.combat-card__quality--t8 { color: rgba(255, 160, 200, 0.96); }
.combat-card__quality--t9 {
    color: rgba(255, 200, 245, 0.98);
    text-shadow: 0 0 12px rgba(255, 120, 200, 0.35);
}

/* BOSS：层主 / 秘境主宰（张扬：扫光、呼吸光晕、标题辉光、标签律动） */
.combat-card--enemy.combat-card--boss-guardian,
.combat-card--enemy.combat-card--boss-sboss {
    position: relative;
    isolation: isolate;
    border-width: 1px;
}

.combat-card--enemy.combat-card--boss-guardian {
    border-color: rgba(255, 210, 120, 0.55);
    background:
        radial-gradient(ellipse 120% 80% at 10% 0%, rgba(255, 200, 100, 0.18) 0%, transparent 55%),
        linear-gradient(155deg, rgba(64, 38, 22, 0.62) 0%, rgba(8, 6, 4, 0.9) 100%);
    box-shadow:
        0 0 0 1px rgba(255, 200, 100, 0.22),
        0 0 28px rgba(255, 160, 40, 0.28),
        0 0 56px rgba(200, 100, 20, 0.12),
        inset 0 0 52px rgba(120, 60, 24, 0.16);
    animation: combat-boss-card-glow-guardian 2.8s ease-in-out infinite;
}

.combat-card--enemy.combat-card--boss-guardian::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 38%,
        rgba(255, 255, 255, 0.14) 50%,
        transparent 62%,
        transparent 100%
    );
    background-size: 220% 100%;
    animation: combat-boss-shimmer 2.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
}

.combat-card--enemy.combat-card--boss-guardian::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    box-shadow:
        inset 0 0 0 1px rgba(255, 220, 160, 0.45),
        inset 0 0 24px rgba(255, 180, 60, 0.08);
    animation: combat-boss-border-breathe-g 3.2s ease-in-out infinite;
}

.combat-card--enemy.combat-card--boss-sboss {
    border-color: rgba(220, 120, 255, 0.58);
    background:
        radial-gradient(ellipse 130% 90% at 90% 10%, rgba(200, 80, 255, 0.22) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 20% 80%, rgba(120, 40, 180, 0.2) 0%, transparent 45%),
        linear-gradient(155deg, rgba(56, 18, 52, 0.58) 0%, rgba(4, 2, 12, 0.94) 100%);
    box-shadow:
        0 0 0 1px rgba(220, 100, 255, 0.28),
        0 0 36px rgba(180, 60, 220, 0.35),
        0 0 72px rgba(100, 30, 160, 0.2),
        inset 0 0 60px rgba(80, 20, 100, 0.22);
    animation: combat-boss-card-glow-sboss 2.6s ease-in-out infinite;
}

.combat-card--enemy.combat-card--boss-sboss::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(200, 100, 255, 0.12) 48%,
        rgba(255, 180, 255, 0.18) 50%,
        rgba(200, 100, 255, 0.12) 52%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: combat-boss-shimmer-s 2.4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
}

.combat-card--enemy.combat-card--boss-sboss::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    box-shadow:
        inset 0 0 0 1px rgba(230, 140, 255, 0.5),
        inset 0 0 28px rgba(180, 60, 220, 0.12);
    animation: combat-boss-border-breathe-s 2.9s ease-in-out infinite;
}

.combat-card--enemy.combat-card--boss-guardian .combat-card__row,
.combat-card--enemy.combat-card--boss-sboss .combat-card__row {
    position: relative;
    z-index: 2;
}

.combat-card--enemy.combat-card--boss-guardian .combat-bar,
.combat-card--enemy.combat-card--boss-sboss .combat-bar,
.combat-card--enemy.combat-card--boss-guardian .combat-card__dmg,
.combat-card--enemy.combat-card--boss-sboss .combat-card__dmg {
    position: relative;
    z-index: 2;
}

.combat-card--enemy.combat-card--boss-guardian .combat-card__title {
    color: #fff8e8;
    text-shadow:
        0 0 10px rgba(255, 200, 80, 0.85),
        0 0 24px rgba(255, 140, 40, 0.55),
        0 0 40px rgba(200, 100, 30, 0.25);
}

.combat-card--enemy.combat-card--boss-sboss .combat-card__title {
    color: #fff4ff;
    text-shadow:
        0 0 12px rgba(255, 140, 220, 0.85),
        0 0 28px rgba(200, 80, 255, 0.55),
        0 0 48px rgba(140, 40, 200, 0.35);
}

.combat-boss-tag {
    display: inline-block;
    margin-right: 0.45rem;
    padding: 0.14rem 0.55rem;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    vertical-align: 0.1em;
    border-radius: 6px;
    line-height: 1.2;
}

.combat-boss-tag--guardian {
    background: linear-gradient(180deg, rgba(255, 236, 180, 1), rgba(220, 150, 40, 0.98));
    color: #1a0c00;
    box-shadow:
        0 0 18px rgba(255, 200, 80, 0.55),
        0 0 36px rgba(255, 160, 40, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    animation: combat-boss-tag-breathe-g 1.9s ease-in-out infinite;
}

.combat-boss-tag--sboss {
    background: linear-gradient(180deg, rgba(230, 110, 255, 0.98), rgba(90, 20, 110, 0.99));
    color: #fff8ff;
    border: 1px solid rgba(255, 180, 250, 0.55);
    box-shadow:
        0 0 22px rgba(220, 80, 255, 0.55),
        0 0 44px rgba(160, 40, 200, 0.3),
        inset 0 1px 0 rgba(255, 200, 255, 0.35);
    animation: combat-boss-tag-breathe-s 1.7s ease-in-out infinite;
}

.combat-avatar--enemy.combat-avatar--boss {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.52rem;
    position: relative;
    z-index: 2;
}

.combat-avatar--boss-guardian {
    border-width: 2px !important;
    border-color: rgba(255, 220, 140, 0.85) !important;
    color: #fff0c0 !important;
    background: radial-gradient(circle at 35% 30%, rgba(255, 200, 120, 0.45), rgba(40, 22, 8, 0.92)) !important;
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.4),
        0 0 28px rgba(255, 200, 90, 0.5),
        0 0 48px rgba(255, 140, 40, 0.22) !important;
    animation: combat-boss-avatar-glow-g 2.4s ease-in-out infinite;
}

.combat-avatar--boss-sboss {
    border-width: 2px !important;
    border-color: rgba(240, 170, 255, 0.8) !important;
    color: #ffe8ff !important;
    background: radial-gradient(circle at 35% 30%, rgba(200, 100, 240, 0.5), rgba(32, 8, 40, 0.94)) !important;
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.4),
        0 0 36px rgba(220, 100, 255, 0.55),
        0 0 64px rgba(160, 40, 200, 0.28) !important;
    animation: combat-boss-avatar-glow-s 2.2s ease-in-out infinite;
}

.combat-boss-aura {
    position: absolute;
    inset: -8px;
    border-radius: 16px;
    pointer-events: none;
    z-index: 1;
    animation: combat-boss-pulse 2.2s ease-in-out infinite;
}

.combat-boss-aura--guardian {
    border: 2px solid rgba(255, 210, 100, 0.55);
    box-shadow:
        0 0 20px rgba(255, 180, 60, 0.45),
        0 0 40px rgba(255, 140, 40, 0.2);
}

.combat-boss-aura--sboss {
    border: 2px solid rgba(230, 120, 255, 0.55);
    box-shadow:
        0 0 26px rgba(200, 80, 240, 0.5),
        0 0 52px rgba(160, 40, 200, 0.28);
}

.combat-boss-icon--guardian,
.combat-boss-icon--sboss {
    display: inline-block;
    transform-origin: center center;
}

.combat-boss-icon--guardian {
    filter: drop-shadow(0 0 10px rgba(255, 230, 160, 0.95));
    animation: combat-boss-icon-hero-g 2s ease-in-out infinite;
}

.combat-boss-icon--sboss {
    filter: drop-shadow(0 0 12px rgba(255, 140, 220, 0.95));
    animation: combat-boss-icon-hero-s 1.8s ease-in-out infinite;
}

@keyframes combat-boss-shimmer {
    0%,
    100% {
        background-position: 130% 0;
        opacity: 0.65;
    }
    50% {
        background-position: -30% 0;
        opacity: 1;
    }
}

@keyframes combat-boss-shimmer-s {
    0%,
    100% {
        background-position: -30% 0;
        opacity: 0.5;
    }
    50% {
        background-position: 130% 0;
        opacity: 0.95;
    }
}

@keyframes combat-boss-card-glow-guardian {
    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(255, 200, 100, 0.22),
            0 0 24px rgba(255, 160, 40, 0.24),
            0 0 52px rgba(200, 100, 20, 0.1),
            inset 0 0 52px rgba(120, 60, 24, 0.16);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(255, 220, 140, 0.38),
            0 0 40px rgba(255, 180, 60, 0.42),
            0 0 72px rgba(255, 140, 40, 0.18),
            inset 0 0 56px rgba(140, 70, 30, 0.2);
    }
}

@keyframes combat-boss-card-glow-sboss {
    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(220, 100, 255, 0.28),
            0 0 32px rgba(180, 60, 220, 0.3),
            0 0 64px rgba(100, 30, 160, 0.16),
            inset 0 0 60px rgba(80, 20, 100, 0.22);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(240, 140, 255, 0.45),
            0 0 52px rgba(200, 80, 255, 0.48),
            0 0 96px rgba(140, 40, 200, 0.28),
            inset 0 0 64px rgba(100, 30, 120, 0.26);
    }
}

@keyframes combat-boss-border-breathe-g {
    0%,
    100% {
        opacity: 0.55;
    }
    50% {
        opacity: 1;
    }
}

@keyframes combat-boss-border-breathe-s {
    0%,
    100% {
        opacity: 0.45;
    }
    50% {
        opacity: 0.95;
    }
}

@keyframes combat-boss-tag-breathe-g {
    0%,
    100% {
        transform: translateY(0) scale(1);
        box-shadow:
            0 0 18px rgba(255, 200, 80, 0.55),
            0 0 36px rgba(255, 160, 40, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.45);
    }
    50% {
        transform: translateY(-1px) scale(1.04);
        box-shadow:
            0 0 26px rgba(255, 220, 120, 0.75),
            0 0 48px rgba(255, 160, 40, 0.38),
            inset 0 1px 0 rgba(255, 255, 255, 0.55);
    }
}

@keyframes combat-boss-tag-breathe-s {
    0%,
    100% {
        transform: translateY(0) scale(1);
        box-shadow:
            0 0 22px rgba(220, 80, 255, 0.55),
            0 0 44px rgba(160, 40, 200, 0.3),
            inset 0 1px 0 rgba(255, 200, 255, 0.35);
    }
    50% {
        transform: translateY(-1px) scale(1.05);
        box-shadow:
            0 0 32px rgba(240, 120, 255, 0.75),
            0 0 56px rgba(180, 60, 220, 0.42),
            inset 0 1px 0 rgba(255, 220, 255, 0.45);
    }
}

@keyframes combat-boss-avatar-glow-g {
    0%,
    100% {
        box-shadow:
            0 0 0 2px rgba(0, 0, 0, 0.4),
            0 0 24px rgba(255, 200, 90, 0.45),
            0 0 44px rgba(255, 140, 40, 0.18) !important;
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(0, 0, 0, 0.4),
            0 0 40px rgba(255, 220, 120, 0.65),
            0 0 72px rgba(255, 160, 60, 0.3) !important;
    }
}

@keyframes combat-boss-avatar-glow-s {
    0%,
    100% {
        box-shadow:
            0 0 0 2px rgba(0, 0, 0, 0.4),
            0 0 32px rgba(220, 100, 255, 0.48),
            0 0 56px rgba(160, 40, 200, 0.22) !important;
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(0, 0, 0, 0.4),
            0 0 48px rgba(240, 140, 255, 0.72),
            0 0 88px rgba(180, 60, 220, 0.35) !important;
    }
}

@keyframes combat-boss-icon-hero-g {
    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 10px rgba(255, 230, 160, 0.95));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 20px rgba(255, 220, 120, 1));
    }
}

@keyframes combat-boss-icon-hero-s {
    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 12px rgba(255, 140, 220, 0.95));
    }
    50% {
        transform: scale(1.12);
        filter: drop-shadow(0 0 24px rgba(255, 120, 240, 1));
    }
}

@keyframes combat-boss-pulse {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}

.combat-avatar--player {
    background: radial-gradient(circle at 30% 30%, rgba(80, 120, 200, 0.35), rgba(12, 18, 32, 0.92));
    color: #b8d4ff;
}

.combat-card__main {
    min-width: 0;
    flex: 1;
}

.combat-card__title {
    font-size: 0.95rem;
    margin: 0 0 0.2rem;
    color: var(--text);
    font-family: var(--font-ui);
    letter-spacing: 0.03em;
    line-height: 1.35;
    word-break: break-word;
}

.combat-card__subtitle {
    margin: 0;
    font-size: 0.78rem;
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.06em;
}

.combat-card__playerline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.65rem;
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
}

.combat-card__pname {
    font-weight: 600;
    color: var(--text);
}

.combat-card__prealm {
    font-size: 0.78rem;
    color: rgba(180, 188, 204, 0.88);
}

.combat-card__dmg {
    min-height: 1.5rem;
    margin-top: var(--space-xs);
}

/* 气血条 */
.combat-bar--hp {
    margin-top: 0.15rem;
}

.combat-bar__track {
    position: relative;
    height: 1.38rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.combat-bar__dmg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    background: rgba(255, 210, 120, 0.42);
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.combat-bar__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 0.45rem;
    min-width: 0;
    box-sizing: border-box;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    transition: width 0.12s ease-out;
    overflow: hidden;
    white-space: nowrap;
}

.combat-bar__fill .combat-bar__pct {
    margin-left: 0.25rem;
    opacity: 0.88;
    font-size: 0.62rem;
}

.combat-bar__fill--enemy {
    background: linear-gradient(90deg, #6a1a22 0%, #c43c3c 55%, #e05555 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.combat-bar__fill--player {
    background: linear-gradient(90deg, #4a1520 0%, #a83240 50%, #d05058 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* 修为条 */
.combat-exp-block {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(212, 175, 55, 0.12);
}

.combat-exp-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.combat-exp-block__lbl {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: rgba(200, 190, 255, 0.88);
}

.combat-exp-block__lbl i {
    margin-right: 0.25rem;
    opacity: 0.85;
}

.combat-exp-block__nums {
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: rgba(200, 206, 220, 0.88);
}

.combat-exp-block__track {
    position: relative;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(139, 92, 246, 0.35);
    overflow: hidden;
}

.combat-exp-block__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    min-width: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #4c1d95 0%, #7c3aed 45%, #a78bfa 100%);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.45);
    transition: width 0.14s ease-out;
}

/* 斗法 · 灵兽悟性条（与人物修为条结构一致，玉色） */
.combat-pet-wuxing-block {
    margin-top: 0.65rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(120, 200, 150, 0.18);
}

.combat-pet-wuxing-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

.combat-pet-wuxing-block__lbl {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    color: rgba(160, 235, 190, 0.88);
}

.combat-pet-wuxing-block__nums {
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
    color: rgba(200, 230, 210, 0.9);
    text-align: right;
    min-width: 0;
}

.combat-pet-wuxing-block__track {
    position: relative;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(90, 180, 130, 0.35);
    overflow: hidden;
}

.combat-pet-wuxing-block__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    min-width: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #1a4a38 0%, #2d8a6a 42%, #5ab896 100%);
    box-shadow: 0 0 10px rgba(90, 200, 150, 0.35);
    transition: width 0.14s ease-out;
}

.combat-card--log {
    flex: 1;
    min-height: 8rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(212, 175, 55, 0.12);
    background: rgba(0, 0, 0, 0.28);
}

.combat-log__head {
    flex-shrink: 0;
    padding: 0.45rem 0.75rem;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    color: rgba(212, 175, 55, 0.75);
    border-bottom: 1px solid rgba(212, 175, 55, 0.12);
    background: rgba(0, 0, 0, 0.25);
}

.combat-log__inner {
    flex: 1;
    overflow: auto;
    padding: 0.65rem 0.85rem;
    font-size: 0.84rem;
    line-height: 1.65;
    color: rgba(200, 206, 220, 0.88);
}

.combat-log__inner p {
    margin: 0 0 0.5rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.combat-log__inner p:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.battle-info-panel {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

#enemyPanel {
    align-items: stretch;
}

#lvlupPanel .content {
    width: 100%;
    max-width: 24em;
    padding: var(--space-lg);
    gap: var(--space-md);
    overflow-y: auto;
}

#lvlupPanel h1 {
    text-align: center;
    font-size: 1.45rem;
    margin-bottom: 0.2rem;
}

#lvlupPanel .realm-line {
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-muted, rgba(255, 255, 255, 0.65));
    margin: 0 0 0.75rem;
}

#lvlupPanel .content-head {
    padding: 0;
    align-items: center;
}

#lvlupPanel button[id^="lvlSlot"] {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: var(--space-md);
    border-color: var(--border-subtle);
    background: rgba(0, 0, 0, 0.22);
    width: 100%;
    margin-bottom: var(--space-xs);
}

#lvlupPanel button[id^="lvlSlot"]:hover {
    border-color: var(--accent);
    background: var(--accent-dim);
}

#lvlupPanel button[id^="lvlSlot"] h3 {
    font-size: 0.92rem;
    margin-bottom: 0.2rem;
}

#lvlupPanel button[id^="lvlSlot"] p {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* 旧 stat-panel 通用（弹窗内等，不含主界面 hub-stats） */
.stat-panel:not(.hub-stats) {
    display: flex;
    margin: var(--space-sm);
    gap: var(--space-sm);
}

.stat-panel .box {
    white-space: normal;
    border-radius: var(--radius-sm);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    overflow: auto;
    font-size: 0.82rem;
}

.stat-panel .box p {
    margin: 0.2rem 0;
    color: var(--text-muted);
}

.stat-panel .box span {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.decision-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: var(--space-sm) 0;
}

.decision-panel button {
    flex: 1;
    min-width: calc(50% - 0.2rem);
}

.box-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
}

.box-head i {
    margin: 0;
}

.logBox {
    margin: var(--space-sm);
    min-height: 8rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--space-md);
}

#combatLogBox {
    overflow: auto;
}

.content-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
}

.content .content-head i {
    margin: 0;
}

#dungeon-main {
    display: none;
}

#loading {
    display: none;
}

.loader {
    border: 3px solid var(--border-subtle);
    border-top-color: var(--accent);
    border-radius: 50%;
    width: 2.6rem;
    height: 2.6rem;
    animation: spin 0.85s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

#allocate-stats {
    width: 100%;
    max-width: 20rem;
}

#allocate-stats .row {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

#allocate-stats .row:last-of-type {
    border-bottom: none;
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.35);
    border-radius: 8px;
}

.scrollable {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.4) transparent;
}

.scrollable::-webkit-scrollbar {
    width: 6px;
}

.Common { color: #e2e4eb; }
.Uncommon { color: #4ade80; }
.Rare { color: #60a5fa; }
.Epic { color: #c084fc; }
.Legendary { color: var(--gold); }
.eq-enchant-tier-1 {
    color: #8be9a8;
    text-shadow: 0 0 8px rgba(139, 233, 168, 0.3);
}
.eq-enchant-tier-2 {
    color: #77c6ff;
    text-shadow: 0 0 10px rgba(119, 198, 255, 0.38);
}
.eq-enchant-tier-3 {
    color: #c695ff;
    text-shadow: 0 0 12px rgba(198, 149, 255, 0.45);
}
.eq-enchant-tier-4 {
    color: #ffd36e;
    text-shadow: 0 0 14px rgba(255, 211, 110, 0.55), 0 0 22px rgba(255, 170, 84, 0.28);
}
.Heirloom { color: #fb7185; }
.Etherbound {
    color: #5eead4;
    text-shadow: 0 0 12px rgba(94, 234, 212, 0.45);
}
.StellarSign {
    color: #a5b4fc;
    text-shadow: 0 0 14px rgba(165, 180, 252, 0.5);
}
.Nullforge {
    color: #c4b5fd;
    text-shadow: 0 0 14px rgba(196, 181, 253, 0.45);
}
.Chronarch {
    color: #fcd34d;
    text-shadow: 0 0 16px rgba(252, 211, 77, 0.55);
}
.Apexother {
    color: #f472b6;
    text-shadow: 0 0 18px rgba(244, 114, 182, 0.55), 0 0 28px rgba(167, 139, 250, 0.35);
}

.dmg-container {
    position: relative;
    min-height: 0.5rem;
}

.dmg-numbers {
    color: white;
    font-size: 1.55em;
    font-weight: 600;
    animation: dmg-numbers 0.7s ease-out forwards;
    position: absolute;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.dungeon-title-buff {
    margin-top: 0.2rem;
    font-size: 0.72rem;
    line-height: 1.3;
    color: rgba(232, 224, 255, 0.95);
    text-shadow: 0 0 10px rgba(167, 139, 250, 0.35);
}

@keyframes dmg-numbers {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(1.35);
    }
    20% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-2.25rem);
    }
}

.animation-shake {
    animation: shake 0.2s;
}

@keyframes shake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-2px, 1px); }
    50% { transform: translate(2px, -1px); }
    75% { transform: translate(-1px, -2px); }
}

.logBox button,
#dungeonLog button {
    margin: 0.22rem 0.12rem 0.22rem 0;
}