/* 洞府页：洞天玉册风 — 青玉灵脉、双列灵窍，与历练「挑战卡」刻意区分 */
#panel-cave.panel.active {
    padding: 0;
    overflow: hidden;
    background: transparent;
    backdrop-filter: none;
}
.cave-hub-root {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 14px 12px max(18px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    background:
        radial-gradient(ellipse 95% 55% at 50% -5%, rgba(56, 200, 210, 0.07) 0%, transparent 52%),
        radial-gradient(ellipse 55% 40% at 0% 85%, rgba(0, 120, 115, 0.12) 0%, transparent 48%),
        radial-gradient(ellipse 50% 38% at 100% 40%, rgba(38, 166, 154, 0.08) 0%, transparent 46%),
        linear-gradient(168deg, #071216 0%, #050c10 48%, #040a0d 100%);
}
.cave-hub-root::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 100% 45% at 50% 100%, rgba(0, 55, 60, 0.35) 0%, transparent 55%),
        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.38) 100%);
    opacity: 0.95;
}
.cave-hub-lattice {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.11;
    background-image:
        linear-gradient(rgba(128, 203, 196, 0.35) 1px, transparent 1px),
        linear-gradient(90deg, rgba(128, 203, 196, 0.28) 1px, transparent 1px);
    background-size: 23px 23px;
    mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, black 0%, transparent 72%);
}
.cave-hub-header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 14px;
    flex-shrink: 0;
}
.cave-hub-eyebrow {
    margin: 0 0 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 8px;
    text-indent: 8px;
    color: rgba(128, 203, 196, 0.72);
}
.cave-hub-title {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0 0.35em;
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 9px;
    text-indent: 9px;
    color: #e8f4f2;
    font-family: 'KaiTi', 'STKaiti', '华文楷体', serif;
    text-shadow:
        0 0 18px rgba(77, 182, 172, 0.35),
        0 0 28px rgba(201, 162, 74, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.9);
}
.cave-hub-title::before,
.cave-hub-title::after {
    position: absolute;
    top: 50%;
    transform: translateY(-52%);
    font-size: 0.72em;
    color: rgba(77, 182, 172, 0.45);
    font-weight: normal;
    letter-spacing: 0;
    text-indent: 0;
}
.cave-hub-title::before {
    content: '「';
    right: 100%;
    margin-right: 2px;
}
.cave-hub-title::after {
    content: '」';
    left: 100%;
    margin-left: 2px;
}
.cave-hub-header::after {
    content: '';
    display: block;
    width: min(220px, 78vw);
    height: 1px;
    margin: 12px auto 0;
    background: linear-gradient(90deg, transparent, rgba(77, 182, 172, 0.45), rgba(201, 162, 74, 0.25), transparent);
    box-shadow: 0 0 14px rgba(77, 182, 172, 0.15);
}
.cave-hub-subtitle {
    margin: 9px 0 0;
    font-size: 11px;
    color: rgba(176, 200, 198, 0.72);
    letter-spacing: 2px;
    line-height: 1.55;
    padding: 0 10px;
}

.cave-modules-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 11px;
    padding: 2px 2px max(12px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    align-content: start;
}
@media (max-width: 340px) {
    .cave-modules-grid {
        grid-template-columns: 1fr;
    }
}

/* 洞府灵窍牌：竖向玉册 + 底栏印玺 */
#cave-modules-grid .cave-entry-card {
    width: 100%;
    box-sizing: border-box;
    min-height: 0;
    border-radius: 3px 16px 4px 14px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    border-color: rgba(77, 182, 172, 0.22);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, transparent 42%),
        linear-gradient(210deg, rgba(0, 40, 48, 0.55) 0%, rgba(6, 14, 18, 0.94) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(128, 203, 196, 0.06),
        inset 0 -20px 36px rgba(0, 30, 35, 0.35),
        0 5px 18px rgba(0, 0, 0, 0.5);
}
#cave-modules-grid .cave-entry-card .cave-entry-card-ornament--hub {
    inset: 6px;
    border-radius: 2px 12px 3px 11px;
    border: 1px solid rgba(77, 182, 172, 0.12);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
#cave-modules-grid .cave-entry-card-inner--hub {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    min-height: 132px;
    padding: 12px 8px 0;
    gap: 3px;
}
#cave-modules-grid .cave-entry-card-icon--hub {
    width: 42px;
    height: 42px;
    font-size: 17px;
    margin-bottom: 2px;
    border-radius: 11px;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    border: 1px solid rgba(128, 203, 196, 0.35);
    background: linear-gradient(155deg, rgba(77, 182, 172, 0.22) 0%, rgba(0, 25, 32, 0.75) 100%);
    color: #c8ebe6;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 3px 10px rgba(0, 0, 0, 0.4);
}
#cave-modules-grid .cave-entry-card .cave-entry-card-title {
    font-size: 14px;
    letter-spacing: 2px;
    margin: 0;
    color: #d4f0ea;
    text-shadow: 0 0 12px rgba(77, 182, 172, 0.2), 0 1px 4px rgba(0, 0, 0, 0.85);
}
#cave-modules-grid .cave-entry-card .cave-entry-card-tag {
    margin-top: 2px;
    font-size: 10px;
    color: rgba(160, 190, 186, 0.78);
    letter-spacing: 1px;
    line-height: 1.35;
    max-width: 12em;
}
#cave-modules-grid .cave-entry-card-foot--seal {
    align-self: stretch;
    margin: 10px -8px 0;
    width: calc(100% + 16px);
    box-sizing: border-box;
    padding: 8px 6px 9px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 6px;
    text-indent: 6px;
    line-height: 1.25;
    text-align: center;
    color: rgba(200, 245, 238, 0.95);
    background: linear-gradient(180deg, rgba(0, 35, 42, 0.2) 0%, rgba(0, 22, 28, 0.82) 100%);
    border-top: 1px solid rgba(77, 182, 172, 0.28);
    box-shadow: inset 0 1px 0 rgba(128, 203, 196, 0.08);
    border-radius: 0 0 2px 12px;
}
#cave-modules-grid .cave-entry-card--locked .cave-entry-card-foot--seal {
    letter-spacing: 1px;
    text-indent: 0;
    font-weight: normal;
    font-size: 9px;
    color: rgba(150, 165, 168, 0.88);
    border-top-color: rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, transparent 0%, rgba(12, 14, 18, 0.75) 100%);
}
#cave-modules-grid .cave-entry-card:not(.cave-entry-card--locked):active {
    transform: translateY(1px) scale(0.988);
    filter: brightness(1.05);
}
#cave-modules-grid .cave-entry-card--locked:active {
    transform: none;
    filter: none;
}
@media (hover: hover) {
    #cave-modules-grid .cave-entry-card:not(.cave-entry-card--locked):hover {
        border-color: rgba(128, 203, 196, 0.38);
        box-shadow:
            inset 0 0 0 1px rgba(128, 203, 196, 0.1),
            inset 0 -20px 36px rgba(0, 40, 48, 0.28),
            0 7px 22px rgba(0, 0, 0, 0.52);
    }
}
#cave-modules-grid .cave-entry-card:not(.cave-entry-card--locked)[data-mod="relic"] {
    border-color: rgba(255, 236, 179, 0.22);
}
#cave-modules-grid .cave-entry-card:not(.cave-entry-card--locked)[data-mod="alchemy"] {
    border-color: rgba(186, 104, 200, 0.26);
}
#cave-modules-grid .cave-entry-card:not(.cave-entry-card--locked)[data-mod="manuals"] {
    border-color: rgba(100, 181, 246, 0.24);
}
#cave-modules-grid .cave-entry-card:not(.cave-entry-card--locked)[data-mod="beast"] {
    border-color: rgba(129, 199, 132, 0.26);
}
#cave-modules-grid .cave-entry-card:not(.cave-entry-card--locked)[data-mod="dojo"] {
    border-color: rgba(239, 154, 154, 0.22);
}
#cave-modules-grid .cave-entry-card--locked .cave-entry-card-icon--hub {
    color: #7a8588;
    border-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(155deg, rgba(45, 52, 55, 0.5) 0%, rgba(0, 0, 0, 0.55) 100%);
}
#cave-modules-grid .cave-entry-card--locked {
    filter: grayscale(0.42) brightness(0.64);
    border-color: rgba(52, 68, 70, 0.55);
}
#cave-modules-grid .cave-entry-card--locked .cave-entry-card-title {
    color: rgba(140, 158, 156, 0.92);
}

.cave-entry-card {
    position: relative;
    border-radius: 12px;
    min-height: 100px;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid rgba(201, 162, 74, 0.28);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, transparent 28%),
        radial-gradient(120% 88% at 100% 0%, rgba(255, 120, 80, 0.07) 0%, transparent 52%),
        linear-gradient(140deg, rgba(28, 22, 18, 0.96) 0%, rgba(11, 14, 20, 0.97) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 0 14px 24px rgba(255, 255, 255, 0.012),
        0 6px 20px rgba(0, 0, 0, 0.44);
    transition:
        transform 140ms ease,
        filter 160ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
}
.cave-entry-card:active {
    transform: translateY(1px) scale(0.985);
    filter: brightness(1.04);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.025),
        0 4px 12px rgba(0, 0, 0, 0.5);
}
.cave-entry-card-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 95% 65% at 50% -10%, rgba(212, 175, 55, 0.16) 0%, transparent 52%);
    pointer-events: none;
}
.cave-entry-card[data-mod="relic"] .cave-entry-card-glow {
    background: radial-gradient(ellipse 80% 55% at 30% 0%, rgba(255, 213, 79, 0.11) 0%, transparent 50%);
}
.cave-entry-card[data-mod="alchemy"] .cave-entry-card-glow {
    background: radial-gradient(ellipse 75% 60% at 70% 0%, rgba(171, 71, 188, 0.12) 0%, transparent 52%);
}
.cave-entry-card[data-mod="manuals"] .cave-entry-card-glow {
    background: radial-gradient(ellipse 80% 55% at 20% 0%, rgba(100, 181, 246, 0.1) 0%, transparent 50%);
}
.cave-entry-card[data-mod="body"] .cave-entry-card-glow {
    background:
        radial-gradient(ellipse 70% 50% at 85% 15%, rgba(239, 83, 80, 0.1) 0%, transparent 48%),
        radial-gradient(ellipse 65% 50% at 10% 90%, rgba(212, 175, 55, 0.08) 0%, transparent 50%);
}
.cave-entry-card[data-mod="beast"] .cave-entry-card-glow {
    background: radial-gradient(ellipse 78% 58% at 50% 0%, rgba(129, 199, 132, 0.14) 0%, transparent 52%);
}
.cave-entry-card[data-mod="dojo"] .cave-entry-card-glow {
    background: radial-gradient(ellipse 72% 52% at 50% 100%, rgba(239, 154, 154, 0.1) 0%, transparent 50%);
}
.cave-entry-card-ornament {
    position: absolute;
    inset: 5px;
    border-radius: 8px;
    pointer-events: none;
    border: 1px solid rgba(212, 175, 55, 0.1);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
    opacity: 0.9;
    z-index: 0;
}
.cave-entry-card-inner {
    position: relative;
    z-index: 1;
    padding: 11px 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 100px;
    box-sizing: border-box;
    justify-content: center;
    gap: 2px;
}
.cave-entry-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: bold;
    font-family: 'KaiTi', 'STKaiti', serif;
    color: var(--antique-gold);
    background: linear-gradient(155deg, rgba(212, 175, 55, 0.18) 0%, rgba(0, 0, 0, 0.45) 100%);
    border: 1px solid rgba(212, 175, 55, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 8px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
}
.cave-entry-card-icon--sm {
    width: 34px;
    height: 34px;
    font-size: 15px;
    margin-bottom: 2px;
}
.cave-entry-card-title {
    font-size: 14px;
    font-weight: bold;
    color: #e8c96b;
    letter-spacing: 2px;
    font-family: 'KaiTi', 'STKaiti', serif;
    text-shadow: 0 0 10px rgba(201, 162, 74, 0.22), 0 1px 4px rgba(0, 0, 0, 0.88);
    line-height: 1.25;
}
.cave-entry-card-tag {
    font-size: 10px;
    color: rgba(226, 232, 240, 0.72);
    margin-top: 2px;
    letter-spacing: 1px;
    line-height: 1.35;
}
/* 底部「封条」：替代网页感绿链与「点击」文案（CTA / 洞府印玺条除外） */
.cave-entry-card-foot:not(.cave-entry-card-foot--cta):not(.cave-entry-card-foot--seal) {
    align-self: stretch;
    margin: 8px -10px -10px;
    padding: 7px 8px 8px;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 4px;
    text-indent: 4px;
    line-height: 1.2;
    text-align: center;
    color: rgba(201, 162, 74, 0.88);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(6, 8, 12, 0.72) 100%);
    border-top: 1px solid rgba(201, 162, 74, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.cave-entry-card--locked .cave-entry-card-foot:not(.cave-entry-card-foot--cta):not(.cave-entry-card-foot--seal) {
    color: rgba(160, 168, 178, 0.78);
    letter-spacing: 1px;
    text-indent: 0;
    font-weight: normal;
    border-top-color: rgba(255, 255, 255, 0.06);
}
.cave-entry-card--locked {
    filter: grayscale(0.72) brightness(0.56);
    border-color: rgba(90, 90, 95, 0.42);
    cursor: default;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 4px 14px rgba(0, 0, 0, 0.48);
}
.cave-entry-card--locked .cave-entry-card-title {
    color: #9e9e9e;
}
.cave-entry-card--locked .cave-entry-card-icon {
    color: #888;
    border-color: rgba(255, 255, 255, 0.1);
    background: linear-gradient(155deg, rgba(60, 60, 65, 0.4) 0%, rgba(0, 0, 0, 0.5) 100%);
}
.cave-entry-card--locked .cave-entry-card-ornament {
    border-color: rgba(255, 255, 255, 0.05);
    opacity: 0.45;
}
.cave-entry-card--locked:active {
    transform: none;
}

.cave-entry-card-lead {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.cave-entry-card-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cave-entry-card-foot--cta {
    flex-shrink: 0;
    margin-top: 0;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 3px;
    text-indent: 2px;
    line-height: 1.2;
    text-align: center;
    color: #1c1410;
    background: linear-gradient(180deg, #f0d070 0%, #c9a227 42%, #7a5a18 100%);
    border: 1px solid rgba(255, 236, 160, 0.5);
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}
.cave-entry-card-foot--cta::after {
    content: '';
}
.cave-entry-card--locked .cave-entry-card-foot--cta {
    max-width: 46%;
    white-space: normal;
    padding: 8px 12px;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 0.3px;
    line-height: 1.3;
    color: rgba(200, 200, 205, 0.9);
    background: rgba(32, 32, 38, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.modal-content--cave-module {
    width: 92%;
    max-width: 420px;
    text-align: left;
}
.modal-content--cave-module .dialog-title { text-align: center; }
/* 洞府系统弹窗：隐藏二级标题与说明小字（避免标题重复） */
.modal-content--cave-module #cave-modal-systems .section-title { display: none; }
.modal-content--cave-module #cave-modal-systems .section-title + p { display: none; }
.cave-module-modal-wrap.modal-wrapper {
    align-items: stretch;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}
.cave-module-modal-wrap .modal-content--cave-module {
    margin: auto 0;
    max-height: min(88vh, calc(100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
}

/* 藏经阁打开时：避免中间区滚动手势链到外层页面产生回弹 */
#cave-module-modal.cave-module-modal--manuals.modal-wrapper {
    overscroll-behavior: none;
}

/* 藏经阁：Grid 定高；中间区内仅 .manual-rows-scroll 滚动，上方卡片区不随列表移动。
 * #cave-modal-systems 用 overflow:hidden + touch-action:auto，避免继承 .modal-body-scroll 的 pan-y 时与内层滚动抢手势（真机回弹/拖不动）。 */
#cave-module-modal.cave-module-modal--manuals .modal-content.modal-content--cave-module {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    width: min(92vw, 420px);
    max-width: 420px;
    --cave-manuals-modal-h: min(88vh, calc(100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    height: var(--cave-manuals-modal-h);
    max-height: var(--cave-manuals-modal-h);
    min-height: 0;
    box-sizing: border-box;
    touch-action: auto;
    overflow: hidden;
}
/* 动态视口：避免真机 100vh 含地址栏时弹窗超出可视区，底部列表被「挡在」无效触摸带里 */
@supports (height: 100dvh) {
    #cave-module-modal.cave-module-modal--manuals .modal-content.modal-content--cave-module {
        --cave-manuals-modal-h: min(88dvh, calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    }
}
#cave-module-modal.cave-module-modal--manuals .modal-content--cave-module #cave-modal-systems.modal-body-scroll {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: unset;
    touch-action: auto;
}
/* 用 Grid 第三行 minmax(0,1fr) 限定列表视口；纯 flex+flex:1 嵌套 overflow 在 WebKit/部分 WebView 会算错 scrollHeight → 只能看到部分行、拖不动 */
#cave-module-modal.cave-module-modal--manuals .modal-content--cave-module #sys-manuals.cave-sys-card {
    flex: 1 1 0%;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: start;
    overflow: hidden;
    margin-bottom: 0;
    align-self: stretch;
}
#cave-module-modal.cave-module-modal--manuals #sys-manuals .manual-focus-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
#sys-manuals .manual-list-scroll-hint {
    display: none;
    margin: 0 0 2px;
    font-size: 10px;
    line-height: 1.35;
    color: rgba(184, 196, 208, 0.72);
    text-align: center;
}
#cave-module-modal.cave-module-modal--manuals #sys-manuals .manual-list-scroll-hint {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-inline: 2px;
    min-width: 0;
}
#cave-module-modal.cave-module-modal--manuals #sys-manuals .manual-rows-scroll {
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* pan-y 时部分 WebView 仍不把手势交给内层；配合 ui-core ensureCaveManualRowsTouchScroll 手写滚动 */
    touch-action: none;
    margin-top: 8px;
    padding: 10px 0 12px;
    border-top: 1px solid rgba(98, 116, 136, 0.28);
}
#cave-module-modal.cave-module-modal--manuals #sys-manuals .manual-rows {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: min-content;
}
/* 列表行与上方卡片区同宽：左侧文案区可收缩，右侧按钮列不挤扁 */
#cave-module-modal.cave-module-modal--manuals #sys-manuals .cave-list-row.manual-row {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
}
#cave-module-modal.cave-module-modal--manuals #sys-manuals .cave-list-row.manual-row > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}
#cave-module-modal.cave-module-modal--manuals #sys-manuals .manual-row-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    align-self: center;
}

