:root {
    color-scheme: dark;
    font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
    --bg: #090b14;
    --panel: rgba(18, 24, 40, 0.94);
    --panel-strong: #161d33;
    --text: #f3f6ff;
    --muted: #90a2c8;
    --accent: #73f0b4;
    --accent-2: #ffcf6b;
    --danger: #ff5d7a;
    --gold: #f7b731;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(circle at top, #1a2341 0%, var(--bg) 60%);
    color: var(--text);
    transition: background 0.8s ease;
}

/* ===== 按钮基础 ===== */
button {
    font: inherit;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}

button:active:not(:disabled) { transform: scale(0.94); }

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.action-button.rare {
    background: linear-gradient(135deg, #f2d45e, #f7a623);
    color: #111;
    box-shadow: 0 0 20px rgba(247, 166, 35, 0.2);
}

.action-button.rare:hover {
    box-shadow: 0 0 30px rgba(247, 166, 35, 0.4);
    transform: translateY(-2px);
}

/* ===== 应用容器 ===== */
.app-shell {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px;
    animation: fadeIn 0.6s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== 顶栏 ===== */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    margin-bottom: 18px;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-wrap: wrap;
    gap: 10px;
}

.topbar-left {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.topbar .eyebrow {
    margin: 0;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--accent-cyan);
    opacity: 0.7;
}

.topbar h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.04em;
}

.topbar-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.topbar-controls label {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-right: 0;
}

.topbar-controls select {
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-primary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: border-color 0.25s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%236a7fa0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 26px;
}

.topbar-controls select:hover { border-color: rgba(95, 208, 224, 0.3); }

.topbar-controls select:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

.topbar-controls select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.ghost-button {
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    background: rgba(95, 208, 224, 0.06);
    color: var(--accent-cyan);
    border: 1px solid rgba(95, 208, 224, 0.10);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ghost-button:hover {
    background: rgba(95, 208, 224, 0.12);
    border-color: rgba(95, 208, 224, 0.25);
    transform: translateY(-1px);
}

.ghost-button:active { transform: scale(0.95); }

/* ===== HUD 网格 ===== */
.hud-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.panel {
    background: var(--panel);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.panel:hover { border-color: rgba(255,255,255,0.14); }

/* ===== 角色面板 ===== */
.stat-list {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

.stat-list::-webkit-scrollbar { width: 4px; }

.stat-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
}

.stat-list::-webkit-scrollbar-thumb {
    background: rgba(115, 240, 180, 0.3);
    border-radius: 4px;
}

.stat-list > div {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    transition: background 0.3s ease, padding-left 0.3s ease;
    border-radius: 6px;
    padding-left: 4px;
}

.stat-list > div:last-child { border-bottom: none; }

.stat-list > div:hover {
    background: rgba(255,255,255,0.03);
    padding-left: 10px;
}

.stat-list span { color: var(--muted); }

/* 血量闪烁 */
#playerHp {
    transition: color 0.3s ease;
}

#playerHp.low {
    color: var(--danger);
    animation: pulseDanger 0.8s ease-in-out infinite;
}

@keyframes pulseDanger {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ===== 层级进度 ===== */
.big-label {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--accent-2);
    transition: all 0.3s ease;
}

.progress-line {
    color: var(--muted);
    margin-bottom: 12px;
}

.room-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.room-badge {
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 0.84rem;
    background: rgba(255,255,255,0.08);
    transition: all 0.3s ease;
    cursor: default;
}

.room-badge:hover { background: rgba(255,255,255,0.14); }

.room-badge.current {
    background: rgba(115, 240, 180, 0.2);
    color: var(--accent);
    box-shadow: 0 0 20px rgba(115, 240, 180, 0.1);
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(115, 240, 180, 0.05); }
    50% { box-shadow: 0 0 30px rgba(115, 240, 180, 0.2); }
}

/* ===== 遗物面板 ===== */
.relic-panel { margin-bottom: 16px; }

.relic-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    min-height: 44px;
    align-items: center;
}

.relic-badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(44, 57, 90, 0.9);
    border: 1px solid rgba(255,255,255,0.08);
    color: #dbe4ff;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    cursor: default;
    animation: relicAppear 0.5s ease;
}

@keyframes relicAppear {
    from { opacity: 0; transform: scale(0.8) rotate(-6deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

.relic-badge:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    border-color: rgba(255,255,255,0.2);
}

.relic-badge.rare {
    background: linear-gradient(135deg, rgba(247,166,35,0.16), rgba(255,255,255,0.08));
    border-color: rgba(247,166,35,0.35);
    color: var(--gold);
}

/* ===== 主事件面板 ===== */
.main-panel {
    margin-bottom: 16px;
    min-height: 200px;
}

.event-title {
    font-size: 1.3rem;
    margin: 10px 0 6px;
    color: var(--accent);
    transition: all 0.3s ease;
}

.event-text {
    color: var(--muted);
    line-height: 1.7;
    min-height: 54px;
    transition: all 0.3s ease;
}

/* ===== 操作区 ===== */
.action-area {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    min-height: 50px;
}

.action-button {
    padding: 10px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3455ff, #6f7cff);
    color: white;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(52, 85, 255, 0.25);
    transition: all 0.2s ease;
    border: 1px solid rgba(255,255,255,0.06);
}

.action-button:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(52, 85, 255, 0.35);
}

.action-button.secondary {
    background: linear-gradient(135deg, #2f6f53, #58b57c);
    box-shadow: 0 4px 15px rgba(47, 111, 83, 0.25);
}

.action-button.secondary:hover:not(:disabled) {
    box-shadow: 0 8px 30px rgba(47, 111, 83, 0.4);
}

.action-button.danger {
    background: linear-gradient(135deg, #b53b56, #ff5d7a);
    box-shadow: 0 4px 15px rgba(181, 59, 86, 0.3);
}

.action-button.danger:hover:not(:disabled) {
    box-shadow: 0 8px 30px rgba(181, 59, 86, 0.45);
}

.action-button.warning {
    background: linear-gradient(135deg, #c77d1e, #f7b731);
    color: #1a1a2e;
    box-shadow: 0 4px 15px rgba(199, 125, 30, 0.3);
}

.action-button.warning:hover:not(:disabled) {
    box-shadow: 0 8px 30px rgba(199, 125, 30, 0.45);
}

/* ===== 模态框 ===== */
.modal.hidden { display: none; }

.modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 114514;
    overflow: auto;
    /* 弹窗内允许纵向拖动滚动（横屏手机高度很小，必须能滑） */
    touch-action: pan-y;
    overscroll-behavior: contain;
    animation: modalIn 0.3s ease;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-image: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.05) 0%, transparent 70%);
    animation: backdropIn 0.3s ease;
}

@keyframes backdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    position: relative;
    width: min(92vw, 520px);
    max-height: 90vh;
    overflow-y: auto;
    /* 触摸滚动：显式声明 pan-y + iOS 惯性滚动，避免被外层手势策略吃掉 */
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: rgba(15, 22, 44, 0.98);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    z-index: 10;
    animation: contentIn 0.35s ease;
}

@keyframes contentIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-close {
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 1.6rem;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 8px;
    transition: background 0.2s;
    line-height: 1;
}

.modal-close:hover { background: rgba(255,255,255,0.08); }

/* ===== 条件列表 ===== */
.conditions-list {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
}

.condition-item {
    padding: 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.3s ease;
}

.condition-item:hover {
    background: rgba(255,255,255,0.07);
    transform: translateX(4px);
}

.condition-item.achieved {
    border-color: rgba(115, 240, 180, 0.35);
    background: rgba(115, 240, 180, 0.08);
}

.condition-item.achieved strong { color: var(--accent); }

.condition-item strong {
    display: block;
    margin-bottom: 6px;
    color: var(--accent-2);
}

.condition-item p {
    margin: 0;
    color: var(--muted);
}

.condition-progress {
    margin-top: 8px;
    color: var(--text);
    font-size: 0.95rem;
}

/* ===== 日志 ===== */
.log-panel {
    max-height: 200px;
    overflow-y: auto;
}

.log-panel::-webkit-scrollbar { width: 4px; }

.log-panel::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
}

.log-panel::-webkit-scrollbar-thumb {
    background: rgba(115, 240, 180, 0.3);
    border-radius: 4px;
}

.log-list {
    padding-left: 20px;
    color: var(--muted);
    line-height: 1.7;
    margin: 8px 0 0;
    list-style: none;
}

.log-list li {
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    animation: logSlide 0.3s ease;
    position: relative;
    padding-left: 12px;
}

.log-list li::before {
    content: '▸';
    position: absolute;
    left: -8px;
    color: var(--accent);
    opacity: 0.5;
}

@keyframes logSlide {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

.log-list li:first-child { border-bottom: none; }

/* ===== 统计面板 ===== */
.stats-panel .stat-list > div { padding: 4px 0; }

/* ===== 战斗特效 ===== */
/* 攻击闪白 */
@keyframes hitFlash {
    0% { background-color: rgba(255,255,255,0.3); }
    100% { background-color: transparent; }
}

.hit-flash { animation: hitFlash 0.3s ease; }

/* 屏幕震动 */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px) rotate(-0.5deg); }
    40% { transform: translateX(8px) rotate(0.5deg); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.shake { animation: shake 0.3s ease; }

/* 伤害数字飘出 */
.damage-float {
    position: fixed;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--danger);
    pointer-events: none;
    z-index: 100;
    animation: floatUp 0.9s ease forwards;
    text-shadow: 0 0 30px rgba(255, 93, 122, 0.4);
}

.damage-float.heal {
    color: var(--accent);
    text-shadow: 0 0 30px rgba(115, 240, 180, 0.4);
}

.damage-float.shield {
    color: #6fc3ff;
    text-shadow: 0 0 30px rgba(111, 195, 255, 0.4);
}

@keyframes floatUp {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-80px) scale(1.3); }
}

/* ===== 层级横幅 ===== */
.floor-banner {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--accent-2);
    padding: 20px;
    animation: bannerIn 0.6s ease, bannerOut 0.6s ease 0.9s forwards;
    text-shadow: 0 0 60px rgba(247,183,49,0.3);
}

@keyframes bannerIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes bannerOut {
    to { opacity: 0; transform: scale(1.2); }
}

/* ============================================================
   图鉴样式
   ============================================================ */

/* ===== 图鉴分类按钮 ===== */
.encyclopedia-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    justify-content: center;
}

.encyclopedia-categories .category-btn {
    padding: 10px 20px;
    border-radius: 999px;
    background: rgba(115, 240, 180, 0.12);
    color: var(--accent);
    border: 1px solid rgba(115, 240, 180, 0.15);
    transition: all 0.25s ease;
    font-size: 0.95rem;
    cursor: pointer;
}

.encyclopedia-categories .category-btn:hover {
    background: rgba(115, 240, 180, 0.22);
    border-color: rgba(115, 240, 180, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(115, 240, 180, 0.12);
}

.encyclopedia-categories .category-btn.active {
    background: rgba(115, 240, 180, 0.25);
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(115, 240, 180, 0.15);
}

/* ===== 图鉴内容切换动画 ===== */
#encyclopediaList { min-height: 60px; }

#encyclopediaList .condition-item {
    animation: itemFadeIn 0.3s ease forwards;
    opacity: 0;
    transform: translateY(10px);
}

/* 每个条目依次出现，延迟递增 */
#encyclopediaList .condition-item:nth-child(1) { animation-delay: 0.05s; }
#encyclopediaList .condition-item:nth-child(2) { animation-delay: 0.08s; }
#encyclopediaList .condition-item:nth-child(3) { animation-delay: 0.11s; }
#encyclopediaList .condition-item:nth-child(4) { animation-delay: 0.14s; }
#encyclopediaList .condition-item:nth-child(5) { animation-delay: 0.17s; }
#encyclopediaList .condition-item:nth-child(6) { animation-delay: 0.20s; }
#encyclopediaList .condition-item:nth-child(7) { animation-delay: 0.23s; }
#encyclopediaList .condition-item:nth-child(8) { animation-delay: 0.26s; }
#encyclopediaList .condition-item:nth-child(9) { animation-delay: 0.29s; }
#encyclopediaList .condition-item:nth-child(10) { animation-delay: 0.32s; }
#encyclopediaList .condition-item:nth-child(11) { animation-delay: 0.35s; }
#encyclopediaList .condition-item:nth-child(12) { animation-delay: 0.38s; }
#encyclopediaList .condition-item:nth-child(13) { animation-delay: 0.41s; }
#encyclopediaList .condition-item:nth-child(14) { animation-delay: 0.44s; }
#encyclopediaList .condition-item:nth-child(15) { animation-delay: 0.47s; }

@keyframes itemFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== 切换动画类 ===== */
.fade-out { animation: fadeOut 0.2s ease forwards !important; }
.fade-in { animation: fadeInContent 0.35s ease forwards !important; }

@keyframes fadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.96); }
}

@keyframes fadeInContent {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ===== 返回按钮 ===== */
#encyclopediaBackButton { transition: all 0.3s ease; }

#encyclopediaBackButton:hover { transform: translateX(-3px); }

/* ===== 图鉴模态框内容过渡 ===== */
.modal-content .encyclopedia-categories,
.modal-content #encyclopediaList {
    transition: all 0.3s ease;
}

/* ===== 更新日志 ===== */
.changelog-list {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 4px;
}

.changelog-list::-webkit-scrollbar { width: 4px; }

.changelog-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
}

.changelog-list::-webkit-scrollbar-thumb {
    background: rgba(115, 240, 180, 0.3);
    border-radius: 4px;
}

.changelog-item {
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.3s ease;
}

.changelog-item:hover {
    background: rgba(255,255,255,0.07);
    transform: translateX(4px);
}

.changelog-item .version {
    color: var(--accent-2);
    font-weight: 700;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 6px;
}

.changelog-item ul {
    margin: 4px 0 0;
    padding-left: 20px;
    color: var(--muted);
    line-height: 1.8;
}

.changelog-item ul li { list-style: disc; }

.changelog-item ul li::marker { color: var(--accent); }

/* ============================================================
   关闭动画
   ============================================================ */
@keyframes fadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

/* ============================================================
   响应式 - 平板 & 手机
   ============================================================ */
@media (max-width: 860px) {
    .hud-grid { grid-template-columns: 1fr; }

    .topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .topbar-controls {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .topbar-controls .ghost-button {
        padding: 6px 12px;
        font-size: 0.78rem;
    }

    .topbar-controls select {
        padding: 6px 8px;
        font-size: 0.78rem;
    }

    .app-shell { padding: 12px; }

    .panel { padding: 14px; }

    .panel h2 { font-size: 1rem; }

    .action-button {
        padding: 8px 14px;
        font-size: 0.85rem;
    }

    .stat-list { max-height: 260px; }

    .stat-list > div {
        padding: 5px 0;
        font-size: 0.85rem;
    }

    .room-list { gap: 5px; }

    .room-badge {
        padding: 4px 8px;
        font-size: 0.7rem;
    }

    .action-area { gap: 8px; }

    .action-area .action-button {
        flex: 1 1 auto;
        min-width: 70px;
        text-align: center;
        font-size: 0.8rem;
        padding: 8px 10px;
    }

    .relic-list { gap: 6px; }

    .relic-badge {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    .encyclopedia-categories { gap: 6px; }

    .encyclopedia-categories .category-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .modal-content {
        padding: 16px;
        width: min(96vw, 400px);
    }

    .log-list li {
        font-size: 0.8rem;
        padding: 3px 0 3px 12px;
    }

    /* ===== 商店按钮修复 ===== */
    #shopPanel .action-area .action-button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    .action-button[data-action="skip-shop"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 16px;
        font-size: 0.8rem;
    }

    /* ===== 战斗按钮 ===== */
    #battlePanel .action-button {
        min-width: 80px;
        font-size: 0.8rem;
        padding: 8px 12px;
    }

    /* ===== 更新日志 ===== */
    .changelog-item { padding: 10px 12px; }

    .changelog-item .version { font-size: 0.95rem; }

    .changelog-item ul {
        font-size: 0.85rem;
        padding-left: 16px;
    }

    /* 右侧列在移动端不要过度拉伸 */
    .hud-grid .right-col {
        height: auto;
        min-height: unset;
    }

    /* 状态面板在移动端取消强拉伸，改为自适应内容 */
    .status-panel {
        flex: 0 1 auto;
        min-height: 100px;
    }
}

