/**
 * 洞府系统样式 v1 — 古卷丹青风格
 * 设计理念：宣纸为底，浓墨为骨，朱砂为魂，泥金为韵
 */

/* ===== 通用头部 ===== */
.cave-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ink) 90%, transparent), color-mix(in srgb, var(--ink) 90%, transparent));
    border-bottom: 1px solid var(--gold-foil-dim);
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
}
.cave-header h2 {
    font-size: 18px;
    color: var(--gold-foil);
    margin: 0;
    flex: 1;
    text-align: center;
}
.cave-crystal {
    color: var(--gold-foil-light);
    font-size: 15px;
    font-weight: 600;
    background: color-mix(in srgb, var(--gold-foil) 5%, transparent);
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid var(--gold-foil-dim);
}

/* ===== 洞府主页卡片 ===== */
.cave-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
}
.cave-card {
    background: linear-gradient(145deg, color-mix(in srgb, var(--ink) 60%, transparent), color-mix(in srgb, var(--ink) 80%, transparent));
    border: 1px solid var(--gold-foil-dim);
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.cave-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 50% 0%, var(--gold-foil-dim), transparent 70%);
    pointer-events: none;
}
.cave-card:active {
    transform: scale(0.97);
    border-color: color-mix(in srgb, var(--gold-foil) 50%, transparent);
}
.cave-card-icon {
    font-size: 36px;
    margin-bottom: 6px;
}
.cave-card-name {
    font-size: 16px;
    color: var(--gold-foil);
    font-weight: 600;
    margin-bottom: 4px;
}
.cave-card-info {
    font-size: 12px;
    color: var(--paper-muted);
}

/* ===== 区域标题 ===== */
.cave-section-title {
    padding: 10px 12px 6px;
    font-size: 14px;
    color: var(--paper-muted);
    border-top: 1px solid var(--gold-foil-dim);
    margin-top: 8px;
}

/* ===== 灵田网格 ===== */
.cave-liquid-bar {
    text-align: center;
    margin-bottom: 10px;
}
.cave-liquid-btn {
    background: linear-gradient(145deg, var(--jade-glow), color-mix(in srgb, var(--jade) 30%, transparent));
    border: 1px solid color-mix(in srgb, var(--jade) 40%, transparent);
    color: var(--jade);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}
.cave-liquid-btn:active { transform: scale(0.95); }