.relic-card { background: linear-gradient(135deg, rgba(17,20,24,0.8) 0%, rgba(6,7,10,0.8) 100%); border: 1px solid #1a1d22; border-radius: 6px; padding: 12px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.relic-card.active { border-color: rgba(212, 175, 55, 0.4); background: linear-gradient(90deg, rgba(212,175,55,0.08) 0%, rgba(5,6,8,0.8) 100%); }

#combat-overlay { position: relative; width: 100%; padding: 10px 20px; box-sizing: border-box; background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, transparent 100%); display: flex; flex-direction: column; align-items: center; pointer-events: auto; }

/* 历练画布：底部纵向固定（底栏「世界」键上方）、水平居中；勿用脚本改位置；日志整体上移见 #combat-log-container */
.world-auto-hunt-hud {
    position: absolute;
    bottom: 8px;
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 6px;
    padding: 6px 8px;
    max-width: calc(100% - 16px);
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: rgba(8, 12, 18, 0.84);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    pointer-events: auto;
}
.world-auto-hunt-hud__label {
    font-size: 12px;
    line-height: 1;
    color: var(--antique-gold);
    letter-spacing: 0.5px;
    user-select: none;
}
.world-auto-hunt-hud__switch.switch {
    width: 34px;
    height: 18px;
}
.world-auto-hunt-hud__switch .slider:before {
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
}
.world-auto-hunt-hud__switch input:checked + .slider:before {
    transform: translateX(16px);
}
.world-auto-hunt-hud__mode-btn {
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-radius: 9px;
    background: rgba(24, 18, 6, 0.72);
    color: #ffe7a6;
    font-size: 11px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    user-select: none;
}
.world-auto-hunt-hud__mode-btn:active {
    transform: translateY(1px);
}
.world-auto-hunt-hud__switch-target-btn {
    border-color: rgba(135, 206, 250, 0.52);
    color: #dff3ff;
    background: rgba(10, 24, 40, 0.72);
}

/* 灵气福地 / 灵石矿脉：HUD 同左上角锚点，避免与居中地图标题、说明挤叠 */
.blessed-land-qi-combat-hud {
    position: absolute;
    top: 4px;
    left: 8px;
    z-index: 8;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    pointer-events: auto;
    max-width: min(260px, 52vw);
}
.blessed-land-stone-timer-row {
    text-align: left;
    color: #ffe082;
}
.blessed-land-qi-combat-hud .blessed-land-qi-progress-fill.blessed-land-stone-progress-fill {
    background: linear-gradient(90deg, #f57f17, #ffca28);
}
.blessed-land-qi-exit-btn {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(0, 188, 212, 0.55);
    background: rgba(0, 30, 40, 0.85);
    color: #b2ebf2;
    cursor: pointer;
    font-family: inherit;
}
.blessed-land-qi-exit-btn:active {
    opacity: 0.88;
}
.blessed-land-qi-wave-line {
    font-size: 12px;
    color: var(--antique-gold, #c9a227);
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.75);
}
.blessed-land-qi-progress-outer {
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(0, 188, 212, 0.35);
    overflow: hidden;
}
.blessed-land-qi-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: linear-gradient(90deg, #00838f, #4dd0e1);
    transition: width 0.2s ease-out;
}
.blessed-land-qi-final-hint {
    font-size: 11px;
    color: #ffecb3;
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.45);
}

/* 域外天魔：左上退出；右侧阶段信息 + 其下「前往阴/阳界」 */
.outland-demon-hud {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--top-bar-total, 62px) + 6px);
    bottom: 0;
    z-index: 19;
    display: none;
    pointer-events: none;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.outland-demon-hud > * {
    pointer-events: auto;
}
.outland-demon-hud-rightcol {
    position: absolute;
    right: max(6px, env(safe-area-inset-right, 0px));
    top: clamp(40px, 14%, 120px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: min(192px, calc(100% - 24px));
    max-width: calc(100% - 12px - env(safe-area-inset-right, 0px));
    box-sizing: border-box;
}
.outland-demon-hud-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 138, 128, 0.36);
    background: rgba(22, 10, 8, 0.86);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
    box-sizing: border-box;
}
.outland-demon-hud-line {
    font-size: 11px;
    color: #ffe0b2;
    line-height: 1.25;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
.outland-demon-hud-realm-btn {
    position: relative;
    align-self: center;
    width: 100%;
    max-width: 100%;
    font-size: 12px;
    line-height: 1;
    padding: 6px 11px;
    border-radius: 7px;
    border: 1px solid rgba(158, 158, 158, 0.65);
    background: rgba(40, 40, 48, 0.88);
    color: #eceff1;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    box-sizing: border-box;
}
.outland-demon-hud-realm-btn:disabled {
    opacity: 0.72;
    cursor: default;
}
.outland-demon-hud-exit {
    position: absolute;
    left: max(6px, env(safe-area-inset-left, 0px));
    top: 0;
    font-size: 12px;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 7px;
    border: 1px solid rgba(0, 188, 212, 0.55);
    background: rgba(0, 30, 40, 0.85);
    color: #b2ebf2;
    cursor: pointer;
    font-family: inherit;
}
.outland-demon-hud-exit:active {
    opacity: 0.88;
}

/* 域外天魔：档位列表（固定行高 + 道具格；槽位须给固定宽度，否则 .item-slot{width:100%} 会塌成点） */
.outland-demon-tier-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: min(56vh, 400px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 4px;
}
.outland-demon-tier-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    min-height: 104px;
    padding: 10px 10px 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.outland-demon-tier-row--grant {
    background: rgba(129, 199, 132, 0.14);
    border-color: rgba(129, 199, 132, 0.28);
}
.outland-demon-tier-row--hit:not(.outland-demon-tier-row--grant) {
    background: rgba(255, 235, 59, 0.1);
    border-color: rgba(255, 213, 79, 0.22);
}
.outland-demon-tier-row--claimed {
    border-left: 3px solid rgba(255, 213, 79, 0.45);
    padding-left: 9px;
}
.outland-demon-tier-row-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 42%;
}
.outland-demon-tier-row-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--antique-gold);
    line-height: 1.25;
}
.outland-demon-tier-row-dmg {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.35;
}
.outland-demon-tier-row-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}
.outland-demon-tier-tag {
    font-size: 11px;
    line-height: 1.25;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
    font-weight: 600;
}
.outland-demon-tier-tag--claimed {
    color: #ffe082;
    background: rgba(40, 35, 20, 0.92);
    border: 1px solid rgba(255, 213, 79, 0.55);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.outland-demon-tier-tag--grant {
    color: #1b5e20;
    background: rgba(165, 214, 167, 0.95);
    border: 1px solid rgba(76, 175, 80, 0.45);
}
.outland-demon-tier-row-slots {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    min-height: 56px;
    overflow: visible;
}
.outland-demon-tier-slot-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    flex: 0 0 58px;
    box-sizing: border-box;
}
/* 固定像素宽，避免 width:100% 解析为 0 */
.outland-demon-tier-slot-wrap .item-slot.item-slot--icon-only {
    width: 58px;
    max-width: 58px;
    flex-shrink: 0;
    margin: 0;
    transform: none;
}
.outland-demon-tier-slot-wrap .item-slot.item-slot--icon-only:active {
    transform: scale(0.94);
}
.outland-demon-tier-slots-fallback {
    font-size: 13px;
    color: var(--text-muted);
    padding: 0 6px;
    margin-left: auto;
}
.outland-demon-tier-row--grant .outland-demon-tier-row-title {
    color: var(--jade-green);
}
.outland-demon-tier-row--hit:not(.outland-demon-tier-row--grant) .outland-demon-tier-row-title {
    color: var(--antique-gold);
}

/* 十二星次·结算：本次获得（横排 item-slot，与档位预览格同宽） */
.outland-demon-result-reward-slots {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 4px;
}
.outland-demon-result-reward-slots:empty {
    display: none;
    margin-bottom: 0;
}

