/* ================================================================
   破凡劫 · 金龙纹古风主题
   深黑底 + 金色边框/标题栏 + 白色文字 + 金色选中高亮
   适配手机竖屏 max-width:540px
   ================================================================ */

:root {
    --bg-deep: #080810;
    --bg-mid: #0e0e1c;
    --bg-card: rgba(12,12,24,0.96);
    --bg-row: rgba(18,18,36,0.8);
    --bg-row-alt: rgba(22,22,44,0.6);
    --bg-hover: rgba(40,36,60,0.5);
    --border: rgba(201,168,76,0.25);
    --border-gold: #c9a84c;
    --border-gold-dim: rgba(201,168,76,0.35);
    --gold: #c9a84c;
    --gold-bright: #e0c060;
    --gold-dark: #a88a30;
    --gold-glow: rgba(201,168,76,0.15);
    --jade: #5dde7e;
    --crimson: #e05555;
    --azure: #5da8e0;
    --purple: #a078d0;
    --text: #e8e0d0;
    --text-dim: rgba(200,190,170,0.55);
    --text-dark: #1a1400;
    --radius: 4px;
    --radius-sm: 3px;
    --font-cn: "STKaiti","KaiTi","楷体","华文楷体","PingFang SC","Microsoft YaHei",serif;
}

/* ===== 全局基础 ===== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { width:100%; height:100%; overflow:hidden; background:var(--bg-deep); color:var(--text); font-family:var(--font-cn); font-size:13px; line-height:1.5; }
#app { position:relative; width:100%; height:100%; max-width:540px; margin:0 auto; overflow:hidden; background:var(--bg-deep); }

/* ===== 通用面板卡片 ===== */
.g-panel {
    background: var(--bg-card);
    border: 1.5px solid var(--border-gold);
    border-radius: var(--radius);
    margin-bottom: 8px;
    overflow: hidden;
}
.g-panel-head {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: var(--text-dark);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 6px 12px;
    text-align: center;
    font-family: var(--font-cn);
}
.g-panel-body {
    padding: 8px 10px;
}

/* ===== 通用按钮 ===== */
.g-btn {
    display: inline-block;
    padding: 7px 14px;
    border: 1.5px solid var(--border-gold);
    border-radius: var(--radius-sm);
    background: var(--bg-row);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    text-align: center;
    font-family: var(--font-cn);
    transition: all 0.15s;
    -webkit-user-select: none;
    user-select: none;
}
.g-btn:active { transform: scale(0.96); }
.g-btn-gold {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border-color: var(--gold-dark);
    color: var(--text-dark);
    font-weight: 700;
}
.g-btn-gold:active { background: var(--gold-dark); }
.g-btn-sm {
    padding: 4px 10px;
    font-size: 11px;
}

/* ===== 通用标签 ===== */
.g-tag {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--border-gold-dim);
    border-radius: 2px;
    background: var(--bg-row);
    color: var(--text-dim);
    font-size: 11px;
    font-family: var(--font-cn);
}
.g-tag-gold { color: var(--gold); border-color: var(--gold); background: var(--gold-glow); }
.g-tag-green { color: var(--jade); border-color: rgba(93,222,126,0.4); background: rgba(93,222,126,0.08); }
.g-tag-red { color: var(--crimson); border-color: rgba(224,85,85,0.4); background: rgba(224,85,85,0.08); }

/* ===== 通用进度条 ===== */
.g-bar-track {
    position: relative;
    height: 18px;
    background: var(--bg-row);
    border: 1px solid var(--border-gold-dim);
    border-radius: 9px;
    overflow: hidden;
}
.g-bar-fill {
    height: 100%;
    border-radius: 8px;
    transition: width 0.4s ease;
}
.g-bar-fill-gold {
    background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-bright));
}
.g-bar-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    font-size: 10px;
    font-weight: 700;
    color: var(--text);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    white-space: nowrap;
    font-family: var(--font-cn);
}

/* ===== 通用列表项 ===== */
.g-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(201,168,76,0.08);
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.g-list-item:active { background: var(--bg-hover); }
.g-list-item.active {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: var(--text-dark);
    font-weight: 700;
}

