* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg-deep: #0a0a18;
    --bg-dark: #0f1029;
    --bg-panel: #181a35;
    --bg-panel-light: #22254a;
    --bg-glass: rgba(24, 26, 53, 0.85);
    --border: #3d4070;
    --border-gold: #c9a24e;
    --text: #e8e6f0;
    --text-bright: #ffffff;
    --text-dim: #9b9bc0;
    --primary: #d4a853;
    --primary-light: #f0d080;
    --primary-dark: #9a7530;
    --accent: #6ea8fe;
    --accent-light: #9ecbff;
    --success: #7dd87d;
    --warning: #ffc166;
    --danger: #ff6b6b;
    --pink: #ff8fab;
    --purple: #b18aff;
    --gold: #f0d080;
    --positive: #7dd87d;
    --bg-elevated: #22254a;
    --text-light: #ffffff;
    --heart: #ff8fab;
    --dx: 0px;
    --dy: -60px;
    --gold-glow: 0 0 12px rgba(212, 168, 83, 0.5);
    --blue-glow: 0 0 12px rgba(110, 168, 254, 0.4);
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: var(--bg-deep);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        radial-gradient(ellipse at 20% 0%, rgba(110, 168, 254, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(212, 168, 83, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(177, 138, 255, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

#app {
    height: 100%;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-deep) 100%);
    box-shadow: 0 0 60px rgba(0,0,0,0.5);
}

/* ============ 顶部状态栏 ============ */
.top-bar {
    background: linear-gradient(180deg, rgba(34, 37, 74, 0.98) 0%, rgba(24, 26, 53, 0.95) 100%);
    padding: 8px 12px 8px 10px;
    border-bottom: 1px solid var(--border-gold);
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 70;
    overflow: visible;
    backdrop-filter: blur(10px);
}

.top-bar::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-light), transparent);
}

.player-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    background: linear-gradient(135deg, var(--bg-panel-light), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: var(--gold-glow);
    overflow: hidden;
}

.player-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-info {
    flex: 1.2;
    min-width: 0;
}

.player-name {
    font-size: 11px;
    font-weight: bold;
    color: var(--primary-light);
    text-shadow: 0 0 8px rgba(240, 208, 128, 0.3);
    line-height: 1.2;
}

.player-realm {
    color: var(--accent-light);
    font-size: 11px;
    margin-top: 2px;
}

.player-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.2;
}

.player-meta .res-age {
    color: #b0bec5;
    font-size: 10px;
}

.player-meta .res-time {
    color: var(--accent);
    font-size: 10px;
}

.player-stats {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.stat-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.stat-label {
    font-size: 9px;
    color: var(--text-dim);
    display: flex;
    justify-content: space-between;
    line-height: 1.2;
}

.stat-bar {
    height: 5px;
    background: rgba(0,0,0,0.4);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.stat-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    will-change: width;
}

.stat-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
    border-radius: 3px 3px 0 0;
}

.stat-fill.hp { 
    background: linear-gradient(90deg, #ff5252, #ff8a80); 
    box-shadow: 0 0 6px rgba(255, 82, 82, 0.5);
}
.stat-fill.qi { 
    background: linear-gradient(90deg, #448aff, #82b1ff); 
    box-shadow: 0 0 6px rgba(68, 138, 255, 0.5);
}
.stat-fill.progress { 
    background: linear-gradient(90deg, var(--primary-dark), var(--primary-light)); 
    box-shadow: 0 0 6px rgba(212, 168, 83, 0.5);
}
.stat-fill.gold { 
    background: linear-gradient(90deg, #ffb300, var(--primary-light)); 
    box-shadow: 0 0 6px rgba(255, 179, 0, 0.5);
}

.resources {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    align-self: stretch;
    z-index: 80;
}
.resource-summary-btn {
    width: 30px;
    height: 48px;
    min-height: 48px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 3px;
    border: 1px solid rgba(214, 168, 79, .34);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(42, 49, 74, .96), rgba(18, 24, 40, .98));
    color: #e8dfc8;
    box-shadow: inset 0 1px 0 rgba(244,216,137,.11), 0 3px 10px rgba(0,0,0,.16);
    cursor: pointer;
    font: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}
.resource-summary-label {
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0;
    line-height: 1;
}
.resource-summary-btn:hover, .resources.is-open .resource-summary-btn { border-color: rgba(244,216,137,.72); color: #fff5d6; }
.resource-summary-btn:active { transform: translateY(1px); }
.resource-summary-icon, .resource-detail-icon { display: inline-flex; align-items: center; justify-content: center; }
.resource-summary-icon .plaque-svg { width: 13px; height: 13px; color: #f4d889; filter: drop-shadow(0 0 4px rgba(244,216,137,.38)); }
.resource-summary-chevron { color: #b9ae93; font-size: 12px; line-height: 1; transition: transform .18s ease; }
.resources.is-open .resource-summary-chevron { transform: rotate(180deg); }
.resource-details {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    width: min(208px, calc(100vw - 18px));
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    border: 1px solid rgba(214,168,79,.46);
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(40,48,73,.98), rgba(13,18,31,.99));
    z-index: 90;
    box-shadow: 0 12px 28px rgba(0,0,0,.52), inset 0 1px 0 rgba(244,216,137,.10);
}
.resource-details[hidden] { display: none; }
.resource-detail-item {
    width: 100%;
    min-height: 45px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    color: var(--text);
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.resource-detail-item:hover { border-color: rgba(244,216,137,.42); background: rgba(214,168,79,.09); }
.resource-detail-item:active { transform: translateY(1px); }
.resource-detail-icon { width: 24px; height: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(0,0,0,.16); }
.resource-detail-icon .plaque-svg { width: 14px; height: 14px; }
.resource-detail-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.resource-detail-copy small { color: var(--text-dim); font-size: 9px; font-weight: 600; letter-spacing: .04em; }
.resource-detail-copy > span { font-size: 11px; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.resource-detail-action { flex: 0 0 auto; color: #bdb49d; font-size: 10px; white-space: nowrap; }
.resource-detail-item.res-stones { color: var(--text); }
.resource-detail-item.res-stones .resource-detail-icon .plaque-svg { color: #f4d889; }
.resource-detail-item.res-mind .resource-detail-icon .plaque-svg { color: #63c7b2; }
.resource-detail-item.res-points .resource-detail-icon .plaque-svg { color: #82b8e8; }
.res-stones .stone-grade { display: inline-block; font-size: inherit; font-weight: inherit; line-height: inherit; text-shadow: 0 0 7px currentColor; }
.res-stones .stone-divider { color: rgba(220,212,191,.52); font-size: 9px; line-height: 1; }
.res-stones .stone-grade-xia { color: #9bcf9a; }
.res-stones .stone-grade-zhong { color: #83c7e8; }
.res-stones .stone-grade-shang { color: #f4d889; }
.res-stones .stone-grade-jipin { color: #d5b6ff; }
.resource-summary-btn:focus-visible, .resource-detail-item:focus-visible { outline: 2px solid #82b8e8; outline-offset: 2px; }
@media (max-width: 420px) {
    .resources { flex-basis: 28px; width: 28px; }
    .resource-summary-btn { width: 28px; height: 46px; min-height: 46px; padding: 3px 2px; }
    .resource-summary-label { font-size: 9px; }
    .resource-details { width: min(196px, calc(100vw - 14px)); }
}

.res-age {
    font-size: 10px;
    color: var(--text-dim);
}

.res-time {
    font-size: 10px;
    color: var(--accent);
}

.res-mind {
    font-size: 11px;
    color: var(--primary);
    font-weight: 600;
}

.res-points {
    font-size: 11px;
    color: var(--gold);
    font-weight: 600;
}

/* ============ 修炼指引面板 ============ */
.guidance-panel {
    position: absolute;
    top: 80px;
    left: 10px;
    right: 10px;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(22, 33, 62, 0.95));
    border: 1px solid var(--primary);
    border-radius: 10px;
    padding: 10px 12px;
    z-index: 50;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    animation: slideDown 0.3s ease-out;
}

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

.guidance-title {
    font-size: 13px;
    font-weight: bold;
    color: var(--primary-light);
    margin-bottom: 6px;
}

.guidance-item {
    font-size: 12px;
    color: var(--text);
    padding: 4px 0;
    line-height: 1.4;
    border-bottom: 1px solid rgba(212, 168, 83, 0.15);
}

.guidance-item:last-child {
    border-bottom: none;
}

/* ============ 主内容区 ============ */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 6px;
    gap: 6px;
    position: relative;
}

.scene-bg {
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    border-radius: 10px;
    overflow: hidden;
    opacity: 0.15;
    z-index: 0;
}

.scene-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 消息区视口包裹层：承载场景背景和遮罩，不随消息滚动 */
.msg-viewport {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background-color: rgba(8, 11, 22, 0.6);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.3);
}

/* 渐变遮罩层：固定覆盖整个视口，不随内容滚动 */
.msg-viewport::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(8,11,22,0.52) 0%, rgba(8,11,22,0.68) 50%, rgba(8,11,22,0.78) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: 10px;
}

/* 顶部淡化渐变 */
.msg-viewport::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 24px;
    background: linear-gradient(180deg, rgba(8,11,22,0.88), transparent);
    pointer-events: none;
    z-index: 3;
    border-radius: 10px 10px 0 0;
}

.message-log {
    flex: 1;
    overflow-y: auto;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.8;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 2;
}

/* 日志分层：默认只保留最近动态；关键模式只展示风险、剧情和奖励，完整模式保留全部可见记录。 */
.message-log-toolbar {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 6px;
    padding: 8px 10px 6px;
    border-bottom: 1px solid rgba(212, 168, 83, 0.18);
    background: rgba(8, 11, 22, 0.58);
}
.message-log-tab {
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid rgba(212, 168, 83, 0.28);
    border-radius: 999px;
    background: rgba(15, 19, 35, 0.72);
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1;
}
.message-log-tab.active {
    color: var(--primary-light);
    border-color: var(--primary);
    background: rgba(212, 168, 83, 0.16);
    font-weight: 700;
}
.message-log[data-log-mode="recent"] .msg-item:nth-last-child(n+9) { display: none; }
.message-log[data-log-mode="key"] .msg-item:not([data-log-level="key"]) { display: none; }

.msg-item { 
    padding: 2px 0; 
    word-break: break-all;
    animation: msgFadeIn 0.3s ease;
    position: relative;
    z-index: 2;
}

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

.msg-title { 
    color: var(--primary-light); 
    font-weight: bold; 
    font-size: 15px; 
    padding: 8px 0; 
    text-align: center;
    text-shadow: 0 0 10px rgba(212, 168, 83, 0.5);
    letter-spacing: 4px;
}
.msg-info { color: var(--text-dim); }
.msg-positive { color: var(--success); }
.msg-danger { color: var(--danger); }
.msg-warning { color: var(--warning); }
.msg-event { 
    color: var(--accent-light); 
    font-style: italic; 
}
.msg-story { color: var(--text); text-indent: 2em; }

.breakthrough-result-card {
    display: grid;
    gap: 10px;
}
.breakthrough-result-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.breakthrough-result-grid > div {
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(212, 168, 83, 0.22);
    border-radius: 8px;
    background: rgba(212, 168, 83, 0.08);
}
.breakthrough-result-grid span {
    display: block;
    color: var(--text-dim);
    font-size: 11px;
}
.breakthrough-result-grid strong {
    display: block;
    margin-top: 3px;
    color: var(--primary-light);
    font-size: 13px;
    white-space: nowrap;
}

/* ============ 快捷操作栏 ============ */
.quick-bar {
    display: flex;
    gap: 6px;
    padding: 0 2px;
    position: relative;
    z-index: 1;
}

.quick-btn {
    flex: 1;
    height: 36px;
    background: linear-gradient(180deg, var(--bg-panel-light), var(--bg-panel));
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-dim);
    font-size: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.quick-btn:active {
    transform: scale(0.95);
    background: linear-gradient(180deg, var(--primary-dark), var(--primary));
    border-color: var(--primary);
    color: white;
}

.quick-btn .icon {
    font-size: 20px;
}

.cultivate-panel {
    background: linear-gradient(180deg, rgba(34, 37, 74, 0.9), rgba(24, 26, 53, 0.9));
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(8px);
}

.cycle-select {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.cycle-btn {
    min-width: 38px;
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
    background: var(--bg-dark);
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.cycle-btn.active { 
    color: var(--primary-light); 
    border-color: var(--primary);
    background: rgba(212, 168, 83, 0.15);
    box-shadow: 0 0 8px rgba(212, 168, 83, 0.2);
}

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

.btn-cultivate-main {
    flex: 1;
    height: 44px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--bg-deep);
    border: none;
    border-radius: 22px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(212, 168, 83, 0.4), inset 0 1px 0 rgba(255,255,255,0.3);
    position: relative;
    overflow: hidden;
}

.btn-cultivate-main::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: btnShine 3s infinite;
}

@keyframes btnShine {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

.btn-cultivate-main:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(212, 168, 83, 0.3);
}

/* ============ 底部导航栏 ============ */
.bottom-nav {
    background: linear-gradient(180deg, rgba(24, 26, 53, 0.98) 0%, rgba(15, 16, 41, 0.99) 100%);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    display: flex;
    gap: 2px;
    backdrop-filter: blur(10px);
    position: relative;
}

.bottom-nav::before {
    content: '';
    position: absolute;
    top: -1px; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 2px;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 8px;
    position: relative;
    min-height: 50px;
}

.nav-item .nav-icon {
    font-size: 22px;
    transition: all 0.2s;
}

.nav-item:active {
    transform: scale(0.9);
    color: var(--primary-light);
}

.nav-item.active {
    color: var(--primary-light);
}

.nav-item.active .nav-icon {
    text-shadow: 0 0 12px rgba(240, 208, 128, 0.6);
    transform: translateY(-2px);
}

.nav-item.primary-nav {
    margin-top: -16px;
}

.nav-item.primary-nav .nav-icon-wrap {
    width: 48px;
    height: 48px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(212, 168, 83, 0.5), inset 0 2px 4px rgba(255,255,255,0.3);
    border: 2px solid var(--bg-dark);
    margin-bottom: 2px;
}

.nav-item.primary-nav .nav-icon {
    font-size: 24px;
    color: var(--bg-deep);
}

.nav-item.primary-nav span {
    color: var(--primary-light);
    font-weight: bold;
}

/* ============ z-index 层级体系 ============
 *  重要：所有全屏 fixed 覆盖层（combatView/introView/modalContainer/gameOver）
 *  必须是 <body> 的直接子元素，避免被 #app (position:relative; z-index:1)
 *  的 stacking context 困住，导致 z-index 失效。
 *  战斗特效（.crit-text/.damage-number）由 JS 直接 appendChild 到 body。
 *
 *  0     - 背景装饰层 (body::before, .scene-bg)
 *  1-10  - 应用内容层 (#app 及内部组件)
 *  50    - 战斗界面层 (#combatView) - 全屏战斗覆盖主界面
 *  100   - 通用弹窗遮罩 (.modal-overlay 在 modalContainer 内部)
 *  200   - 初始引导层 (#introView) - 灵根选择，覆盖战斗/主界面
 *  900   - 战斗特效层 (.crit-text, .damage-number) - 飘字特效，pointer-events:none 不拦截点击
 *  9999  - 弹窗容器 (#modalContainer) - 所有动态弹窗/确认框/丹药选择等，pointer-events:none 子层恢复 auto
 *  10000 - 游戏结束 (.game-over-overlay) - 终局画面，最高优先级
 */

/* ============ 战斗界面 ============ */
#combatView {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1a0f2e, #0a0a18);
    max-width: 480px;
    margin: 0 auto;
}

/* ============ 初始引导界面 ============ */
#introView {
    z-index: 200;
}

/* ============ 开篇序言界面 ============ */
#splashView {
    z-index: 300;
    background: linear-gradient(160deg, #0a0a18 0%, #181a35 100%);
}

.splash-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    max-width: 420px;
    width: 100%;
    min-height: 400px;
    padding: 36px 18px;
    border: 1px solid var(--border-gold);
    border-radius: 16px;
    background: radial-gradient(ellipse at 50% 0%, rgba(212,168,83,0.08), transparent 60%);
    box-shadow: 0 0 60px rgba(212,168,83,0.08), inset 0 0 40px rgba(0,0,0,0.3);
}

.splash-columns {
    display: flex;
    /* 竖排右起：从右往左排列（首列在右，末列标题在左） */
    direction: rtl;
    gap: 14px;
    justify-content: center;
    align-items: flex-start;
    padding: 6px 0;
}

.splash-col {
    writing-mode: vertical-rl;
    font-family: "KaiTi", "STKaiti", "KaiTi_GB2312", "楷体", "Kaiti SC", serif;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 2px;
    color: var(--primary-light);
    text-shadow: 0 0 10px rgba(240,208,128,0.35);
    white-space: nowrap;
}

.splash-col-title {
    color: var(--accent-light);
    font-size: 16px;
    text-shadow: 0 0 10px rgba(158,203,255,0.4);
    border-right: 1px solid rgba(158,203,255,0.25);
    padding-right: 14px;
}

.splash-status {
    min-height: 18px;
    margin: -12px 0 -14px;
    color: var(--text-dim);
    font-size: 12px;
    text-align: center;
}
.splash-status.error { color: var(--danger); }

/* ============ 修仙风格进度条 ============ */
.splash-progress-wrap {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.splash-progress-wrap.visible {
    opacity: 1;
    transform: translateY(0);
}
.splash-progress-track {
    position: relative;
    height: 22px;
    border: 1px solid var(--border-gold);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(10,10,24,0.6));
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.5), 0 0 12px rgba(212,168,83,0.15);
    overflow: hidden;
}
.splash-progress-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0%;
    border-radius: 10px;
    background: linear-gradient(90deg,
        #8a6a2a 0%,
        #d4a853 25%,
        #f0d080 50%,
        #d4a853 75%,
        #8a6a2a 100%);
    background-size: 200% 100%;
    animation: splash-progress-flow 2.5s linear infinite;
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 10px rgba(240,208,128,0.55), 0 0 20px rgba(212,168,83,0.25);
}
.splash-progress-fill::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0) 55%);
    border-radius: 10px;
}
.splash-progress-glow {
    position: absolute;
    top: -3px; right: -2px; bottom: -3px;
    width: 18px;
    background: radial-gradient(ellipse at right center, rgba(255,240,180,0.8), transparent 70%);
    border-radius: 50%;
    animation: splash-progress-glow-pulse 1.2s ease-in-out infinite alternate;
}
.splash-progress-shine {
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    animation: splash-progress-shine-move 2s ease-in-out infinite;
}
.splash-progress-pct {
    position: absolute;
    top: 50%; left: 0; right: 0;
    transform: translateY(-50%);
    text-align: center;
    font-family: "KaiTi", "STKaiti", "楷体", serif;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.5);
    letter-spacing: 1px;
    z-index: 2;
    pointer-events: none;
}
.splash-progress-sub {
    margin-top: 6px;
    text-align: center;
    font-family: "KaiTi", "STKaiti", "楷体", serif;
    font-size: 12px;
    color: var(--primary-light);
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(240,208,128,0.4);
    min-height: 16px;
}
@keyframes splash-progress-flow {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}
@keyframes splash-progress-shine-move {
    0%   { left: -100%; }
    60%  { left: 120%; }
    100% { left: 120%; }
}
@keyframes splash-progress-glow-pulse {
    from { opacity: 0.5; transform: scaleX(0.8); }
    to   { opacity: 1;   transform: scaleX(1.3); }
}

.splash-btn {
    font-family: "KaiTi", "STKaiti", "楷体", serif;
    font-size: 18px;
    letter-spacing: 8px;
    padding: 12px 32px;
}

/* ============ 弹窗 ============ */
/* 弹窗容器必须在最顶层，确保所有模态框/确认框不被其他遮罩覆盖 */
#modalContainer {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    pointer-events: none;
}
#modalContainer .modal-overlay {
    pointer-events: auto;
}

.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.75);
    z-index: 100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    animation: fadeIn 0.2s ease;
}

.modal-overlay.center-modal {
    align-items: center;
    padding: 16px;
}

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

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.modal {
    background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.4);
}

.modal-header {
    padding: 14px 16px 10px;
    background: linear-gradient(180deg, var(--bg-panel-light), var(--bg-panel));
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.modal-header::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 20%; right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

.modal-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--primary-light);
    text-shadow: 0 0 8px rgba(240, 208, 128, 0.3);
}

.modal-close {
    background: var(--bg-panel-light);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 18px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.modal-close:active {
    transform: scale(0.9);
    background: var(--danger);
    color: white;
}

.modal-body {
    flex: 1;
    min-height: 0; /* 修复 iOS flex 子元素无法收缩滚动，导致内容溢出重叠 */
    overflow-y: auto;
    padding: 12px 14px;
    -webkit-overflow-scrolling: touch;
}

.modal-footer {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    background: var(--bg-panel);
}

/* ============ 列表项 ============ */
.list-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: linear-gradient(180deg, var(--bg-panel-light), rgba(34, 37, 74, 0.6));
    border-radius: 10px;
    margin-bottom: 6px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
}

.list-item:active { 
    border-color: var(--primary);
    transform: scale(0.98);
    background: linear-gradient(180deg, rgba(212, 168, 83, 0.15), rgba(212, 168, 83, 0.05));
}

/* 道侣列表：头像+姓名同行，境界/好感度与头像左边缘对齐整行显示 */
.list-item.vstack { display: block; }
.list-item.vstack .list-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.list-item.vstack .item-sub { margin-left: 2px; }
.list-item.selected { 
    border-color: var(--accent); 
    background: rgba(110, 168, 254, 0.1); 
}

/* ============ 图鉴（成就系统） ============ */
.dex-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.dex-realm-head {
    grid-column: 1 / -1;
    margin-top: 6px;
    color: var(--primary-light);
    font-size: 13px;
    font-weight: bold;
    border-bottom: 1px solid var(--border);
    padding-bottom: 3px;
}
.dex-card {
    background: linear-gradient(180deg, var(--bg-panel-light), rgba(34, 37, 74, 0.6));
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.dex-card:active {
    border-color: var(--primary);
    transform: scale(0.96);
}
.dex-card.locked {
    cursor: not-allowed;
}
.dex-card.locked:active {
    border-color: var(--border);
    transform: none;
}
.dex-imgwrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
}
.dex-imgwrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dex-card.locked .dex-imgwrap img {
    filter: grayscale(1) brightness(0.4);
}
.dex-name {
    margin-top: 5px;
    font-size: 12px;
    color: var(--text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dex-card.locked .dex-name {
    color: var(--text-dim);
}
.dex-detail-img {
    width: 100%;
    max-height: 46vh;
    object-fit: contain;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    cursor: zoom-in;
}

.tag {
    display: inline-block;
    padding: 2px 8px;
    background: var(--bg-panel-light);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 11px;
    color: var(--text);
}

.tag.gold {
    background: rgba(212, 168, 83, 0.2);
    border-color: var(--primary-dark);
    color: var(--primary-light);
}

.avatar-small {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary);
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--bg-panel-light), var(--primary-dark));
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.avatar-large {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    object-fit: cover;
    border: 3px solid var(--primary);
    background: var(--bg-dark);
    box-shadow: 0 4px 20px rgba(212, 168, 83, 0.3);
}

.fullbody-img {
    max-width: 75vw;
    max-height: 45vh;
    object-fit: contain;
    border-radius: 12px;
    border: 3px solid var(--primary);
    background: var(--bg-dark);
    box-shadow: 0 4px 24px rgba(212, 168, 83, 0.3);
}

.encounter-img {
    max-width: 80vw;
    max-height: 50vh;
    object-fit: contain;
    border-radius: 12px;
    border: 3px solid var(--primary-light);
    background: var(--bg-dark);
    box-shadow: 0 0 32px rgba(212, 168, 83, 0.4);
}

.item-info { flex: 1; min-width: 0; }
.item-title { 
    font-weight: bold; 
    color: var(--text-bright); 
    font-size: 14px; 
}
.item-sub { 
    font-size: 12px; 
    color: var(--text-dim); 
    margin-top: 3px;
    line-height: 1.4;
}

/* ============ 商品类型徽章 ============ */
.item-badge {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    margin-right: 6px;
    font-weight: normal;
    vertical-align: middle;
    line-height: 1.5;
}
.badge-pill {
    background: linear-gradient(135deg, rgba(156,39,176,0.25), rgba(233,30,99,0.2));
    color: #ce93d8;
    border: 1px solid rgba(156,39,176,0.4);
}
.badge-weapon {
    background: rgba(244,67,54,0.2);
    color: #ef9a9a;
    border: 1px solid rgba(244,67,54,0.4);
}
.badge-armor {
    background: rgba(33,150,243,0.2);
    color: #90caf9;
    border: 1px solid rgba(33,150,243,0.4);
}
.badge-skill {
    background: rgba(255,193,7,0.2);
    color: #ffe082;
    border: 1px solid rgba(255,193,7,0.4);
}
.badge-currency {
    background: rgba(255,152,0,0.2);
    color: #ffcc80;
    border: 1px solid rgba(255,152,0,0.4);
}
.badge-material {
    background: rgba(76,175,80,0.2);
    color: #a5d6a7;
    border: 1px solid rgba(76,175,80,0.4);
}
.badge-item {
    background: rgba(158,158,158,0.2);
    color: #bdbdbd;
    border: 1px solid rgba(158,158,158,0.4);
}
.item-name-text { vertical-align: middle; }
.list-item-pill {
    border-left: 3px solid #9c27b0 !important;
    background: linear-gradient(135deg, rgba(156,39,176,0.06), transparent 60%);
}

/* ============ 已有数量显示 ============ */
.item-owned {
    margin-top: 4px;
    font-size: 11px;
    color: #a5d6a7;
}
.item-owned b { color: #66bb6a; font-size: 12px; }
.item-owned-inline {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    color: #a5d6a7;
    background: rgba(76,175,80,0.12);
    padding: 1px 6px;
    border-radius: 6px;
}

/* ============ 物品获得飘字 ============ */
.item-acquired {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    font-size: 20px;
    font-weight: bold;
    padding: 10px 24px;
    border-radius: 12px;
    z-index: 20000;
    pointer-events: none;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(6px);
    white-space: nowrap;
}
.item-acquired.acquire-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.acquire-pill {
    background: linear-gradient(135deg, rgba(156,39,176,0.85), rgba(103,58,183,0.85));
    color: #f3e5f5;
    box-shadow: 0 0 30px rgba(156,39,176,0.5), 0 4px 20px rgba(0,0,0,0.4);
    border: 1px solid rgba(206,147,216,0.5);
}
.acquire-skill {
    background: linear-gradient(135deg, rgba(255,160,0,0.9), rgba(230,126,34,0.85));
    color: #fff8e1;
    box-shadow: 0 0 30px rgba(255,193,7,0.5), 0 4px 20px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,224,130,0.6);
}
.acquire-equip {
    background: linear-gradient(135deg, rgba(211,47,47,0.85), rgba(183,28,28,0.85));
    color: #ffebee;
    box-shadow: 0 0 30px rgba(244,67,54,0.5), 0 4px 20px rgba(0,0,0,0.4);
    border: 1px solid rgba(239,154,154,0.5);
}
.acquire-mat {
    background: linear-gradient(135deg, rgba(46,125,50,0.85), rgba(27,94,32,0.85));
    color: #e8f5e9;
    box-shadow: 0 0 25px rgba(76,175,80,0.4), 0 4px 20px rgba(0,0,0,0.4);
    border: 1px solid rgba(129,199,132,0.5);
}
.acquire-item {
    background: linear-gradient(135deg, rgba(46,125,50,0.85), rgba(27,94,32,0.85));
    color: #e8f5e9;
    box-shadow: 0 0 30px rgba(76,175,80,0.5), 0 4px 20px rgba(0,0,0,0.4);
    border: 1px solid rgba(129,199,132,0.5);
}