/* 修道场：左下角抽屉（交互同主线任务条：横向收起只露拉条） */
#training-arena-hud.training-arena-hud {
    position: absolute;
    left: 0;
    bottom: calc(65px + max(4px, env(safe-area-inset-bottom, 0px)));
    top: auto;
    right: auto;
    z-index: 16;
    display: none;
    flex-direction: row;
    align-items: stretch;
    width: min(232px, calc(100% - 56px));
    max-height: min(340px, 46vh);
    pointer-events: auto;
    background: linear-gradient(90deg, rgba(15, 22, 18, 0.96) 0%, rgba(5, 10, 8, 0.96) 100%);
    border: 1px solid rgba(129, 199, 132, 0.45);
    border-left: none;
    border-radius: 0 10px 10px 0;
    box-shadow: 3px -4px 18px rgba(0, 0, 0, 0.55);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: visible;
}
#training-arena-hud.training-arena-hud.collapsed {
    transform: translateX(calc(-100% + 30px));
}
.training-arena-drawer-inner {
    flex: 1;
    min-width: 0;
    padding: 8px 10px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
/* 境界自定义列表绝对定位在抽屉外时，避免被内层滚动区域裁切 */
#training-arena-hud.training-arena-hud--realm-list-open .training-arena-drawer-inner {
    overflow: visible;
}
.training-arena-toggle-btn {
    width: 30px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-left: 1px dashed rgba(129, 199, 132, 0.28);
    cursor: pointer;
    color: var(--jade-green);
    font-size: 12px;
    background: rgba(0, 0, 0, 0.22);
    padding: 0;
    transition: background 0.2s;
    border-radius: 0 10px 10px 0;
}
.training-arena-toggle-btn:active {
    background: rgba(129, 199, 132, 0.18);
}
.training-arena-toggle-icon {
    display: block;
    transition: transform 0.3s;
}
#training-arena-hud.collapsed .training-arena-toggle-icon {
    transform: scaleX(-1);
}
#training-arena-hud.collapsed .training-arena-toggle-btn {
    border-left: none;
    border-right: 1px dashed rgba(129, 199, 132, 0.28);
}
.training-arena-hud-title {
    font-size: 13px;
    font-weight: bold;
    color: var(--jade-green);
    letter-spacing: 2px;
    text-align: center;
}
.training-arena-hud-realm {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    z-index: 2;
}
/* 木桩境界：自定义下拉（与修道场翡翠边框、暗底统一，避免系统 select 弹层） */
.training-arena-realm-picker {
    position: relative;
    width: 100%;
}
.training-arena-realm-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 0 10px 0 12px;
    margin: 0;
    border-radius: 8px;
    border: 1px solid rgba(129, 199, 132, 0.45);
    background: linear-gradient(180deg, rgba(22, 36, 28, 0.98) 0%, rgba(8, 14, 11, 0.98) 100%);
    color: var(--text-main);
    font-size: 11px;
    font-family: inherit;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(129, 199, 132, 0.12);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.training-arena-realm-trigger:hover {
    border-color: rgba(129, 199, 132, 0.65);
    box-shadow: 0 0 10px rgba(129, 199, 132, 0.18), inset 0 1px 0 rgba(129, 199, 132, 0.15);
}
.training-arena-realm-trigger:focus {
    outline: none;
    border-color: rgba(129, 199, 132, 0.85);
}
.training-arena-realm-trigger-label {
    flex: 1;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #e8f5e9;
    text-shadow: 0 0 12px rgba(129, 199, 132, 0.25);
}
.training-arena-realm-trigger-chevron {
    flex-shrink: 0;
    font-size: 9px;
    color: var(--jade-green);
    opacity: 0.9;
    transition: transform 0.25s ease;
}
.training-arena-realm-picker.training-arena-realm-picker--open .training-arena-realm-trigger-chevron {
    transform: rotate(180deg);
}
.training-arena-realm-list {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    flex-direction: column;
    gap: 2px;
    max-height: min(220px, 38vh);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 6px;
    margin: 0;
    border-radius: 10px;
    border: 1px solid rgba(129, 199, 132, 0.5);
    background: linear-gradient(165deg, rgba(18, 28, 22, 0.98) 0%, rgba(6, 10, 8, 0.99) 100%);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(129, 199, 132, 0.1);
}
.training-arena-realm-picker.training-arena-realm-picker--open .training-arena-realm-list {
    display: flex;
}
.training-arena-realm-option {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
    color: #c8e6c9;
    font-size: 11px;
    font-family: inherit;
    letter-spacing: 0.03em;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.training-arena-realm-option:hover {
    background: rgba(129, 199, 132, 0.12);
    border-color: rgba(129, 199, 132, 0.25);
    color: #fff;
}
.training-arena-realm-option.training-arena-realm-option--selected {
    border-color: rgba(129, 199, 132, 0.55);
    color: var(--jade-green);
    background: rgba(129, 199, 132, 0.14);
    box-shadow: 0 0 12px rgba(129, 199, 132, 0.22), inset 0 0 20px rgba(129, 199, 132, 0.06);
    font-weight: 600;
}
.training-arena-realm-option:active {
    transform: scale(0.99);
}
.training-arena-hud-types {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.training-arena-label {
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
}
.training-arena-hud-elements {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.training-arena-element-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}
.training-arena-element-btn {
    flex: 1 1 calc(33.33% - 4px);
    min-width: 52px;
    padding: 6px 2px;
    font-size: 11px;
    border-radius: 6px;
}
.training-arena-element-btn--on {
    border-color: var(--tier-4) !important;
    color: #ffe082 !important;
    box-shadow: 0 0 8px rgba(232, 199, 107, 0.35);
}
.training-arena-type-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.training-arena-type-btn {
    flex: 1 1 44%;
    min-width: 64px;
    padding: 6px 4px;
    font-size: 11px;
    border-radius: 6px;
}
.training-arena-type-btn--on {
    border-color: var(--jade-green) !important;
    color: var(--jade-green) !important;
    box-shadow: 0 0 10px rgba(129, 199, 132, 0.35);
}
.training-arena-exit-btn {
    width: 100%;
    padding: 8px;
    font-size: 12px;
    border-radius: 8px;
}
.training-arena-exit-top-btn {
    position: absolute;
    left: max(6px, env(safe-area-inset-left, 0px));
    top: calc(var(--top-bar-total, 62px) + 6px);
    z-index: 19;
    min-width: 106px;
    height: 34px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 8px;
}

/* 修道场：右上伤害统计（用时+秒伤+重置同一行；总伤其下；向下展开来源表） */
#training-arena-stats-panel.training-arena-stats-panel {
    position: absolute;
    top: calc(var(--top-bar-total, 62px) + 106px);
    right: max(6px, env(safe-area-inset-right, 0px));
    bottom: auto;
    left: auto;
    z-index: 18;
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: min(288px, calc(100% - 24px));
    max-height: min(420px, calc(100vh - var(--top-bar-total, 62px) - 106px - 78px - max(4px, env(safe-area-inset-bottom, 0px))));
    pointer-events: auto;
    background: linear-gradient(180deg, rgba(15, 22, 18, 0.96) 0%, rgba(5, 10, 8, 0.96) 100%);
    border: 1px solid rgba(129, 199, 132, 0.45);
    border-radius: 10px;
    box-shadow: -3px 4px 18px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}
.training-arena-stats-inner {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 8px 10px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}
.training-arena-stats-expand-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--jade-green);
    font-size: 11px;
    letter-spacing: 1px;
    background: rgba(0, 0, 0, 0.25);
    transition: background 0.2s, color 0.2s;
}
.training-arena-stats-expand-bar:active {
    background: rgba(129, 199, 132, 0.14);
}
.training-arena-stats-expand-icon {
    display: block;
    font-size: 10px;
    line-height: 1;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#training-arena-stats-panel.training-arena-stats-panel--expanded .training-arena-stats-expand-icon {
    transform: rotate(180deg);
}
.training-arena-stats-expand-label--close {
    display: none;
}
#training-arena-stats-panel.training-arena-stats-panel--expanded .training-arena-stats-expand-label--open {
    display: none;
}
#training-arena-stats-panel.training-arena-stats-panel--expanded .training-arena-stats-expand-label--close {
    display: inline;
}
.training-arena-stats-detail {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-height: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    pointer-events: none;
}
#training-arena-stats-panel.training-arena-stats-panel--expanded .training-arena-stats-detail {
    max-height: min(260px, 36vh);
    opacity: 1;
    margin-top: 2px;
    pointer-events: auto;
}
.training-arena-stats-reset-btn {
    grid-column: 3;
    flex-shrink: 0;
    justify-self: end;
    align-self: center;
    transform: translateY(4px);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 193, 7, 0.55);
    background: linear-gradient(180deg, rgba(80, 60, 20, 0.5) 0%, rgba(20, 15, 8, 0.85) 100%);
    color: #ffe082;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(232, 199, 107, 0.25);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.training-arena-stats-reset-btn:active {
    transform: translateY(4px) scale(0.94);
    background: rgba(129, 199, 132, 0.15);
}
.training-arena-stats-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0 2px;
    border-top: 1px dashed rgba(129, 199, 132, 0.22);
    border-bottom: 1px dashed rgba(129, 199, 132, 0.22);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.training-arena-stats-dps-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    gap: 4px 6px;
}
.training-arena-stats-elapsed {
    grid-column: 1;
    justify-self: start;
    align-self: center;
    font-size: 10px;
    color: var(--text-muted);
    text-align: left;
    line-height: 1.2;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 大字号秒伤的线框偏上，略下移与视觉中心对齐 */
    transform: translateY(4px);
}
.training-arena-stats-elapsed span {
    font-family: monospace;
    color: #b2dfdb;
}
.training-arena-stats-dps-center {
    grid-column: 2;
    justify-self: center;
    align-self: center;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.training-arena-stats-dps-main {
    font-size: 20px;
    font-weight: bold;
    color: #ffe082;
    font-family: monospace;
    line-height: 1.2;
    text-shadow: 0 0 12px rgba(255, 224, 130, 0.35);
    text-align: center;
}
.training-arena-stats-dps-suffix {
    font-size: 11px;
    font-weight: normal;
    color: var(--text-muted);
    font-family: sans-serif;
}
.training-arena-stats-total-line {
    margin-top: 4px;
    max-width: 100%;
    width: max-content;
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
}
.training-arena-stats-total-line span {
    color: #e0f2f1;
    font-family: monospace;
    font-weight: bold;
}
.training-arena-stats-table {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin-top: 2px;
}
.training-arena-stats-thead {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr) minmax(0, 0.55fr);
    gap: 4px;
    font-size: 10px;
    color: var(--text-muted);
    padding: 4px 2px 6px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 6px 6px 0 0;
    align-items: center;
}
.training-arena-stats-thead > span {
    text-align: center;
    min-width: 0;
}
.training-arena-stats-tbody {
    flex: 1;
    min-height: 0;
    max-height: min(200px, 28vh);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 2px 0 4px;
    border: 1px solid rgba(129, 199, 132, 0.2);
    border-top: none;
    border-radius: 0 0 6px 6px;
    background: rgba(0, 0, 0, 0.2);
}
.training-arena-stats-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr) minmax(0, 0.55fr);
    gap: 4px;
    font-size: 10px;
    padding: 5px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    align-items: center;
}
.training-arena-stats-row:last-child {
    border-bottom: none;
}
.training-arena-stats-cell--src {
    color: #b2dfdb;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.training-arena-stats-cell--num {
    font-family: monospace;
    color: #fff8e1;
    text-align: center;
}
.training-arena-stats-cell--pct {
    font-family: monospace;
    color: #81c784;
    text-align: center;
}

.map-selector { display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 5px; }

.map-btn { 
    position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: none; 
    justify-content: center; align-items: center; color: var(--antique-gold); font-size: 20px; 
    cursor: pointer; font-family: monospace; background: rgba(10, 15, 20, 0.85); 
    border: 1px solid var(--bronze-border); border-radius: 50%; z-index: 50; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.8); transition: background 0.2s, transform 0.2s; pointer-events: auto; 
}
.map-btn:active { background: rgba(212, 175, 55, 0.2); transform: translateY(-50%) scale(0.9); }
#btn-prev-map { left: 15px; }
#btn-next-map { right: 15px; }

.highlight-pulse { animation: mapPulse 0.8s infinite alternate !important; color: var(--jade-green) !important; text-shadow: 0 0 15px var(--jade-green); border-color: var(--jade-green) !important;}
@keyframes mapPulse { from { box-shadow: 0 4px 10px rgba(0,0,0,0.8); } to { box-shadow: 0 0 20px var(--jade-green); } }

.map-title { font-size: 18px; color: var(--tier-2); letter-spacing: 2px; font-weight: bold; text-shadow: 0 0 10px rgba(33,150,243,0.5); }
.map-suppress-warn { font-size: 11px; color: #ff3333; background: rgba(255,0,0,0.1); border: 1px solid #ff3333; padding: 2px 6px; border-radius: 4px; margin-bottom: 4px; display: none; animation: pulseRed 1s infinite alternate; }

.map-progress-bg { width: 80%; height: 6px; background: #000; border: 1px solid var(--bronze-border); border-radius: 3px; overflow: hidden; position: relative;}
.map-progress-fill { height: 100%; width: 0%; background: var(--tier-3); transition: width 0.3s; box-shadow: 0 0 10px var(--tier-3);}
.btn-summon { display: none; margin-top: 10px; background: linear-gradient(180deg, #4a0d0d 0%, #1a0404 100%); border-color: #ff3333; color: #ff3333; animation: pulseRed 1.5s infinite; padding: 12px 24px; }
#tribulation-ui { display: none; position: absolute; top: 120px; left: 50%; transform: translateX(-50%); width: 80%; text-align: center; z-index: 20; pointer-events: none; }

.stat-row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 8px; font-family: sans-serif; color: #b0bec5; }
.stat-val { font-family: monospace; font-size: 14px; color: #fff; }
.affix-box { margin-top: 10px; background: rgba(0,0,0,0.4); padding: 8px; border-radius: 4px; border: 1px solid #1a1d22; }
.affix-item { font-size: 11px; color: #84ffff; margin-top: 4px; font-family: sans-serif; display: flex; justify-content: space-between;}
.affix-item--special {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    margin-top: 8px;
    padding: 6px 8px;
    border-left: 3px solid #ffd54f;
    background: rgba(255, 213, 79, 0.08);
    border-radius: 0 4px 4px 0;
    color: #ffe082;
}
.affix-item--special .affix-special-text {
    font-size: 11px;
    line-height: 1.45;
    color: #ffecb3;
}

.red-dot { position: absolute; top: 6px; right: 20%; width: 8px; height: 8px; background-color: var(--alert-red); border-radius: 50%; box-shadow: 0 0 6px var(--alert-red); display: none; z-index: 20; }

/* height 为内容区；padding-bottom 额外加在下方，总占位 = 65px + max(4px, 安全区) */
#bottomNav {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 65px;
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
    box-sizing: content-box;
    background: linear-gradient(0deg, #040608 0%, #0a0d12 45%, #0c1016 100%);
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    display: flex;
    z-index: 10;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.04);
    align-items: stretch;
}
.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: rgba(120, 132, 142, 0.95);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    border-top: 3px solid transparent;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    position: relative;
    padding: 0 2px 1px;
    min-width: 0;
}
.nav-item.active {
    color: var(--antique-gold);
    background: linear-gradient(0deg, rgba(212, 175, 55, 0.12) 0%, transparent 100%);
    border-top: 3px solid var(--antique-gold);
    font-size: 12px;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
}

input[type="radio"] { accent-color: var(--antique-gold); }

/* 主线任务向下移动，防止遮挡左上角功能按钮 */
#task-widget {
    position: absolute; top: 140px; left: 0; z-index: 15;
    background: linear-gradient(90deg, rgba(15, 20, 25, 0.95) 0%, rgba(5, 8, 10, 0.95) 100%);
    border: 1px solid rgba(212, 175, 55, 0.4); border-left: none;
    border-radius: 0 8px 8px 0; display: none; flex-direction: row; 
    box-shadow: 3px 5px 15px rgba(0,0,0,0.6);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: auto; width: 226px; align-items: stretch;
}
#task-widget.collapsed {
    transform: translateX(calc(-100% + 30px));
}

.task-content-area { flex: 1; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; cursor: pointer; }
.task-content-area:active { background: rgba(255,255,255,0.05); }

.task-toggle-btn {
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px dashed rgba(212, 175, 55, 0.2);
    cursor: pointer;
    color: var(--antique-gold);
    font-size: 12px;
    background: rgba(0,0,0,0.2);
    transition: background 0.2s;
}
.task-toggle-btn:active { background: rgba(212, 175, 55, 0.2); }
.task-toggle-icon { transition: transform 0.3s; }
#task-widget.collapsed .task-toggle-icon { transform: scaleX(-1); }
#task-widget.collapsed .task-toggle-btn { border-left: none; border-right: 1px dashed rgba(212, 175, 55, 0.2); }

.task-title { font-size: 13px; color: var(--antique-gold); font-weight: bold; margin-bottom: 4px; letter-spacing: 1px;}
.task-desc { font-size: 11px; color: var(--text-main); line-height: 1.4; }
.task-hint { font-size: 10px; color: #7a8a96; line-height: 1.35; margin-top: 5px; display: none; border-left: 2px solid rgba(212, 175, 55, 0.35); padding-left: 8px; }
.task-status { font-size: 11px; color: var(--text-muted); margin-top: 6px; font-family: monospace; text-align: right;}
#task-widget.collapsed .task-content-area {
    padding: 5px 10px;
}
#task-widget.collapsed .task-title {
    margin-bottom: 0;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#task-widget.collapsed .task-desc,
#task-widget.collapsed .task-hint {
    display: none !important;
}
#task-widget.collapsed .task-status {
    margin-top: 0;
    font-size: 10px;
    text-align: left;
    color: rgba(220, 230, 240, 0.9);
}

#weak-guide-finger {
    display: none; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
}
#weak-guide-finger .weak-guide-hand {
    position: fixed; font-size: 28px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.85));
    transform: translate(-50%, -50%); opacity: 0.92;
    animation: weakGuideTap 0.55s ease-in-out infinite;
}
@keyframes weakGuideTap {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -10px; }
}

#task-widget.task-complete { border-color: var(--jade-green); box-shadow: 3px 0 15px rgba(0, 230, 118, 0.2), inset 0 0 10px rgba(0, 230, 118, 0.1); }
#task-widget.task-complete .task-toggle-btn { color: var(--jade-green); border-color: rgba(0, 230, 118, 0.3); }
#task-widget.task-complete .task-status { color: var(--jade-green); font-weight: bold; animation: pulseCyan 1s infinite alternate; }