/* ===== 顶部状态栏 ===== */
#top-bar {
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    padding: 0;
    background: rgba(8,8,16,0.96);
    border-bottom: 1.5px solid var(--border-gold);
}
.top-row-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
}
.top-realm-badge {
    display: flex;
    align-items: center;
    gap: 6px;
}
.realm-badge-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--border-gold);
    background: var(--bg-row);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--gold);
}
.realm-badge-text {
    display: flex;
    flex-direction: column;
}
.realm-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 1px;
    font-family: var(--font-cn);
}
.realm-layer, #player-layer {
    font-size: 10px;
    color: var(--text-dim);
}
.top-right-icons {
    display: flex;
    gap: 4px;
}
.top-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-gold-dim);
    background: var(--bg-row);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--gold);
    cursor: pointer;
}
.top-icon-btn:active { background: var(--bg-hover); }
.top-exp-bar-wrap {
    padding: 0 10px 6px;
}
.top-exp-bar {
    height: 8px;
    background: var(--bg-row);
    border-radius: 4px;
    border: 1px solid var(--border-gold-dim);
    overflow: hidden;
}
.top-exp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold));
    border-radius: 3px;
    transition: width 0.4s;
}
.top-exp-info {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 2px;
}
.exp-num { color: var(--gold); font-weight: 600; }
.eta-time { color: var(--text-dim); }

/* ===== 底部导航栏 ===== */
#bottom-nav {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 20;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 2px 4px 6px;
    background: rgba(8,8,16,0.97);
    border-top: 1.5px solid var(--border-gold);
    height: 50px;
}
.nav-btn {
    min-width: 44px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 2px 4px;
    cursor: pointer;
    font-family: var(--font-cn);
    position: relative;
    letter-spacing: 1px;
}
.nav-btn .nav-icon {
    font-size: 16px;
    line-height: 1;
    color: var(--text-dim);
}
.nav-btn.active {
    color: var(--gold);
}
.nav-btn.active .nav-icon {
    color: var(--gold);
}
.nav-btn.active::after {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 2px;
    background: var(--gold);
    border-radius: 1px;
}
.nav-btn:active { transform: scale(0.9); }
.nav-center-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--border-gold);
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(201,168,76,0.3);
    transition: 0.15s;
    margin-top: -14px;
    flex-shrink: 0;
}
.center-btn-icon {
    font-size: 16px;
    color: var(--text-dark);
    line-height: 1;
}
.center-btn-label {
    font-size: 8px;
    color: var(--text-dark);
    font-weight: 700;
    font-family: var(--font-cn);
}
.nav-center-btn:active { transform: scale(0.9); }
.red-dot {
    position: absolute;
    top: 2px; right: 6px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--crimson);
}

/* ===== 修炼页 ===== */
.pf-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-gold);
    border-radius: var(--radius);
    margin-bottom: 8px;
    position: relative;
}
.pf-hero::before {
    content: '';
    position: absolute;
    top: 3px; left: 3px; right: 3px; bottom: 3px;
    border: 1px solid rgba(201,168,76,0.15);
    border-radius: 2px;
    pointer-events: none;
}
.pf-hero-power { text-align: center; min-width: 64px; }
.pf-power-label { font-size: 9px; color: var(--text-dim); letter-spacing: 2px; }
.pf-power-val {
    font-size: 22px;
    font-weight: 800;
    color: var(--gold);
    font-family: var(--font-cn);
    animation: pf-pulse 2.5s ease-in-out infinite;
}
@keyframes pf-pulse {
    0%,100% { text-shadow: 0 0 2px rgba(201,168,76,0.2); }
    50% { text-shadow: 0 0 10px rgba(201,168,76,0.5); }
}
.pf-hero-center { flex: 1; text-align: center; }
.pf-realm-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    font-family: var(--font-cn);
    letter-spacing: 3px;
}
.pf-realm-layer { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.pf-hero-btns { display: flex; flex-direction: column; gap: 5px; }
.pf-btn {
    padding: 7px 16px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    text-align: center;
    border: 1.5px solid;
    font-family: var(--font-cn);
    transition: all 0.15s;
}
.pf-btn-gold {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border-color: var(--gold-dark);
    color: var(--text-dark);
}
.pf-btn-gold:active { background: var(--gold-dark); transform: scale(0.96); }
.pf-btn-dark {
    background: var(--bg-row);
    border-color: var(--border-gold);
    color: var(--text);
}
.pf-btn-dark:active { background: var(--bg-hover); transform: scale(0.96); }
.pf-btn-xs { padding: 4px 10px; font-size: 10px; }

/* 修为进度条 */
.pf-progress-main { margin-bottom: 8px; padding: 0 2px; }
.pf-progress-bar {
    position: relative;
    height: 20px;
    background: var(--bg-row);
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid var(--border-gold);
}
.pf-progress-fill { height: 100%; border-radius: 8px; transition: width 0.4s ease; }
.pf-fill-gold {
    background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-bright));
    box-shadow: 0 0 6px rgba(201,168,76,0.3);
}
.pf-progress-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    font-size: 10px;
    font-weight: 700;
    color: var(--text);
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    white-space: nowrap;
    font-family: var(--font-cn);
}
.pf-progress-sub {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 3px;
    padding: 0 4px;
}
.pf-em-green { color: var(--jade); font-style: normal; font-weight: 600; }