.cave-farm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px;
}
.cave-farm-slot {
    /* 兜底：旧内核浏览器（aspect-ratio 需 88+）最小高度防塌陷 */
    min-height: 90px;
    aspect-ratio: 1;
    /* 兜底：旧内核浏览器（不支持 color-mix）田格底色 */
    background: linear-gradient(145deg, var(--ink-border), var(--ink-surface));
    /* 增强：现代浏览器半透明底色 */
    background: linear-gradient(145deg, color-mix(in srgb, var(--ink) 40%, transparent), color-mix(in srgb, var(--ink) 60%, transparent));
    border: 1px solid var(--jade-glow);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.cave-farm-slot:active { transform: scale(0.95); }
.cave-farm-slot.empty {
    background: linear-gradient(145deg, var(--ink-surface), color-mix(in srgb, var(--ink) 60%, transparent));
    border-color: var(--gold-foil-dim);
}
.cave-farm-slot.growing {
    background: linear-gradient(145deg, color-mix(in srgb, var(--ink) 50%, transparent), color-mix(in srgb, var(--ink) 70%, transparent));
    border-color: var(--jade-glow);
}
.cave-farm-slot.mature {
    background: linear-gradient(145deg, color-mix(in srgb, var(--ink) 50%, transparent), color-mix(in srgb, var(--ink) 70%, transparent));
    border-color: color-mix(in srgb, var(--gold-foil) 40%, transparent);
    animation: farm-mature-glow 2s ease-in-out infinite;
}
.cave-farm-slot.locked {
    background: color-mix(in srgb, var(--ink) 50%, transparent);
    border-color: color-mix(in srgb, var(--paper-muted) 20%, transparent);
    opacity: 0.6;
}
@keyframes farm-mature-glow {
    0%, 100% { box-shadow: 0 0 5px var(--gold-foil-dim); }
    50% { box-shadow: 0 0 15px color-mix(in srgb, var(--gold-foil) 40%, transparent); }
}
.cave-farm-icon { font-size: 26px; }
.cave-farm-name { font-size: 13px; font-weight: 600; margin-top: 2px; color: var(--paper); }
.cave-farm-status { font-size: 11px; color: var(--paper-muted); margin-top: 2px; }
.cave-farm-time { font-size: 11px; color: var(--gold-foil); }

/* ===== 种子/蛋列表 ===== */
.cave-seed-list, .cave-egg-list {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    overflow-x: auto;
    flex-wrap: wrap;
}
.cave-seed-item, .cave-egg-item {
    background: color-mix(in srgb, var(--ink) 60%, transparent);
    border: 1px solid var(--gold-foil-dim);
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 80px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.cave-seed-item:active, .cave-egg-item:active { transform: scale(0.95); }
.cave-seed-name, .cave-egg-name { font-size: 13px; color: var(--gold-foil); }
.cave-seed-qty, .cave-egg-qty { font-size: 12px; color: var(--paper-muted); }

/* ===== 矿脉网格 ===== */
.cave-mine-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 10px;
}
.cave-mine-slot {
    background: linear-gradient(145deg, color-mix(in srgb, var(--ink) 50%, transparent), color-mix(in srgb, var(--ink) 70%, transparent));
    border: 1px solid color-mix(in srgb, var(--gold-foil) 20%, transparent);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s;
    min-height: 80px;
}
.cave-mine-slot:active { transform: scale(0.97); }
.cave-mine-slot.ready { border-color: color-mix(in srgb, var(--gold-foil) 40%, transparent); }
.cave-mine-slot.locked { opacity: 0.5; }
.cave-mine-name { font-size: 14px; color: var(--gold-foil); font-weight: 600; }
.cave-mine-status { font-size: 12px; color: var(--paper-muted); margin-top: 4px; }

/* ===== 傀儡列表 ===== */
.cave-golem-list {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    flex-wrap: wrap;
}
.cave-golem-item {
    background: color-mix(in srgb, var(--ink) 60%, transparent);
    border: 1px solid var(--gold-foil-dim);
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 100px;
    font-size: 13px;
}
.cave-golem-item.working { border-color: color-mix(in srgb, var(--jade) 40%, transparent); }
.cave-golem-name { color: var(--gold-foil); font-weight: 600; }
.cave-golem-info { color: var(--paper-muted); font-size: 12px; }

/* ===== 配方列表（炼器/炼丹） ===== */
.cave-recipe-list {
    padding: 10px 12px;
}
.cave-recipe-card {
    background: linear-gradient(145deg, color-mix(in srgb, var(--ink) 50%, transparent), color-mix(in srgb, var(--ink) 70%, transparent));
    border: 1px solid var(--gold-foil-dim);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
}
.cave-recipe-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.cave-recipe-name { font-size: 15px; color: var(--gold-foil); font-weight: 600; }
.cave-recipe-rate {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 8px;
    background: var(--gold-foil-dim);
    color: var(--gold-foil);
}
.cave-recipe-materials {
    font-size: 13px;
    color: var(--paper-muted);
    margin-bottom: 8px;
}
.cave-recipe-material {
    display: inline-block;
    background: color-mix(in srgb, var(--gold-foil) 5%, transparent);
    padding: 2px 8px;
    border-radius: 6px;
    margin: 2px 4px 2px 0;
}
.cave-recipe-btn {
    width: 100%;
    padding: 8px;
    background: linear-gradient(135deg, var(--gold-foil), var(--gold-foil));
    color: var(--ink);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.cave-recipe-btn:active { transform: scale(0.98); }
.cave-recipe-btn:disabled {
    background: color-mix(in srgb, var(--paper-muted) 30%, transparent);
    color: var(--paper-muted);
    cursor: not-allowed;
}

/* ===== 灵兽园网格 ===== */
.cave-beast-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 10px;
}
.cave-beast-slot {
    /* 兜底：旧内核浏览器（aspect-ratio 需 88+）最小高度防塌陷 */
    min-height: 110px;
    aspect-ratio: 1.2;
    /* 兜底：旧内核浏览器（不支持 color-mix）兽栏底色 */
    background: linear-gradient(145deg, var(--ink-border), var(--ink-surface));
    /* 增强：现代浏览器半透明底色 */
    background: linear-gradient(145deg, color-mix(in srgb, var(--ink) 50%, transparent), color-mix(in srgb, var(--ink) 70%, transparent));
    border: 1px solid var(--gold-foil-dim);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}
.cave-beast-slot:active { transform: scale(0.97); }
.cave-beast-slot.hatching {
    border-color: var(--jade-glow);
    background: linear-gradient(145deg, color-mix(in srgb, var(--ink) 50%, transparent), color-mix(in srgb, var(--ink) 70%, transparent));
}
.cave-beast-slot.ready {
    border-color: color-mix(in srgb, var(--gold-foil) 40%, transparent);
    animation: farm-mature-glow 2s ease-in-out infinite;
}
.cave-beast-slot.locked { opacity: 0.5; }
.cave-beast-icon { font-size: 30px; }
.cave-beast-status { font-size: 12px; color: var(--paper-muted); margin-top: 4px; }
.cave-beast-time { font-size: 11px; color: var(--gold-foil); }

/* ===== 模态选择器 ===== */
.cave-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: color-mix(in srgb, var(--ink) 70%, transparent);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cave-modal-content {
    background: linear-gradient(145deg, color-mix(in srgb, var(--ink) 95%, transparent), color-mix(in srgb, var(--ink) 95%, transparent));
    border: 1px solid var(--gold-foil-dim);
    border-radius: 14px;
    padding: 16px;
    width: 100%;
    max-width: 360px;
    max-height: 80vh;
    overflow-y: auto;
}
.cave-modal-title {
    font-size: 16px;
    color: var(--gold-foil);
    font-weight: 600;
    margin-bottom: 12px;
    text-align: center;
}
.cave-modal-option {
    background: color-mix(in srgb, var(--gold-foil) 5%, transparent);
    border: 1px solid var(--gold-foil-dim);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.cave-modal-option:active { transform: scale(0.98); border-color: color-mix(in srgb, var(--gold-foil) 40%, transparent); }
.cave-modal-option-name { font-size: 14px; color: var(--gold-foil); font-weight: 600; }
.cave-modal-option-info { font-size: 12px; color: var(--paper-muted); margin-top: 2px; }
.cave-modal-close {
    width: 100%;
    padding: 8px;
    background: color-mix(in srgb, var(--paper-muted) 30%, transparent);
    color: var(--paper-secondary);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 8px;
    cursor: pointer;
}

/* ===== 倒计时通用 ===== */
.cave-countdown {
    font-size: 11px;
    color: var(--vermillion);
}

/* ===== 炼丹/炼器房布局（左丹药+右境界） ===== */
.pill-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.pill-content {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
}
.pill-realm-list {
    width: 84px;
    background: color-mix(in srgb, var(--ink) 60%, transparent);
    border-left: 1px solid var(--gold-foil-dim);
    overflow-y: auto;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}
.pill-realm-item {
    padding: 9px 4px;
    text-align: center;
    font-size: 13px;
    color: var(--paper-muted);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    border: 1px solid transparent;
    white-space: nowrap;
    width: 100%;
}
.pill-realm-item.active {
    background: var(--gold-foil-dim);
    color: var(--gold-foil);
    border-color: color-mix(in srgb, var(--gold-foil) 40%, transparent);
}
.pill-realm-item.locked {
    color: var(--paper-muted);
    opacity: 0.5;
}
.pill-realm-item.current {
    position: relative;
}
.pill-realm-item.current::before {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 5px;
    height: 5px;
    background: var(--jade);
    border-radius: 50%;
}
/* 丹药卡片 */
.pill-card {
    background: linear-gradient(145deg, color-mix(in srgb, var(--ink) 50%, transparent), color-mix(in srgb, var(--ink) 70%, transparent));
    border: 1px solid var(--gold-foil-dim);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
}
.pill-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    gap: 8px;
}
.pill-card-info {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.pill-card-name {
    font-size: 15px;
    color: var(--gold-foil);
    font-weight: 600;
}
.pill-card-type {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--gold-foil-dim);
    color: var(--gold-foil);
}
.pill-card-type.breakthrough {
    background: color-mix(in srgb, var(--gold-foil) 15%, transparent);
    color: var(--vermillion-light);
}
.pill-card-type.cultivation {
    background: color-mix(in srgb, var(--jade) 15%, transparent);
    color: var(--jade);
}
.pill-card-type.hp {
    background: var(--vermillion-glow);
    color: var(--vermillion);
}
.pill-card-type.spirit {
    background: color-mix(in srgb, var(--jade) 15%, transparent);
    color: var(--jade);
}
.pill-card-type.weapon {
    background: var(--vermillion-glow);
    color: var(--vermillion);
}
.pill-card-type.armor {
    background: color-mix(in srgb, var(--jade) 15%, transparent);
    color: var(--jade);
}
.pill-card-type.helmet {
    background: rgba(0, 188, 212, 0.15);
    color: #00bcd4;
}
.pill-card-type.chest {
    background: color-mix(in srgb, var(--jade) 15%, transparent);
    color: var(--jade);
}
.pill-card-type.ring {
    background: rgba(156, 39, 176, 0.15);
    color: #9c27b0;
}
.pill-card-type.boots {
    background: color-mix(in srgb, var(--gold-foil) 15%, transparent);
    color: var(--vermillion-light);
}
.pill-card-realm-req {
    font-size: 11px;
    color: var(--vermillion);
    margin-left: 4px;
}
/* 丹药卡片材料行 */
.pill-card-mats {
    padding: 6px 0 2px 0;
    border-top: 1px solid var(--gold-foil-dim);
    margin-top: 4px;
}
.pill-mat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    padding: 1px 0;
    line-height: 1.6;
}
.pill-mat-name {
    color: var(--paper-secondary);
    flex: 1;
}
.pill-mat-need {
    color: var(--gold-foil);
    margin: 0 6px;
}
.pill-mat-have {
    min-width: 36px;
    text-align: right;
    font-weight: 500;
}
.pill-card-rate {
    color: var(--paper-muted);
    margin-left: 4px;
}
.pill-card-desc {
    font-size: 11px;
    color: var(--paper-muted);
    line-height: 1.4;
    padding: 2px 0;
}
.pill-card-btn {
    padding: 5px 12px;
    background: linear-gradient(135deg, var(--gold-foil), var(--gold-foil));
    color: var(--ink);
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
}
.pill-card-btn:active { transform: scale(0.95); }
.pill-card-btn:disabled {
    background: color-mix(in srgb, var(--paper-muted) 30%, transparent);
    color: var(--paper-muted);
    cursor: not-allowed;
}
.pill-empty {
    text-align: center;
    color: var(--paper-muted);
    padding: 40px 20px;
    font-size: 14px;
}