@keyframes pulseCyan { from { text-shadow: 0 0 2px var(--jade-green); } to { text-shadow: 0 0 8px var(--jade-green); } }
@keyframes pulseRed { from { box-shadow: 0 0 5px rgba(255,0,0,0.2); } to { box-shadow: 0 0 15px rgba(255,0,0,0.6); } }

/* 锚定在世界面板底部（勿放在 #combat-overlay 内：overlay 仅顶部一条，会导致 bottom 相对短容器，条出现在屏上侧） */
/* +56px：为底部居中固定「自动寻怪」胶囊（含换行）留底，避免与掉落日志叠字 */
#panel-combat #combat-log-container {
    position: absolute;
    bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 56px);
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-height: 150px;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    z-index: 10;
}
.combat-log-entry {
    background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(10,15,20,0.6) 100%);
    color: #fff; padding: 6px 12px; border-radius: 4px; border-left: 2px solid var(--jade-green);
    font-size: 11px; text-align: left; animation: logFadeOut 2.5s forwards;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5); text-shadow: 0 1px 1px #000;
}
@keyframes logFadeOut { 
    0% { opacity: 0; transform: translateY(15px) scale(0.9); } 
    10% { opacity: 1; transform: translateY(0) scale(1); } 
    80% { opacity: 1; transform: translateY(0); } 
    100% { opacity: 0; transform: translateY(-15px); } 
}

.tower-bg-image { position: relative; width: 100%; height: 100%; }
.tower-bg-image::before {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 250px; height: 350px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 150"><polygon points="50,10 90,40 80,140 20,140 10,40" fill="none" stroke="%23ff3333" stroke-width="2" opacity="0.15"/><path d="M20,40 L80,40 M25,65 L75,65 M30,90 L70,90 M35,115 L65,115" stroke="%23ff3333" stroke-width="1" opacity="0.1"/></svg>') no-repeat center center;
    background-size: contain; z-index: -1; pointer-events: none; animation: towerBreathe 4s infinite alternate;
}
@keyframes towerBreathe { from { filter: drop-shadow(0 0 5px rgba(255,51,51,0.2)); } to { filter: drop-shadow(0 0 15px rgba(255,51,51,0.5)); } }

/* 历练页：挑战汇总 + 万妖塔子页（勿写 display:flex，否则会压过 .panel 的 display:none，离页后仍挡在底栏之上） */
#panel-tower.panel.active.panel-tower-wrap {
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.trials-hub-root {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 16px 14px max(20px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(14, 16, 20, 0.97) 0%, rgba(8, 10, 14, 0.98) 100%);
}
/* [hidden] 默认 display:none 会被上一段 display:flex 盖掉，导致汇总页与万妖塔同屏叠放 */
#trials-hub[hidden],
.trials-hub-root[hidden] {
    display: none !important;
}
.trials-hub-header {
    text-align: center;
    margin-bottom: 18px;
    flex-shrink: 0;
}
.trials-hub-title {
    margin: 0;
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 8px;
    color: var(--antique-gold);
    text-shadow: 0 0 14px rgba(201, 162, 74, 0.35);
}
.trials-hub-subtitle {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 4px;
}
.trials-card-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    min-height: 0;
}
/* 历练汇总：卡片保持设计最小高度不随视口压缩，超出区域纵向滚动 */
#trials-hub-card-grid {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}
.trials-mode-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    width: 100%;
    flex-shrink: 0;
    padding: 17px 15px;
    border-radius: 12px;
    border: 1px solid rgba(201, 162, 74, 0.28);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, transparent 28%),
        radial-gradient(130% 92% at 100% 0%, rgba(255, 120, 80, 0.08) 0%, transparent 55%),
        linear-gradient(140deg, rgba(28, 22, 18, 0.96) 0%, rgba(11, 14, 20, 0.97) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 0 14px 24px rgba(255, 255, 255, 0.012),
        0 6px 20px rgba(0, 0, 0, 0.44);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        transform 140ms ease,
        filter 160ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease,
        background 220ms ease;
}
/* 历练入口卡：统一最小高度（多行气泡/锁定文案仍可容纳） */
#trials-hub-card-grid .trials-mode-card {
    min-height: 168px;
    box-sizing: border-box;
}
.trials-mode-card:active {
    transform: translateY(1px) scale(0.992);
    filter: brightness(1.04);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.025),
        0 4px 12px rgba(0, 0, 0, 0.5);
}
.trials-mode-card-name {
    font-size: 18px;
    font-weight: bold;
    color: #ff5252;
    letter-spacing: 3px;
    text-shadow: 0 0 12px rgba(255, 82, 82, 0.32);
}
.trials-mode-card-hint {
    font-size: 11px;
    color: rgba(226, 232, 240, 0.82);
    letter-spacing: 1.2px;
    line-height: 1.45;
}
.trials-mode-card-bubbles {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: auto;
    align-self: flex-start;
}
.trials-mode-card-bubble {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(201, 162, 74, 0.42);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, transparent 36%),
        rgba(7, 10, 16, 0.86);
    color: rgba(235, 241, 248, 0.9);
    font-size: 11px;
    line-height: 1.2;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.035),
        0 1px 6px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(1.8px);
}
/* 触控/窄屏：去掉气泡毛玻璃合成层，减轻 Safari / WebView 滚动与重绘压力 */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    .trials-mode-card-bubble {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}
.trials-mode-card-bubble-label {
    color: rgba(205, 214, 226, 0.92);
}
.trials-attempt-num {
    font-weight: bold;
    font-family: "Consolas", "Menlo", "Monaco", monospace;
}
.trials-attempt-num--ok {
    color: #69f0ae;
    text-shadow: 0 0 8px rgba(105, 240, 174, 0.28);
}
.trials-attempt-num--zero {
    color: #ff6e6e;
    text-shadow: 0 0 8px rgba(255, 110, 110, 0.24);
}
.trials-attempt-split,
.trials-attempt-cap,
.trials-attempt-floor {
    color: rgba(229, 236, 245, 0.95);
    font-family: "Consolas", "Menlo", "Monaco", monospace;
}
.trials-attempt-floor {
    font-weight: bold;
}
.trials-mode-card-regentip {
    display: block;
    margin-top: 0;
    color: rgba(206, 216, 235, 0.92);
    font-size: 11px;
    line-height: 1.35;
}
.trials-mode-card-outland-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}
.trials-mode-card-outland-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}
.trials-mode-card-outland-line {
    font-size: 12px;
    color: rgba(232, 238, 247, 0.9);
    line-height: 1.35;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trials-mode-card-outland-line--best {
    color: rgba(124, 240, 172, 0.95);
}
.trials-mode-card-outland-next {
    font-size: 11px;
    line-height: 1.35;
    color: rgba(208, 218, 236, 0.88);
    text-align: right;
    flex: 0 0 auto;
    max-width: 45%;
}
.trials-mode-card-lock {
    display: block;
    width: 100%;
    margin-top: 8px;
    text-align: center;
    color: rgba(228, 235, 246, 0.92);
    font-size: 12px;
    letter-spacing: 1.6px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.trials-mode-card--blessed {
    border-color: rgba(56, 214, 233, 0.34);
    background:
        linear-gradient(180deg, rgba(56, 214, 233, 0.07) 0%, transparent 40%),
        radial-gradient(120% 80% at 0% 0%, rgba(38, 198, 218, 0.12) 0%, transparent 56%),
        linear-gradient(140deg, rgba(18, 28, 34, 0.96) 0%, rgba(10, 14, 20, 0.98) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(66, 230, 247, 0.09),
        0 6px 20px rgba(0, 0, 0, 0.44);
}
.trials-mode-card--blessed .trials-mode-card-name {
    color: #26c6da;
    text-shadow: 0 0 12px rgba(0, 188, 212, 0.35);
}
.trials-mode-card--outland {
    border-color: rgba(255, 138, 128, 0.38);
    background:
        linear-gradient(180deg, rgba(255, 138, 128, 0.08) 0%, transparent 36%),
        radial-gradient(120% 85% at 100% 0%, rgba(255, 82, 82, 0.18) 0%, transparent 56%),
        linear-gradient(140deg, rgba(36, 18, 24, 0.97) 0%, rgba(11, 13, 20, 0.98) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 138, 128, 0.12),
        0 6px 20px rgba(0, 0, 0, 0.46);
}
.trials-mode-card--outland .trials-mode-card-name {
    color: #ff6e6e;
    text-shadow: 0 0 12px rgba(255, 82, 82, 0.4);
}
.trials-mode-card--outland .trials-mode-card-hint {
    color: rgba(255, 214, 214, 0.86);
}
.trials-mode-card--outland .trials-mode-card-outland-next {
    color: rgba(255, 231, 231, 0.9);
}
.trials-mode-card--rogue {
    position: relative;
    overflow: hidden;
    border-color: rgba(212, 180, 104, 0.28);
    box-shadow:
        inset 0 0 0 1px rgba(126, 87, 194, 0.12),
        0 4px 22px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(126, 87, 194, 0.08);
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(126, 87, 194, 0.14) 0%, transparent 55%),
        radial-gradient(90% 60% at 0% 100%, rgba(201, 162, 74, 0.08) 0%, transparent 50%),
        linear-gradient(145deg, rgba(22, 18, 32, 0.98) 0%, rgba(10, 12, 18, 0.99) 100%);
}
.trials-mode-card--rogue::before {
    content: '';
    position: absolute;
    inset: -40% -20%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 55%);
    pointer-events: none;
    animation: rogueCardShimmer 8s ease-in-out infinite alternate;
}
@keyframes rogueCardShimmer {
    from { transform: translate(-4%, 0) rotate(-6deg); opacity: 0.5; }
    to { transform: translate(4%, 2%) rotate(4deg); opacity: 0.85; }
}
.trials-mode-card--rogue .trials-mode-card-name {
    color: #e8d4a8;
    text-shadow: 0 0 14px rgba(201, 162, 74, 0.45), 0 0 24px rgba(126, 87, 194, 0.25);
}
.trials-mode-card--rogue .trials-mode-card-hint {
    color: rgba(224, 213, 255, 0.8);
}
.trials-mode-card--destiny {
    position: relative;
    overflow: hidden;
    align-items: stretch;
    border-color: rgba(255, 213, 79, 0.42);
    box-shadow: inset 0 0 0 1px rgba(255, 213, 79, 0.13), 0 6px 20px rgba(0, 0, 0, 0.46);
    background:
        linear-gradient(180deg, rgba(255, 213, 79, 0.06) 0%, transparent 42%),
        linear-gradient(135deg, rgba(42, 36, 20, 0.96) 0%, rgba(12, 14, 18, 0.97) 100%);
}
.trials-mode-card--destiny .trials-mode-card-name {
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 1.25;
    color: #ffd54f;
    text-shadow: 0 0 12px rgba(255, 213, 79, 0.4);
}
.destiny-road-card-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    position: relative;
    z-index: 1;
    text-align: left;
}
.destiny-road-card-desc {
    display: block;
    width: 100%;
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: 0.5px;
    color: rgba(255, 224, 130, 0.62);
}
.destiny-road-card-rewards {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(8px, 2.2vw, 12px);
    margin-top: 4px;
    width: 100%;
    position: relative;
}
.destiny-road-card-rewards[hidden] {
    display: none !important;
}
.destiny-road-card-rewards-items {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(8px, 2.2vw, 12px);
    min-width: 0;
    width: 100%;
}
/* 与纳戒 .bag-grid 五列格子同量级：父宽约 360px 时单格约 (360-30-48)/5 ≈ 56px */
.destiny-road-card-reward-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: clamp(52px, calc((100% - 36px) / 5), 68px);
    max-width: 22%;
    min-width: 52px;
}
.destiny-road-card-rewards-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    min-height: 52px;
    color: rgba(255, 224, 130, 0.8);
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: 1px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    border-left: 1px solid rgba(255, 213, 79, 0.28);
    padding-left: 3px;
    margin-right: -2px;
}
.destiny-road-card-reward-wrap .item-slot.item-slot--icon-only {
    width: 100%;
    transform: none;
    flex-shrink: 0;
}
.destiny-road-card-reward-wrap .item-slot.item-slot--icon-only:active {
    transform: scale(0.92);
}
/* 通关区间文案较长，缩小角标以免挤出格子 */
.destiny-road-card-reward-wrap .item-slot-box .item-count-badge {
    font-size: 8px;
    line-height: 1.05;
    left: 2px;
    right: 2px;
    bottom: 1px;
    text-align: center;
    max-width: none;
    white-space: normal;
    word-break: break-all;
    font-weight: 700;
}
.destiny-road-card-rewards--claimed .destiny-road-card-rewards-items {
    pointer-events: none;
}
.destiny-road-card-rewards-claimed-mask {
    position: absolute;
    left: 24px;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.56);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}
.destiny-road-card-rewards-claimed-label {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #69f0ae;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.88);
}
.trials-mode-card--destiny .trials-mode-card-hint {
    color: rgba(255, 224, 130, 0.82);
}
.trials-mode-card:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.12);
}
.trials-mode-card--locked,
.trials-mode-card--locked:disabled {
    position: relative;
    isolation: isolate;
    opacity: 0.8;
    filter: saturate(0.68) brightness(0.88);
    border-color: rgba(174, 185, 204, 0.34);
    background:
        linear-gradient(120deg, rgba(208, 218, 236, 0.05) 0%, transparent 45%),
        linear-gradient(135deg, rgba(20, 24, 32, 0.95) 0%, rgba(11, 14, 20, 0.96) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(210, 220, 238, 0.08),
        inset 0 14px 28px rgba(12, 16, 25, 0.42),
        0 3px 12px rgba(0, 0, 0, 0.5);
}
.trials-mode-card--locked > * {
    position: relative;
    z-index: 1;
}
.trials-mode-card--locked::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(120% 75% at 50% 0%, rgba(210, 220, 238, 0.12) 0%, transparent 62%),
        linear-gradient(180deg, rgba(16, 20, 29, 0.2) 0%, rgba(16, 20, 29, 0.34) 100%);
}
.trials-mode-card--locked .trials-mode-card-name {
    color: rgba(206, 214, 228, 0.76) !important;
    text-shadow: 0 0 10px rgba(191, 204, 226, 0.14) !important;
}
.trials-mode-card--locked .trials-mode-card-hint {
    color: rgba(188, 199, 218, 0.7) !important;
}
.trials-mode-card--locked::before {
    display: none !important;
}

/* —— 问道秘境 · 难度弹窗 —— */
.rogue-difficulty-overlay {
    align-items: flex-end;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}