@media (max-width: 480px) {
    .app-shell { padding: 8px; }

    .panel { padding: 10px; }

    .panel h2 { font-size: 0.9rem; }

    .stat-list > div {
        font-size: 0.75rem;
        padding: 4px 0;
    }

    .stat-list { max-height: 220px; }

    .action-area .action-button {
        font-size: 0.7rem;
        padding: 6px 8px;
        min-width: 60px;
    }

    .topbar h1 { font-size: 1.2rem; }

    .topbar .eyebrow { font-size: 0.6rem; }

    .topbar-controls .ghost-button {
        padding: 4px 8px;
        font-size: 0.65rem;
    }

    .topbar-controls select {
        padding: 4px 6px;
        font-size: 0.65rem;
    }

    .modal-content {
        padding: 12px;
        width: min(98vw, 320px);
    }

    .modal-content h3 { font-size: 1rem; }

    .relic-badge {
        padding: 4px 8px;
        font-size: 0.65rem;
    }

    .room-badge {
        padding: 3px 6px;
        font-size: 0.6rem;
    }

    .log-list li {
        font-size: 0.7rem;
        padding: 2px 0 2px 10px;
    }

    .event-title { font-size: 1rem; }

    .event-text { font-size: 0.85rem; }

    .big-label { font-size: 1rem; }

    .progress-line { font-size: 0.8rem; }

    .damage-float { font-size: 1.8rem !important; }

    .encyclopedia-categories .category-btn {
        padding: 4px 10px;
        font-size: 0.7rem;
    }

    .condition-item { padding: 10px; }

    .condition-item strong { font-size: 0.85rem; }

    .condition-item p { font-size: 0.75rem; }

    .changelog-item { padding: 8px 10px; }

    .changelog-item .version { font-size: 0.85rem; }

    .changelog-item ul {
        font-size: 0.75rem;
        padding-left: 14px;
    }

    /* ===== 商店按钮小屏适配 ===== */
    #shopPanel .action-area .action-button {
        min-height: 36px;
        font-size: 0.7rem;
        padding: 6px 8px;
    }

    .action-button[data-action="skip-shop"] {
        min-height: 36px;
        font-size: 0.7rem;
        padding: 6px 12px;
    }
}

/* ============================================================
   作弊面板样式
   ============================================================ */

/* 密码输入框容器 */
.cheat-password-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}

.cheat-password-input {
    flex: 1;
    padding: 12px 16px;
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    letter-spacing: 2px;
}

.cheat-password-input:focus {
    border-color: var(--danger);
    box-shadow: 0 0 25px rgba(255, 93, 122, 0.15);
}

.cheat-password-input::placeholder {
    color: rgba(255,255,255,0.3);
    letter-spacing: 0;
}

/* 密码显示切换按钮 */
.cheat-password-toggle {
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--muted);
    font-size: 1.1rem;
    transition: all 0.25s ease;
    cursor: pointer;
    flex-shrink: 0;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cheat-password-toggle:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
    transform: scale(1.05);
}

.cheat-password-toggle:active { transform: scale(0.95); }

/* 密码确认按钮 */
.cheat-password-confirm {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--danger), #cc4a6a);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 20px rgba(255, 93, 122, 0.25);
    margin-top: 10px;
}

.cheat-password-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(255, 93, 122, 0.35);
}

.cheat-password-confirm:active { transform: scale(0.97); }

/* 密码错误提示 */
.cheat-password-error {
    color: var(--danger);
    font-size: 0.85rem;
    margin-top: 10px;
    text-align: center;
    display: none;
    animation: shake 0.4s ease;
    background: rgba(255, 93, 122, 0.1);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 93, 122, 0.2);
}

/* 作弊面板内的小标题 */
.cheat-section {
    margin-bottom: 16px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.03);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
    transition: border-color 0.3s ease;
}

.cheat-section:hover { border-color: rgba(255,255,255,0.12); }

.cheat-section-title {
    margin: 0 0 12px 0;
    color: var(--accent-2);
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 数值修改网格 */
.cheat-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.cheat-stat-item {
    display: flex;
    flex-direction: column;
}

.cheat-stat-item label {
    color: var(--muted);
    font-size: 0.7rem;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

.cheat-stat-item input {
    width: 100%;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.35);
    color: #fff;
    font-size: 0.9rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none;
}

.cheat-stat-item input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(115, 240, 180, 0.08);
}

.cheat-stat-item input[type="number"]::-webkit-inner-spin-button,
.cheat-stat-item input[type="number"]::-webkit-outer-spin-button {
    opacity: 0.5;
}

/* 下拉选择框 */
.cheat-select {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.35);
    color: #fff;
    font-size: 0.9rem;
    margin-bottom: 8px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.cheat-select:focus { border-color: var(--accent); }

.cheat-select option {
    background: #1a1a2e;
    color: #fff;
}

/* 作弊按钮 - 添加遗物/增益 */
.cheat-add-btn {
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.cheat-add-btn:hover { transform: translateY(-2px); }

.cheat-add-btn:active { transform: scale(0.97); }

.cheat-add-btn.relic {
    background: linear-gradient(135deg, #2f6f53, #58b57c);
    color: #fff;
    box-shadow: 0 4px 15px rgba(47, 111, 83, 0.25);
}

.cheat-add-btn.relic:hover {
    box-shadow: 0 8px 25px rgba(47, 111, 83, 0.4);
}

.cheat-add-btn.bonus {
    background: linear-gradient(135deg, #b8860b, #f7b731);
    color: #1a1a2e;
    box-shadow: 0 4px 15px rgba(184, 134, 11, 0.25);
}

.cheat-add-btn.bonus:hover {
    box-shadow: 0 8px 25px rgba(184, 134, 11, 0.4);
}

/* 应用数值按钮 */
.cheat-apply-btn {
    width: 100%;
    height: 100%;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3455ff, #6f7cff);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(52, 85, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cheat-apply-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(52, 85, 255, 0.35);
}

.cheat-apply-btn:active { transform: scale(0.97); }

/* 密码层提示文字 */
.cheat-password-hint {
    color: var(--muted);
    text-align: center;
    margin-bottom: 20px;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* 密码输入行 */
.cheat-password-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* 作弊面板标题 */
.cheat-title {
    color: var(--danger);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 移动端适配 */
@media (max-width: 480px) {
    .cheat-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .cheat-stat-item input {
        padding: 4px 8px;
        font-size: 0.8rem;
    }

    .cheat-stat-item label { font-size: 0.65rem; }

    .cheat-password-row { flex-wrap: wrap; }

    .cheat-password-input {
        font-size: 0.9rem;
        padding: 10px 12px;
    }

    .cheat-section { padding: 10px 12px; }
}

/* 关闭动画 - 和打开相反 */
@keyframes contentOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(20px) scale(0.96); }
}

@keyframes backdropOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ============================================================
   移动端布局调整：遗物和增益移到战斗日志下面
   ============================================================ */
@media (max-width: 768px) {
    /* 使用 flex 布局控制顺序 */
    .app-shell {
        display: flex;
        flex-direction: column;
    }

    /* 所有 panel 默认 order 为 0，按 DOM 顺序排列 */
    .app-shell > .panel { order: 0; }

    /* 战斗日志移到最前面（在事件面板之后） */
    .app-shell > .log-panel { order: 1; }

    /* 遗物和增益移到日志后面 */
    .app-shell > .relic-panel { order: 2; }
    .app-shell > .bonus-panel { order: 3; }

    /* 记录面板保持在最后 */
    .app-shell > .stats-panel { order: 4; }

    /* HUD 网格保持原有顺序（在顶部） */
    .app-shell > .hud-grid { order: 0; }

    /* 主事件面板在日志之前 */
    .app-shell > .main-panel { order: 0; }
}

/* 更小屏幕的微调 */
@media (max-width: 480px) {
    .app-shell > .log-panel { order: 1; }
    .app-shell > .relic-panel { order: 2; }
    .app-shell > .bonus-panel { order: 3; }
    .app-shell > .stats-panel { order: 4; }
}

/* ============================================================
   自定义难度面板 —— 唯一样式来源
   样式对齐老版本：宽输入框 + 加粗数值 + 底部独立按钮行
   ============================================================ */
.custom-difficulty-panel {
    background: rgba(18, 28, 54, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease;
}

.custom-difficulty-panel.hidden { display: none; }

/* ===== 折叠头部 ===== */
.custom-difficulty-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding: 2px 0;
}

.custom-difficulty-header span {
    color: #f0d06a;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
}

.collapse-toggle {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #a8bce0;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.collapse-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #f0f4ff;
}

/* ===== 折叠主体 ===== */
.custom-difficulty-body {
    margin-top: 12px;
    overflow: visible;
    transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.3s ease;
    max-height: 1800px;
    opacity: 1;
}

.custom-difficulty-body.collapsed {
    display: none;
}

.custom-advanced-settings {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.custom-advanced-settings.collapsed {
    display: none;
}

.custom-difficulty-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.custom-difficulty-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 0.8rem;
}

.custom-toggle-switch {
    width: 46px;
    height: 26px;
}

/* ===== 网格：桌面 5 列 ===== */
.custom-difficulty-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 20px;
}

.custom-rule-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.custom-rule-header {
    margin-bottom: 12px;
    color: #f0d06a;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.custom-rule-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap: 12px 20px;
}

.custom-advanced-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 12px 20px;
}

.custom-textarea-wrap textarea {
    width: 100%;
    min-height: 80px;
    resize: vertical;
    border-radius: 10px;
    border: 1px solid rgba(118, 147, 206, 0.35);
    background: rgba(11, 16, 29, 0.6);
    color: var(--text-main, #dfe9ff);
    padding: 10px 12px;
    font: inherit;
}

.custom-rule-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px 12px;
}

.custom-rule-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.custom-rule-text label {
    color: #a8bce0;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    font-weight: 600;
}

.custom-rule-text small {
    color: #7d90b3;
    font-size: 0.6rem;
    line-height: 1.45;
    display: block;
}

/* 参数项：标签 / 输入框 / 数值 三行堆叠（老版结构） */
.custom-diff-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.custom-diff-item label {
    color: #a8bce0;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
}

/* 输入行容器"透明化"，让输入框和数值回落为竖排 */
.custom-diff-item .input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-diff-item .input-row > * {
    flex: 1 1 auto;
}

/* 输入框：老版尺寸（更饱满） */
.custom-diff-item input[type="number"],
.custom-diff-item select {
    width: 100%;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.35);
    color: #f0f4ff;
    font-size: 0.9rem;
    font-weight: 500;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    appearance: textfield;
    -moz-appearance: textfield;
}

.custom-diff-item select {
    appearance: auto;
    -moz-appearance: menulist;
    cursor: pointer;
    min-height: 32px;
}

.custom-diff-item input[type="number"]:focus,
.custom-diff-item select:focus {
    border-color: #5fd0e0;
    box-shadow: 0 0 20px rgba(95, 208, 224, 0.08);
}

.custom-diff-item input[type="number"]::-webkit-outer-spin-button,
.custom-diff-item input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 数值显示：老版样式（加粗、更亮、靠右） */
.custom-diff-item .value-display,
.custom-diff-item span {
    color: #f0f4ff;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
    flex: 0 0 auto;
}

/* ===== 警告提示 ===== */
.custom-difficulty-warning {
    color: #e86878;
    font-size: 0.6rem;
    padding: 4px 12px;
    border-radius: 6px;
    background: rgba(232, 104, 120, 0.1);
    border: 1px solid rgba(232, 104, 120, 0.15);
    animation: warningFade 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.custom-difficulty-warning.hidden { display: none !important; }

@keyframes warningFade {
    from { opacity: 0; transform: translateX(-4px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    .custom-difficulty-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px 16px;
    }
}

@media (max-width: 500px) {
    .custom-difficulty-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px 12px;
    }

    .custom-diff-item label { font-size: 0.6rem; }

    .custom-diff-item input[type="number"] {
        font-size: 0.8rem;
        padding: 5px 8px;
    }

    .custom-diff-item .value-display,
    .custom-diff-item span { font-size: 0.75rem; }
}

/* ============================================================
   侧边栏
   ============================================================ */

/* 侧边栏切换按钮 - 固定在右下角 */
.sidebar-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--panel), rgba(18, 24, 40, 0.95));
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text);
    font-size: 1.4rem;
    cursor: pointer;
    z-index: 100001;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

.sidebar-toggle:hover {
    transform: scale(1.08);
    border-color: rgba(115, 240, 180, 0.3);
    box-shadow: 0 6px 32px rgba(0,0,0,0.5);
}

.sidebar-toggle:active { transform: scale(0.94); }

/* 侧边栏遮罩 */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 100001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.sidebar-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* 侧边栏主体 */
.sidebar {
    position: fixed;
    top: 0;
    right: -340px;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    background: var(--panel);
    border-left: 1px solid rgba(255,255,255,0.08);
    z-index: 100002;
    padding: 0;
    transition: right 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: -8px 0 40px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(16px);
}

.sidebar.open { right: 0; }

/* 侧边栏头部 */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 22px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.sidebar-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-2);
}

.sidebar-close {
    background: rgba(255,255,255,0.06);
    border: none;
    color: var(--muted);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-close:hover {
    background: rgba(255,255,255,0.12);
    color: var(--text);
    transform: rotate(90deg);
}

/* 侧边栏内容区 */
.sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.sidebar-body::-webkit-scrollbar { width: 3px; }

.sidebar-body::-webkit-scrollbar-track { background: transparent; }

.sidebar-body::-webkit-scrollbar-thumb {
    background: rgba(115, 240, 180, 0.2);
    border-radius: 4px;
}

/* 占位提示 */
.sidebar-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    color: var(--muted);
}

.sidebar-placeholder span {
    font-size: 2.8rem;
    margin-bottom: 12px;
    opacity: 0.4;
}

.sidebar-placeholder p {
    margin: 0 0 4px;
    font-size: 0.95rem;
    color: var(--text);
}

.sidebar-placeholder small {
    font-size: 0.75rem;
    color: var(--muted);
    opacity: 0.6;
}

/* ===== 移动端适配 ===== */
@media (max-width: 480px) {
    .sidebar-toggle {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
        bottom: 16px;
        right: 16px;
    }

    .sidebar {
        width: 280px;
        right: -300px;
    }

    .sidebar-header { padding: 16px 18px 12px; }

    .sidebar-title { font-size: 0.95rem; }

    .sidebar-body { padding: 12px 16px; }

    .sidebar-placeholder span { font-size: 2.2rem; }

    .sidebar-placeholder p { font-size: 0.85rem; }
}

/* ===== 侧边栏作弊按钮 ===== */
.sidebar-cheat-btn {
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(255, 93, 122, 0.12);
    border: 1px solid rgba(255, 93, 122, 0.2);
    color: var(--danger);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-bottom: 16px;
}

.sidebar-cheat-btn:hover {
    background: rgba(255, 93, 122, 0.2);
    border-color: var(--danger);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(255, 93, 122, 0.15);
}

.sidebar-cheat-btn:active { transform: scale(0.97); }

/* ============================================================
   新手引导样式
   ============================================================ */
.tutorial-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    animation: tutorialFadeIn 0.35s ease;
}

@keyframes tutorialFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tutorial-card {
    background: rgba(18, 24, 40, 0.98);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 20px;
    padding: 32px 36px;
    max-width: 480px;
    width: min(92vw, 480px);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    animation: tutorialSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}

@keyframes tutorialSlideIn {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.tutorial-progress {
    font-size: 0.7rem;
    color: var(--muted);
    text-align: center;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.tutorial-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent-2);
    text-align: center;
    margin-bottom: 12px;
    line-height: 1.4;
}

.tutorial-content {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.8;
    text-align: center;
    margin-bottom: 24px;
    padding: 0 4px;
}

.tutorial-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.tutorial-next {
    padding: 10px 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2f6f53, #58b57c);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 20px rgba(47, 111, 83, 0.3);
}

.tutorial-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(47, 111, 83, 0.4);
}

.tutorial-next:active { transform: scale(0.97); }

.tutorial-skip {
    padding: 10px 16px;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 0.8rem;
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: all 0.25s ease;
}

.tutorial-skip:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border-color: rgba(255,255,255,0.15);
}

/* 移动端适配 */
@media (max-width: 480px) {
    .tutorial-card { padding: 24px 20px; }

    .tutorial-title { font-size: 1.1rem; }

    .tutorial-content { font-size: 0.85rem; }

    .tutorial-next {
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .tutorial-skip {
        padding: 8px 12px;
        font-size: 0.7rem;
    }
}

/* ============================================================
   开始界面 — 新风格（青紫渐变 + 玻璃态按钮）
   ============================================================ */
.start-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: radial-gradient(ellipse at 50% 40%, #1a2341 0%, #090b14 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.start-screen.hidden {
    opacity: 0;
    transform: scale(1.05);
    pointer-events: none;
}

/* ===== 开始界面右上角更新日志按钮 ===== */
.start-changelog-btn {
    position: absolute;
    top: 20px;
    right: 24px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 10;
    backdrop-filter: blur(4px);
}

.start-changelog-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text);
    transform: translateY(-2px);
}

.start-changelog-btn:active { transform: scale(0.95); }

.start-content {
    text-align: center;
    position: relative;
    z-index: 3;
    padding: 20px;
}

/* ===== 标题区域 ===== */
.start-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.start-welcome {
    font-size: 1.2rem;
    color: var(--muted);
    letter-spacing: 0.3em;
    font-weight: 300;
    animation: fadeInDown 1s ease 0.2s both;
}

/* 标题渐变：青→紫（与经典界面一致） */
.start-title {
    font-size: 4.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple), var(--accent-cyan));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerTitle 4s ease-in-out infinite, fadeInDown 1s ease 0.4s both;
    letter-spacing: 0.06em;
    line-height: 1.6;
    text-shadow: none;
}

@keyframes shimmerTitle {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.start-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    letter-spacing: 0.4em;
    margin-top: 4px;
    margin-bottom: 36px;
    animation: fadeInDown 1s ease 0.6s both;
    opacity: 0.6;
}