/* 属性4格 */
.pf-attr-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 0 2px;
    margin-bottom: 6px;
}
.pf-attr-item {
    text-align: center;
    padding: 8px 2px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-gold-dim);
}
.pf-attr-label { display: block; font-size: 9px; color: var(--text-dim); margin-bottom: 2px; letter-spacing: 1px; }
.pf-attr-val { display: block; font-size: 15px; font-weight: 700; color: var(--text); font-family: var(--font-cn); }

/* 状态行 */
.pf-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    padding: 6px 2px;
    margin-bottom: 6px;
}
.pf-tag {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 2px;
    background: var(--bg-row);
    color: var(--text-dim);
    border: 1px solid var(--border-gold-dim);
    font-family: var(--font-cn);
}
.pf-tag-green { color: var(--jade); border-color: rgba(93,222,126,0.35); }
.pf-tag-red { color: var(--crimson); border-color: rgba(224,85,85,0.35); }
.pf-tag-gold { color: var(--gold); border-color: var(--border-gold); }
.pf-tag-btn { cursor: pointer; color: var(--azure); border-color: rgba(93,168,224,0.35); }
.pf-tag-btn:active { background: var(--bg-hover); }

/* 快捷入口 */
.pf-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 0 2px;
    margin-bottom: 8px;
}
.pf-shortcut {
    text-align: center;
    padding: 10px 2px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-gold-dim);
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-cn);
    letter-spacing: 1px;
}
.pf-shortcut:active {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: var(--text-dark);
    border-color: var(--gold-dark);
    transform: scale(0.95);
}

/* 装备行 */
.pf-equip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    padding: 8px 8px;
    margin-bottom: 6px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-gold-dim);
}
.pf-equip-label { font-size: 11px; font-weight: 700; color: var(--gold); margin-right: 2px; }
.pf-equip-slot {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--bg-row);
    border-radius: 2px;
    color: var(--text-dim);
    border: 1px solid rgba(201,168,76,0.15);
}

/* 聊天折叠 */
.pf-chat-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 6px;
    font-size: 11px;
    color: var(--text-dim);
    cursor: pointer;
    border-top: 1px solid var(--border-gold-dim);
    margin-top: 2px;
}
.pf-chat-toggle:active { color: var(--gold); }
.pf-card {
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-gold-dim);
    padding: 8px;
    margin: 0 2px 8px;
}

/* ===== 子Tab导航 ===== */
.sub-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1.5px solid var(--border-gold);
    margin-bottom: 8px;
    background: rgba(8,8,16,0.6);
}
.sub-tab {
    flex: 1;
    text-align: center;
    padding: 7px 4px;
    font-size: 12px;
    color: var(--text-dim);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-family: var(--font-cn);
    letter-spacing: 1px;
    transition: all 0.15s;
}
.sub-tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
    font-weight: 700;
}
.sub-tab:active { color: var(--gold); }

/* ===== 通用卡片 ===== */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-gold-dim);
    border-radius: var(--radius);
    padding: 10px;
    margin-bottom: 8px;
}
.card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(201,168,76,0.12);
    font-family: var(--font-cn);
    letter-spacing: 1px;
}
.card-desc { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; line-height: 1.6; }
.card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* ===== 通用按钮覆盖 ===== */
.btn {
    display: inline-block;
    padding: 7px 14px;
    border: 1.5px solid var(--border-gold);
    border-radius: var(--radius-sm);
    background: var(--bg-row);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    text-align: center;
    font-family: var(--font-cn);
    transition: all 0.15s;
}
.btn:active { transform: scale(0.96); }
.btn-primary, .btn-neon-gold {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border-color: var(--gold-dark);
    color: var(--text-dark);
    font-weight: 700;
}
.btn-primary:active, .btn-neon-gold:active { background: var(--gold-dark); }
.btn-secondary {
    background: var(--bg-row);
    border-color: var(--border-gold);
    color: var(--text);
}
.btn-success {
    background: rgba(93,222,126,0.12);
    border-color: rgba(93,222,126,0.4);
    color: var(--jade);
}
.btn-small { padding: 4px 10px; font-size: 11px; }