@media (min-height: 560px) {
    .rogue-difficulty-overlay {
        align-items: center;
        padding-bottom: 0;
    }
}
.rogue-difficulty-sheet {
    width: 92%;
    max-width: 400px;
    max-height: min(86vh, 640px);
    display: flex;
    flex-direction: column;
    padding: 0 0 10px;
    border-radius: 18px;
    border: 1px solid rgba(201, 162, 74, 0.28);
    background:
        linear-gradient(165deg, rgba(26, 22, 18, 0.97) 0%, rgba(10, 11, 16, 0.99) 42%, rgba(14, 12, 24, 0.98) 100%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.5),
        0 24px 48px rgba(0, 0, 0, 0.65),
        0 0 80px rgba(126, 87, 194, 0.12);
    position: relative;
    overflow: hidden;
}
.rogue-difficulty-sheet::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(201, 162, 74, 0.12) 0%, transparent 55%),
        radial-gradient(circle at 90% 80%, rgba(126, 87, 194, 0.1) 0%, transparent 45%);
    pointer-events: none;
    z-index: 0;
}
.rogue-difficulty-hero {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 20px 18px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.rogue-difficulty-eyebrow {
    margin: 0 0 6px;
    font-size: 11px;
    letter-spacing: 6px;
    color: rgba(201, 162, 74, 0.65);
    text-transform: uppercase;
}
.rogue-difficulty-heading {
    margin: 0;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 10px;
    color: #f0e6d4;
    text-shadow: 0 0 20px rgba(201, 162, 74, 0.35);
}
.rogue-difficulty-sub {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
    letter-spacing: 1px;
}
.rogue-difficulty-body {
    position: relative;
    z-index: 1;
    padding: 14px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rogue-difficulty-footer {
    position: relative;
    z-index: 1;
    padding: 0 14px;
    margin-top: 4px;
}
.rogue-difficulty-close {
    border-radius: 12px;
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: rgba(0, 0, 0, 0.35) !important;
}
.rogue-difficulty-dismiss-hint {
    position: relative;
    z-index: 1;
    margin: 10px 0 0;
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.28);
    letter-spacing: 2px;
}

/* —— 问道秘境 · 入场方式（避免与通用 dialog 底部「确定」叠用） —— */
.rogue-entry-overlay {
    align-items: center;
    padding: max(12px, env(safe-area-inset-bottom, 0px)) 12px;
}
.rogue-entry-sheet {
    width: 92%;
    max-width: 360px;
    border-radius: 16px;
    border: 1px solid rgba(201, 162, 74, 0.32);
    background: linear-gradient(165deg, rgba(26, 22, 18, 0.98) 0%, rgba(10, 11, 16, 0.99) 100%);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), 0 0 60px rgba(201, 162, 74, 0.08);
    padding: 18px 16px 14px;
}
.rogue-entry-title {
    text-align: center;
    color: var(--antique-gold) !important;
    font-size: 20px !important;
    letter-spacing: 8px;
    margin-bottom: 10px !important;
}
.rogue-entry-lead {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-main);
}
.rogue-entry-lead strong {
    color: #e8d4a8;
    font-weight: 600;
}
.rogue-entry-meta {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}
.rogue-entry-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.rogue-entry-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.35);
    cursor: pointer;
    text-align: left;
    color: var(--text-main);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.rogue-entry-option:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.rogue-entry-option:not(:disabled):hover {
    border-color: rgba(201, 162, 74, 0.35);
    background: rgba(201, 162, 74, 0.06);
}
.rogue-entry-option--selected {
    border-color: rgba(201, 162, 74, 0.55) !important;
    box-shadow: inset 0 0 0 1px rgba(201, 162, 74, 0.2), 0 0 20px rgba(201, 162, 74, 0.12);
    background: rgba(201, 162, 74, 0.1) !important;
}
.rogue-entry-option-radio {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 50%;
    border: 2px solid rgba(201, 162, 74, 0.5);
    position: relative;
}
.rogue-entry-option--selected .rogue-entry-option-radio::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--antique-gold);
    box-shadow: 0 0 8px rgba(201, 162, 74, 0.6);
}
.rogue-entry-option-body {
    flex: 1;
    min-width: 0;
}
.rogue-entry-option-title {
    font-weight: bold;
    font-size: 14px;
    color: #f0e6d4;
    margin-bottom: 4px;
}
.rogue-entry-option-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.45;
}
.rogue-entry-error {
    margin: 0 0 10px;
    font-size: 12px;
    color: #ff8a80;
    text-align: center;
}
.rogue-entry-footer {
    flex-direction: row !important;
    gap: 10px !important;
    margin-top: 4px;
}
.rogue-entry-footer--single {
    flex-direction: column !important;
}
.rogue-entry-footer--single .btn-full {
    width: 100%;
}

.rogue-diff-card {
    position: relative;
    border-radius: 14px;
    padding: 14px 14px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(145deg, rgba(32, 28, 40, 0.9) 0%, rgba(14, 16, 22, 0.95) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
}
.rogue-diff-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 4px 0 0 4px;
    opacity: 0.9;
}
.rogue-diff-card--fanchen::before {
    background: linear-gradient(180deg, #5d9c8a, #2d4a42);
    box-shadow: 0 0 16px rgba(93, 156, 138, 0.45);
}
.rogue-diff-card--xuanji::before {
    background: linear-gradient(180deg, #9575cd, #5e35b1);
    box-shadow: 0 0 18px rgba(149, 117, 205, 0.5);
}
.rogue-diff-card--tianyan::before {
    background: linear-gradient(180deg, #ffb74d, #c62828);
    box-shadow: 0 0 20px rgba(255, 183, 77, 0.45);
}
.rogue-diff-card--locked {
    opacity: 0.72;
    filter: saturate(0.65);
}
.rogue-diff-card-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    padding-left: 6px;
}
.rogue-diff-card-tier {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 6px;
    color: #f5ebe0;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.12);
}
.rogue-diff-card-mul {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(201, 162, 74, 0.35);
    color: var(--antique-gold);
    background: rgba(0, 0, 0, 0.35);
}
.rogue-diff-card-desc {
    margin: 0 0 12px;
    padding-left: 6px;
    font-size: 12px;
    line-height: 1.55;
    color: rgba(200, 200, 210, 0.72);
}
.rogue-diff-card-foot {
    display: flex;
    justify-content: flex-end;
    padding-left: 6px;
}
.rogue-diff-card-btn {
    min-width: 108px;
    border-radius: 10px !important;
    font-weight: bold;
    letter-spacing: 4px;
    background: linear-gradient(180deg, rgba(201, 162, 74, 0.22) 0%, rgba(201, 162, 74, 0.08) 100%) !important;
    border-color: rgba(201, 162, 74, 0.45) !important;
    color: #f5ecd4 !important;
}
.rogue-diff-card--locked .rogue-diff-card-btn {
    opacity: 0.55;
    letter-spacing: 2px;
}

/* —— 继续秘境 —— */
.rogue-resume-sheet {
    width: 88%;
    max-width: 340px;
    border-radius: 16px;
    border: 1px solid rgba(126, 87, 194, 0.3);
    background: linear-gradient(160deg, rgba(24, 20, 36, 0.98) 0%, rgba(10, 12, 18, 0.99) 100%);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55), 0 0 60px rgba(126, 87, 194, 0.1);
    text-align: center;
    padding-top: 8px;
}
.rogue-resume-icon {
    width: 52px;
    height: 52px;
    margin: 8px auto 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: rgba(179, 157, 219, 0.95);
    border-radius: 50%;
    border: 1px solid rgba(179, 157, 219, 0.35);
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.08), transparent 60%);
    box-shadow: 0 0 24px rgba(126, 87, 194, 0.25);
}
.rogue-resume-title {
    color: #e1bee7 !important;
    text-shadow: 0 0 14px rgba(179, 157, 219, 0.35);
}
.rogue-resume-hint {
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.55;
    margin: 12px 18px 16px;
    text-align: center;
}

.rogue-run-root {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.rogue-run-root[hidden] {
    display: none !important;
}
.rogue-run-inner {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px 12px max(12px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

/* 秘境探索：独立氛围（不用万妖塔红色塔纹） */
.rogue-realm-panel {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(45, 36, 72, 0.45) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 80% 100%, rgba(201, 162, 74, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, rgba(8, 9, 14, 0.98) 0%, rgba(4, 5, 10, 1) 100%);
}
.rogue-realm-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 85% 70% at 50% 45%, transparent 30%, rgba(0, 0, 0, 0.55) 100%);
}
.rogue-realm-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 30% 70%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1px 1px at 72% 18%, rgba(201, 162, 74, 0.4), transparent),
        radial-gradient(1px 1px at 88% 55%, rgba(179, 157, 219, 0.45), transparent),
        radial-gradient(1px 1px at 55% 40%, rgba(255, 255, 255, 0.25), transparent);
    background-size: 100% 100%;
    animation: rogueStarsDrift 90s linear infinite;
}
@keyframes rogueStarsDrift {
    from { transform: translateY(0); }
    to { transform: translateY(-24px); }
}
.rogue-realm-back {
    border-color: rgba(179, 157, 219, 0.28) !important;
    color: #e1bee7 !important;
    background: rgba(8, 10, 18, 0.65) !important;
}
.rogue-realm-header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 4px 0 10px;
    flex-shrink: 0;
}
.rogue-realm-heading {
    margin: 0;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 12px;
    text-indent: 12px;
    color: #f2e8d8;
    text-shadow:
        0 0 18px rgba(201, 162, 74, 0.4),
        0 0 36px rgba(126, 87, 194, 0.25);
}
.rogue-realm-lead {
    margin: 8px 0 0;
    font-size: 11px;
    letter-spacing: 4px;
    color: rgba(179, 157, 219, 0.55);
}

.rogue-run-hud,
.rogue-realm-hud {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
    flex-shrink: 0;
    justify-content: center;
}
.rogue-hud-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: rgba(200, 196, 220, 0.75);
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
}
.rogue-hud-label {
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.38);
    text-transform: none;
}
.rogue-hud-pill strong {
    color: #f0e8ff;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}
.rogue-hud-pill--floor {
    border-color: rgba(126, 87, 194, 0.28);
    box-shadow: 0 0 20px rgba(126, 87, 194, 0.08);
}
.rogue-hud-pill--hp {
    border-color: rgba(239, 83, 80, 0.22);
}
.rogue-hud-pill--hp strong {
    color: #ffcdd2;
}
.rogue-hud-pill--sand {
    border-color: rgba(201, 162, 74, 0.28);
}
.rogue-hud-pill--sand strong {
    color: #ffe0a3;
}

.rogue-hud-sand-slot {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
}
.rogue-hud-sand-slot-inner .item-slot,
.rogue-hud-sand-slot-inner .item-slot.item-slot--icon-only {
    transform: scale(0.76);
    transform-origin: left center;
}

.rogue-inline-item-slot,
.rogue-entry-meta-slot,
.rogue-shop-header-slot,
.rogue-diff-inline-slot {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
.rogue-inline-item-slot .item-slot,
.rogue-entry-meta-slot .item-slot,
.rogue-shop-header-slot .item-slot,
.rogue-diff-inline-slot .item-slot {
    transform: scale(0.82);
    transform-origin: center center;
}

.rogue-map-stage {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    border: 1px solid rgba(201, 162, 74, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 28%),
        rgba(0, 0, 0, 0.22);
    overflow: hidden;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
}
/* 原中央登天轨装饰线（易与岔路卡片视觉冲突，已关闭） */
.rogue-map-rail {
    display: none;
}

.rogue-route-floors {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 12px max(18px, env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    scroll-snap-type: y proximity;
    position: relative;
    z-index: 1;
}
.rogue-route-floors--realm {
    gap: 16px;
}
.rogue-tier-band {
    flex-shrink: 0;
    text-align: center;
    font-size: 11px;
    letter-spacing: 6px;
    text-indent: 6px;
    color: rgba(179, 157, 219, 0.55);
    padding: 6px 0 2px;
    margin-top: 4px;
    border-top: 1px solid rgba(126, 87, 194, 0.2);
}
.rogue-tier-band:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}
.rogue-floor-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    scroll-snap-align: center;
}
.rogue-floor-head {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
}
.rogue-floor-num {
    font-size: 15px;
    font-weight: bold;
    color: rgba(201, 162, 74, 0.85);
    text-shadow: 0 0 12px rgba(201, 162, 74, 0.25);
    font-variant-numeric: tabular-nums;
}
.rogue-floor-cap {
    font-size: 9px;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.28);
}
.rogue-floor-head--boss .rogue-floor-cap,
.rogue-floor-cap--boss {
    color: rgba(255, 183, 77, 0.65);
    letter-spacing: 6px;
    font-size: 10px;
}
.rogue-floor-nodes {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
}
.rogue-floor-nodes .rogue-node-card:not(.rogue-node-card--boss) {
    flex: 1;
    min-width: 0;
    max-width: 118px;
}
.rogue-floor-nodes--boss {
    justify-content: center;
}
.rogue-floor-nodes--boss .rogue-node-card {
    flex: 0 1 auto;
    width: min(100%, 220px);
    max-width: 220px;
}
/* 通关境主后：「进入下一层」在境主之上（向上推进）；flex 反序，DOM 仍为先 boss 后 advance 便于逻辑一致 */
.rogue-boss-next-chain {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.rogue-boss-next-connector {
    width: 3px;
    height: 20px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(232, 199, 107, 0.5), rgba(126, 87, 194, 0.65));
    box-shadow: 0 0 8px rgba(126, 87, 194, 0.35);
    flex-shrink: 0;
}
.rogue-node-card--advance-tier {
    min-height: 86px;
    border-color: rgba(126, 87, 194, 0.48);
    background: linear-gradient(165deg, rgba(126, 87, 194, 0.28) 0%, rgba(12, 14, 22, 0.94) 100%);
    box-shadow: 0 0 22px rgba(126, 87, 194, 0.22);
}
.rogue-node-card--advance-tier .rogue-node-label {
    color: var(--antique-gold);
    font-weight: bold;
    letter-spacing: 0.12em;
}
.rogue-advance-card {
    /* 与 .rogue-node-card 叠用：仅保留强调色，尺寸由节点卡规则接管 */
    color: inherit;
    font: inherit;
    text-align: center;
}
.rogue-advance-card:hover {
    border-color: rgba(255, 224, 130, 0.55);
}
.rogue-advance-card:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.rogue-node-card--unknown {
    border-color: rgba(120, 120, 140, 0.35) !important;
    background: rgba(0, 0, 0, 0.38) !important;
}
.rogue-node-card--unknown .rogue-node-icon {
    opacity: 0.55;
    filter: grayscale(0.85);
}
.rogue-node-card--unknown .rogue-node-label {
    color: rgba(200, 200, 210, 0.65);
}
.rogue-floor-row--boss {
    padding-top: 2px;
}