/* ===== 开始按钮 — 玻璃态（与经典界面一致） ===== */
.start-button {
    padding: 16px 56px;
    border-radius: 999px;
    font-size: 1.15rem;
    font-weight: 700;
    background: rgba(95, 208, 224, 0.08);
    color: var(--accent-cyan);
    border: 1.5px solid rgba(95, 208, 224, 0.25);
    cursor: pointer;
    transition: all 0.3s ease;
    animation: fadeInUp 1s ease 0.8s both;
    letter-spacing: 0.04em;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 0 30px rgba(95, 208, 224, 0.05);
}

.start-button:hover {
    transform: translateY(-3px) scale(1.02);
    background: rgba(95, 208, 224, 0.16);
    border-color: rgba(95, 208, 224, 0.5);
    box-shadow: 0 0 50px rgba(95, 208, 224, 0.15);
}

.start-button:active { transform: scale(0.96); }

.start-button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(95, 208, 224, 0.08) 50%, transparent 60%);
    background-size: 200% 100%;
    animation: btnShine 4s ease-in-out infinite;
}

@keyframes btnShine {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ===== 版本号 ===== */
.start-version {
    color: rgba(255, 255, 255, 0.15);
    font-size: 0.7rem;
    margin-top: 24px;
    letter-spacing: 0.1em;
    animation: fadeInUp 1s ease 1s both;
}

/* ===== 粒子容器（保留原有粒子） ===== */
.start-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(115, 240, 180, 0.3);
    border-radius: 50%;
    animation: particleFloat linear infinite;
}

@keyframes particleFloat {
    0% { transform: translateY(100vh) scale(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

/* ===== 开始界面背景增强层（保持暗色深渊 + 青紫渐变风格） ===== */
/* 背景呼吸层：跟随背景渐变的微弱青紫光晕缓慢起伏，增加层次感 */
.start-screen::before {
    content: '';
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 28% 72%, rgba(95, 208, 224, 0.10), transparent 52%),
        radial-gradient(ellipse at 74% 22%, rgba(154, 142, 240, 0.12), transparent 52%);
    animation: abyssBreath 18s ease-in-out infinite alternate;
}

@keyframes abyssBreath {
    0%   { opacity: 0.5; transform: scale(1); }
    100% { opacity: 1;   transform: scale(1.12); }
}

/* Canvas 粒子层（深空星 / 萤火尘埃 / 上浮光粒 / 流星 / 点击爆散） */
.start-fx-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* 鼠标追踪柔光：跟随指针的青紫色光晕，mix-blend-mode 提亮经过区域 */
.start-cursor-glow {
    position: absolute;
    left: 0;
    top: 0;
    width: 420px;
    height: 420px;
    margin-left: -210px;
    margin-top: -210px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(95, 208, 224, 0.10), rgba(154, 142, 240, 0.06) 40%, transparent 70%);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.18s ease-out;
    will-change: transform;
}

.start-cursor-glow.visible {
    opacity: 1;
}

/* ===== 入场动画（保留） ===== */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   响应式 — 移动端适配
   ============================================================ */
@media (max-width: 600px) {
    .start-title { font-size: 2.8rem; }

    .start-welcome { font-size: 0.9rem; }

    .start-subtitle {
        font-size: 0.8rem;
        margin-bottom: 28px;
    }

    .start-button {
        padding: 14px 40px;
        font-size: 1rem;
    }

    .start-version { font-size: 0.6rem; }

    .start-changelog-btn {
        top: 14px;
        right: 16px;
        font-size: 0.7rem;
        padding: 6px 14px;
    }
}

@media (max-width: 400px) {
    .start-title { font-size: 2.2rem; }

    .start-welcome { font-size: 0.75rem; }

    .start-subtitle {
        font-size: 0.65rem;
        margin-bottom: 20px;
    }

    .start-button {
        padding: 12px 32px;
        font-size: 0.85rem;
    }

    .start-changelog-btn {
        font-size: 0.6rem;
        padding: 4px 10px;
        top: 10px;
        right: 12px;
    }
}

/* ============================================================
   开发者模式样式
   ============================================================ */

/* 开发者模式主色调 */
:root {
    --dev-primary: #f7a623;
    --dev-primary-dark: #c77d1e;
    --dev-bg: rgba(15, 22, 44, 0.97);
    --dev-panel: rgba(247, 166, 35, 0.08);
    --dev-border: rgba(247, 166, 35, 0.25);
    --dev-text: #f3f6ff;
    --dev-muted: #b8a88a;
    --dev-danger: #ff5d7a;
    --dev-success: #73f0b4;
}

/* ===== 开发者模式切换按钮（侧边栏） ===== */
.dev-toggle-btn {
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(247, 166, 35, 0.12);
    border: 1px solid rgba(247, 166, 35, 0.2);
    color: var(--dev-primary);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-bottom: 8px;
}

.dev-toggle-btn:hover {
    background: rgba(247, 166, 35, 0.2);
    border-color: var(--dev-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(247, 166, 35, 0.15);
}

.dev-toggle-btn.active {
    background: rgba(247, 166, 35, 0.2);
    border-color: var(--dev-primary);
    box-shadow: 0 0 30px rgba(247, 166, 35, 0.15);
}

.dev-toggle-btn:active { transform: scale(0.97); }

/* ===== 开发者模式指示器 ===== */
.dev-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--dev-primary), #f7b731, var(--dev-primary));
    background-size: 200% 100%;
    z-index: 99999;
    animation: devIndicatorShimmer 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes devIndicatorShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ===== 开发者模式徽标 ===== */
.dev-badge {
    position: fixed;
    top: 8px;
    right: 80px;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(247, 166, 35, 0.15);
    border: 1px solid rgba(247, 166, 35, 0.3);
    color: var(--dev-primary);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    z-index: 99999;
    backdrop-filter: blur(4px);
    pointer-events: none;
    text-transform: uppercase;
}

/* ===== 开发者控制台 ===== */
.dev-console {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: var(--dev-bg);
    border-top: 2px solid var(--dev-border);
    z-index: 99998;
    display: none;
    flex-direction: column;
    backdrop-filter: blur(12px);
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
    transition: height 0.3s ease;
}

.dev-console.open { display: flex; }

.dev-console-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: rgba(247, 166, 35, 0.06);
    border-bottom: 1px solid rgba(247, 166, 35, 0.1);
    flex-shrink: 0;
}

.dev-console-header span {
    color: var(--dev-primary);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.dev-console-header .dev-console-close {
    background: transparent;
    border: none;
    color: var(--dev-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.dev-console-header .dev-console-close:hover {
    background: rgba(255,255,255,0.06);
    color: var(--dev-text);
}

/* 日志输出区域 */
.dev-log-area {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px;
    background: rgba(0,0,0,0.3);
    font-size: 0.8rem;
    line-height: 1.6;
}

.dev-log-area::-webkit-scrollbar { width: 4px; }

.dev-log-area::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }

.dev-log-area::-webkit-scrollbar-thumb {
    background: rgba(247, 166, 35, 0.3);
    border-radius: 4px;
}

.dev-log-entry {
    color: var(--dev-muted);
    padding: 1px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    font-size: 0.75rem;
}

.dev-log-entry .dev-log-time {
    color: var(--dev-primary);
    opacity: 0.6;
    margin-right: 12px;
}

.dev-log-entry .dev-log-level {
    display: inline-block;
    padding: 0 6px;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    margin-right: 8px;
}

.dev-log-entry .dev-log-level.info {
    color: var(--dev-success);
    background: rgba(115, 240, 180, 0.1);
}

.dev-log-entry .dev-log-level.warn {
    color: var(--dev-primary);
    background: rgba(247, 166, 35, 0.1);
}

.dev-log-entry .dev-log-level.error {
    color: var(--dev-danger);
    background: rgba(255, 93, 122, 0.1);
}

.dev-log-entry .dev-log-level.command {
    color: #6fc3ff;
    background: rgba(111, 195, 255, 0.1);
}

.dev-log-entry .dev-log-level.state {
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.1);
}

/* 命令输入行 */
.dev-command-line {
    display: flex;
    padding: 8px 16px;
    background: rgba(0,0,0,0.4);
    border-top: 1px solid rgba(247, 166, 35, 0.08);
    flex-shrink: 0;
    gap: 8px;
}

.dev-command-line .dev-prompt {
    color: var(--dev-primary);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 6px 0;
    user-select: none;
}

.dev-command-line input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--dev-text);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    padding: 6px 0;
}

.dev-command-line input::placeholder {
    color: var(--dev-muted);
    opacity: 0.4;
}

.dev-command-line .dev-command-hint {
    color: var(--dev-muted);
    font-size: 0.7rem;
    padding: 6px 0;
    opacity: 0.5;
    user-select: none;
}

/* ===== 监控面板 ===== */
.dev-monitor {
    position: fixed;
    top: 52px;
    right: 16px;
    width: 260px;
    background: var(--dev-bg);
    border: 1px solid var(--dev-border);
    border-radius: 12px;
    padding: 14px 16px;
    z-index: 99997;
    display: none;
    backdrop-filter: blur(12px);
    font-family: "JetBrains Mono", "Consolas", monospace;
    font-size: 0.75rem;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

.dev-monitor.open { display: block; }

.dev-monitor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(247, 166, 35, 0.1);
}

.dev-monitor-header span {
    color: var(--dev-primary);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

.dev-monitor-header .dev-monitor-close {
    background: transparent;
    border: none;
    color: var(--dev-muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 4px;
}

.dev-monitor-header .dev-monitor-close:hover { color: var(--dev-text); }

.dev-monitor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
}

.dev-monitor-item {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    color: var(--dev-muted);
}

.dev-monitor-item .dev-monitor-label { opacity: 0.6; }

.dev-monitor-item .dev-monitor-value {
    color: var(--dev-text);
    font-weight: 500;
}

.dev-monitor-item .dev-monitor-value.good { color: var(--dev-success); }

.dev-monitor-item .dev-monitor-value.bad { color: var(--dev-danger); }

.dev-monitor-item .dev-monitor-value.warn { color: var(--dev-primary); }

/* ============================================================
   快速操作工具栏 - 竖排在屏幕左侧
   ============================================================ */
.dev-toolbar {
    position: fixed;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    flex-direction: column;
    gap: 6px;
    background: var(--dev-bg);
    border: 1px solid var(--dev-border);
    border-radius: 12px;
    padding: 10px 8px;
    z-index: 99997;
    backdrop-filter: blur(12px);
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* 工具栏显示状态 */
.dev-toolbar.open { display: flex; }

/* 工具栏滚动条 */
.dev-toolbar::-webkit-scrollbar { width: 3px; }

.dev-toolbar::-webkit-scrollbar-thumb {
    background: rgba(247, 166, 35, 0.3);
    border-radius: 4px;
}

.dev-toolbar::-webkit-scrollbar-track { background: transparent; }

/* 工具栏按钮 */
.dev-toolbar button {
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(247, 166, 35, 0.08);
    border: 1px solid rgba(247, 166, 35, 0.12);
    color: var(--dev-text);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    white-space: nowrap;
    text-align: center;
    min-width: 56px;
}

.dev-toolbar button:hover {
    background: rgba(247, 166, 35, 0.2);
    border-color: var(--dev-primary);
    transform: translateX(2px);
}

.dev-toolbar button:active { transform: scale(0.95); }

/* 危险按钮（红色） */
.dev-toolbar button.danger {
    color: var(--dev-danger);
    border-color: rgba(255, 93, 122, 0.2);
}

.dev-toolbar button.danger:hover {
    background: rgba(255, 93, 122, 0.15);
    border-color: var(--dev-danger);
}

/* 成功按钮（绿色） */
.dev-toolbar button.success {
    color: var(--dev-success);
    border-color: rgba(115, 240, 180, 0.2);
}

.dev-toolbar button.success:hover {
    background: rgba(115, 240, 180, 0.15);
    border-color: var(--dev-success);
}

/* ===== 快照列表 ===== */
.dev-snapshot-list {
    max-height: 120px;
    overflow-y: auto;
    margin-top: 8px;
    border-top: 1px solid rgba(247, 166, 35, 0.08);
    padding-top: 8px;
}

.dev-snapshot-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    color: var(--dev-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.dev-snapshot-item:hover { background: rgba(247, 166, 35, 0.08); }

.dev-snapshot-item .snapshot-time {
    color: var(--dev-primary);
    opacity: 0.6;
}

.dev-snapshot-item .snapshot-actions button {
    background: transparent;
    border: none;
    color: var(--dev-muted);
    cursor: pointer;
    padding: 0 4px;
    font-size: 0.65rem;
}

.dev-snapshot-item .snapshot-actions button:hover { color: var(--dev-text); }

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    .dev-console { height: 200px; }

    .dev-monitor {
        width: 200px;
        right: 8px;
        top: 48px;
        font-size: 0.65rem;
        padding: 10px 12px;
    }

    .dev-monitor-grid { gap: 2px 8px; }

    /* 小屏：工具栏位置微调 */
    .dev-toolbar {
        left: 6px;
        padding: 8px 6px;
        gap: 4px;
    }

    .dev-toolbar button {
        font-size: 0.6rem;
        padding: 4px 8px;
        min-width: 44px;
    }

    .dev-badge {
        right: 60px;
        font-size: 0.5rem;
        padding: 2px 10px;
    }
}

@media (max-width: 480px) {
    .dev-console { height: 160px; }

    .dev-monitor {
        width: 170px;
        right: 4px;
        top: 44px;
        font-size: 0.6rem;
        padding: 8px 10px;
    }

    .dev-monitor-grid { gap: 1px 4px; }

    .dev-toolbar {
        left: 4px;
        padding: 6px 4px;
        gap: 3px;
        border-radius: 8px;
    }

    .dev-toolbar button {
        font-size: 0.55rem;
        padding: 3px 6px;
        min-width: 36px;
    }

    .dev-command-line input { font-size: 0.75rem; }

    .dev-log-area { font-size: 0.7rem; }

    .dev-badge { display: none; }
}

/* ============================================================
   移动端经典模式增强适配
   ============================================================ */
@media (max-width: 600px) {
    /* 顶栏按钮紧凑 */
    .topbar-controls .ghost-button {
        padding: 6px 10px;
        font-size: 0.7rem;
    }

    .topbar-controls select {
        padding: 4px 6px;
        font-size: 0.7rem;
    }

    /* 角色面板统计项字体缩小 */
    .stat-list > div {
        font-size: 0.75rem;
        padding: 4px 0;
    }

    /* 操作按钮占满宽度 */
    .action-area .action-button {
        flex: 1 0 auto;
        min-width: 60px;
        font-size: 0.75rem;
        padding: 8px 6px;
    }

    /* 房间列表更紧凑 */
    .room-badge {
        padding: 3px 6px;
        font-size: 0.6rem;
    }

    /* 遗物和增益标签 */
    .relic-badge {
        padding: 4px 8px;
        font-size: 0.65rem;
    }

    /* 日志字体 */
    .log-list li { font-size: 0.7rem; }
}

@media (max-width: 400px) {
    /* 更小屏幕下，顶栏完全折叠 */
    .topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .topbar-controls { justify-content: space-around; }

    .topbar-controls .ghost-button {
        padding: 4px 8px;
        font-size: 0.6rem;
    }

    .hud-grid { gap: 10px; }

    .panel { padding: 10px; }

    .panel h2 { font-size: 0.9rem; }

    /* 战斗按钮三列均分 */
    .action-area .action-button {
        font-size: 0.7rem;
        padding: 6px 4px;
        min-width: 50px;
    }
}

/* ============================================================
   模态框 - 移动端优化
   ============================================================ */
@media (max-width: 480px) {
    .modal-content {
        width: min(96vw, 320px);
        padding: 14px;
        max-height: 85vh;
    }

    .modal-header h3 { font-size: 1rem; }

    .modal-close {
        font-size: 1.3rem;
        padding: 2px 6px;
    }

    .condition-item { padding: 10px; }

    .condition-item strong { font-size: 0.8rem; }

    .condition-item p { font-size: 0.7rem; }

    .changelog-item { padding: 8px 10px; }

    .changelog-item .version { font-size: 0.8rem; }

    .changelog-item ul {
        font-size: 0.7rem;
        padding-left: 14px;
    }

    /* 试炼商店 */
    #trialShopItems .condition-item { padding: 8px; }

    .floor-panel { padding: 6px 10px; }

    .floor-panel .big-label { font-size: 0.9rem; }

    .floor-panel .room-badge {
        font-size: 0.6rem;
        padding: 2px 6px;
    }

    .status-panel {
        padding: 6px 10px;
        min-height: 80px;
        gap: 1px;
    }

    .status-panel .status-item {
        font-size: 0.7rem;
        padding: 2px 4px;
    }

    .status-panel .status-item .status-label { font-size: 0.65rem; }

    .status-panel .status-item .status-value { font-size: 0.7rem; }
}

/* ============================================================
   移动端 - 顶栏按钮间距压缩 & 开始界面隐藏优化
   ============================================================ */
@media (max-width: 600px) {
    .topbar-controls { gap: 4px; }

    .topbar-controls .ghost-button {
        padding: 4px 8px;
        font-size: 0.65rem;
    }

    .topbar-controls select {
        padding: 4px 6px;
        font-size: 0.65rem;
    }

    .topbar { gap: 4px; }

    .right-col {
        gap: 10px; /* 减小右侧列内部间距 */
    }

    /* 层级进度面板 */
    .floor-panel { padding: 10px 12px; }

    .floor-panel .big-label { font-size: 1rem; }

    .floor-panel .progress-line { font-size: 0.7rem; }

    .floor-panel .room-badge {
        font-size: 0.65rem;
        padding: 3px 8px;
    }

    /* 状态面板 */
    .status-panel {
        padding: 8px 12px;
        min-height: 80px;
        gap: 2px;
    }

    .status-panel .status-item {
        font-size: 0.75rem;
        padding: 3px 4px;
    }

    .status-panel .status-item .status-label { font-size: 0.7rem; }

    .status-panel .status-item .status-value { font-size: 0.75rem; }
}

.start-screen {
    /* 原有样式保留，添加过渡 */
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.start-screen.hidden {
    opacity: 0;
    transform: scale(1.05);
    pointer-events: none; /* 防止点击穿透 */
}

/* 低血量雾气层（独立于所有界面之上） */
.fog-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100000;
    opacity: 0;
    transition: opacity 1.2s ease;
    /* 线性渐变：底部微红，向上迅速淡化为透明，整体更淡更通透 */
    background: linear-gradient(to top, rgba(200, 0, 0, 0.25) 0%, rgba(200, 0, 0, 0.08) 40%, transparent 80%);
    background-size: 100% 200%; /* 高度为两倍，用于上下滑动 */
    animation: fogFlow 8s ease-in-out infinite;
    will-change: transform, opacity;
}

.fog-layer.active { opacity: 1; }

@keyframes fogFlow {
    0% { background-position: 50% 100%; } /* 红色区域在底部（完全可见） */
    50% { background-position: 50% 0%; } /* 红色区域移动到顶部（完全移出底部） */
    100% { background-position: 50% 100%; } /* 回到底部，形成循环 */
}

/* ===== 星云层 ===== */
.nebula-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.nebula-layer .nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    animation: nebulaDrift 30s ease-in-out infinite alternate;
}

.nebula-layer .nebula:nth-child(1) {
    width: 60vw;
    height: 60vw;
    top: -10%;
    left: -15%;
    background: radial-gradient(circle, rgba(154, 142, 240, 0.22), transparent 70%);
    animation-duration: 35s;
}

.nebula-layer .nebula:nth-child(2) {
    width: 50vw;
    height: 50vw;
    bottom: -10%;
    right: -10%;
    background: radial-gradient(circle, rgba(95, 208, 224, 0.18), transparent 70%);
    animation-duration: 28s;
    animation-delay: -5s;
}

.nebula-layer .nebula:nth-child(3) {
    width: 40vw;
    height: 40vw;
    top: 30%;
    left: 30%;
    background: radial-gradient(circle, rgba(240, 208, 106, 0.10), transparent 70%);
    animation-duration: 40s;
    animation-delay: -10s;
}

.nebula-layer .nebula:nth-child(4) {
    width: 30vw;
    height: 30vw;
    bottom: 20%;
    left: 5%;
    background: radial-gradient(circle, rgba(232, 112, 144, 0.08), transparent 70%);
    animation-duration: 25s;
    animation-delay: -3s;
}

@keyframes nebulaDrift {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    33% { transform: translate(3%, 4%) scale(1.08) rotate(5deg); }
    66% { transform: translate(-2%, -3%) scale(0.92) rotate(-3deg); }
    100% { transform: translate(4%, -2%) scale(1.05) rotate(4deg); }
}

/* ===== 星星层 ===== */
.stars-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    animation: starPulse var(--duration, 3s) ease-in-out infinite alternate;
}