/* ===== 仙途页图标网格 ===== */
.immortal-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--gold);
    padding: 8px 4px 4px;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(201,168,76,0.1);
    margin-bottom: 6px;
}
.icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 0 2px;
    margin-bottom: 10px;
}
.icon-tile {
    text-align: center;
    padding: 10px 2px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-gold-dim);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
}
.icon-tile:active {
    background: var(--bg-hover);
    border-color: var(--border-gold);
}
.tile-icon {
    width: 32px;
    height: 32px;
    margin: 0 auto 4px;
    border-radius: 50%;
    border: 1.5px solid var(--border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: var(--bg-row);
}
.tile-icon.tile-gold { border-color: var(--gold); color: var(--gold); }
.tile-icon.tile-orange { border-color: #d4843c; color: #d4843c; }
.tile-icon.tile-red { border-color: var(--crimson); color: var(--crimson); }
.tile-icon.tile-brown { border-color: #a08060; color: #a08060; }
.tile-icon.tile-purple { border-color: var(--purple); color: var(--purple); }
.tile-icon.tile-green { border-color: var(--jade); color: var(--jade); }
.tile-icon.tile-blue { border-color: var(--azure); color: var(--azure); }
.tile-name { font-size: 11px; font-weight: 700; color: var(--text); font-family: var(--font-cn); letter-spacing: 1px; }
.tile-sub { font-size: 9px; color: var(--text-dim); }

/* ===== 背包页 ===== */
.bag-stats-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-gold-dim);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    font-size: 11px;
    color: var(--text-dim);
}
.bag-count { color: var(--gold); font-weight: 700; }
.bag-actions { display: flex; gap: 4px; }
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 11px;
    color: var(--text-dim);
}

/* ===== 面板头部 ===== */
.panel-header-neon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    margin-bottom: 8px;
    border-bottom: 1.5px solid var(--border-gold);
}
.panel-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 2px;
    font-family: var(--font-cn);
}

/* ===== 角色面板 ===== */
#character-panel {
    background: var(--bg-deep) !important;
}
.char-back-btn {
    padding: 5px 12px;
    border: 1.5px solid var(--border-gold);
    border-radius: var(--radius-sm);
    background: var(--bg-row);
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
    font-family: var(--font-cn);
}

/* ===== 药田面板 ===== */
.farm-info-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-gold-dim);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--text-dim);
}
.farm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

/* ===== stat-row / grid 覆盖 ===== */
.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 12px;
    color: var(--text-dim);
    border-bottom: 1px solid rgba(201,168,76,0.06);
}
.grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 6px 0;
}
.grid-cell {
    background: var(--bg-row);
    border: 1px solid var(--border-gold-dim);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    text-align: center;
}
.cell-info { }
.cell-label { font-size: 10px; color: var(--text-dim); }
.cell-val { font-size: 14px; font-weight: 700; color: var(--text); }

/* ===== 隐藏旧元素 ===== */
.todo-strip { display: none !important; }
#idle-sidebar { display: none !important; }
#game-log { display: none !important; }

/* ===== 暗色提示区 ===== */
.dark-notice {
    background: var(--bg-row);
    border: 1px solid var(--border-gold-dim);
    border-radius: var(--radius-sm);
    padding: 8px;
    margin: 6px 0;
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.6;
}

/* ===== 输入框 ===== */
input[type="text"], input[type="password"], input[type="number"], textarea, select {
    background: var(--bg-row);
    border: 1px solid var(--border-gold-dim);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 6px 8px;
    font-size: 12px;
    font-family: var(--font-cn);
    outline: none;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--border-gold);
}

/* ===== 弹窗/模态 ===== */
.farm-modal {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}
.farm-modal-content {
    background: var(--bg-card);
    border: 1.5px solid var(--border-gold);
    border-radius: var(--radius);
    padding: 12px;
    width: 90%;
    max-width: 340px;
    max-height: 80vh;
    overflow-y: auto;
}
.farm-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-gold-dim);
}

/* ===== 药田网格 ===== */
.farm-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

/* ===== sub-page ===== */
.sub-page { display: none; }
.sub-page.active { display: block; }

/* ===== 隐藏类 ===== */
.hidden { display: none !important; }

/* ===== 手机竖屏适配 ===== */
@media (max-width: 360px) {
    .pf-attr-grid { gap: 4px; }
    .pf-attr-val { font-size: 13px; }
    .pf-shortcut-grid { gap: 4px; }
    .pf-shortcut { padding: 8px 2px; font-size: 11px; }
    .icon-grid { gap: 4px; }
    .tile-name { font-size: 10px; }
    .nav-btn { min-width: 38px; font-size: 9px; }
    .nav-btn .nav-icon { font-size: 14px; }
    .nav-center-btn { width: 40px; height: 40px; margin-top: -10px; }
}


/* ===== 确保深色背景不透出 ===== */
#game-screen {
    background: var(--bg-deep) !important;
}
#game-content {
    background: transparent !important;
}
.tab-page {
    background: transparent;
}
.tab-page.active {
    background: transparent;
}
.scene-bg {
    background-color: var(--bg-deep) !important;
}
.scene-bg.bg-cultivate,
.scene-bg.bg-adventure,
.scene-bg.bg-bag,
.scene-bg.bg-immortal,
.scene-bg.bg-default {
    background-color: var(--bg-deep) !important;
}
/* 确保所有面板背景深色 */
.bg-panel-farm,
.bg-panel-enhance {
    background: var(--bg-deep) !important;
}