/* ===== 炼器/炼丹面板（共用样式） ===== */
.craft-overlay, .pill-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: color-mix(in srgb, var(--ink) 70%, transparent);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.pill-craft-modal, .craft-modal {
    background: linear-gradient(145deg, var(--ink-elevated), var(--ink));
    border: 1px solid var(--gold-foil-dim);
    border-radius: 12px;
    padding: 15px;
    width: 100%;
    max-width: 380px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px color-mix(in srgb, var(--ink) 50%, transparent);
}
.pcm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.pcm-title {
    font-size: 17px;
    color: var(--gold-foil);
    font-weight: 600;
}
.pcm-close {
    background: none;
    border: none;
    color: var(--paper-muted);
    font-size: 24px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.pcm-close:hover { color: var(--vermillion); }
.pcm-realm {
    font-size: 13px;
    color: var(--paper-muted);
    margin-bottom: 10px;
}
.pcm-section-title {
    font-size: 13px;
    color: var(--paper-muted);
    margin: 8px 0 4px;
    border-bottom: 1px solid var(--gold-foil-dim);
    padding-bottom: 2px;
}
.pcm-materials { margin-bottom: 6px; }
.pc-mat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--gold-foil) 3%, transparent);
    border-radius: 6px;
    margin-bottom: 3px;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
}
.pc-mat-row:hover { background: var(--gold-foil-dim); }
.pc-mat-row.active { border-color: var(--gold-foil); background: var(--gold-foil-dim); }
.pc-mat-name { font-size: 14px; color: var(--paper-secondary); }
.pc-mat-qty { font-size: 12px; color: var(--paper-muted); }
.pc-mat-qty.ok { color: var(--jade); }
.pcm-selected { margin-bottom: 6px; }
.pc-selected-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--gold-foil) 4%, transparent);
    border-radius: 4px;
    margin-bottom: 4px;
    font-size: 13px;
}
.pc-sel-name { color: var(--paper-secondary); flex: 1; }
.pc-sel-quality { font-size: 11px; padding: 1px 5px; border-radius: 3px; }
.pc-sel-qty { color: var(--paper-muted); }
.pc-sel-remove {
    padding: 2px 8px;
    background: var(--vermillion-glow);
    color: var(--vermillion);
    border: 1px solid var(--vermillion-glow);
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
}
.pc-sel-remove:active { background: color-mix(in srgb, var(--vermillion) 35%, transparent); }
.pc-selected-empty { font-size: 13px; color: var(--paper-muted); text-align: center; padding: 8px; }
.pc-quality-area {
    background: color-mix(in srgb, var(--ink) 20%, transparent);
    border-radius: 8px;
    padding: 8px;
    margin: 6px 0;
}
.pc-quality-title { font-size: 12px; color: var(--paper-muted); margin-bottom: 6px; }
.pc-quality-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--gold-foil) 3%, transparent);
}
.pc-quality-row:last-child { border-bottom: none; }
.pc-q-name { font-size: 13px; min-width: 50px; }
.pc-q-have { font-size: 12px; color: var(--paper-muted); flex: 1; }
.pc-q-ctrl { display: flex; align-items: center; gap: 6px; }
.pc-q-ctrl button {
    width: 24px; height: 24px;
    border: 1px solid var(--gold-foil-dim);
    background: var(--gold-foil-dim);
    color: var(--gold-foil);
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
    line-height: 1;
}
.pc-q-ctrl button:disabled { opacity: 0.3; cursor: not-allowed; }
.pc-q-ctrl button:not(:disabled):active { background: var(--gold-foil-dim); }
.pc-q-sel { font-size: 14px; color: var(--paper-secondary); min-width: 20px; text-align: center; }
.pc-q-done {
    width: 100%;
    padding: 6px;
    margin-top: 6px;
    background: var(--gold-foil-dim);
    color: var(--gold-foil);
    border: 1px solid var(--gold-foil-dim);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}