.star.small {
    width: 1.5px;
    height: 1.5px;
    opacity: 0.6;
}

.star.medium {
    width: 2.5px;
    height: 2.5px;
    opacity: 0.8;
}

.star.large {
    width: 4px;
    height: 4px;
    opacity: 1;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

@keyframes starPulse {
    0% { opacity: var(--min-opacity, 0.2); transform: scale(0.8); }
    100% { opacity: var(--max-opacity, 1); transform: scale(1.2); }
}

/* ===== 漂浮粒子（萤火虫） ===== */
.particle-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.float-particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(95, 208, 224, 0.5), transparent 70%);
    box-shadow: 0 0 20px rgba(95, 208, 224, 0.08);
    animation: floatParticle var(--float-duration, 15s) ease-in-out infinite alternate;
    animation-delay: var(--float-delay, 0s);
    opacity: 0;
}

.float-particle:nth-child(odd) {
    background: radial-gradient(circle, rgba(154, 142, 240, 0.4), transparent 70%);
    box-shadow: 0 0 20px rgba(154, 142, 240, 0.06);
}

.float-particle:nth-child(3n) {
    background: radial-gradient(circle, rgba(240, 208, 106, 0.3), transparent 70%);
    box-shadow: 0 0 20px rgba(240, 208, 106, 0.04);
}

@keyframes floatParticle {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    10% { opacity: 0.7; }
    90% { opacity: 0.7; }
    100% { opacity: 0; transform: translate(var(--fx, 100px), var(--fy, -100px)) scale(1.5); }
}

/* ===== 鼠标辉光 ===== */
#mouseGlow {
    position: fixed;
    pointer-events: none;
    z-index: 1;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(95, 208, 224, 0.04), transparent 70%);
    transform: translate(-50%, -50%);
    transition: left 0.6s ease, top 0.6s ease;
    will-change: left, top;
}

/* ===== 全局变量增强 ===== */
:root {
    --bg-primary: #070b18;
    --bg-secondary: #0d1428;
    --bg-panel: rgba(18, 28, 54, 0.85);
    --bg-panel-alt: #19254a;
    --bg-panel-hover: #1c2a52;
    --text-primary: #f0f4ff;
    --text-secondary: #a8bce0;
    --text-muted: #6a7fa0;
    --accent-cyan: #5fd0e0;
    --accent-purple: #9a8ef0;
    --accent-gold: #f0d06a;
    --accent-pink: #e87090;
    --color-success: #5fd0a8;
    --color-danger: #e86878;
    --color-warning: #f0c04a;
    --border-subtle: rgba(255, 255, 255, 0.06);
    --shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.5);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
}

/* ===== 顶栏 H1 渐变 ===== */
.topbar h1 {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== 面板增强（透明玻璃 + 更细腻边框） ===== */
.panel {
    background: var(--bg-panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition: border-color 0.3s ease;
}

.panel:hover { border-color: rgba(255, 255, 255, 0.08); }

.panel h2 {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 8px;
    margin-bottom: 10px;
}

/* ===== 角色面板列表 ===== */
.stat-list > div {
    padding: 5px 6px;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
    font-size: 0.82rem;
}

.stat-list > div:hover { background: rgba(255, 255, 255, 0.03); }

.stat-list span {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.stat-list strong {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.stat-list strong.low {
    color: var(--color-danger);
    animation: pulseDanger 0.8s ease-in-out infinite;
}

/* ===== 层级进度 ===== */
.big-label {
    color: var(--accent-gold);
    font-weight: 700;
}

.room-badge {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    transition: all 0.25s ease;
    color: var(--text-secondary);
}

.room-badge:hover { background: rgba(255, 255, 255, 0.07); }

.room-badge.current {
    background: rgba(95, 208, 224, 0.10);
    border-color: rgba(95, 208, 224, 0.25);
    color: var(--accent-cyan);
    box-shadow: 0 0 20px rgba(95, 208, 224, 0.04);
}

/* ===== 遗物标签 ===== */
.relic-badge {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 0.72rem;
    padding: 4px 12px;
    border-radius: 999px;
}

.relic-badge:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}

.relic-badge.rare {
    background: rgba(240, 208, 106, 0.08);
    border-color: rgba(240, 208, 106, 0.15);
    color: var(--accent-gold);
}

.relic-badge.purple {
    background: rgba(154, 142, 240, 0.08);
    border-color: rgba(154, 142, 240, 0.15);
    color: var(--accent-purple);
}

.relic-badge.danger {
    background: rgba(232, 104, 120, 0.08);
    border-color: rgba(232, 104, 120, 0.15);
    color: var(--color-danger);
}

.bonus-list .relic-badge {
    background: rgba(95, 208, 168, 0.06);
    border-color: rgba(95, 208, 168, 0.10);
    color: var(--color-success);
}

/* ===== 事件面板 ===== */
.event-title {
    color: var(--accent-cyan);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 4px 0 2px;
}

.event-text {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.9rem;
}

.event-text .sub {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-top: 2px;
}

/* ===== 操作按钮 ===== */
.action-button {
    background: rgba(95, 208, 224, 0.10);
    color: var(--accent-cyan);
    border: 1px solid rgba(95, 208, 224, 0.15);
    border-radius: var(--radius-sm);
    padding: 8px 22px;
    font-weight: 600;
    font-size: 0.85rem;
}

.action-button:hover:not(:disabled) {
    transform: translateY(-2px);
    background: rgba(95, 208, 224, 0.18);
    border-color: rgba(95, 208, 224, 0.35);
    box-shadow: 0 4px 24px rgba(95, 208, 224, 0.08);
}

.action-button.secondary {
    background: rgba(95, 208, 168, 0.08);
    color: var(--color-success);
    border-color: rgba(95, 208, 168, 0.12);
}

.action-button.secondary:hover:not(:disabled) {
    background: rgba(95, 208, 168, 0.16);
    border-color: rgba(95, 208, 168, 0.30);
}

.action-button.heal {
    background: rgba(95, 208, 168, 0.10);
    color: var(--color-success);
    border-color: rgba(95, 208, 168, 0.15);
}

.action-button.heal:hover:not(:disabled) {
    background: rgba(95, 208, 168, 0.18);
    border-color: rgba(95, 208, 168, 0.35);
}

.action-button.warning {
    background: rgba(240, 208, 106, 0.08);
    color: var(--accent-gold);
    border-color: rgba(240, 208, 106, 0.12);
}

.action-button.warning:hover:not(:disabled) {
    background: rgba(240, 208, 106, 0.16);
    border-color: rgba(240, 208, 106, 0.30);
}

.action-button.rare {
    background: rgba(154, 142, 240, 0.08);
    color: var(--accent-purple);
    border-color: rgba(154, 142, 240, 0.12);
}

.action-button.rare:hover:not(:disabled) {
    background: rgba(154, 142, 240, 0.16);
    border-color: rgba(154, 142, 240, 0.30);
}

/* ===== 日志列表 ===== */
.log-list li {
    padding: 3px 0 3px 18px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
}

.log-list li::before {
    content: '▸';
    position: absolute;
    left: 0px;
    color: var(--accent-cyan);
    opacity: 0.4;
}

.log-list li:first-child { border-bottom: none; }

/* ============================================================
   右侧列 — 拉伸填满
   ============================================================ */
.hud-grid .right-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

/* ============================================================
   层级进度面板
   ============================================================ */
.floor-panel {
    padding: 12px 16px;
    flex-shrink: 0;
}

.floor-panel .big-label {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 2px;
    color: var(--accent-gold);
}

.floor-panel .progress-line {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.floor-panel .room-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.floor-panel .room-badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.floor-panel .room-badge.current {
    background: rgba(95, 208, 224, 0.10);
    border-color: rgba(95, 208, 224, 0.25);
    color: var(--accent-cyan);
}

/* ============================================================
   状态面板
   ============================================================ */
.status-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 10px 14px;
    gap: 4px;
    min-height: 120px;
}

.status-panel .status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
    font-size: 0.82rem;
}

.status-panel .status-item:hover { background: rgba(255, 255, 255, 0.03); }

.status-panel .status-item .status-label {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.status-panel .status-item .status-value {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.status-panel .status-item .status-value .skill-name { color: var(--accent-purple); }

.status-panel .status-item .status-value .status-on { color: var(--color-success); }

.status-panel .status-item .status-value .status-off { color: var(--text-muted); }

/* ============================================================
   深渊脉动背景 — 动态光晕 + 流动能量线（试炼模式专用）
   ============================================================ */
.abyss-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
}

/* 基础深空 + 动态光晕层 */
.abyss-bg .base {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, #1a2341 0%, #090b14 80%);
}

/* 脉动光晕1 — 青蓝 */
.abyss-bg .pulse1 {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 40% 50%, rgba(95, 208, 224, 0.15) 0%, transparent 50%);
    animation: pulseGlow1 6s ease-in-out infinite alternate;
}

/* 脉动光晕2 — 紫色，相位差 */
.abyss-bg .pulse2 {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 60%, rgba(154, 142, 240, 0.10) 0%, transparent 45%);
    animation: pulseGlow2 8s ease-in-out infinite alternate;
}

/* 脉动光晕3 — 淡金，更微弱，增加层次 */
.abyss-bg .pulse3 {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 80%, rgba(240, 208, 106, 0.06) 0%, transparent 40%);
    animation: pulseGlow3 7s ease-in-out infinite alternate;
}

@keyframes pulseGlow1 {
    0% { transform: scale(1) translate(0, 0); opacity: 0.6; }
    100% { transform: scale(1.3) translate(3%, -4%); opacity: 1; }
}

@keyframes pulseGlow2 {
    0% { transform: scale(1) translate(0, 0); opacity: 0.5; }
    100% { transform: scale(1.25) translate(-2%, 5%); opacity: 0.9; }
}

@keyframes pulseGlow3 {
    0% { transform: scale(1) translate(0, 0); opacity: 0.3; }
    100% { transform: scale(1.4) translate(5%, -2%); opacity: 0.7; }
}

/* 流动能量线条 — 斜向动态扫描 */
.abyss-bg .energy-lines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 30px, rgba(95, 208, 224, 0.02) 30px, rgba(95, 208, 224, 0.02) 32px),
                repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(154, 142, 240, 0.015) 40px, rgba(154, 142, 240, 0.015) 42px);
    animation: energyFlow 12s linear infinite;
    background-size: 200% 200%;
}

@keyframes energyFlow {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* 缓慢漂移的星点 */
.abyss-bg .stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 8% 15%, rgba(255, 255, 255, 0.30), transparent),
        radial-gradient(2.5px 2.5px at 25% 55%, rgba(255, 255, 255, 0.20), transparent),
        radial-gradient(3px 3px at 45% 5%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(2px 2px at 68% 75%, rgba(255, 255, 255, 0.18), transparent),
        radial-gradient(2px 2px at 88% 35%, rgba(255, 255, 255, 0.25), transparent),
        radial-gradient(2px 2px at 12% 80%, rgba(255, 255, 255, 0.22), transparent),
        radial-gradient(2px 2px at 55% 25%, rgba(255, 255, 255, 0.30), transparent),
        radial-gradient(2px 2px at 35% 85%, rgba(255, 255, 255, 0.18), transparent),
        radial-gradient(3px 3px at 75% 10%, rgba(255, 255, 255, 0.28), transparent),
        radial-gradient(2px 2px at 20% 40%, rgba(255, 255, 255, 0.20), transparent),
        radial-gradient(2px 2px at 50% 50%, rgba(255, 255, 255, 0.12), transparent),
        radial-gradient(2px 2px at 80% 55%, rgba(255, 255, 255, 0.18), transparent),
        radial-gradient(2px 2px at 15% 65%, rgba(255, 255, 255, 0.12), transparent),
        radial-gradient(3px 3px at 60% 90%, rgba(255, 255, 255, 0.18), transparent);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: starDrift 30s ease-in-out infinite alternate;
}

@keyframes starDrift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-2%, 1%) scale(1.02); }
}

/* 受击：左右震动 + 闪白 */
@keyframes trialHit {
    0%   { transform: translateX(0) scale(1); filter: brightness(1); }
    25%  { transform: translateX(-9px) scale(1.08); filter: brightness(2.3) saturate(0.45); }
    50%  { transform: translateX(9px) scale(1); filter: brightness(1.5); }
    100% { transform: translateX(0) scale(1); filter: brightness(1); }
}

/* 闪避：侧滑虚影 */
@keyframes trialDodge {
    0%   { transform: translateX(0) scale(1); opacity: 1; }
    50%  { transform: translateX(-26px) translateY(-12px) scale(0.9); opacity: 0.3; }
    100% { transform: translateX(0) scale(1); opacity: 1; }
}

/* 死亡：放大消散 */
@keyframes trialDeath {
    0%   { transform: scale(1) rotate(0); opacity: 1; }
    100% { transform: scale(1.8) rotate(12deg); opacity: 0; }
}

@keyframes trialFloatUp {
    0%   { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-64px) scale(1.25); }
}