/* ================================================================
   破凡劫 · 金色龙纹卷草边框
   纯CSS实现，无图片，无JS
   四角卷草纹样 + 按钮三态 + 面板装饰
   ================================================================ */

:root {
    --dragon-border-color: var(--gold);
    --dragon-border-width: 1.5px;
    --dragon-glow-color: rgba(212,168,67,0.3);
    --dragon-pattern-opacity: 0.5;
    --dragon-pattern-scale: 1;
    --dragon-corner-size: 18px;
}

/* ===== 龙纹装饰基类 ===== */
.dragon-border { position: relative; }

.dragon-border::before,
.dragon-border::after {
    content: '';
    position: absolute;
    pointer-events: none;
    opacity: var(--dragon-pattern-opacity);
    z-index: 1;
}

/* ::before = 左上角 + 右下角 */
.dragon-border::before {
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image:
        radial-gradient(ellipse 12px 8px at 4px 4px, var(--dragon-border-color) 0%, transparent 70%),
        radial-gradient(ellipse 6px 10px at 10px 2px, var(--dragon-border-color) 0%, transparent 65%),
        radial-gradient(circle 2px at 6px 8px, var(--dragon-border-color) 0%, transparent 100%),
        radial-gradient(ellipse 12px 8px at calc(100% - 4px) calc(100% - 4px), var(--dragon-border-color) 0%, transparent 70%),
        radial-gradient(ellipse 6px 10px at calc(100% - 10px) calc(100% - 2px), var(--dragon-border-color) 0%, transparent 65%),
        radial-gradient(circle 2px at calc(100% - 6px) calc(100% - 8px), var(--dragon-border-color) 0%, transparent 100%);
    background-size: var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size);
    background-position: 0 0, 0 0, 0 0, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
}

/* ::after = 右上角 + 左下角 */
.dragon-border::after {
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image:
        radial-gradient(ellipse 12px 8px at calc(100% - 4px) 4px, var(--dragon-border-color) 0%, transparent 70%),
        radial-gradient(ellipse 6px 10px at calc(100% - 10px) 2px, var(--dragon-border-color) 0%, transparent 65%),
        radial-gradient(circle 2px at calc(100% - 6px) 8px, var(--dragon-border-color) 0%, transparent 100%),
        radial-gradient(ellipse 12px 8px at 4px calc(100% - 4px), var(--dragon-border-color) 0%, transparent 70%),
        radial-gradient(ellipse 6px 10px at 10px calc(100% - 2px), var(--dragon-border-color) 0%, transparent 65%),
        radial-gradient(circle 2px at 6px calc(100% - 8px), var(--dragon-border-color) 0%, transparent 100%);
    background-size: var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size);
    background-position: 100% 0, 100% 0, 100% 0, 0 100%, 0 100%, 0 100%;
    background-repeat: no-repeat;
}

/* ===== 按钮龙纹 ===== */
.btn, .g-btn, .pf-btn, .char-back-btn {
    position: relative;
    --dragon-border-color: var(--border-gold);
    --dragon-pattern-opacity: 0.5;
    --dragon-corner-size: 14px;
}
.btn::before, .btn::after,
.g-btn::before, .g-btn::after,
.pf-btn::before, .pf-btn::after,
.char-back-btn::before, .char-back-btn::after {
    content: '';
    position: absolute;
    pointer-events: none;
    opacity: var(--dragon-pattern-opacity);
    z-index: 1;
}
.btn::before, .g-btn::before, .pf-btn::before, .char-back-btn::before {
    top: 0; left: 0; width: 100%; height: 100%;
    background-image:
        radial-gradient(ellipse 10px 7px at 3px 3px, var(--dragon-border-color) 0%, transparent 70%),
        radial-gradient(ellipse 5px 8px at 8px 1px, var(--dragon-border-color) 0%, transparent 65%),
        radial-gradient(circle 1.5px at 5px 6px, var(--dragon-border-color) 0%, transparent 100%),
        radial-gradient(ellipse 10px 7px at calc(100% - 3px) calc(100% - 3px), var(--dragon-border-color) 0%, transparent 70%),
        radial-gradient(ellipse 5px 8px at calc(100% - 8px) calc(100% - 1px), var(--dragon-border-color) 0%, transparent 65%),
        radial-gradient(circle 1.5px at calc(100% - 5px) calc(100% - 6px), var(--dragon-border-color) 0%, transparent 100%);
    background-size: var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size);
    background-position: 0 0, 0 0, 0 0, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
}
.btn::after, .g-btn::after, .pf-btn::after, .char-back-btn::after {
    top: 0; left: 0; width: 100%; height: 100%;
    background-image:
        radial-gradient(ellipse 10px 7px at calc(100% - 3px) 3px, var(--dragon-border-color) 0%, transparent 70%),
        radial-gradient(ellipse 5px 8px at calc(100% - 8px) 1px, var(--dragon-border-color) 0%, transparent 65%),
        radial-gradient(circle 1.5px at calc(100% - 5px) 6px, var(--dragon-border-color) 0%, transparent 100%),
        radial-gradient(ellipse 10px 7px at 3px calc(100% - 3px), var(--dragon-border-color) 0%, transparent 70%),
        radial-gradient(ellipse 5px 8px at 8px calc(100% - 1px), var(--dragon-border-color) 0%, transparent 65%),
        radial-gradient(circle 1.5px at 5px calc(100% - 6px), var(--dragon-border-color) 0%, transparent 100%);
    background-size: var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size);
    background-position: 100% 0, 100% 0, 100% 0, 0 100%, 0 100%, 0 100%;
    background-repeat: no-repeat;
}