.pc-q-done:active { background: var(--gold-foil-dim); }
.pc-quality-empty { font-size: 13px; color: var(--paper-muted); text-align: center; padding: 8px; }
.pc-rate-preview {
    text-align: center;
    font-size: 14px;
    color: var(--paper-muted);
    padding: 6px;
    margin: 6px 0;
    background: color-mix(in srgb, var(--jade) 5%, transparent);
    border-radius: 6px;
}
.pcm-buttons {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}
.pcm-btn {
    flex: 1;
    padding: 8px 4px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.pcm-btn:active { transform: scale(0.97); }
.pcm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pcm-btn.random { background: var(--jade-glow); color: var(--jade); border: 1px solid var(--jade-glow); }
.pcm-btn.random-low { background: color-mix(in srgb, var(--gold-foil) 20%, transparent); color: var(--gold-foil); border: 1px solid var(--gold-foil-dim); }
.pcm-btn.manual { background: rgba(156, 39, 176, 0.2); color: #9c27b0; border: 1px solid rgba(156, 39, 176, 0.3); }
.pcm-btn.craft { background: linear-gradient(135deg, var(--gold-foil), var(--gold-foil)); color: var(--ink); }
.pcm-btn.random:not(:disabled):active { background: color-mix(in srgb, var(--jade) 40%, transparent); }
.pcm-btn.random-low:not(:disabled):active { background: color-mix(in srgb, var(--gold-foil) 40%, transparent); }
.pcm-btn.manual:not(:disabled):active { background: rgba(156, 39, 176, 0.4); }

/* 品质颜色 q1~q6 */
.q1 { color: #999; background: color-mix(in srgb, var(--paper) 10%, transparent); }
.q2 { color: #ccc; background: color-mix(in srgb, var(--paper) 10%, transparent); }
.q3 { color: var(--jade); background: color-mix(in srgb, var(--jade) 10%, transparent); }
.q4 { color: #2196f3; background: rgba(33,150,243,0.1); }
.q5 { color: #9c27b0; background: rgba(156,39,176,0.1); }
.q6 { color: var(--vermillion-light); background: color-mix(in srgb, var(--gold-foil) 10%, transparent); }

/* ============================================================
 *  洞府主页 v2 — 古卷丹青版
 *  布局：顶部头部 + 标题行 + 主内容容器（墨迹边框）+ 底部导航
 * ============================================================ */

#page-cave {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow: hidden;
}

.cave-content-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 10px 4px;
}

.cave-top-resource {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    margin-left: 6px;
}
.cave-res-item {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
}
.cave-res-label {
    color: var(--paper-muted);
}
.cave-res-val {
    color: var(--gold-foil);
    font-weight: 600;
    font-size: 13px;
}

.cave-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px;
    flex-shrink: 0;
}
.cave-page-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--gold-foil-light);
    letter-spacing: 3px;
}
.cave-title-resources {
    display: flex;
    gap: 12px;
}
.cave-title-res {
    font-size: 13px;
    color: var(--paper-muted);
}
.cave-title-res b {
    color: var(--gold-foil);
    font-weight: 600;
    font-size: 14px;
    margin-left: 2px;
}

/* 打坐人物模块 */
.cave-meditate-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0 8px;
}
.cave-meditate-figure {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 8px;
    border-radius: 50%;
    overflow: hidden;
    animation: cave-meditate-breathe 4s ease-in-out infinite;
}
.cave-meditate-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
    filter: brightness(1.05) saturate(0.9) contrast(1.05);
}
.cave-meditate-fade {
    position: absolute;
    /* 兜底：旧内核浏览器（inset 需 87+）四向定位 */
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    /* 兜底：旧内核浏览器（不支持 color-mix）暗角 */
    background: radial-gradient(
        circle at 50% 45%,
        transparent 0%,
        transparent 45%,
        var(--ink-border) 70%,
        var(--ink) 88%,
        var(--ink) 100%
    );
    /* 增强：现代浏览器层次暗角 */
    background: radial-gradient(
        circle at 50% 45%,
        transparent 0%,
        transparent 45%,
        color-mix(in srgb, var(--ink) 25%, transparent) 70%,
        color-mix(in srgb, var(--ink) 70%, transparent) 88%,
        color-mix(in srgb, var(--ink) 95%, transparent) 100%
    );
}
.cave-meditate-figure::after {
    content: '';
    position: absolute;
    /* 兜底：旧内核浏览器（inset 需 87+）四向定位 */
    top: -6px; right: -6px; bottom: -6px; left: -6px;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid var(--gold-foil-dim);
    pointer-events: none;
    box-shadow: 0 0 20px var(--gold-foil-dim);
}
@keyframes cave-meditate-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}
.cave-meditate-progress-wrap {
    width: 88%;
    position: relative;
}
.cave-meditate-track {
    width: 100%;
    height: 22px;
    background: color-mix(in srgb, var(--ink) 60%, transparent);
    border-radius: 11px;
    overflow: hidden;
    border: 1px solid var(--gold-foil-dim);
    box-shadow: inset 0 1px 3px var(--shadow);
}
.cave-meditate-fill {
    height: 100%;
    background: linear-gradient(90deg, color-mix(in srgb, var(--gold-foil) 60%, transparent), rgba(220, 192, 144, 0.85));
    border-radius: 11px;
    transition: width 0.5s ease;
    box-shadow: 0 0 8px var(--gold-foil-dim);
}
.cave-meditate-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    color: var(--gold-foil-light);
    font-weight: 600;
    text-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 80%, transparent);
    white-space: nowrap;
    pointer-events: none;
}
/* ===== 聚灵阵阵法基座样式 ===== */
.sa-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    margin: 4px 0;
    border: 1px solid var(--gold-foil-dim);
    border-radius: 10px;
    background: color-mix(in srgb, var(--ink) 30%, transparent);
    gap: 12px;
}
.sa-level-section {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.sa-level-label {
    font-size: 12px;
    color: var(--paper-muted);
}
.sa-level-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--gold-foil-light);
    text-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 60%, transparent);
}
.sa-btn-upgrade {
    padding: 4px 12px;
    border: 1px solid var(--gold-foil-glow);
    border-radius: 6px;
    background: var(--gold-foil-dim);
    color: var(--gold-foil-light);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
.sa-btn-upgrade:hover { background: var(--gold-foil-glow); }
.sa-btn-upgrade:disabled { opacity: 0.4; cursor: default; }

.sa-restore-section {
    display: flex;
    gap: 12px;
}
.sa-restore-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.sa-r-label {
    font-size: 10px;
    color: var(--paper-muted);
}
.sa-r-val {
    font-size: 12px;
    color: var(--jade);
    font-weight: 600;
}

/* 状态条 */
.sa-status-bar {
    padding: 10px 14px;
    margin: 6px 0;
    border: 1px solid var(--gold-foil-dim);
    border-radius: 10px;
    background: color-mix(in srgb, var(--ink) 20%, transparent);
}
.sa-stat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.sa-stat-row:last-child { margin-bottom: 0; }
.sa-stat-label {
    width: 36px;
    font-size: 12px;
    color: var(--paper-muted);
    flex-shrink: 0;
}
.sa-stat-track {
    flex: 1;
    height: 14px;
    background: color-mix(in srgb, var(--ink) 60%, transparent);
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid var(--gold-foil-dim);
}
.sa-stat-fill {
    height: 100%;
    border-radius: 7px;
    transition: width 0.5s ease;
}
.sa-stat-fill-hp {
    background: linear-gradient(90deg, color-mix(in srgb, var(--vermillion) 70%, transparent), rgba(220, 120, 80, 0.9));
}
.sa-stat-fill-spirit {
    background: linear-gradient(90deg, rgba(80, 140, 220, 0.7), rgba(80, 180, 220, 0.9));
}
.sa-stat-val {
    width: 70px;
    font-size: 11px;
    color: var(--gold-foil-light);
    text-align: right;
    flex-shrink: 0;
}

/* 渡劫提示飞字 */
.breakthrough-float-pop {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    padding: 10px 16px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--ink) 80%, transparent);
    color: var(--vermillion);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
    word-break: break-word;
    overflow-wrap: anywhere;
    text-shadow: 0 0 5px color-mix(in srgb, var(--ink) 50%, transparent);
    pointer-events: none;
    z-index: 99999;
    white-space: normal;
    display: block;
    opacity: 0;
}
@keyframes breakthroughPop {
    0% { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -150px); }
}