/* ===== 设置面板：分段选择控件 ===== */
.setting-item-segmented {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.seg-control {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.seg-option {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    background: rgba(255, 255, 255, 0.05);
    color: #90a2c8;
    border: 1px solid rgba(255, 255, 255, 0.10);
    cursor: pointer;
    transition: all 0.15s ease;
}

.seg-option:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #f3f6ff;
}

.seg-option.active {
    background: rgba(115, 240, 180, 0.15);
    border-color: rgba(115, 240, 180, 0.35);
    color: #73f0b4;
}

/* ============================================================
   设置面板：卡片式选择（多档 + 每档含义不同时用它）
   ------------------------------------------------------------
   为什么不复用 .seg-option：那是一排扁平的胶囊，只适合「小/标准/大」
   这种**一眼就知道差别**的档位。而 HUD 密度是四档、每档含义差得远
   （完整 = 属性面板与遗物栏都常驻；极简 = 只留三条血条），
   光给四个词玩家选不出来，得把每档"常驻什么"写在选项里面。

   布局也不走「左文字右控件」那一套：四档卡片需要整行宽度才排得开，
   硬塞进右半边就是文字被压成两行、按钮那条窄带又空得发慌。
   这里改成**纵向**——标题与说明跨满整行，卡片组在下面独占一行。
   ============================================================ */
.settings-item-cards {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    /* ⚠️ 必须显式覆盖 .setting-item 的 space-between：
       那一套是给「左文字 + 右控件」用的，换成纵向排列之后它会继续把
       标题与卡片组推到两端，中间留出一大块空白（实测 930px 的行里
       信息块 291px、卡片组 384px，中间空掉 255px）。
       改成纵向布局时必须把主轴对齐一起改掉 —— 这是它最容易漏的一处。 */
    justify-content: flex-start;
}

/* 纵向排列后两个子块都要占满整行：space-between 时代它们靠 flex 收缩自适应，
   换成 flex-start 之后如果还按内容宽度走，整行右侧会是一片空地。 */
.settings-item-cards > .setting-info,
.settings-item-cards > .card-choice {
    width: 100%;
}

.settings-item-cards .setting-info {
    gap: 3px;
}

/* 卡片组：两列铺满 —— 四档正好成 2×2，一列会把说明压成三行高 */
.card-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* 跨列：卡片式这一项的信息量本来就比别的项大（标题 + 说明 + 四张卡片），
   挤在 .settings-list 的三列之一里会变成一条又窄又高的竖条。
   ⚠️ 只给「独占一行」的项加这个类 —— 加错了会把整列宽度撑变形。 */
.settings-item-wide {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    /* 窄屏下 .settings-list 降级成单列，跨列声明会自动失效，无需额外处理 */
    .settings-item-wide { grid-column: auto; }
}

.card-choice-option {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    padding: 9px 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.card-choice-option:hover {
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.16);
}

.card-choice-option:active { transform: scale(0.985); }

.card-choice-option.active {
    background: rgba(115, 240, 180, 0.10);
    border-color: rgba(115, 240, 180, 0.38);
}

/* 档位名：选中时用强调绿，未选中保持可读的次级白 */
.card-choice-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.card-choice-option.active .card-choice-label { color: #73f0b4; }

/* 每档"到底是什么"：小字、两行以内，排版上比档位名弱一档 */
.card-choice-note {
    font-size: 0.64rem;
    line-height: 1.45;
    color: var(--muted);
}

.card-choice-option.active .card-choice-note { color: #9fd8c4; }

@media (max-width: 480px) {
    .setting-item-cards { gap: 8px; }
    .card-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .card-choice-option { padding: 8px 9px; }
    .card-choice-note { font-size: 0.6rem; }
}

/* ============================================================
   存档管理界面
   ============================================================ */
.save-manager-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 4px;
}

.save-manager-list::-webkit-scrollbar { width: 4px; }

.save-manager-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
}

.save-manager-list::-webkit-scrollbar-thumb {
    background: rgba(115, 240, 180, 0.3);
    border-radius: 4px;
}

.save-slot-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px 16px;
    transition: all 0.25s ease;
}

.save-slot-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.15);
}

.save-slot-card.active {
    border-color: rgba(115, 240, 180, 0.4);
    background: rgba(115, 240, 180, 0.06);
    box-shadow: 0 0 20px rgba(115, 240, 180, 0.05);
}

.save-slot-card.empty { opacity: 0.7; }

.save-slot-card .save-slot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.save-slot-card .save-slot-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
}

.save-slot-card .save-slot-badge {
    font-size: 0.65rem;
    padding: 2px 12px;
    border-radius: 999px;
    background: rgba(115, 240, 180, 0.15);
    color: var(--accent);
    border: 1px solid rgba(115, 240, 180, 0.15);
}

.save-slot-card .save-slot-info {
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 10px;
}

.save-slot-card .save-slot-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.save-slot-card .save-action-btn {
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.save-slot-card .save-action-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: var(--text-primary);
}

.save-slot-card .save-action-btn.load {
    color: var(--accent);
    border-color: rgba(115, 240, 180, 0.15);
}

.save-slot-card .save-action-btn.load:hover {
    background: rgba(115, 240, 180, 0.12);
    border-color: rgba(115, 240, 180, 0.3);
}

.save-slot-card .save-action-btn.save {
    color: var(--accent-2);
    border-color: rgba(240, 208, 106, 0.15);
}

.save-slot-card .save-action-btn.save:hover {
    background: rgba(240, 208, 106, 0.12);
    border-color: rgba(240, 208, 106, 0.3);
}

.save-slot-card .save-action-btn.delete {
    color: var(--danger);
    border-color: rgba(232, 104, 120, 0.15);
}

.save-slot-card .save-action-btn.delete:hover {
    background: rgba(232, 104, 120, 0.12);
    border-color: rgba(232, 104, 120, 0.3);
}

.save-slot-card .save-action-btn.rename {
    color: var(--accent-purple);
    border-color: rgba(154, 142, 240, 0.15);
}

.save-slot-card .save-action-btn.rename:hover {
    background: rgba(154, 142, 240, 0.12);
    border-color: rgba(154, 142, 240, 0.3);
}

.save-slot-card .save-action-btn.create {
    color: var(--accent-cyan);
    border-color: rgba(95, 208, 224, 0.15);
}

.save-slot-card .save-action-btn.create:hover {
    background: rgba(95, 208, 224, 0.12);
    border-color: rgba(95, 208, 224, 0.3);
}

/* 移动端适配 */
@media (max-width: 480px) {
    .save-slot-card { padding: 10px 12px; }

    .save-slot-card .save-slot-name { font-size: 0.85rem; }

    .save-slot-card .save-slot-info { font-size: 0.7rem; }

    .save-slot-card .save-action-btn {
        font-size: 0.6rem;
        padding: 3px 10px;
    }

    .save-slot-card .save-slot-actions { gap: 4px; }
}
/* ===== 层级进度 - 环境标签 ===== */
.floor-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    width: 100%;
    min-height: 28px;
}

.big-label {
    flex: 0 0 auto;
}

.environment-display {
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: var(--accent-cyan);
    padding: 2px 10px;
    background: rgba(95, 208, 224, 0.08);
    border-radius: 999px;
    border: 1px solid rgba(95, 208, 224, 0.15);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    visibility: visible;
    opacity: 1;
    order: 1;
}

.environment-display:empty {
    display: none !important;
}

/* ===== 环境标签移动端强制显示 ===== */
@media (max-width: 768px) {
    .floor-header {
        gap: 2px 6px;
        min-height: 24px;
    }

    .big-label {
        font-size: 0.85rem;
        flex: 0 0 auto;
    }

    .environment-display {
        font-size: 0.6rem;
        padding: 1px 8px;
        flex: 0 1 auto;
        max-width: 100%;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 480px) {
    .floor-header {
        gap: 2px 4px;
        min-height: 20px;
        flex-wrap: wrap;
    }

    .big-label {
        font-size: 0.72rem;
        flex: 0 0 auto;
    }

    .environment-display {
        font-size: 0.5rem;
        padding: 1px 6px;
        flex: 0 1 auto;
        max-width: 100%;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        order: 1;
    }
}
/* ============================================================
   平板适配（768px ~ 1200px）
   覆盖小米平板4等中等尺寸设备
   ============================================================ */
@media (min-width: 768px) and (max-width: 1200px) {
    /* 网格改为单列，让内容有足够宽度 */
    .hud-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* 右侧列正常排列 */
    .right-col {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
    }

    .right-col .floor-panel {
        flex: 2 1 60%;
        min-width: 200px;
    }

    .right-col .status-panel {
        flex: 1 1 30%;
        min-width: 160px;
    }

    /* 角色面板高度限制，避免太长 */
    .stat-list { max-height: 260px; }

    /* 事件面板增大高度 */
    .main-panel { min-height: 180px; }

    .event-title { font-size: 1.2rem; }

    .event-text {
        font-size: 0.95rem;
        min-height: 40px;
    }

    /* 操作按钮换行显示，不再拥挤 */
    .action-area { gap: 8px; }

    .action-area .action-button {
        padding: 8px 16px;
        font-size: 0.85rem;
        flex: 0 1 auto;
        min-width: 80px;
    }

    /* 顶栏按钮间距 */
    .topbar-controls .ghost-button {
        padding: 4px 10px;
        font-size: 0.7rem;
    }

    .topbar-controls select {
        font-size: 0.7rem;
        padding: 4px 8px;
    }

    /* 遗物和增益标签 */
    .relic-badge {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    /* 日志 */
    .log-list li {
        font-size: 0.75rem;
        padding: 2px 0 2px 12px;
    }

    /* 房间列表 */
    .room-list { gap: 6px; }

    .room-badge {
        padding: 4px 8px;
        font-size: 0.7rem;
    }

    /* ==========================================================
       模态框平板适配
       ========================================================== */
    .modal-content {
        width: min(80vw, 500px);
        padding: 20px;
    }

    /* ==========================================================
       开始界面平板适配
       ========================================================== */
    .start-title { font-size: 3.8rem; }

    .start-button {
        padding: 14px 48px;
        font-size: 1.05rem;
    }
}

/* ============================================================
   小屏平板 / 大屏手机横屏（600px ~ 768px）
   ============================================================ */
@media (min-width: 600px) and (max-width: 768px) {
    .hud-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .right-col {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .right-col .floor-panel {
        flex: 2 1 55%;
        min-width: 180px;
    }

    .right-col .status-panel {
        flex: 1 1 30%;
        min-width: 140px;
    }

    .stat-list { max-height: 220px; }

    .main-panel { min-height: 160px; }

    .event-title { font-size: 1.1rem; }

    .event-text { font-size: 0.9rem; }

    .action-area .action-button {
        padding: 6px 12px;
        font-size: 0.8rem;
        min-width: 70px;
    }

    .topbar-controls .ghost-button {
        padding: 4px 8px;
        font-size: 0.65rem;
    }

    .topbar-controls select {
        font-size: 0.65rem;
        padding: 3px 6px;
    }

    .relic-badge {
        padding: 4px 8px;
        font-size: 0.7rem;
    }

    .log-list li { font-size: 0.7rem; }

    .room-badge {
        padding: 3px 6px;
        font-size: 0.65rem;
    }

    /* 开始界面 */
    .start-title { font-size: 3rem; }

    .start-button {
        padding: 12px 36px;
        font-size: 0.95rem;
    }
}

/* ============================================================
   设置界面
   ============================================================ */
/* ------------------------------------------------------------
   横版排版（v2.8）
   ------------------------------------------------------------
   原来是「一列 14 项」的竖长条（max-width 440px）：一屏装不下、必须滚动，
   而这些全是"扫一眼就调完"的开关 —— 竖排等于逼玩家上下找。
   改成**按类别分列**：弹窗宽而扁，三列并排，整块内容一屏看完，
   与 2D 画面的横版布局同构。
   `minmax(0, 1fr)` 不能省：列宽下限默认是 min-content，
   而「标签 + 开关」那一行有最小宽度，会把列撑破容器并横向溢出。
   ------------------------------------------------------------ */
.settings-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 24px;
    align-items: start;
    padding: 4px 0 0;
}

.settings-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* 分组标题：小字 + 宽字距 + 一条细线。它承载分类信息，
   所以不做成"标题上方的引导标签"，而是分栏自己的题头。 */
.settings-group-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--muted);
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 2px;
}

.settings-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.settings-foot .action-button {
    width: auto;
    min-width: 112px;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    transition: background 0.2s ease;
}

.setting-item:hover { background: rgba(255,255,255,0.07); }

.setting-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.setting-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.setting-desc {
    font-size: 0.7rem;
    color: var(--muted);
}

/* ===== 数字输入框型设置（音量） ===== */
.number-control {
    position: relative;
    flex-shrink: 0;
    width: 88px;
}

.number-control input[type="number"] {
    width: 100%;
    padding: 6px 30px 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.35);
    color: #f0f4ff;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    appearance: textfield;
    -moz-appearance: textfield;
}

.number-control input[type="number"]:focus {
    border-color: #5fd0e0;
    box-shadow: 0 0 20px rgba(95, 208, 224, 0.08);
}

/* 范围提示小字：悬浮在输入框内右侧（不占用输入框旁的位置） */
.number-range-hint {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.58rem;
    color: var(--muted);
    opacity: 0.75;
    line-height: 1;
}

.number-control input[type="number"]:focus ~ .number-range-hint,
.number-control input[type="number"]:not(:placeholder-shown) ~ .number-range-hint {
    opacity: 0.4;
}

.number-control input[type="number"]::-webkit-outer-spin-button,
.number-control input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ===== Toggle 开关 ===== */
.toggle-switch {
    position: relative;
    width: 48px;
    height: 28px;
    flex-shrink: 0;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.15);
    border-radius: 999px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.08);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    border-color: transparent;
}

.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

.toggle-switch input:disabled + .toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 移动端适配 */
@media (max-width: 480px) {
    .setting-item { padding: 8px 12px; }

    .setting-label { font-size: 0.8rem; }

    .setting-desc { font-size: 0.6rem; }

    .toggle-switch {
        width: 40px;
        height: 24px;
    }

    .toggle-slider::before {
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 3px;
    }

    .toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }
}

/* ============================================================
   Toast 提示 - 底部居中 玻璃态 v2
   ============================================================ */
.toast-container {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    padding-bottom: 16px;
    pointer-events: none;
    width: 100%;
    max-width: 480px;
    display: flex;
    justify-content: center;
}