/* 主按钮龙纹(亮金) */
.btn-primary, .btn-neon-gold, .btn-gold, .g-btn-gold, .pf-btn-gold {
    --dragon-border-color: var(--gold-bright);
    --dragon-pattern-opacity: 0.6;
}

/* 次按钮龙纹(暗金) */
.btn-secondary, .pf-btn-dark {
    --dragon-border-color: var(--gold-dark);
    --dragon-pattern-opacity: 0.35;
}

/* 危险按钮龙纹(赤金) */
.btn-danger {
    --dragon-border-color: var(--gold);
    --dragon-pattern-opacity: 0.3;
    border-color: rgba(224,85,85,0.4);
}

/* 成功按钮龙纹(翠金) */
.btn-success {
    --dragon-border-color: var(--gold);
    --dragon-pattern-opacity: 0.3;
}

/* 小按钮龙纹缩小 */
.btn-small, .g-btn-sm, .pf-btn-xs {
    --dragon-corner-size: 10px;
    --dragon-pattern-opacity: 0.4;
}

/* ===== 按钮三态 ===== */
.btn:hover, .g-btn:hover, .pf-btn:hover, .char-back-btn:hover {
    box-shadow: 0 0 8px var(--dragon-glow-color);
    --dragon-pattern-opacity: 0.8;
}
.btn-primary:hover, .btn-neon-gold:hover, .btn-gold:hover, .g-btn-gold:hover, .pf-btn-gold:hover {
    box-shadow: 0 0 12px rgba(224,192,96,0.35);
    --dragon-pattern-opacity: 0.9;
}
.btn:active, .g-btn:active, .pf-btn:active, .char-back-btn:active {
    --dragon-pattern-opacity: 0.4;
    filter: brightness(0.85);
}
.btn:disabled, .g-btn:disabled, .pf-btn:disabled {
    --dragon-pattern-opacity: 0.2;
    opacity: 0.4;
}

/* ===== 面板/卡片龙纹 ===== */
.card, .g-panel, .pf-card, .pf-hero, .pf-attr-item, .pf-shortcut, .icon-tile {
    position: relative;
    --dragon-border-color: var(--border-gold);
    --dragon-pattern-opacity: 0.45;
    --dragon-corner-size: 16px;
}
.card::before, .card::after,
.g-panel::before, .g-panel::after,
.pf-card::before, .pf-card::after,
.pf-hero::before, .pf-hero::after,
.pf-attr-item::before, .pf-attr-item::after,
.pf-shortcut::before, .pf-shortcut::after,
.icon-tile::before, .icon-tile::after {
    content: '';
    position: absolute;
    pointer-events: none;
    opacity: var(--dragon-pattern-opacity);
    z-index: 1;
}
.card::before, .g-panel::before, .pf-card::before, .pf-attr-item::before, .pf-shortcut::before, .icon-tile::before {
    top: 0; left: 0; width: 100%; height: 100%;
    background-image:
        radial-gradient(ellipse 12px 8px at 4px 4px, var(--dragon-border-color) 0%, transparent 70%),
        radial-gradient(ellipse 6px 10px at 10px 2px, var(--dragon-border-color) 0%, transparent 65%),
        radial-gradient(circle 2px at 6px 8px, var(--dragon-border-color) 0%, transparent 100%),
        radial-gradient(ellipse 12px 8px at calc(100% - 4px) calc(100% - 4px), var(--dragon-border-color) 0%, transparent 70%),
        radial-gradient(ellipse 6px 10px at calc(100% - 10px) calc(100% - 2px), var(--dragon-border-color) 0%, transparent 65%),
        radial-gradient(circle 2px at calc(100% - 6px) calc(100% - 8px), var(--dragon-border-color) 0%, transparent 100%);
    background-size: var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size);
    background-position: 0 0, 0 0, 0 0, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
}
.card::after, .g-panel::after, .pf-card::after, .pf-attr-item::after, .pf-shortcut::after, .icon-tile::after {
    top: 0; left: 0; width: 100%; height: 100%;
    background-image:
        radial-gradient(ellipse 12px 8px at calc(100% - 4px) 4px, var(--dragon-border-color) 0%, transparent 70%),
        radial-gradient(ellipse 6px 10px at calc(100% - 10px) 2px, var(--dragon-border-color) 0%, transparent 65%),
        radial-gradient(circle 2px at calc(100% - 6px) 8px, var(--dragon-border-color) 0%, transparent 100%),
        radial-gradient(ellipse 12px 8px at 4px calc(100% - 4px), var(--dragon-border-color) 0%, transparent 70%),
        radial-gradient(ellipse 6px 10px at 10px calc(100% - 2px), var(--dragon-border-color) 0%, transparent 65%),
        radial-gradient(circle 2px at 6px calc(100% - 8px), var(--dragon-border-color) 0%, transparent 100%);
    background-size: var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size);
    background-position: 100% 0, 100% 0, 100% 0, 0 100%, 0 100%, 0 100%;
    background-repeat: no-repeat;
}