/* 恢复飞字 */
.sa-restore-pop {
    position: fixed;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    padding: 6px 12px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--ink) 70%, transparent);
    color: var(--jade);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
    word-break: break-word;
    overflow-wrap: anywhere;
    pointer-events: none;
    z-index: 9999;
    white-space: normal;
}
@keyframes saRestorePop {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-40px); }
}

/* 槽位区域 */
.sa-slots-section {
    margin: 8px 0;
}
.sa-slots-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gold-foil);
    margin-bottom: 8px;
    padding-left: 2px;
}
.sa-slots-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 槽位卡片 */
.sa-slot {
    padding: 12px 14px;
    border: 1px solid var(--gold-foil-dim);
    border-radius: 10px;
    background: color-mix(in srgb, var(--ink) 30%, transparent);
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sa-slot-locked {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0.5;
}
.sa-slot-lock-icon { font-size: 18px; }
.sa-slot-lock-text {
    font-size: 12px;
    color: var(--paper-muted);
}
.sa-slot-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    border-style: dashed;
    border-color: var(--gold-foil-glow);
    transition: 0.2s;
}
.sa-slot-empty:hover {
    background: var(--gold-foil-dim);
    border-color: color-mix(in srgb, var(--gold-foil) 40%, transparent);
}
.sa-slot-empty-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px dashed color-mix(in srgb, var(--gold-foil) 40%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--gold-foil);
}
.sa-slot-empty-text {
    font-size: 13px;
    color: var(--paper-muted);
}