.toast-message {
    pointer-events: auto;
    background: rgba(12, 18, 34, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 24px;
    color: #f3f6ff;
    font-size: 0.9rem;
    text-align: center;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
    animation: toastSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    max-width: 90vw;
    transition: border-color 0.3s ease;
}

/* ---- 主题色变体（保持不变） ---- */
.toast-message.info { border-color: rgba(95, 208, 224, 0.25); }
.toast-message.info .toast-icon { color: #5fd0e0; }

.toast-message.success { border-color: rgba(115, 240, 180, 0.25); }
.toast-message.success .toast-icon { color: #73f0b4; }

.toast-message.warning { border-color: rgba(240, 208, 106, 0.25); }
.toast-message.warning .toast-icon { color: #f0d06a; }

.toast-message.error { border-color: rgba(232, 104, 120, 0.25); }
.toast-message.error .toast-icon { color: #e86878; }

/* ---- 入场：从下往上滑入 + 淡入 ---- */
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- 离场：向下滑出 + 淡出 ---- */
@keyframes toastSlideOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(24px) scale(0.96); }
}

/* ---- 移动端适配 ---- */
@media (max-width: 480px) {
    .toast-container {
        padding-bottom: 12px;
        max-width: 92vw;
    }

    .toast-message {
        padding: 10px 16px;
        font-size: 0.8rem;
        border-radius: 10px;
        min-height: 38px;
    }

    .toast-message .toast-icon { font-size: 1rem; }
}

/* 防止页面缩放时文字过小 */
@media (max-width: 480px) {
  body {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
  }
}
/* ===== 顶部栏移动端适配 ===== */
@media (max-width: 768px) {
  .topbar {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 14px;
    gap: 8px;
  }

  .topbar > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .topbar h1 {
    font-size: 1.2rem;
  }

  .topbar .eyebrow {
    font-size: 0.55rem;
  }

  .topbar-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-start;
  }

  .topbar-controls .ghost-button {
    padding: 4px 10px;
    font-size: 0.6rem;
    min-height: 30px;
  }

  .topbar-controls select {
    padding: 4px 8px;
    font-size: 0.6rem;
    min-height: 30px;
  }

  .topbar-controls label {
    font-size: 0.6rem;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .topbar-controls .ghost-button {
    padding: 3px 8px;
    font-size: 0.55rem;
    min-height: 26px;
  }

  .topbar-controls select {
    padding: 3px 6px;
    font-size: 0.55rem;
    min-height: 26px;
    padding-right: 20px;
  }

  .topbar {
    padding: 6px 10px;
    gap: 4px;
  }

  .topbar h1 {
    font-size: 1rem;
  }
}
/* ===== HUD网格适配 ===== */
@media (max-width: 860px) {
  .hud-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .right-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  .hud-grid {
    grid-template-columns: 1fr 1fr;
  }

  .right-col {
    flex-direction: column;
  }
}

/* ===== 面板内边距统一 ===== */
@media (max-width: 768px) {
  .panel {
    padding: 12px 14px;
    border-radius: 12px;
  }

  .panel h2 {
    font-size: 0.7rem;
    padding-bottom: 6px;
    margin-bottom: 6px;
  }
}

@media (max-width: 480px) {
  .panel {
    padding: 10px 10px;
    border-radius: 10px;
  }

  .panel h2 {
    font-size: 0.65rem;
  }
}
/* ===== 角色面板适配 ===== */
@media (max-width: 768px) {
  .stat-list {
    max-height: 240px;
  }

  .stat-list > div {
    padding: 4px 0;
    font-size: 0.78rem;
  }

  .stat-list span {
    font-size: 0.72rem;
  }

  .stat-list strong {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .stat-list {
    max-height: 180px;
  }

  .stat-list > div {
    padding: 3px 0;
    font-size: 0.7rem;
  }

  .stat-list span {
    font-size: 0.65rem;
  }

  .stat-list strong {
    font-size: 0.72rem;
  }
}
/* ===== 层级进度适配 ===== */
@media (max-width: 768px) {
  .big-label {
    font-size: 1rem;
  }

  .floor-panel .big-label {
    font-size: 0.95rem;
  }

  .floor-panel .progress-line {
    font-size: 0.7rem;
  }

  .floor-header {
    gap: 4px 8px;
  }

  .environment-display {
    font-size: 0.65rem;
    padding: 2px 10px;
  }

  .room-list {
    gap: 4px;
  }

  .room-badge {
    padding: 3px 8px;
    font-size: 0.65rem;
  }
}

@media (max-width: 480px) {
  .big-label {
    font-size: 0.85rem;
  }

  .floor-panel .big-label {
    font-size: 0.8rem;
  }

  .floor-panel .progress-line {
    font-size: 0.6rem;
  }

  .environment-display {
    font-size: 0.55rem;
    padding: 1px 8px;
  }

  .room-badge {
    padding: 2px 6px;
    font-size: 0.55rem;
  }

  .floor-panel {
    padding: 8px 10px;
  }
}
/* ===== 状态面板适配 ===== */
@media (max-width: 768px) {
  .status-panel {
    padding: 8px 12px;
    min-height: 80px;
    gap: 2px;
  }

  .status-panel .status-item {
    padding: 3px 4px;
    font-size: 0.75rem;
  }

  .status-panel .status-item .status-label {
    font-size: 0.7rem;
  }

  .status-panel .status-item .status-value {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .status-panel {
    padding: 6px 8px;
    min-height: 60px;
    gap: 1px;
  }

  .status-panel .status-item {
    padding: 2px 2px;
    font-size: 0.68rem;
  }

  .status-panel .status-item .status-label {
    font-size: 0.62rem;
  }

  .status-panel .status-item .status-value {
    font-size: 0.68rem;
  }
}
/* ===== 遗物/增益面板适配 ===== */
@media (max-width: 768px) {
  .relic-list {
    gap: 6px;
    min-height: 32px;
  }

  .relic-badge {
    padding: 4px 10px;
    font-size: 0.7rem;
    border-radius: 10px;
  }
}

@media (max-width: 480px) {
  .relic-list {
    gap: 4px;
    min-height: 26px;
  }

  .relic-badge {
    padding: 3px 8px;
    font-size: 0.6rem;
    border-radius: 8px;
  }
}
/* ===== 事件面板适配 ===== */
@media (max-width: 768px) {
  .main-panel {
    min-height: 160px;
  }

  .event-title {
    font-size: 1.1rem;
    margin: 6px 0 4px;
  }

  .event-text {
    font-size: 0.85rem;
    min-height: 40px;
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  .main-panel {
    min-height: 120px;
  }

  .event-title {
    font-size: 0.95rem;
    margin: 4px 0 2px;
  }

  .event-text {
    font-size: 0.78rem;
    min-height: 30px;
  }
}
/* ===== 操作按钮适配 ===== */
@media (max-width: 860px) {
  .action-area {
    gap: 6px;
    margin-top: 12px;
    min-height: 40px;
  }

  .action-area .action-button {
    padding: 8px 12px;
    font-size: 0.78rem;
    min-width: 60px;
    min-height: 38px;
    flex: 1 0 auto;
  }
}

@media (max-width: 600px) {
  .action-area {
    gap: 4px;
    margin-top: 8px;
    min-height: 36px;
  }

  .action-area .action-button {
    padding: 6px 8px;
    font-size: 0.7rem;
    min-width: 48px;
    min-height: 34px;
    border-radius: 8px;
    flex: 1 0 auto;
  }
}

@media (max-width: 400px) {
  .action-area {
    gap: 3px;
    margin-top: 6px;
  }

  .action-area .action-button {
    padding: 4px 6px;
    font-size: 0.62rem;
    min-width: 40px;
    min-height: 30px;
    border-radius: 6px;
  }
}

/* ===== Boss 准备按钮适配 ===== */
@media (max-width: 600px) {
  #bossPrep .action-area .action-button {
    padding: 6px 10px;
    font-size: 0.7rem;
    min-width: 80px;
  }
}
/* ===== 日志面板适配 ===== */
@media (max-width: 768px) {
  .log-panel {
    max-height: 150px;
  }

  .log-list li {
    padding: 2px 0 2px 12px;
    font-size: 0.72rem;
  }
}

@media (max-width: 480px) {
  .log-panel {
    max-height: 120px;
  }

  .log-list li {
    padding: 2px 0 2px 10px;
    font-size: 0.65rem;
  }

  .log-list li::before {
    left: -6px;
  }
}
/* ===== 记录面板适配 ===== */
@media (max-width: 768px) {
  .stats-panel .stat-list > div {
    padding: 3px 0;
    font-size: 0.72rem;
  }
}

@media (max-width: 480px) {
  .stats-panel .stat-list > div {
    padding: 2px 0;
    font-size: 0.65rem;
  }
}
/* ===== 侧边栏移动端适配 ===== */
@media (max-width: 480px) {
  .sidebar {
    width: 280px;
    right: -300px;
  }

  .sidebar.open {
    right: 0;
  }

  .sidebar-header {
    padding: 14px 16px 12px;
  }

  .sidebar-title {
    font-size: 0.9rem;
  }

  .sidebar-body {
    padding: 12px 14px;
  }

  .sidebar-cheat-btn {
    padding: 10px 14px;
    font-size: 0.85rem;
    margin-bottom: 10px;
    min-height: 44px;
  }

  .sidebar-placeholder span {
    font-size: 2rem;
  }

  .sidebar-placeholder p {
    font-size: 0.8rem;
  }

  .sidebar-toggle {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    bottom: 12px;
    right: 12px;
  }
}

@media (max-width: 380px) {
  .sidebar {
    width: 240px;
    right: -260px;
  }

  .sidebar-cheat-btn {
    padding: 8px 12px;
    font-size: 0.78rem;
    min-height: 38px;
  }
}
/* ===== 模态框适配 ===== */
@media (max-width: 768px) {
  .modal-content {
    width: min(92vw, 480px);
    padding: 18px 16px;
    max-height: 92vh;
    border-radius: 14px;
  }

  .modal-header h3 {
    font-size: 1rem;
  }

  .modal-close {
    font-size: 1.4rem;
    padding: 2px 8px;
  }

  .condition-item {
    padding: 10px 12px;
  }

  .condition-item strong {
    font-size: 0.85rem;
  }

  .condition-item p {
    font-size: 0.75rem;
  }

  .condition-progress {
    font-size: 0.78rem;
  }
}

@media (max-width: 480px) {
  .modal-content {
    width: min(96vw, 360px);
    padding: 14px 12px;
    max-height: 90vh;
    border-radius: 12px;
  }

  .modal-header {
    margin-bottom: 12px;
  }

  .modal-header h3 {
    font-size: 0.9rem;
  }

  .modal-close {
    font-size: 1.2rem;
    padding: 2px 6px;
  }

  .condition-item {
    padding: 8px 10px;
    border-radius: 10px;
  }

  .condition-item strong {
    font-size: 0.78rem;
  }

  .condition-item p {
    font-size: 0.68rem;
  }

  .condition-progress {
    font-size: 0.7rem;
  }
}

/* 存档管理模态框特殊适配 */
@media (max-width: 480px) {
  .save-slot-card {
    padding: 8px 10px;
  }

  .save-slot-card .save-slot-name {
    font-size: 0.78rem;
  }

  .save-slot-card .save-slot-info {
    font-size: 0.65rem;
  }

  .save-slot-card .save-action-btn {
    padding: 2px 8px;
    font-size: 0.55rem;
  }
}
/* ===== 图鉴适配 ===== */
@media (max-width: 768px) {
  .encyclopedia-categories .category-btn {
    padding: 6px 14px;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .encyclopedia-categories {
    gap: 4px;
  }

  .encyclopedia-categories .category-btn {
    padding: 4px 10px;
    font-size: 0.68rem;
    border-radius: 999px;
  }

  #encyclopediaList .condition-item {
    padding: 8px 10px;
  }

  #encyclopediaList .condition-item strong {
    font-size: 0.75rem;
  }

  #encyclopediaList .condition-item p {
    font-size: 0.65rem;
  }
}

/* ===== 更新日志适配 ===== */
@media (max-width: 768px) {
  .changelog-item {
    padding: 10px 12px;
  }

  .changelog-item .version {
    font-size: 0.9rem;
  }

  .changelog-item ul {
    font-size: 0.78rem;
    padding-left: 16px;
  }
}

@media (max-width: 480px) {
  .changelog-list {
    gap: 10px;
    max-height: 400px;
  }

  .changelog-item {
    padding: 8px 10px;
  }

  .changelog-item .version {
    font-size: 0.8rem;
  }

  .changelog-item ul {
    font-size: 0.7rem;
    padding-left: 14px;
    line-height: 1.6;
  }
}
/* ===== 作弊面板适配 ===== */
@media (max-width: 768px) {
  #cheatModal .modal-content {
    max-width: 520px;
  }

  .cheat-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .cheat-stat-item input {
    padding: 5px 8px;
    font-size: 0.8rem;
  }

  .cheat-stat-item label {
    font-size: 0.65rem;
  }

  .cheat-section {
    padding: 10px 12px;
  }

  .cheat-section-title {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .cheat-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }

  .cheat-stat-item input {
    padding: 4px 6px;
    font-size: 0.72rem;
    min-height: 32px;
  }

  .cheat-stat-item label {
    font-size: 0.58rem;
  }

  .cheat-section {
    padding: 8px 10px;
    margin-bottom: 10px;
  }

  .cheat-section-title {
    font-size: 0.78rem;
    margin-bottom: 8px;
  }

  .cheat-select {
    padding: 6px 10px;
    font-size: 0.78rem;
    min-height: 34px;
  }

  .cheat-add-btn {
    padding: 6px;
    font-size: 0.75rem;
    min-height: 34px;
  }

  .cheat-apply-btn {
    min-height: 32px;
    font-size: 0.75rem;
    padding: 4px 8px;
  }

  .cheat-password-input {
    padding: 8px 12px;
    font-size: 0.85rem;
  }

  .cheat-password-confirm {
    padding: 10px;
    font-size: 0.85rem;
  }

  .cheat-password-hint {
    font-size: 0.8rem;
    margin-bottom: 12px;
  }

  .cheat-password-toggle {
    padding: 6px 10px;
    font-size: 0.9rem;
    min-width: 36px;
  }
}

/* 作弊面板试炼修改区特殊适配 */
@media (max-width: 480px) {
  .cheat-stat-item[style*="grid-column: span 2;"] {
    grid-column: 1 / -1 !important;
  }

  .cheat-stat-item[style*="grid-column: span 2;"] input {
    font-size: 0.72rem;
  }
}
/* ===== 设置面板适配 ===== */
/* 横版设置面板的宽度与降级（与上面的 .settings-list 三列配套） */
#settingsModal .modal-content {
    width: min(94vw, 980px);
    max-width: min(94vw, 980px);
}

/* 设置项在变窄的列里：允许中文长描述换行，但绝不横向撑破列宽 */
#settingsModal .setting-item {
    padding: 9px 12px;
    min-width: 0;
}

#settingsModal .setting-info {
    min-width: 0;
}

#settingsModal .setting-desc {
    overflow-wrap: anywhere;
}

/* 阈值取 720 而不是 900：横屏手机（≈800 宽）刚好落在 3 列里 ——
   14 项分 3 列每列才 4~6 行，一屏基本够；降到 2 列会让每列涨到 7~10 行，
   内容直接翻倍要滚动，横版的意义也就没了。 */
@media (max-width: 720px) {
  #settingsModal .settings-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  #settingsModal .modal-content {
    width: min(94vw, 460px);
    max-width: min(94vw, 460px);
  }

  #settingsModal .settings-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .setting-item {
    padding: 8px 12px;
  }

  .setting-label {
    font-size: 0.8rem;
  }

  .setting-desc {
    font-size: 0.65rem;
  }
}

@media (max-width: 480px) {
  .setting-item {
    padding: 6px 10px;
    border-radius: 8px;
  }

  .setting-label {
    font-size: 0.72rem;
  }

  .setting-desc {
    font-size: 0.58rem;
  }

  .toggle-switch {
    width: 36px;
    height: 22px;
  }

  .toggle-slider::before {
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
  }

  .toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(14px);
  }
}
/* ===== 试炼商店适配 ===== */
@media (max-width: 768px) {
  #trialShopItems .condition-item {
    padding: 10px 12px;
  }

  #trialShopItems .condition-item strong {
    font-size: 0.8rem;
  }

  #trialShopItems .condition-item span {
    font-size: 0.7rem;
  }

  #trialShopItems .condition-item p {
    font-size: 0.65rem;
  }
}

@media (max-width: 480px) {
  #trialShopItems .condition-item {
    padding: 8px 10px;
  }

  #trialShopItems .condition-item strong {
    font-size: 0.72rem;
  }

  #trialShopItems .condition-item span {
    font-size: 0.62rem;
  }

  #trialShopItems .condition-item p {
    font-size: 0.58rem;
  }
}
/* ===== 开始界面适配 ===== */
@media (max-width: 768px) {
  .start-title {
    font-size: 3.2rem;
  }

  .start-welcome {
    font-size: 1rem;
  }

  .start-subtitle {
    font-size: 0.85rem;
    margin-bottom: 28px;
  }

  .start-button {
    padding: 14px 44px;
    font-size: 1rem;
  }

  .start-version {
    font-size: 0.6rem;
  }

  .start-changelog-btn {
    font-size: 0.7rem;
    padding: 6px 14px;
  }
}

@media (max-width: 480px) {
  .start-title {
    font-size: 2.4rem;
  }

  .start-welcome {
    font-size: 0.8rem;
  }

  .start-subtitle {
    font-size: 0.7rem;
    margin-bottom: 20px;
  }

  .start-button {
    padding: 12px 32px;
    font-size: 0.85rem;
    min-height: 44px;
  }

  .start-version {
    font-size: 0.5rem;
    margin-top: 16px;
  }

  .start-changelog-btn {
    font-size: 0.55rem;
    padding: 4px 10px;
    top: 10px;
    right: 12px;
    min-height: 28px;
  }

  .start-content {
    padding: 12px;
  }

  .start-logo {
    gap: 6px;
    margin-bottom: 10px;
  }
}

@media (max-width: 380px) {
  .start-title {
    font-size: 2rem;
  }

  .start-welcome {
    font-size: 0.7rem;
  }

  .start-subtitle {
    font-size: 0.6rem;
    margin-bottom: 16px;
  }

  .start-button {
    padding: 10px 24px;
    font-size: 0.75rem;
    min-height: 38px;
  }
}
/* ===== 滚动条优化 ===== */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 2px;
  }
}

/* ===== 防止内容溢出 ===== */
@media (max-width: 480px) {

  .stat-list,
  .log-panel,
  .changelog-list,
  .save-manager-list {
    word-break: break-word;
  }

  /* 数字不换行 */
  .stat-list strong {
    white-space: nowrap;
  }
}

/* ===== 平板横屏优化 ===== */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .hud-grid {
    grid-template-columns: 1fr 1fr;
  }

  .right-col {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .right-col .floor-panel {
    flex: 2 1 55%;
  }

  .right-col .status-panel {
    flex: 1 1 35%;
  }
}

/* ===== 手机横屏优化 ===== */
@media (max-width: 768px) and (orientation: landscape) {

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

  .right-col {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .right-col .floor-panel {
    flex: 2 1 50%;
  }

  .right-col .status-panel {
    flex: 1 1 30%;
  }
}
/* ============================================================
   修复：手机端层级进度面板环境效果不显示
   追加于文件末尾，通过 ID+类名 双保险 + !important 强制生效
   ============================================================ */

/* ---------- 经典模式：#floorEnvironment ---------- */
#floorEnvironment,
.environment-display {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  content-visibility: visible !important;

  /* 布局：跟随在层数标题后面，超出省略 */
  order: 1;
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;

  /* 外观 */
  font-size: 0.7rem;
  color: var(--accent-cyan, #5fd0e0);
  padding: 2px 10px;
  background: rgba(95, 208, 224, 0.08);
  border-radius: 999px;
  border: 1px solid rgba(95, 208, 224, 0.15);

  /* 文字截断，防止撑爆面板 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 有内容才显示，空内容仍然隐藏 */
#floorEnvironment:empty,
.environment-display:empty {
  display: none !important;
}

#trialEnvironment:empty {
  display: none !important;
}

/* ---------- 确保父容器不会裁剪/隐藏标签 ---------- */
.floor-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  overflow: visible !important;
}

/* ============================================================
   移动端适配（平板 / 手机 / 小屏手机）
   ============================================================ */
@media (max-width: 768px) {
  #floorEnvironment,
  .environment-display {
    font-size: 0.62rem;
    padding: 2px 8px;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  #floorEnvironment,
  .environment-display {
    font-size: 0.55rem;
    padding: 1px 7px;
    order: 1;
    flex: 0 1 auto;
  }
}

@media (max-width: 380px) {
  #floorEnvironment,
  .environment-display {
    font-size: 0.5rem;
    padding: 1px 6px;
  }
}
/* ============================================================
   自定义难度面板：数值标签强制单行显示
   ============================================================ */

/* 所有以 Value 结尾的数值显示元素（如 customEnemyHpValue） */
#customDifficultyPanel [id$="Value"] {
  font-size: 0.7rem;
  white-space: nowrap;      /* 禁止换行 */
  overflow: visible;        /* 不裁剪文字 */
  text-overflow: clip;
  flex-shrink: 0;           /* flex 布局下不被压缩 */
  min-width: 0;
  max-width: none;
  text-align: right;
  line-height: 1.2;
  align-self: center;       /* 垂直居中对齐输入框 */
  letter-spacing: -0.02em;  /* 轻微收紧字距 */
}

/* 小屏进一步缩小字号，保证不换行 */
@media (max-width: 768px) {
  #customDifficultyPanel [id$="Value"] {
    font-size: 0.62rem;
  }
}