/* 道侣操作按钮：固定每行 2 个（宽屏也不串行） */
.comp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.comp-actions .btn {
    flex: 0 0 calc(50% - 3px);
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    padding: 10px 6px;
}

/* ============ 按钮样式 ============ */
.btn {
    padding: 10px 18px;
    background: linear-gradient(180deg, var(--bg-panel-light), var(--bg-panel));
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    min-height: 42px;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

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

.btn.primary {
    background: linear-gradient(180deg, var(--primary), var(--primary-dark));
    border-color: var(--primary-light);
    color: var(--bg-deep);
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(212, 168, 83, 0.35);
}

.btn.success { 
    background: linear-gradient(180deg, var(--success), #5ab85a); 
    border-color: var(--success);
    color: var(--bg-deep);
    font-weight: bold;
}
.btn.danger { 
    background: linear-gradient(180deg, var(--danger), #d94848); 
    border-color: var(--danger);
    color: white;
    font-weight: bold;
}
.btn:disabled { 
    opacity: 0.4; 
    cursor: not-allowed;
    transform: none !important;
}

/* ============ 初始角色创建（性别/头像选择） ============ */
.gender-btn.selected {
    background: linear-gradient(180deg, var(--primary), var(--primary-dark));
    border-color: var(--primary-light);
    color: var(--bg-deep);
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(212, 168, 83, 0.35);
}
.avatar-option {
    border: 2px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}
.avatar-option.selected {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 2px var(--primary), 0 0 10px rgba(212, 168, 83, 0.5);
    transform: scale(1.05);
}

#avatarGrid::-webkit-scrollbar { width: 4px; }
#avatarGrid::-webkit-scrollbar-thumb { background: var(--border-gold); border-radius: 2px; }
#avatarGrid::-webkit-scrollbar-track { background: transparent; }

/* ============ 两列布局 ============ */
.two-col {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.col-left { flex: 0 0 110px; }
.col-right { flex: 1; min-width: 0; }

.detail-section {
    margin-bottom: 10px;
    padding: 10px;
    background: linear-gradient(180deg, rgba(34, 37, 74, 0.6), rgba(24, 26, 53, 0.8));
    border-radius: 10px;
    border: 1px solid var(--border);
}

.detail-label {
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.detail-value {
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
}

/* ============ 玩家详情面板优化样式 ============ */
.player-detail-wrap {
    padding: 4px 0;
}

/* 人物展示区 */
.pd-hero {
    text-align: center;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}
.pd-hero-img-wrap {
    position: relative;
    display: inline-block;
    z-index: 1;
}
.pd-hero-img-wrap::before {
    content: '';
    position: absolute;
    top: -8px; left: -8px; right: -8px; bottom: -8px;
    background: radial-gradient(ellipse at center, rgba(212,168,83,0.25) 0%, transparent 70%);
    border-radius: 16px;
    pointer-events: none;
}
.pd-hero-img {
    max-width: 68vw;
    max-height: 42vh;
    object-fit: contain;
    border-radius: 14px;
    border: 3px solid var(--primary);
    background: linear-gradient(180deg, #1e2240 0%, #0f1029 100%);
    box-shadow: 0 8px 32px rgba(212,168,83,0.35), 0 0 60px rgba(212,168,83,0.1);
    position: relative;
    z-index: 1;
    cursor: zoom-in;
    transition: transform 0.2s;
}
.pd-hero-img:active {
    transform: scale(0.98);
}
.pd-toggle-btn {
    margin-top: 10px !important;
    background: linear-gradient(135deg, rgba(212,168,83,0.2), rgba(156,39,176,0.15)) !important;
    border: 1px solid var(--primary) !important;
    color: var(--primary-light) !important;
    border-radius: 20px !important;
    padding: 5px 18px !important;
    font-size: 12px !important;
    min-height: auto !important;
    transition: all 0.2s !important;
    position: relative !important;
    z-index: 2 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}
.pd-toggle-btn:active {
    background: linear-gradient(135deg, rgba(212,168,83,0.35), rgba(156,39,176,0.25)) !important;
    transform: scale(0.96);
}

/* 名字称号区 */
.pd-title-card {
    background: linear-gradient(135deg, rgba(212,168,83,0.12), rgba(156,39,176,0.08));
    border: 1px solid rgba(212,168,83,0.3);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    text-align: center;
}
.pd-name {
    font-size: 20px;
    font-weight: bold;
    color: var(--primary-light);
    text-shadow: 0 0 12px rgba(212,168,83,0.4);
    letter-spacing: 2px;
    margin-bottom: 4px;
}
.pd-realm {
    font-size: 14px;
    color: #ce93d8;
    margin-bottom: 3px;
}
.pd-location {
    font-size: 12px;
    color: var(--text-dim);
}

/* 属性卡片组 */
.pd-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}
.pd-stat-card {
    background: linear-gradient(180deg, rgba(34,37,74,0.7), rgba(24,26,53,0.9));
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
}
.pd-stat-icon {
    font-size: 20px;
    margin-bottom: 4px;
}
.pd-stat-val {
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 2px;
}
.pd-stat-label {
    font-size: 11px;
    color: var(--text-dim);
}
.pd-stat-atk .pd-stat-val { color: #ff8a80; }
.pd-stat-def .pd-stat-val { color: #90caf9; }
.pd-stat-spd .pd-stat-val { color: #b39ddb; }

/* 气血灵力条 */
.pd-bars-wrap {
    margin-bottom: 10px;
}
.pd-bar-row {
    margin-bottom: 8px;
}
.pd-bar-row:last-child {
    margin-bottom: 0;
}
.pd-bar-row .stat-group {
    margin-bottom: 0;
}

/* 信息分组卡片 */
.pd-info-card {
    background: linear-gradient(180deg, rgba(34,37,74,0.6), rgba(24,26,53,0.8));
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.pd-info-card-title {
    font-size: 13px;
    font-weight: bold;
    color: var(--primary-light);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(212,168,83,0.2);
}
.pd-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text);
    padding: 4px 0;
    line-height: 1.5;
}
.pd-info-label {
    color: var(--text-dim);
    font-size: 12px;
}
.pd-info-value {
    color: var(--text);
    font-weight: 500;
    text-align: right;
}
.pd-info-value.gold { color: var(--gold); }
.pd-info-value.accent { color: var(--accent-light); }
.pd-info-value.success { color: #4caf50; }

/* 年龄进度条 */
.pd-age-bar {
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}
.pd-age-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #ff9800, #f44336);
    border-radius: 3px;
    transition: width 0.3s;
}

/* 灵石分组 */
.pd-stones-sub {
    font-size: 11px;
    color: var(--text-dim);
    text-align: right;
    margin-top: 2px;
}

/* 灵根标签 */
.pd-roots-wrap {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 6px 0 8px 0;
}
.pd-root-tag {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid;
    position: relative;
}
.pd-root-tag.best {
    font-weight: bold;
    box-shadow: 0 0 10px currentColor;
}
.pd-root-info {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-dim);
}
.pd-root-info .highlight-green { color: #4caf50; }
.pd-root-info .highlight-orange { color: #ff9800; }
.pd-root-info .highlight-red { color: #f44336; }
.pd-root-info .highlight-purple { color: #e040fb; }

.pd-fusion-card {
    margin-top: 8px;
    padding: 8px 10px;
    background: linear-gradient(90deg, rgba(156,39,176,0.15), rgba(255,152,0,0.1));
    border-radius: 8px;
    border-left: 3px solid #e040fb;
}
.pd-fusion-name {
    font-size: 13px;
    font-weight: bold;
    color: #e040fb;
}
.pd-fusion-desc {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 2px;
}
.pd-skill-match {
    font-size: 12px;
    margin-top: 6px;
}

/* 功法装备 */
.pd-skill-item, .pd-equip-item {
    font-size: 12px;
    color: var(--text);
    padding: 3px 0;
    line-height: 1.5;
}
.pd-skill-sub {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 2px;
    padding-left: 16px;
}
.pd-equip-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* ============ 战斗UI ============ */
#combatView {
    display: flex;
    flex-direction: column;
}

.combat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px 10px 0 10px;
    background: linear-gradient(180deg, #1a0f2e 0%, #0d0d1a 100%);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    margin: 6px;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
}

.combat-area::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at top, rgba(177, 138, 255, 0.1), transparent 60%);
    pointer-events: none;
}

.enemy-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.enemy-info { flex: 1; }
.enemy-name { font-weight: bold; color: var(--danger); font-size: 16px; text-shadow: 0 0 8px rgba(255, 107, 107, 0.5); }
.enemy-type { font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-left: 8px; }

/* 中间战斗日志区域 */
.combat-log-middle {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    margin: 4px 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 12px;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    min-height: 80px;
    max-height: 200px;
}

.combat-log-middle .msg-item {
    margin-bottom: 3px;
    padding: 2px 0;
}

.combatant-panel {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 8px;
    margin-top: 8px;
    position: relative;
    z-index: 1;
}

.combatant-card {
    background: rgba(255,255,255,0.05);
    padding: 8px;
    border-radius: 10px;
    border: 1px solid var(--border);
    backdrop-filter: blur(4px);
}

.combatant-card.player-card {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(103, 58, 183, 0.1));
    box-shadow: 0 0 12px rgba(33, 150, 243, 0.2);
    min-width: 180px;
}

.player-portrait {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: linear-gradient(135deg, #15304a, #081530);
    border: 2px solid var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(33, 150, 243, 0.3);
    overflow: hidden;
}

.player-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.combatant-card.companion-card {
    border-color: #e91e63;
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.12), rgba(156, 39, 176, 0.08));
    box-shadow: 0 0 10px rgba(233, 30, 99, 0.15);
    min-width: 100px;
}

.combatant-name {
    font-size: 13px;
    color: var(--primary-light);
    font-weight: bold;
    margin-bottom: 4px;
}

.skill-btn {
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    margin-bottom: 6px;
    background: linear-gradient(180deg, var(--bg-panel-light), var(--bg-panel));
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.skill-btn:active { 
    border-color: var(--accent); 
    background: linear-gradient(180deg, rgba(110, 168, 254, 0.2), rgba(110, 168, 254, 0.05));
    transform: scale(0.98);
}
.skill-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.skill-cost { color: var(--accent); font-size: 12px; float: right; }

/* 战斗按钮栏 */
.combat-actions {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 2px 8px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #0d0d1a, var(--bg-panel) 30%, var(--bg-dark));
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    margin: 0 6px 6px 6px;
}

.combat-action-btn {
    height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: linear-gradient(180deg, var(--bg-panel-light), var(--bg-panel));
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}

.combat-action-btn .ca-icon {
    font-size: 20px;
}

.combat-action-btn:active {
    transform: scale(0.92);
}

.combat-action-btn:disabled,
.combat-action-btn.btn-insufficient {
    opacity: 0.45;
    filter: grayscale(0.6);
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none !important;
}

.combat-action-btn:disabled .ca-icon,
.combat-action-btn.btn-insufficient .ca-icon {
    opacity: 0.6;
}

.combat-action-btn.primary {
    background: linear-gradient(180deg, var(--danger), #c0392b);
    border-color: var(--danger);
    color: white;
    box-shadow: 0 2px 10px rgba(255, 107, 107, 0.4);
}

.combat-action-btn.trib-btn {
    background: linear-gradient(180deg, #8e44ad, #6c3483);
    border-color: #9b59b6;
    color: #f5eef8;
    box-shadow: 0 2px 8px rgba(155, 89, 182, 0.3);
    animation: trib-btn-glow 2s ease-in-out infinite alternate;
}

.combat-action-btn.trib-btn:active {
    transform: scale(0.92);
}

@keyframes trib-btn-glow {
    from { box-shadow: 0 2px 8px rgba(155, 89, 182, 0.3); }
    to { box-shadow: 0 2px 16px rgba(241, 196, 15, 0.5), 0 0 20px rgba(231, 76, 60, 0.3); }
}

/* 天劫日志样式 */
.msg-trib_title {
    color: #f1c40f !important;
    font-weight: bold;
    font-size: 1.05em;
    text-shadow: 0 0 8px rgba(241, 196, 15, 0.5);
    text-align: center;
    padding: 6px 0;
}

.msg-trib_log {
    color: #e67e22 !important;
    font-style: italic;
}

.msg-trib_warn {
    color: #e74c3c !important;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(231, 76, 60, 0.4);
}

/* ============ 响应式 ============ */
@media (min-width: 768px) {
    body { font-size: 15px; }
    #app {
        border-radius: 16px;
        margin-top: 20px;
        margin-bottom: 20px;
        height: calc(100% - 40px);
    }
}

.hidden { display: none !important; }
.flex { display: flex; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.wrap { flex-wrap: wrap; }
.text-center { text-align: center; }

/* ============ 游戏结束 ============ */
.game-over-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.8s ease;
}

.game-over-content {
    text-align: center;
    padding: 30px 20px;
    max-width: 340px;
    width: 90%;
}

.game-over-title {
    font-size: 48px;
    font-weight: 900;
    color: #ff4757;
    text-shadow: 0 0 30px rgba(255, 71, 87, 0.7);
    margin-bottom: 16px;
    letter-spacing: 6px;
}

.game-over-reason {
    font-size: 16px;
    color: #e0e0e0;
    margin-bottom: 24px;
    line-height: 1.7;
}

.game-over-stats {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 24px;
    text-align: left;
    border: 1px solid rgba(255,255,255,0.1);
}

.game-over-stats-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    color: #bdbdbd;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.game-over-stats-row:last-child {
    border-bottom: none;
}

.game-over-stats-label {
    color: #9e9e9e;
}

.game-over-stats-value {
    color: #fff;
    font-weight: 600;
}

.game-over-btn {
    background: linear-gradient(135deg, #ff4757, #c0392b);
    color: white;
    border: none;
    padding: 14px 40px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(255, 71, 87, 0.5);
    transition: all 0.3s;
}

.game-over-btn:active {
    transform: scale(0.95);
}

/* 游戏结束操作区：重新开始 / 读取存档 / 导入存档 */
.game-over-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
    width: 100%;
    align-items: center;
}
.game-over-actions .game-over-btn {
    width: 100%;
    padding: 12px 20px;
}

/* ============ 战斗特效 ============ */
@keyframes screen-shake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-6px, 4px); }
    20% { transform: translate(6px, -4px); }
    30% { transform: translate(-5px, -3px); }
    40% { transform: translate(5px, 3px); }
    50% { transform: translate(-4px, 2px); }
    60% { transform: translate(4px, -2px); }
    70% { transform: translate(-3px, 1px); }
    80% { transform: translate(3px, -1px); }
    90% { transform: translate(-1px, 0); }
}

.screen-shake {
    animation: screen-shake 0.4s ease-in-out;
}

@keyframes crit-flash {
    0% { opacity: 0; background: rgba(255, 0, 0, 0); }
    30% { opacity: 1; background: rgba(255, 50, 50, 0.35); }
    100% { opacity: 0; background: rgba(255, 0, 0, 0); }
}

.crit-flash {
    animation: crit-flash 0.5s ease-out;
}

@keyframes crit-text-pop {
    0% {
        transform: translate(-50%, -50%) scale(0.2) rotate(-15deg);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3) rotate(5deg);
        opacity: 1;
    }
    70% {
        transform: translate(-50%, -50%) scale(1.0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -80%) scale(1.0);
        opacity: 0;
    }
}

.crit-text {
    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    font-weight: 900;
    color: #ffd700;
    text-shadow:
        0 0 10px #ffd700,
        0 0 20px #ff8c00,
        0 0 30px #ff4500,
        2px 2px 0 #000,
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000;
    pointer-events: none;
    z-index: 900;
    letter-spacing: 4px;
    animation: crit-text-pop 1.0s ease-out forwards;
}

@keyframes enemy-shake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-8px, 0) rotate(-3deg); }
    40% { transform: translate(8px, 0) rotate(3deg); }
    60% { transform: translate(-6px, 0) rotate(-2deg); }
    80% { transform: translate(6px, 0) rotate(2deg); }
}

.enemy-shake {
    animation: enemy-shake 0.4s ease-in-out;
}

@keyframes damage-float {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-50px) scale(1.3);
        opacity: 0;
    }
}

.damage-number {
    position: fixed;
    font-size: 24px;
    font-weight: bold;
    color: #ffeb3b;
    text-shadow: 2px 2px 0 #d32f2f, -1px -1px 0 #d32f2f, 1px -1px 0 #d32f2f, -1px 1px 0 #d32f2f;
    pointer-events: none;
    z-index: 900;
    animation: damage-float 0.9s ease-out forwards;
}

.damage-number.crit {
    font-size: 36px;
    color: #ffd700;
    text-shadow: 2px 2px 0 #000, -1px -2px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 15px #ffd700;
}

/* ============ 击杀特效 ============ */
@keyframes enemy-death {
    0%   { transform: scale(1) rotate(0deg); filter: brightness(1); opacity: 1; }
    20%  { transform: scale(1.18) rotate(0deg); filter: brightness(2.4) saturate(1.6); }
    45%  { transform: scale(1.25) rotate(12deg); filter: brightness(2.8) saturate(1.8); }
    100% { transform: scale(0.05) rotate(40deg); filter: brightness(4); opacity: 0; }
}
.enemy-death {
    animation: enemy-death 1.0s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

@keyframes death-flash {
    0%   { background: rgba(255, 255, 255, 0); }
    20%  { background: rgba(255, 255, 255, 0.85); }
    50%  { background: rgba(255, 236, 179, 0.7); }
    100% { background: rgba(255, 255, 255, 0); }
}
.death-flash {
    animation: death-flash 0.8s ease-out;
}

.death-particle {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 910;
    box-shadow: 0 0 8px currentColor;
    animation: particle-fly 1.0s ease-out forwards;
}
@keyframes particle-fly {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* ============ 战斗受击/状态视觉增强 ============ */

/* 玩家受击抖动 */
@keyframes player-hit-shake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-5px, 2px); }
    40% { transform: translate(5px, -2px); }
    60% { transform: translate(-3px, 1px); }
    80% { transform: translate(3px, -1px); }
}
.player-hit { animation: player-hit-shake 0.35s ease-in-out; }

/* 道侣/子嗣受击抖动（幅度小一些） */
@keyframes ally-hit-shake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-4px, 0); }
    75% { transform: translate(4px, 0); }
}
.ally-hit { animation: ally-hit-shake 0.3s ease-in-out; }

/* 玩家受击红屏边缘闪光 */
@keyframes player-hit-flash {
    0% { box-shadow: inset 0 0 0 0 rgba(255,0,0,0); }
    30% { box-shadow: inset 0 0 60px 10px rgba(255,30,30,0.45); }
    100% { box-shadow: inset 0 0 0 0 rgba(255,0,0,0); }
}
.player-hit-flash { animation: player-hit-flash 0.5s ease-out; }

/* 玩家低血量脉动红光 */
@keyframes low-hp-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(255,0,0,0.3); }
    50% { box-shadow: 0 0 20px rgba(255,0,0,0.7), 0 0 40px rgba(255,0,0,0.2); }
}
.low-hp-pulse { animation: low-hp-pulse 1s ease-in-out infinite; }

/* 护盾光环 - 玩家卡片金光 + 旋转能量环 */
@keyframes shield-glow {
    0%, 100% { box-shadow: 0 0 15px rgba(255,215,0,0.5), inset 0 0 20px rgba(255,215,0,0.12); border-color: rgba(255,215,0,0.7); }
    50% { box-shadow: 0 0 32px rgba(255,215,0,0.85), inset 0 0 30px rgba(255,215,0,0.18), 0 0 50px rgba(100,181,246,0.3); border-color: rgba(255,215,0,1); }
}
@keyframes shield-ring-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.has-shield {
    animation: shield-glow 1.5s ease-in-out infinite !important;
    border-color: rgba(255,215,0,0.7) !important;
    position: relative;
}
.has-shield::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid transparent;
    background: conic-gradient(from 0deg, transparent 0%, rgba(255,215,0,0.8) 25%, transparent 50%, rgba(100,181,246,0.6) 75%, transparent 100%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: shield-ring-rotate 3s linear infinite;
    pointer-events: none;
    z-index: 10;
}
.has-shield::after {
    content: '🛡';
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 18px;
    filter: drop-shadow(0 0 6px rgba(255,215,0,0.9));
    animation: shield-icon-pulse 1s ease-in-out infinite;
    z-index: 11;
    pointer-events: none;
}
/* 护盾图标动画 */
@keyframes shield-icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}
.shield-active { animation: shield-icon-pulse 1s ease-in-out infinite; display: inline-block; }

/* 治疗飘字绿色 */
.damage-number.heal {
    color: #4caf50;
    text-shadow: 2px 2px 0 #1b5e20, -1px -1px 0 #1b5e20;
}
.damage-number.shield-absorb {
    color: #ffd700;
    text-shadow: 2px 2px 0 #f57f17, -1px -1px 0 #f57f17;
}
.damage-number.burn {
    color: #ff5722;
    text-shadow: 2px 2px 0 #bf360c, -1px -1px 0 #bf360c;
}
.damage-number.shield-dmg {
    color: #ffd700;
    text-shadow: 2px 2px 0 #f57f17, -1px -1px 0 #f57f17;
}
.damage-number.dmg-fire {
    color: #ff5722;
    text-shadow: 2px 2px 0 #bf360c, -1px -1px 0 #bf360c;
}
.damage-number.dmg-ice {
    color: #4fc3f7;
    text-shadow: 2px 2px 0 #01579b, -1px -1px 0 #01579b;
}
.damage-number.dmg-thunder {
    color: #ce93d8;
    text-shadow: 2px 2px 0 #4a148c, -1px -1px 0 #4a148c;
}

/* 防御触发瞬时闪光 */
@keyframes defend-pop {
    0% { box-shadow: 0 0 0 0 rgba(100,181,246,0.8); }
    50% { box-shadow: 0 0 0 12px rgba(100,181,246,0); }
    100% { box-shadow: 0 0 0 0 rgba(100,181,246,0); }
}
.defend-shield { animation: defend-pop 0.6s ease-out; }

/* 功法命中大震（比普攻大） */
@keyframes skill-hit-shake {
    0%, 100% { transform: translate(0, 0) scale(1); }
    15% { transform: translate(-10px, 4px) scale(0.97); }
    30% { transform: translate(10px, -4px) scale(1.03); }
    45% { transform: translate(-7px, 2px) scale(0.98); }
    60% { transform: translate(7px, -2px) scale(1.02); }
    75% { transform: translate(-3px, 1px); }
}
.enemy-skill-hit { animation: skill-hit-shake 0.5s ease-in-out; }

/* 战斗入场动画 */
@keyframes combat-enter {
    0% { opacity: 0; transform: scale(1.1); filter: brightness(3); }
    100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
.combat-enter { animation: combat-enter 0.6s ease-out; }

/* Boss入场 */
@keyframes boss-enter {
    0% { opacity: 0; transform: scale(0.5); filter: brightness(5) blur(10px); }
    50% { opacity: 1; transform: scale(1.15); filter: brightness(2) blur(3px); }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); filter: brightness(1) blur(0); }
}
.boss-enter { animation: boss-enter 1.0s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Boss狂暴视觉 */
@keyframes boss-enrage {
    0% { filter: brightness(1) saturate(1); }
    30% { filter: brightness(2) saturate(2) hue-rotate(-10deg); }
    60% { filter: brightness(1.5) saturate(1.5); }
    100% { filter: brightness(1.2) saturate(1.3); }
}
.boss-enrage-anim { animation: boss-enrage 1.2s ease-out forwards; }

/* Boss蓄力警告（危险脉冲红光） */
@keyframes boss-charging-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255,0,0,0.4), 0 0 40px rgba(255,0,0,0.1); border-color: #ff1744; }
    50% { box-shadow: 0 0 40px rgba(255,0,0,0.8), 0 0 80px rgba(255,0,0,0.3); border-color: #ff5252; }
}
.boss-charging {
    animation: boss-charging-pulse 0.6s ease-in-out infinite !important;
    border-color: #ff1744 !important;
}

/* Boss必杀释放震屏 */
@keyframes boss-special-shake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-10px, 6px); }
    20% { transform: translate(10px, -6px); }
    30% { transform: translate(-8px, -4px); }
    40% { transform: translate(8px, 4px); }
    50% { transform: translate(-6px, 3px); }
    60% { transform: translate(6px, -3px); }
    70% { transform: translate(-4px, 2px); }
    80% { transform: translate(4px, -2px); }
    90% { transform: translate(-2px, 1px); }
}
.boss-special-shake { animation: boss-special-shake 0.8s ease-in-out; }

/* 防御姿态视觉 */
@keyframes defense-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(100,181,246,0.3); border-color: rgba(100,181,246,0.4); }
    50% { box-shadow: 0 0 20px rgba(100,181,246,0.6); border-color: rgba(100,181,246,0.7); }
}
.defending { animation: defense-glow 1s ease-in-out infinite !important; }

/* 道侣倒地灰色 */
@keyframes companion-faint {
    0% { filter: grayscale(0); opacity: 1; }
    100% { filter: grayscale(1) brightness(0.5); opacity: 0.5; }
}
.fainted { animation: companion-faint 0.5s ease-out forwards !important; }

/* ============ 输入框美化 ============ */
input[type="text"] {
    background: var(--bg-dark) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    color: var(--text) !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
    outline: none;
    transition: all 0.2s;
}

input[type="text"]:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(212, 168, 83, 0.2);
}

/* ============ 滚动条美化 ============ */
::-webkit-scrollbar {
    width: 4px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* ============ 天劫敌人视觉效果 ============ */
@keyframes tribulation-pulse {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(124, 77, 255, 0.6), 0 0 40px rgba(255, 152, 0, 0.3), 0 0 60px rgba(124, 77, 255, 0.2);
        border-color: #7c4dff;
    }
    33% { 
        box-shadow: 0 0 30px rgba(255, 152, 0, 0.8), 0 0 60px rgba(255, 87, 34, 0.4), 0 0 80px rgba(255, 152, 0, 0.2);
        border-color: #ff9800;
    }
    66% { 
        box-shadow: 0 0 25px rgba(255, 87, 34, 0.7), 0 0 50px rgba(124, 77, 255, 0.35), 0 0 70px rgba(255, 87, 34, 0.2);
        border-color: #ff5722;
    }
}
.tribulation-enemy {
    animation: tribulation-pulse 1.5s ease-in-out infinite !important;
    border: 2px solid #7c4dff !important;
}
.tribulation-enemy::before {
    content: '';
    position: absolute;
    top: -3px; left: -3px; right: -3px; bottom: -3px;
    border-radius: 8px;
    background: linear-gradient(135deg, #7c4dff, #ff9800, #ff5722, #7c4dff);
    background-size: 400% 400%;
    animation: tribulation-border 2s ease infinite;
    z-index: -1;
    opacity: 0.7;
}
@keyframes tribulation-border {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


/* ============ 战斗敌方面板 V2：独立图层与八元素反馈 ============ */
#combatView {
    isolation: isolate;
    overflow: hidden;
}

.combat-impact-flash {
    position: absolute;
    inset: 0;
    z-index: 80;
    pointer-events: none;
    opacity: 0;
    background: transparent;
    will-change: opacity;
}

.enemy-section {
    min-height: 96px;
    gap: 14px;
    overflow: visible;
}

.enemy-motion-layer {
    position: relative;
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 92px;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
}

.enemy-portrait-shell {
    --enemy-element: #ff6b6b;
    --enemy-element-rgb: 255, 107, 107;
    position: relative;
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
    isolation: isolate;
}

.enemy-aura-layer {
    position: absolute;
    inset: -7px;
    z-index: 0;
    border-radius: 18px;
    pointer-events: none;
    opacity: 0;
}

.enemy-aura-layer::before,
.enemy-aura-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
}

.enemy-portrait-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 11px;
    font-size: 40px;
    z-index: 1;
    transform: translateZ(0);
}

.enemy-portrait-content img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 11px;
}

.enemy-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.enemy-status-overlay,
.enemy-hit-layer {
    position: absolute;
    inset: 0;
    border-radius: 11px;
    pointer-events: none;
    overflow: hidden;
}