/* 已装配槽位 */
.sa-slot-active {}
.sa-slot-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.sa-slot-icon { font-size: 16px; }
.sa-slot-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--gold-foil-light);
}
.sa-slot-lv {
    font-size: 12px;
    color: var(--gold-foil);
    border: 1px solid var(--gold-foil-dim);
    border-radius: 10px;
    padding: 1px 8px;
    background: var(--gold-foil-dim);
}
.sa-slot-effect {
    font-size: 12px;
    color: var(--jade);
    margin-bottom: 6px;
}
.sa-slot-actions {
    display: flex;
    gap: 8px;
}
.sa-slot-btn {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid;
    transition: 0.2s;
}
.sa-slot-btn-upgrade {
    background: var(--gold-foil-dim);
    color: var(--gold-foil-light);
    border-color: var(--gold-foil-dim);
}
.sa-slot-btn-upgrade:hover { background: var(--gold-foil-dim); }
.sa-slot-btn-upgrade:disabled { opacity: 0.4; cursor: default; }
.sa-slot-btn-change {
    background: transparent;
    color: var(--paper-muted);
    border-color: color-mix(in srgb, var(--gold-foil) 30%, transparent);
}
.sa-slot-btn-change:hover { color: var(--gold-foil); border-color: color-mix(in srgb, var(--gold-foil) 40%, transparent); }