@media (max-width: 480px) {
  #customDifficultyPanel [id$="Value"] {
    font-size: 0.55rem;
    letter-spacing: -0.04em;
  }
}
/* ？说明按钮跟随标题，收起按钮保持靠右 */
.custom-difficulty-header { justify-content: flex-start; gap: 8px; }
.custom-difficulty-header .collapse-toggle:last-child { margin-left: auto; }
/* ============================================================
   自定义难度面板：规则区/高级区/工具栏移动端适配（补漏）
   ============================================================ */

/* ---------- 平板及以下（≤768px） ---------- */
@media (max-width: 768px) {
    /* 规则网格：3列 → 2列，最小宽度放宽，消除横向溢出 */
    .custom-rule-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
    }
    /* 高级网格：5列 → 2列 */
    .custom-advanced-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
    }
    /* 工具栏允许换行，防止警告提示顶开布局 */
    .custom-difficulty-toolbar {
        flex-wrap: wrap;
        row-gap: 6px;
    }
}

/* ---------- 手机（≤480px） ---------- */
@media (max-width: 480px) {
    /* 规则网格与高级网格全部降为单列 */
    .custom-rule-grid,
    .custom-advanced-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    /* 规则项：小屏允许内部换行，label 稍微压小 */
    .custom-rule-item {
        flex-wrap: wrap;
        padding: 8px 10px;
    }
    .custom-rule-text label {
        font-size: 0.65rem;
    }
    .custom-rule-text small {
        font-size: 0.55rem;
    }
    /* 参数区间距同步收紧 */
    .custom-difficulty-panel {
        padding: 12px 12px;
    }
    .custom-difficulty-grid {
        gap: 8px 10px;
    }
    /* 警告提示在小屏不抢宽度 */
    .custom-difficulty-warning {
        white-space: normal;
        flex: 1 1 100%;
        order: 3;
    }
}

/* ============================================================
   试炼模式 2D 渲染层（阶段1：Phaser 3 基础框架）
   ============================================================ */
.trial2d-stage {
    position: relative;
    flex-shrink: 0;
    margin-bottom: 10px;
    border: 1px solid rgba(115, 240, 180, 0.18);
    border-radius: 14px;
    background: rgba(8, 10, 18, 0.72);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45), inset 0 0 40px rgba(74, 26, 58, 0.18);
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.trial2d-stage.hidden {
    display: none;
}

.trial2d-stage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 14px;
    background: rgba(18, 24, 40, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}

.trial2d-tag {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--accent, #73f0b4);
    text-transform: uppercase;
}

.trial2d-hint {
    font-size: 0.68rem;
    color: rgba(243, 246, 255, 0.5);
}

.trial2d-canvas-host {
    width: 100%;
    height: 320px;
    position: relative;
    background: #07070f;
}

.trial2d-canvas-host canvas {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.trial2d-fallback {
    padding: 20px 16px 22px;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(243, 246, 255, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.trial2d-fallback.hidden {
    display: none;
}

.trial2d-fallback-icon {
    font-size: 1.6rem;
    line-height: 1;
    opacity: 0.7;
}

.trial2d-fallback-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(243, 246, 255, 0.92);
}

/* 失败原因：手机上这是玩家唯一能看到的技术信息，必须显眼 */
.trial2d-fallback-why {
    max-width: 520px;
    padding: 8px 12px;
    font-size: 0.74rem;
    line-height: 1.6;
    color: #ffb0a0;
    background: rgba(255, 120, 100, 0.08);
    border: 1px solid rgba(255, 120, 100, 0.22);
    border-radius: 8px;
    word-break: break-word;
}

.trial2d-fallback-why:empty {
    display: none;
}

.trial2d-fallback-note {
    font-size: 0.74rem;
    color: rgba(243, 246, 255, 0.5);
}

/* 重试按钮：触摸目标高度 ≥44px，符合移动端可点击尺寸 */
.trial2d-fallback-retry {
    margin-top: 4px;
    min-height: 44px;
    padding: 9px 22px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: #07070f;
    background: linear-gradient(180deg, #8ff7c4, #4fd79c);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.trial2d-fallback-retry:active {
    transform: translateY(1px);
    filter: brightness(0.94);
}

.trial2d-fallback-retry:disabled {
    opacity: 0.6;
}

.trial2d-fallback-tip {
    font-size: 0.68rem;
    line-height: 1.6;
    color: rgba(243, 246, 255, 0.35);
}

/* ============================================================
   移动端横屏提示（自动旋转失败时的降级）
   固定在顶部居中：不阻断触摸操作 —— 只有「知道了」按钮接收点击
   ============================================================ */
.trial2d-rotate-hint {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 24px);
    padding: 9px 10px 9px 14px;
    font-size: 0.76rem;
    color: rgba(243, 246, 255, 0.9);
    background: rgba(14, 18, 30, 0.94);
    border: 1px solid rgba(115, 240, 180, 0.35);
    border-radius: 999px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    animation: trialRotateHintIn 0.3s ease-out;
}

.trial2d-rotate-hint.hidden {
    display: none;
}

/* ============================================================
   2D 试炼布局自定义工具条
   ------------------------------------------------------------
   编辑时覆在画布底部。放底部而不是顶部：顶部是 HUD 区，工具条压上去
   就没法拖动顶部那些面板了。
   z-index 要高于画布（5）与移动端提示（9999）。
   ============================================================ */
.trial2d-layout-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(10, 13, 22, 0.96);
    border-top: 1px solid rgba(115, 240, 180, 0.3);
    box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.5);
    font-size: 0.74rem;
    color: rgba(243, 246, 255, 0.9);
    -webkit-tap-highlight-color: transparent;
}

.trial2d-layout-bar.hidden {
    display: none;
}

.t2d-lb-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.t2d-lb-row::-webkit-scrollbar { display: none; }

.t2d-lb-title {
    flex: 0 0 auto;
    font-weight: 700;
    color: #73f0b4;
    letter-spacing: 0.02em;
}

.t2d-lb-name {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 30vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255, 215, 106, 0.95);
}