.rogue-node-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    min-height: 86px;
    padding: 0;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(165deg, rgba(38, 32, 52, 0.88) 0%, rgba(12, 14, 22, 0.94) 100%);
    color: inherit;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    position: relative;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.rogue-node-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 40%, transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
}
.rogue-node-card:disabled {
    cursor: default;
}
.rogue-node-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    min-height: 100%;
    box-sizing: border-box;
}
.rogue-node-icon {
    font-size: 26px;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
.rogue-node-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(220, 215, 235, 0.82);
}
.rogue-node-card--battle .rogue-node-label {
    color: rgba(255, 183, 167, 0.9);
}
.rogue-node-card--chest .rogue-node-label {
    color: rgba(255, 213, 128, 0.9);
}
.rogue-node-card--event .rogue-node-label {
    color: rgba(206, 192, 255, 0.95);
}
.rogue-node-card--shop .rogue-node-label {
    color: rgba(255, 204, 128, 0.9);
}
.rogue-node-card--rest .rogue-node-label {
    color: rgba(165, 214, 255, 0.88);
}
.rogue-node--active {
    border-color: rgba(179, 157, 219, 0.75);
    box-shadow:
        0 0 0 1px rgba(126, 87, 194, 0.35),
        0 0 28px rgba(126, 87, 194, 0.45),
        0 8px 24px rgba(0, 0, 0, 0.4);
    animation: rogueNodePulse 2.2s ease-in-out infinite;
}
@keyframes rogueNodePulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(126, 87, 194, 0.35), 0 0 22px rgba(126, 87, 194, 0.38), 0 8px 24px rgba(0, 0, 0, 0.4); }
    50% { box-shadow: 0 0 0 1px rgba(201, 162, 74, 0.4), 0 0 32px rgba(126, 87, 194, 0.55), 0 8px 28px rgba(0, 0, 0, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
    .rogue-node--active {
        animation: none;
    }
    .rogue-realm-stars {
        animation: none;
    }
    .trials-mode-card--rogue::before {
        animation: none;
    }
}
.rogue-node--done {
    opacity: 0.48;
    filter: grayscale(0.45) brightness(0.85);
}
.rogue-node--done .rogue-node-icon {
    filter: grayscale(0.6);
}
.rogue-node--locked {
    opacity: 0.38;
}
.rogue-node-card--boss {
    min-height: 132px;
    border-color: rgba(232, 199, 107, 0.35);
    background: linear-gradient(165deg, rgba(52, 38, 22, 0.92) 0%, rgba(18, 12, 10, 0.96) 100%);
}
.rogue-node-card--boss .rogue-node-icon {
    font-size: 34px;
}
.rogue-node-card--boss .rogue-node-label {
    color: #ffe0a8;
    letter-spacing: 3px;
}
.rogue-submodal .modal-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rogue-hud-buffs {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
    min-height: 0;
    align-items: center;
}
.rogue-hud-buffs:empty {
    display: none;
}
.rogue-hud-buff-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 2px 4px;
    border-radius: 10px;
    background: rgba(126, 87, 194, 0.18);
    border: 1px solid rgba(179, 157, 219, 0.3);
    max-width: 100%;
}
.rogue-hud-buff-row .item-slot {
    transform: scale(0.64);
    transform-origin: left center;
    flex-shrink: 0;
}
.rogue-hud-buff-label {
    font-size: 11px;
    color: var(--text-main);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 132px;
}
.rogue-rest-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rogue-rest-choice-btn {
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-main);
    cursor: pointer;
    font-size: 13px;
    line-height: 1.45;
}
.rogue-rest-choice-btn:hover {
    border-color: rgba(129, 199, 132, 0.45);
}
.rogue-rest-choice-btn strong {
    display: block;
    color: var(--jade-green);
    margin-bottom: 4px;
}
/* 休整三选一 / 增益卸下：左侧小图标 + 右侧横排文案（全局 .item-slot 为 width:100%，否则会占满一行把字挤成竖条） */
.rogue-rest-choice-btn--slot {
    padding: 8px 10px;
}
.rogue-rest-choice-btn--slot .rogue-rest-choice-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    text-align: left;
}
.rogue-rest-choice-btn--slot .rogue-rest-choice-inner .item-slot {
    width: 44px;
    max-width: 44px;
    flex: 0 0 44px;
    transform: none;
    align-self: center;
}
.rogue-rest-choice-btn--slot .rogue-rest-choice-inner .item-slot > .item-slot-box {
    width: 44px;
    max-width: 44px;
    border-radius: 8px;
}
.rogue-rest-choice-btn--slot .item-slot-box .proc-item-icon {
    padding: 3px !important;
}
.rogue-rest-choice-btn--slot .item-count-badge {
    display: none;
}
.rogue-rest-choice-btn--slot .rogue-rest-choice-copy {
    flex: 1 1 0;
    min-width: 0;
}
.rogue-rest-choice-btn--slot .rogue-rest-choice-copy strong {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.rogue-rest-choice-btn--slot .rogue-rest-choice-desc {
    display: block;
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: anywhere;
}
/* 云游商人：与坊市「可直接兑换」相同的 shop-product-grid + shop-product-card 三列排布 */
.rogue-shop-list.shop-product-grid {
    max-height: 52vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-width: none;
    width: 100%;
}
.tower-challenge-root {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tower-challenge-root[hidden] {
    display: none !important;
}
.tower-panel-root--with-back {
    position: relative;
    padding-top: 42px;
}
.trials-back-btn {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 3;
    margin: 0;
    padding: 6px 12px 6px 8px;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--antique-gold);
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(201, 162, 74, 0.35);
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.trials-back-btn:active {
    filter: brightness(1.12);
}

/* 万妖塔：可滚动层数列表 + 详情弹窗 */
#panel-tower .tower-bg-image.tower-panel-root,
#panel-tower .rogue-realm-panel.tower-panel-root {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: auto;
    max-height: none;
}
.tower-panel-root {
    align-items: stretch;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 4px 0 8px;
    box-sizing: border-box;
    z-index: 1;
}
.tower-panel-title {
    flex-shrink: 0;
    font-size: 28px;
    color: #ff3333;
    text-shadow: 0 0 18px rgba(255, 51, 51, 0.45);
    letter-spacing: 6px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 12px;
}
.tower-floor-scroll {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    padding: 0 2px 4px;
}
.tower-floor-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
}

#panel-tower .destiny-road-root.tower-panel-root {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: auto;
    max-height: none;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255, 213, 79, 0.06) 0%, transparent 55%),
        linear-gradient(180deg, rgba(18, 22, 28, 0.95) 0%, rgba(8, 10, 14, 0.97) 100%);
    border-radius: 10px;
    border: 1px solid rgba(255, 213, 79, 0.2);
    box-sizing: border-box;
}
#destiny-road-root[hidden] {
    display: none !important;
}
.destiny-road-root .tower-panel-title {
    color: #ffd54f;
    text-shadow: 0 0 16px rgba(255, 213, 79, 0.4);
}
.destiny-road-week-hint {
    font-size: 14px;
    font-weight: 600;
    color: #e7edf7;
    text-shadow: 0 0 8px rgba(231, 237, 247, 0.16);
    text-align: center;
    margin: 0 8px 12px;
    line-height: 1.5;
    flex-shrink: 0;
}
.destiny-road-card-list {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    padding: 0 2px max(12px, env(safe-area-inset-bottom, 0px));
}
/* 天命之路副本列表：双行奖励区 + 文案，固定最小高度避免矮屏下被压扁 */
.destiny-road-card-list .trials-mode-card {
    min-height: 232px;
    box-sizing: border-box;
}
.tower-tier {
    position: relative;
    border-radius: 8px;
    border: 1px solid var(--bronze-border);
    background: linear-gradient(180deg, rgba(18, 22, 28, 0.92) 0%, rgba(8, 10, 14, 0.94) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 51, 51, 0.06), 0 4px 14px rgba(0, 0, 0, 0.35);
    padding: 10px 12px 12px;
    overflow: hidden;
}
.tower-tier-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.tower-tier-head-side {
    width: 52px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}
.tower-tier-detail-btn {
    font-size: 11px !important;
    padding: 5px 10px !important;
    line-height: 1.2 !important;
}
.tower-tier-floor {
    flex: 1;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    color: var(--antique-gold);
    letter-spacing: 2px;
}
.tower-tier-body {
    position: relative;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(74, 64, 49, 0.35);
    padding: 10px 8px;
}
.tower-tier-body--action {
    padding-bottom: 12px;
}
.tower-tier-tag {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 3px;
}
.tower-tier-tag--current {
    color: var(--jade-green);
}
.tower-tier-tag--passed {
    color: #69f0ae;
    font-weight: bold;
}
.tower-tier--next .tower-tier-body {
    min-height: 64px;
}
.tower-tier-mist {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(240, 248, 255, 0.06) 0%, rgba(200, 210, 230, 0.12) 45%, rgba(18, 22, 28, 0.55) 100%);
    mix-blend-mode: screen;
    opacity: 0.85;
    border-radius: 6px;
}
.tower-tier--next .tower-tier-tag--locked {
    position: relative;
    z-index: 1;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 1.45;
    padding: 0 8px;
    max-width: 100%;
}
.tower-tier-challenge-btn {
    position: relative;
    z-index: 1;
    padding: 12px 36px !important;
    font-size: 16px !important;
    width: 100%;
    max-width: 260px;
    box-sizing: border-box;
}
.tower-floor-detail-content .tower-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 13px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(74, 64, 49, 0.4);
}
.tower-floor-detail-content .tower-detail-k {
    color: var(--text-muted);
    flex-shrink: 0;
}
.tower-floor-detail-content .tower-detail-v {
    color: var(--text-main);
    text-align: right;
    word-break: break-word;
}
.tower-floor-detail-content .tower-detail-v--power {
    color: var(--jade-green);
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}
.tower-floor-detail-content .tower-detail-section-title {
    font-size: 12px;
    color: var(--tier-4);
    margin: 14px 0 10px;
    letter-spacing: 2px;
}
.tower-detail-reward-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 4px 0 8px;
}
/* 修炼塔结算：少量 slot 时整组水平居中（不用三列网格以免靠左） */
.tower-victory-reward-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0 8px;
}
.tower-victory-reward-grid > .item-slot {
    flex: 0 0 auto;
    max-width: 80px;
    width: 80px;
    margin: 0;
    min-height: 0;
}
.tower-victory-reward-grid > .tower-detail-reward-empty {
    flex: 1 0 100%;
    width: 100%;
    text-align: center;
}
.tower-detail-reward-grid > .item-slot,
.tower-detail-reward-grid > .tower-detail-reward-cell {
    max-width: 96px;
    margin: 0 auto;
    width: 100%;
}
.tower-detail-reward-grid > .item-slot {
    min-height: 0;
}
.tower-detail-reward-cell {
    position: relative;
}
.tower-detail-reward-cell > .item-slot {
    margin: 0;
    min-height: 0;
}
.tower-detail-slot-claimed-mask {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 6px;
    pointer-events: none;
}
.tower-detail-slot-claimed-label {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #69f0ae;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.tower-detail-reward-empty {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    padding: 12px 0;
}

#login-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at center, #0a0f14 0%, var(--ink-bg) 100%);
    z-index: 100000;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: opacity 0.5s ease;
}
.login-title {
    font-size: 46px; color: var(--antique-gold); text-shadow: 0 0 30px rgba(212, 175, 55, 0.6);
    margin-bottom: 40px; letter-spacing: 8px; font-weight: bold; font-family: 'KaiTi', serif;
}

.taptap-login-btn {
    width: 100%; height: 46px; border: none; border-radius: 10px; background: #14d9a0; color: #062317;
    font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center;
    gap: 10px; cursor: pointer; box-shadow: 0 8px 18px rgba(20, 217, 160, 0.25);
    transition: transform 0.12s ease, filter 0.12s ease; letter-spacing: 0.5px;
}
.taptap-login-btn:active { transform: scale(0.98); filter: brightness(0.94); }
.taptap-login-btn.disabled { pointer-events: none; opacity: 0.65; }

.taptap-login-icon {
    width: 24px; height: 24px; border-radius: 50%; background: #062317; color: #14d9a0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; font-family: sans-serif;
}

/* 悬赏：活跃度区叠在页签之上，避免页签红点盖住宝箱预览气泡 */
#daily-modal .modal-header-fixed .nav-tabs {
    position: relative;
    z-index: 1;
}
#daily-modal .daily-modal-activity {
    position: relative;
    z-index: 4;
}
#daily-modal .daily-tab-btn .red-dot {
    z-index: 1;
}
/* 宝箱预览气泡向上超出标题区时，勿被全局 .modal-content { overflow:hidden } 裁切 */
#daily-modal.modal-wrapper > .modal-content {
    overflow: visible;
}

/* 悬赏任务行：领取/已领取/未完成统一占位，避免宽窄不一 */
.daily-task-action.btn {
    min-width: 76px;
    min-height: 34px;
    padding: 6px 12px !important;
    font-size: 12px !important;
    line-height: 1.25;
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    flex-shrink: 0;
}

/* 悬赏系统新增样式：真按钮态与气泡提示 */
.daily-tab-btn {
    background: linear-gradient(180deg, #1f2429 0%, #121518 100%);
    border: 1px solid var(--bronze-border);
    color: #8496a8;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
    transition: all 0.2s;
    position: relative;
}
.daily-tab-btn.active {
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.2) 0%, #121518 100%);
    border-color: var(--antique-gold);
    color: var(--antique-gold);
    box-shadow: inset 0 0 10px rgba(212,175,55,0.2), 0 4px 6px rgba(0,0,0,0.5);
}

.active-chest {
    position: absolute; width: 26px; height: 26px; background: #1a1e22; border: 1px solid var(--bronze-border); 
    border-radius: 4px; transform: translateX(-50%); cursor: pointer; display: flex; 
    justify-content: center; align-items: center; font-size: 14px; z-index: 10;
}
.active-chest.can-claim {
    border-color: var(--jade-green); animation: pulseCyan 1s infinite alternate; 
    box-shadow: 0 0 10px rgba(0,230,118,0.5); background: #061510;
}
.active-chest.claimed {
    opacity: 0.4; border-color: #333; filter: grayscale(1);
}
.task-item {
    background: linear-gradient(90deg, rgba(20, 25, 30, 0.8) 0%, rgba(10, 15, 20, 0.8) 100%);
    border: 1px solid #1a1e22; border-radius: 6px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px;
    box-sizing: border-box;
    min-height: 96px;
    height: 96px;
    flex-shrink: 0;
}
.task-item-left { display: flex; flex-direction: column; gap: 4px; text-align: left; flex: 1 1 auto; min-width: 0; justify-content: center; overflow: hidden; }
.task-item-title {
    font-size: 14px; font-weight: bold; color: var(--text-main);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25;
}
.task-item-reward { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.task-item-progress { font-size: 11px; color: var(--tier-3); margin-top: 0; font-family: monospace; flex-shrink: 0; }
.task-item-slots {
    display: flex; flex-wrap: nowrap; gap: 6px; justify-content: center; align-items: center; align-content: center;
    flex: 0 0 56px; width: 56px; min-width: 56px; max-width: 56px;
}
.task-item-slots .task-item-slot.item-slot {
    width: 52px; flex-shrink: 0; pointer-events: auto;
}
.task-item-slots .task-item-slot .item-name {
    font-size: 9px; line-height: 1.15; max-width: 100%;
}
.task-item-slots .task-item-slot .item-count-badge {
    font-size: 8px; bottom: 2px; right: 2px;
}

.chest-tooltip {
    position: absolute;
    left: 50%;
    right: auto;
    background: rgba(10, 15, 20, 0.95);
    border: 1px solid var(--tier-3);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 11px;
    color: #fff;
    z-index: 60;
    width: max-content;
    max-width: min(280px, calc(100vw - 20px));
    transform: translateX(-50%);
    bottom: 40px; 
    pointer-events: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.8);
    display: none;
    text-align: left;
    line-height: 1.6;
}
.chest-tooltip-head {
    color: var(--tier-4);
    margin-bottom: 6px;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px dashed #333;
    padding-bottom: 4px;
    position: relative;
    z-index: 0;
}
.chest-tooltip-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: flex-start;
    pointer-events: auto;
}
.chest-tooltip-slots .chest-tooltip-slot.item-slot {
    width: 52px;
    flex-shrink: 0;
    pointer-events: auto;
}
.chest-tooltip-slots .chest-tooltip-slot .item-name {
    font-size: 9px;
    line-height: 1.15;
    max-width: 100%;
}
.chest-tooltip-slots .chest-tooltip-slot .item-count-badge {
    font-size: 8px;
    bottom: 2px;
    right: 2px;
}
.chest-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    /* 默认居中；视口夹紧后由 JS 设为像素值，使三角仍对准宝箱 */
    left: var(--chest-tooltip-arrow-x, 50%);
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: var(--tier-3) transparent transparent transparent;
}