/* 阵法选择弹窗列表 */
.sa-form-select-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sa-form-select-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--gold-foil-dim);
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}
.sa-form-select-item:hover {
    background: var(--gold-foil-dim);
    border-color: var(--gold-foil-dim);
}
.sa-form-select-icon { font-size: 22px; flex-shrink: 0; }
.sa-form-select-info { flex: 1; }
.sa-form-select-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--gold-foil-light);
    margin-bottom: 2px;
}
.sa-form-select-desc {
    font-size: 11px;
    color: var(--paper-muted);
}

/* 双按钮行 */
.cave-action-row {
    display: flex;
    gap: 8px;
    margin: 6px 0 10px;
}
.cave-action-btn {
    flex: 1;
    padding: 12px 0;
    border: 1px solid var(--gold-foil-glow);
    border-radius: 4px;
    background: linear-gradient(180deg, var(--gold-foil-dim), rgba(80, 60, 30, 0.3));
    box-shadow:
        inset 0 1px 0 rgba(220, 192, 144, 0.3),
        inset 0 -3px 5px var(--shadow),
        0 3px 6px var(--shadow);
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 700;
    background-clip: padding-box;
    color: var(--gold-foil-light);
    letter-spacing: 3px;
    text-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 90%, transparent), 0 0 1px color-mix(in srgb, var(--gold-foil) 50%, transparent);
    cursor: pointer;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}