.enemy-status-overlay { z-index: 3; }
.enemy-hit-layer {
    z-index: 4;
    opacity: 0;
    background: radial-gradient(circle at 50% 50%, rgba(var(--hit-rgb, 255, 255, 255), 0.95) 0%, rgba(var(--hit-rgb, 255, 255, 255), 0.42) 38%, transparent 76%);
    mix-blend-mode: screen;
    will-change: opacity, transform;
}

.enemy-status-fx {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.enemy-portrait-shell.has-frozen .enemy-status-frozen,
.enemy-portrait-shell.has-paralyzed .enemy-status-paralyzed,
.enemy-portrait-shell.has-burning .enemy-status-burning {
    opacity: 1;
}

.enemy-status-frozen {
    z-index: 1;
    background:
        linear-gradient(135deg, rgba(79, 195, 247, 0.36), rgba(0, 188, 212, 0.12) 56%, rgba(227, 247, 255, 0.26)),
        repeating-linear-gradient(45deg, transparent 0 10px, rgba(255, 255, 255, 0.09) 10px 11px);
    box-shadow: inset 0 0 20px rgba(79, 195, 247, 0.48);
    animation: enemy-frozen-overlay 1.8s ease-in-out infinite;
}

.enemy-status-paralyzed {
    z-index: 2;
    background: repeating-linear-gradient(105deg, transparent 0 7px, rgba(206, 147, 216, 0.42) 7px 9px, transparent 9px 17px);
    background-size: 170% 100%;
    mix-blend-mode: screen;
    animation: enemy-paralyze-current 0.42s steps(3) infinite;
}

.enemy-status-burning {
    z-index: 3;
    background:
        radial-gradient(ellipse at 50% 112%, rgba(255, 61, 0, 0.62) 0%, rgba(255, 87, 34, 0.32) 38%, transparent 72%),
        linear-gradient(0deg, rgba(255, 87, 34, 0.17), transparent 62%);
    mix-blend-mode: screen;
    animation: enemy-burning-overlay 0.72s ease-in-out infinite alternate;
}

.enemy-portrait-shell.has-paralyzed .enemy-portrait-content {
    animation: enemy-paralyze-content 0.18s steps(2) infinite;
}

.enemy-status-badges {
    position: absolute;
    z-index: 7;
    top: -7px;
    right: -12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    pointer-events: none;
}

.enemy-status-badge {
    min-width: 24px;
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(10, 10, 24, 0.9);
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.42);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.enemy-status-badge.status-frozen { color: #9be8ff; border-color: rgba(79, 195, 247, 0.6); }
.enemy-status-badge.status-paralyzed { color: #e5b7ff; border-color: rgba(206, 147, 216, 0.6); }
.enemy-status-badge.status-burning { color: #ffad88; border-color: rgba(255, 87, 34, 0.65); }
.enemy-status-badge.status-poisoned { color: #b9f6ca; border-color: rgba(102, 187, 106, 0.6); }
.enemy-status-badge.status-bleeding { color: #ff8a80; border-color: rgba(229, 57, 53, 0.6); }
.enemy-status-badge.status-weakened { color: #ffe0b2; border-color: rgba(255, 183, 77, 0.55); }

.enemy-info {
    min-width: 0;
    position: relative;
}

.enemy-heading-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.enemy-heading-row .enemy-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enemy-heading-row .enemy-type {
    flex: 0 0 auto;
    margin-left: 0;
}

.enemy-alert {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 3px 8px;
    border: 1px solid rgba(255, 82, 82, 0.72);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(183, 28, 28, 0.7), rgba(255, 82, 82, 0.18));
    box-shadow: 0 0 12px rgba(255, 23, 68, 0.24);
    color: #ffd6d6;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
}

/* 克制关系芯片：气血条下方空白区，承接原决策提示条首段（⚡克制/◇属性·敌攻） */
.enemy-relation-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 3px 9px;
    width: fit-content;
    border: 1px solid rgba(212, 168, 79, 0.45);
    border-radius: 999px;
    background: rgba(212, 168, 79, 0.08);
    color: #f4d889;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.enemy-relation-chip.is-counter {
    border-color: rgba(255, 213, 79, 0.75);
    background: rgba(255, 213, 79, 0.14);
    color: #ffe082;
    box-shadow: 0 0 10px rgba(255, 213, 79, 0.18);
}
/* ≤420px：与蓄力警告共存时垂直余量仅 2px，收紧芯片间距 */
@media (max-width: 420px) {
    .enemy-relation-chip { margin-top: 3px; padding: 2px 7px; }
}

/* 八元素统一颜色映射 */
.enemy-portrait-shell[data-element="metal"] { --enemy-element: #d8d8e6; --enemy-element-rgb: 216, 216, 230; }
.enemy-portrait-shell[data-element="wood"] { --enemy-element: #66bb6a; --enemy-element-rgb: 102, 187, 106; }
.enemy-portrait-shell[data-element="water"] { --enemy-element: #42a5f5; --enemy-element-rgb: 66, 165, 245; }
.enemy-portrait-shell[data-element="fire"] { --enemy-element: #ff5722; --enemy-element-rgb: 255, 87, 34; }
.enemy-portrait-shell[data-element="earth"] { --enemy-element: #c79a54; --enemy-element-rgb: 199, 154, 84; }
.enemy-portrait-shell[data-element="wind"] { --enemy-element: #80cbc4; --enemy-element-rgb: 128, 203, 196; }
.enemy-portrait-shell[data-element="thunder"] { --enemy-element: #ce93d8; --enemy-element-rgb: 206, 147, 216; }
.enemy-portrait-shell[data-element="ice"] { --enemy-element: #81d4fa; --enemy-element-rgb: 129, 212, 250; }

.enemy-portrait-shell.is-tribulation .enemy-aura-layer,
.enemy-portrait-shell.is-boss-charging .enemy-aura-layer,
.enemy-portrait-shell.is-boss-enraged .enemy-aura-layer {
    opacity: 1;
}

.enemy-portrait-shell.is-tribulation .enemy-aura-layer::before {
    opacity: 0.94;
    background: conic-gradient(from 0deg, #7c4dff, #ff9800, #ff5722, #7c4dff, #42a5f5, #7c4dff);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    filter: drop-shadow(0 0 8px rgba(124, 77, 255, 0.8));
    animation: enemy-tribulation-ring 2.4s linear infinite;
}

.enemy-portrait-shell.is-boss-charging .enemy-aura-layer {
    background: radial-gradient(circle, rgba(255,23,68,0.25) 0%, transparent 70%);
    animation: boss-charging-bg 0.68s ease-in-out infinite;
}
.enemy-portrait-shell.is-boss-charging .enemy-aura-layer::before {
    opacity: 1;
    inset: -6px;
    border-radius: inherit;
    background: conic-gradient(from 0deg, transparent 0%, rgba(255,23,68,0.9) 15%, rgba(255,152,0,0.7) 30%, transparent 45%, transparent 55%, rgba(255,23,68,0.9) 70%, rgba(255,152,0,0.7) 85%, transparent 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    animation: boss-charging-ring 1.8s linear infinite;
}
.enemy-portrait-shell.is-boss-charging .enemy-aura-layer::after {
    opacity: 1;
    inset: -3px;
    border: 3px solid rgba(255, 23, 68, 0.95);
    box-shadow: 0 0 18px rgba(255, 23, 68, 0.9), 0 0 40px rgba(255, 82, 82, 0.55), inset 0 0 20px rgba(255, 23, 68, 0.2);
    animation: enemy-charging-aura 0.55s ease-in-out infinite;
}

.enemy-portrait-shell.is-boss-enraged .enemy-aura-layer {
    background: radial-gradient(circle, rgba(255, 61, 0, 0.38), transparent 68%);
    animation: enemy-enrage-aura 1.05s ease-out;
}

@keyframes enemy-frozen-overlay {
    0%, 100% { opacity: 0.62; }
    50% { opacity: 0.9; }
}

@keyframes enemy-paralyze-current {
    0% { background-position: 0 0; opacity: 0.5; }
    50% { background-position: 28px 0; opacity: 0.9; }
    100% { background-position: 56px 0; opacity: 0.58; }
}

@keyframes enemy-paralyze-content {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-1px, 1px); }
    75% { transform: translate(1px, -1px); }
}

@keyframes enemy-burning-overlay {
    0% { opacity: 0.5; transform: translateY(1px) scale(0.99); }
    100% { opacity: 0.88; transform: translateY(-1px) scale(1.01); }
}

@keyframes enemy-tribulation-ring {
    to { transform: rotate(360deg); }
}

@keyframes enemy-charging-aura {
    0%, 100% { transform: scale(0.96); opacity: 0.65; }
    50% { transform: scale(1.08); opacity: 1; }
}
@keyframes boss-charging-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes boss-charging-bg {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes enemy-enrage-aura {
    0% { transform: scale(0.7); opacity: 0; filter: brightness(2.2); }
    45% { transform: scale(1.16); opacity: 1; filter: brightness(1.8); }
    100% { transform: scale(1); opacity: 0.78; filter: brightness(1); }
}


/* 八元素命中闪光 - 差异化特效 */
@keyframes hit-fire {
    0% { opacity: 0; transform: scale(0.6); background: radial-gradient(circle at 50% 70%, rgba(255,152,0,0.9), rgba(255,87,34,0.5) 40%, transparent 70%); }
    30% { opacity: 1; transform: scale(1.1); background: radial-gradient(circle at 50% 60%, rgba(255,235,59,0.95), rgba(255,87,34,0.8) 35%, rgba(255,0,0,0.3) 65%, transparent 80%); }
    100% { opacity: 0; transform: scale(1.3) translateY(-6px); background: radial-gradient(circle at 50% 40%, rgba(255,87,34,0.6), rgba(255,0,0,0.2) 50%, transparent 75%); }
}
@keyframes hit-ice {
    0% { opacity: 0; transform: scale(0.7); }
    25% { opacity: 0.95; transform: scale(1.05); background: radial-gradient(cross, rgba(255,255,255,0.95) 0%, rgba(129,212,250,0.8) 30%, rgba(0,188,212,0.4) 60%, transparent 75%); }
    50% { opacity: 0.8; transform: scale(1.12); }
    100% { opacity: 0; transform: scale(1.2); background: radial-gradient(circle, rgba(129,212,250,0.5), rgba(0,188,212,0.2) 50%, transparent 70%); }
}
@keyframes hit-thunder {
    0% { opacity: 0; transform: scale(0.5); }
    15% { opacity: 1; transform: scale(1.15); background: radial-gradient(circle, rgba(255,255,255,0.98), rgba(206,147,216,0.9) 25%, rgba(156,39,176,0.5) 55%, transparent 75%); }
    25% { opacity: 0.3; transform: scale(1.05); }
    40% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1.18); }
}
@keyframes hit-earth {
    0% { opacity: 0; transform: scale(0.6) translateY(-4px); }
    35% { opacity: 0.9; transform: scale(1.1) translateY(2px); background: radial-gradient(circle at 50% 30%, rgba(255,235,59,0.7), rgba(199,154,84,0.8) 40%, rgba(109,76,65,0.5) 70%, transparent 85%); }
    100% { opacity: 0; transform: scale(1.15) translateY(4px); }
}
@keyframes hit-wind {
    0% { opacity: 0; transform: scale(0.6) rotate(-5deg); }
    40% { opacity: 0.85; transform: scale(1.15) rotate(3deg); background: linear-gradient(135deg, rgba(128,203,196,0.8), rgba(0,150,136,0.5) 50%, transparent 75%), radial-gradient(ellipse, rgba(255,255,255,0.3), transparent 60%); }
    100% { opacity: 0; transform: scale(1.25) rotate(8deg) translateX(6px); }
}
@keyframes hit-metal {
    0% { opacity: 0; transform: scale(0.6); }
    30% { opacity: 1; transform: scale(1.08); background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.9) 45%, rgba(236,239,241,0.6) 55%, transparent 70%), radial-gradient(circle, rgba(236,239,241,0.7), rgba(96,125,139,0.3) 50%, transparent 70%); }
    100% { opacity: 0; transform: scale(1.15); }
}
@keyframes hit-wood {
    0% { opacity: 0; transform: scale(0.6); }
    35% { opacity: 0.85; transform: scale(1.1); background: radial-gradient(circle at 40% 60%, rgba(165,214,167,0.8), rgba(102,187,106,0.7) 40%, rgba(46,125,50,0.4) 70%, transparent 85%); }
    100% { opacity: 0; transform: scale(1.2); }
}
@keyframes hit-water {
    0% { opacity: 0; transform: scale(0.6); }
    35% { opacity: 0.85; transform: scale(1.12); background: radial-gradient(ellipse at 50% 60%, rgba(100,181,246,0.8), rgba(66,165,245,0.6) 40%, rgba(21,101,192,0.3) 70%, transparent 80%); }
    100% { opacity: 0; transform: scale(1.2) translateY(3px); }
}
.enemy-hit-layer[data-element="metal"] { --hit-rgb: 236, 239, 241; }
.enemy-hit-layer[data-element="wood"] { --hit-rgb: 102, 187, 106; }
.enemy-hit-layer[data-element="water"] { --hit-rgb: 66, 165, 245; }
.enemy-hit-layer[data-element="fire"] { --hit-rgb: 255, 87, 34; }
.enemy-hit-layer[data-element="earth"] { --hit-rgb: 199, 154, 84; }
.enemy-hit-layer[data-element="wind"] { --hit-rgb: 128, 203, 196; }
.enemy-hit-layer[data-element="thunder"] { --hit-rgb: 206, 147, 216; }
.enemy-hit-layer[data-element="ice"] { --hit-rgb: 129, 212, 250; }
.enemy-hit-layer[data-element="neutral"] { --hit-rgb: 255, 255, 255; }

/* 元素命中特效（通过enemy-portrait-shell的伪元素实现，与基础闪光层独立） */
@keyframes el-fire-burst {
    0% { opacity: 0; transform: scale(0.4) translateY(8px); }
    25% { opacity: 1; transform: scale(1.1) translateY(-4px); }
    60% { opacity: 0.8; transform: scale(1.2) translateY(-12px); }
    100% { opacity: 0; transform: scale(0.8) translateY(-24px); }
}
@keyframes el-ice-shatter {
    0% { opacity: 0; transform: scale(0.6); }
    20% { opacity: 1; transform: scale(1.05); }
    50% { opacity: 0.7; transform: scale(1.15); }
    100% { opacity: 0; transform: scale(1.3); }
}
@keyframes el-thunder-zap {
    0% { opacity: 0; transform: scale(0.3); }
    10% { opacity: 1; transform: scale(1.2); }
    20% { opacity: 0.2; transform: scale(1.0); }
    35% { opacity: 1; transform: scale(1.15); }
    55% { opacity: 0.3; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1.2); }
}
@keyframes el-earth-impact {
    0% { opacity: 0; transform: scale(0.5) translateY(-6px); }
    30% { opacity: 0.9; transform: scale(1.1) translateY(3px); }
    100% { opacity: 0; transform: scale(1.25) translateY(8px); }
}
@keyframes el-wind-slash {
    0% { opacity: 0; transform: scale(0.5) rotate(-10deg) translateX(-8px); }
    35% { opacity: 0.85; transform: scale(1.2) rotate(5deg) translateX(6px); }
    100% { opacity: 0; transform: scale(1.35) rotate(12deg) translateX(16px); }
}
@keyframes el-metal-flash {
    0% { opacity: 0; transform: scale(0.6); }
    25% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1.2); }
}
@keyframes el-wood-bloom {
    0% { opacity: 0; transform: scale(0.6); }
    40% { opacity: 0.8; transform: scale(1.15); }
    100% { opacity: 0; transform: scale(1.25); }
}
@keyframes el-water-splash {
    0% { opacity: 0; transform: scale(0.6) translateY(4px); }
    35% { opacity: 0.85; transform: scale(1.15) translateY(-2px); }
    100% { opacity: 0; transform: scale(1.3) translateY(6px); }
}

.enemy-portrait-shell[class*="hit-el-"]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 6;
}
.enemy-portrait-shell.hit-el-fire::after {
    background: radial-gradient(circle at 50% 75%, rgba(255,235,59,0.9) 0%, rgba(255,152,0,0.7) 25%, rgba(255,87,34,0.4) 50%, transparent 75%);
    animation: el-fire-burst 0.55s ease-out forwards;
    box-shadow: 0 -8px 20px rgba(255,87,34,0.5), 0 -4px 10px rgba(255,193,7,0.4);
}
.enemy-portrait-shell.hit-el-ice::after {
    background: radial-gradient(cross, rgba(255,255,255,0.9) 0%, rgba(129,212,250,0.7) 30%, rgba(0,188,212,0.3) 60%, transparent 80%);
    animation: el-ice-shatter 0.5s ease-out forwards;
    box-shadow: 0 0 20px rgba(129,212,250,0.6), inset 0 0 15px rgba(255,255,255,0.3);
}
.enemy-portrait-shell.hit-el-thunder::after {
    background: radial-gradient(circle, rgba(255,255,255,0.98) 0%, rgba(225,190,231,0.8) 20%, rgba(206,147,216,0.5) 45%, rgba(156,39,176,0.2) 70%, transparent 85%);
    animation: el-thunder-zap 0.48s ease-out forwards;
    box-shadow: 0 0 25px rgba(206,147,216,0.8), 0 0 50px rgba(156,39,176,0.4);
}
.enemy-portrait-shell.hit-el-earth::after {
    background: radial-gradient(circle at 50% 35%, rgba(255,235,59,0.6) 0%, rgba(199,154,84,0.7) 35%, rgba(109,76,65,0.4) 65%, transparent 85%);
    animation: el-earth-impact 0.5s ease-out forwards;
    box-shadow: 0 6px 18px rgba(109,76,65,0.5), inset 0 4px 10px rgba(255,235,59,0.2);
}
.enemy-portrait-shell.hit-el-wind::after {
    background: linear-gradient(110deg, transparent 20%, rgba(128,203,196,0.7) 40%, rgba(255,255,255,0.4) 50%, rgba(0,150,136,0.5) 60%, transparent 80%);
    animation: el-wind-slash 0.45s ease-out forwards;
}
.enemy-portrait-shell.hit-el-metal::after {
    background: linear-gradient(45deg, transparent 35%, rgba(255,255,255,0.85) 45%, rgba(236,239,241,0.6) 55%, transparent 65%), radial-gradient(circle, rgba(236,239,241,0.5), transparent 70%);
    animation: el-metal-flash 0.35s ease-out forwards;
    box-shadow: 0 0 18px rgba(236,239,241,0.6);
}
.enemy-portrait-shell.hit-el-wood::after {
    background: radial-gradient(circle at 45% 55%, rgba(200,230,201,0.7) 0%, rgba(102,187,106,0.6) 35%, rgba(46,125,50,0.3) 65%, transparent 85%);
    animation: el-wood-bloom 0.5s ease-out forwards;
    box-shadow: 0 0 15px rgba(102,187,106,0.5);
}
.enemy-portrait-shell.hit-el-water::after {
    background: radial-gradient(ellipse at 50% 65%, rgba(144,202,249,0.7) 0%, rgba(66,165,245,0.6) 35%, rgba(21,101,192,0.3) 65%, transparent 85%);
    animation: el-water-splash 0.5s ease-out forwards;
    box-shadow: 0 4px 15px rgba(66,165,245,0.5);
}

.damage-number-pooled {
    --damage-color: #ffeb3b;
    --damage-outline: #d32f2f;
    display: block;
    width: max-content;
    max-width: min(180px, 46vw);
    margin: 0;
    color: var(--damage-color);
    text-shadow:
        2px 2px 0 var(--damage-outline),
        -1px -1px 0 var(--damage-outline),
        1px -1px 0 var(--damage-outline),
        -1px 1px 0 var(--damage-outline),
        0 0 10px color-mix(in srgb, var(--damage-color) 60%, transparent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    animation: none;
    contain: layout style paint;
    will-change: transform, opacity;
}

.damage-number-pooled[data-element="metal"] { --damage-color: #eceff1; --damage-outline: #455a64; }
.damage-number-pooled[data-element="wood"] { --damage-color: #81c784; --damage-outline: #1b5e20; }
.damage-number-pooled[data-element="water"] { --damage-color: #64b5f6; --damage-outline: #0d47a1; }
.damage-number-pooled[data-element="fire"] { --damage-color: #ff7043; --damage-outline: #bf360c; }
.damage-number-pooled[data-element="earth"] { --damage-color: #d7a85b; --damage-outline: #5d4037; }
.damage-number-pooled[data-element="wind"] { --damage-color: #80cbc4; --damage-outline: #00695c; }
.damage-number-pooled[data-element="thunder"] { --damage-color: #ce93d8; --damage-outline: #4a148c; }
.damage-number-pooled[data-element="ice"] { --damage-color: #81d4fa; --damage-outline: #01579b; }
.damage-number-pooled[data-element="neutral"] { --damage-color: #ffeb3b; --damage-outline: #d32f2f; }

.damage-number-pooled.crit {
    color: #ffd740;
    --damage-color: #ffd740;
    --damage-outline: #4a2600;
}

.damage-number-pooled.heal {
    --damage-color: #69f0ae;
    --damage-outline: #1b5e20;
}

.damage-number-pooled.burn {
    --damage-color: #ff7043;
    --damage-outline: #bf360c;
}

.damage-number-pooled.shield-dmg {
    --damage-color: #ffd740;
    --damage-outline: #f57f17;
}


.crit-text-pooled {
    animation: none;
    will-change: transform, opacity;
}


.death-particle-pooled {
    animation: none;
    transform: translate(-50%, -50%);
    contain: layout style paint;
    will-change: transform, opacity;
}

@media (max-width: 420px) {
    .enemy-section {
        gap: 10px;
    }

    .enemy-motion-layer {
        width: 88px;
        flex-basis: 88px;
    }

    .enemy-alert {
        max-width: 100%;
        padding-inline: 7px;
        font-size: 10px;
        letter-spacing: 0;
    }

    .enemy-status-badges {
        right: -8px;
    }

    /* 战斗界面移动端优化 */
    .combat-area {
        margin: 3px;
        margin-bottom: 0;
        padding: 4px 6px 0 6px;
    }

    .combat-log-middle {
        font-size: 11px;
        padding: 6px;
        min-height: 60px;
        max-height: 160px;
    }

    .player-portrait {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .combatant-card.player-card {
        min-width: 150px;
    }

    .combatant-card {
        padding: 6px;
    }

    /* 移动端全局优化 */
    .panel {
        padding: 12px 10px;
    }

    .panel-title {
        font-size: 16px;
        margin-bottom: 10px;
    }

    /* 按钮适配 */
    .action-btn, .primary-btn, .danger-btn, .secondary-btn {
        padding: 10px 14px;
        font-size: 13px;
        min-height: 40px;
    }

    .btn-row {
        gap: 6px;
        flex-wrap: wrap;
    }

    .btn-row .action-btn {
        flex: 1 1 auto;
        min-width: 80px;
        font-size: 12px;
        padding: 8px 10px;
    }

    /* 网格布局优化 */
    .grid-2, .grid-3 {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .family-bonus-grid {
        grid-template-columns: 1fr;
    }

    /* 商店/宗门面板 */
    .shop-item, .sect-item {
        padding: 8px 10px;
        font-size: 12px;
    }

    .shop-item-name, .sect-item-name {
        font-size: 13px;
    }

    /* 战斗界面 */
    .combat-actions {
        gap: 3px;
        margin: -1px 3px 3px 3px;
    }

    .combat-actions .action-btn {
        font-size: 11px;
        padding: 8px 6px;
    }

    .combat-log {
        font-size: 10px;
        padding: 3px 5px;
        margin-top: 2px;
        min-height: 0;
    }

    .skill-select-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .skill-select-item {
        padding: 8px;
        font-size: 12px;
    }

    /* 地图/区域 */
    .location-card {
        padding: 10px;
    }

    .location-card h4 {
        font-size: 14px;
    }

    /* 弹窗 */
    .modal-content {
        width: 95%;
        max-width: 95%;
        padding: 16px 12px;
    }

    .modal-title {
        font-size: 16px;
    }

    /* 成就面板 */
    .achievement-grid {
        grid-template-columns: 1fr;
    }

    /* 家族面板 */
    .family-stat-row {
        font-size: 11px;
    }

    .family-bonus-item {
        padding: 6px 8px;
    }

    .fb-val {
        font-size: 12px;
    }

    /* 天劫特效适配 */
    .tribulation-wave-text {
        font-size: 20px;
        top: 15%;
    }

    .tribulation-success-text,
    .tribulation-fail-text {
        font-size: 16px;
        top: 20%;
    }

    /* 修炼进度条 */
    .progress-bar {
        height: 14px;
    }

    .progress-label {
        font-size: 10px;
    }

    /* 物品列表 */
    .item-list-item {
        padding: 8px;
        font-size: 12px;
    }

    /* 底部导航 */
    .bottom-nav {
        padding: 4px 2px;
    }

    .bottom-nav .nav-btn {
        font-size: 10px;
        padding: 6px 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .enemy-status-frozen,
    .enemy-status-paralyzed,
    .enemy-status-burning,
    .enemy-portrait-shell.has-paralyzed .enemy-portrait-content,
    .enemy-portrait-shell.is-tribulation .enemy-aura-layer::before,
    .enemy-portrait-shell.is-boss-charging .enemy-aura-layer::after,
    .enemy-portrait-shell.is-boss-enraged .enemy-aura-layer,
    .low-hp-pulse,
    .has-shield,
    .defending,
    .shield-active {
        animation: none !important;
    }

    .enemy-status-frozen { opacity: 0.72; }
    .enemy-status-paralyzed { opacity: 0.68; background-position: 16px 0; }
    .enemy-status-burning { opacity: 0.7; transform: none; }
    .enemy-status-fx {
        transition: none;
    }
}

/* ============ P2-6 家族势力面板 ============ */
.family-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(139,69,19,0.2), rgba(212,175,55,0.15));
    border: 1px solid rgba(212,175,55,0.3);
    border-radius: 10px;
    margin-bottom: 10px;
}
.family-crest {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #8B4513, #D4AF37);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(212,175,55,0.4);
}
.family-title { flex: 1; }
.family-name {
    font-size: 20px;
    font-weight: bold;
    color: var(--gold, #D4AF37);
    text-shadow: 0 0 8px rgba(212,175,55,0.3);
}
.family-level {
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 2px;
}
.family-stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text);
    margin-top: 6px;
    flex-wrap: wrap;
    gap: 4px;
}
.family-bonus-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
}
.family-bonus-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.fb-icon { font-size: 18px; }
.fb-label { font-size: 12px; color: var(--text-dim); flex: 1; }
.fb-val { font-size: 14px; font-weight: bold; color: var(--accent); }
.family-alliance-list {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.family-alliance-item {
    padding: 8px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    border-left: 3px solid var(--primary);
}
.fa-name {
    font-weight: bold;
    font-size: 14px;
}
.fa-tier {
    font-size: 11px;
    margin-left: 6px;
    padding: 1px 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    color: var(--text-dim);
}
.fa-sub {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 2px;
}

/* ============ 天劫视觉特效 ============ */

/* 天劫屏幕震动 */
@keyframes tribulation-shake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-8px, 5px); }
    20% { transform: translate(8px, -5px); }
    30% { transform: translate(-6px, -4px); }
    40% { transform: translate(6px, 4px); }
    50% { transform: translate(-5px, 3px); }
    60% { transform: translate(5px, -3px); }
    70% { transform: translate(-3px, 2px); }
    80% { transform: translate(3px, -2px); }
    90% { transform: translate(-1px, 1px); }
}

.tribulation-screen-shake {
    animation: tribulation-shake 0.6s ease-in-out;
}

/* 天劫闪电闪光 */
@keyframes tribulation-flash {
    0% { opacity: 0; }
    5% { opacity: 1; }
    15% { opacity: 0.8; }
    25% { opacity: 0.3; }
    35% { opacity: 0.9; }
    50% { opacity: 0; }
    100% { opacity: 0; }
}

.tribulation-lightning-flash {
    animation: tribulation-flash 1.5s ease-out;
}

/* 天劫天空变暗 */
@keyframes tribulation-sky-darken {
    0% { filter: brightness(1); }
    100% { filter: brightness(0.55) saturate(0.4); }
}

.tribulation-sky-dark {
    animation: tribulation-sky-darken 1s ease-in forwards;
    filter: brightness(0.55) saturate(0.4);
}

/* 渡劫成功金光 */
@keyframes tribulation-glow {
    0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
    30% { box-shadow: 0 0 60px 20px rgba(255, 215, 0, 0.6), 0 0 120px 40px rgba(255, 200, 0, 0.3); }
    70% { box-shadow: 0 0 40px 10px rgba(255, 215, 0, 0.4), 0 0 80px 20px rgba(255, 200, 0, 0.2); }
    100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

.tribulation-success-glow {
    animation: tribulation-glow 3s ease-out;
}

/* 渡劫失败红色闪烁 */
@keyframes tribulation-fail-flash {
    0% { background: rgba(255, 0, 0, 0); }
    15% { background: rgba(255, 0, 0, 0.5); }
    30% { background: rgba(255, 0, 0, 0.1); }
    45% { background: rgba(255, 0, 0, 0.4); }
    60% { background: rgba(255, 0, 0, 0.05); }
    75% { background: rgba(255, 0, 0, 0.3); }
    100% { background: rgba(255, 0, 0, 0); }
}

.tribulation-fail-red {
    animation: tribulation-fail-flash 2s ease-out;
}

/* 雷劫波次公告动画 */
@keyframes tribulation-wave-announce {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
    30% { transform: translate(-50%, -50%) scale(0.92); }
    45% { transform: translate(-50%, -50%) scale(1.04); }
    60% { transform: translate(-50%, -50%) scale(0.98); }
    75% { transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
}

.tribulation-wave-announce {
    animation: tribulation-wave-announce 2.5s ease-out forwards;
}

/* 天劫闪电覆盖层（全屏闪光） */
.tribulation-overlay {
    position: fixed;
    inset: 0;
    z-index: 99;
    pointer-events: none;
    max-width: 480px;
    margin: 0 auto;
}

.tribulation-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(124, 77, 255, 0.4), transparent 70%);
    pointer-events: none;
}

/* 天劫波次文字 */
.tribulation-wave-text {
    position: fixed;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    pointer-events: none;
    font-size: 28px;
    font-weight: bold;
    color: #f1c40f;
    text-shadow:
        0 0 20px rgba(241, 196, 15, 0.8),
        0 0 40px rgba(255, 152, 0, 0.5),
        0 0 60px rgba(124, 77, 255, 0.4);
    letter-spacing: 4px;
    white-space: nowrap;
}

/* 天劫成功文字 */
.tribulation-success-text {
    position: fixed;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    pointer-events: none;
    font-size: 32px;
    font-weight: bold;
    color: #ffd700;
    text-shadow:
        0 0 20px rgba(255, 215, 0, 0.9),
        0 0 40px rgba(255, 200, 0, 0.6),
        0 0 80px rgba(255, 180, 0, 0.3);
    letter-spacing: 6px;
    white-space: nowrap;
}

/* 天劫失败文字 */
.tribulation-fail-text {
    position: fixed;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    pointer-events: none;
    font-size: 30px;
    font-weight: bold;
    color: #ff4444;
    text-shadow:
        0 0 20px rgba(255, 0, 0, 0.8),
        0 0 40px rgba(255, 50, 50, 0.5),
        0 0 60px rgba(200, 0, 0, 0.3);
    letter-spacing: 6px;
    white-space: nowrap;
}

/* 天劫文字淡出 */
@keyframes tribulation-text-fadeout {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    70% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.05); }
    100% { opacity: 0; transform: translate(-50%, -60%) scale(1.1); }
}

.tribulation-text-fadeout {
    animation: tribulation-text-fadeout 2s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
    .tribulation-screen-shake,
    .tribulation-lightning-flash,
    .tribulation-sky-dark,
    .tribulation-success-glow,
    .tribulation-fail-red,
    .tribulation-wave-announce,
    .tribulation-text-fadeout {
        animation: none !important;
    }
    .tribulation-sky-dark { filter: none; }
}

/* ============ 存档管理面板 ============ */
.save-slot-card {
    background: linear-gradient(180deg, var(--bg-panel-light), var(--bg-panel));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    transition: all 0.2s;
}

.save-slot-card.save-slot-current {
    border-color: var(--primary);
    box-shadow: 0 0 12px rgba(212, 168, 83, 0.25);
}

.save-slot-empty {
    opacity: 0.7;
    border-style: dashed;
}

.save-slot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.save-slot-label {
    font-size: 15px;
    font-weight: bold;
    color: var(--primary-light);
}

.save-slot-badge {
    font-size: 11px;
    padding: 2px 10px;
    background: rgba(212, 168, 83, 0.2);
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: var(--primary-light);
    font-weight: bold;
}

.save-slot-status-empty {
    font-size: 13px;
    color: var(--text-dim);
}

.save-slot-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.save-slot-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 13px;
    line-height: 1.5;
}

.save-slot-info-label {
    color: var(--text-dim);
    font-size: 12px;
}

.save-slot-info-value {
    color: var(--text);
    font-weight: 500;
}

.save-slot-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.save-slot-actions .btn {
    font-size: 12px;
    padding: 8px 6px;
    min-height: 36px;
    text-align: center;
}

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

    .save-slot-label {
        font-size: 14px;
    }

    .save-slot-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    .save-slot-actions .btn {
        font-size: 11px;
        padding: 8px 4px;
        min-height: 34px;
    }

    .save-slot-info-row {
        font-size: 12px;
    }
}

/* ============ 新手引导系统 ============ */

/* 全屏覆盖层 */
#tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: auto;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 半透明遮罩 */
#tutorial-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1;
}

/* 目标元素高亮框 */
#tutorial-highlight {
    position: fixed;
    z-index: 2;
    border: 2px solid var(--primary-light, #f0d080);
    border-radius: 10px;
    box-shadow:
        0 0 8px rgba(240, 208, 128, 0.7),
        0 0 16px rgba(240, 208, 128, 0.4),
        0 0 32px rgba(240, 208, 128, 0.2),
        inset 0 0 8px rgba(240, 208, 128, 0.3);
    pointer-events: none;
    animation: tutorial-highlight-pulse 1.5s ease-in-out infinite;
}

#tutorial-target-proxy {
    position: fixed;
    display: none;
    z-index: 2;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
}
@keyframes tutorial-highlight-pulse {
    0%, 100% {
        box-shadow:
            0 0 8px rgba(240, 208, 128, 0.7),
            0 0 16px rgba(240, 208, 128, 0.4),
            0 0 32px rgba(240, 208, 128, 0.2),
            inset 0 0 8px rgba(240, 208, 128, 0.3);
    }
    50% {
        box-shadow:
            0 0 16px rgba(240, 208, 128, 0.9),
            0 0 32px rgba(240, 208, 128, 0.6),
            0 0 48px rgba(240, 208, 128, 0.3),
            inset 0 0 12px rgba(240, 208, 128, 0.5);
    }
}

/* 引导文字框 - 居中模式 */
#tutorial-box {
    position: fixed;
    z-index: 3;
    background: linear-gradient(180deg, rgba(24, 26, 53, 0.98), rgba(15, 16, 41, 0.98));
    border: 1px solid var(--border-gold, #c9a24e);
    border-radius: 14px;
    padding: 20px 18px 16px;
    max-width: 360px;
    width: calc(100vw - 32px);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(212, 168, 83, 0.15);
    backdrop-filter: blur(10px);
    animation: tutorial-box-enter 0.3s ease-out;
}

@keyframes tutorial-box-enter {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 居中定位 */
#tutorial-box.tutorial-box-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#tutorial-box.tutorial-box-target {
    /* 由JS动态设置left/top */
}

/* 引导标题 */
#tutorial-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--primary-light, #f0d080);
    text-shadow: 0 0 10px rgba(240, 208, 128, 0.4);
    margin-bottom: 10px;
    text-align: center;
    letter-spacing: 2px;
}

/* 引导文字 */
#tutorial-text {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text, #e8e6f0);
    margin-bottom: 16px;
    text-align: justify;
}

/* 按钮控制区 */
#tutorial-controls {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.tutorial-btn {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--border, #3d4070);
    min-height: 42px;
    position: relative;
    overflow: hidden;
}

.tutorial-btn:active {
    transform: scale(0.96);
}

.tutorial-btn-skip {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-dim, #9b9bc0);
    border-color: rgba(255, 255, 255, 0.15);
}

.tutorial-btn-skip:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.tutorial-btn-primary {
    background: linear-gradient(180deg, var(--primary, #d4a853), var(--primary-dark, #9a7530));
    color: var(--bg-deep, #0a0a18);
    border-color: var(--primary-light, #f0d080);
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(212, 168, 83, 0.35);
}

.tutorial-btn-primary:hover {
    box-shadow: 0 6px 16px rgba(212, 168, 83, 0.5);
}

/* 移动端适配 */
@media (max-width: 420px) {
    #tutorial-box {
        max-width: calc(100vw - 24px);
        padding: 16px 14px 14px;
    }

    #tutorial-title {
        font-size: 16px;
        letter-spacing: 1px;
    }

    #tutorial-text {
        font-size: 13px;
        line-height: 1.7;
    }

    .tutorial-btn {
        padding: 8px 16px;
        font-size: 13px;
        min-height: 38px;
    }
}

/* 减弱动画偏好 */
@media (prefers-reduced-motion: reduce) {
    #tutorial-highlight {
        animation: none;
    }

    #tutorial-box {
        animation: none;
    }
}

/* ================================================================
   战斗界面 v1.20 —— 卡牌化布局重构
   ================================================================ */

/* ---- 战斗头部 ---- */
.combat-header {
    padding: 8px 12px;
    background: linear-gradient(180deg, rgba(24,26,53,0.98), rgba(15,16,41,0.95));
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.combat-title {
    flex: 1;
    font-size: 16px;
    font-weight: bold;
    color: var(--danger);
    text-shadow: 0 0 8px rgba(255,107,107,0.5);
}
.combat-speed-btn {
    background: rgba(212,168,83,0.15);
    border: 1px solid rgba(212,168,83,0.4);
    color: var(--primary-light);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    white-space: nowrap;
}
.combat-speed-btn:hover {
    background: rgba(212,168,83,0.3);
    border-color: var(--primary-light);
}
.combat-speed-btn.active {
    background: rgba(212,168,83,0.4);
    border-color: var(--primary-light);
    color: #fff;
    box-shadow: 0 0 8px rgba(212,168,83,0.4);
}

/* 战斗结束返回按钮 - 亮色调，位于敌方头像右侧 */
.combat-exit-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 20;
    background: linear-gradient(135deg, #00e676, #69f0ae, #b9f6ca);
    color: #1b5e20;
    border: 2px solid #00c853;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(0,230,118,0.5), 0 0 20px rgba(0,230,118,0.3);
    transition: all 0.2s;
    animation: exit-btn-pulse 1.5s ease-in-out infinite;
    letter-spacing: 1px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.combat-exit-btn:active {
    transform: scale(0.94);
    box-shadow: 0 2px 6px rgba(0,230,118,0.4);
}
@keyframes exit-btn-pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(0,230,118,0.5), 0 0 20px rgba(0,230,118,0.3); }
    50% { box-shadow: 0 4px 18px rgba(0,230,118,0.7), 0 0 30px rgba(0,230,118,0.5); }
}

/* ---- 战斗区域 ---- */
.combat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px 10px 0 10px;
    background: linear-gradient(180deg, #1a0f2e 0%, #0d0d1a 100%);
    position: relative;
    overflow: hidden;
    gap: 0;
}
.combat-area::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at top, rgba(177,138,255,0.08), transparent 60%);
    pointer-events: none;
}

/* ---- 敌人区域 ---- */
.enemy-section {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
}
.enemy-motion-layer {
    position: relative;
    width: 106px;
    height: 106px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 106px;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
}
.enemy-portrait-shell {
    --enemy-element: #ff6b6b;
    --enemy-element-rgb: 255,107,107;
    position: relative;
    width: 106px;
    height: 106px;
    flex: 0 0 106px;
    isolation: isolate;
}
.enemy-aura-layer {
    position: absolute;
    inset: -8px;
    z-index: 0;
    border-radius: 18px;
    pointer-events: none;
    opacity: 0;
}
.enemy-aura-layer::before,
.enemy-aura-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
}
.enemy-portrait-frame {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: auto;
    height: auto;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--enemy-element);
    background: linear-gradient(145deg, rgba(var(--enemy-element-rgb),0.25), #120a15 72%);
    box-shadow: 0 0 18px rgba(var(--enemy-element-rgb),0.4), inset 0 0 16px rgba(0,0,0,0.3);
    display: block;
    cursor: zoom-in;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    transform: translateZ(0);
}
.enemy-portrait-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    font-size: 44px;
    z-index: 1;
    transform: translateZ(0);
}
.enemy-portrait-content img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 10px;
}
.enemy-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.enemy-status-overlay,
.enemy-hit-layer {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    overflow: hidden;
}
.enemy-status-overlay { z-index: 3; }
.enemy-hit-layer {
    z-index: 4;
    opacity: 0;
    background: radial-gradient(circle at 50% 50%, rgba(var(--hit-rgb,255,255,255),0.95) 0%, rgba(var(--hit-rgb,255,255,255),0.42) 38%, transparent 76%);
    mix-blend-mode: screen;
    will-change: opacity, transform;
}
.enemy-status-fx {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
.enemy-portrait-shell.has-frozen .enemy-status-frozen,
.enemy-portrait-shell.has-paralyzed .enemy-status-paralyzed,
.enemy-portrait-shell.has-burning .enemy-status-burning {
    opacity: 1;
}

/* ---- 敌人状态徽章（右上角竖排胶囊标签） ---- */
@keyframes enemy-badge-appear {
    0%   { opacity: 0; transform: translateX(8px) scale(0.7); }
    60%  { opacity: 1; transform: translateX(-2px) scale(1.08); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes enemy-badge-pulse-frozen {
    0%,100% { box-shadow: 0 2px 7px rgba(0,0,0,0.42), 0 0 8px rgba(79,195,247,0.4); }
    50%     { box-shadow: 0 2px 7px rgba(0,0,0,0.42), 0 0 14px rgba(79,195,247,0.7); }
}
.enemy-status-badge {
    animation: enemy-badge-appear 0.3s ease-out;
}
.enemy-status-badge.status-frozen {
    color: #9be8ff;
    border-color: rgba(79,195,247,0.7);
    background: rgba(5,20,40,0.92);
    animation: enemy-badge-appear 0.3s ease-out, enemy-badge-pulse-frozen 1.6s ease-in-out infinite;
}
.enemy-status-badge.status-burning {
    color: #ffcc99;
    border-color: rgba(255,110,40,0.7);
    background: rgba(40,15,5,0.92);
    text-shadow: 0 0 4px rgba(255,110,40,0.5);
}
.enemy-status-badge.status-paralyzed {
    color: #e5b7ff;
    border-color: rgba(206,147,216,0.7);
    background: rgba(30,10,40,0.92);
}
.enemy-status-badge.status-poisoned {
    color: #a5d6a7;
    border-color: rgba(102,187,106,0.7);
    background: rgba(10,30,15,0.92);
}
.enemy-status-badge.status-bleeding {
    color: #ef9a9a;
    border-color: rgba(244,67,54,0.6);
}
.enemy-status-badge.status-weakened {
    color: #b0bec5;
    border-color: rgba(144,164,174,0.5);
}

/* ---- 敌人信息区 ---- */
.enemy-info {
    flex: 1;
    min-width: 0;
    position: relative;
    padding-top: 2px;
}
.enemy-heading-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.enemy-name {
    font-weight: bold;
    color: var(--danger);
    font-size: 15px;
    text-shadow: 0 0 8px rgba(255,107,107,0.5);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.enemy-type {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 10px;
    color: #fff;
    font-weight: bold;
    flex: 0 0 auto;
    margin-left: 0;
}
.enemy-type.type-boss {
    color: #3a2800;
    text-shadow: none;
}
.enemy-type.type-tribulation {
    color: #00363a;
    text-shadow: none;
}
.enemy-alert {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 2px 8px;
    border: 1px solid rgba(255,82,82,0.72);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(183,28,28,0.7), rgba(255,82,82,0.18));
    box-shadow: 0 0 12px rgba(255,23,68,0.24);
    color: #ffd6d6;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.3px;
    animation: alert-pulse 1s ease-in-out infinite;
}
@keyframes alert-pulse {
    0%,100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.enemy-alert.hidden { display: none; }

/* 条内数值血条 */
.stat-bar.slim { height: 13px; border-radius: 7px; }
.char-stats .stat-bar .stat-fill,
.stat-bar.slim .stat-fill {
    border-radius: inherit;
}
.stat-label-in {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    font-size: 9px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.6);
    z-index: 2;
    pointer-events: none;
}
.stat-label-in .l { color: rgba(255,255,255,0.95); }
.stat-label-in .r { color: rgba(255,255,255,0.9); font-variant-numeric: tabular-nums; }

/* ---- 战斗日志 ---- */
.combat-log {
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px;
    margin: 4px 0 0 0;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
    font-size: 12px;
    line-height: 1.65;
    position: relative;
    z-index: 1;
    min-height: 0;
}
.combat-log .msg { margin-bottom: 3px; padding: 1px 0; }
.combat-log .msg.player { color: #90caf9; }
.combat-log .msg.enemy { color: #ef9a9a; }
.combat-log .msg.crit { color: #ffd740; font-weight: bold; }
.combat-log .msg.heal { color: #a5d6a7; }
.combat-log .msg.sys { color: var(--text-dim); font-style: italic; }
.combat-log .msg.boss-warn { color: #ff5252; font-weight: bold; }
.combat-log .msg.companion { color: #f48fb1; }
.combat-log .msg.positive { color: #a5d6a7; }
.combat-log .msg.danger { color: #ef5350; }
.combat-log .msg.warning { color: #ffb74d; }
.combat-log .msg.event { color: #ce93d8; }
.combat-log .msg.info { color: #90caf9; }
.combat-log .msg.rare { color: #ffd740; font-weight: bold; }

/* ---- 我方卡牌行 ---- */
.allies-row {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    padding-top: 2px;
}

/* 人物卡牌 - 全身立绘 */
.char-card {
    border-radius: 10px;
    border: 2px solid var(--border);
    overflow: hidden;
    position: relative;
    width: 106px;
    aspect-ratio: 2 / 3;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #1a1a2e;
}
.char-fullbody {
    position: absolute;
    inset: 0;
}
.char-fullbody-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.char-fullbody-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
}
.char-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.10) 40%,
        rgba(0,0,0,0.50) 68%,
        rgba(0,0,0,0.90) 100%);
    pointer-events: none;
}
.player-card {
    border-color: var(--primary);
    box-shadow: 0 0 14px rgba(33,150,243,0.35), inset 0 0 24px rgba(33,150,243,0.08);
}
.companion-card {
    border-color: #e91e63;
    box-shadow: 0 0 14px rgba(233,30,99,0.30), inset 0 0 24px rgba(233,30,99,0.06);
}
.char-info {
    position: relative;
    z-index: 2;
    padding: 5px 6px 6px;
}
.char-name {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 4px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.95);
}
.player-card .char-name { color: #90caf9; }
.companion-card .char-name { color: #f48fb1; }
.char-stats { display: flex; flex-direction: column; gap: 3px; }
.char-stats .stat-bar { height: 13px; border-radius: 7px; }
.char-stats .stat-label-in { font-size: 9px; padding: 0 5px; }

/* 子嗣网格 2列x3行=6格，占一张道侣卡大小 */
.children-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3px;
    width: 106px;
    flex-shrink: 0;
}
.children-grid.hidden { display: none; }
.child-slot {
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.25);
    overflow: hidden;
    position: relative;
    aspect-ratio: 1;
}
.child-slot.filled {
    border: 1px solid rgba(233,30,99,0.4);
    background: linear-gradient(160deg, rgba(233,30,99,0.10), rgba(103,58,183,0.05));
}
.child-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.child-slot.fainted {
    opacity: 0.35;
    filter: grayscale(1);
}
.child-hp-bar {
    position: absolute;
    bottom: 1px; left: 1px; right: 1px;
    height: 3px;
    background: rgba(0,0,0,0.6);
    border-radius: 2px;
    overflow: hidden;
}
.child-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #f06292, #ec407a);
    border-radius: 2px;
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: width;
}
.child-num {
    position: absolute;
    top: 1px; left: 2px;
    font-size: 8px;
    color: rgba(255,255,255,0.6);
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    line-height: 1;
    z-index: 2;
}
.stat-fill.hp-pink {
    background: linear-gradient(90deg, #f06292, #ec407a);
}

/* ---- Boss / 天劫 边框增强 ---- */
.enemy-portrait-shell.is-boss .enemy-portrait-frame {
    border-width: 3px;
    box-shadow: 0 0 22px rgba(var(--enemy-element-rgb),0.54), inset 0 0 18px rgba(0,0,0,0.36);
}
.enemy-portrait-shell.is-tribulation .enemy-aura-layer,
.enemy-portrait-shell.is-boss-charging .enemy-aura-layer,
.enemy-portrait-shell.is-boss-enraged .enemy-aura-layer {
    opacity: 1;
}
.enemy-portrait-shell.is-tribulation .enemy-aura-layer::before {
    opacity: 0.94;
    background: conic-gradient(from 0deg, #00bcd4, #00e5ff, #4dd0e1, #00bcd4, #26c6da, #00bcd4);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    filter: drop-shadow(0 0 8px rgba(0,188,212,0.8));
    animation: enemy-tribulation-ring 2.4s linear infinite;
}
.enemy-portrait-shell.is-boss-charging .enemy-aura-layer {
    background: radial-gradient(circle, rgba(255,23,68,0.22) 0%, transparent 70%);
    animation: boss-charging-bg 0.68s ease-in-out infinite;
}
.enemy-portrait-shell.is-boss-charging .enemy-aura-layer::before {
    opacity: 1;
    inset: -5px;
    border-radius: inherit;
    background: conic-gradient(from 0deg, transparent 0%, rgba(255,23,68,0.85) 15%, rgba(255,152,0,0.6) 30%, transparent 45%, transparent 55%, rgba(255,23,68,0.85) 70%, rgba(255,152,0,0.6) 85%, transparent 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    animation: boss-charging-ring 1.8s linear infinite;
}
.enemy-portrait-shell.is-boss-charging .enemy-aura-layer::after {
    opacity: 1;
    inset: -2px;
    border: 2px solid rgba(255,23,68,0.95);
    box-shadow: 0 0 14px rgba(255,23,68,0.8), 0 0 28px rgba(255,82,82,0.45), inset 0 0 14px rgba(255,23,68,0.15);
    animation: enemy-charging-aura 0.55s ease-in-out infinite;
}
.enemy-portrait-shell.is-boss-enraged .enemy-aura-layer {
    background: radial-gradient(circle, rgba(255,61,0,0.38), transparent 68%);
    animation: enemy-enrage-aura 1.05s ease-out;
}

/* ---- 战斗动画 ---- */
@keyframes attack-lunge {
    0%   { transform: translateY(0) scale(1);    filter: brightness(1)   drop-shadow(0 0 0 rgba(100,180,255,0)); }
    20%  { transform: translateY(-12px) scale(1.08); filter: brightness(1.4); }
    40%  { transform: translateY(-30px) scale(1.22); filter: brightness(1.8) drop-shadow(0 8px 24px rgba(100,180,255,0.6)); }
    55%  { transform: translateY(-28px) scale(1.2);  filter: brightness(1.6); }
    75%  { transform: translateY(-8px) scale(1.06);  filter: brightness(1.3); }
    100% { transform: translateY(0) scale(1);    filter: brightness(1)   drop-shadow(0 0 0 rgba(100,180,255,0)); }
}
@keyframes attack-lunge-child {
    0%   { transform: translateY(0) scale(1);    filter: brightness(1); }
    20%  { transform: translateY(-8px) scale(1.15); filter: brightness(1.5); }
    40%  { transform: translateY(-18px) scale(1.28); filter: brightness(1.9) drop-shadow(0 6px 16px rgba(200,120,255,0.6)); }
    55%  { transform: translateY(-16px) scale(1.25); filter: brightness(1.7); }
    75%  { transform: translateY(-4px) scale(1.08); filter: brightness(1.3); }
    100% { transform: translateY(0) scale(1);    filter: brightness(1); }
}
@keyframes hit-shake {
    0%   { transform: translateX(0) rotate(0deg); }
    10%  { transform: translateX(-10px) rotate(-1.5deg); }
    25%  { transform: translateX(10px)  rotate(1.5deg); }
    40%  { transform: translateX(-8px)  rotate(-1deg); }
    55%  { transform: translateX(8px)   rotate(1deg); }
    70%  { transform: translateX(-4px)  rotate(-0.5deg); }
    85%  { transform: translateX(4px)   rotate(0.5deg); }
    100% { transform: translateX(0) rotate(0deg); }
}
@keyframes hit-shake-child {
    0%   { transform: translate(0,0); }
    20%  { transform: translate(-4px, 0); }
    40%  { transform: translate(4px, 0); }
    60%  { transform: translate(-3px, 0); }
    80%  { transform: translate(2px, 0); }
    100% { transform: translate(0,0); }
}
@keyframes hit-flash-anim {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    30%  { opacity: 0.85; }
    60%  { opacity: 0.4; }
    100% { opacity: 0; }
}

.char-card.attacking {
    animation: attack-lunge 0.48s cubic-bezier(0.22,0.68,0.32,1);
    z-index: 30;
}
.child-slot.attacking {
    animation: attack-lunge-child 0.42s cubic-bezier(0.22,0.68,0.32,1);
    z-index: 30;
}
.char-card.hit {
    animation: hit-shake 0.42s cubic-bezier(0.36,0.07,0.19,0.97);
}
.child-slot.hit {
    animation: hit-shake-child 0.35s ease-out;
}
/* 受击红色闪光层 */
.hit-flash {
    position: absolute;
    inset: -2px;
    background: radial-gradient(ellipse at center, rgba(255,50,50,0.85) 0%, rgba(220,0,0,0.55) 35%, rgba(180,0,0,0.2) 65%, transparent 85%);
    border-radius: inherit;
    pointer-events: none;
    z-index: 25;
    opacity: 0;
    box-shadow: inset 0 0 20px 4px rgba(255,0,0,0.5), 0 0 16px rgba(255,0,0,0.3);
}
.hit-flash.active {
    animation: hit-flash-anim 0.42s ease-out;
}
.child-slot .hit-flash { border-radius: 6px; inset: -1px; }
.companion-card .hit-flash { border-radius: 10px; }

/* 玩家护盾效果（金色光环 + 旋转能量环） */
@keyframes shield-glow-mobile {
    0%, 100% { box-shadow: 0 0 12px rgba(255,215,0,0.5), inset 0 0 14px rgba(255,215,0,0.1); border-color: rgba(255,215,0,0.6); }
    50% { box-shadow: 0 0 24px rgba(255,215,0,0.8), inset 0 0 20px rgba(255,215,0,0.15), 0 0 35px rgba(100,181,246,0.25); border-color: rgba(255,215,0,0.9); }
}
@keyframes shield-ring-rotate-mobile {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes shield-icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}
.player-card.has-shield {
    box-shadow: 0 0 18px rgba(255,215,0,0.5), inset 0 0 20px rgba(255,215,0,0.12);
    animation: shield-glow-mobile 1.5s ease-in-out infinite !important;
    border-color: rgba(255,215,0,0.7) !important;
    position: relative;
}
.player-card.has-shield::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 2px solid transparent;
    background: conic-gradient(from 0deg, transparent 0%, rgba(255,215,0,0.75) 25%, transparent 50%, rgba(100,181,246,0.5) 75%, transparent 100%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: shield-ring-rotate-mobile 3s linear infinite;
    pointer-events: none;
    z-index: 10;
}
.player-card.has-shield::after {
    content: '🛡';
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 14px;
    filter: drop-shadow(0 0 4px rgba(255,215,0,0.8));
    animation: shield-icon-pulse 1s ease-in-out infinite;
    z-index: 11;
    pointer-events: none;
}
.player-card.defending .char-overlay {
    background: linear-gradient(180deg, rgba(66,165,245,0.15) 0%, rgba(66,165,245,0.10) 40%, rgba(0,0,0,0.50) 68%, rgba(0,0,0,0.90) 100%);
}
.low-hp-pulse {
    animation: lowHpPulse 1s ease-in-out infinite;
}
@keyframes lowHpPulse {
    0%,100% { box-shadow: 0 0 14px rgba(244,67,54,0.3); }
    50% { box-shadow: 0 0 22px rgba(244,67,54,0.7), 0 0 30px rgba(244,67,54,0.3); }
}
.fainted {
    opacity: 0.4;
    filter: grayscale(0.8);
}
.shield-active {
    color: #90caf9;
    font-size: 9px;
}

/* ---- 战斗速度模式 ---- */
#combatView.speed-2x .char-card.attacking {
    animation-duration: 0.24s !important;
}
#combatView.speed-2x .child-slot.attacking {
    animation-duration: 0.21s !important;
}
#combatView.speed-2x .char-card.hit {
    animation-duration: 0.2s !important;
}
#combatView.speed-2x .enemy-portrait-shell.hit-el-fire::after,
#combatView.speed-2x .enemy-portrait-shell.hit-el-ice::after,
#combatView.speed-2x .enemy-portrait-shell.hit-el-thunder::after,
#combatView.speed-2x .enemy-portrait-shell.hit-el-earth::after,
#combatView.speed-2x .enemy-portrait-shell.hit-el-wind::after,
#combatView.speed-2x .enemy-portrait-shell.hit-el-metal::after,
#combatView.speed-2x .enemy-portrait-shell.hit-el-wood::after,
#combatView.speed-2x .enemy-portrait-shell.hit-el-water::after {
    animation-duration: 0.28s !important;
}
#combatView.speed-2x .stat-fill,
#combatView.speed-2x .child-hp-fill {
    transition-duration: 0.18s !important;
}

#combatView.speed-3x .char-card.attacking {
    animation-duration: 0.16s !important;
}
#combatView.speed-3x .child-slot.attacking {
    animation-duration: 0.14s !important;
}
#combatView.speed-3x .char-card.hit {
    animation-duration: 0.13s !important;
}
#combatView.speed-3x .enemy-portrait-shell[class*="hit-el-"]::after {
    animation-duration: 0.18s !important;
}
#combatView.speed-3x .stat-fill,
#combatView.speed-3x .child-hp-fill {
    transition-duration: 0.12s !important;
}

/* ---- 敌人技能施法/回血特效 ---- */
.enemy-portrait-shell.enemy-casting {
    animation: enemy-cast-pulse 0.65s ease-out;
}
.enemy-portrait-shell.enemy-casting::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.8);
    animation: enemy-cast-ring 0.6s ease-out forwards;
    pointer-events: none;
    z-index: 20;
}
.enemy-portrait-shell.enemy-cast-fire::before { border-color: #ff5722; box-shadow: 0 0 20px rgba(255,87,34,0.8); }
.enemy-portrait-shell.enemy-cast-ice::before { border-color: #00bcd4; box-shadow: 0 0 20px rgba(0,188,212,0.8); }
.enemy-portrait-shell.enemy-cast-thunder::before { border-color: #9c27b0; box-shadow: 0 0 20px rgba(156,39,176,0.8); }
.enemy-portrait-shell.enemy-cast-earth::before { border-color: #ffb300; box-shadow: 0 0 20px rgba(255,179,0,0.8); }
.enemy-portrait-shell.enemy-cast-wind::before { border-color: #26a69a; box-shadow: 0 0 20px rgba(38,166,154,0.8); }
.enemy-portrait-shell.enemy-cast-metal::before { border-color: #e0e0e0; box-shadow: 0 0 20px rgba(224,224,224,0.8); }
.enemy-portrait-shell.enemy-cast-wood::before { border-color: #4caf50; box-shadow: 0 0 20px rgba(76,175,80,0.8); }
.enemy-portrait-shell.enemy-cast-water::before { border-color: #2196f3; box-shadow: 0 0 20px rgba(33,150,243,0.8); }
.enemy-portrait-shell.enemy-cast-neutral::before { border-color: #e0e0e0; box-shadow: 0 0 20px rgba(255,255,255,0.6); }

@keyframes enemy-cast-pulse {
    0% { filter: brightness(1); transform: scale(1); }
    30% { filter: brightness(1.8); transform: scale(1.04); }
    60% { filter: brightness(1.4); transform: scale(1.02); }
    100% { filter: brightness(1); transform: scale(1); }
}
@keyframes enemy-cast-ring {
    0% { opacity: 1; transform: scale(0.7); }
    100% { opacity: 0; transform: scale(1.4); }
}

/* 敌人回血绿色闪光（外框） */
.enemy-portrait-shell.enemy-heal-flash {
    box-shadow: 0 0 25px rgba(76,175,80,0.6), inset 0 0 20px rgba(76,175,80,0.2) !important;
    animation: enemy-heal-glow 0.8s ease-out;
}
@keyframes enemy-heal-glow {
    0% { filter: brightness(1); }
    30% { filter: brightness(1.5) hue-rotate(-20deg); }
    100% { filter: brightness(1); }
}

/* 玩家状态闪烁 */
.player-card.player-burn-flash {
    animation: player-burn-fx 0.9s ease-out;
}
.player-card.player-burn-flash::after {
    content: '🔥';
    position: absolute;
    top: -5px;
    right: 20%;
    font-size: 18px;
    animation: status-icon-pop 0.7s ease-out forwards;
    pointer-events: none;
    z-index: 20;
}
.player-card.player-paralyze-flash {
    animation: player-paralyze-fx 0.7s ease-out;
}
.player-card.player-paralyze-flash::after {
    content: '⚡';
    position: absolute;
    top: -5px;
    right: 20%;
    font-size: 18px;
    animation: status-icon-pop 0.6s ease-out forwards;
    pointer-events: none;
    z-index: 20;
}
@keyframes player-burn-fx {
    0%, 100% { box-shadow: 0 0 0 rgba(255,87,34,0); }
    20%, 60% { box-shadow: 0 0 25px rgba(255,87,34,0.7), inset 0 0 20px rgba(255,87,34,0.15); }
}
@keyframes player-paralyze-fx {
    0%, 100% { filter: none; }
    20%, 40%, 60% { filter: brightness(1.5) saturate(0.5); transform: translateX(-3px); }
    30%, 50%, 70% { filter: brightness(1.3) saturate(0.7); transform: translateX(3px); }
}
@keyframes status-icon-pop {
    0% { opacity: 0; transform: scale(0.3) rotate(-20deg); }
    40% { opacity: 1; transform: scale(1.3) rotate(5deg); }
    100% { opacity: 0; transform: scale(0.9) translateY(-20px); }
}

/* 临时浮动数字（回血/合击等） */
.dmg-pop {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    font-size: 18px;
    pointer-events: none;
    z-index: 30;
    animation: dmg-pop-float 1s ease-out forwards;
}
.dmg-pop.heal-pop { animation-duration: 1s; }
.dmg-pop.combo-pop {
    top: 5%;
    font-size: 22px;
    animation: combo-pop-float 1.1s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes dmg-pop-float {
    0% { opacity: 0; transform: translateX(-50%) translateY(5px) scale(0.6); }
    25% { opacity: 1; transform: translateX(-50%) translateY(-5px) scale(1.1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.9); }
}
@keyframes combo-pop-float {
    0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.3) rotate(-5deg); }
    20% { opacity: 1; transform: translateX(-50%) translateY(-5px) scale(1.3) rotate(3deg); }
    40% { transform: translateX(-50%) translateY(-8px) scale(1.1) rotate(-1deg); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-45px) scale(0.9); }
}

/* 战利品掉落层 */
.loot-drop-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 40;
    overflow: hidden;
}
.loot-drop-layer .loot-item {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 28px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
    will-change: transform, opacity;
}
.loot-drop-layer .loot-item .loot-label {
    font-size: 13px;
    font-weight: bold;
    margin-top: 2px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* ---- 底部操作栏保持兼容 ---- */
.combat-actions {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 2px 8px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #0d0d1a, var(--bg-panel) 30%, var(--bg-dark));
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    margin: 0 6px 6px 6px;
}
.combat-action-btn {
    height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: linear-gradient(180deg, var(--bg-panel-light), var(--bg-panel));
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}
.combat-action-btn .ca-icon { font-size: 20px; }
.combat-action-btn:active { transform: scale(0.92); }
.combat-action-btn.primary {
    background: linear-gradient(180deg, var(--danger), #c0392b);
    border-color: var(--danger);
    color: white;
}
.combat-action-btn.trib-btn {
    display: none;
}
.combat-action-btn.trib-btn.show {
    display: flex;
}

/* ---- 状态特效动画 ---- */
.enemy-status-frozen {
    z-index: 1;
    background:
        linear-gradient(135deg, rgba(79,195,247,0.36), rgba(0,188,212,0.12) 56%, rgba(227,247,255,0.26)),
        repeating-linear-gradient(45deg, transparent 0 10px, rgba(255,255,255,0.09) 10px 11px);
    box-shadow: inset 0 0 20px rgba(79,195,247,0.48);
    animation: enemy-frozen-overlay 1.8s ease-in-out infinite;
}
.enemy-status-paralyzed {
    z-index: 2;
    background: repeating-linear-gradient(105deg, transparent 0 7px, rgba(206,147,216,0.42) 7px 9px, transparent 9px 17px);
    background-size: 170% 100%;
    mix-blend-mode: screen;
    animation: enemy-paralyze-current 0.42s steps(3) infinite;
}
.enemy-status-burning {
    z-index: 3;
    background:
        radial-gradient(ellipse at 50% 112%, rgba(255,61,0,0.62) 0%, rgba(255,87,34,0.32) 38%, transparent 72%),
        linear-gradient(0deg, rgba(255,87,34,0.17), transparent 62%);
    mix-blend-mode: screen;
    animation: enemy-burning-overlay 0.72s ease-in-out infinite alternate;
}
.enemy-portrait-shell.has-paralyzed .enemy-portrait-content {
    animation: enemy-paralyze-content 0.18s steps(2) infinite;
}
@keyframes enemy-frozen-overlay {
    0%,100% { opacity: 0.62; }
    50% { opacity: 0.9; }
}
@keyframes enemy-paralyze-current {
    0% { background-position: 0 0; opacity: 0.5; }
    50% { background-position: 28px 0; opacity: 0.9; }
    100% { background-position: 56px 0; opacity: 0.58; }
}
@keyframes enemy-paralyze-content {
    0%,100% { transform: translate(0,0); }
    25% { transform: translate(-1px,1px); }
    75% { transform: translate(1px,-1px); }
}
@keyframes enemy-burning-overlay {
    0% { opacity: 0.5; transform: translateY(1px) scale(0.99); }
    100% { opacity: 0.88; transform: translateY(-1px) scale(1.01); }
}
@keyframes enemy-tribulation-ring { to { transform: rotate(360deg); } }
@keyframes enemy-charging-aura {
    0%,100% { transform: scale(0.96); opacity: 0.65; }
    50% { transform: scale(1.08); opacity: 1; }
}
@keyframes boss-charging-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes boss-charging-bg {
    0%,100% { opacity: 0.6; }
    50% { opacity: 1; }
}
@keyframes enemy-enrage-aura {
    0% { transform: scale(0.7); opacity: 0; filter: brightness(2.2); }
    45% { transform: scale(1.16); opacity: 1; filter: brightness(1.8); }
    100% { transform: scale(1); opacity: 0; filter: brightness(1); }
}

/* ---- 八元素颜色映射 ---- */
.enemy-portrait-shell[data-element="metal"]  { --enemy-element: #d8d8e6; --enemy-element-rgb: 216,216,230; }
.enemy-portrait-shell[data-element="wood"]   { --enemy-element: #66bb6a; --enemy-element-rgb: 102,187,106; }
.enemy-portrait-shell[data-element="water"]  { --enemy-element: #42a5f5; --enemy-element-rgb: 66,165,245; }
.enemy-portrait-shell[data-element="fire"]   { --enemy-element: #ff5722; --enemy-element-rgb: 255,87,34; }
.enemy-portrait-shell[data-element="earth"]  { --enemy-element: #c79a54; --enemy-element-rgb: 199,154,84; }
.enemy-portrait-shell[data-element="wind"]   { --enemy-element: #80cbc4; --enemy-element-rgb: 128,203,196; }
.enemy-portrait-shell[data-element="thunder"]{ --enemy-element: #ce93d8; --enemy-element-rgb: 206,147,216; }
.enemy-portrait-shell[data-element="ice"]    { --enemy-element: #81d4fa; --enemy-element-rgb: 129,212,250; }

/* ---- 移动端适配 ---- */
@media (max-width: 420px) {
    .combat-area { padding: 4px 6px 0 6px; margin: 3px; margin-bottom: 0; border-radius: 10px 10px 0 0; border-left: none; border-right: none; border-bottom: none; }
    .enemy-section { margin-bottom: 3px; gap: 8px; }
    .enemy-motion-layer { width: 88px; flex-basis: 88px; height: 88px; }
    .enemy-portrait-shell { width: 88px; height: 88px; flex-basis: 88px; }
    .combat-header { padding: 5px 8px; }
    .char-card { width: 88px; border-width: 1px; border-radius: 8px; }
    .children-grid { width: 88px; gap: 2px; }
    .char-info { padding: 3px 4px 4px; }
    .char-name { font-size: 11px; margin-bottom: 2px; }
    .char-stats .stat-bar { height: 11px; }
    .char-stats .stat-label-in { font-size: 8px; padding: 0 4px; }
    .enemy-alert { font-size: 9px; padding: 2px 6px; max-width: 100%; }
    .enemy-info { padding-top: 0; }
    .enemy-name { font-size: 13px; }
    .combat-log { font-size: 10px; padding: 3px 5px; min-height: 0; margin-top: 2px; margin-bottom: 0; }
    .combat-log .msg { margin-bottom: 1px; }
    .allies-row { gap: 3px; padding-top: 0; }
    .combat-actions { gap: 3px; padding: 1px 4px 2px 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); margin: -1px 3px 3px 3px; border-top: none; border-radius: 0 0 10px 10px; }
    .combat-action-btn { height: 42px; font-size: 9px; border-radius: 8px; gap: 1px; }
    .combat-action-btn .ca-icon { font-size: 16px; }
}

/* ---- 旧样式兼容重置 ---- */
.combatant-panel,
.combat-log-middle,
.player-portrait,
.player-portrait-content {
    /* 新布局已替换，保留类名防止外部引用报错 */
}

/* ======================================================
   v1.22.0 战斗系统全面视觉优化
   ====================================================== */

/* ---- 帧冻结效果 ---- */
.combat-freezeframe #combatView * {
    animation-play-state: paused !important;
    transition: none !important;
}
.combat-freezeframe .combat-slash-effect,
.combat-freezeframe .combat-shockwave {
    animation-play-state: running !important;
}

/* ---- 斩击波特效 ---- */
.combat-slash-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%) scale(0) rotate(-15deg);
    pointer-events: none;
    z-index: 600;
    opacity: 0;
}
.combat-slash-effect.active {
    animation: slash-slice 0.35s ease-out forwards;
}
.combat-slash-effect::before,
.combat-slash-effect::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%;
    height: 6px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), rgba(255,240,200,0.8), transparent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px rgba(255,255,255,0.8), 0 0 40px rgba(255,200,100,0.5);
}
.combat-slash-effect::after {
    transform: translate(-50%, -50%) rotate(8deg);
    opacity: 0.7;
    width: 100%;
}
.combat-slash-effect.crit::before {
    background: linear-gradient(90deg, transparent, #ffd700, #ffeb3b, #fff9c4, transparent);
    height: 8px;
    box-shadow: 0 0 30px #ffd700, 0 0 60px rgba(255,193,7,0.8);
}
@keyframes slash-slice {
    0% { transform: translate(-50%, -50%) scale(0.2) rotate(-35deg); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2.5) rotate(15deg); opacity: 0; }
}

/* ---- 冲击波扩散 ---- */
.combat-shockwave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.9);
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    z-index: 590;
    opacity: 0;
}
.combat-shockwave.active {
    animation: shockwave-expand 0.5s ease-out forwards;
}
.combat-shockwave.crit {
    border-color: #ffd700;
    border-width: 4px;
    box-shadow: 0 0 20px rgba(255,215,0,0.6);
}
.combat-shockwave.fire { border-color: #ff5722; box-shadow: 0 0 20px rgba(255,87,34,0.6); }
.combat-shockwave.ice { border-color: #81d4fa; box-shadow: 0 0 20px rgba(129,212,250,0.6); }
.combat-shockwave.thunder { border-color: #ce93d8; box-shadow: 0 0 20px rgba(206,147,216,0.6); }
@keyframes shockwave-expand {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(8); opacity: 0; }
}

/* ---- 屏幕震动增强 ---- */
@keyframes combat-shake-heavy {
    0%,100% { transform: translate(0,0); }
    10% { transform: translate(-6px, 4px); }
    20% { transform: translate(6px, -4px); }
    30% { transform: translate(-5px, -3px); }
    40% { transform: translate(5px, 3px); }
    50% { transform: translate(-4px, 2px); }
    60% { transform: translate(4px, -2px); }
    70% { transform: translate(-3px, 1px); }
    80% { transform: translate(3px, -1px); }
    90% { transform: translate(-1px, 1px); }
}
.combat-shake-heavy { animation: combat-shake-heavy 0.3s cubic-bezier(.36,.07,.19,.97) both; }

/* ---- 增强伤害数字系统 ---- */
.damage-number {
    position: absolute;
    font-weight: 900;
    pointer-events: none;
    z-index: 700;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 12px rgba(0,0,0,0.6);
    transform-origin: center bottom;
    font-family: system-ui, sans-serif;
    will-change: transform, opacity;
}
.damage-number.crit {
    font-size: 2.2em;
    color: #ffd700;
    text-shadow: 0 0 10px #ffd700, 0 0 20px #ffab00, 0 2px 8px rgba(0,0,0,0.9);
    animation: dmg-crit 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.damage-number.normal {
    font-size: 1.5em;
    color: #ffffff;
    animation: dmg-float 0.75s ease-out forwards;
}
.damage-number.element {
    font-size: 1.4em;
    animation: dmg-element 0.8s ease-out forwards;
}
.damage-number.element.fire { color: #ff7043; text-shadow: 0 0 10px rgba(255,87,34,0.8), 0 2px 8px rgba(0,0,0,0.9); }
.damage-number.element.ice { color: #81d4fa; text-shadow: 0 0 10px rgba(129,212,250,0.8), 0 2px 8px rgba(0,0,0,0.9); }
.damage-number.element.thunder { color: #ce93d8; text-shadow: 0 0 10px rgba(206,147,216,0.8), 0 2px 8px rgba(0,0,0,0.9); }
.damage-number.element.metal { color: #e0e0e0; text-shadow: 0 0 8px rgba(224,224,224,0.7); }
.damage-number.element.wood { color: #81c784; text-shadow: 0 0 8px rgba(129,199,132,0.7); }
.damage-number.element.water { color: #64b5f6; text-shadow: 0 0 8px rgba(100,181,246,0.7); }
.damage-number.element.earth { color: #d4a574; text-shadow: 0 0 8px rgba(212,165,116,0.7); }
.damage-number.element.wind { color: #80cbc4; text-shadow: 0 0 8px rgba(128,203,196,0.7); }
.damage-number.heal {
    font-size: 1.4em;
    color: #66bb6a;
    text-shadow: 0 0 10px rgba(102,187,106,0.8), 0 2px 8px rgba(0,0,0,0.9);
    animation: dmg-heal 0.8s ease-out forwards;
}
.damage-number.miss {
    font-size: 1.3em;
    color: #b0bec5;
    font-style: italic;
    opacity: 0.9;
    animation: dmg-miss 0.7s ease-out forwards;
}
.damage-number.dodge {
    font-size: 1.4em;
    color: #90caf9;
    text-shadow: 0 0 10px rgba(144,202,249,0.8);
    animation: dmg-dodge 0.7s ease-out forwards;
}
.damage-number.thorns {
    font-size: 1.2em;
    color: #ef5350;
    text-shadow: 0 0 8px rgba(239,83,80,0.7);
    animation: dmg-thorns 0.7s ease-out forwards;
}
.damage-number.combo {
    font-size: 1.6em;
    color: #ffb74d;
    text-shadow: 0 0 12px rgba(255,183,77,0.9), 0 2px 8px rgba(0,0,0,0.9);
    animation: dmg-combo 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.damage-number.shield-absorb {
    font-size: 1.1em;
    color: #ffd54f;
    text-shadow: 0 0 8px rgba(255,213,79,0.7);
    animation: dmg-shield 0.65s ease-out forwards;
}
/* 伤害数字位置：道侣 */
.damage-number.on-companion { left: 50% !important; top: 30% !important; }
/* 伤害数字位置：子嗣 */
.damage-number.on-child { font-size: 1em !important; }

@keyframes dmg-float {
    0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
    15% { transform: translate(-50%, -20px) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -70px) scale(1); opacity: 0; }
}
@keyframes dmg-crit {
    0% { transform: translate(-50%, 0) scale(0.3) rotate(-5deg); opacity: 0; }
    20% { transform: translate(-50%, -25px) scale(1.4) rotate(3deg); opacity: 1; }
    40% { transform: translate(-50%, -30px) scale(1.1) rotate(-1deg); }
    100% { transform: translate(-50%, -85px) scale(1) rotate(0deg); opacity: 0; }
}
@keyframes dmg-element {
    0% { transform: translate(-50%, 0) scale(0.6); opacity: 0; }
    20% { transform: translate(-50%, -18px) scale(1.15); opacity: 1; }
    100% { transform: translate(-50%, -60px) scale(1); opacity: 0; }
}
@keyframes dmg-heal {
    0% { transform: translate(-50%, 10px) scale(0.5); opacity: 0; }
    20% { transform: translate(-50%, -15px) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -50px) scale(1); opacity: 0; }
}
@keyframes dmg-miss {
    0% { transform: translate(-50%, 0) scale(1.2); opacity: 0; }
    30% { transform: translate(-50%, -15px) scale(1); opacity: 0.9; }
    100% { transform: translate(-50%, -35px) scale(0.9); opacity: 0; }
}
@keyframes dmg-dodge {
    0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
    20% { transform: translate(-60%, -20px) scale(1.1) rotate(-8deg); opacity: 1; }
    100% { transform: translate(-70%, -55px) scale(1) rotate(-12deg); opacity: 0; }
}
@keyframes dmg-thorns {
    0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
    25% { transform: translate(-50%, -12px) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -45px) scale(0.9); opacity: 0; }
}
@keyframes dmg-combo {
    0% { transform: translate(-50%, 0) scale(0.3) rotate(-3deg); opacity: 0; }
    25% { transform: translate(-50%, -22px) scale(1.3) rotate(2deg); opacity: 1; }
    100% { transform: translate(-50%, -75px) scale(1) rotate(0deg); opacity: 0; }
}
@keyframes dmg-shield {
    0% { transform: translate(-50%, 0) scale(0.6); opacity: 0; }
    30% { transform: translate(-50%, -10px) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -35px) scale(0.9); opacity: 0; }
}

/* ---- Toast 提示系统 ---- */
.combat-toast-container {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 800;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.combat-toast {
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
    white-space: nowrap;
    animation: toast-in 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.combat-toast.fadeout { animation: toast-out 0.4s ease-in forwards; }
.combat-toast.crit { background: linear-gradient(135deg, #ff9800, #f57c00); font-size: 18px; padding: 10px 28px; }
.combat-toast.warning { background: linear-gradient(135deg, #d32f2f, #b71c1c); }
.combat-toast.boss-warn {
    background: linear-gradient(135deg, #ff1744, #d50000);
    font-size: 16px;
    padding: 12px 30px;
    animation: boss-warn-pulse 0.5s ease-in-out infinite alternate, toast-in 0.35s ease-out;
    box-shadow: 0 0 30px rgba(255,23,68,0.6);
}
.combat-toast.status { background: linear-gradient(135deg, #7b1fa2, #4a148c); }
.combat-toast.combo { background: linear-gradient(135deg, #f57c00, #e65100); }
.combat-toast.heal { background: linear-gradient(135deg, #388e3c, #1b5e20); }
.combat-toast.info { background: linear-gradient(135deg, #1976d2, #0d47a1); }
.combat-toast.rage { background: linear-gradient(135deg, #c62828, #b71c1c); font-size: 15px; }
.combat-toast.block { background: linear-gradient(135deg, #546e7a, #37474f); }
@keyframes toast-in {
    0% { transform: translateY(-20px) scale(0.7); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes toast-out {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-15px) scale(0.9); opacity: 0; }
}
@keyframes boss-warn-pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

/* ---- 回合指示器 ---- */
.combat-turn-indicator {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
    background: rgba(76,175,80,0.25);
    color: #81c784;
    border: 1px solid rgba(129,199,132,0.4);
    animation: turn-breathe 1.5s ease-in-out infinite;
}
.combat-turn-indicator.enemy-turn {
    background: rgba(244,67,54,0.25);
    color: #ef9a9a;
    border-color: rgba(239,154,154,0.4);
}
@keyframes turn-breathe {
    0%,100% { opacity: 0.8; }
    50% { opacity: 1; box-shadow: 0 0 12px currentColor; }
}

/* ---- 自动战斗按钮 ---- */
.combat-speed-btn.auto-active {
    background: linear-gradient(135deg, #4caf50, #388e3c) !important;
    color: #fff !important;
    animation: auto-active-pulse 1.2s ease-in-out infinite;
}
@keyframes auto-active-pulse {
    0%,100% { box-shadow: 0 0 8px rgba(76,175,80,0.4); }
    50% { box-shadow: 0 0 16px rgba(76,175,80,0.7); }
}
/* ---- 危急暂停后的“继续自动”按钮 ---- */
.combat-speed-btn.auto-paused {
    background: linear-gradient(135deg, #ff9800, #f57c00) !important;
    color: #fff !important;
    animation: auto-paused-pulse 1s ease-in-out infinite;
}
@keyframes auto-paused-pulse {
    0%,100% { box-shadow: 0 0 8px rgba(255,152,0,0.45); }
    50% { box-shadow: 0 0 18px rgba(255,152,0,0.8); }
}

/* ---- 玩家/道侣状态徽章 ---- */
.char-status-badges {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 3px;
    z-index: 10;
    pointer-events: none;
}
.char-status-badge {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: 1.5px solid rgba(0,0,0,0.5);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    animation: status-badge-bounce 1s ease-in-out infinite;
}
.char-status-badge.burn { background: radial-gradient(circle, #ff7043, #d84315); }
.char-status-badge.frozen { background: radial-gradient(circle, #81d4fa, #0288d1); }
.char-status-badge.paralyze { background: radial-gradient(circle, #ce93d8, #7b1fa2); }
.char-status-badge.poisoned { background: radial-gradient(circle, #81c784, #2e7d32); }
.char-status-badge.bleeding { background: radial-gradient(circle, #ef5350, #b71c1c); }
.char-status-badge.weakened { background: radial-gradient(circle, #ffb74d, #e65100); }
.char-status-badge.shield { background: radial-gradient(circle, #ffd54f, #f9a825); }
.char-status-badge.defending { background: radial-gradient(circle, #64b5f6, #1565c0); }
@keyframes status-badge-bounce {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

/* ---- 护盾条叠加 ---- */
.char-stats .stat-bar.shield-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,213,79,0.6), rgba(255,193,7,0.8));
    border-radius: inherit;
    z-index: 2;
    transition: width 0.35s ease-out;
    box-shadow: 0 0 8px rgba(255,193,7,0.5) inset;
}
.shield-text {
    color: #ffd54f;
    font-size: 10px;
    margin-left: 4px;
    text-shadow: 0 0 4px rgba(0,0,0,0.8);
}

/* ---- 道侣/子嗣受击反馈增强 ---- */
.companion-card.hit-recoil .char-fullbody,
.child-card.hit-recoil .char-fullbody {
    animation: char-hit-recoil 0.32s ease-out;
}
.companion-card.hit-recoil .hit-flash,
.child-card.hit-recoil .hit-flash {
    opacity: 1;
    animation: hit-flash-effect 0.25s ease-out forwards;
}
.child-card {
    position: relative;
    overflow: hidden;
}
.child-card .hit-flash {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.85);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    border-radius: inherit;
}
.child-card.fainted {
    filter: grayscale(1) brightness(0.5);
    transform: scale(0.92);
    opacity: 0.6;
}
.child-card.fainted::after {
    content: '💀';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    z-index: 10;
}
@keyframes char-hit-recoil {
    0% { transform: translateX(0); filter: brightness(1); }
    15% { transform: translateX(-8px) rotate(-3deg); filter: brightness(1.8); }
    30% { transform: translateX(5px) rotate(2deg); filter: brightness(1.4); }
    60% { transform: translateX(-3px) rotate(-1deg); }
    100% { transform: translateX(0); filter: brightness(1); }
}

/* ---- BOSS 蓄力全屏警告 ---- */
.combat-view.boss-charging-warn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(255,0,0,0.15) 100%);
    pointer-events: none;
    z-index: 500;
    animation: boss-warn-bg 0.6s ease-in-out infinite alternate;
}
@keyframes boss-warn-bg {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}
.combat-view.boss-enraged::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(255,0,0,0.1) 100%);
    pointer-events: none;
    z-index: 499;
}

/* ---- 动态灵气粒子背景 ---- */
.combat-view { position: relative; overflow: hidden; }
.combat-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.combat-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(157, 108, 212, 0.6);
    box-shadow: 0 0 6px currentColor;
    animation: float-particle linear infinite;
}
@keyframes float-particle {
    0% { transform: translateY(100vh) scale(0); opacity: 0; }
    10% { opacity: 1; transform: scale(1); }
    90% { opacity: 1; }
    100% { transform: translateY(-10vh) scale(0.5); opacity: 0; }
}
/* 按元素主题切换粒子颜色 */
.combat-view[data-theme-element="fire"] .combat-particle { background: rgba(255,87,34,0.5); color: #ff5722; }
.combat-view[data-theme-element="ice"] .combat-particle { background: rgba(129,212,250,0.5); color: #81d4fa; }
.combat-view[data-theme-element="thunder"] .combat-particle { background: rgba(206,147,216,0.5); color: #ce93d8; }
.combat-view[data-theme-element="tribulation"] .combat-particle { background: rgba(79,195,247,0.7); color: #4fc3f7; }

/* ---- 天劫闪电特效 ---- */
.tribulation-lightning {
    position: absolute;
    inset: 0;
    background: white;
    opacity: 0;
    pointer-events: none;
    z-index: 550;
}
.tribulation-lightning.flash {
    animation: lightning-flash 0.4s ease-out;
}
@keyframes lightning-flash {
    0% { opacity: 0; }
    10% { opacity: 0.9; }
    20% { opacity: 0.2; }
    30% { opacity: 0.8; }
    50% { opacity: 0.1; }
    100% { opacity: 0; }
}

/* ---- 血条平滑动画增强 ---- */
.stat-fill {
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.stat-fill.hp { position: relative; z-index: 1; }
/* 血条分段 */
.stat-bar.slim .stat-fill.hp {
    background: linear-gradient(90deg, #ff5252, #ff8a80);
    background-image: 
        linear-gradient(90deg, transparent 0, transparent 24%, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.2) 26%, transparent 27%, transparent 49%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 51%, transparent 52%, transparent 74%, rgba(255,255,255,0.2) 75%, rgba(255,255,255,0.2) 76%, transparent 77%),
        linear-gradient(90deg, #ff5252, #ff8a80);
    box-shadow: 0 0 6px rgba(255, 82, 82, 0.5);
}

/* ---- 低血量脉动增强 ---- */
.player-card.low-hp-pulse .char-fullbody::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid rgba(244,67,54,0.8);
    border-radius: inherit;
    animation: lowhp-ring 0.8s ease-in-out infinite;
    pointer-events: none;
}
.companion-card.low-hp-pulse .char-fullbody::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid rgba(244,67,54,0.7);
    border-radius: inherit;
    animation: lowhp-ring 0.9s ease-in-out infinite;
    pointer-events: none;
}
@keyframes lowhp-ring {
    0%,100% { box-shadow: 0 0 8px rgba(244,67,54,0.4); opacity: 0.6; }
    50% { box-shadow: 0 0 20px rgba(244,67,54,0.8); opacity: 1; }
}

/* ---- 死亡消散动画增强 ---- */
.enemy-portrait-shell.dying .enemy-portrait-content {
    animation: death-dissolve 0.7s ease-in forwards;
}
@keyframes death-dissolve {
    0% { transform: scale(1); opacity: 1; filter: grayscale(0) brightness(1); }
    40% { transform: scale(1.1); filter: grayscale(0.5) brightness(1.3); }
    100% { transform: scale(0.7) translateY(20px); opacity: 0; filter: grayscale(1) brightness(0.4); }
}

/* ---- 速度档位颜色标识 ---- */
.combat-speed-btn[data-speed="2"] { color: #ffb74d; }
.combat-speed-btn[data-speed="3"] { color: #ef5350; font-weight: 900; }

/* ---- 战斗弹窗增强 ---- */
.skill-item .skill-counter {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 10px;
    background: rgba(255,255,255,0.1);
    margin-left: 6px;
}
.skill-item.cooldown { opacity: 0.5; }
.skill-item.counter-element {
    border-color: #ffd700 !important;
    box-shadow: 0 0 12px rgba(255,215,0,0.4);
}
.skill-item.counter-element::after {
    content: '克制';
    position: absolute;
    top: -8px;
    right: 8px;
    background: linear-gradient(135deg, #ffd700, #ffab00);
    color: #000;
    font-size: 9px;
    font-weight: 900;
    padding: 1px 6px;
    border-radius: 6px;
}

/* ---- 移动端补充优化 ---- */
@media (max-width: 420px) {
    .combat-toast { font-size: 12px; padding: 6px 14px; }
    .combat-toast.crit { font-size: 15px; padding: 8px 20px; }
    .combat-toast.boss-warn { font-size: 13px; padding: 8px 20px; }
    .damage-number.crit { font-size: 1.8em; }
    .damage-number.normal { font-size: 1.2em; }
    .char-status-badge { width: 16px; height: 16px; font-size: 8px; }
    .enemy-status-badge { font-size: 9px; padding: 1px 5px; min-width: 20px; }
    .enemy-status-badges { top: -5px; right: -6px; gap: 2px; }
    .combat-turn-indicator { font-size: 10px; padding: 2px 7px; }
    .combat-speed-btn { font-size: 10px; padding: 2px 8px; }
    .combat-exit-btn { font-size: 12px; padding: 6px 12px; top: 5px; right: 5px; }
}


/* === 战斗体验优化：结算态与阻塞模态 === */
/* Keep the exit control visible after a result modal is dismissed via X, overlay, or Escape.
   The modal overlay itself remains above this button while open, so no early interaction is introduced. */
#combatView.combat-resolving .combat-actions,
#combatView.combat-resolving .combat-speed-btn {
    visibility: hidden;
    pointer-events: none;
}
#combatView.combat-resolving .combat-exit-btn:not(.hidden) {
    visibility: visible;
    pointer-events: auto;
}
#combatView.combat-resolving .combat-turn-indicator {
    letter-spacing: .04em;
}
#combatView.combat-resolving .combat-title {
    color: #d4a853;
}


/* === 战斗体验优化：决策、焦点与移动端 === */
.combat-decision-hint { margin:4px 8px 0; padding:5px 9px; color:#c7d9ee; background:rgba(81,120,161,.16); border:1px solid rgba(132,176,221,.28); border-radius:8px; font-size:11px; line-height:1.45; text-align:center; }
.combat-action-btn:focus-visible, .combat-speed-btn:focus-visible, .combat-exit-btn:focus-visible, #combatView button:focus-visible { outline:3px solid #ffd54f; outline-offset:2px; box-shadow:0 0 0 5px rgba(255,213,79,.24); }
@media (max-width:420px) { .combat-decision-hint { margin:3px 5px 0; padding:4px 6px; font-size:10px; } .combat-action-btn { min-height:46px; height:46px; } }


/* ============ SPIRIT PLAQUE P0/P1 ============
 * 统一：深墨容器、灵金主操作、玉青辅助状态、朱砂风险操作。
 */
.plaque-svg { width: 1em; height: 1em; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.resources { gap: 5px; }
.resource-chip { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-height: 25px; padding: 2px 5px; border: 1px solid rgba(214, 168, 79, 0.18); border-radius: 8px; background: linear-gradient(180deg, rgba(32,39,61,0.76), rgba(16,21,34,0.72)); color: var(--text); font-variant-numeric: tabular-nums; }
.resource-chip .plaque-svg { width: 14px; height: 14px; color: var(--primary-light); filter: drop-shadow(0 0 3px rgba(244,216,137,.25)); }
.res-mind .plaque-svg { color: #63c7b2; }
.res-points .plaque-svg { color: #82b8e8; }
.quick-bar { gap: 7px; padding: 7px; border: 1px solid rgba(214, 168, 79, .14); border-radius: 14px; background: linear-gradient(180deg, rgba(24,31,50,.82), rgba(14,18,30,.82)); box-shadow: inset 0 1px 0 rgba(244,216,137,.06); }
.quick-btn { min-height: 43px; border: 1px solid rgba(214,168,79,.28); border-radius: 10px; background: linear-gradient(180deg, rgba(40,49,75,.86), rgba(19,25,42,.92)); color: var(--text); box-shadow: inset 0 1px 0 rgba(244,216,137,.08); }
.quick-btn .quick-icon { width: 17px; height: 17px; display: inline-flex; color: var(--primary-light); align-items: center; justify-content: center; }
.quick-btn:hover { border-color: rgba(244,216,137,.68); color: #fff5d6; }
.quick-btn:active { transform: translateY(1px) scale(.985); background: rgba(214,168,79,.16); }
.spirit-cultivate-panel { padding: 10px; border: 1px solid rgba(214,168,79,.34); border-radius: 15px; background: linear-gradient(180deg, rgba(24,30,48,.92), rgba(13,18,31,.94)); box-shadow: 0 10px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(244,216,137,.08); }
.cycle-select { padding: 4px; gap: 4px; border: 1px solid rgba(214,168,79,.22); border-radius: 11px; background: rgba(4,8,17,.42); }
.cycle-btn { min-height: 40px; border-radius: 8px; color: var(--text-dim); border: 1px solid transparent; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.cycle-btn .cycle-kicker { font-size: 9px; letter-spacing: .08em; opacity: .72; }
.cycle-btn.active { color: #fff1c7; border-color: rgba(244,216,137,.7); background: linear-gradient(180deg, rgba(214,168,79,.28), rgba(128,86,29,.28)); box-shadow: inset 0 1px 0 rgba(255,244,198,.18), 0 0 12px rgba(214,168,79,.13); }
.btn-cultivate-main { min-height: 54px; margin-top: 9px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #f4d889; border-radius: 14px; background: linear-gradient(180deg, #f0cc76 0%, #d6a84f 48%, #a9762c 100%); color: #19170f; font-size: 17px; font-weight: 800; letter-spacing: .14em; box-shadow: 0 8px 18px rgba(214,168,79,.24), inset 0 1px 0 rgba(255,249,215,.62); }
.btn-cultivate-main:hover { filter: brightness(1.06); }
.btn-cultivate-main:active { transform: translateY(1px) scale(.99); box-shadow: inset 0 3px 8px rgba(84,56,13,.24); }
.cultivate-seal { display: inline-flex; align-items:center; justify-content:center; width: 24px; height: 24px; border: 1px solid rgba(25,23,15,.45); border-radius: 50%; color: #4a3615; }
.cultivate-seal .plaque-svg { width: 16px; height: 16px; }
/* 闭关执行按钮只保留闭关文字，普通修炼仍显示原图文组合。 */
.btn-cultivate-main[data-cultivate-mode="seclusion"] { gap: 0; letter-spacing: .08em; }
.btn-cultivate-main[data-cultivate-mode="seclusion"] .cultivate-seal,
.btn-cultivate-main[data-cultivate-mode="seclusion"] .cultivate-tail { display: none; }
.cultivate-tail { padding-left: 8px; border-left: 1px solid rgba(25,23,15,.24); color: rgba(25,23,15,.7); font-size: 10px; font-weight: 600; letter-spacing: .06em; }
.bottom-nav { padding: 7px 4px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(214,168,79,.3); background: linear-gradient(180deg, rgba(25,31,50,.96), rgba(10,14,25,.98)); box-shadow: 0 -9px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(244,216,137,.08); }
.nav-item { position: relative; min-height: 54px; color: #a8afc0; border-radius: 10px; transition: color .16s ease, background .16s ease, transform .16s ease; }
.nav-item .nav-icon { width: 23px; height: 23px; display: inline-flex; align-items: center; justify-content: center; color: #c9b98b; }
.nav-item .nav-icon .plaque-svg { width: 22px; height: 22px; }
.nav-item.active { color: #f4d889; background: linear-gradient(180deg, rgba(214,168,79,.17), rgba(214,168,79,.03)); }
.nav-item.active::before { content: ""; position: absolute; top: -7px; left: 22%; right: 22%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #f4d889, transparent); box-shadow: 0 0 8px rgba(244,216,137,.72); }
.nav-item.active .nav-icon { color: #f4d889; filter: drop-shadow(0 0 5px rgba(244,216,137,.42)); }
.nav-item:active { transform: translateY(1px); }
.nav-item.primary-nav .nav-icon-wrap { width: 50px; height: 50px; border: 2px solid #101522; background: radial-gradient(circle at 35% 28%, #f7dc91, #d6a84f 58%, #956928); box-shadow: 0 5px 15px rgba(214,168,79,.42), inset 0 1px 1px rgba(255,255,255,.5); }
.nav-item.primary-nav .nav-icon { color: #251b0a; }
.nav-item.primary-nav.active .nav-icon-wrap { box-shadow: 0 5px 16px rgba(244,216,137,.65), inset 0 1px 1px rgba(255,255,255,.55); }
.btn { border-color: rgba(214,168,79,.38); box-shadow: inset 0 1px 0 rgba(244,216,137,.06); }
.btn:not(.primary):not(.danger):not(.success) { background: linear-gradient(180deg, rgba(48,57,82,.92), rgba(24,31,49,.96)); }
.btn:focus-visible, .quick-btn:focus-visible, .nav-item:focus-visible, .cycle-btn:focus-visible { outline: 2px solid #82b8e8; outline-offset: 2px; }
.btn:disabled { color: #918b78; border-color: rgba(127,122,103,.32); background: rgba(90,88,78,.15); opacity: 1; }
.shop-plaque-item { position: relative; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border: 1px solid rgba(214,168,79,.22); border-radius: 11px; background: linear-gradient(135deg, rgba(38,46,70,.78), rgba(16,21,35,.9)); box-shadow: inset 2px 0 0 rgba(214,168,79,.28), inset 0 1px 0 rgba(244,216,137,.05); }
.shop-plaque-item:hover { border-color: rgba(244,216,137,.5); }
.shop-plaque-item.is-locked { box-shadow: inset 2px 0 0 rgba(127,122,103,.44), inset 0 1px 0 rgba(255,255,255,.025); opacity: .78; }
.shop-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 3px; }
.shop-price { display: inline-flex; align-items: center; gap: 3px; color: #f1cf79; font-weight: 700; }
.shop-price-gem { width: 9px; height: 9px; display:inline-block; transform: rotate(45deg); border: 1px solid currentColor; border-radius: 2px; box-shadow: inset 2px 2px 0 rgba(255,255,255,.3); }
.shop-unlock-note, .shop-lock-chip { display: inline-flex; align-items:center; gap: 3px; color: #aaa28a; font-size: 11px; }
.shop-lock-chip { flex: 0 0 auto; min-width: 69px; justify-content:center; padding: 7px 8px; border: 1px dashed rgba(170,162,138,.46); border-radius: 8px; background: rgba(127,122,103,.11); }
.shop-description { color: var(--text-dim); margin-top: 4px; }
.plaque-buy { flex: 0 0 78px; min-height: 43px; padding: 5px 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.05; }
.plaque-buy small { color: rgba(25,23,15,.72); font-size: 9px; font-weight: 700; letter-spacing: 0; }
@media (max-width: 420px) {
  .resource-chip { padding: 2px 3px; gap: 2px; }
  .resource-chip .plaque-svg { width: 12px; height: 12px; }
  .quick-bar { gap: 5px; padding: 5px; }
  .quick-btn { min-height: 41px; font-size: 11px; }
  .cultivate-tail { display: none; }
  .plaque-buy { flex-basis: 67px; min-width: 67px; font-size: 12px; }
}


/* ============ SPIRIT PLAQUE P2: BAG & SKILLS ============ */
.bag-plaque-view, .skills-plaque-view { display:flex; flex-direction:column; gap:12px; }
.bag-overview-card, .skills-overview { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 12px; border:1px solid rgba(214,168,79,.30); border-radius:12px; background:linear-gradient(135deg,rgba(44,51,78,.94),rgba(17,23,39,.94)); box-shadow:inset 0 1px 0 rgba(244,216,137,.08), 0 6px 16px rgba(0,0,0,.14); }
.bag-overview-title, .skills-overview { align-items:center; }
.bag-overview-title { display:flex; gap:9px; min-width:0; }
.bag-heading-icon, .skills-overview-icon { width:31px; height:31px; flex:0 0 31px; display:inline-flex; align-items:center; justify-content:center; color:#f4d889; border:1px solid rgba(244,216,137,.5); border-radius:10px; background:rgba(214,168,79,.12); }
.bag-heading-icon .plaque-svg, .skills-overview-icon .plaque-svg { width:18px; height:18px; }
.bag-overview-title strong, .skills-overview strong { display:block; color:#fff0c4; font-size:14px; letter-spacing:.06em; }
.bag-overview-title small, .skills-overview small { display:block; margin-top:2px; color:var(--text-dim); font-size:10px; }
.bag-overview-metrics { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; }
.bag-overview-metrics .state-chip .plaque-svg { width:11px; height:11px; display:inline; vertical-align:-2px; }
.state-chip { display:inline-flex; align-items:center; gap:3px; min-height:22px; padding:1px 7px; border:1px solid rgba(200,193,164,.23); border-radius:20px; color:#c4c6cf; background:rgba(255,255,255,.035); font-size:10px; white-space:nowrap; }
.state-chip.is-gold { border-color:rgba(244,216,137,.5); color:#f4d889; background:rgba(214,168,79,.12); }
.state-chip.is-muted { color:#9ca3b4; border-color:rgba(156,163,180,.2); }
.state-chip.is-complete { color:#63c7b2; border-color:rgba(99,199,178,.38); background:rgba(99,199,178,.08); }
.state-chip.is-locked { color:#aaa28a; border-color:rgba(170,162,138,.34); background:rgba(127,122,103,.10); }
.state-chip.is-blue { color:#91c7f3; border-color:rgba(130,184,232,.36); background:rgba(130,184,232,.08); }
.bag-section, .skill-section { display:flex; flex-direction:column; gap:7px; }
.plaque-section-heading { min-height:25px; display:flex; align-items:center; gap:6px; color:#e8d49a; font-size:12px; font-weight:700; letter-spacing:.04em; }
.plaque-section-heading .section-icon { width:17px; height:17px; display:inline-flex; color:#d6a84f; }
.plaque-section-heading .plaque-svg { width:16px; height:16px; }
.bag-plaque-list, .skill-plaque-list, .shop-plaque-list { display:flex; flex-direction:column; gap:7px; }
.bag-plaque-item { display:grid; grid-template-columns:31px minmax(0,1fr) auto; align-items:center; gap:9px; padding:10px; border:1px solid rgba(214,168,79,.18); border-radius:11px; background:linear-gradient(135deg,rgba(42,49,74,.78),rgba(17,22,37,.94)); box-shadow:inset 2px 0 0 rgba(214,168,79,.17), inset 0 1px 0 rgba(255,255,255,.035); }
.bag-plaque-item.is-equipped { border-color:rgba(244,216,137,.55); box-shadow:inset 2px 0 0 #d6a84f, 0 0 12px rgba(214,168,79,.10); }
.bag-item-type { width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:#d6a84f; border:1px solid rgba(214,168,79,.30); border-radius:9px; background:rgba(214,168,79,.08); }
.bag-item-type .plaque-svg { width:17px; height:17px; }
.bag-item-content { min-width:0; }
.bag-item-title-row { display:flex; align-items:center; flex-wrap:wrap; gap:4px; font-size:13px; line-height:1.25; }
.bag-count { color:var(--text-dim); font-size:11px; }
.bag-item-description { margin:3px 0 0; color:var(--text-dim); font-size:10px; line-height:1.45; }
.bag-effect-list { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.bag-effect-chip { display:inline-flex; min-height:19px; align-items:center; padding:0 6px; border-radius:6px; color:#8fe1cf; background:rgba(99,199,178,.09); border:1px solid rgba(99,199,178,.22); font-size:9px; }
.bag-item-action, .skill-card-action { flex:0 0 auto; }
.bag-item-action { display:flex; justify-content:flex-end; min-width:0; }
.bag-sell-actions { display:inline-flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; max-width:100%; }
/* v1.50.7：背包出售数量控件——墨玉铜框、鎏金刻度，与灵物牌匾视觉统一。 */
#curModal .bag-sell-actions { align-items:center; gap:7px; }
#curModal .bag-sell-quantity { display:inline-flex; align-items:stretch; min-height:34px; overflow:hidden; border:1px solid rgba(214,168,79,.58); border-radius:8px; background:linear-gradient(180deg,rgba(50,59,77,.94),rgba(20,28,42,.98)); box-shadow:inset 0 1px 0 rgba(255,239,184,.11), inset 0 -1px 0 rgba(0,0,0,.34), 0 2px 7px rgba(0,0,0,.16); }
#curModal .bag-sell-step { display:inline-flex; align-items:center; justify-content:center; width:29px; min-width:29px; padding:0; border:0; border-right:1px solid rgba(214,168,79,.24); background:linear-gradient(180deg,rgba(92,77,45,.50),rgba(39,38,37,.56)); color:#f4d889; font-size:18px; font-weight:700; line-height:1; cursor:pointer; text-shadow:0 1px 0 rgba(0,0,0,.5); transition:background .16s ease, color .16s ease, box-shadow .16s ease; }
#curModal .bag-sell-step:last-child { border-right:0; border-left:1px solid rgba(214,168,79,.24); }
#curModal .bag-sell-step:hover { background:linear-gradient(180deg,rgba(151,119,55,.72),rgba(78,61,32,.74)); color:#fff1bd; box-shadow:inset 0 0 10px rgba(244,216,137,.16); }
#curModal .bag-sell-step:focus-visible, #curModal .bag-sell-count:focus-visible { position:relative; z-index:1; outline:2px solid rgba(130,184,232,.86); outline-offset:-2px; }
#curModal .bag-sell-step:active { transform:translateY(1px); }
#curModal .bag-sell-count-wrap { display:inline-flex; align-items:center; gap:3px; min-width:84px; padding:0 6px; color:#d9cfb3; cursor:text; }
#curModal .bag-sell-count-label { color:#d6a84f; font-size:9px; font-weight:700; letter-spacing:.08em; white-space:nowrap; }
#curModal .bag-sell-count { width:27px; min-width:0; margin:0; padding:0; border:0; border-bottom:1px solid rgba(130,184,232,.43); border-radius:0; outline:0; background:transparent; color:#fff1bd; font-family:inherit; font-size:12px; font-weight:800; line-height:1; text-align:center; appearance:textfield; -moz-appearance:textfield; }
#curModal .bag-sell-count::-webkit-outer-spin-button, #curModal .bag-sell-count::-webkit-inner-spin-button { margin:0; appearance:none; }
#curModal .bag-sell-count::selection { background:rgba(214,168,79,.52); color:#121a26; }
#curModal .bag-sell-count-max { color:#9db7d2; font-size:9px; font-variant-numeric:tabular-nums; white-space:nowrap; }
#curModal .bag-sell-actions .bag-sell { min-width:52px; border-color:rgba(130,184,232,.58); background:linear-gradient(180deg,rgba(57,83,112,.96),rgba(25,40,62,.98)); box-shadow:inset 0 1px 0 rgba(196,227,255,.13), 0 2px 6px rgba(0,0,0,.16); }
#curModal .bag-sell-actions .bag-sell:hover { border-color:rgba(182,220,255,.86); color:#f1f8ff; background:linear-gradient(180deg,rgba(76,113,149,.98),rgba(32,57,86,.99)); }
@media (max-width:420px) { #curModal .bag-sell-actions { gap:6px; } #curModal .bag-sell-quantity { min-height:32px; } #curModal .bag-sell-step { width:27px; min-width:27px; font-size:17px; } #curModal .bag-sell-count-wrap { min-width:79px; padding:0 5px; } #curModal .bag-sell-count-label { font-size:8px; } }
@media (max-width:360px) { #curModal .bag-sell-count-label { display:none; } #curModal .bag-sell-count-wrap { min-width:58px; justify-content:center; } }
.plaque-inline-action.bag-sell-one { border-color:rgba(130,184,232,.52); color:#dceeff; }
.plaque-inline-action.bag-sell-all { border-color:rgba(244,216,137,.74); background:linear-gradient(180deg,rgba(95,73,35,.96),rgba(47,34,20,.98)); color:#ffe8a5; }
.plaque-inline-action { min-width:52px; min-height:34px; padding:5px 8px; border:1px solid rgba(214,168,79,.44); border-radius:8px; background:linear-gradient(180deg,rgba(51,60,87,.95),rgba(25,31,49,.98)); color:#eee9d8; font-size:11px; font-weight:700; cursor:pointer; }
.plaque-inline-action.primary { border-color:#f4d889; background:linear-gradient(180deg,#f0cc76,#c68f38); color:#1c170d; box-shadow:inset 0 1px 0 rgba(255,250,216,.55), 0 3px 8px rgba(214,168,79,.18); }
.plaque-inline-action:active { transform:translateY(1px) scale(.98); }
.plaque-empty-state { display:flex; flex-direction:column; align-items:center; text-align:center; padding:28px 18px; border:1px dashed rgba(214,168,79,.28); border-radius:12px; background:rgba(14,19,32,.42); color:var(--text-dim); }
.plaque-empty-state .empty-state-icon { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:8px; color:#b3a16d; border:1px solid rgba(214,168,79,.28); border-radius:50%; background:rgba(214,168,79,.06); }
.plaque-empty-state .plaque-svg { width:23px; height:23px; }
.plaque-empty-state strong { color:#e8d49a; font-size:13px; }
.plaque-empty-state p { margin:5px 0 0; font-size:11px; line-height:1.5; }
.skill-plaque-card { padding:11px; border:1px solid rgba(130,184,232,.22); border-radius:12px; background:linear-gradient(135deg,rgba(32,48,72,.74),rgba(16,23,38,.94)); box-shadow:inset 2px 0 0 rgba(130,184,232,.25), inset 0 1px 0 rgba(255,255,255,.035); }
.skill-plaque-card.is-main { border-color:rgba(244,216,137,.55); background:linear-gradient(135deg,rgba(84,64,27,.42),rgba(20,25,40,.96)); box-shadow:inset 2px 0 0 #d6a84f, 0 6px 16px rgba(0,0,0,.13); }
.skill-plaque-card.is-support { border-color:rgba(99,199,178,.28); box-shadow:inset 2px 0 0 rgba(99,199,178,.55), inset 0 1px 0 rgba(255,255,255,.035); }
.skill-card-head { display:flex; align-items:flex-start; gap:8px; }
.skill-card-icon { width:31px; height:31px; flex:0 0 31px; display:inline-flex; align-items:center; justify-content:center; color:#91c7f3; border:1px solid rgba(130,184,232,.38); border-radius:9px; background:rgba(130,184,232,.08); }
.is-main .skill-card-icon { color:#f4d889; border-color:rgba(244,216,137,.52); background:rgba(214,168,79,.12); }
.is-support .skill-card-icon { color:#63c7b2; border-color:rgba(99,199,178,.40); background:rgba(99,199,178,.08); }
.skill-card-icon .plaque-svg { width:18px; height:18px; }
.skill-card-identity { min-width:0; flex:1; }
.skill-name-row { display:flex; align-items:center; flex-wrap:wrap; gap:5px; color:#f0f1f5; font-size:14px; }
.skill-chip-row { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.element-chip { min-width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; border-radius:5px; border:1px solid currentColor; font-size:9px; font-weight:700; }
.element-metal { color:#d7c58a; background:rgba(215,197,138,.08); }.element-wood { color:#79c38d; background:rgba(121,195,141,.08); }.element-water { color:#75b9e8; background:rgba(117,185,232,.08); }.element-fire { color:#eb8d79; background:rgba(235,141,121,.08); }.element-earth { color:#caa374; background:rgba(202,163,116,.08); }.element-wind { color:#a7d9c8; background:rgba(167,217,200,.08); }.element-thunder { color:#c4a4ec; background:rgba(196,164,236,.08); }.element-ice { color:#a4d8ef; background:rgba(164,216,239,.08); }
.skill-description { margin:8px 0 0; color:var(--text-dim); font-size:11px; line-height:1.5; }
.skill-effect-note { margin-top:6px; padding:5px 7px; border-left:2px solid #d6a84f; border-radius:0 6px 6px 0; color:#ead18c; background:rgba(214,168,79,.08); font-size:10px; line-height:1.4; }
.is-support .skill-effect-note { border-left-color:#63c7b2; color:#93dfcf; background:rgba(99,199,178,.08); }
.plaque-progress { margin-top:9px; }.plaque-progress-label { display:flex; justify-content:space-between; gap:8px; color:#96a0b5; font-size:9px; }.plaque-progress-track { height:6px; overflow:hidden; margin-top:3px; border-radius:6px; background:rgba(255,255,255,.08); }.plaque-progress-fill { height:100%; border-radius:inherit; background:linear-gradient(90deg,#7698ba,#b7d2e9); }.plaque-progress.is-gold .plaque-progress-label { color:#d9bd74; }.plaque-progress.is-gold .plaque-progress-fill { background:linear-gradient(90deg,#b77a2b,#f4d889); box-shadow:0 0 6px rgba(244,216,137,.36); }.plaque-progress.is-blue .plaque-progress-fill { background:linear-gradient(90deg,#43a98f,#9ce6d7); }
.skill-section-note { margin:0; padding:7px 9px; color:#9da7b8; border:1px solid rgba(99,199,178,.18); border-radius:8px; background:rgba(99,199,178,.05); font-size:10px; line-height:1.45; }
@media (max-width:420px) { .bag-overview-card { align-items:flex-start; flex-direction:column; }.bag-overview-metrics { justify-content:flex-start; }.bag-plaque-item { grid-template-columns:28px minmax(0,1fr); gap:7px; padding:9px; }.bag-item-action { grid-column:2; justify-content:flex-start; width:100%; padding-top:1px; }.bag-sell-actions { justify-content:flex-start; }.bag-item-type { width:28px; height:28px; }.plaque-inline-action { min-width:48px; min-height:32px; padding:4px 6px; }.skill-card-head { gap:7px; }.skill-card-icon { width:29px; height:29px; flex-basis:29px; }.skill-name-row { font-size:13px; }.bag-item-description, .skill-description { font-size:10px; } }


/* ============ SPIRIT PLAQUE P3: COMBAT & PLAYER DETAIL ============ */
#combatView { background:radial-gradient(ellipse at 50% 5%,rgba(54,71,111,.22),transparent 42%),linear-gradient(180deg,#0b1020 0%,#090d18 100%); color:#e6e8ef; }
#combatView::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.3; background-image:linear-gradient(rgba(212,168,79,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(212,168,79,.035) 1px,transparent 1px); background-size:26px 26px; mask-image:linear-gradient(to bottom,#000,transparent 72%); }
.combat-header { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) repeat(5,auto); align-items:center; gap:6px; padding:8px 9px; border-bottom:1px solid rgba(214,168,79,.30); background:linear-gradient(180deg,rgba(31,40,65,.98),rgba(14,20,34,.98)); box-shadow:inset 0 1px 0 rgba(244,216,137,.09),0 5px 18px rgba(0,0,0,.28); }
.combat-title { color:#f4d889; font-size:14px; font-weight:800; letter-spacing:.08em; text-shadow:0 0 10px rgba(244,216,137,.28); }
.combat-turn-indicator { min-height:24px; display:inline-flex; align-items:center; padding:0 7px; border:1px solid rgba(130,184,232,.36); border-radius:12px; color:#b9d6ee; background:rgba(130,184,232,.08); font-size:10px; white-space:nowrap; }
.combat-turn { color:#9da8bc; font-size:10px; white-space:nowrap; }
.combat-speed-btn, .combat-exit-btn { min-height:30px; padding:4px 7px; border:1px solid rgba(214,168,79,.36); border-radius:8px; color:#ece5ce; background:linear-gradient(180deg,rgba(46,57,86,.88),rgba(20,26,43,.94)); font-size:10px; box-shadow:inset 0 1px 0 rgba(244,216,137,.07); }
.combat-speed-btn:active, .combat-exit-btn:active { transform:translateY(1px); }
.combat-decision-hint { position:relative; z-index:1; margin:6px 9px 0; padding:6px 9px; border:1px solid rgba(99,199,178,.20); border-radius:8px; color:#a6d9cf; background:rgba(99,199,178,.05); font-size:10px; line-height:1.35; }
.combat-area { position:relative; z-index:1; padding:8px 10px 4px; }
.enemy-section { padding:8px; border:1px solid rgba(214,168,79,.28); border-radius:13px; background:linear-gradient(135deg,rgba(58,39,44,.42),rgba(23,28,46,.78)); box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 7px 16px rgba(0,0,0,.18); }
.enemy-heading-row { gap:6px; }.enemy-name { color:#f2e5bd; font-size:15px; font-weight:800; letter-spacing:.04em; }.enemy-type { border:1px solid rgba(255,171,145,.44); border-radius:10px; padding:2px 6px; font-size:9px; }
.enemy-portrait-shell { filter:drop-shadow(0 7px 12px rgba(0,0,0,.28)); }.enemy-portrait-frame { border:2px solid rgba(244,216,137,.55); box-shadow:0 0 0 3px rgba(214,168,79,.08),0 0 18px rgba(214,168,79,.16); }.enemy-status-badges { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; }.enemy-status-badge { min-height:21px; padding:1px 6px; border-radius:12px; font-size:9px; border-width:1px; }
.combat-log { min-height:76px; max-height:105px; margin:7px 0; padding:7px 9px; border:1px solid rgba(130,184,232,.17); border-radius:10px; background:rgba(5,9,18,.55); color:#b7c0d0; font-size:10px; line-height:1.5; box-shadow:inset 0 1px 8px rgba(0,0,0,.20); }
.allies-row { gap:7px; }.char-card { border:1px solid rgba(130,184,232,.27); border-radius:12px; background:linear-gradient(160deg,rgba(32,49,76,.78),rgba(13,19,33,.96)); box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 14px rgba(0,0,0,.15); }.player-card { border-color:rgba(244,216,137,.45); }.char-name { color:#f0e1b8; font-size:12px; font-weight:700; letter-spacing:.05em; }.char-status-badges { gap:3px; }.char-status-badge { min-height:19px; border-radius:10px; padding:1px 5px; font-size:8px; }
.combat-actions { position:relative; z-index:2; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; padding:7px 7px calc(7px + env(safe-area-inset-bottom)); border-top:1px solid rgba(214,168,79,.30); background:linear-gradient(180deg,rgba(25,32,52,.98),rgba(9,13,24,.99)); box-shadow:0 -7px 18px rgba(0,0,0,.24),inset 0 1px 0 rgba(244,216,137,.06); }
.combat-action-btn { min-height:51px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:5px 2px; border:1px solid rgba(214,168,79,.30); border-radius:10px; background:linear-gradient(180deg,rgba(48,59,86,.92),rgba(21,27,45,.96)); color:#dfe4ee; font-size:10px; line-height:1; box-shadow:inset 0 1px 0 rgba(244,216,137,.06); }
.combat-action-btn .ca-icon { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; color:#d7c780; }.combat-action-btn .ca-icon .plaque-svg { width:17px; height:17px; }.combat-action-btn.primary { border-color:#f4d889; background:linear-gradient(180deg,#efc96f,#b87b2c); color:#1d170b; box-shadow:inset 0 1px 0 rgba(255,249,215,.56),0 4px 10px rgba(214,168,79,.20); }.combat-action-btn.primary .ca-icon { color:#442f0e; }.combat-action-btn.trib-btn { border-color:rgba(130,184,232,.42); }.combat-action-btn:active { transform:translateY(1px) scale(.985); }.combat-action-btn:disabled { opacity:.42; filter:saturate(.3); }
.combat-action-btn:focus-visible, .combat-speed-btn:focus-visible, .combat-exit-btn:focus-visible { outline:2px solid #82b8e8; outline-offset:2px; }
.player-p3-view { display:flex; flex-direction:column; gap:10px; }.pd-p3-hero-card { display:grid; grid-template-columns:70px minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px; border:1px solid rgba(244,216,137,.48); border-radius:14px; background:linear-gradient(135deg,rgba(73,58,31,.42),rgba(20,27,44,.95)); box-shadow:inset 0 1px 0 rgba(255,248,210,.11),0 8px 18px rgba(0,0,0,.16); }.pd-p3-portrait-shell { width:68px; height:68px; overflow:hidden; border:2px solid #d6a84f; border-radius:13px; background:#111827; box-shadow:0 0 0 3px rgba(214,168,79,.10); }.pd-p3-portrait { width:100%; height:100%; object-fit:cover; cursor:zoom-in; }.pd-p3-kicker { display:flex; align-items:center; gap:4px; color:#d6b76b; font-size:9px; letter-spacing:.08em; }.pd-p3-kicker .plaque-svg { width:13px; height:13px; }.pd-p3-hero-info h2 { margin:3px 0 0; color:#fff0c4; font-size:17px; line-height:1.1; }.pd-p3-hero-info p { margin:3px 0 0; color:#abb5c7; font-size:11px; }.pd-p3-chip-row { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }.pd-p3-swap { min-width:40px; min-height:48px; display:flex; flex-direction:column; gap:3px; align-items:center; justify-content:center; padding:4px 6px; font-size:8px; }.pd-p3-swap .plaque-svg { width:15px; height:15px; }.pd-p3-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }.pd-p3-stat-card { display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 4px; border:1px solid rgba(130,184,232,.24); border-radius:10px; background:rgba(32,43,65,.76); }.pd-p3-stat-card>span { color:#9fc9f0; }.pd-p3-stat-card .plaque-svg { width:17px; height:17px; }.pd-p3-stat-card strong { color:#f3f5fa; font-size:17px; }.pd-p3-stat-card small { color:#aab3c4; font-size:9px; }.pd-p3-stat-card.is-attack>span { color:#e98d78; }.pd-p3-stat-card.is-defense>span { color:#78b4e2; }.pd-p3-stat-card.is-speed>span { color:#83ceb2; }.pd-p3-vitals { padding:10px; border:1px solid rgba(214,168,79,.20); border-radius:11px; background:rgba(10,15,27,.38); }.pd-p3-vital-row { display:flex; justify-content:space-between; align-items:center; color:#bac3d3; font-size:11px; }.pd-p3-vital-row div { display:flex; align-items:center; gap:5px; }.pd-p3-vital-row .plaque-svg { width:14px; height:14px; }.pd-p3-vital-row:first-child .plaque-svg { color:#e96e6e; }.pd-p3-vital-row b { color:#e9edf5; font-size:11px; }.pd-p3-vital-track { height:7px; overflow:hidden; margin:4px 0 9px; border-radius:7px; background:rgba(255,255,255,.08); }.pd-p3-vital-track:last-child { margin-bottom:0; }.pd-p3-vital-track i { display:block; height:100%; border-radius:inherit; }.pd-p3-vital-track.is-hp i { background:linear-gradient(90deg,#ad404d,#ee7980); }.pd-p3-vital-track.is-qi i { background:linear-gradient(90deg,#347da8,#79c7e8); }.pd-p3-panel { padding:11px; border:1px solid rgba(214,168,79,.21); border-radius:11px; background:linear-gradient(135deg,rgba(37,45,68,.66),rgba(15,21,35,.90)); }.pd-p3-panel-heading { display:flex; align-items:center; gap:6px; margin-bottom:8px; color:#ead59a; font-size:12px; font-weight:700; }.pd-p3-panel-heading .plaque-svg { width:16px; height:16px; color:#d6a84f; }.pd-p3-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.pd-p3-info-grid small, .pd-p3-main-skill small { display:block; color:#9da7b9; font-size:9px; }.pd-p3-info-grid strong, .pd-p3-main-skill strong { display:block; margin-top:3px; color:#edf0f6; font-size:12px; }.pd-p3-info-grid strong.is-gold { color:#f4d889; }.pd-p3-info-grid em { display:block; margin-top:3px; color:#8e99ad; font-size:8px; font-style:normal; line-height:1.35; }.pd-p3-age-track { height:5px; overflow:hidden; margin-top:5px; border-radius:5px; background:rgba(255,255,255,.08); }.pd-p3-age-track i { display:block; height:100%; background:linear-gradient(90deg,#78b4e2,#d6a84f); }.pd-p3-root-wrap { display:flex; flex-wrap:wrap; gap:5px; }.pd-p3-root-chip { padding:3px 7px; border:1px solid color-mix(in srgb,var(--root-color) 48%,transparent); border-radius:7px; color:var(--root-color); background:color-mix(in srgb,var(--root-color) 11%,transparent); font-size:10px; }.pd-p3-root-chip.is-best { box-shadow:0 0 8px color-mix(in srgb,var(--root-color) 24%,transparent); }.pd-p3-body { margin:7px 0 0; color:#aeb8c9; font-size:10px; line-height:1.5; }.pd-p3-body strong.is-good { color:#76d0ad; }.pd-p3-body strong.is-risk { color:#e68782; }.pd-p3-fusion { display:flex; flex-direction:column; gap:3px; margin-top:8px; padding:7px 8px; border-left:2px solid #c7a85b; border-radius:0 7px 7px 0; background:rgba(214,168,79,.08); }.pd-p3-fusion strong { color:#f1d48b; font-size:11px; }.pd-p3-fusion span { color:#b2bccd; font-size:10px; line-height:1.4; }.pd-p3-match { display:inline-flex; margin-top:8px; padding:3px 7px; border:1px solid rgba(130,184,232,.30); border-radius:7px; color:#afd3f1; background:rgba(130,184,232,.07); font-size:10px; }.pd-p3-match.is-good { color:#75d3b0; border-color:rgba(99,199,178,.38); background:rgba(99,199,178,.08); }.pd-p3-match.is-risk { color:#eb8b84; border-color:rgba(232,117,110,.35); background:rgba(232,117,110,.07); }.pd-p3-main-skill { display:flex; align-items:center; gap:8px; padding:8px; border:1px solid rgba(244,216,137,.26); border-radius:9px; background:rgba(214,168,79,.07); }.pd-p3-main-skill>span { width:23px; height:23px; display:inline-flex; align-items:center; justify-content:center; color:#e6c96f; }.pd-p3-main-skill .plaque-svg { width:17px; height:17px; }.pd-p3-support-list { display:flex; flex-direction:column; gap:5px; margin-top:8px; }.pd-p3-support-item { display:grid; grid-template-columns:16px auto 1fr; align-items:center; gap:5px; padding:6px 7px; border:1px solid rgba(99,199,178,.20); border-radius:7px; color:#b5ddcf; background:rgba(99,199,178,.05); font-size:10px; }.pd-p3-support-item .plaque-svg { width:14px; height:14px; }.pd-p3-support-item small { color:#a8b6c4; font-size:9px; text-align:right; }.pd-p3-empty { padding:7px; color:#96a2b4; border:1px dashed rgba(150,162,180,.22); border-radius:7px; font-size:10px; }.pd-p3-equipment { display:flex; flex-direction:column; gap:4px; margin-top:9px; padding-top:9px; border-top:1px solid rgba(255,255,255,.07); }.pd-p3-equip-row { display:grid; grid-template-columns:18px 32px 1fr; align-items:center; gap:5px; color:#c6ceda; font-size:10px; }.pd-p3-equip-icon { display:inline-flex; color:#c8ad69; }.pd-p3-equip-icon .plaque-svg { width:14px; height:14px; }.pd-p3-equip-label { color:#929db0; }.pd-p3-equip-value { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.pd-p3-combat-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
@media (max-width:420px) { .combat-header { grid-template-columns:minmax(0,1fr) auto auto; }.combat-turn { display:none; }.combat-speed-btn { min-width:31px; padding:4px 5px; font-size:0; }.combat-speed-btn::first-letter { font-size:11px; }.combat-actions { gap:4px; padding-left:5px; padding-right:5px; }.combat-action-btn { min-height:49px; font-size:9px; }.pd-p3-hero-card { grid-template-columns:61px minmax(0,1fr) auto; gap:8px; }.pd-p3-portrait-shell { width:59px; height:59px; }.pd-p3-swap span { display:none; }.pd-p3-swap { min-width:32px; }.pd-p3-info-grid { gap:7px; } }


/* ============ COMBAT BOTTOM ALLY ANCHOR ============ */
/* H5 vertical battle layout: enemy at top, growing log in the middle, allies above the action bar. */
#combatView {
    /* 100vh is a fallback.  min-height must stay at 0: on foldable/mobile
       browsers it otherwise overrides the smaller dynamic visual viewport and
       pushes the permanent combat controls beneath the browser chrome. */
    height:100vh;
    min-height:0;
    max-height:100vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
@supports (height:100dvh) {
    #combatView { height:100dvh; max-height:100dvh; }
}
#combatView.hidden { display:none; }
#combatView .combat-header,
#combatView .combat-decision-hint,
#combatView .combat-actions { flex:0 0 auto; }
#combatView .combat-area {
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding:7px 9px 4px;
}
#combatView .enemy-section { flex:0 0 auto; }
#combatView .combat-log {
    flex:1 1 auto;
    min-height:72px;
    max-height:none;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    margin:7px 0 6px;
}
/* This row follows the expanding log, so it stays immediately above the permanent action menu. */
#combatView .allies-row {
    flex:0 0 auto;
    margin-top:auto;
    min-height:0;
    padding:4px 0 1px;
}
#combatView .combat-actions {
    /* Keep every command button above scene effects and in the visible visual
       viewport. The safe-area inset preserves touch access above system UI. */
    flex:0 0 auto;
    position:relative;
    z-index:10;
    box-sizing:border-box;
    margin:0;
    border-radius:0;
}
/* One player, player + companion, and full family formations all preserve the same bottom anchor. */
#combatView .allies-row:has(#companionCard[style*="display: none"]) { justify-content:center; }
#combatView .allies-row:has(#companionCard[style*="display:none"]) { justify-content:center; }
@media (max-width:420px) {
    #combatView .combat-area { padding:6px 7px 3px; }
    #combatView .combat-log { min-height:66px; margin:6px 0 5px; }
    #combatView .allies-row { padding-top:3px; }
}
@media (max-height:680px) {
    #combatView .combat-decision-hint { margin-top:4px; padding-top:4px; padding-bottom:4px; }
    #combatView .enemy-section { padding:6px; }
    #combatView .combat-log { min-height:54px; }
    #combatView .combat-action-btn { min-height:45px; }
}


/* ============ COMBAT ALLY FORMATION CENTER ============ */
/* The flex row centers its visible children as one formation: solo, duo, or family formation. */
#combatView .allies-row {
    width:100%;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:7px;
}
#combatView .allies-row > .char-card,
#combatView .allies-row > .children-grid { flex:0 0 auto; }


/* ============ COMBAT ALLY CENTER EMPTY GRID FIX ============ */
/* UICombat clears childrenGrid when no child fights; it must not reserve a 106px empty flex cell. */
#combatView .children-grid:empty { display:none; }


/* ============ COMBAT DYNAMIC FEEDBACK ============ */
/* Visual-only layer: no pointer events and no effect on battle controls or logs. */
.combat-impact-burst {
    --impact-color: #f0c66b;
    position:absolute;
    z-index:88;
    width:16px;
    height:16px;
    margin:-8px 0 0 -8px;
    border:2px solid var(--impact-color);
    border-radius:50%;
    pointer-events:none;
    opacity:0;
    transform:scale(.25);
    box-shadow:0 0 0 1px rgba(255,255,255,.38) inset, 0 0 14px color-mix(in srgb,var(--impact-color) 75%,transparent);
    animation:combat-impact-ring .54s cubic-bezier(.18,.72,.23,1) forwards;
}
.combat-impact-burst::before,
.combat-impact-burst::after {
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    width:2px;
    height:34px;
    border-radius:99px;
    background:linear-gradient(180deg,transparent,var(--impact-color),transparent);
    transform:translate(-50%,-50%) rotate(45deg);
    box-shadow:0 0 7px var(--impact-color);
}
.combat-impact-burst::after { transform:translate(-50%,-50%) rotate(-45deg); }
.combat-impact-burst.crit {
    width:24px;
    height:24px;
    margin:-12px 0 0 -12px;
    border-width:3px;
    --impact-color:#fff1a8;
    animation-duration:.72s;
}
.combat-impact-burst.player-hit { --impact-color:#ef7f83; }
.combat-impact-burst.companion-hit { --impact-color:#f2a3c2; }
.combat-impact-burst.child-hit { --impact-color:#b894e8; }
.combat-impact-burst.fire { --impact-color:#ff805c; }
.combat-impact-burst.ice { --impact-color:#88ddff; }
.combat-impact-burst.thunder { --impact-color:#deb0ff; }
.combat-impact-burst.wood { --impact-color:#9be38b; }
.combat-impact-burst.water { --impact-color:#7fc7ff; }
.combat-impact-burst.earth { --impact-color:#e8c383; }
.combat-impact-burst.wind { --impact-color:#9ae8de; }
.combat-impact-burst.metal { --impact-color:#eff5ff; }
@keyframes combat-impact-ring {
    0% { opacity:0; transform:scale(.18) rotate(-8deg); }
    18% { opacity:1; }
    70% { opacity:.92; transform:scale(2.5) rotate(12deg); }
    100% { opacity:0; transform:scale(3.15) rotate(18deg); }
}
.combat-impact-label {
    position:absolute;
    z-index:89;
    pointer-events:none;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    color:#f4d989;
    text-shadow:0 2px 7px rgba(0,0,0,.92),0 0 9px rgba(244,202,102,.58);
    transform:translate(-50%,-50%);
    animation:combat-impact-label-float .74s ease-out forwards;
}
.combat-impact-label.crit { font-size:14px; color:#fff1a8; }
@keyframes combat-impact-label-float {
    0% { opacity:0; transform:translate(-50%,-28%) scale(.72); }
    20% { opacity:1; transform:translate(-50%,-62%) scale(1.08); }
    100% { opacity:0; transform:translate(-50%,-162%) scale(.95); }
}
.combat-outcome-seal {
    position:absolute;
    z-index:92;
    left:50%;
    top:39%;
    width:min(48vw,218px);
    min-width:156px;
    padding:12px 14px 11px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    border:1px solid rgba(244,211,126,.8);
    border-radius:13px;
    background:linear-gradient(135deg,rgba(21,27,48,.94),rgba(53,43,26,.87));
    box-shadow:0 0 0 3px rgba(244,211,126,.10),0 14px 32px rgba(0,0,0,.5);
    pointer-events:none;
    transform:translate(-50%,-50%) scale(.66);
    opacity:0;
    animation:combat-outcome-seal .98s cubic-bezier(.18,.78,.25,1) forwards;
}
.combat-outcome-seal strong { font-family:serif; font-size:44px; line-height:1; color:#f6d781; text-shadow:0 0 14px rgba(244,204,97,.62); }
.combat-outcome-seal span { color:#e7d8b5; font-size:10px; letter-spacing:.08em; white-space:nowrap; }
.combat-outcome-seal.defeat { border-color:rgba(226,117,109,.8); background:linear-gradient(135deg,rgba(48,25,33,.94),rgba(29,30,44,.9)); }
.combat-outcome-seal.defeat strong { color:#ea9690; text-shadow:0 0 14px rgba(226,100,96,.55); }
@keyframes combat-outcome-seal {
    0% { opacity:0; transform:translate(-50%,-50%) scale(.66) rotate(-5deg); }
    24% { opacity:1; transform:translate(-50%,-50%) scale(1.05) rotate(1deg); }
    72% { opacity:1; transform:translate(-50%,-50%) scale(1); }
    100% { opacity:0; transform:translate(-50%,-56%) scale(.98); }
}
@media (max-width:420px) {
    .combat-impact-burst { transform:scale(.82); }
    .combat-impact-label { font-size:10px; }
    .combat-outcome-seal { top:36%; width:52vw; min-width:144px; padding:10px 11px; }
    .combat-outcome-seal strong { font-size:37px; }
}
@media (prefers-reduced-motion:reduce) {
    .combat-impact-burst,.combat-impact-label,.combat-outcome-seal { animation:none; opacity:.78; }
    .combat-impact-burst { transform:scale(1.15); }
    .combat-impact-label,.combat-outcome-seal { transform:translate(-50%,-50%); }
}


/* ============ ELEMENTAL SKILL CAST & COUNTER FEEDBACK ============ */
.combat-element-cast {
    --element-color:#f3d177;
    --element-glow:rgba(243,209,119,.55);
    position:absolute;
    inset:0;
    z-index:80;
    overflow:hidden;
    pointer-events:none;
}
.combat-element-cast i {
    position:absolute;
    left:calc(50% + var(--drift));
    top:76%;
    width:clamp(5px,1.4vw,9px);
    height:clamp(5px,1.4vw,9px);
    border-radius:50%;
    opacity:0;
    background:radial-gradient(circle at 32% 28%,#fff 0 12%,var(--element-color) 31%,color-mix(in srgb,var(--element-color) 8%,transparent) 72%);
    box-shadow:0 0 10px var(--element-glow),0 0 20px color-mix(in srgb,var(--element-color) 48%,transparent);
    transform:translate(-50%,-50%) scale(.35);
    animation:element-cast-orbit .82s cubic-bezier(.18,.72,.2,1) var(--delay) forwards;
}
.combat-element-cast::before {
    content:'';
    position:absolute;
    left:50%;
    top:74%;
    width:10px;
    height:10px;
    border:2px solid var(--element-color);
    border-radius:50%;
    opacity:0;
    box-shadow:0 0 18px var(--element-glow),inset 0 0 12px var(--element-glow);
    transform:translate(-50%,-50%) scale(.35);
    animation:element-cast-sigil .68s ease-out forwards;
}
.combat-element-cast::after {
    content:'';
    position:absolute;
    left:50%;
    top:37%;
    width:20px;
    height:20px;
    border:2px solid var(--element-color);
    border-radius:50%;
    opacity:0;
    transform:translate(-50%,-50%) scale(.4);
    box-shadow:0 0 18px var(--element-glow),0 0 30px color-mix(in srgb,var(--element-color) 35%,transparent);
    animation:element-hit-sigil .66s .35s ease-out forwards;
}
.combat-element-cast.fire { --element-color:#ff855f; --element-glow:rgba(255,98,65,.62); }
.combat-element-cast.ice { --element-color:#8bdcff; --element-glow:rgba(93,211,255,.58); }
.combat-element-cast.thunder { --element-color:#d9a3ff; --element-glow:rgba(204,134,255,.62); }
.combat-element-cast.wood { --element-color:#9be78e; --element-glow:rgba(107,213,101,.58); }
.combat-element-cast.water { --element-color:#80c8ff; --element-glow:rgba(86,168,255,.56); }
.combat-element-cast.earth { --element-color:#e9c57e; --element-glow:rgba(225,175,94,.55); }
.combat-element-cast.wind { --element-color:#92eadb; --element-glow:rgba(82,214,193,.54); }
.combat-element-cast.metal { --element-color:#eef6ff; --element-glow:rgba(211,229,255,.56); }
@keyframes element-cast-orbit {
    0% { opacity:0; transform:translate(-50%,-50%) scale(.25) rotate(0deg); }
    12% { opacity:1; }
    62% { opacity:1; transform:translate(calc(-50% + var(--drift)),calc(-50% - 210px)) scale(1) rotate(140deg); }
    100% { opacity:0; transform:translate(calc(-50% + var(--drift) * .25),calc(-50% - 285px)) scale(.45) rotate(220deg); }
}
@keyframes element-cast-sigil {
    0% { opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(0deg); }
    18% { opacity:.9; }
    100% { opacity:0; transform:translate(-50%,-50%) scale(6.8) rotate(160deg); }
}
@keyframes element-hit-sigil {
    0% { opacity:0; transform:translate(-50%,-50%) scale(.25); }
    30% { opacity:1; transform:translate(-50%,-50%) scale(1.55); }
    100% { opacity:0; transform:translate(-50%,-50%) scale(3.6); }
}
.combat-counter-flare {
    --counter-color:#f5d478;
    position:absolute;
    left:50%;
    top:35%;
    z-index:87;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1px;
    min-width:112px;
    padding:6px 10px;
    border:1px solid color-mix(in srgb,var(--counter-color) 75%,transparent);
    border-radius:999px;
    color:#fff2bc;
    background:linear-gradient(90deg,transparent,rgba(16,20,38,.9),transparent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--counter-color) 10%,transparent),0 0 20px color-mix(in srgb,var(--counter-color) 52%,transparent);
    pointer-events:none;
    opacity:0;
    transform:translate(-50%,-50%) scale(.72);
    animation:counter-flare-pop .98s cubic-bezier(.18,.75,.22,1) forwards;
}
.combat-counter-flare strong { font-size:15px; letter-spacing:.28em; padding-left:.28em; color:var(--counter-color); text-shadow:0 0 9px var(--counter-color); }
.combat-counter-flare span { color:#eef3ff; font-size:9px; letter-spacing:.08em; white-space:nowrap; }
.combat-counter-flare.fire { --counter-color:#ff9b72; }.combat-counter-flare.ice { --counter-color:#9ee6ff; }.combat-counter-flare.thunder { --counter-color:#e0b4ff; }.combat-counter-flare.wood { --counter-color:#adee9f; }.combat-counter-flare.water { --counter-color:#9bd2ff; }.combat-counter-flare.earth { --counter-color:#efcf90; }.combat-counter-flare.wind { --counter-color:#a5ecdf; }.combat-counter-flare.metal { --counter-color:#f2f7ff; }
@keyframes counter-flare-pop {
    0% { opacity:0; transform:translate(-50%,-50%) scale(.68); }
    20% { opacity:1; transform:translate(-50%,-50%) scale(1.08); }
    66% { opacity:1; transform:translate(-50%,-50%) scale(1); }
    100% { opacity:0; transform:translate(-50%,-72%) scale(.95); }
}
#combatView .player-card.element-casting { filter:brightness(1.2) saturate(1.25); box-shadow:0 0 18px rgba(244,207,113,.55),inset 0 0 18px rgba(244,207,113,.14); }
#combatView .enemy-portrait-shell.counter-exposed { animation:counter-exposed-shake .58s ease-out; box-shadow:0 0 22px rgba(244,207,113,.72),inset 0 0 18px rgba(244,207,113,.22); }
@keyframes counter-exposed-shake { 0%,100% { transform:translateX(0); } 24% { transform:translateX(-8px) rotate(-2deg); } 52% { transform:translateX(7px) rotate(1deg); } 74% { transform:translateX(-3px); } }
@media (max-width:420px) {
    .combat-element-cast i { animation-duration:.72s; }
    .combat-counter-flare { min-width:100px; padding:5px 8px; }
    .combat-counter-flare strong { font-size:13px; }
    .combat-counter-flare span { font-size:8px; }
}
@media (prefers-reduced-motion:reduce) {
    .combat-element-cast i,.combat-element-cast::before,.combat-element-cast::after,.combat-counter-flare,#combatView .enemy-portrait-shell.counter-exposed { animation:none; }
    .combat-element-cast i { opacity:.78; }
    .combat-counter-flare { opacity:.92; transform:translate(-50%,-50%); }
}


/* ============ MOBILE COMBAT HEADER & VIEWPORT SAFEGUARD ============ */
/* Four visible header controls must remain on one row.  Do not allow the speed
   button to wrap below the header and consume the log/action-bar height. */
@media (max-width:420px) {
    #combatView {
        height:100vh;
        min-height:0;
        max-height:100vh;
    }
    @supports (height:100dvh) {
        #combatView { height:100dvh; max-height:100dvh; }
    }
    #combatView .combat-header {
        grid-template-columns:minmax(0,1fr) minmax(0,max-content) 34px 34px;
        grid-template-rows:auto;
        gap:4px;
        padding:6px 7px;
    }
    #combatView .combat-title {
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:15px;
    }
    #combatView .combat-turn-indicator {
        min-width:0;
        max-width:94px;
        overflow:hidden;
        text-overflow:ellipsis;
        padding:0 6px;
    }
    #combatView .combat-turn { display:none; }
    #combatView .combat-speed-btn {
        box-sizing:border-box;
        display:grid;
        place-items:center;
        width:34px;
        min-width:34px;
        max-width:34px;
        height:30px;
        min-height:30px;
        padding:0;
        overflow:hidden;
        white-space:nowrap;
        font-size:0;
        line-height:1;
    }
    #combatView #btnCombatAuto::after {
        content:'🤖';
        font-size:13px;
        line-height:1;
    }
    #combatView #btnCombatSpeed::after {
        content:'⏩';
        font-size:12px;
        line-height:1;
    }
    #combatView .combat-area {
        min-height:0;
        padding-bottom:2px;
    }
    #combatView .combat-actions {
        min-height:0;
        padding-top:5px;
        padding-bottom:calc(5px + env(safe-area-inset-bottom));
    }
}
@media (max-width:420px) and (max-height:760px) {
    #combatView .combat-decision-hint {
        margin-top:2px;
        padding-top:3px;
        padding-bottom:3px;
    }
    #combatView .enemy-section { padding:5px; }
    #combatView .combat-log { min-height:50px; margin:4px 0; }
    #combatView .allies-row { padding-top:2px; }
    #combatView .combat-action-btn { min-height:43px; height:43px; }
}


/* ============ HOME BUTTON ICON TUNING ============ */
/* Keep ten-year and hundred-year retreat options text-only, even if older themes
   or extensions inject decorative glyphs through pseudo elements. */
.cycle-btn[data-cycles="10"]::before,
.cycle-btn[data-cycles="10"]::after,
.cycle-btn[data-cycles="100"]::before,
.cycle-btn[data-cycles="100"]::after {
    content:none !important;
    display:none !important;
}
/* The mode names remain the same text size; only the four quick-action SVGs grow. */
.quick-btn .quick-icon {
    width:22px;
    height:22px;
    flex:0 0 22px;
}
.quick-btn .quick-icon .plaque-svg {
    width:22px;
    height:22px;
}
.quick-btn { gap:4px; }
@media (max-width:420px) {
    .quick-btn .quick-icon {
        width:21px;
        height:21px;
        flex-basis:21px;
    }
    .quick-btn .quick-icon .plaque-svg {
        width:21px;
        height:21px;
    }
}


/* ============ SUBMENU ACTION VISUAL SYSTEM ============ */
/* Shared compact action rhythm for bag, skills, map, sect, save and system panels. */
#curModal .btn,
#curModal .plaque-inline-action,
#curModal .bag-item-action,
#curModal .skill-card-action {
    line-height:1.2;
    touch-action:manipulation;
}
#curModal .btn:not(.submenu-action) {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:42px;
}
#curModal .btn:not(.submenu-action):not(.danger):not(.primary) {
    border-color:rgba(214,168,79,.30);
    background:linear-gradient(180deg,rgba(47,57,84,.92),rgba(22,29,47,.96));
}
#curModal .btn.primary {
    box-shadow:inset 0 1px 0 rgba(255,248,209,.35),0 3px 9px rgba(214,168,79,.18);
}
#curModal .btn.danger {
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 3px 9px rgba(205,73,73,.16);
}
.submenu-action-list { display:flex; flex-direction:column; gap:7px; }
.submenu-action {
    width:100%;
    min-height:46px !important;
    box-sizing:border-box;
    display:grid !important;
    grid-template-columns:24px minmax(0,1fr) auto;
    align-items:center;
    column-gap:9px;
    padding:8px 11px !important;
    text-align:left;
}
.submenu-action-icon {
    width:22px;
    height:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#d9bd79;
}
.submenu-action-icon .plaque-svg { width:20px; height:20px; }
.submenu-action-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.submenu-action-chevron { color:rgba(226,207,151,.70); font-size:15px; line-height:1; }
.submenu-action.is-danger .submenu-action-icon { color:#ffaaa1; }
.submenu-action.is-sound .submenu-action-icon { color:#9fd1ef; }
#curModal .item-pill-btn,
#curModal .plaque-inline-action,
#curModal .bag-item-action,
#curModal .skill-card-action {
    min-height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    vertical-align:middle;
    gap:6px;
    line-height:1.15;
    white-space:nowrap;
}
/* 未来在行内操作中加入线性图标时，图标和文字仍共享同一垂直基线。 */
#curModal .plaque-inline-action .plaque-svg,
#curModal .bag-item-action .plaque-svg,
#curModal .skill-card-action .plaque-svg {
    flex:0 0 auto;
    width:14px;
    height:14px;
}
@media (max-width:420px) {
    .submenu-action { min-height:43px !important; grid-template-columns:22px minmax(0,1fr) auto; column-gap:7px; padding:7px 9px !important; font-size:12px; }
    .submenu-action-icon { width:20px; height:20px; }
    .submenu-action-icon .plaque-svg { width:18px; height:18px; }
    #curModal .btn:not(.submenu-action) { min-height:40px; font-size:12px; }
}


/* ============ FANREN BAG MOBILE UI REWORK 1.36.14 ============ */
/* Scope every density change to the bag view so shop, skills and combat keep their own layout. */
#curModal .modal:has(.bag-mobile-rework) {
    max-height:88dvh;
}
#curModal .modal-header:has(~ .modal-body .bag-mobile-rework) {
    padding:10px 12px 8px;
}
#curModal .modal-body:has(.bag-mobile-rework) {
    padding:8px 9px 12px;
}
#curModal .bag-mobile-rework {
    gap:8px;
}
#curModal .bag-mobile-rework .bag-overview-card {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:6px 8px;
    padding:8px 9px;
    border-radius:11px;
}
#curModal .bag-mobile-rework .bag-overview-title {
    display:flex;
    min-width:0;
    align-items:center;
    gap:7px;
}
#curModal .bag-mobile-rework .bag-overview-title > div {
    min-width:0;
}
#curModal .bag-mobile-rework .bag-overview-title strong {
    display:block;
    color:#f1dda2;
    font-size:13px;
    line-height:1.15;
}
#curModal .bag-mobile-rework .bag-overview-title small {
    display:block;
    overflow:hidden;
    margin-top:2px;
    color:#98a5b8;
    font-size:9px;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
}
#curModal .bag-mobile-rework .bag-overview-title .plaque-svg,
#curModal .bag-mobile-rework .bag-overview-title > svg {
    width:20px;
    height:20px;
}
#curModal .bag-mobile-rework .bag-overview-metrics {
    grid-column:1 / -1;
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    gap:4px;
    width:100%;
}
#curModal .bag-mobile-rework .bag-overview-metrics .state-chip {
    min-width:0;
    padding:3px 6px;
    font-size:9px;
    white-space:nowrap;
}
#curModal .bag-mobile-rework .bag-section {
    gap:5px;
}
#curModal .bag-mobile-rework .plaque-section-heading {
    min-height:22px;
    padding:0 2px;
    font-size:11px;
}
#curModal .bag-mobile-rework .bag-plaque-list {
    gap:6px;
}
#curModal .bag-mobile-rework .bag-plaque-item {
    grid-template-columns:28px minmax(0,1fr);
    align-items:start;
    gap:7px;
    padding:8px;
    border-radius:10px;
}
#curModal .bag-mobile-rework .bag-item-type {
    width:28px;
    height:28px;
    border-radius:8px;
}
#curModal .bag-mobile-rework .bag-item-type .plaque-svg {
    width:15px;
    height:15px;
}
#curModal .bag-mobile-rework .bag-item-title-row {
    gap:4px;
    font-size:12px;
}
#curModal .bag-mobile-rework .bag-count {
    font-size:10px;
}
#curModal .bag-mobile-rework .bag-item-description {
    display:-webkit-box;
    overflow:hidden;
    margin-top:2px;
    color:#adb7c8;
    font-size:9px;
    line-height:1.35;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}
#curModal .bag-mobile-rework .bag-effect-list {
    gap:3px;
    margin-top:4px;
}
#curModal .bag-mobile-rework .bag-effect-chip {
    min-height:18px;
    padding:0 5px;
    border-radius:6px;
    font-size:8px;
}
#curModal .bag-mobile-rework .bag-item-action {
    grid-column:2;
    display:flex;
    justify-content:flex-end;
    width:100%;
    margin-top:5px;
    padding-top:5px;
    border-top:1px solid rgba(214,168,79,.12);
}
#curModal .bag-mobile-rework .bag-sell-actions {
    display:flex;
    justify-content:flex-end;
    width:100%;
}
#curModal .bag-mobile-rework .plaque-inline-action {
    min-width:54px;
    min-height:30px;
    padding:4px 10px;
    border-radius:7px;
    font-size:10px;
}
#curModal .bag-mobile-rework .bag-plaque-item.is-equipped {
    box-shadow:inset 2px 0 0 #d6a84f, 0 4px 10px rgba(0,0,0,.10);
}
@media (max-width:360px) {
    #curModal .bag-mobile-rework .bag-overview-title small { display:none; }
    #curModal .bag-mobile-rework .bag-overview-metrics .state-chip { padding:3px 4px; font-size:8px; }
    #curModal .bag-mobile-rework .plaque-inline-action { min-width:50px; padding:4px 8px; }
}


/* v1.37.0：P0 修炼账本；确保窄屏上也维持可读性。 */
.cultivation-status-card {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(74, 144, 226, 0.34);
    border-radius: 8px;
    background: rgba(11, 26, 48, 0.78);
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.55;
}
.cultivation-status-card .cult-status-title {
    color: var(--accent-light);
    font-weight: 700;
}
.cultivation-status-card span:not(.cult-status-title) {
    flex-basis: 100%;
}
.cultivation-status-card .cult-status-action {
    margin-top: 2px;
    padding-top: 5px;
    border-top: 1px dashed rgba(212, 168, 83, 0.25);
    color: var(--primary-light);
    font-weight: 700;
}
.cultivation-status-card .cult-status-action.is-danger {
    color: var(--danger);
    border-top-color: rgba(225, 90, 90, 0.48);
}
.cultivate-exchange-btn {
    width: 100%;
    margin-top: 6px;
    font-size: 12px;
    border-color: rgba(212, 168, 83, 0.66);
    color: var(--gold);
}
#btnCombatStrategy { white-space: nowrap; }


/* ============ v1.49.9 MOBILE CULTIVATION & COMBAT POLISH ============
 * Phone portrait only: controls take priority over auxiliary information.
 */
@media (max-width:420px) {
    /* The original flex row let the ledger consume the control width, causing
       the ten-/hundred-year retreat choices and primary cultivate action to
       collapse or be visually obscured.  Stack functional controls first. */
    .cultivate-panel.spirit-cultivate-panel {
        display:grid;
        grid-template-columns:minmax(0,1fr);
        align-items:stretch;
        gap:10px;
    }
    .cultivate-panel.spirit-cultivate-panel .cycle-select {
        display:grid;
        grid-template-columns:repeat(3, minmax(0,1fr));
        width:100%;
        gap:5px;
        padding:5px;
        box-sizing:border-box;
    }
    .cultivate-panel.spirit-cultivate-panel .cycle-btn {
        min-width:0;
        min-height:56px;
        height:auto;
        padding:5px 3px;
        line-height:1.22;
        white-space:normal;
        overflow-wrap:anywhere;
    }
    .cultivate-panel.spirit-cultivate-panel .btn-cultivate-main {
        width:100%;
        min-width:0;
        margin-top:0;
        order:2;
    }
    .cultivate-panel.spirit-cultivate-panel .cultivation-status-card {
        width:100%;
        min-width:0;
        margin-top:0;
        box-sizing:border-box;
        order:3;
    }
    .cultivate-panel.spirit-cultivate-panel .cultivate-exchange-btn { order:4; }

    /* Five visible header nodes: title, turn, auto, strategy, speed.  The old
       four-column grid wrapped the speed control onto a second line and left
       the strategy button iconless after its text was hidden. */
    #combatView .combat-header {
        grid-template-columns:minmax(0,1fr) minmax(64px,max-content) repeat(3,32px);
        gap:4px;
        padding:6px 7px;
    }
    #combatView .combat-turn-indicator { max-width:82px; }
    #combatView .combat-speed-btn {
        width:32px;
        min-width:32px;
        max-width:32px;
        height:30px;
        min-height:30px;
        padding:0;
        font-size:0;
        line-height:1;
    }
    #combatView #btnCombatAuto::after { content:'🤖'; font-size:13px; line-height:1; }
    #combatView #btnCombatStrategy::after { content:'⚙'; font-size:15px; line-height:1; }
    #combatView #btnCombatSpeed::after { content:'⏩'; font-size:12px; line-height:1; }

    /* Compact summary keeps the first two useful status lines visible without
       pushing the enemy panel or action bar below the visual viewport. */
    #combatView .combat-decision-hint {
        margin:4px 6px 0;
        padding:5px 7px;
        font-size:10px;
        line-height:1.35;
        max-height:calc(2 * 1.35em + 10px);
        overflow:hidden;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
    }
}


/* ============ v1.50.0 MOBILE CULTIVATION CONTROL BAR ============
 * The ledger is now in the menu.  Keep the three mode choices and the primary
 * cultivation action together, even on phone portrait widths. */
@media (max-width:420px) {
    .cultivate-panel.spirit-cultivate-panel {
        display:grid;
        grid-template-columns:minmax(0,1fr) 86px;
        align-items:stretch;
        gap:6px;
    }
    .cultivate-panel.spirit-cultivate-panel .cycle-select {
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        width:100%;
        min-width:0;
        gap:3px;
        padding:3px;
        box-sizing:border-box;
    }
    .cultivate-panel.spirit-cultivate-panel .cycle-btn {
        min-width:0;
        min-height:54px;
        height:auto;
        padding:4px 1px;
        font-size:11px;
        line-height:1.2;
        white-space:normal;
        overflow-wrap:anywhere;
    }
    .cultivate-panel.spirit-cultivate-panel .cycle-kicker { font-size:8px; }
    .cultivate-panel.spirit-cultivate-panel .btn-cultivate-main {
        grid-column:2;
        grid-row:1;
        width:86px;
        min-width:86px;
        min-height:54px;
        height:auto;
        margin:0;
        padding:4px 3px;
        gap:3px;
        font-size:15px;
        letter-spacing:.05em;
    }
    .cultivate-panel.spirit-cultivate-panel .btn-cultivate-main .cultivate-tail { display:none; }
    .cultivate-panel.spirit-cultivate-panel .btn-cultivate-main .cultivate-seal { width:18px; height:18px; }
    .cultivate-panel.spirit-cultivate-panel .btn-cultivate-main .cultivate-seal .plaque-svg { width:12px; height:12px; }
}


/* ============ v1.50.2 PHONE LOADING & COMPACT CULTIVATION BAR ============
 * Loading progress remains visible without exposing internal module names.
 * Match cultivation controls to the quick-action bar's compact touch height.
 */
@media (max-width:420px) {
    .cultivate-panel.spirit-cultivate-panel {
        padding:5px;
        gap:5px;
    }
    .cultivate-panel.spirit-cultivate-panel .cycle-select {
        gap:2px;
        padding:2px;
    }
    .cultivate-panel.spirit-cultivate-panel .cycle-btn {
        min-height:41px;
        padding:2px 1px;
        font-size:10px;
        line-height:1.14;
    }
    .cultivate-panel.spirit-cultivate-panel .cycle-kicker {
        font-size:7px;
        line-height:1;
    }
    .cultivate-panel.spirit-cultivate-panel .btn-cultivate-main {
        min-height:41px;
        padding:2px 3px;
        gap:2px;
        font-size:14px;
        line-height:1.1;
    }
    .cultivate-panel.spirit-cultivate-panel .btn-cultivate-main .cultivate-seal {
        width:16px;
        height:16px;
    }
    .cultivate-panel.spirit-cultivate-panel .btn-cultivate-main .cultivate-seal .plaque-svg {
        width:11px;
        height:11px;
    }
}


/* ============ 优化 B.1：唯一阻塞交互所有者 ============ */
#modalContainer,
#__uimodal_container {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
}
#modalContainer .modal-overlay,
#__uimodal_container .modal-overlay {
    pointer-events: auto;
}
#tutorial-overlay {
    z-index: 9000;
}
#tutorial-overlay.is-paused {
    display: none !important;
    pointer-events: none !important;
}
@media (max-width: 480px) {
    #curModal .btn,
    #__uimodal_overlay .btn,
    #tutorial-controls .tutorial-btn {
        min-height: 44px;
    }
}

/* FANREN v1.50.6：P1/P2 操作引导与日志层级 */
.guidance-item.guidance-action {
    cursor: pointer;
    border-left: 2px solid rgba(212, 168, 83, 0.72);
    padding-left: 8px;
    transition: background 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}
.guidance-item.guidance-action:hover,
.guidance-item.guidance-action:focus-visible {
    background: rgba(212, 168, 83, 0.12);
    border-left-color: var(--gold);
    outline: none;
    transform: translateX(2px);
}
.message-log .msg-item[data-log-level="key"] {
    margin: 4px 0;
    padding: 5px 7px;
    border-left: 2px solid currentColor;
    border-radius: 0 6px 6px 0;
    background: rgba(255, 255, 255, 0.035);
}
.message-log .msg-item[data-repeat-count]:not([data-repeat-count="1"]) {
    opacity: 0.78;
    font-size: 12px;
}
@media (max-width: 640px) {
    .guidance-item.guidance-action { min-height: 36px; display: flex; align-items: center; }
}


/* v1.52.0 P2：长列表按“可操作优先”组织，保留明确的展开入口与触屏滚动提示。 */
.fanren-list-hint {
    margin: 0 0 8px;
    padding: 8px 10px;
    color: var(--text-dim);
    background: rgba(74, 144, 226, 0.08);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.45;
}
.fanren-disclosure {
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}
.fanren-disclosure > summary {
    min-height: 42px;
    box-sizing: border-box;
    padding: 11px 12px;
    color: var(--accent-light);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    list-style-position: inside;
}
.fanren-disclosure-list,
.fanren-scroll-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 42vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 8px 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}
.fanren-scroll-list { padding: 0; margin-top: 8px; }
.fanren-achievement-card {
    padding: 9px 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.07);
}
.fanren-key-reward-summary {
    margin-top: 12px;
    padding: 10px;
    color: #ffe8a3;
    line-height: 1.55;
    background: linear-gradient(135deg, rgba(212,168,83,0.26), rgba(124,88,31,0.18));
    border: 1px solid rgba(255,215,0,0.55);
    border-radius: 8px;
    box-shadow: 0 0 16px rgba(212,168,83,0.14);
}
.fanren-key-reward-summary > :first-child { font-weight: 800; color: #ffe082; margin-bottom: 3px; }
@media (max-width: 420px) {
    .fanren-disclosure-list, .fanren-scroll-list { max-height: 38vh; }
    .fanren-disclosure > summary { font-size: 12px; }
}


/* v1.54 pending-tribulation status */
.tribulation-status {
    margin-top: 4px;
    padding: 4px 7px;
    border: 1px solid rgba(255, 193, 7, .72);
    border-radius: 6px;
    background: rgba(255, 193, 7, .13);
    color: var(--gold);
    font-size: 10px;
    line-height: 1.45;
    max-width: 390px;
}
.btn-cultivate-main:disabled, .cycle-btn:disabled {
    opacity: .54;
    cursor: not-allowed;
    filter: grayscale(.3);
}

/* ============================================================
   折叠屏内屏适配（置于文件末尾，确保覆盖前面的 480px 限宽）
   - Tier 1: 600–959px  双折叠内屏竖屏（如 vivo X Fold 展开 ≈733px CSS 宽）
   - Tier 2: 960–1199px 三折叠内屏横屏（如华为 Mate XTs ≈1061px CSS 宽）
   PC 大宽屏（≥1200px）的三栏布局另行适配。
   ============================================================ */
@media (min-width: 600px) and (max-width: 1199px) {
    /* 画布拓宽：主界面 / 战斗覆盖层 / 底部弹窗 */
    #app, #combatView { max-width: 700px; }
    .modal { max-width: 700px; }

    /* 顶栏与消息区 */
    .top-bar { padding: 12px 16px; }
    .message-log { font-size: 14px; }
    .message-log-tab { min-height: 30px; padding: 5px 12px; font-size: 12px; }

    /* 快捷操作 / 修炼面板：更大触控目标 */
    .quick-btn { min-height: 50px; font-size: 14px; }
    .quick-btn .quick-icon { width: 20px; height: 20px; }
    .cycle-btn { min-height: 46px; font-size: 14px; }
    .btn-cultivate-main { min-height: 62px; font-size: 17px; }

    /* 底部导航 */
    .nav-item { min-height: 56px; font-size: 11px; }
    .nav-item .nav-icon { width: 26px; height: 26px; font-size: 24px; }

    /* 背包 / 功法 / 商店列表：单列 → 双列网格 */
    .bag-plaque-list, .skill-plaque-list, .shop-plaque-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        align-items: stretch;
    }

    /* 战斗：卡片与操作区放大 */
    .combat-header { padding: 10px 14px; gap: 8px; }
    .combat-title { font-size: 16px; }
    .combat-speed-btn, .combat-exit-btn { min-height: 34px; padding: 5px 10px; font-size: 11px; }
    .combat-decision-hint { margin: 8px 12px 0; padding: 8px 10px; font-size: 11px; }
    .combat-area { padding: 12px 14px 6px; }
    .enemy-section { padding: 12px; gap: 14px; }
    .enemy-name { font-size: 17px; }
    .combat-log-middle { max-height: 280px; font-size: 13px; }
    .combat-log { max-height: 150px; font-size: 11px; }
    .char-card { width: 118px; }
    .children-grid { width: 118px; }
    .combat-actions { gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
    .combat-action-btn { min-height: 58px; font-size: 11px; }
}

/* Tier 2：三折叠内屏横屏（宽度更阔、高度有限） */
@media (min-width: 960px) and (max-width: 1199px) {
    #app, #combatView { max-width: 860px; }
    .modal { max-width: 760px; }
    body { font-size: 15px; }
    .char-card { width: 128px; }
    .children-grid { width: 128px; }
    .combat-log-middle { max-height: 320px; }
}