/* pf-hero 伪元素覆盖：用box-shadow替代原有::before内框 */
.pf-hero::before {
    background-image: none !important;
    box-shadow: inset 0 0 0 1px rgba(201,168,76,0.15);
    border-radius: 2px;
    top: 3px; left: 3px; right: 3px; bottom: 3px;
    width: auto; height: auto;
    opacity: 1;
}

/* ===== 弹窗/模态龙纹 ===== */
.farm-modal-content, .xx-modal {
    position: relative;
    --dragon-border-color: var(--gold);
    --dragon-pattern-opacity: 0.55;
    --dragon-corner-size: 20px;
}
.farm-modal-content::before, .farm-modal-content::after,
.xx-modal::before, .xx-modal::after {
    content: '';
    position: absolute;
    pointer-events: none;
    opacity: var(--dragon-pattern-opacity);
    z-index: 1;
}
.farm-modal-content::before, .xx-modal::before {
    top: 0; left: 0; width: 100%; height: 100%;
    background-image:
        radial-gradient(ellipse 14px 10px at 5px 5px, var(--dragon-border-color) 0%, transparent 70%),
        radial-gradient(ellipse 8px 12px at 12px 2px, var(--dragon-border-color) 0%, transparent 65%),
        radial-gradient(circle 2.5px at 7px 10px, var(--dragon-border-color) 0%, transparent 100%),
        radial-gradient(ellipse 14px 10px at calc(100% - 5px) calc(100% - 5px), var(--dragon-border-color) 0%, transparent 70%),
        radial-gradient(ellipse 8px 12px at calc(100% - 12px) calc(100% - 2px), var(--dragon-border-color) 0%, transparent 65%),
        radial-gradient(circle 2.5px at calc(100% - 7px) calc(100% - 10px), var(--dragon-border-color) 0%, transparent 100%);
    background-size: var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size);
    background-position: 0 0, 0 0, 0 0, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
}
.farm-modal-content::after, .xx-modal::after {
    top: 0; left: 0; width: 100%; height: 100%;
    background-image:
        radial-gradient(ellipse 14px 10px at calc(100% - 5px) 5px, var(--dragon-border-color) 0%, transparent 70%),
        radial-gradient(ellipse 8px 12px at calc(100% - 12px) 2px, var(--dragon-border-color) 0%, transparent 65%),
        radial-gradient(circle 2.5px at calc(100% - 7px) 10px, var(--dragon-border-color) 0%, transparent 100%),
        radial-gradient(ellipse 14px 10px at 5px calc(100% - 5px), var(--dragon-border-color) 0%, transparent 70%),
        radial-gradient(ellipse 8px 12px at 12px calc(100% - 2px), var(--dragon-border-color) 0%, transparent 65%),
        radial-gradient(circle 2.5px at 7px calc(100% - 10px), var(--dragon-border-color) 0%, transparent 100%);
    background-size: var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size);
    background-position: 100% 0, 100% 0, 100% 0, 0 100%, 0 100%, 0 100%;
    background-repeat: no-repeat;
}

/* ===== 行内弹窗龙纹 ===== */
#item-detail-modal, #breakthrough-modal, #dark-sell-modal,
#auction-bid-modal, #tutorial-overlay, #offline-reward-modal {
    position: relative;
    border: 1.5px solid var(--border-gold) !important;
    --dragon-border-color: var(--gold);
    --dragon-pattern-opacity: 0.5;
    --dragon-corner-size: 18px;
}