.cave-action-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(220, 192, 144, 0.4), transparent);
}
.cave-action-btn:active {
    transform: scale(0.97);
    background: linear-gradient(180deg, color-mix(in srgb, var(--gold-foil) 28%, transparent), rgba(60, 45, 22, 0.4));
    box-shadow:
        inset 0 2px 6px color-mix(in srgb, var(--ink) 60%, transparent),
        inset 0 0 12px var(--gold-foil-dim),
        0 1px 3px color-mix(in srgb, var(--ink) 30%, transparent);
    border-color: color-mix(in srgb, var(--gold-foil) 60%, transparent);
    color: var(--gold-foil-light);
    text-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 90%, transparent), 0 0 6px rgba(220, 192, 144, 0.5);
}

/* 六个建筑功能按钮（两列三行） */
.cave-building-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.cave-building-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 6px;
    border: 1px solid var(--gold-foil-dim);
    border-radius: 3px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 85%, transparent), color-mix(in srgb, var(--ink) 92%, transparent));
    box-shadow:
        inset 0 1px 0 var(--gold-foil-dim),
        inset 0 -2px 4px color-mix(in srgb, var(--ink) 60%, transparent),
        0 2px 5px color-mix(in srgb, var(--ink) 35%, transparent);
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    min-height: 44px;
}
.cave-building-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--gold-foil) 7%, transparent), transparent);
    pointer-events: none;
}
.cave-building-btn::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-foil-glow), transparent);
}
.cave-building-btn:active {
    transform: scale(0.97);
    border-color: color-mix(in srgb, var(--gold-foil) 55%, transparent);
    box-shadow:
        inset 0 2px 5px color-mix(in srgb, var(--ink) 70%, transparent),
        inset 0 0 10px var(--gold-foil-dim),
        0 1px 3px var(--shadow);
}
.cave-building-name {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 700;
    background: linear-gradient(180deg, #f8e8c0 0%, #e0bc70 50%, #b88840 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 5px;
    text-indent: 5px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--ink) 90%, transparent));
    transition: filter 0.3s;
}
.cave-building-btn:active .cave-building-name {
    filter: drop-shadow(0 0 4px rgba(220, 192, 144, 0.5)) drop-shadow(0 1px 2px color-mix(in srgb, var(--ink) 90%, transparent));
}

/* 四个小功能按钮 */
.cave-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}
.cave-mini-btn {
    padding: 8px 0;
    border: 1px solid var(--gold-foil-dim);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ink) 50%, transparent);
    color: var(--paper-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.cave-mini-btn:active {
    transform: scale(0.95);
    background: var(--gold-foil-dim);
    border-color: var(--gold-foil-dim);
    color: var(--gold-foil);
}

.cave-bottom-nav {
    /* 无特殊样式，继承全局 .bottom-nav 固定定位 */
}