.t2d-lb-field {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.t2d-lb-field input[type="range"] {
    width: 84px;
    height: 22px;
    accent-color: #73f0b4;
}

.t2d-lb-val {
    min-width: 38px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: rgba(243, 246, 255, 0.72);
}

.t2d-lb-check {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    min-height: 30px;
}

.t2d-lb-check input { width: 16px; height: 16px; accent-color: #73f0b4; }

.t2d-lb-btn {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0 11px;
    font-size: 0.74rem;
    color: rgba(243, 246, 255, 0.9);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    cursor: pointer;
}

.t2d-lb-btn.primary {
    color: #04120c;
    background: linear-gradient(135deg, #73f0b4, #4dd39a);
    border-color: transparent;
    font-weight: 700;
}

.t2d-lb-btn.danger { color: #ff9e9e; border-color: rgba(255, 107, 107, 0.35); }

.t2d-lb-list {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.t2d-lb-list::-webkit-scrollbar { display: none; }

.t2d-lb-chip {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0 10px;
    font-size: 0.72rem;
    color: rgba(243, 246, 255, 0.82);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
}

/* 改过的项标成金色，一眼看出哪些动过 */
.t2d-lb-chip.changed {
    color: #ffd76a;
    border-color: rgba(255, 215, 106, 0.45);
}

.t2d-lb-chip.sel {
    color: #04120c;
    background: #73f0b4;
    border-color: transparent;
    font-weight: 700;
}

.t2d-lb-chip.off {
    opacity: 0.45;
    text-decoration: line-through;
}

.t2d-lb-toast {
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity 0.25s ease;
    color: #73f0b4;
    white-space: nowrap;
}

.t2d-lb-toast.show { opacity: 1; }

@media (max-width: 560px) {
    .t2d-lb-field input[type="range"] { width: 62px; }
    .trial2d-layout-bar { font-size: 0.7rem; }
}

.trial2d-rotate-icon {
    font-size: 1rem;
    animation: trialRotateIcon 2.4s ease-in-out infinite;
}

.trial2d-rotate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trial2d-rotate-close {
    flex-shrink: 0;
    min-height: 30px;
    padding: 4px 14px;
    font-family: inherit;
    font-size: 0.72rem;
    color: #07070f;
    background: #73f0b4;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

@keyframes trialRotateHintIn {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* 手机图标做 90° 旋转暗示，比静止图标更容易让人明白要横过来 */
@keyframes trialRotateIcon {
    0%, 45%   { transform: rotate(0deg); }
    60%, 100% { transform: rotate(90deg); }
}

/* 2D 模式下隐藏 emoji 精灵，避免与 2D 画面重复 */
.trial-screen.trial2d-active .trial-sprite {
    display: none;
}

/* 顶栏 2D 开关的激活态 */
.trial-ghost-btn.trial2d-on {
    border-color: var(--accent, #73f0b4);
    color: var(--accent, #73f0b4);
    background: rgba(115, 240, 180, 0.12);
}

/* 移动端：2D 舞台降高，避免挤压面板 */
@media (max-width: 768px) {
    .trial2d-canvas-host {
        height: 220px;
    }
    .trial2d-hint {
        display: none;
    }
}

@media (max-width: 480px) {
    .trial2d-canvas-host {
        height: 170px;
    }
}

/* 2D 舞台铺满整个视口 */
.trial-screen.realtime-mode .trial2d-stage {
    position: fixed;
    inset: 0;
    /* 移动端 100vh 是「含地址栏」的高度，底部按钮会被地址栏盖住、点不到；
       --trial2d-vh 由 JS 按 visualViewport 实时写入，作为最可靠的兜底。
       两行顺序不能反：不支持的浏览器会忽略后一行。 */
    height: 100vh;
    height: var(--trial2d-vh, 100dvh);
    margin: 0;
    border: none;
    border-radius: 0;
    background: #07070f;
    box-shadow: none;
    z-index: 5;
    /* 刘海屏 / 手势条：整个游戏区避开安全区，避免按钮被系统条压住 */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    box-sizing: border-box;
    /* 触摸设备：禁止浏览器接管手势（下拉刷新、双击缩放会打断实时操作） */
    touch-action: none;
    overscroll-behavior: none;
}

.trial-screen.realtime-mode .trial2d-stage-head {
    display: none;
}

.trial-screen.realtime-mode .trial2d-canvas-host {
    width: 100%;
    height: 100%;
}

.trial-screen.realtime-mode .trial2d-canvas-host canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
}

/* 全屏战斗时隐藏页面级背景特效，避免干扰 */
body.realtime-trial,
body.classic2d {
    overflow: hidden;
    /* 移动端：禁止下拉刷新与边缘回弹 —— 战斗中手一滑就刷新页面，进度全丢 */
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    /* 注意：这里绝对不能再写 touch-action: none
       ------------------------------------------------------------
       touch-action 的最终取值是「触摸目标元素 → 根元素」整条祖先链的交集，
       根元素上的 none 会让所有后代都失去触摸滚动（后代写 auto / pan-y 也救不回来）。
       之前就是这一行导致：在 2D 试炼里打开设置面板后，列表完全滑不动，
       底部那些设置项永远够不到。
       战斗中禁止手势的职责交给 .trial2d-stage 与画布自己声明即可。 */
}

/* ⚠️ 2.7 的 2D 画面用的是 body.classic2d（引擎宿主写的 MODE_TAG），
   而这一整套"2D 期间该收起来的东西"原本只挂在 body.realtime-trial（试炼时代的标记）上。
   合并时换了标记却漏了同步这套 CSS，后果有三条，用户都报到了：
     ① `overflow: hidden` 缺失 → **2D 画面里页面还能滚动**；
     ② 背景三层特效没隐藏 → 它们在**整场战斗里持续跑动画**；
     ③ 侧边栏那套规则没跟上（☰ 已另补，见文件末尾 body.classic2d .sidebar-toggle）。
   第 ② 条是性能问题而不是观感问题：.nebula 是 60vw 的 div 配 `filter: blur(80px)`、
   外加 30 秒无限漂移动画，.particle-container 里的粒子更是由 JS 逐个创建/移动的 DOM ——
   两者叠在一场实时战斗底下，等于每帧都在白烧主线程与 GPU（手机上尤其致命）。 */
body.realtime-trial .nebula-layer,
body.realtime-trial .stars-layer,
body.realtime-trial .particle-container,
body.classic2d .nebula-layer,
body.classic2d .stars-layer,
body.classic2d .particle-container {
    display: none !important;
}

/* 2D 实时战斗：收起侧边栏开关
   ------------------------------------------------------------
   它固定在右下角（bottom/right 24px，移动端断点 12px）、z-index 100001，
   而画布只有 z-index 5 —— 手机横屏下它正好压在「攻击」键中心上，
   攻击键既看不见也点不到（触控被这个 DOM 按钮吃掉）。
   实时战斗里也不需要它：切文字界面 / 商店 / 图鉴 / 退出试炼，
   画布内都各有一颗按钮。 */
body.realtime-trial .sidebar-toggle,
body.realtime-trial .sidebar-overlay {
    display: none !important;
}

@keyframes trialRewardFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes trialRewardRise {
  from { transform: translateY(16px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

#trialRewardClose {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 16px;
}

/* ============================================================
   矮视口弹窗适配（手机横屏，例如 800×360）
   ------------------------------------------------------------
   必须放在样式表最末尾：本文件前面还有一段
   @media (min-width: 768px) and (max-width: 1200px) 的
   `.modal-content { width: min(80vw,500px); padding: 20px }`，
   手机横屏的 800px 宽正好落进那个区间，同优先级下先出现的会被它盖掉。

   两件事：
     1. 弹窗几乎撑满可视高度、内边距压扁 → 横屏下 14 项设置基本一屏可见；
     2. 显式声明 touch-action: pan-y，保证弹窗内始终能纵向触摸滚动。
        （真正的元凶是 body 上的 touch-action: none，已在那里修掉。）
   ============================================================ */
@media (max-height: 560px) {
  .modal-content {
    /* 优先用 JS 实测的真实可视高度（避开移动端地址栏），没量到则退回 100vh */
    max-height: calc(100vh - 12px);
    max-height: calc(var(--trial2d-vh, 100vh) - 12px);
    padding: 12px 14px;
    border-radius: 14px;
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .modal-header {
    margin-bottom: 10px;
  }

  .modal-header h3 {
    font-size: 1rem;
    margin: 0;
  }

  .modal-close {
    font-size: 1.3rem;
    padding: 2px 8px;
  }

  .settings-list {
    gap: 8px;
  }

  .setting-item {
    padding: 6px 10px;
    border-radius: 8px;
  }

  .setting-label {
    font-size: 0.78rem;
  }

  .setting-desc {
    font-size: 0.62rem;
  }
}

/* 矮视口 + 宽视口（横屏手机 ≈800×360）：设置面板已经是横版三列，
   这里只补"更扁"的那一半 —— 压缩内边距与行距，让 14 项尽量一屏看完。
   列数保持 3：4 列会把「2D 试炼按键自定义」这类长标签挤到换行。 */
@media (max-height: 560px) and (min-width: 600px) {
  #settingsModal .modal-content {
    width: min(96vw, 900px);
    /* !important 保留：这是对"任何更宽规则"的最终收口，
       横屏手机上必须真正铺开，否则三列会各自挤成一条 */
    max-width: min(96vw, 900px) !important;
    padding: 16px;
  }

  #settingsModal .settings-list {
    /* 必须显式写回 3 列：上面 (max-width: 720px) 的降级规则对这个视口也成立，
       不写就会在横屏手机上塌成 2 列，内容高度翻倍、必须滚动才能看完。 */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
  }

  #settingsModal .settings-group {
    gap: 7px;
  }

  #settingsModal .settings-group-title {
    padding-bottom: 5px;
  }

  #settingsModal .setting-item {
    padding: 6px 10px;
  }

  #settingsModal .setting-desc {
    font-size: 0.62rem;
  }

  #settingsModal .settings-foot {
    margin-top: 12px;
  }
}

/* ============================================================
   布局导入导出面板
   ------------------------------------------------------------
   取代 window.prompt：系统对话框会把页面顶出全屏，而 2D 试炼的横屏锁定
   依赖全屏 —— 一弹 prompt 就转回竖屏，且再也回不来。
   铺满整个视口（含布局工具条），一是强调这是模态、二是挡住误触穿透到画布。
   ============================================================ */
.trial2d-io-panel {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: rgba(6, 8, 15, 0.97);
  color: rgba(243, 246, 255, 0.92);
  font-size: 0.76rem;
  -webkit-tap-highlight-color: transparent;
}

.trial2d-io-panel.hidden {
  display: none;
}

.t2d-io-head {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

#trial2dIoTitle {
  color: #73f0b4;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.t2d-io-hint {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(243, 246, 255, 0.55);
}

.t2d-io-text {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #d8e4ff;
  background: rgba(12, 16, 28, 0.9);
  border: 1px solid rgba(115, 240, 180, 0.28);
  border-radius: 10px;
  resize: none;
  /* 布局 JSON 带缩进换行：保留空白才能看出结构，横向溢出靠自身滚动 */
  white-space: pre;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

.t2d-io-text:read-only {
  color: rgba(216, 228, 255, 0.82);
}

.t2d-io-btns {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 面板里按钮要够大好点：覆盖工具条里的 flex: 0 0 auto + 30px 高 */
.t2d-io-btns .t2d-lb-btn {
  flex: 1 1 0;
  min-width: 96px;
  min-height: 42px;
  font-size: 0.8rem;
}

/* 导出 / 导入两种模式靠 hidden 类切换按钮。页面上并没有全局的 .hidden 规则
   （各处都是「父选择器 + .hidden」成对写的），所以这里必须显式声明 ——
   否则加了隐藏类也照样显示，四个按钮全挤在一起。 */
.t2d-io-btns .t2d-lb-btn.hidden {
  display: none;
}

/* ============================================================
   苹果设备（iOS / iPadOS / macOS Safari）适配
   ------------------------------------------------------------
   逐条对应 iOS Safari 与 Chromium 的真实行为差异，不是照抄的模板：
     · iOS 从 10 开始忽略 user-scalable=no，双击/双指仍会缩放页面
     · iOS 横屏时会对正文做 text autosizing，字号自己变大 → 布局错位
     · iOS 长按会弹「拷贝 / 查询」callout，动作游戏里等于误触菜单
     · iOS 只认 webkit 前缀的 tap-highlight / touch-callout
   双指缩放本身由 试炼2D.js 的 installGestureGuard 拦（gesture* 事件是唯一入口）。
   ============================================================ */

/* 横屏时不要自动放大字号：iOS 的 text autosizing 会把沉浸式 HUD 顶歪 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  -webkit-tap-highlight-color: transparent;
  /* 长按不弹 callout 菜单：输入框单独放开（见下），否则没法长按粘贴 */
  -webkit-touch-callout: none;
}

/* 输入类元素：长按要能弹「粘贴 / 选择」，且必须允许选中文本 */
input,
textarea,
[contenteditable="true"] {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* 按钮类：touch-action: manipulation 去掉 iOS 的双击缩放与 300ms 点击延迟。
   只写在可点元素上 —— 写在 body 上会连滚动一起改掉。 */
button,
a,
[role="button"],
.trial2d-fallback-retry,
.t2d-lb-btn {
  touch-action: manipulation;
}

/* ============================================================
   2D 启动中提示
   ------------------------------------------------------------
   自动重试期间显示（静默重试最长约 5 秒）。绝对定位铺满舞台：
   全屏时 canvas 占 100% 高，走正常流的话这块会掉到屏幕外面看不见。
   ============================================================ */
.trial2d-boot {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  background: #07070f;
  /* 安全居中：窄屏横屏（~360px 高）下内容更高时也能滚到，而不是被裁掉顶部 */
  overflow-y: auto;
}

.trial2d-boot > :first-child { margin-top: auto; }
.trial2d-boot > :last-child { margin-bottom: auto; }
.trial2d-boot > * { flex: 0 0 auto; }

.trial2d-boot.hidden {
  display: none;
}

.trial2d-boot-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(115, 240, 180, 0.22);
  border-top-color: #73f0b4;
  border-radius: 50%;
  animation: trial2dBootSpin 0.9s linear infinite;
}

.trial2d-boot-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(243, 246, 255, 0.92);
}

.trial2d-boot-sub {
  max-width: 420px;
  font-size: 0.72rem;
  line-height: 1.55;
  color: rgba(243, 246, 255, 0.5);
}

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

/* 省电模式 / 减弱动态效果：动画会额外吃电，转圈改成静态环 */
@media (prefers-reduced-motion: reduce) {
  .trial2d-boot-spinner { animation: none; }
}

/* ============================================================
   2D 全屏模式下「回退面板」必须浮在画布之上
   ------------------------------------------------------------
   原来漏了这条：面板在正常流里，而全屏时画布是 100% 高，于是面板被顶到
   屏幕下方屏幕外 —— 玩家看到的是一块纯黑，完全不知道发生了什么，
   更找不到那个「重试 2D 模式」按钮。苹果设备上回退概率最高，这条尤其关键。
   ============================================================ */
.trial-screen.realtime-mode .trial2d-fallback {
  position: absolute;
  inset: 0;
  z-index: 3;
  box-sizing: border-box;
  padding: 16px;
  /* 横屏手机高度只有 ~360px，内容会超；允许面板自己滚，别把按钮挤没。
     配 flex-start + auto 边距做「安全居中」：放得下居中、放不下可滚不裁顶。 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  background: rgba(7, 7, 15, 0.96);
}

.trial-screen.realtime-mode .trial2d-fallback > :first-child { margin-top: auto; }
.trial-screen.realtime-mode .trial2d-fallback > :last-child { margin-bottom: auto; }
/* 同上：别让 flex 把内容压扁，超出交给滚动 */
.trial-screen.realtime-mode .trial2d-fallback > * { flex: 0 0 auto; }

.trial-screen.realtime-mode .trial2d-fallback-icon {
  font-size: 1.8rem;
}

.trial-screen.realtime-mode .trial2d-fallback-tip {
  max-width: 520px;
  line-height: 1.6;
}

/* 四条渲染方式各自的失败原因会拼成一段不短的文本，横屏手机高度只有 ~360px。
   给原因框一个高度上限并让它自己滚，免得把「重试 2D 模式」按钮挤出屏幕外。 */
.trial-screen.realtime-mode .trial2d-fallback-why {
  max-height: 32vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* ============================================================
   整屏浮层（启动中提示 / 回退面板）
   ------------------------------------------------------------
   上面那条只在 realtime-mode 下成立，但**回退发生时 realtime-mode 恰恰会被移除**
   （不移除的话文字界面被 display:none 压着，玩家连「退出试炼」都点不到）。
   于是面板又掉回正常流里： #trialScreen 是 position: fixed 且没有滚动条，
   面板落到可视区下方就再也够不着了 —— 玩家只看到一块黑，找不到重试按钮。
   所以给 stage 加一个显式的浮层态，由 JS 在需要时挂上（_set2DAlertOverlay）。
   ============================================================ */
.trial-screen.trial2d-alerting {
  /* 祖先带 transform 时，子级的 position: fixed 会改成相对该祖先定位，
     浮层就不再等于屏幕（还会缩掉 3%）。这里直接压掉。 */
  transform: none;
  transition: none;
  padding: 0;
}

.trial2d-stage.trial2d-stage-alert {
  position: fixed;
  inset: 0;
  z-index: 9999;
  margin: 0;
  border: none;
  border-radius: 0;
  height: 100vh;
  height: var(--trial2d-vh, 100dvh);
  box-sizing: border-box;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: #07070f;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 浮层态下画布与标题行让位：这一屏只讲「为什么没起来 / 多久能起来」 */
.trial2d-stage.trial2d-stage-alert .trial2d-stage-head,
.trial2d-stage.trial2d-stage-alert .trial2d-canvas-host {
  display: none;
}

.trial2d-stage.trial2d-stage-alert .trial2d-fallback {
  position: static;
  min-height: 100%;
  box-sizing: border-box;
  padding: 16px;
  background: transparent;
  overflow-y: auto;
  /* 安全居中：内容放得下时居中，放不下时可滚动且不会被裁掉顶端。
     直接用 justify-content: center 会有经典的 flex 溢出问题 ——
     横屏手机可视高度只有 ~360px，而这块内容（标题 + 四条失败原因 + 说明 +
     按钮 + 提示）明显更高，center 会把顶部内容推到滚动区之外，玩家永远看不到
     「本机无法启动 2D 实时战斗」和失败原因。 */
  justify-content: flex-start;
}

.trial2d-stage.trial2d-stage-alert .trial2d-fallback > :first-child { margin-top: auto; }
.trial2d-stage.trial2d-stage-alert .trial2d-fallback > :last-child { margin-bottom: auto; }
/* flex 子项默认 flex-shrink: 1，会被压缩进 360px 高的容器里 ——
   文字块被压扁后内容并不会跟着缩小，而是溢出重叠，
   横屏手机上就会看到「标题压着原因框、按钮压着提示」。
   这里全部按自然高度排布，超出部分交给容器的 overflow-y 滚动。 */
.trial2d-stage.trial2d-stage-alert .trial2d-fallback > * { flex: 0 0 auto; }

.trial2d-stage.trial2d-stage-alert .trial2d-fallback-icon {
  font-size: 1.8rem;
}

.trial2d-stage.trial2d-stage-alert .trial2d-fallback-tip {
  max-width: 520px;
  line-height: 1.6;
}

.trial2d-stage.trial2d-stage-alert .trial2d-fallback-why {
  max-height: 32vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}



/* ============================================================
   P4-4b · 面板细节与浏览器表面（2D 风格统一）
   ------------------------------------------------------------
   1) 作弊面板里原来靠内联 style 撑的布局，收成类。内联样式不参与主题、
      也压不过媒体查询，是"改了这处、漏了那处"的根源。
   2) 浏览器自己画的那几处表面（选中高亮 / 滚动条 / 插入符 / 焦点环）默认
      不属于任何设计系统。用同一套调色板把它们主题化，是"这片界面被设计过"
      最便宜、也最容易被整片跳过的一处。
   ============================================================ */
.cheat-grid-wide { grid-column: span 2; }
.cheat-inline-row {
    grid-column: span 2;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.cheat-check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    cursor: pointer;
}
.cheat-check input[type="checkbox"] { width: auto; margin: 0; }
.cheat-apply-btn.danger { background: var(--danger); }
.cheat-apply-btn.danger:hover { background: #ff7590; }

/* ===== 浏览器表面 ===== */
::selection { background: var(--accent); color: #04170f; }
::-moz-selection { background: var(--accent); color: #04170f; }
* { caret-color: var(--accent); }
/* 只用 outline：现有按钮的焦点反馈是 box-shadow，两者叠加只会更清楚，不会互相顶掉 */
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: rgba(115, 240, 180, 0.28) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(115, 240, 180, 0.22);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(115, 240, 180, 0.45); background-clip: padding-box; }

/* ============================================================
   P4-4b · 视觉令牌 + 统一收口层
   ------------------------------------------------------------
   为什么是"收口层"而不是回头去改上面那 8000 行：这份样式表是分段追加出来的，
   `.panel` 与 `.action-button` 各有两处定义（179/3220、357/3356），后者覆盖前者。
   直接改老规则必须逐处判断"有没有被后来的覆盖"，风险远高于收益；
   这里把**视觉常量**提成令牌并在末尾统一收口。

   数值的来源不是新发明的，而是与**画内面板**对齐：引擎 UI.panel = 0x0f162c、
   panelR = 18、boxR = 10、panelLineAlpha = 0.12 —— 两边本来就是同一套设计语言，
   只是之前各写各的（`:root --panel` 还是第三个值 rgba(18,24,40,.94)）。
   ============================================================ */
:root {
    --panel-modal: rgba(15, 22, 44, 0.98);   /* 模态框底（= 画内 UI.panel） */
    --panel-card: rgba(18, 24, 40, 0.74);    /* 面板内嵌卡片（= 画内 UI.box） */
    --panel-line: rgba(255, 255, 255, 0.12); /* 面板描边（= 画内 panelLineAlpha） */
    --radius-lg: 18px;                       /* 面板圆角（= 画内 panelR） */
    --radius-md: 10px;                       /* 卡片圆角（= 画内 boxR） */
    --radius-sm: 6px;                        /* 控件圆角（= 画内动作按钮的上限） */
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.32);
    --shadow-raise: 0 2px 8px rgba(0, 0, 0, 0.24);
}

/* 模态框：同底色 / 同描边 / 同圆角 / 同阴影 */
.modal-content {
    background: var(--panel-modal);
    border: 1px solid var(--panel-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
}

/* 圆角阶梯：面板 > 卡片 > 控件 */
.panel { border-radius: var(--radius-lg); }
.cheat-section { border-radius: var(--radius-md); }
.cheat-apply-btn,
.cheat-add-btn,
.action-button { border-radius: var(--radius-sm); }
.cheat-stat-item input,
.cheat-stat-item select,
input[type="number"],
input[type="text"],
textarea,
select { border-radius: var(--radius-sm); }

/* 交互反馈：抬升用同一档阴影，别每个按钮各写一个 */
.action-button:not(:disabled):hover { box-shadow: var(--shadow-raise); }
.cheat-section { box-shadow: var(--shadow-card); }

/* 空/错状态：让控件自己说清问题（craft-floor 的 states 一条） */
input:invalid:not(:placeholder-shown) { border-color: var(--danger); }
input:disabled, select:disabled, textarea:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   2D 降级提示（.trial2d-fallback-standalone）
   ------------------------------------------------------------
   与画布内那份 .trial2d-fallback（靠 .trial2d-stage-alert 铺满舞台）不同：
   这一份是**独立的 fixed 覆盖层** —— 降级时整个 #trial2DStage 都会被收起来
   （见 经典2D.js 的 showStage(false)），留在舞台里的那份会跟着一起消失，
   表现就是"提示一闪而过、根本看不见"。
   层级阶梯：画布 9000 < 这里 9500 < 模态框 114514（盖住画布但不挡弹窗）。
   横屏手机上可视高度只有 ~334px，所以用 flex-start 起步 + overflow 滚动，
   避免经典 flex 溢出把标题挤出可视区。
   ============================================================ */
.trial2d-fallback-standalone {
  position: fixed;
  inset: 0;
  z-index: 9500;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 18px;
  overflow-y: auto;
  background: rgba(4, 6, 15, 0.94);
  -webkit-overflow-scrolling: touch;
}
.trial2d-fallback-standalone.hidden { display: none; }
.trial2d-fallback-standalone > * { flex: 0 0 auto; }
.trial2d-fallback-standalone .trial2d-fallback-title { font-size: 1.1rem; }
.trial2d-fallback-standalone .trial2d-fallback-note { max-width: 480px; line-height: 1.6; }
.trial2d-fallback-standalone .trial2d-fallback-why { max-width: 480px; max-height: 30vh; overflow-y: auto; }
.trial2d-fallback-standalone .trial2d-fallback-tip { max-width: 520px; line-height: 1.6; }
.trial2d-fallback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 4px;
}
.trial2d-fallback-legacy { border-color: rgba(154, 142, 240, 0.45); color: var(--accent-purple); }
.trial2d-fallback-ghost { opacity: 0.82; }
@media (max-height: 420px) {
  .trial2d-fallback-standalone { justify-content: flex-start; gap: 7px; padding: 16px 14px; }
  .trial2d-fallback-standalone .trial2d-fallback-icon { font-size: 1.3rem; }
  .trial2d-fallback-standalone .trial2d-fallback-title { font-size: 0.98rem; }
}

/* ============================================================
   2D 画面与侧边栏共用（第 7 / 8 / 11 条）
   ============================================================ */
/* 侧边栏里的「难度」行：复用 .sidebar-cheat-btn 的底色与描边，但内部是
   「文字 + 下拉」的左右布局（button 装不下 select，所以用 label 承载）。 */
.sidebar-diff-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: default;
}
.sidebar-diff-row:hover { transform: none; }   /* 整行不是按钮，别给按下的错觉 */
.sidebar-diff-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 86px;
    padding: 4px 8px;
    font-size: 0.82rem;
    background: rgba(8, 12, 24, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--text);
    border-radius: var(--radius-sm);
}
.sidebar-diff-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 2D 实时战斗里收掉右下角的 ☰
   ------------------------------------------------------------
   它的 z-index 是 100001，本来就盖在画布（9000）之上。
   v2.8 起侧边栏的那批功能（作弊 / 通关条件 / 教程 / 图鉴 / 存档管理 / 难度 /
   切换老版）已经**画进画布内的「菜单」界面**，2D 画面不再需要这个 DOM 入口；
   ☰ 在横屏手机上还正好压住「攻击」键，所以这里收掉它。
   **侧边栏本体（.sidebar）保持不动** —— 开始界面 / 文字界面照旧用它。 */
body.classic2d .sidebar-toggle {
    display: none !important;
}

/* 互斥保险：**只要不在 2D 里，☰ 一定可见**
   ------------------------------------------------------------
   2D 画面期间它由上面那条收起来（那里的入口是画布菜单，
   因为 ☰ 固定在右下角、横屏手机上正好压住「攻击」键）。
   这条 :not() 规则是防"某条更靠后的规则意外命中导致入口彻底消失"——
   非 2D 视图里它是侧边栏唯一的入口，不该有任何丢失的可能。 */
body:not(.classic2d) .sidebar-toggle {
    display: flex !important;
}

/* 自定义难度面板在 2D 画面里也要能看见
   ------------------------------------------------------------
   它平时住在 .app-shell 里（普通文档流、z-index auto），而 2D 画布是 z-index 9000 的
   全屏层 —— 于是玩家在 2D 里把难度切到「自定义」时，面板确实被显示了（display: block），
   却**整个压在画布底下**：看不见，也就没法配置（用户反馈的"难度切换有问题"）。
   这里在 2D 期间把它提成浮层。
   ⚠️ transform 只加在面板自己身上 —— 它**不是画布的祖先**，
      所以不会触发"祖先 transform 改变 position:fixed 参照系"那个坑（规划风险 R3）。 */
body.classic2d #customDifficultyPanel {
    position: fixed;
    z-index: 9500;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(760px, 94vw);
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}