/* ===== 开始界面按钮龙纹 ===== */
.btn-start-main, .btn-start-secondary, .server-card {
    position: relative;
    --dragon-corner-size: 16px;
}
.btn-start-main::before, .btn-start-main::after,
.btn-start-secondary::before, .btn-start-secondary::after,
.server-card::before, .server-card::after {
    content: '';
    position: absolute;
    pointer-events: none;
    opacity: var(--dragon-pattern-opacity);
    z-index: 1;
}
.btn-start-main {
    --dragon-border-color: var(--gold-bright);
    --dragon-pattern-opacity: 0.6;
}
.btn-start-secondary {
    --dragon-border-color: var(--gold-dark);
    --dragon-pattern-opacity: 0.35;
}
.server-card {
    --dragon-border-color: var(--border-gold);
    --dragon-pattern-opacity: 0.5;
}
.btn-start-main::before, .btn-start-secondary::before, .server-card::before {
    top: 0; left: 0; width: 100%; height: 100%;
    background-image:
        radial-gradient(ellipse 12px 8px at 4px 4px, var(--dragon-border-color) 0%, transparent 70%),
        radial-gradient(ellipse 6px 10px at 10px 2px, var(--dragon-border-color) 0%, transparent 65%),
        radial-gradient(circle 2px at 6px 8px, var(--dragon-border-color) 0%, transparent 100%),
        radial-gradient(ellipse 12px 8px at calc(100% - 4px) calc(100% - 4px), var(--dragon-border-color) 0%, transparent 70%),
        radial-gradient(ellipse 6px 10px at calc(100% - 10px) calc(100% - 2px), var(--dragon-border-color) 0%, transparent 65%),
        radial-gradient(circle 2px at calc(100% - 6px) calc(100% - 8px), var(--dragon-border-color) 0%, transparent 100%);
    background-size: var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size);
    background-position: 0 0, 0 0, 0 0, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
}
.btn-start-main::after, .btn-start-secondary::after, .server-card::after {
    top: 0; left: 0; width: 100%; height: 100%;
    background-image:
        radial-gradient(ellipse 12px 8px at calc(100% - 4px) 4px, var(--dragon-border-color) 0%, transparent 70%),
        radial-gradient(ellipse 6px 10px at calc(100% - 10px) 2px, var(--dragon-border-color) 0%, transparent 65%),
        radial-gradient(circle 2px at calc(100% - 6px) 8px, var(--dragon-border-color) 0%, transparent 100%),
        radial-gradient(ellipse 12px 8px at 4px calc(100% - 4px), var(--dragon-border-color) 0%, transparent 70%),
        radial-gradient(ellipse 6px 10px at 10px calc(100% - 2px), var(--dragon-border-color) 0%, transparent 65%),
        radial-gradient(circle 2px at 6px calc(100% - 8px), var(--dragon-border-color) 0%, transparent 100%);
    background-size: var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size), var(--dragon-corner-size) var(--dragon-corner-size);
    background-position: 100% 0, 100% 0, 100% 0, 0 100%, 0 100%, 0 100%;
    background-repeat: no-repeat;
}
.btn-start-main:hover {
    box-shadow: 0 0 12px rgba(224,192,96,0.35);
    --dragon-pattern-opacity: 0.9;
}
.btn-start-secondary:hover {
    box-shadow: 0 0 8px var(--dragon-glow-color);
    --dragon-pattern-opacity: 0.6;
}
.btn-start-main:active {
    --dragon-pattern-opacity: 0.4;
    filter: brightness(0.85);
}
.btn-start-secondary:active {
    --dragon-pattern-opacity: 0.25;
    filter: brightness(0.9);
}
.server-card:hover {
    --dragon-pattern-opacity: 0.7;
}

/* ===== 面板标题栏龙纹装饰线 ===== */
.g-panel-head::after {
    content: '';
    position: absolute;
    bottom: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    pointer-events: none;
}

/* ===== 宗门面板龙纹 ===== */
#newclan-panel {
    --dragon-border-color: var(--gold);
    --dragon-pattern-opacity: 0.4;
}

/* ===== 降级方案 ===== */
@supports not (background-image: radial-gradient(circle, red, blue)) {
    .btn::before, .btn::after,
    .g-btn::before, .g-btn::after,
    .pf-btn::before, .pf-btn::after,
    .card::before, .card::after,
    .g-panel::before, .g-panel::after,
    .farm-modal-content::before, .farm-modal-content::after,
    .btn-start-main::before, .btn-start-main::after,
    .btn-start-secondary::before, .btn-start-secondary::after,
    .server-card::before, .server-card::after {
        display: none;
    }
}