/* 纳戒：道具详情小气泡（点击空白处关闭，无压暗） */
.inv-popover-mask {
    position: fixed;
    inset: 0;
    background: transparent; /* 不压暗 */
    border: none;
    padding: 0;
    margin: 0;
    z-index: 10050; /* 高于 inventory-modal(9900) */
    display: none;
    cursor: default;
}
.inv-popover {
    position: fixed;
    z-index: 10051;
    min-width: 220px;
    max-width: min(320px, calc(100vw - 24px));
    background: rgba(10, 15, 20, 0.96);
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(255,255,255,0.04);
    padding: 10px 12px;
    color: var(--text-main);
    font-size: 11px;
    line-height: 1.55;
    display: none;
    pointer-events: auto;
    text-align: left;
    backdrop-filter: blur(2px);
}
.inv-popover::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(10, 15, 20, 0.96);
    border-right: 1px solid rgba(212, 175, 55, 0.55);
    border-bottom: 1px solid rgba(212, 175, 55, 0.55);
    transform: rotate(45deg);
}
.inv-popover[data-arrow="down"]::after {
    bottom: -6px;
    left: 50%;
    margin-left: -5px;
}
.inv-popover[data-arrow="up"]::after {
    top: -6px;
    left: 50%;
    margin-left: -5px;
    transform: rotate(225deg);
}
.inv-popover-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(255,255,255,0.10);
}
.inv-popover-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
}
.inv-popover-title {
    font-size: 13px;
    font-weight: bold;
    line-height: 1.2;
}
.inv-popover-sub {
    margin-top: 3px;
    font-size: 10px;
    color: var(--text-muted);
}
.inv-popover-desc {
    white-space: pre-wrap;
    color: rgba(235,240,245,0.92);
}
.inv-popover-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    justify-content: center;
}
.inv-popover-actions .btn {
    padding: 7px 14px;
    font-size: 12px;
}

/* 纳戒套装效果 tips：加宽加高可滚动，其余与 inv-popover 一致 */
.inv-popover.bag-set-bonus-tip {
    max-width: min(384px, calc(100vw - 20px));
    min-width: 264px;
    max-height: min(72vh, 460px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px 14px;
    font-size: 12px;
    line-height: 1.55;
}

/* 法宝共鸣面板 */
.resonance-panel-wrap {
    flex-shrink: 0;
    margin: 2px 0 10px 0;
    padding: 10px 8px;
    background: rgba(8, 10, 14, 0.75);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 8px;
    max-height: min(28vh, 220px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.resonance-panel-title {
    font-size: 12px;
    color: var(--antique-gold);
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    font-weight: bold;
}
.resonance-hint {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: normal;
    letter-spacing: 0;
}
.resonance-panel { display: flex; flex-direction: column; gap: 10px; }
.resonance-empty {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    padding: 12px 8px;
    line-height: 1.55;
}
.resonance-type-card {
    border: 1px solid rgba(212, 160, 60, 0.28);
    border-radius: 8px;
    padding: 8px;
    background: linear-gradient(180deg, rgba(22, 18, 12, 0.95) 0%, rgba(10, 12, 16, 0.98) 100%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
}
.resonance-type-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.resonance-typename { font-size: 13px; font-weight: bold; color: var(--tier-4); }
.resonance-count { font-size: 10px; color: var(--text-muted); font-family: monospace; }
.resonance-count b { color: #fff; }
/* 仅展示已激活件套，可折叠 */
.resonance-tier-active {
    margin-bottom: 6px;
    border-radius: 6px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.resonance-tier-active:last-child { margin-bottom: 0; }
.resonance-tier-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 10px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.resonance-tier-toggle:active { background: rgba(255,255,255,0.04); }
.resonance-tier-body {
    display: none;
    padding: 0 10px 8px 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.resonance-tier-active.is-expanded .resonance-tier-body { display: block; }
.resonance-tier-active.is-expanded .resonance-chevron { transform: rotate(180deg); }
.resonance-chevron {
    margin-left: auto;
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgba(212, 175, 55, 0.75);
    transition: transform 0.2s ease;
    opacity: 0.85;
}
.resonance-badge {
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(212, 175, 55, 0.22);
    color: var(--antique-gold);
    font-family: monospace;
}
.resonance-skill-name {
    font-size: 11px;
    font-weight: bold;
    color: #e8d89a;
    flex: 1;
    min-width: 0;
    text-align: left;
}
.resonance-state {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--jade-green);
    background: rgba(0, 230, 118, 0.12);
}
/* 法宝阁折叠内：共鸣块更紧凑 */
.bag-resonance-body .resonance-type-card {
    padding: 6px;
    margin-bottom: 6px;
}
.bag-resonance-body .resonance-type-card:last-child { margin-bottom: 0; }
.bag-resonance-body .resonance-type-head {
    margin-bottom: 4px;
    padding-bottom: 4px;
}
.bag-resonance-body .resonance-typename { font-size: 12px; }
.bag-resonance-body .resonance-tier-toggle {
    padding: 6px 8px;
    gap: 4px;
}
.bag-resonance-body .resonance-empty {
    padding: 8px 6px;
    font-size: 10px;
}

.resonance-lines {
    margin: 6px 0 0 0;
    padding-left: 16px;
    font-size: 10px;
    color: #b0b8c0;
    line-height: 1.5;
    text-align: left;
}
/* 装备详情 · 套装共鸣（与法宝阁折叠样式一致） */
.modal-resonance-wrap {
    margin-top: 8px;
    padding: 0 !important;
    border: 1px solid rgba(230, 160, 60, 0.45) !important;
    border-radius: 8px !important;
    background: rgba(6, 8, 12, 0.9) !important;
    overflow: hidden;
}
.modal-resonance-collapsible.expanded .resonance-chevron { transform: rotate(180deg); }
.modal-resonance-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 0;
    border: none;
    background: rgba(0, 0, 0, 0.35);
    color: #f0d78c;
    font-size: 11px;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.modal-resonance-toggle-label { flex: 1; min-width: 0; line-height: 1.4; }
.modal-resonance-body {
    display: none;
    padding: 8px 12px 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.modal-resonance-collapsible.expanded .modal-resonance-body { display: block; }
.modal-resonance-tier { margin-bottom: 12px; }
.modal-resonance-tier:last-child { margin-bottom: 0; }
.modal-resonance-tier-title {
    font-size: 10px;
    font-weight: bold;
    margin-bottom: 5px;
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.modal-resonance-tier.is-active .modal-resonance-tier-title {
    color: #ffdd88;
    text-shadow: 0 0 12px rgba(255, 200, 100, 0.15);
}
.modal-resonance-tier.is-active .modal-resonance-lines {
    color: #f2e6bf;
}
.modal-resonance-tier.is-locked .modal-resonance-tier-title {
    color: #5c5f66;
}
.modal-resonance-tier.is-locked .modal-resonance-lines {
    color: #4a5058;
}
.modal-resonance-lines {
    margin: 0;
    padding-left: 14px;
    font-size: 10px;
    line-height: 1.55;
}
.modal-res-badge {
    font-size: 9px;
    font-weight: bold;
    color: var(--jade-green);
    background: rgba(0, 230, 118, 0.12);
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 2px;
}
.modal-resonance-next {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ========== 洞天福地 ========== */
.blessed-land-overlay {
    position: fixed;
    inset: 0;
    z-index: 9750;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 10, 14, 0.72);
    padding: 12px;
    box-sizing: border-box;
}
.blessed-land-dialog {
    width: 100%;
    max-width: 420px;
    max-height: min(92vh, 640px);
    display: flex;
    flex-direction: column;
    background: linear-gradient(165deg, rgba(28, 22, 18, 0.97) 0%, rgba(12, 10, 8, 0.98) 100%);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}
.blessed-land-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 6px 14px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}
.blessed-land-title {
    margin: 0;
    font-size: 18px;
    letter-spacing: 6px;
    color: var(--antique-gold);
    font-family: 'KaiTi', 'STKaiti', serif;
    text-shadow: 0 1px 3px #000;
}
.blessed-land-x {
    border: none;
    background: rgba(0, 0, 0, 0.35);
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.blessed-land-x:active {
    background: rgba(255, 82, 82, 0.25);
    color: #ff8a80;
}
.blessed-land-sub {
    margin: 8px 14px 10px;
    font-size: 11px;
    line-height: 1.55;
    color: var(--text-muted);
}
.blessed-land-hub {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 10px 12px;
}
.blessed-land-cards {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: stretch;
    align-items: stretch;
}
.blessed-land-card {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 6px 14px;
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(40, 34, 28, 0.9) 0%, rgba(18, 14, 12, 0.95) 100%);
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.06);
}
.blessed-land-card:active {
    transform: scale(0.98);
    border-color: rgba(0, 188, 212, 0.45);
}
.blessed-land-card-icon-wrap {
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.blessed-land-card-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    image-rendering: pixelated;
}
.blessed-land-card-name {
    font-size: 13px;
    font-weight: bold;
    color: #e8dcc8;
    letter-spacing: 1px;
    margin-bottom: 4px;
    font-family: 'KaiTi', 'STKaiti', serif;
}
.blessed-land-card-tag {
    font-size: 10px;
    color: var(--jade-green);
    margin-bottom: 8px;
    line-height: 1.3;
}
.blessed-land-card-remain {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: auto;
}
.blessed-land-pick {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 10px 12px;
}
.blessed-land-back {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 6px;
    flex-shrink: 0;
}
.blessed-land-pick-head {
    flex-shrink: 0;
    text-align: center;
    margin-bottom: 10px;
    padding: 0 4px;
}
.blessed-land-pick-title {
    font-size: 16px;
    color: var(--antique-gold);
    letter-spacing: 4px;
    margin: 0 0 4px 0;
    font-family: 'KaiTi', 'STKaiti', serif;
    text-shadow: 0 1px 2px #000;
}
.blessed-land-pick-sub {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 0;
}
.blessed-land-tier-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 2px 4px 0;
}
.blessed-land-tier-row {
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 10px;
    padding: 8px 12px 10px;
    background: linear-gradient(165deg, rgba(22, 18, 14, 0.92) 0%, rgba(8, 8, 10, 0.94) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 248, 220, 0.04);
}
.blessed-land-tier-row--current {
    border-color: rgba(0, 188, 212, 0.35);
    box-shadow: inset 0 0 0 1px rgba(0, 188, 212, 0.12), 0 4px 14px rgba(0, 0, 0, 0.35);
}
.blessed-land-tier-row--swept {
    border-color: rgba(102, 187, 106, 0.28);
}
.blessed-land-tier-row--next-preview {
    border-color: rgba(255, 255, 255, 0.1);
    opacity: 0.98;
}
.blessed-land-tier-head {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
    padding: 0;
    /* 居中块为 absolute，需预留高度以免与下方主区域叠压 */
    min-height: 40px;
}
.blessed-land-tier-head-left {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    text-align: center;
    max-width: min(58%, calc(100% - 108px));
    pointer-events: none;
}
.blessed-land-tier-badge-row {
    display: flex;
    justify-content: center;
    margin-top: 3px;
}
.blessed-land-tier-label {
    font-size: 15px;
    font-weight: bold;
    color: #f5ebe0;
    font-family: 'KaiTi', 'STKaiti', serif;
    line-height: 1.15;
}
.blessed-land-tier-badge {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.35);
}
.blessed-land-tier-badge--done {
    color: #a5d6a7;
    border-color: rgba(102, 187, 106, 0.45);
    background: rgba(46, 125, 50, 0.15);
}
.blessed-land-tier-badge--current {
    color: #80deea;
    border-color: rgba(0, 188, 212, 0.45);
    background: rgba(0, 131, 143, 0.18);
}
.blessed-land-tier-badge--next {
    color: #b0bec5;
    border-color: rgba(176, 190, 198, 0.35);
}
.blessed-land-tier-power {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    text-align: right;
    line-height: 1.15;
    padding-top: 0;
}
.blessed-land-tier-power-label {
    font-size: 9px;
    color: rgba(212, 175, 55, 0.72);
    letter-spacing: 1px;
    margin-bottom: 1px;
}
.blessed-land-tier-power-val {
    font-size: 16px;
    font-weight: 700;
    color: #e8d4a8;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    letter-spacing: 0.02em;
}
.blessed-land-tier-main {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    margin-top: 0;
    padding-top: 6px;
    border-top: 1px solid rgba(212, 175, 55, 0.12);
    min-height: 0;
}
.blessed-land-tier-reward-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.blessed-land-tier-action-col {
    flex: 0 0 96px;
    max-width: 104px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 6px;
}
.blessed-land-reward-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 8px 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.38);
    border: 1px solid rgba(212, 175, 55, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 248, 220, 0.04);
}
.blessed-land-reward-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 8px;
    letter-spacing: 2px;
    text-align: center;
}
.blessed-land-reward-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: stretch;
    align-content: center;
}
.blessed-land-reward-grid > .item-slot {
    width: 76px;
    max-width: 76px;
    flex: 0 0 76px;
    cursor: default;
}
.blessed-land-reward-grid > .item-slot:active {
    transform: none;
}
.blessed-land-reward-empty {
    font-size: 11px;
    color: var(--text-muted);
    width: 100%;
    text-align: center;
    padding: 6px 0;
}
.blessed-land-tier-block-reason {
    font-size: 9px;
    color: #ffab91;
    text-align: center;
    line-height: 1.35;
}
.blessed-land-tier-next-foot-text {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    padding: 4px 2px;
    line-height: 1.45;
    letter-spacing: 1px;
    margin: auto 0;
}
.blessed-land-action-btn {
    width: 100%;
    box-sizing: border-box;
    font-weight: bold;
    font-size: 11px;
    letter-spacing: 2px;
    padding: 5px 10px;
    min-height: 0;
    align-self: stretch;
}
.blessed-land-action-btn.disabled {
    opacity: 0.45;
    pointer-events: none;
}
.blessed-land-sweep-btn:not(.disabled) {
    background: linear-gradient(180deg, rgba(76, 175, 80, 0.35) 0%, rgba(46, 125, 50, 0.5) 100%);
    border-color: rgba(129, 199, 132, 0.55);
}
.blessed-land-challenge-btn:not(.disabled) {
    background: linear-gradient(180deg, rgba(0, 188, 212, 0.22) 0%, rgba(0, 131, 143, 0.38) 100%);
    border-color: rgba(77, 208, 225, 0.45);
}

/* ===== 藏经阁：视觉统一 ===== */
#sys-manuals .manual-focus-card {
    background: #080b0e;
    border: 1px solid #1a1c20;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
}
#sys-manuals .manual-focus-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
#sys-manuals .manual-focus-title { font-size: 12px; color: #fff; }
#sys-manuals .manual-focus-name { color: #f3d27a; font-weight: 700; }
#sys-manuals .manual-focus-lv { font-size: 11px; color: var(--text-muted); }
#sys-manuals .manual-focus-lv-num { color: #fff; }
#sys-manuals .manual-focus-bar {
    height: 8px;
    border-radius: 999px;
    background: #111821;
    overflow: hidden;
    margin-bottom: 6px;
}
#sys-manuals .manual-focus-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #28b4ff, #66ffd2);
}
#sys-manuals .manual-focus-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-muted);
    font-size: 11px;
    margin-bottom: 8px;
}
#sys-manuals .manual-focus-prog {
    flex-shrink: 0;
    padding-top: 2px;
    line-height: 1.35;
}
#sys-manuals .manual-focus-bonus-block {
    flex: 1;
    min-width: 0;
    text-align: right;
}
#sys-manuals .manual-focus-bonus-heading {
    font-size: 11px;
    color: #f3d27a;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    line-height: 1.2;
}
#sys-manuals .manual-focus-bonus-lines {
    font-size: 11px;
    line-height: 1.45;
}
#sys-manuals .manual-bonus-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    margin-top: 2px;
    box-sizing: border-box;
}
#sys-manuals .manual-bonus-line:first-of-type {
    margin-top: 0;
}
#sys-manuals .manual-bonus-k {
    color: rgba(184, 196, 208, 0.88);
    font-size: 10px;
    flex-shrink: 0;
}
#sys-manuals .manual-bonus-v {
    color: #d9e7ff;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: normal;
    max-width: 100%;
}
#sys-manuals .manual-bonus-cur {
    color: #8ae8d4;
    font-weight: 600;
}
#sys-manuals .manual-bonus-arrow {
    color: rgba(243, 210, 122, 0.55);
    margin: 0 3px;
    font-size: 10px;
    font-weight: normal;
}
#sys-manuals .manual-bonus-next {
    color: #f3d27a;
    font-weight: 700;
}
#sys-manuals .manual-bonus-foot {
    margin-top: 5px;
    font-size: 9px;
    color: rgba(184, 196, 208, 0.62);
    line-height: 1.35;
}
#sys-manuals .manual-row-eff {
    font-size: 10px;
    color: rgba(138, 232, 212, 0.9);
    margin-top: 4px;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}
#sys-manuals .manual-slot-row { display: flex; gap: 8px; margin-bottom: 8px; }
#sys-manuals .manual-state-chip {
    flex: 1;
    min-width: 0;
    background: rgba(16, 22, 30, 0.82);
    border: 1px solid rgba(98, 116, 136, 0.35);
    border-radius: 6px;
    padding: 6px 8px;
}
#sys-manuals .manual-state-chip-label {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.2;
}
#sys-manuals .manual-state-chip-value {
    color: #d9e7ff;
    font-size: 14px;
    font-weight: 700;
    margin-top: 2px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
#sys-manuals .manual-daily-count {
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
    margin-bottom: 8px;
}
#sys-manuals .manual-recommend-lane {
    margin-bottom: 8px;
    border: 1px solid rgba(243, 210, 122, 0.55);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(28, 24, 14, 0.95) 0%, rgba(14, 19, 24, 0.96) 100%);
    box-shadow: 0 0 0 1px rgba(243, 210, 122, 0.12) inset, 0 6px 16px rgba(0, 0, 0, 0.34);
    padding: 8px;
}
#sys-manuals .manual-recommend-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
#sys-manuals .manual-recommend-title {
    font-size: 12px;
    color: #f3d27a;
    font-weight: 700;
    letter-spacing: 1px;
}
#sys-manuals .manual-recommend-tag {
    font-size: 10px;
    color: #fce8b3;
    border: 1px solid rgba(243, 210, 122, 0.45);
    border-radius: 999px;
    padding: 1px 6px;
    background: rgba(243, 210, 122, 0.12);
}
#sys-manuals .manual-hint { font-size: 11px; color: #b8c4d0; margin-bottom: 8px; }
#sys-manuals .manual-btn-main {
    width: 100%;
    box-sizing: border-box;
    font-weight: 700;
}
#sys-manuals .manual-btn-recommend {
    border-color: rgba(243, 210, 122, 0.82);
    background: linear-gradient(180deg, rgba(96, 75, 22, 0.95) 0%, rgba(66, 49, 10, 0.96) 52%, rgba(46, 35, 8, 0.98) 100%);
    color: #ffe9b3;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
    letter-spacing: 2px;
    box-shadow: 0 0 0 1px rgba(243, 210, 122, 0.24) inset, 0 4px 14px rgba(114, 83, 18, 0.34);
}
#sys-manuals .manual-btn-recommend:not(.disabled) {
    transform: translateY(-1px);
}
#sys-manuals .manual-btn-recommend.disabled {
    opacity: 0.55;
    filter: saturate(0.6);
}
#sys-manuals .manual-btn-row { display: flex; gap: 6px; }
#sys-manuals .manual-btn-claim { margin-top: 8px; justify-content: center; }
#sys-manuals .manual-rows { display: flex; flex-direction: column; gap: 8px; }
#sys-manuals .manual-row { border-color: var(--bronze-border); }
#sys-manuals .manual-row-actions { display: flex; gap: 4px; }
#sys-manuals .manual-row-actions .btn { min-width: 44px; }

/* 造化丹房 · 炼制修为丹弹窗：目标与材料分区 */
#alchemy-cultivation-refine-modal .acr-refine-body {
    padding-top: 2px;
}
#alchemy-cultivation-refine-modal .acr-refine-panel {
    background: #080b0e;
    border-radius: 8px;
    padding: 12px 14px 14px;
    margin-bottom: 12px;
    box-sizing: border-box;
}
#alchemy-cultivation-refine-modal .acr-refine-panel--target {
    border: 1px solid rgba(212, 175, 55, 0.28);
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.06);
}
#alchemy-cultivation-refine-modal .acr-refine-panel--costs {
    border: 1px solid #1f242c;
}
#alchemy-cultivation-refine-modal .acr-refine-panel-title {
    font-size: 11px;
    font-weight: 600;
    color: #90a4ae;
    letter-spacing: 0.12em;
    margin: 0 0 12px;
    text-align: center;
}
#alchemy-cultivation-refine-modal .acr-refine-panel--target .acr-refine-panel-title {
    color: #c9b87c;
}
#alchemy-cultivation-refine-modal .acr-refine-target-slot-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
#alchemy-cultivation-refine-modal .acr-refine-icon-host {
    width: 88px;
    min-width: 88px;
    flex-shrink: 0;
}
#alchemy-cultivation-refine-modal .acr-refine-materials-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    min-height: 48px;
}
#alchemy-cultivation-refine-modal .acr-refine-mat-col .item-slot > .item-slot-box {
    border-radius: 6px;
}
#alchemy-cultivation-refine-modal .acr-refine-icon-host .item-slot > .item-name,
#alchemy-cultivation-refine-modal .acr-refine-mat-col .item-slot > .item-name {
    font-size: 11px;
    line-height: 1.25;
    margin-top: 2px;
    max-width: 100%;
}

#alchemy-cultivation-refine-modal .acr-qty-row {
    margin: 10px 0 4px;
    padding: 10px 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid #1f242c;
    box-sizing: border-box;
}
#alchemy-cultivation-refine-modal .acr-qty-label {
    font-size: 12px;
    color: #cfd8dc;
    text-align: center;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}
#alchemy-cultivation-refine-modal .acr-qty-label span {
    color: var(--antique-gold, #d4af37);
    font-weight: 700;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}

/* 与炼制目标区一致的金框凹槽 + 自定义轨道，避免原生 range 网页感 */
#alchemy-cultivation-refine-modal .acr-qty-slider-shell {
    position: relative;
    margin: 0 0 8px;
    padding: 16px 14px 18px;
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -12px 28px rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, rgba(12, 14, 18, 0.98) 0%, rgba(6, 8, 10, 0.94) 100%);
    box-sizing: border-box;
}
#alchemy-cultivation-refine-modal .acr-qty-slider-shell::before,
#alchemy-cultivation-refine-modal .acr-qty-slider-shell::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    pointer-events: none;
    border-color: rgba(212, 175, 55, 0.42);
    border-style: solid;
    border-width: 0;
    z-index: 1;
}
#alchemy-cultivation-refine-modal .acr-qty-slider-shell::before {
    top: 7px;
    left: 7px;
    border-top-width: 2px;
    border-left-width: 2px;
    border-top-left-radius: 1px;
}
#alchemy-cultivation-refine-modal .acr-qty-slider-shell::after {
    bottom: 7px;
    right: 7px;
    border-bottom-width: 2px;
    border-right-width: 2px;
    border-bottom-right-radius: 1px;
}

#alchemy-cultivation-refine-modal .acr-qty-slider {
    --acr-fill-pct: 0%;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 32px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
}
#alchemy-cultivation-refine-modal .acr-qty-slider:focus {
    outline: none;
}
#alchemy-cultivation-refine-modal .acr-qty-slider:focus-visible {
    outline: 1px solid rgba(212, 175, 55, 0.55);
    outline-offset: 4px;
    border-radius: 4px;
}

/* WebKit 轨道：左段金铜渐变与炼制进度条同源 */
#alchemy-cultivation-refine-modal .acr-qty-slider::-webkit-slider-runnable-track {
    height: 11px;
    border-radius: 5px;
    border: 1px solid #2a3038;
    background: linear-gradient(
        90deg,
        #6a4b12 0%,
        #d4af37 var(--acr-fill-pct),
        #0a0c0f var(--acr-fill-pct),
        #12161c 100%
    );
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.85),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}
#alchemy-cultivation-refine-modal .acr-qty-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -6px;
    border-radius: 50%;
    border: 1px solid #e8c76b;
    background: radial-gradient(circle at 32% 28%, #fff8e1 0%, #e8c76b 38%, #a67c00 72%, #4a3208 100%);
    box-shadow:
        0 0 12px rgba(212, 175, 55, 0.55),
        0 3px 6px rgba(0, 0, 0, 0.75),
        inset 0 2px 3px rgba(255, 255, 255, 0.45),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4);
}
#alchemy-cultivation-refine-modal .acr-qty-slider:hover::-webkit-slider-thumb {
    box-shadow:
        0 0 16px rgba(212, 175, 55, 0.7),
        0 3px 8px rgba(0, 0, 0, 0.8),
        inset 0 2px 3px rgba(255, 255, 255, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.35);
}
#alchemy-cultivation-refine-modal .acr-qty-slider:active::-webkit-slider-thumb {
    transform: scale(0.96);
}

/* Firefox */
#alchemy-cultivation-refine-modal .acr-qty-slider::-moz-range-track {
    height: 11px;
    border-radius: 5px;
    border: 1px solid #2a3038;
    background: #0a0c0f;
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.85),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}
#alchemy-cultivation-refine-modal .acr-qty-slider::-moz-range-progress {
    height: 11px;
    border-radius: 5px 0 0 5px;
    background: linear-gradient(90deg, #6a4b12, #d4af37);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
#alchemy-cultivation-refine-modal .acr-qty-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 1px solid #e8c76b;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #fff8e1 0%, #e8c76b 38%, #a67c00 72%, #4a3208 100%);
    box-shadow:
        0 0 12px rgba(212, 175, 55, 0.55),
        0 3px 6px rgba(0, 0, 0, 0.75),
        inset 0 2px 3px rgba(255, 255, 255, 0.45);
}

#alchemy-cultivation-refine-modal .acr-time-estimate {
    font-size: 11px;
    color: #90a4ae;
    text-align: center;
    margin: 0;
    line-height: 1.45;
}
#alchemy-cultivation-refine-modal .acr-progress-wrap {
    margin: 10px 0 4px;
}
#alchemy-cultivation-refine-modal .acr-progress-bar {
    height: 8px;
    border-radius: 999px;
    background: #1a1c20;
    overflow: hidden;
    border: 1px solid #2a3038;
}
#alchemy-cultivation-refine-modal .acr-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6a4b12, #d4af37);
    transition: width 0.2s ease-out;
}
#alchemy-cultivation-refine-modal .acr-progress-text {
    font-size: 11px;
    color: #b0bec5;
    text-align: center;
    margin: 8px 0 0;
    line-height: 1.45;
}

/* 锻体 · 顶部：与造化寻宝一致，上方灵石已拥有/需求，下方仅「淬体」主按钮 */
.body-upgrade-top-panel {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    background: #080b0e;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #1a1c20;
    margin-bottom: 8px;
    box-sizing: border-box;
}
.body-upgrade-top-info {
    flex: 1;
    min-width: 0;
}
.body-upgrade-realm-line {
    font-size: 13px;
    font-weight: bold;
    color: var(--text-main);
}
.body-upgrade-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.35;
}
.body-upgrade-draw-cell {
    flex: 0 0 auto;
    width: min(176px, 46%);
    max-width: 176px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.body-upgrade-draw-btn.fabao-summon-draw-btn {
    width: 100%;
    box-sizing: border-box;
}
/* 与 .fabao-summon-draw-row 内消耗行同系（该选择器在寻宝页才生效，此处补齐） */
.body-upgrade-draw-cell .fabao-summon-draw-cost--above {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    box-sizing: border-box;
}
.body-upgrade-draw-cell .fabao-summon-draw-cost--above .fabao-summon-cost-line {
    display: flex;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: bold;
    gap: 8px;
    justify-content: center;
    align-items: center;
}
.body-upgrade-draw-cell .fabao-summon-draw-cost--above .fabao-summon-cost-ico {
    width: 24px;
    height: 24px;
}

/* 锻体 · 灵石不足弹窗：底栏两按钮同宽同高（避免「今日已领」随文案变窄） */
.body-lingshi-shortage-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    gap: 10px;
    padding-left: 0;
    padding-right: 0;
}
.body-lingshi-shortage-footer .body-lingshi-shortage-btn {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    min-height: 44px;
    flex: 0 0 auto;
}
.body-lingshi-shortage-footer .body-lingshi-shortage-btn.rewarded-ad-btn {
    justify-content: flex-start;
}
.body-lingshi-shortage-remaining {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* 锻体 · 灵石不足：激励弹窗内道具格居中（全局 .item-slot 默认 width:100%） */
.body-lingshi-shortage-slot-host {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 4px 0 2px;
    box-sizing: border-box;
}
.body-lingshi-shortage-slot-host .item-slot {
    width: 50%;
    max-width: 112px;
    flex: 0 0 auto;
    box-sizing: border-box;
}