/* BUILD: stats-panel-v1 · 2026-04-28 15:04 */

/* ============================================================
   蘑菇星球放置 · Mushroom Planet Idle  ──  UI 风格
   设定：长满蘑菇的星球，玩家本身就是一朵特殊的蘑菇——
        通过组合各种"配件"获得不同能力。
   设计语言：暗色星夜 + 孢子紫 / 苔藓青 / 朽木金高光，三栏卡片布局
   ============================================================ */

/* ---------- 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* 基色：腐殖森林 */
    --bg-deep:    #0f0d0a;
    --bg-base:    #1a1611;
    --bg-panel:   #221d17;
    --bg-card:    #2c2620;
    --bg-card-2:  #34281e;
    --bg-elev:    #3b3026;

    --border:        #3a2f24;
    --border-strong: #5a4836;
    --border-glow:   #7a5d3a;

    --text:      #ece1c8;
    --text-soft: #c9b894;
    --text-dim:  #8a7a5e;
    --text-mute: #5b4f3c;

    /* 强调：朽木金 */
    --accent:        #d6a35c;
    --accent-hi:     #f0c889;
    --accent-shadow: rgba(214, 163, 92, 0.22);

    /* 三采集分类色 */
    --spore:    #c89cdb;   /* 孢子紫 */
    --mycelium: #8fc8a4;   /* 菌丝青苔（v0.5.x 末挖掘技能下架后，复用为通用青苔绿：进度条/工具槽/tab高亮/菌丝物品分类色）*/
    --log:      #c8895a;   /* 朽木褐 */
    --bone:     #e8dcc4;   /* 菌骨米白（朽木褐的去饱和高亮版）*/
    --fabric:   #c89cdb;   /* 菌织淡紫银（孢子紫的去饱和高亮版，呼应布艺光泽）*/
    --berry:    #d97b8a;   /* 莓粉红 */
    --fruit:    #f5c971;   /* 果橙黄 */
    --bean:     #8b5a3c;   /* 咖啡豆深棕 */
    --food:  #e89060;   /* HP 食物暖橙（与 HP 红配套）*/
    --drink:    #b89dd9;   /* 饮料淡紫（与孢酪金区分）*/

    /* 状态色 */
    --good:  #94c065;
    --warn:  #d8853a;
    --bad:   #c45a4a;
    --info:  #7da9c0;

    /* 字体 */
    --font-ui: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;

    /* 圆角与阴影 */
    --radius-s: 4px;
    --radius:   8px;
    --radius-l: 14px;
    --shadow-sm: 0 2px 6px rgba(0,0,0,0.35);
    --shadow:    0 4px 16px rgba(0,0,0,0.45);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.55);
}

html, body {
    font-family: var(--font-ui);
    color: var(--text);
    background: var(--bg-deep);
    height: 100vh;
    overflow: hidden;
    font-size: 14px;
}

body {
    background:
        radial-gradient(circle at 15% 10%, rgba(143, 200, 164, 0.06), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(200, 156, 219, 0.05), transparent 45%),
        linear-gradient(180deg, var(--bg-base) 0%, var(--bg-deep) 100%);
    background-attachment: fixed;
}

button { font-family: inherit; }
input  { font-family: inherit; }

.hidden { display: none !important; }
.screen { height: 100vh; }

/* ============================================================
   启动占位：避免登录屏在刷新时闪烁
   ============================================================ */
body.booting #auth-screen,
body.booting #game-screen {
    display: none !important;
}
.boot-splash {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 15% 10%, rgba(143, 200, 164, 0.06), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(200, 156, 219, 0.05), transparent 45%),
        linear-gradient(180deg, var(--bg-base) 0%, var(--bg-deep) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    z-index: 2000;
    transition: opacity 0.25s ease;
}
body:not(.booting) .boot-splash {
    opacity: 0;
    pointer-events: none;
}
.boot-mark {
    font-size: 56px;
    filter: drop-shadow(0 4px 14px rgba(214, 163, 92, 0.3));
    animation: bootBob 2.2s ease-in-out infinite;
}
@keyframes bootBob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-6px) rotate(3deg); }
}
.boot-text {
    color: var(--accent);
    letter-spacing: 8px;
    font-size: 18px;
    font-weight: 600;
}

/* ============================================================
   认证屏
   ============================================================ */
.auth-screen {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* 飘浮孢子动画背景 */
.spore-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(2px 2px at 20% 30%, rgba(200,156,219,0.55), transparent 50%),
        radial-gradient(1.5px 1.5px at 60% 70%, rgba(143,200,164,0.45), transparent 50%),
        radial-gradient(2px 2px at 80% 20%, rgba(214,163,92,0.45), transparent 50%),
        radial-gradient(1.5px 1.5px at 35% 80%, rgba(200,156,219,0.35), transparent 50%),
        radial-gradient(2px 2px at 90% 55%, rgba(143,200,164,0.30), transparent 50%);
    animation: drift 18s linear infinite;
    opacity: 0.7;
}
@keyframes drift {
    from { transform: translateY(0); }
    to   { transform: translateY(-30px); }
}

.auth-card {
    position: relative;
    width: 380px;
    max-width: 100%;
    background: linear-gradient(160deg, var(--bg-panel), var(--bg-base));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-l);
    padding: 36px 32px 28px;
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.04);
    overflow: hidden;  /* 防止气泡溢出卡片 */
}
/* 登录/注册卡片：5 气泡群（与「当前行动」同款 pulse 动画，错相位）*/
.auth-card::before {
    content: "";
    position: absolute;
    left: -36px; top: -36px;
    width: 100px; height: 100px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    opacity: 0.06;
    animation: pulse 5.2s ease-in-out infinite;
    animation-delay: -1.3s;
    pointer-events: none;
}
.auth-card::after {
    content: "";
    position: absolute;
    right: -30px; bottom: -30px;
    width: 80px; height: 80px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    opacity: 0.07;
    animation: pulse 4s ease-in-out infinite;
    pointer-events: none;
}
.auth-bubble {
    position: absolute;
    border: 2px solid var(--accent);
    border-radius: 50%;
    pointer-events: none;
    animation: pulse 4s ease-in-out infinite;
}
.auth-bubble.b1 {
    right: 22%; top: -18px;
    width: 32px; height: 32px;
    opacity: 0.08;
    animation-duration: 3.4s;
    animation-delay: -0.6s;
}
.auth-bubble.b2 {
    left: 18%; bottom: -16px;
    width: 38px; height: 38px;
    opacity: 0.07;
    animation-duration: 4.8s;
    animation-delay: -2.1s;
}
.auth-bubble.b3 {
    right: 8%; top: 38%;
    width: 22px; height: 22px;
    opacity: 0.09;
    animation-duration: 3.0s;
    animation-delay: -1.7s;
}

.auth-brand {
    text-align: center;
    margin-bottom: 24px;
}
.brand-mark {
    display: inline-block;
    font-size: 48px;
    filter: drop-shadow(0 4px 12px var(--accent-shadow));
    animation: bob 4s ease-in-out infinite;
}
.brand-mark.small { font-size: 22px; animation: none; filter: none; }
@keyframes bob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-4px) rotate(2deg); }
}
.auth-brand h1 {
    margin-top: 6px;
    font-size: 28px;
    color: var(--accent);
    letter-spacing: 4px;
    font-weight: 600;
}
.tagline {
    margin-top: 6px;
    color: var(--text-dim);
    font-size: 12px;
    letter-spacing: 1px;
}

.auth-tabs {
    display: flex;
    gap: 6px;
    background: var(--bg-deep);
    padding: 4px;
    border-radius: var(--radius);
    margin-bottom: 18px;
    border: 1px solid var(--border);
}
.auth-tab {
    flex: 1 1 80px;
    min-width: 64px;
    background: transparent;
    color: var(--text-dim);
    border: none;
    padding: 9px;
    font-size: 13px;
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: all 0.18s ease;
    letter-spacing: 2px;
}
.auth-tab.active {
    background: linear-gradient(135deg, var(--accent), #b8854a);
    color: #1a1611;
    font-weight: 600;
    box-shadow: 0 2px 8px var(--accent-shadow);
}

#auth-form { display: flex; flex-direction: column; gap: 12px; }
#auth-form label,
#auth-form .auth-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--text-soft);
    font-size: 12px;
    letter-spacing: 1px;
}
#auth-form input {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--text);
    padding: 10px 12px;
    font-size: 14px;
    transition: border 0.15s ease, box-shadow 0.15s ease;
}
#auth-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-shadow);
}

.auth-error {
    background: rgba(196, 90, 74, 0.12);
    border: 1px solid rgba(196, 90, 74, 0.4);
    color: #e89789;
    padding: 8px 12px;
    border-radius: var(--radius-s);
    font-size: 12px;
}

/* 字段下方的轻量补充说明（如密码位数提示） */
.field-hint {
    color: var(--text-mute);
    font-size: 11px;
    letter-spacing: 0.5px;
    margin-top: -2px;
}

.btn-primary {
    margin-top: 4px;
    background: linear-gradient(135deg, var(--accent), #a87a3f);
    color: #1a1611;
    border: none;
    border-radius: var(--radius-s);
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 4px 12px var(--accent-shadow);
}
.btn-primary:hover     { filter: brightness(1.1); transform: translateY(-1px); }
.btn-primary:active    { transform: translateY(0); }
.btn-primary:disabled  { opacity: 0.5; cursor: not-allowed; transform: none; }

.hint {
    margin-top: 14px;
    text-align: center;
    color: var(--text-mute);
    font-size: 11px;
    letter-spacing: 0.5px;
}

/* ============================================================
   游戏屏：顶栏
   ============================================================ */
#game-screen { display: flex; flex-direction: column; height: 100vh; min-height: 0; overflow: hidden; }

.topbar {
    position: relative;     /* 让移动端 absolute 定位的 #current-action / queue 锚定 */
    background: linear-gradient(180deg, var(--bg-panel), var(--bg-base));
    border-bottom: 1px solid var(--border-strong);
    padding: 10px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.brand-title {
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 3px;
    font-size: 16px;
}
.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.player-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 14px 4px 5px;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    color: var(--text);
    font-family: inherit;
}
.player-pill:hover {
    border-color: var(--accent);
    background: var(--bg-card-2);
}
.player-pill.open {
    border-color: var(--accent);
    background: var(--bg-card-2);
}
.player-username {
    color: var(--text-mute);
    font-size: 11px;
    letter-spacing: 0.5px;
}
.player-caret {
    color: var(--text-dim);
    font-size: 10px;
    transition: transform 0.18s;
}
.player-pill.open .player-caret {
    transform: rotate(-180deg);
}

/* ── 用户下拉菜单 ── */
.user-menu {
    position: relative;
}
.user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 180px;
    background: linear-gradient(180deg, var(--bg-panel), var(--bg-base));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 4px;
    box-shadow: var(--shadow);
    z-index: 50;
    animation: dropdownOpen 0.15s ease-out;
}
@keyframes dropdownOpen {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    color: var(--text);
    border: none;
    padding: 8px 12px;
    border-radius: var(--radius-s);
    cursor: pointer;
    font-size: 13px;
    text-align: left;
    transition: background 0.12s, color 0.12s;
    font-family: inherit;
    letter-spacing: 0.5px;
}
.dropdown-item:hover {
    background: var(--bg-card-2);
    color: var(--accent-hi);
}
.dropdown-item.dropdown-danger:hover {
    background: rgba(196, 90, 74, 0.18);
    color: #e89789;
}
.dropdown-icon {
    font-size: 15px;
    width: 18px;
    text-align: center;
}
.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}
.player-avatar {
    display: inline-flex;
    width: 22px; height: 22px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent), #7a4d20);
    background-size: cover;
    background-position: center;
    font-size: 13px;
    overflow: hidden;
}
.player-avatar.has-img { background: #1a1c24 center/cover no-repeat; }

.btn-ghost {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border-strong);
    padding: 5px 12px;
    border-radius: var(--radius-s);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-ghost:hover {
    color: var(--text);
    border-color: var(--accent);
}

/* ============================================================
   主体三栏
   ============================================================ */
.main-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 300px;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 14px;
    padding: 14px;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
}

/* 中间栏拆为上下两段：上 actions、下 chat；左右栏跨满两行 */
.panel-skills, .panel-inventory {
    grid-row: 1 / -1;
}
/* v0.6.x 末：左栏「当前行动」固定显示——把外层 overflow 关掉，只让 #skills-list 滚动 */
.panel-skills {
    display: flex;
    flex-direction: column;
    overflow: hidden;            /* 覆盖 .panel 默认的 overflow-y:auto */
}
.panel-skills > #skills-list {
    flex: 1 1 auto;
    min-height: 0;               /* flex 子项要能收缩到内容以下，否则 overflow 失效 */
    overflow-y: auto;
    overscroll-behavior: contain;
}
.panel-actions {
    grid-column: 2;
    grid-row: 1;
    /* 让消耗品条贴 panel 底部：actions-list 保持自然高度（不拉伸），
       skill-consume-bar 用 margin-top:auto 占据剩余空间被推到底 */
    display: flex;
    flex-direction: column;
}
.panel-chat {
    grid-column: 2;
    grid-row: 2;
}

.panel {
    background: linear-gradient(180deg, var(--bg-panel), var(--bg-base));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-l);
    padding: 16px;
    overflow-y: auto;
    max-height: calc(100vh - 88px);
    box-shadow: var(--shadow);
    /* 顶部苔色高光 */
    position: relative;
}
.panel::before {
    content: "";
    position: absolute;
    top: 0; left: 12px; right: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-glow), transparent);
}

.panel-title {
    font-size: 13px;
    color: var(--accent-hi);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border);
    font-weight: 500;
}

/* 无标题分隔线：复刻 .panel-title 的 border-bottom，但不占字号高度 */
.panel-divider {
    border: none;
    border-top: 1px dashed var(--border);
    margin: 18px 0 12px;
    height: 0;
}

.empty {
    color: var(--text-dim);
    font-size: 12px;
    text-align: center;
    padding: 20px 0;
    font-style: italic;
}

/* 滚动条 */
.panel::-webkit-scrollbar         { width: 5px; }
.panel::-webkit-scrollbar-track   { background: transparent; margin: 12px 0; }
.panel::-webkit-scrollbar-thumb   {
    background: var(--border-strong);
    border-radius: 3px;
}
.panel::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.panel { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* ============================================================
   左栏：技能 & 当前活动
   ============================================================ */
.skill-list { display: flex; flex-direction: column; gap: 8px; }

/* ─── 茶饮 buff 状态栏（左栏，2 槽位）─── */
.buff-bar {
    display: flex; gap: 8px;
}
.buff-slot {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 6px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--bg-card-2);
    font-size: 11px;
    transition: background 0.2s, border-color 0.2s;
}
.buff-slot.empty {
    color: var(--text-muted);
    border-style: dashed;
    opacity: 0.55;
}
.buff-slot.active {
    border-color: #6cc36c;
    background: rgba(108, 195, 108, 0.08);
}
.buff-slot-icon {
    font-size: 22px; line-height: 1;
}
.buff-slot-name {
    font-weight: 600; color: var(--text-strong);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.buff-slot-time {
    color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.buff-slot-effects {
    display: flex; gap: 4px; flex-wrap: wrap; justify-content: center;
    color: #8fdba0; font-size: 10px;
}

/* ─── 物品弹窗：茶饮专属区段 ─── */
.item-tea-section h4 {
    margin: 0 0 8px;
}
.item-tea-effects {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    background: var(--bg-card-2);
    margin-bottom: 10px;
    font-size: 13px;
}
.item-tea-effects .effect-row {
    display: flex; justify-content: space-between;
    color: var(--text-soft);
}
.item-tea-effects .effect-row strong {
    color: #8fdba0;
}
.item-tea-effects .effect-row strong.safety-yes { color: #6bd86b; }
.item-tea-effects .effect-row strong.safety-no  { color: #ff8a8a; }
/* v0.6.x 末：4 档排异颜色（详情弹窗） */
.effect-row strong.safety-yes  { color: #6bd86b; }
.effect-row strong.safety-mild { color: #f1d976; }
.effect-row strong.safety-mid  { color: #ffb050; }
.effect-row strong.safety-no   { color: #ff8a8a; }
.item-tea-effects .effect-row strong.safety-na  { color: var(--text-mute, #888); font-weight: normal; }
.item-tea-drink {
    width: 100%;
    padding: 10px 16px;
    border: none; border-radius: 6px;
    background: linear-gradient(135deg, #4a8a4f, #6cc36c);
    color: #fff;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s, transform 0.05s;
}
.item-tea-drink:hover { filter: brightness(1.1); }
.item-tea-drink:active { transform: scale(0.98); }
.item-tea-drink:disabled {
    background: var(--bg-card-2); color: var(--text-muted);
    cursor: not-allowed; filter: none;
}

/* ─── 技能行：等级 + 茶 buff 加成 ─── */
.skill-level-bonus {
    color: #8fdba0;
    font-weight: 600;
    margin-left: 2px;
}

.skill-row {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-s);
    padding: 9px 11px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    position: relative;
}
@media (hover: hover) {
    .skill-row:hover {
        background: var(--bg-card-2);
        border-color: var(--border-strong);
    }
}
/* 触屏设备 :hover 粘连兜底 —— touchend 时 JS 临时打 .force-no-hover 类，
   覆盖所有 .skill-row*:hover 规则（包括属性选择器 [data-cat] 那条更高优先级）。
   用 !important 是因为 .skill-row[data-cat="production"]:hover 选择器优先级 > .skill-row.force-no-hover */
.skill-row.force-no-hover,
.skill-row.force-no-hover:hover,
.skill-row.force-no-hover:active,
.skill-row.force-no-hover:focus {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}
.skill-row.force-no-hover.active,
.skill-row.force-no-hover.active:hover {
    background: linear-gradient(90deg, var(--bg-card-2), rgba(214, 163, 92, 0.10)) !important;
    border-color: var(--accent) !important;
}
.skill-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
/* 选中态：右侧高亮三角指示 + 微弱底色 */
.skill-row.active {
    background: linear-gradient(90deg, var(--bg-card-2), rgba(214, 163, 92, 0.10));
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent-shadow);
}
.skill-row.active::after {
    content: "▸";
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent-hi);
    font-size: 14px;
    text-shadow: 0 0 6px var(--accent-shadow);
}
.skill-row[data-skill="spore_collecting"] { border-left-color: var(--spore);    }
.skill-row[data-skill="log_harvesting"]   { border-left-color: var(--log);      }

/* 制造类技能：尚未开放，整体降低亮度 + 锁图标 */
.skill-row[data-cat="production"] {
    border-left-color: rgba(216, 133, 58, 0.5);
    opacity: 0.55;
}
.skill-row[data-cat="production"]:hover {
    opacity: 0.75;
    background: var(--bg-card);
    border-color: var(--border);  /* 不强调描边，避免误以为可点 */
}
/* 已解锁的制造技能（如菌甲锻造）：恢复正常亮度与可点击观感 */
.skill-row[data-cat="production"]:not(.locked) {
    opacity: 1;
    border-left-color: var(--accent);   /* 用朽木金强调"已开放" */
}
.skill-row[data-cat="production"]:not(.locked):hover {
    opacity: 1;
    background: var(--bg-card-2);
    border-color: var(--border-strong);
}
.skill-row.locked {
    cursor: help;
}
.skill-row.locked .skill-level {
    color: var(--text-mute);
}
.skill-row.locked::after {
    content: "🔒";
    position: absolute;
    right: 8px;
    bottom: 6px;
    font-size: 10px;
    opacity: 0.6;
}

/* 制造分组的小标题，分隔采集与制造两段 */
.skill-group-title {
    margin: 14px 4px 6px;
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;    text-transform: uppercase;    display: flex;
    align-items: center;
    gap: 8px;
}
.skill-group-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}
.skill-group-hint {
    color: var(--text-mute);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: none;
}
/* 第一个分组标题（采集组）紧贴顶部，避免左栏顶端空一大片 */
.skill-group-title:first-child {
    margin-top: 4px;
}

/* 战斗组与市场入口之间的分隔线（与 .panel-divider 同款虚线） */
.skill-group-divider {
    display: block;
    border: none;
    border-top: 1px dashed var(--border);
    margin: 18px 0 12px;
    height: 0;
    flex-shrink: 0;
}
.skill-row.guide-row {
    cursor: pointer;
}
.skill-row.market-row {
    cursor: pointer;
}

/* 指南页面正文 */
.guide-page {
    padding: 12px 16px;
    color: var(--text);
    line-height: 1.5;
    overflow-y: auto;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}
.guide-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
    flex: none;
}
.guide-tab {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}
.guide-tab.active {
    background: var(--surface-2);
    color: var(--text-bright);
    border-color: var(--accent, var(--text-bright));
}
.guide-body {
    flex: 1;
    overflow: auto;
    min-height: 0;
}
.guide-loading,
.guide-empty {
    color: var(--text-dim);
    padding: 24px;
    text-align: center;
    font-size: 13px;
}
.guide-legend {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 8px;
}
.guide-legend .lg {
    padding: 2px 8px;
    border-radius: 4px;
}
.guide-legend .sup, .element-chart td.sup { background: rgba(120, 200, 120, 0.25); color: #b6ff9c; }
.guide-legend .res, .element-chart td.res { background: rgba(200, 120, 120, 0.25); color: #ffb0b0; }
.guide-legend .imm, .element-chart td.imm { background: rgba(120, 120, 120, 0.4); color: #ddd; }

/* 元素克制矩阵 */
.element-chart-wrap {
    overflow: auto;
}
.element-chart {
    border-collapse: separate;
    border-spacing: 1px;
    font-size: 11px;
    background: var(--border);
}
.element-chart th, .element-chart td {
    background: var(--surface);
    padding: 4px 6px;
    text-align: center;
    min-width: 28px;
    color: var(--text);
    white-space: nowrap;
}
.element-chart thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--bg-base);
}
.element-chart tbody th {
    position: sticky; left: 0; z-index: 1;
    text-align: left;
    background: var(--bg-base);
}
.element-chart .corner { z-index: 3; font-size: 10px; line-height: 1.1; }
.element-chart .corner .atk, .element-chart .corner .def { display: block; color: var(--text-dim); }
.elem-cell {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* 招式表 */
.guide-move-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.guide-move-q {
    flex: 1;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 13px;
}
.guide-move-count {
    font-size: 12px;
    color: var(--text-dim);
}
.guide-elem-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.guide-elem-pill {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 3px 8px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 11px;
}
.guide-elem-pill.active {
    background: var(--accent, var(--text-bright));
    color: var(--surface);
    border-color: transparent;
}
.guide-moves-wrap {
    overflow: auto;
}
.guide-moves {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.guide-moves th, .guide-moves td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.guide-moves thead th {
    position: sticky;
    top: 0;
    background: var(--surface-2);
    color: var(--text-dim);
    font-weight: 600;
    z-index: 1;
}
.guide-moves tr.disabled { opacity: 0.45; }
.guide-moves .mv-name { font-weight: 600; color: var(--text-bright); white-space: nowrap; }
.guide-moves .mv-elem { white-space: nowrap; }
.guide-moves .mv-desc { color: var(--text-dim); min-width: 240px; }

/* 战斗等空 actions 时的占位卡（v0.5 战斗骨架） */
.actions-empty-placeholder {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 24px;
    color: var(--text-dim);
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: 12px;
    text-align: center;
}
.actions-empty-placeholder .placeholder-icon {
    font-size: 48px;
    opacity: 0.7;
}
.actions-empty-placeholder .placeholder-title {
    font-size: 16px;
    color: var(--text-bright);
    letter-spacing: 1px;
}
.actions-empty-placeholder .placeholder-desc {
    font-size: 12px;
    color: var(--text-mute);
    line-height: 1.6;
    max-width: 360px;
}

/* 战斗 action 弹窗：菌兽信息展示 */
.combat-monster-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    width: 100%;
}
.combat-monster-card .combat-monster-icon {
    font-size: 48px;
}
.combat-monster-card .combat-monster-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-bright);
}
.combat-monster-card .combat-monster-desc {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.5;
    text-align: center;
    margin-top: 4px;
}
.combat-monster-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.combat-monster-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
}
.combat-monster-row .combat-monster-icon {
    font-size: 18px;
}
.combat-monster-row .combat-monster-name {
    flex: 1;
    color: var(--text-bright);
}
.combat-drop-section {
    margin-top: 10px;
    padding: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.combat-drop-section .combat-drop-title {
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 6px;
}
.combat-drop-section .combat-drop-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* 综合挑战弹窗：方形菌兽网格 + hover CSS tooltip */
.combat-monster-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));   /* 强制每行 4 只 */
    gap: 6px;
    width: 100%;
    /* 固定高度：≈3 行展示，超出滚动 */
    max-height: 304px;
    overflow-y: auto;
    padding-right: 4px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
.combat-monster-grid::-webkit-scrollbar         { width: 6px; }
.combat-monster-grid::-webkit-scrollbar-track   { background: transparent; }
.combat-monster-grid::-webkit-scrollbar-thumb   {
    background: var(--border-strong);
    border-radius: 3px;
}
.combat-monster-grid::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.combat-monster-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    padding: 6px 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: help;
    transition: transform 0.12s, border-color 0.12s, background 0.12s;
}
.combat-monster-tile:hover {
    transform: translateY(-2px);
    border-color: var(--accent, #6c8cff);
    background: var(--surface-1);
    z-index: 5;
}
.combat-monster-tile { cursor: pointer; }
.combat-monster-tile.is-focused {
    border-color: var(--accent, #c89a5a);
    box-shadow: 0 0 0 2px var(--accent-shadow, rgba(200,154,90,.35)) inset,
                0 0 8px var(--accent-shadow, rgba(200,154,90,.35));
    background: linear-gradient(160deg, rgba(200,154,90,.18), rgba(200,154,90,.06));
}
.combat-monster-tile.is-focused::after {
    content: '★';
    position: absolute;
    top: 2px; right: 4px;
    font-size: 12px;
    color: var(--accent, #c89a5a);
    pointer-events: none;
}
.combat-focus-hint {
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 6px;
    user-select: none;
}
.combat-monster-tile .combat-monster-tile-icon {
    font-size: 22px;
    line-height: 1;
}
.combat-monster-tile .combat-monster-tile-name {
    font-size: 10px;
    color: var(--text-bright);
    text-align: center;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.combat-monster-tile .combat-monster-tile-elems {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
}
.combat-monster-tile .combat-monster-tile-elems .elem-pill {
    font-size: 9px;
    padding: 1px 5px;
}
.combat-monster-tile .combat-monster-tile-lv {
    font-size: 10px;
    color: #ffb060;
    font-weight: 600;
}

/* 区域掉落表标题 + pill 区 */
.combat-droptable-title {
    margin: 12px 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim, #b8b8c8);
    letter-spacing: 0.5px;
}
.combat-droptable-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* hover 自定义 tooltip（在 tile 内为 absolute；迁移到 body 后切到 fixed） */
.combat-monster-tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    width: 240px;
    padding: 10px 12px;
    background: rgba(20, 22, 30, 0.97);
    border: 1px solid var(--accent, #6c8cff);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    color: var(--text-bright, #e8e8f0);
    text-align: left;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s, visibility 0.12s;
    z-index: 100;
}
.combat-monster-tile:hover .combat-monster-tip {
    opacity: 1;
    visibility: visible;
}
/* 小三角 */
.combat-monster-tip::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--accent, #6c8cff);
}
/* 浮在 body 上的版本：fixed 定位 + 由 JS 写入 top/left；display:none 默认隐藏 */
.combat-monster-tip-floating .eff-up   { color: #6bd86b; }
.combat-monster-tip-floating .eff-down { color: #e08a8a; }
.combat-monster-tip-floating .eff-zero { color: #888;    }
.combat-monster-tip-floating .combat-tip-section-title {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-dim, #aaa);
    letter-spacing: 1px;
}
.combat-monster-tip-floating .combat-tip-block { margin-top: 4px; }
.tip-element, .tip-nature { max-width: 320px; }

.combat-monster-tip-floating {
    position: fixed;
    left: 0;
    top: 0;
    bottom: auto;
    transform: none;
    display: none;
    visibility: visible;
    opacity: 1;
    z-index: 10000;
}
/* 当 placement=below 时，三角朝上 */
.combat-monster-tip-floating[data-placement="above"]::after {
    left: 50%;
    top: 100%;
    bottom: auto;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--accent, #6c8cff);
}
.combat-monster-tip-floating[data-placement="below"]::after {
    left: 50%;
    top: auto;
    bottom: 100%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--accent, #6c8cff);
    border-top-color: transparent;
}
.combat-monster-tip .combat-tip-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}
.combat-monster-tip .combat-tip-elems {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 6px;
}
.combat-monster-tip .combat-tip-elems .elem-pill {
    font-size: 11px;
}
.combat-monster-tip .combat-tip-desc {
    font-size: 12px;
    color: var(--text-dim, #b0b0c0);
    line-height: 1.4;
    margin-bottom: 8px;
}
.combat-monster-tip .combat-tip-title {
    font-size: 12px;
    color: var(--text-dim, #b0b0c0);
    margin-bottom: 4px;
}
.combat-monster-tip .combat-tip-drops {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.combat-monster-tip .combat-tip-drops .drop-pill {
    font-size: 11px;
    padding: 2px 6px;
}
.combat-monster-tip .combat-tip-drops .drop-pill-bad {
    background: rgba(255, 80, 80, 0.18);
    color: #ff8a8a;
    border: 1px solid rgba(255, 80, 80, 0.35);
}
.combat-monster-tip .combat-tip-drops .drop-pill-muted {
    background: rgba(140, 140, 140, 0.15);
    color: #999;
    border: 1px solid rgba(140, 140, 140, 0.3);
    text-decoration: line-through;
}
.combat-monster-tip .combat-tip-reject {
    margin-top: 6px;
    padding: 5px 8px;
    font-size: 11px;
    line-height: 1.5;
    border-radius: 4px;
}
.combat-monster-tip .reject-ok {
    background: rgba(107, 216, 107, 0.12);
    color: #6bd86b;
    border: 1px solid rgba(107, 216, 107, 0.3);
}
.combat-monster-tip .reject-warn {
    background: rgba(255, 200, 80, 0.12);
    color: #ffc850;
    border: 1px solid rgba(255, 200, 80, 0.3);
}
.combat-monster-tip .reject-bad {
    background: rgba(255, 80, 80, 0.15);
    color: #ff8a8a;
    border: 1px solid rgba(255, 80, 80, 0.35);
}
.combat-monster-tip .reject-info {
    background: rgba(120, 160, 220, 0.12);
    color: #a0bce0;
    border: 1px solid rgba(120, 160, 220, 0.3);
}
.combat-monster-tip .reject-hint {
    color: var(--text-mute, #888);
    font-size: 10px;
}
.combat-monster-tip .combat-tip-empty {
    font-size: 12px;
    color: var(--text-mute, #888);
    font-style: italic;
}

.drop-empty {
    font-size: 12px;
    color: var(--text-mute);
    font-style: italic;
}
.combat-monster-elems {
    display: inline-flex;
    gap: 4px;
}
.elem-pill {
    display: inline-block;
    padding: 2px 8px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 10px;
    color: var(--text-dim);
}
.elem-pill.req-lv-lack {
    color: #e08a8a;
    border-color: #b86a6a;
    background: rgba(176, 90, 90, 0.12);
}

.skill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.skill-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.skill-level {
    color: var(--accent-hi);
    font-weight: 700;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.exp-bar {
    height: 5px;
    background: var(--bg-deep);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #00000060;
}
.exp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-hi));
    transition: width 0.3s ease;
    box-shadow: 0 0 8px var(--accent-shadow);
}
.exp-text {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-dim);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 当前活动卡片 */
.current-action .active-action {
    background: var(--bg-card-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 14px;
    position: relative;
    overflow: hidden;  /* 防止气泡溢出卡片 */
}
/* v0.6.x 末：空态卡片——和 active-action 视觉一致。
   标题与副标题直接复用 active-action-name / active-action-skill 既有样式，
   不再额外染色，保持与真行动态完全一致的字号字色。 */
/* 菌环动画装饰：右下大环 + 左上中环（::before/::after），
   再叠加 3 个 .active-action-bubble 子节点形成 5 个浮动气泡群，
   各自尺寸/位置/延迟错落，营造"行动中孢子飘散"的氛围。 */
.current-action .active-action::after {
    content: "";
    position: absolute;
    right: -30px; bottom: -30px;
    width: 80px; height: 80px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    opacity: 0.07;
    animation: pulse 4s ease-in-out infinite;
    pointer-events: none;
}
.current-action .active-action::before {
    content: "";
    position: absolute;
    left: -36px; top: -36px;
    width: 100px; height: 100px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    opacity: 0.06;
    animation: pulse 5.2s ease-in-out infinite;
    animation-delay: -1.3s;
    pointer-events: none;
}
/* 3 个气泡子节点，由 JS 注入；每个气泡使用不同尺寸/位置/延迟 */
.active-action-bubble {
    position: absolute;
    border: 2px solid var(--accent);
    border-radius: 50%;
    pointer-events: none;
    animation: pulse 4s ease-in-out infinite;
}
.active-action-bubble.b1 {
    right: 22%; top: -16px;
    width: 32px; height: 32px;
    opacity: 0.08;
    animation-duration: 3.4s;
    animation-delay: -0.6s;
}
.active-action-bubble.b2 {
    left: 18%; bottom: -14px;
    width: 38px; height: 38px;
    opacity: 0.07;
    animation-duration: 4.8s;
    animation-delay: -2.1s;
}
.active-action-bubble.b3 {
    right: 8%; top: 38%;
    width: 22px; height: 22px;
    opacity: 0.09;
    animation-duration: 3.0s;
    animation-delay: -1.7s;
}
@keyframes pulse {
    0%, 100% { transform: scale(1);   opacity: var(--bubble-min, 0.07); }
    50%      { transform: scale(1.2); opacity: var(--bubble-max, 0.15); }
}

.active-action-name {
    font-weight: 600;
    color: var(--accent-hi);
    font-size: 15px;
    margin-bottom: 4px;
}
.active-action-skill {
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.progress-bar {
    height: 8px;
    background: var(--bg-deep);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #00000060;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mycelium), var(--good));
    transition: width 0.1s linear;
    box-shadow: 0 0 8px rgba(143, 200, 164, 0.3);
}
#stop-action-btn {
    margin-top: 12px;
    width: 100%;
    background: var(--bad);
    color: #fff;
    border: none;
    padding: 7px;
    border-radius: var(--radius-s);
    font-size: 12px;
    cursor: pointer;
    letter-spacing: 2px;
    transition: filter 0.15s;
}
#stop-action-btn:hover { filter: brightness(1.15); }

/* ============ 收获滚动条（嵌入进度条与停止按钮之间） ============ */
/* 容器永远占位，避免首次收获才撑出空间。
   颜色比父卡片 (--bg-card-2) 稍深一档，与边框同色阶融为一体，
   不再像挖出的黑洞。 */
.action-feed {
    margin-top: 8px;
    height: 26px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.feed-current {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    /* 0~0.4s 从下方滑入；4.4~5.0s 淡出。每条信息总寿命 5s。 */
    animation:
        feedSlide 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        feedFade  0.6s 4.4s ease-out forwards;
}
@keyframes feedSlide {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes feedFade {
    from { opacity: 1; }
    to   { opacity: 0; }
}
.feed-gain {
    color: var(--accent-hi);
    font-variant-numeric: tabular-nums;
}
.feed-exp {
    color: var(--good);
    font-variant-numeric: tabular-nums;
}
.feed-enh {
    display: inline-flex; align-items: center; gap: 6px;
    margin-right: 8px; padding: 2px 8px;
    border-radius: 999px; border: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}
.feed-enh em {
    font-style: normal; font-size: 11px; opacity: .8;
    padding-left: 4px; border-left: 1px solid var(--border);
}
.feed-enh-ok { color: var(--accent-hi); border-color: var(--accent); }
.feed-enh-fail { color: #e08a8a; border-color: #b86a6a; }

/* ============================================================
   中栏：任务卡（采集类型由左栏技能行点击切换）
   ============================================================ */
.panel-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.panel-subtitle {
    color: var(--text-soft);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: none;
    font-weight: 400;
}

.actions-list[hidden] { display: none !important; }
.actions-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 120px));
    gap: 8px;
    justify-content: center;
    margin-bottom: 12px;
}
/* hidden 兜底：display:grid 会覆盖 [hidden] 默认的 display:none */
.actions-list[hidden] { display: none; }
.action-tile {
    width: 100%;
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px 4px 7px;
    display: grid;
    grid-template-rows: 1fr auto auto;
    grid-template-columns: 1fr;
    place-items: center;
    row-gap: 2px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.18s ease;
    color: var(--text);
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.action-tile::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--border-strong);
    transition: background 0.18s;
}
.action-tile:hover {
    border-color: var(--border-strong);
    background: var(--bg-card-2);
    transform: translateY(-1px);
}
.action-tile:hover::before { background: var(--accent); }

.action-tile.locked {
    opacity: 0.5;
    background: var(--bg-base);
    cursor: pointer;
}
.action-tile.locked::before { background: var(--text-mute); }

.action-tile.active {
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--bg-card), rgba(214, 163, 92, 0.18));
    box-shadow: 0 0 0 1px var(--accent-shadow), inset 0 0 18px rgba(214, 163, 92, 0.08);
}
.action-tile.active::before { background: var(--accent-hi); }

.action-tile.highlight {
    animation: cardHighlight 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.action-tile-icon {
    font-size: 40px;
    line-height: 1;
    /* grid 1fr 行内 place-items: center 自动垂直水平居中 */
}
/* 行动图标（png 透明背景）：与 emoji 字号匹配，52×52，圆角避免硬边 */
.action-tile-icon-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    display: block;
    image-rendering: auto;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
/* 行动方块内的物品图标（cheese/bone 锻造类，复用 itemIconHtml） */
.action-tile-icon .item-icon-img {
    width: 52px;
    height: 52px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
.action-tile-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.action-tile-lv {
    font-size: 11px;
    color: var(--accent-hi);
    letter-spacing: 0.5px;
}
.action-tile-lock {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 9px;
    color: var(--text-mute);
    background: rgba(0, 0, 0, 0.45);
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.3px;
}
.action-tile-active {
    position: absolute;
    top: 5px;
    right: 6px;
    color: var(--good);
    font-size: 11px;
    text-shadow: 0 0 6px var(--good);
    animation: tileActivePulse 1.5s ease-in-out infinite;
}
@keyframes tileActivePulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* ========== 行动详情弹窗 ========== */
.action-card-modal {
    max-width: 460px;
    width: min(92vw, 460px);
    /* 固定弹窗整体高度：内容超出由内部 .modal-body 滚动 */
    max-height: min(86vh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.action-card-modal > .modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
.action-card-modal > .modal-body::-webkit-scrollbar         { width: 6px; }
.action-card-modal > .modal-body::-webkit-scrollbar-track   { background: transparent; }
.action-card-modal > .modal-body::-webkit-scrollbar-thumb   {
    background: var(--border-strong);
    border-radius: 3px;
}
.action-card-modal > .modal-body::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.action-card-modal .modal-head h2 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.action-modal-skillname {
    color: var(--text-mute);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
}
.action-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 12px;
}
.action-modal-meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.action-modal-meta .meta-level { color: var(--accent); opacity: 0.85; }
.action-modal-meta .meta-forge { color: var(--accent); opacity: 0.85; }
.action-modal-meta .meta-time  { color: var(--info); }
.action-modal-meta .meta-xp    { color: var(--good); }
.action-modal-meta .meta-base  { opacity: 0.5; margin-right: 4px; font-size: 0.92em; }
.action-modal-meta .meta-buffed{ color: var(--accent); font-weight: 700; }

.action-modal-section { margin-bottom: 14px; }
.action-modal-section h4 {
    font-size: 11px;
    color: var(--text-dim);
    margin: 0 0 6px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.action-modal-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* 双按钮容器：开始 + 加入队列 平行 */
.action-modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.action-modal-start,
.action-modal-enqueue {
    flex: 1;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: filter 0.15s, background 0.15s, border-color 0.15s;
}

.action-modal-start {
    background: linear-gradient(135deg, var(--accent), #b8854a);
    color: #1a1611;
    border: none;
    letter-spacing: 4px;
}
.action-modal-start:hover:not(:disabled) { filter: brightness(1.12); }
.action-modal-start:disabled {
    background: var(--border-strong);
    color: var(--text-mute);
    cursor: not-allowed;
    filter: none;
    letter-spacing: 2px;
}
/* 材料不足：禁用但保持高对比度的警示色，避免与等级锁混淆 */
.action-modal-start.short-mat:disabled {
    background: linear-gradient(135deg, #6a2a22, #4a1c16);
    color: #ffd6c2;
    border: 1px solid #c44a3a;
}

/* 加入队列：次级按钮，边框风格 */
.action-modal-enqueue {
    background: var(--bg-deep);
    color: var(--text);
    border: 1px solid var(--accent);
}
.action-modal-enqueue:hover:not(:disabled) {
    background: var(--bg-card);
    filter: brightness(1.1);
}
.action-modal-enqueue:disabled {
    background: var(--border-strong);
    color: var(--text-mute);
    border-color: var(--border-strong);
    cursor: not-allowed;
}

/* ─── 行动详情弹窗：执行次数输入 + 快捷 chips ─── */
.action-modal-count-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.count-label {
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    flex-shrink: 0;
}
#action-modal-count {
    width: 96px;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    padding: 6px 10px;
    font-size: 14px;
    font-family: inherit;
    text-align: center;
    transition: border-color 0.15s ease;
    /* 隐藏数字框默认上下箭头（webkit）*/
    -moz-appearance: textfield;
}
#action-modal-count::-webkit-outer-spin-button,
#action-modal-count::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#action-modal-count:focus {
    outline: none;
    border-color: var(--accent);
}
#action-modal-count:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.count-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: auto;
}
.count-chip {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s ease;
    min-width: 36px;
}
.count-chip:hover:not(:disabled) {
    color: var(--text);
    border-color: var(--accent);
    background: var(--bg-card);
}
.count-chip:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ─── 当前活动卡片：进度文本 N/M ─── */
.active-action-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}
.active-action-count {
    font-size: 12px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
/* 战斗：本次累计战利品按钮 */
.combat-loot-btn {
    flex-shrink: 0;
    padding: 2px 8px;
    background: linear-gradient(135deg, var(--accent), #a87a3f);
    color: #1a120a;
    border: 0;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 4px var(--accent-shadow);
    transition: transform 0.1s, box-shadow 0.15s;
    font-variant-numeric: tabular-nums;
}
.combat-loot-btn:hover {
    background: linear-gradient(135deg, var(--accent-hi), var(--accent));
    box-shadow: 0 2px 8px var(--accent-shadow);
}
.combat-loot-btn:active { transform: translateY(1px); }
.combat-loot-btn[hidden] { display: none !important; }

.action-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    transition: all 0.18s ease;
    position: relative;
    overflow: hidden;
}
.action-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--border);
    transition: background 0.18s;
}
.action-card:hover {
    border-color: var(--border-strong);
    background: var(--bg-card-2);
}
.action-card:hover::before { background: var(--accent); }

.action-card.locked {
    opacity: 0.55;
    background: var(--bg-base);
}
.action-card.locked::before { background: var(--text-mute); }

/* 从物品详情跳转到地图时的临时高亮（1.6s 自动消失） */
.action-card.highlight {
    animation: cardHighlight 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes cardHighlight {
    0%   { box-shadow: 0 0 0 2px transparent; }
    18%  { box-shadow: 0 0 0 2px var(--accent), 0 0 24px var(--accent-shadow); }
    100% { box-shadow: 0 0 0 2px transparent; }
}

.action-card.active {
    border-color: var(--accent);
    background: linear-gradient(90deg, var(--bg-card), rgba(214, 163, 92, 0.12));
    box-shadow: 0 0 0 1px var(--accent-shadow), inset 0 0 20px rgba(214, 163, 92, 0.05);
}
.action-card.active::before { background: var(--accent-hi); }

.action-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.action-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
}
.action-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11px;
    color: var(--text-dim);
}
.action-meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 999px;
    white-space: nowrap;
}
.action-meta .meta-level { color: var(--accent); opacity: 0.85; }
.action-meta .meta-xp    { color: var(--good); }
.action-meta .meta-time  { color: var(--info); }
/* 工具锻造与一般等级现在共用一条朽木金样式（v0.5.x 视觉统一） */
.action-meta .meta-forge { color: var(--accent); opacity: 0.85; }

/* ========== 锻造二级 Tab（材料 / 工具）/ 烹饪二级 Tab（菌包） ========== */
/* v0.6 起统一为社交/指南/市场同款样式：透明背景 + 底线分隔 + 边框按钮 */
.forging-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0 0 8px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--accent-shadow);
    border-radius: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex: none;
}
.forging-tabs[hidden] { display: none; }

/* 菌织：植入槽 sub-tab 下的元素过滤 chip 行 */
.weaving-elem-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
    margin: -6px 0 12px;
    padding: 6px;
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.weaving-elem-bar[hidden] { display: none; }
.weaving-elem-chip {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.weaving-elem-chip:hover {
    color: var(--text);
    background: var(--bg-card);
}
.weaving-elem-chip.active {
    background: var(--mycelium);
    color: #0e1a14;
    border-color: var(--mycelium);
}
.forging-tab {
    flex: 0 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.forging-tab:hover {
    color: var(--text);
    background: var(--bg-card);
}
.forging-tab.active {
    background: var(--bg-card-2, var(--bg-card));
    color: var(--accent-hi, var(--accent));
    border-color: var(--accent);
    box-shadow: none;
}

/* ─── 挖掘区域 Tab（7 区横向） ─── */
.region-tabs {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin: 0 0 12px;
    padding: 3px;
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.region-tabs[hidden] { display: none; }
.region-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 10px 4px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
    overflow: hidden;
}
.region-tab:hover {
    color: var(--text);
    background: var(--bg-card);
}
.region-tab.active {
    background: linear-gradient(135deg, var(--mycelium), #5b8c6a);
    color: #0e1a14;
    box-shadow: 0 0 0 1px rgba(143, 200, 164, 0.35);
}
.region-tab-name {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.action-drops {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: var(--text-soft);
}
.drop-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
}
.drop-pill .drop-prob { color: var(--text-mute); font-size: 10px; }

/* 制造动作的输入消耗 pill */
.action-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: var(--text-soft);
    margin-top: 2px;
}
.action-arrow {
    color: var(--text-mute);
    font-size: 10px;
    letter-spacing: 1px;
    margin-right: 2px;
}
.input-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
}
.input-pill.short {
    border-color: rgba(196, 90, 74, 0.5);
    color: #e89789;
}
.input-have {
    color: var(--text-mute);
    font-size: 10px;
}
.input-pill.short .input-have {
    color: #e89789;
}
.input-qty-discount {
    color: #ffd864;
    font-weight: 600;
}
.input-qty-orig {
    color: var(--text-mute);
    font-size: 11px;
    margin-left: 2px;
    opacity: 0.7;
}

.action-card button {
    background: linear-gradient(135deg, var(--accent), #b8854a);
    color: #1a1611;
    border: none;
    padding: 9px 18px;
    border-radius: var(--radius-s);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 2px;
    font-size: 13px;
    min-width: 84px;
}
.action-card button:hover { filter: brightness(1.12); }
.action-card button:disabled {
    background: var(--border-strong);
    color: var(--text-mute);
    cursor: not-allowed;
    filter: none;
}
.action-card.active button {
    background: var(--mycelium);
    color: #14201a;
    cursor: default;
    pointer-events: none;
}

/* ============================================================
   右栏：背包（方块网格）
   ============================================================ */
.inv-category-title {
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 14px 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.inv-category-title:first-child { margin-top: 0; }
.inv-category-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}

.inventory-list { display: flex; flex-direction: column; }

/* 物品方块网格：自动适配宽度，最小 56px 一格 */
.inv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 6px;
}

.inv-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.12s ease;
    overflow: hidden;
    /* 移动端长按禁止文字选择 / 系统菜单（长按改用 JS 触发悬浮窗） */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.inv-tile::before {
    /* 顶部高光线（按品类着色） */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--border-strong);
}
.inv-tile[data-cat="spore"]::before    { background: var(--spore); }
.inv-tile[data-cat="mycelium"]::before { background: var(--mycelium); }
.inv-tile[data-cat="log"]::before      { background: var(--log); }
.inv-tile[data-cat="bone"]::before     { background: var(--bone); }
.inv-tile[data-cat="fabric"]::before   { background: var(--fabric); }
.inv-tile[data-cat="berry"]::before    { background: var(--berry); }
.inv-tile[data-cat="fruit"]::before    { background: var(--fruit); }
.inv-tile[data-cat="bean"]::before     { background: var(--bean); }
.inv-tile[data-cat="food"]::before  { background: var(--food); }
.inv-tile[data-cat="drink"]::before    { background: var(--drink); }
.inv-tile[data-cat="cheese"]::before   { background: var(--accent-hi); }
.inv-tile:hover {
    border-color: var(--accent);
    background: var(--bg-card-2);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.inv-tile-icon {
    font-size: 22px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.inv-tile-icon .item-icon-img {
    width: 32px;
    height: 32px;
    filter: none;
}
.inv-tile-qty {
    position: absolute;
    right: 3px;
    bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-hi);
    font-variant-numeric: tabular-nums;
    background: rgba(15, 13, 10, 0.78);
    padding: 0 4px;
    border-radius: 3px;
    line-height: 14px;
    pointer-events: none;
}
.inv-tile-tier {
    position: absolute;
    right: 3px;
    top: 2px;
    font-size: 10px;
    font-weight: 700;
    color: #b8d4ff;
    background: rgba(15, 13, 10, 0.78);
    padding: 0 4px;
    border-radius: 3px;
    line-height: 14px;
    pointer-events: none;
    letter-spacing: 0.3px;
}
.inv-tile-enh {
    position: absolute;
    left: 3px;
    top: 2px;
    font-size: 11px;
    font-weight: 700;
    color: #ffd779;
    text-shadow: 0 0 4px rgba(255, 200, 80, 0.6);
    font-variant-numeric: tabular-nums;
    background: rgba(15, 13, 10, 0.78);
    padding: 0 4px;
    border-radius: 3px;
    line-height: 14px;
    pointer-events: none;
}
.equip-slot-enh {
    position: absolute;
    left: 3px;
    top: 2px;
    font-size: 11px;
    font-weight: 700;
    color: #ffd779;
    text-shadow: 0 0 4px rgba(255, 200, 80, 0.6);
    font-variant-numeric: tabular-nums;
    background: rgba(15, 13, 10, 0.78);
    padding: 0 4px;
    border-radius: 3px;
    line-height: 14px;
    pointer-events: none;
    z-index: 2;
}

/* ============================================================
   离线收益弹窗
   ============================================================ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 13, 10, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: modalFadeIn 0.25s ease-out;
}
@keyframes modalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-card {
    background: linear-gradient(160deg, var(--bg-panel), var(--bg-base));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-l);
    padding: 28px 30px 22px;
    max-width: 460px;
    width: calc(100% - 32px);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.05);
    animation: modalSlideIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.offline-header {
    text-align: center;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--border);
}
.offline-icon {
    font-size: 36px;
    display: inline-block;
    filter: drop-shadow(0 4px 10px rgba(200, 156, 219, 0.3));
    animation: bob 4s ease-in-out infinite;
}
.offline-card h2 {
    font-size: 20px;
    color: var(--accent);
    margin-top: 4px;
    letter-spacing: 4px;
    font-weight: 600;
}
.offline-subtitle {
    color: var(--text-dim);
    font-size: 12px;
    margin-top: 6px;
    letter-spacing: 1px;
}

.offline-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
.offline-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    padding: 10px 12px;
    text-align: center;
}
.offline-stat-label {
    display: block;
    color: var(--text-dim);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.offline-stat-value {
    display: block;
    color: var(--accent-hi);
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.offline-section {
    margin-bottom: 16px;
}
.offline-section h4 {
    color: var(--text-dim);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 500;
}

.offline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 6px;
}
.offline-grid-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-mute);
    font-size: 12px;
    padding: 8px 0;
    font-style: italic;
}

.offline-exp {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.offline-exp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 13px;
}
.offline-exp-pill .exp-amount {
    color: var(--good);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.offline-exp-empty {
    color: var(--text-mute);
    font-size: 12px;
    font-style: italic;
}

.offline-warn {
    background: rgba(216, 133, 58, 0.10);
    border: 1px solid rgba(216, 133, 58, 0.4);
    color: var(--warn);
    padding: 8px 12px;
    border-radius: var(--radius-s);
    font-size: 12px;
    margin-bottom: 14px;
    line-height: 1.5;
}

.offline-confirm {
    width: 100%;
    padding: 12px;
    letter-spacing: 4px;
}

/* ============================================================
   通用 Modal 头部（关闭按钮）& 帐号/设置弹窗
   ============================================================ */
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border);
}
.modal-head h2 {
    font-size: 18px;
    color: var(--accent);
    letter-spacing: 3px;
    font-weight: 600;
}
.modal-close {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    transition: all 0.15s;
}
.modal-close:hover {
    color: var(--text);
    border-color: var(--accent);
    background: var(--bg-card);
}

.settings-card .modal-body {
    display: flex;
    flex-direction: column;
}
.settings-section h3 {
    color: var(--accent-hi);
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 6px;
    font-weight: 600;
}
.settings-hint {
    color: var(--text-dim);
    font-size: 12px;
    margin-bottom: 10px;
    line-height: 1.5;
}
.settings-hint code {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 6px;
    color: var(--accent-hi);
    font-family: monospace;
    font-size: 11px;
}
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.settings-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-soft);
    font-size: 12px;
    letter-spacing: 1px;
}
.settings-form input[type="text"],
.settings-form input[type="password"] {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--text);
    padding: 9px 11px;
    font-size: 13px;
    font-family: inherit;
    transition: border 0.15s, box-shadow 0.15s;
}
.settings-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-shadow);
}
.settings-submit {
    margin-top: 4px;
    padding: 9px;
    letter-spacing: 3px;
    align-self: stretch;
}
.settings-feedback {
    margin-top: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-s);
    font-size: 12px;
    line-height: 1.4;
}
.settings-feedback.ok {
    background: rgba(148, 192, 101, 0.10);
    border: 1px solid rgba(148, 192, 101, 0.4);
    color: var(--good);
}
.settings-feedback.err {
    background: rgba(196, 90, 74, 0.12);
    border: 1px solid rgba(196, 90, 74, 0.4);
    color: #e89789;
}
.settings-divider {
    height: 1px;
    background: var(--border);
    margin: 18px 0;
}

/* 头像编辑 */
.avatar-edit {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
}
.avatar-preview {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--bg-panel);
    border: 1px solid var(--border-strong);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 600;
    color: var(--text-dim);
    flex-shrink: 0;
    overflow: hidden;
}
.avatar-preview.has-img { color: transparent; }
.avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.avatar-actions button { min-width: 110px; }
#display-name-hint.exhausted { color: #e08a8a; }
.settings-empty {
    color: var(--text-dim);
    font-size: 13px;
    text-align: center;
    padding: 24px 0 8px;
    font-style: italic;
}
.settings-section {
    padding: 4px 4px 8px;
}
.settings-section-title {
    font-size: 14px;
    color: var(--text-dim);
    margin: 0 0 10px;
    border-bottom: 1px dashed var(--border);
    padding-bottom: 6px;
    font-weight: 600;
}
.settings-stats-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.settings-stats-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 8px;
    background: var(--bg-card, var(--bg-base));
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 13px;
}
.settings-stat-name { color: var(--text-dim); }
.settings-stat-value {
    color: var(--accent, #d8a059);
    font-weight: 700;
}
.settings-stats-hint {
    margin: 10px 0 0;
    font-size: 11px; color: var(--text-dim);
    text-align: center;
    font-style: italic;
}

/* ============================================================
   右栏：储囊 / 装配 Tab 切换
   ============================================================ */
.panel-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-deep);
    padding: 4px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 14px;
}
.panel-tab {
    flex: 1;
    background: transparent;
    color: var(--text-dim);
    border: none;
    padding: 7px 8px;
    border-radius: var(--radius-s);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
    letter-spacing: 1px;
    font-family: inherit;
}
.panel-tab:hover { color: var(--text); }
.panel-tab.active {
    color: #1a1611;
    font-weight: 600;
    background: linear-gradient(135deg, var(--accent), #b8854a);
    box-shadow: 0 2px 8px var(--accent-shadow);
}
.panel-tab-content { animation: tabFadeIn 0.2s ease-out; }
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   装配 Tab：6+6 槽位
   ============================================================ */

/* ---------- 属性面板（v0.5.x 战斗属性点系统）---------- */
.equip-toolbar {
    padding: 8px 12px 4px;
    display: flex;
    gap: 8px;
    justify-content: center;
}
.equip-toolbar .chat-send-btn {
    height: 36px;
    min-width: 96px;
    position: relative;
}
.equip-toolbar .btn-secondary {
    position: relative;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid var(--border-medium, #555);
    background: var(--bg-elevated, #2a2a2a);
    color: var(--text-primary, #ddd);
    border-radius: 6px;
}
.equip-toolbar .btn-secondary:hover { background: var(--bg-hover, #3a3a3a); }

.stats-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    background: #d4a017;
    color: #1a1a1a;
    border-radius: 9px;
    font-size: 11px;
    font-weight: bold;
}
.stats-card { max-width: 460px; }
.stats-summary {
    display: flex;
    gap: 16px;
    padding: 8px 0 12px;
    flex-wrap: wrap;
    font-size: 13px;
}
.stats-summary b { color: #d4a017; }
.stats-summary .stats-pool-wrap { margin-left: auto; }

.stats-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 0;
}
.stats-row {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.03);
    font-size: 13px;
}
.stats-row .stats-label  { color: var(--text-secondary, #aaa); }
.stats-row .stats-value  { font-variant-numeric: tabular-nums; color: #d4a017; }
.stats-row .stats-detail {
    font-size: 11px;
    color: var(--text-muted, #888);
    margin-left: 6px;
}
.stats-row .stats-actions { display: flex; gap: 4px; }
.stats-row .stats-actions button {
    padding: 2px 8px;
    font-size: 12px;
    border: 1px solid var(--border-medium, #555);
    background: var(--bg-elevated, #2a2a2a);
    color: var(--text-primary, #ddd);
    border-radius: 4px;
    cursor: pointer;
    min-width: 32px;
    /* iOS Safari：禁用双击缩放/长按选中，避免连续点 +/- 触发缩放 */
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.stats-row .stats-actions button:hover:not(:disabled) {
    background: var(--bg-hover, #3a3a3a);
    border-color: #d4a017;
}
.stats-row .stats-actions button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.stats-row-fixed { grid-template-columns: 70px auto 1fr; }
.stats-row-fixed .stats-hint {
    font-size: 11px;
    color: var(--text-muted, #888);
    text-align: right;
}
.stats-extra {
    border-top: 1px dashed var(--border-soft, #444);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 属性面板分两段：上半实际属性 / 下半种族值 */
.stats-section { margin-bottom: 14px; }
.stats-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #aaa);
    margin-bottom: 8px;
}
.stats-pending {
    color: #4cd964;
    font-weight: 600;
    font-size: 11px;
}
.stats-eq-bonus {
    color: #ffd779;
    font-weight: 600;
    font-size: 11px;
    text-shadow: 0 0 4px rgba(255, 200, 80, 0.4);
}
.stats-race-num {
    font-size: 14px;
    font-weight: 600;
    color: #d4a017;
    font-variant-numeric: tabular-nums;
}
/* 复用 .inv-category-title 样式但重置上下间距，确保面板内紧凑对齐。
   选择器 .stats-card .inv-category-title.stats-race-title 优先级 (0,3,0)
   高于 .inv-category-title (0,1,0)，可去掉历史遗留的 !important。 */
.stats-card .inv-category-title.stats-race-title { margin: 10px 0 5px; }

.stats-actual-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 12px;
}
.stats-actual-cell {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
}
.stats-actual-label { font-size: 12px; color: var(--text-secondary, #aaa); }
.stats-actual-value {
    font-size: 14px;
    font-weight: 600;
    color: #d4a017;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
    .stats-actual-grid { grid-template-columns: repeat(2, 1fr); }
}

.stats-footer {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.stats-footer .chat-send-btn { height: 36px; min-width: 96px; }
.stats-feedback { font-size: 12px; color: #d4a017; }

.btn-danger {
    padding: 6px 14px;
    font-size: 12px;
    border: 1px solid #a04040;
    background: #4a2020;
    color: #f0c0c0;
    border-radius: 6px;
    cursor: pointer;
}
.btn-danger:hover { background: #5a2828; }

/* ---------- 装配槽位 ---------- */
.equip-group-title {
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 14px 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.equip-group-title:first-child { margin-top: 0; }
.equip-group-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}
.equip-group-hint {
    color: var(--text-mute);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.equip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 120px));
    gap: 6px;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.equip-slot {
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    aspect-ratio: 1 / 1;
    background: var(--bg-card);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-s);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    overflow: hidden;
    color: var(--text-soft);
    font-family: inherit;
}
.equip-slot:hover {
    border-color: var(--accent);
    border-style: solid;
    background: var(--bg-card-2);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.equip-slot:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* 顶部色条：外装/植入差异化 */
.equip-slot::before {
    content: "";
    position: absolute;
    top: 0; left: 8px; right: 8px;
    height: 2px;
    background: var(--accent);
    opacity: 0.5;
}
.equip-slot.implant::before {
    background: var(--spore);
}

.equip-slot-name {
    font-size: 13px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
}

/* 内植入网格的整体氛围：略带紫调 */
.implant-grid .equip-slot {
    background: var(--bg-card);
    border-color: rgba(200, 156, 219, 0.25);
}
.implant-grid .equip-slot:hover {
    border-color: var(--spore);
}

/* 工具槽：苔绿色调 + 紧凑布局（一行四个） */
.equip-slot.tool::before {
    background: var(--mycelium);
}
.tool-grid .equip-slot {
    border-color: rgba(143, 200, 164, 0.25);
}
.tool-grid .equip-slot:hover {
    border-color: var(--mycelium);
}
.tool-grid {
    grid-template-columns: repeat(4, minmax(0, 120px));
    justify-content: center;
}
.tool-grid .equip-slot-name { font-size: 13px; }

/* 工具锁定态：制造工具尚未开放 */
.equip-slot.tool-locked {
    /* v0.4 起 tool-locked 仅作"对应技能未开放"的视觉提示，
       不再阻止点击（玩家可提前装备工具，技能开放即生效）。 */
    opacity: 0.45;
    cursor: pointer;
}
.equip-slot.tool-locked:hover {
    border-color: var(--border-strong);
    border-style: dashed;
    transform: none;
    box-shadow: none;
}
.equip-slot.tool-locked::after {
    content: "🔒";
    position: absolute;
    bottom: 3px;
    right: 4px;
    font-size: 9px;
    opacity: 0.7;
}

/* 消耗品槽：琥珀暖橙色调 + 与工具同款紧凑布局 */
.equip-slot.consumable::before {
    background: var(--food);
}
.consumable-grid .equip-slot {
    background: var(--bg-card);
    border-color: rgba(232, 144, 96, 0.25);
}
.consumable-grid .equip-slot:hover {
    border-color: var(--food);
}
.consumable-grid .equip-slot-name { font-size: 13px; }

.equip-divider {
    /* 分割线已移除（保留极小间距以避免分组贴在一起） */
    height: 0;
    margin: 8px 0 0;
}

.equip-hint {
    margin-top: 14px;
    padding: 8px 12px;
    background: rgba(200, 156, 219, 0.08);
    border: 1px dashed rgba(200, 156, 219, 0.3);
    border-radius: var(--radius-s);
    color: var(--text-dim);
    font-size: 11px;
    text-align: center;
    line-height: 1.5;
}
/* ============================================================
   物品详情弹窗
   ============================================================ */
.item-card {
    max-width: 440px;
}
.item-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-s);
}
.item-hero[data-cat="spore"]    { border-left-color: var(--spore); }
.item-hero[data-cat="mycelium"] { border-left-color: var(--mycelium); }
.item-hero[data-cat="log"]      { border-left-color: var(--log); }
.item-hero[data-cat="bone"]     { border-left-color: var(--bone); }
.item-hero[data-cat="fabric"]   { border-left-color: var(--fabric); }
.item-hero[data-cat="berry"]    { border-left-color: var(--berry); }
.item-hero[data-cat="fruit"]    { border-left-color: var(--fruit); }
.item-hero[data-cat="bean"]     { border-left-color: var(--bean); }
.item-hero[data-cat="food"]  { border-left-color: var(--food); }
.item-hero[data-cat="drink"]    { border-left-color: var(--drink); }
.item-hero[data-cat="cheese"]   { border-left-color: var(--accent-hi); }

.item-hero-icon {
    font-size: 38px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
    flex-shrink: 0;
}
.item-hero-icon .item-icon-img {
    width: 48px;
    height: 48px;
}
.enh-mat-pill .item-icon-img {
    width: 14px;
    height: 14px;
}
.consume-slot-icon .item-icon-img,
.equip-modal-tile-icon .item-icon-img {
    width: 28px;
    height: 28px;
}
.ba-cell-icon .item-icon-img {
    width: 32px;
    height: 32px;
}
.item-hero-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.item-hero-name {
    font-size: 16px;
    color: var(--accent-hi);
    font-weight: 600;
    letter-spacing: 1px;
}
.item-hero-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    background: var(--bg-deep);
    color: var(--text-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    letter-spacing: 1px;
}
.item-hero-tag[data-cat="spore"]    { color: var(--spore); }
.item-hero-tag[data-cat="mycelium"] { color: var(--mycelium); }
.item-hero-tag[data-cat="log"]      { color: var(--log); }
.item-hero-tag[data-cat="bone"]     { color: var(--bone); }
.item-hero-tag[data-cat="fabric"]   { color: var(--fabric); }
.item-hero-tag[data-cat="berry"]    { color: var(--berry); }
.item-hero-tag[data-cat="fruit"]    { color: var(--fruit); }
.item-hero-tag[data-cat="bean"]     { color: var(--bean); }
.item-hero-tag[data-cat="food"]  { color: var(--food); }
.item-hero-tag[data-cat="drink"]    { color: var(--drink); }
.item-hero-tag[data-cat="cheese"]   { color: var(--accent-hi); }

.item-description {
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.65;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: var(--radius-s);
    border-left: 2px solid var(--border-strong);
    white-space: pre-line;
}
.item-description.empty {
    color: var(--text-mute);
    font-style: italic;
}

.item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    margin-bottom: 14px;
}
.item-row-label {
    color: var(--text-dim);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.item-row-value {
    color: var(--accent-hi);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 16px;
}

.item-section h4 {
    color: var(--text-dim);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 500;
}

.item-sources {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.item-source {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 7px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.12s ease;
    text-align: left;
    width: 100%;
    color: inherit;
    font-family: inherit;
}
.item-source:hover {
    border-color: var(--accent);
    background: var(--bg-card-2);
    transform: translateX(2px);
}
.item-source:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.item-source-name {
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.item-source-lv {
    color: var(--accent-hi);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 8px;
}
.item-source-empty {
    color: var(--text-mute);
    font-size: 12px;
    text-align: center;
    padding: 10px 0;
    font-style: italic;
    border: 1px dashed var(--border);
    border-radius: var(--radius-s);
}

/* ============================================================
   Toast
   ============================================================ */
.toast-container {
    position: fixed;
    bottom: 22px;
    right: 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
    z-index: 99999;
    max-width: 320px;
}
.toast {
    background: var(--bg-panel);
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--good);
    border-radius: var(--radius-s);
    padding: 9px 13px;
    font-size: 12px;
    color: var(--text);
    box-shadow: var(--shadow);
    animation: slideIn 0.3s ease, fadeOut 0.4s ease 2.6s forwards;
}
.toast.exp     { border-left-color: var(--accent); }
.toast.offline { border-left-color: var(--spore); font-weight: 500; }
.toast.error   { border-left-color: var(--bad); }
.toast.levelup { border-left-color: var(--accent-hi); background: linear-gradient(90deg, var(--bg-panel), rgba(214,163,92,0.18)); }

@keyframes slideIn {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOut {
    to { transform: translateX(20px); opacity: 0; }
}

/* ============================================================
   响应式
   ============================================================ */
/* 移动端导航按钮（桌面端默认隐藏；
   必须放在 @media 块之前，否则会因源顺序覆盖 @media 内的 display: flex）*/
.mobile-nav-extra { display: none; }

@media (max-width: 1100px) and (min-width: 1101px) {
    /* 已废弃：中等屏布局并入移动端，避免右栏被挤到底部的过渡态 */
}
@media (max-width: 1100px) {
    /* ============================================================
       移动端 UI（v0.5.x）：覆盖到 iPad mini / iPhone 横屏
       - 顶栏隐藏 logo/标题；当前行动+队列 fixed 浮在顶栏左上
       - 左栏（72px 宽）：仅显示 icon——储囊/装配/11 个技能
       - 中栏：actions（上）+ chat（下）；选中储囊/装配时 inventory 顶替 actions
       ============================================================ */

    /* 顶栏：保留 logo + brand-title，与浮动当前行动卡共存 */
    .topbar { padding: 8px 14px 8px 8px; }
    .topbar-left { flex: 0 0 auto; min-width: 0; gap: 6px; }
    .topbar-left .brand-mark.small { font-size: 18px; }
    .topbar-left .brand-title { font-size: 13px; }

    /* 当前行动 + 队列：fixed 漂浮在顶栏左上方位置（在 .topbar-left 内显示） */
    .queue-indicator-side,
    .panel-skills > .panel-title:first-of-type,
    .panel-skills .panel-title + #current-action,
    .panel-skills .panel-divider {
        /* 复用 panel-skills 内已有节点；通过 fixed 提到顶栏视觉位置 */
    }
    .panel-skills > .panel-title { display: none; }       /* "🌀 当前行动" 标题在移动端不需要 */
    .panel-skills .panel-divider { display: none; }
    #current-action {
        position: fixed;
        top: 6px;
        left: 8px;          /* JS 会重写为 topbar-left 之后的位置 */
        right: auto;
        width: auto;
        max-width: 180px;
        z-index: 50;
        margin: 0;
        padding: 4px 8px;
    }
    #current-action #stop-action-btn { display: none; }
    #current-action .active-action-name { font-size: 11px; line-height: 1.15; }
    #current-action .active-action-count { font-size: 10px; }
    #current-action .progress-bar { height: 3px; margin-top: 3px; }

    .queue-indicator-side {
        position: fixed;
        top: 6px;
        right: auto;
        width: auto;
        padding: 0 10px;
        font-size: 11px;
        z-index: 51;
        margin: 0;
        box-sizing: border-box;
    }
    #current-action .empty {
        font-size: 11px; padding: 6px 10px;
        text-align: left; opacity: 0.55;
    }
    #current-action .active-action {
        padding: 6px 10px;
        border-radius: 8px;
    }
    /* 紧凑卡：隐藏气泡装饰 + 收获滚条 + 收回按钮（移到弹窗里再说），只保留进度条与文字。
       战斗状态下隐藏 HP/MP 双条（arena 已有完整显示），避免顶栏卡片超高；
       但保留前往进度条 .combat-travel-bar，让 traveling 阶段顶栏卡也有读条提示。 */
    #current-action .active-action-bubble,
    #current-action .active-action::before,
    #current-action .active-action::after,
    #current-action .action-feed,
    #current-action .active-action-skill,
    #current-action .combat-bars,
    #current-action .combat-loot-btn,
    #current-action #stop-action-btn { display: none !important; }
    #current-action .active-action-name { font-size: 11px; line-height: 1.15; }
    #current-action .active-action-count { font-size: 10px; }
    #current-action .progress-bar { height: 3px; margin-top: 3px; }

    /* 队列指示器：紧贴当前行动卡右侧，作为漂浮按钮
       特异性 (0,1,1) 用 body > 子选择器，压过全局 .queue-indicator-side(0,1,0) 的 width:100% */
    /* 当前行动 + 队列在移动端：用 absolute 定位在 .topbar 内（topbar 是 sticky，子节点天然跟随）*/
    .topbar > #current-action {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 8px;          /* JS 会重写 */
        right: auto;
        width: auto;
        max-width: 180px;
        z-index: 50;
        margin: 0;
        padding: 4px 8px;
    }
    .topbar > #current-action #stop-action-btn { display: none; }
    /* 移动端浮动停止按钮：直接挂在 <body> 下，绕开父级 transform 包含块 */
    #stop-action-floating {
        display: none;
        position: fixed;
        margin: 0;
        padding: 10px 12px;
        font-size: 12px;
        line-height: 1.2;
        background: var(--bg-card);
        color: var(--bad);
        border: 1px solid var(--border-strong);
        border-radius: 10px;
        letter-spacing: 2px;
        font-weight: 600;
        cursor: pointer;
        z-index: 9999;
        box-sizing: border-box;
        box-shadow: var(--shadow-lg, 0 6px 28px rgba(0,0,0,0.45));
    }
    #stop-action-floating:active { filter: brightness(1.15); }

    /* 移动端：本次行动累计战利品浮按钮（紧贴撤离战场下方） */
    #combat-loot-floating {
        display: none;
        position: fixed;
        margin: 0;
        padding: 10px 12px;
        font-size: 12px;
        line-height: 1.2;
        background: linear-gradient(135deg, var(--accent), #a87a3f);
        color: #1a120a;
        border: 0;
        border-radius: 10px;
        letter-spacing: 1px;
        font-weight: 700;
        cursor: pointer;
        z-index: 9999;
        box-sizing: border-box;
        box-shadow: var(--shadow-lg, 0 6px 28px rgba(0,0,0,0.45));
        font-variant-numeric: tabular-nums;
    }
    #combat-loot-floating:active { filter: brightness(1.15); }
    .topbar > #current-action .active-action-name { font-size: 11px; line-height: 1.15; }
    .topbar > #current-action .active-action-count { font-size: 10px; }
    .topbar > #current-action .progress-bar { height: 3px; margin-top: 3px; }

    .topbar > .queue-indicator-side {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: auto;
        width: auto;
        height: 32px;
        padding: 0 10px;
        font-size: 11px;
        z-index: 51;
        margin: 0;
        box-sizing: border-box;
    }

    /* 主网格：左栏 72px + 中间 1fr，两列布局 */
    /* iOS Safari：input focus 时若字号<16px 会自动放大页面且不还原 → 移动端强制 16px */
    input, textarea, select {
        font-size: 16px !important;
    }
    /* 移动端：用 100svh（Small Viewport Height）= 地址栏完全显示时的最小可见高度，永不被遮 */
    html, body {
        height: 100%;
        overflow: hidden;
    }
    #game-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100svh;
        min-height: 0;        /* 关键：覆盖 .screen { min-height: 100vh } 否则 iOS 上 100vh=含地址栏的layout viewport */
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .main-grid {
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 8px;
        min-height: 0;        /* 允许 1fr 行收缩 */
    }
    .panel { max-height: none; }
    .panel-skills {
        grid-row: 1 / 3;
        grid-column: 1;
        padding: 8px 6px;
        max-height: none;
        overflow-y: auto;
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* IE/Edge legacy */
    }
    .panel-skills::-webkit-scrollbar { display: none; }   /* WebKit/Blink */
    .panel-actions {
        grid-row: 1;
        grid-column: 2;
        max-height: none;
    }
    .panel-chat {
        grid-row: 2;
        grid-column: 2;
    }

    /* 移动端：右栏 panel-inventory 默认隐藏；选中 inventory/equipment 时翻上来覆盖 actions */
    .panel-inventory {
        display: none;
    }
    body[data-mobile-view] .panel-inventory {
        display: block;
        grid-row: 1;
        grid-column: 2;
        max-height: none;
    }
    /* 进入储囊/装配视图时，技能 row 的 .active 高亮（背景+边框+▸三角）应淡出，
       因为此时中栏显示的不是该技能的行动列表。 */
    body[data-mobile-view] .panel-skills .skill-row.active {
        background: var(--bg-card);
        border-color: var(--border);
        box-shadow: none;
    }
    body[data-mobile-view] .panel-skills .skill-row.active::after {
        display: none;
    }
    /* 移动端选中态：与 .mobile-nav-icon.active 视觉完全一致（纯 accent 边框 + bg-panel 底色），
       去掉桌面端的 inner shadow 与渐变背景，避免边框看起来"更亮"。
       特异性提升至 (0,4,0) 以胜过下方 .panel-skills .skill-row[data-skill] (0,3,0) 的边框重置。 */
    .panel-skills .skill-row[data-skill].active {
        background: var(--bg-panel);
        border-color: var(--accent);
        box-shadow: none;
    }
    .panel-skills .skill-row[data-skill].active::after {
        display: none;   /* 移动端不需要 ▸ 三角，整块 tile 已能体现选中 */
    }
    body[data-mobile-view] .panel-actions { display: none; }

    /* 左栏：图标按钮列表（移动导航 + 技能行 icon-only）*/
    .mobile-nav-extra {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border);
    }
    .mobile-nav-icon {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-s);
        padding: 10px 0;
        font-size: 22px;
        cursor: pointer;
        color: var(--text);
        transition: all 0.15s;
    }
    .mobile-nav-icon:hover,
    .mobile-nav-icon.active {
        border-color: var(--accent);
        background: var(--bg-panel);
    }

    /* 技能行：icon-only，等级与经验信息全部隐藏（长按浮窗显示） */
    .panel-skills .panel-subtitle,
    .panel-skills .skill-text,
    .panel-skills .skill-row-name,
    .panel-skills .skill-level,
    .panel-skills .exp-bar,
    .panel-skills .exp-text,
    .panel-skills .skill-group-title { display: none; }
    /* 长按浮窗内的 exp-bar/exp-text 是嵌套在 .skill-longpress-tip 里，需要重新放出 */
    .panel-skills .skill-longpress-tip .exp-bar,
    .panel-skills .skill-longpress-tip .exp-text { display: block; }

    /* 行动方块 name/lv 在移动端缩小一号 */
    .action-tile-name { font-size: 11px; }
    .action-tile-lv   { font-size: 9px; }
    /* 行动图标在移动端略缩一档（tile 本身更小，避免顶满） */
    .action-tile-icon { font-size: 36px; }
    .action-tile-icon-img { width: 48px; height: 48px; }

    /* 消耗品栏与行动方块之间留出空隙（桌面端 margin-top:auto 推到底，移动端 panel 自然撑开需显式间距）*/
    /* 消耗品栏保持推到 panel 底部（margin-top:auto 不变），同时与行动方块之间留出呼吸空间 */
    .actions-list { margin-bottom: 12px; }

    /* 区域 tab（挖掘/战斗）：窄屏自动换行，不再强制 7 列 */
    .region-tabs {
        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    }

    /* 技能列表间距与仓库 inv-grid 对齐（6px）*/
    .panel-skills .skill-list { gap: 6px; }

    /* 技能方块：复刻仓库 .inv-tile 风格 —— 正方形 + 1px 边框 + 顶部 2px 高光线
       特异性提升至 (0,3,0) 用 .panel-skills .skill-row[data-skill] 覆盖
       桌面端 .skill-row[data-cat="production"]:not(.locked) 的 border-left-color 等规则 */
    .panel-skills .skill-row[data-skill] {
        position: relative;
        aspect-ratio: 1 / 1;
        padding: 0;
        margin: 0;        /* 间距交给 .skill-list gap 控制，避免与 flex gap 叠加 */
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-s);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        transition: all 0.12s ease;
        /* iOS 触摸抑制 */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    .panel-skills .skill-row[data-skill]::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 2px;
        background: var(--border-strong);
    }
    .panel-skills .skill-row[data-skill="spore_collecting"]::before  { background: var(--spore);    }
    .panel-skills .skill-row[data-skill="log_harvesting"]::before    { background: var(--log);      }
    /* 制造类 7 技能：统一朽木金高光（与桌面端 .skill-row[data-cat="production"]:not(.locked) 的 border-left 强调色一致）*/
    .panel-skills .skill-row[data-cat="production"]::before          { background: var(--accent);   }
    /* 子节点：仅保留 icon 居中 */
    .panel-skills .skill-header { margin: 0; }
    .panel-skills .skill-name { justify-content: center; }
    .panel-skills .skill-icon {
        font-size: 28px;
        line-height: 1;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
    }
    /* 移动端左栏 tile 内的图片图标再放大一档（覆盖全局 .skill-icon-img 的 32px）*/
    .panel-skills .skill-icon .skill-icon-img {
        width: 40px;
        height: 40px;
    }

    /* 长按浮窗：fixed 定位（avoid panel-skills overflow 裁切），JS 计算 left/top */
    .panel-skills .skill-row.show-longpress .skill-longpress-tip {
        display: block;
        position: fixed;
        width: 200px;
        background: var(--bg-card);
        border: 1px solid var(--accent);
        border-radius: var(--radius-s);
        padding: 10px 12px;
        box-shadow: var(--shadow-lg);
        z-index: 9000;
        text-align: left;
        animation: skillTipFade 0.12s ease-out;
        pointer-events: none;
    }
    .panel-skills .skill-longpress-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
        font-size: 13px;
        font-weight: 600;
    }
    .panel-skills .skill-longpress-lv {
        color: var(--accent-hi);
        font-variant-numeric: tabular-nums;
    }
    .panel-skills .skill-longpress-tip .exp-bar {
        display: block;
        margin-bottom: 4px;
    }
    .panel-skills .skill-longpress-tip .exp-text {
        display: block;
        font-size: 11px;
        color: var(--text-dim);
        text-align: right;
    }
    @keyframes skillTipFade {
        from { opacity: 0; transform: translateX(-4px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    /* 顶栏 user-menu 收紧 */
    .player-pill { padding: 4px 8px; font-size: 12px; }
    .player-pill #player-name-display,
    .player-pill .player-username { display: none; }
    .player-avatar { font-size: 16px; }

    /* 行动方格：移动端一行 4 个比 5 个更舒展 */
    .actions-list { grid-template-columns: repeat(4, minmax(0, 120px)); gap: 6px; justify-content: center; }

    /* 中栏 市场 / 社交 / 指南 页正文：移动端缩小左右内边距，给内容更多宽度
       注：.social-page 原始规则在文件靠后位置，需提升特异性才能覆盖 */
    .guide-page { padding: 10px 6px; }
    .panel-actions .social-page,
    body .social-page { padding: 10px 6px; }

    /* 市场/社交/指南 顶部 tab 在移动端允许换行+紧凑化，避免按钮挤窄后文字竖排 */
    .social-tabs { flex-wrap: wrap; gap: 4px; padding-bottom: 6px; }
    .guide-tab { padding: 4px 10px; font-size: 12px; white-space: nowrap; }

    /* 市场浏览：物品网格固定每行 3 个 */
    body .market-item-grid-full { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* 社交·好友卡片：移动端把按钮组挤到第二行，避免和名字挤在一起 */
    .social-item { flex-wrap: wrap; row-gap: 6px; }
    .social-item-actions { flex-basis: 100%; justify-content: flex-end; }

    /* 组队面板：移动端缩小左右内边距 */
    body .party-panel { padding: 10px 6px; }
    body .script-panel { padding: 10px 6px; }

    .auth-card { padding: 28px 22px 20px; }
}

/* ============================================================
   装备槽：已装备态（v0.4 装配系统接入）
   ============================================================ */
.equip-slot.equipped {
    border-style: solid;
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--bg-card-2), rgba(214, 163, 92, 0.16));
    box-shadow: 0 0 0 1px var(--accent-shadow), inset 0 0 14px rgba(214, 163, 92, 0.1);
}
.equip-slot.equipped::before { background: var(--accent-hi); }
.equip-slot.equipped .equip-slot-name {
    font-size: 30px;
    line-height: 1;
    color: var(--text);
    font-weight: 400;
    letter-spacing: 0;
    filter: drop-shadow(0 0 4px var(--accent-shadow));
}
/* 工具与消耗品方块更紧凑，icon 略小一点保证显示完整 */
.tool-grid .equip-slot.equipped .equip-slot-name,
.consumable-grid .equip-slot.equipped .equip-slot-name {
    font-size: 24px;
}

/* v0.6.x：已装备态图片尺寸（外装大、工具/消耗品略小，配合上方 font-size 比例） */
.equip-slot.equipped .equip-slot-name .item-icon-img {
    width: 44px;
    height: 44px;
    vertical-align: middle;
}
.tool-grid .equip-slot.equipped .equip-slot-name .item-icon-img,
.consumable-grid .equip-slot.equipped .equip-slot-name .item-icon-img {
    width: 36px;
    height: 36px;
}

/* tool-locked 状态已在装备槽通用样式中定义（见上方 .equip-slot.tool-locked）。 */

/* ============================================================
   装备选择弹窗
   ============================================================ */
.equip-card-modal { max-width: 520px; width: min(94vw, 520px); }
/* 移动端长按选择弹窗中的物品不应触发文字选择/系统菜单 */
#equip-modal,
#equip-modal * {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
/* 输入框等需要选择的控件保留默认行为 */
#equip-modal input,
#equip-modal textarea {
    user-select: text;
    -webkit-user-select: text;
}
.equip-modal-hint {
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.6;
    margin: 0 0 14px;
}
.equip-modal-current {
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}
.equip-modal-current h4 {
    font-size: 11px;
    color: var(--text-dim);
    margin: 0 0 8px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.equip-modal-current-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
.equip-modal-thresholds {
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid var(--border, #444);
    border-radius: 6px;
    background: rgba(255,255,255,0.02);
}
.equip-modal-thresholds h4 {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--text-dim, #aaa);
    font-weight: normal;
}
.equip-modal-thresholds .threshold-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}
.equip-modal-thresholds label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-size: 13px;
}
.equip-modal-thresholds input[type=range] {
    flex: 1;
    accent-color: var(--accent, #c9a23a);
}
.equip-modal-thresholds .threshold-val {
    min-width: 38px;
    text-align: right;
    color: var(--accent, #c9a23a);
    font-variant-numeric: tabular-nums;
}
.equip-modal-section-title {
    font-size: 11px;
    color: var(--text-dim);
    margin: 0 0 8px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.equip-modal-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-height: 50vh;
    overflow-y: auto;
}
.equip-modal-empty {
    color: var(--text-mute);
    font-size: 12px;
    padding: 22px 10px;
    text-align: center;
    background: var(--bg-base);
    border: 1px dashed var(--border);
    border-radius: 8px;
    grid-column: 1 / -1;
}

.equip-modal-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text);
    text-align: center;
}
.equip-modal-tile:hover {
    border-color: var(--accent);
    background: var(--bg-card-2);
    transform: translateY(-1px);
}
.equip-modal-tile.equipped {
    flex: 1;
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--bg-card), rgba(214, 163, 92, 0.16));
    cursor: default;
}
.equip-modal-tile.equipped:hover { transform: none; }
.equip-modal-tile-icon { font-size: 28px; line-height: 1; }
.equip-modal-tile-name {
    font-size: 12px;
    color: var(--text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.equip-modal-tile-qty {
    font-size: 10px;
    color: var(--text-mute);
    letter-spacing: 0.5px;
}

.equip-modal-bonus {
    font-size: 10px;
    color: var(--good);
    background: rgba(143, 200, 164, 0.12);
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.3px;
    margin-top: 2px;
}
.equip-modal-bonus.muted {
    color: var(--text-mute);
    background: rgba(120, 120, 120, 0.12);
}

.equip-modal-unequip {
    background: linear-gradient(135deg, #6e3a3a, #8a4444);
    color: #f0e6dc;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    cursor: pointer;
    transition: filter 0.15s;
    flex-shrink: 0;
}
.equip-modal-unequip:hover { filter: brightness(1.15); }

/* ========== 行动队列（顶栏指示器） ========== */
.topbar-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;  /* 不阻止 topbar-right 的事件 */
}
.queue-indicator {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.queue-indicator[hidden] { display: none; }
.queue-indicator:hover {
    border-color: var(--accent);
    background: var(--bg-panel);
}
.queue-indicator .queue-icon { font-size: 14px; }
.queue-indicator .queue-label { color: var(--text-dim); letter-spacing: 1px; }
.queue-indicator .queue-count {
    color: var(--accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.queue-indicator.queue-full .queue-count {
    color: #d97a5b;  /* 队列满时变橙红色 */
}

/* 左栏侧边版（v0.5.x 搬迁）：横铺、自然圆角，沉到 .panel-title 上方 */
.queue-indicator-side {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-s);
    margin-bottom: 12px;
}
.queue-indicator-side[hidden] { display: none; }

/* 移动端导航按钮（桌面端默认隐藏，仅在 @media (max-width: 900px) 块内显示）*/


/* 技能行长按浮窗（默认全局隐藏，仅移动端 .show-longpress 时显示）*/
.skill-longpress-tip { display: none; }

/* 队列弹出面板（固定定位，hover 显现） */
.queue-panel {
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 12px;
    min-width: 260px;
    max-width: 320px;
    box-shadow: var(--shadow-lg, 0 6px 28px rgba(0,0,0,0.45));
    z-index: 9999;
    font-size: 13px;
}
.queue-panel-title {
    color: var(--text-dim);
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.queue-panel-limit-input {
    width: 48px;
    background: var(--bg-base);
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 12px;
    text-align: center;
}
.queue-panel-empty {
    color: var(--text-dim);
    text-align: center;
    padding: 8px 0;
    font-style: italic;
}
.queue-panel-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-base);
    border-radius: 6px;
    margin-bottom: 4px;
    position: relative;     /* 给 drop 提示用 */
    user-select: none;
    transition: background 0.12s, opacity 0.12s;
}
.queue-panel-row:last-child { margin-bottom: 0; }
.queue-panel-row.current {
    border-left: 3px solid var(--accent);
}
/* ───── 拖拽相关 ───── */
.queue-panel-row[draggable="true"] { cursor: grab; }
.queue-panel-row[draggable="true"]:active { cursor: grabbing; }
.queue-panel-row.dragging {
    opacity: 0.4;
    background: var(--bg-deep);
}
.queue-panel-row-handle {
    color: var(--text-mute);
    font-size: 11px;
    line-height: 1;
    letter-spacing: -2px;
    cursor: grab;
    user-select: none;
}
/* 放置位置指示线 */
.queue-panel-row.drop-before::before,
.queue-panel-row.drop-after::after {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
    pointer-events: none;
}
.queue-panel-row.drop-before::before { top: -3px; }
.queue-panel-row.drop-after::after  { bottom: -3px; }
.queue-panel-row-pos {
    color: var(--text-dim);
    font-size: 11px;
    min-width: 24px;
    font-variant-numeric: tabular-nums;
}
.queue-panel-row-icon { font-size: 14px; }
.queue-panel-row-name {
    flex: 1;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.queue-panel-row-target {
    color: var(--text-dim);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.queue-panel-row-remove {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-dim);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.12s;
}
.queue-panel-row-remove:hover {
    color: #d97a5b;
    border-color: #d97a5b;
}
.queue-panel-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-strong);
}
.queue-panel-clear {
    flex: 1;
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-dim);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
}
.queue-panel-clear:hover { color: #d97a5b; border-color: #d97a5b; }

/* ============================================================
   世界频道（v0.5.x）：中间栏下方独立 panel，可折叠
   ============================================================ */
.panel-chat {
    /* 复用 .panel 的边框/底色，只覆盖内边距和高度行为 */
    padding: 0;            /* 头部 / body 自管 padding */
    overflow: hidden;      /* 折叠时 body display:none，不需要 panel 滚动 */
    max-height: none;      /* 不沿用 .panel 的 100vh-88px 限制 */
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}
.panel-chat[data-collapsed="true"] {
    /* 折叠时只剩头部 */
}
.chat-dock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    user-select: none;
    flex: 0 0 auto;
}
.panel-chat[data-collapsed="true"] .chat-dock-head {
    border-bottom: none;
}
.chat-dock-title {
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.chat-dock-toggle {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    font-weight: 600;
}
.chat-dock-toggle:hover { color: var(--text-soft); }
.panel-chat[data-collapsed="true"] .chat-dock-toggle {
}
.panel-chat[data-collapsed="true"] .chat-dock-body {
    display: none;
}
.chat-dock-body {
    display: flex;
    flex-direction: column;
    height: 240px;
    flex: 0 0 auto;
}
.chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    line-height: 1.5;
}
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
}
.chat-messages::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.chat-messages { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.chat-msg {
    color: var(--text);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.chat-msg-time {
    color: var(--text-mute);
    font-size: 10px;
    margin-right: 6px;
    font-variant-numeric: tabular-nums;
}
.chat-msg-name {
    color: var(--accent-hi);
    font-weight: 600;
    margin-right: 4px;
}
.chat-msg.self .chat-msg-name {
    color: var(--mycelium);
}
.chat-msg-content {
    color: var(--text);
}
.chat-msg-system {
    color: var(--text-mute);
    font-style: italic;
    text-align: center;
    padding: 4px 0;
}
.chat-form {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    background: var(--bg-base);
    flex: 0 0 auto;
}
.chat-input {
    flex: 1 1 auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    padding: 6px 10px;
    color: var(--text);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}
.chat-input:focus {
    border-color: var(--accent);
}
.chat-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.chat-send-btn {
    background: linear-gradient(135deg, var(--accent), #b8854a);
    color: #1a1611;
    border: none;
    border-radius: var(--radius-s);
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: filter 0.15s;
}
.chat-send-btn:hover { filter: brightness(1.1); }
.chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: none;
}

/* ============================================================
   技能消耗品条（v0.5.x）：中间栏底部，跟随当前 tab 切换
   ============================================================ */
.skill-consume-bar[hidden] { display: none !important; }
/* v0.6.x 末：移动端战术 tab 隐藏消耗栏（脚本编辑界面腾出空间，桌面端不变） */
@media (max-width: 900px) {
    .skill-consume-bar.mobile-hidden { display: none !important; }
}
.skill-consume-bar {
    margin-top: auto;       /* 推到 panel-actions 底部 */
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    display: flex;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
}
.skill-consume-bar:empty {
    display: none;
}
/* 移动端长按消耗品/招式槽不应触发文字选择与系统菜单 */
.skill-consume-bar,
.skill-consume-bar * {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* 方形消耗品槽：固定尺寸，复刻 .equip-slot 视觉 */
.consume-slot {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    background: var(--bg-card);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-s);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 6px 4px 4px;
    transition: all 0.15s ease;
    position: relative;
    overflow: hidden;
    color: var(--text-soft);
    font-family: inherit;
    text-align: center;
}
.consume-slot.consume-clickable { cursor: pointer; }
.consume-slot.consume-clickable:hover {
    border-color: var(--accent);
    border-style: solid;
    background: var(--bg-card-2);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.consume-slot.active {
    border-style: solid;
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--bg-card), var(--bg-deep));
    cursor: pointer;
}
/* 食物槽 / 招式槽：装备后保持与空槽一致的背景，仅边框/角标变化 */
.consume-slot.kind-food.active,
.consume-slot.kind-move.active {
    background: var(--bg-card);
}
.consume-slot.kind-food.active:hover,
.consume-slot.kind-move.active:hover {
    background: var(--bg-card);
}
.consume-slot.bound-pending {
    /* 已绑定饮料但 buff 未激活 */
    border-style: solid;
    border-color: var(--accent);
    cursor: pointer;
}
.consume-slot.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* 顶部色条：食物 vs 饮料差异化 */
.consume-slot::before {
    content: "";
    position: absolute;
    top: 0; left: 8px; right: 8px;
    height: 2px;
    background: var(--accent);
    opacity: 0.5;
}
.consume-slot.kind-food::before { background: var(--accent-hi); opacity: 0.55; }
.consume-slot.kind-drink::before { background: var(--mycelium); opacity: 0.6; }
.consume-slot.empty::before { opacity: 0.2; }

.consume-slot-icon {
    font-size: 22px;
    line-height: 1;
}
.consume-slot-name {
    font-size: 11px;
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.consume-slot.empty .consume-slot-name { color: var(--text-dim); }
.consume-slot-time {
    position: absolute;
    right: 4px;
    bottom: 2px;
    font-size: 10px;
    color: var(--accent-hi);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    background: rgba(0, 0, 0, 0.35);
    padding: 1px 3px;
    border-radius: 3px;
}
.consume-slot-pending {
    font-size: 10px;
    color: var(--text-mute);
    font-style: italic;
    line-height: 1;
}
.consume-slot-noqty {
    font-size: 10px;
    color: var(--bad, #c97676);
    line-height: 1;
}
/* 卸下小角标（右上 ✕） */
.consume-slot-x {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border: none;
    background: rgba(0, 0, 0, 0.35);
    color: var(--text);
    border-radius: 50%;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}
.consume-slot:hover .consume-slot-x { opacity: 0.85; }
.consume-slot-x:hover { opacity: 1 !important; background: var(--bad, #c97676); }

/* 库存数量小标（左下角） */
.consume-slot-qty.empty {
    color: var(--bad, #e07a7a);
    background: rgba(180, 60, 60, 0.25);
}
.consume-slot-qty {
    position: absolute;
    left: 4px;
    bottom: 2px;
    font-size: 10px;
    line-height: 1;
    color: var(--text-mute);
    background: rgba(0, 0, 0, 0.35);
    border-radius: 3px;
    padding: 1px 4px;
    pointer-events: none;
    z-index: 1;
}

/* 注册页性别选择（v0.5.x） */
.gender-options { display: flex; gap: 12px; margin-top: 4px; }
.gender-radio {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 10px; border: 1px solid var(--border, #4a3a2a);
  border-radius: 8px; cursor: pointer; transition: all .15s;
  background: rgba(0,0,0,.15); user-select: none;
}
.gender-radio:hover { border-color: var(--accent, #c8a86b); }
.gender-radio input { accent-color: var(--accent, #c8a86b); margin: 0; }
.gender-radio:has(input:checked) {
  background: rgba(200, 168, 107, .15);
  border-color: var(--accent, #c8a86b);
}

/* 初始元素三选一卡片（御三家） */
.starter-options { display: flex; gap: 8px; margin-top: 4px; }
.starter-radio {
  flex: 1; position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 2px; padding: 10px 6px;
  border: 1px solid var(--border, #4a3a2a); border-radius: 8px;
  cursor: pointer; transition: all .15s; background: rgba(0,0,0,.15);
  user-select: none; text-align: center;
}
.starter-radio input { position: absolute; opacity: 0; pointer-events: none; }
.starter-radio:hover { border-color: var(--accent, #c8a86b); }
.starter-radio:has(input:checked) {
  background: rgba(200, 168, 107, .15);
  border-color: var(--accent, #c8a86b);
}
.starter-icon { font-size: 22px; line-height: 1; }
.starter-name { font-size: 13px; font-weight: 600; color: var(--text, #e8e2d2); }
.starter-hint { font-size: 11px; color: var(--text-soft, #b8b1a5); }

/* ============ 首次设定向导 ============ */
.setup-card { max-width: 380px; width: calc(100vw - 40px); }
.setup-card .modal-body .setup-field {
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-soft, #b8b1a5);
}
.setup-card .modal-body .setup-label {
    display: block;
    margin-bottom: 6px;
}
.setup-card .modal-head {
    gap: 10px;
}
.setup-card .setup-head-hint {
    font-size: 12px;
    color: var(--text-soft, #b8b1a5);
    text-align: right;
    flex: 1;
}
.setup-card #setup-submit {
    width: 100%;
    height: 40px;
    font-size: 13px;
}
.setup-card .modal-body input[type="text"],
.setup-card .modal-body select {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    background: var(--bg-deep);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    font-size: 14px;
    box-sizing: border-box;
    transition: border 0.15s ease, box-shadow 0.15s ease;
}
.setup-card .modal-body input[type="text"]:focus,
.setup-card .modal-body select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-shadow);
}
.setup-card .modal-actions { display: flex; justify-content: center; }

/* setup 向导：隐藏 radio 圆点，仅显示居中符号 */
.setup-card .gender-radio input[type="radio"] { display: none; }
.setup-card .gender-radio {
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 10px 0;
    font-size: 14px;
    line-height: 1;
}
.setup-card .gender-radio span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    line-height: 1;
}

/* 登录卡片左侧中部浮动孢子环 */
.auth-bubble.bL {
    left: 36px; top: 50%;
    width: 70px; height: 70px;
    transform: translateY(-50%);
    opacity: 0.07;
    animation-duration: 5.6s;
    animation-delay: -1.8s;
}

/* ── 聊天 dock：tab 切换（世界/战斗） ── */
.chat-dock-tabs { display: flex; gap: 0; align-items: center; }
.chat-dock-tab {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 13px;
    padding: 4px 12px;
    cursor: pointer;
    border-radius: 4px;
}
/* 在两个 tab 之间画一条竖向分界线 */
.chat-dock-tab + .chat-dock-tab {
    border-left: 1px solid var(--border);
    border-radius: 0 4px 4px 0;
    margin-left: 0;
}
.chat-dock-tab:first-child {
    border-radius: 4px 0 0 4px;
}
.chat-dock-tab.active {
    color: var(--text-soft);
    background: var(--bg-card);
}
.chat-dock-tab:hover { color: var(--text-soft); }

/* 私聊 DM tab：包含名字 + 未读徽标 + 关闭 × */
.chat-dock-tab-dm {
    display: inline-flex; align-items: center; gap: 6px;
    padding-right: 6px;
}
.chat-dock-tab-label {
    max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-dock-tab-badge {
    display: inline-block;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; font-size: 10px; line-height: 16px; text-align: center;
    background: var(--accent, #d97706); color: #fff; font-weight: 600;
}
.chat-dock-tab-badge[hidden] { display: none; }
.chat-dock-tab-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    color: var(--text-mute); font-size: 14px; line-height: 1;
    cursor: pointer;
}
.chat-dock-tab-close:hover { background: var(--bg-card-2, #2a2a2a); color: #fff; }

/* 战斗日志条目 */
.battle-log-list { padding: 6px 8px; }
.battle-entry {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 6px 10px;
    align-items: center;
    padding: 6px 8px;
    margin-bottom: 4px;
    border-radius: 4px;
    border-left: 3px solid var(--border-strong);
    background: var(--bg-card);
    font-size: 12px;
    cursor: pointer;
}
.battle-entry:hover { background: var(--bg-hover); }
.battle-entry.win  { border-left-color: #5acf85; }
.battle-entry.lose { border-left-color: #cf5a5a; }
.battle-entry.draw { border-left-color: #c9a45e; }
.battle-entry-icon { font-size: 18px; }
.battle-entry-main { display: flex; flex-direction: column; gap: 2px; }
.battle-entry-name { color: var(--text-soft); font-weight: 600; }
.battle-entry-meta { color: var(--text-mute); font-size: 11px; }
.battle-entry-result {
    text-align: right;
    color: var(--text-mute);
    font-size: 11px;
    line-height: 1.5;
}
.battle-entry-result.win  { color: #7fdba0; }
.battle-entry-result.lose { color: #e07a7a; }

/* hidden 在 display:flex 元素上被覆盖；用 attribute 选择器强制 */
[data-chat-pane][hidden] { display: none !important; }

/* 战斗详情弹窗 */
.combat-rounds { margin-top: 8px; }
.combat-round-block {
    margin-bottom: 8px;
    padding: 6px 10px;
    background: var(--bg-card);
    border-radius: 4px;
    border-left: 2px solid var(--border-strong);
}
.combat-round-head {
    color: var(--text-dim);
    font-size: 11px;
    margin-bottom: 3px;
    font-weight: 600;
}
.combat-round-line {
    font-size: 12px;
    color: var(--text-soft);
    line-height: 1.65;
    padding: 1px 0;
}

/* 战斗详情弹窗：固定尺寸 + 内部滚动 */
#battle-modal .modal-card {
    max-width: 520px;
    width: min(92vw, 520px);
    max-height: min(86vh, 720px);
    display: flex;
    flex-direction: column;
}
#battle-modal .modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
#battle-modal .modal-body::-webkit-scrollbar       { width: 6px; }
#battle-modal .modal-body::-webkit-scrollbar-track { background: transparent; }
#battle-modal .modal-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
#battle-modal .modal-body::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* 战斗 HP/MP 条（替换 progress-bar 位置） */
.combat-bars { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.combat-bar-label { font-size: 10px; color: var(--text-dim); display: flex; justify-content: space-between; }
.combat-bar-track {
    height: 8px; background: var(--bg-card);
    border-radius: 4px; overflow: hidden;
}
.combat-bar-fill {
    height: 100%; transition: width 0.3s ease;
    background: linear-gradient(90deg,#5acf85,#3aa05d);
}
.combat-bar-fill.mp { background: linear-gradient(90deg,#5a9fcf,#3a6da0); }

/* hidden 在 display:flex 元素上被覆盖；强制 */
#combat-bars[hidden], #combat-travel-bar[hidden] { display: none !important; }

/* 战斗招式槽（v0.6） */
.battle-move-divider {
    width: 1px; align-self: stretch; min-height: 48px;
    background: var(--border-dim, #2a2a36); margin: 0 4px;
}
/* 移动端战斗消耗品栏：消耗品 + 招式槽 上下两行 */
@media (max-width: 1100px) {
    .skill-consume-bar { flex-wrap: wrap; row-gap: 8px; }
    .battle-move-divider {
        flex-basis: 100%;
        width: 100%;
        height: 1px;
        min-height: 0;
        align-self: auto;
        margin: 4px 0;
        background: var(--border-dim, #2a2a36);
    }
}
.consume-slot.kind-move { border-color: rgba(120, 200, 255, 0.5); }
.consume-slot.kind-move.empty { border-style: dashed; opacity: 0.7; }
.consume-slot.kind-move-focus {
    border-color: rgba(255, 200, 80, 0.7);
    background: linear-gradient(135deg, rgba(255,200,80,0.12), rgba(255,140,40,0.08));
    cursor: not-allowed;
}

/* 招式选择弹窗 */
.move-picker-content { width: min(520px, 92vw); max-height: 80vh; display: flex; flex-direction: column; }
.move-picker-list { flex: 1; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.move-picker-empty { color: var(--text-dim); padding: 24px; text-align: center; }
.move-picker-item {
    display: flex; gap: 10px; padding: 8px 10px; border-radius: 6px;
    background: var(--bg-soft, #1a1a24); border: 1px solid var(--border-dim, #2a2a36);
    cursor: pointer; transition: background 0.15s;
}
.move-picker-item:hover { background: var(--bg-hover, #232333); }
.move-picker-icon { font-size: 24px; width: 32px; text-align: center; }
.move-picker-main { flex: 1; min-width: 0; }
.move-picker-name { font-weight: 600; font-size: 13px; }
.move-picker-tag { font-size: 10px; color: var(--text-dim); margin-left: 6px; padding: 1px 6px; background: rgba(120,200,255,0.12); border-radius: 8px; }
.move-picker-stats { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.move-picker-desc { font-size: 11px; color: var(--text-dim); margin-top: 2px; opacity: 0.85; }

/* ============ 战斗 Arena（中栏宝可梦风格） ============ */
.battle-arena[hidden] { display: none !important; }
.battle-arena {
    flex: 1 1 auto;
    display: grid;
    grid-template-rows: 1fr 4px 1fr auto auto;
    gap: 8px;
    padding: 10px;
    background: linear-gradient(180deg, #1b2230 0%, #232c3a 50%, #2a3b2e 100%);
    border: 1px solid var(--border-strong, #3a4252);
    border-radius: 10px;
    min-height: 360px;
    overflow: hidden;
}
/* 移动端：arena 高度不够时，敌我状态栏会被 1fr 压成一团；
   给两侧 min-height + 允许整体纵向滚动，避免重叠
   注意：放在通用规则之后才能覆盖下方 .battle-arena-enemy { min-height: 0 } */
@media (max-width: 1100px) {
    .battle-arena {
        min-height: 0;
        grid-template-rows: auto 4px auto auto auto;
        overflow-y: auto;
    }
    .battle-arena-enemy,
    .battle-arena-self {
        min-height: 72px;
    }
    .ba-portrait { width: 52px; height: 52px; font-size: 36px; }
}
.battle-arena-enemy, .battle-arena-self {
    display: flex;
    align-items: center;
    min-height: 0;
}
.battle-arena-log {
    height: 130px;
    flex: 0 0 130px;
}
/* 移动端覆盖：放在通用规则之后才能生效 */
@media (max-width: 1100px) {
    .battle-arena-enemy,
    .battle-arena-self {
        min-height: 72px !important;
    }
}
.battle-arena-bar {
    flex: 0 0 auto;
}
.battle-arena-enemy { justify-content: flex-end; }
.battle-arena-self  { justify-content: flex-start; }
.battle-arena-field {
    height: 2px;
    background: linear-gradient(90deg, transparent, #6a7a55 20%, #6a7a55 80%, transparent);
    box-shadow: 0 0 8px rgba(120, 180, 100, 0.3);
}
.ba-side { display: flex; align-items: center; gap: 12px; max-width: 92%; }
.ba-side-enemy { flex-direction: row; }
.ba-side-self  { flex-direction: row; }
.ba-portrait {
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    font-size: 44px;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 70%);
    border-radius: 50%;
    flex-shrink: 0;
}
.ba-portrait-enemy { filter: drop-shadow(0 4px 8px rgba(255,80,80,0.25)); }
.ba-portrait-img {
    background-color: #1a1c24;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid var(--accent, #6c8cff);
    box-shadow: 0 4px 10px rgba(108,140,255,0.25);
}
.ba-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ba-row1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ba-name { font-weight: 600; font-size: 14px; color: #e6e6e6; }
.ba-lv   { font-size: 11px; color: #c0c8d0; background: rgba(255,255,255,0.08); padding: 1px 6px; border-radius: 8px; }
.ba-elem { font-size: 11px; color: #cfe; background: rgba(80,160,120,0.18); padding: 1px 6px; border-radius: 8px; }
.ba-bar {
    position: relative; height: 14px; border-radius: 7px;
    background: rgba(0,0,0,0.35); overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
}
.ba-bar-fill { height: 100%; transition: width 0.4s ease; }
.ba-bar-hp .ba-bar-fill { background: linear-gradient(90deg, #5fcf6a, #2fa83a); }
.ba-bar-mp .ba-bar-fill { background: linear-gradient(90deg, #6cb0ff, #2f78d6); }
.ba-bar-text {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    letter-spacing: 0.5px;
}
.ba-empty, .ba-log-empty {
    color: #88909e; font-size: 13px; text-align: center; padding: 24px 0;
    width: 100%;
}

.battle-arena-log {
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    padding: 8px 10px;
    min-height: 70px;
    max-height: 130px;
    overflow-y: auto;
    font-size: 12px;
    line-height: 1.55;
    color: #d8dde6;
}
.ba-log-head { color: #aab3c0; font-size: 11px; margin-bottom: 4px; letter-spacing: 1px; }
.ba-log-line { padding: 1px 0; }

.battle-arena-bar {
    display: flex; gap: 8px; align-items: stretch;
    padding-top: 4px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.ba-bar-group { display: flex; gap: 6px; flex: 1 1 0; min-width: 0; }
.ba-bar-sep { width: 1px; background: rgba(255,255,255,0.08); margin: 0 2px; }
/* 移动端：arena 底部栏改为上下两行（招式 / 消耗品），分隔线变横向 */
@media (max-width: 1100px) {
    .battle-arena-bar { flex-wrap: wrap; row-gap: 6px; overflow: visible; }
    .battle-arena-bar .ba-bar-group { flex-basis: 100%; }
    .battle-arena-bar .ba-bar-sep {
        flex-basis: 100%;
        width: 100%;
        height: 1px;
        margin: 2px 0;
    }
}
.ba-cell {
    flex: 1; min-width: 0;
    aspect-ratio: 1 / 1;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 4px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: 11px; color: #cfd4dc;
    transition: all 0.2s;
    overflow: hidden;
}
.ba-cell-empty { opacity: 0.35; }
.ba-cell-active {
    border-color: #ffd966;
    background: rgba(255, 217, 102, 0.12);
    box-shadow: 0 0 8px rgba(255, 217, 102, 0.4);
}
.ba-cell-icon { font-size: 18px; }

.ba-stages {
    display: flex; flex-wrap: wrap; gap: 3px;
    margin-top: 4px;
    min-height: 18px;
}
.ba-stage {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 1px 5px;
    border-radius: 8px;
    font-size: 10px;
    line-height: 1.4;
    border: 1px solid rgba(255,255,255,0.12);
}
.ba-stage-up {
    color: #7fdba0;
    background: rgba(127, 219, 160, 0.12);
    border-color: rgba(127, 219, 160, 0.4);
}
.ba-stage-down {
    color: #e07a7a;
    background: rgba(224, 122, 122, 0.12);
    border-color: rgba(224, 122, 122, 0.4);
}
.ba-stage-name { font-weight: 600; }
.ba-stage-arrow { letter-spacing: -1px; }
.ba-cell-qty {
    font-size: 10px;
    color: var(--text-soft, #cfd4dc);
    background: rgba(0,0,0,0.25);
    padding: 0 4px;
    border-radius: 3px;
    line-height: 1.4;
}
.ba-cell-qty.empty {
    color: var(--bad, #e07a7a);
    background: rgba(180, 60, 60, 0.25);
}
.ba-cell-qty.active {
    color: #ffd966;
    background: rgba(255, 217, 102, 0.18);
}
.ba-cell-name {
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 抗排异剂目标列表 */
.item-anti-targets { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.item-anti-target {
    display:flex; align-items:center; gap:10px;
    padding:8px 12px; border:1px solid var(--border-color, #444);
    background: rgba(255,255,255,0.04); color: inherit;
    border-radius:6px; cursor:pointer; text-align:left;
    transition: background .15s, border-color .15s;
}
.item-anti-target:hover:not(:disabled) {
    background: rgba(120,200,255,0.12); border-color:#7ad;
}
.item-anti-target:disabled, .item-anti-target.immune {
    opacity:0.55; cursor:not-allowed;
}
.item-anti-target .anti-target-icon { font-size:1.4em; }
.item-anti-target .anti-target-info { display:flex; flex-direction:column; flex:1; }
.item-anti-target .anti-target-name { font-weight:600; }
.item-anti-target .anti-target-slot { font-size:0.85em; opacity:0.7; }
.item-anti-target .anti-target-tag { font-size:0.85em; }

/* ============ 强化面板（v0.6.x） ============ */
/* 强化面板需要占满 actions-list 整行（actions-list 本身是 5 列 grid） */
/* 强化页：JS 在进入时给 #actions-list 加 .as-enhance-block，
   退出时移除。用普通 class 选择器避免 :has() 在旧 WebView 下不生效。 */
#actions-list.as-enhance-block { display: block !important; }
#actions-list.as-guide-block { display: block !important; max-width: none !important; width: 100%; }
.enhance-panel {
    display: flex; flex-direction: column; gap: 12px; padding: 12px;
    grid-column: 1 / -1;   /* 兜底：即便父级仍是 grid 也会跨满 */
    width: 100%;
    box-sizing: border-box;
}
.enh-slots { display: flex; gap: 12px; }
.enh-slot {
    flex: 1; min-height: 96px; padding: 12px;
    background: var(--surface-1); border: 1px dashed var(--border);
    border-radius: 8px; cursor: pointer; position: relative;
    transition: border-color .15s;
}
.enh-slot:hover { border-color: var(--accent, #6c8cff); }
.enh-slot-title { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.enh-slot-empty { font-size: 12px; color: var(--text-mute, #888); padding: 10px 0; text-align: center; }
.enh-slot-item { display: flex; align-items: center; gap: 8px; }
.enh-slot-icon { font-size: 28px; }
.enh-slot-name { font-size: 13px; color: var(--text-bright, #e8e8f0); }
.enh-lv { color: #ffd86b; font-weight: 600; }
.enh-slot-clear {
    position: absolute; top: 4px; right: 4px;
    background: transparent; border: none; color: var(--text-dim);
    cursor: pointer; font-size: 14px; padding: 2px 6px;
}
.enh-slot-clear:hover { color: #e08a8a; }
.enh-info { background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.enh-info:empty { display: none; }
.enh-info-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.enh-label { color: var(--text-dim); }
.enh-value { color: var(--text-bright, #e8e8f0); font-weight: 500; }
.enh-rate { color: #6bd86b; }
.enh-info-rule { padding: 8px 0; font-size: 12px; }
.enh-rule-ok { color: #6bd86b; }
.enh-rule-warn { color: #e0c060; }
.enh-info-max { text-align: center; color: #ffd86b; font-weight: 600; padding: 16px 0; }
.enh-mats-title { font-size: 12px; color: var(--text-dim); margin-top: 8px; }
.enh-mats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.enh-mat-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: linear-gradient(160deg, #2b2418, #1f1a13);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-soft);
    transition: border-color .15s, color .15s;
}
.enh-mat-pill:hover { border-color: var(--accent); color: var(--accent-hi); }
.enh-mat-pill.enh-mat-lack {
    border-color: #b86a6a;
    color: #e08a8a;
    background: linear-gradient(160deg, #2a1818, #1f1212);
}
.enh-mat-pill .enh-mat-icon { font-size: 14px; }
.enh-mat-pill .enh-mat-name { letter-spacing: .5px; }
.enh-mat-pill .enh-mat-qty {
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    padding-left: 4px;
    border-left: 1px solid var(--border);
}
.enh-mat-pill.enh-mat-lack .enh-mat-qty { color: #e08a8a; border-left-color: #b86a6a; }
.enh-mat-lack .enh-mat-qty { color: #e08a8a; }
.enh-actions { display: flex; justify-content: center; gap: 8px; align-items: center; flex-wrap: wrap; row-gap: 8px; }
.enh-actions .enh-mode,
.enh-actions .enh-count {
    height: 34px;
    padding: 0 10px;
    background: var(--bg-base, #1a1610);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.enh-actions .enh-mode {
    cursor: pointer;
    padding-right: 28px;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
                      linear-gradient(135deg, var(--accent) 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.enh-actions .enh-mode option {
    background: var(--bg-panel);
    color: var(--text);
}
.enh-actions .enh-count {
    width: 64px; text-align: center;
    -moz-appearance: textfield;
}
.enh-actions .enh-count::-webkit-outer-spin-button,
.enh-actions .enh-count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.enh-actions .enh-mode:hover,
.enh-actions .enh-count:hover { border-color: var(--border-strong); }
.enh-actions .enh-mode:focus,
.enh-actions .enh-count:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-shadow);
}
.enh-actions .enh-btn-go {
    height: 34px; padding: 0 14px;
    border-radius: 6px; cursor: pointer;
    border: 1px solid var(--border-strong); font-size: 13px; font-family: inherit;
    background: linear-gradient(160deg, #2b2418, #1f1a13);
    color: var(--text-soft);
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
    letter-spacing: 1px;
    white-space: nowrap;
    flex: 0 0 auto;
    min-width: max-content;
}
/* 让两个按钮单独成行 */
.enh-actions .enh-row-break { flex-basis: 100%; height: 0; }
.enh-actions .enh-btn-go:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent-hi);
    box-shadow: 0 0 0 2px var(--accent-shadow);
}
.enh-actions .enh-btn-now {
    background: linear-gradient(135deg, var(--accent), #b8854a);
    color: #1a1610;
    border-color: var(--accent);
    font-weight: 600;
}
.enh-actions .enh-btn-now:hover:not(:disabled) {
    color: #1a1610;
    filter: brightness(1.08);
    box-shadow: 0 2px 10px var(--accent-shadow);
}
.enh-actions .enh-btn-go:disabled {
    opacity: .35;
    cursor: not-allowed;
    box-shadow: none;
}
.enh-btn-go {
    padding: 10px 32px; font-size: 14px;
    background: var(--accent, #6c8cff); color: #fff;
    border: none; border-radius: 6px; cursor: pointer;
}
.enh-btn-go:disabled { background: var(--surface-2, #2a2d3a); color: var(--text-mute, #888); cursor: not-allowed; }
.enh-pick-modal { width: 560px; max-width: 92vw; max-height: 76vh; }
/* picker 遮罩与卡片：项目其余地方用 .modal-backdrop/.modal-card，
   这里的 .modal-mask/.modal 是 picker 专用，必须自带 fixed 遮罩定位，
   否则会以普通块元素流到页面底部，看起来像"覆盖整页/点不动" */
.modal-mask {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(15, 13, 10, 0.78);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.modal-mask > .modal {
    background: linear-gradient(160deg, var(--bg-panel), var(--bg-base));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-l, 12px);
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
    display: flex; flex-direction: column;
    max-height: 90vh; overflow: hidden;
}
.modal-mask > .modal > .modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--border);
    color: var(--accent); font-weight: 600; letter-spacing: 2px;
}
.enh-pick-list {
    max-height: 60vh; overflow-y: auto; padding: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    align-content: start;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
.enh-pick-list::-webkit-scrollbar         { width: 6px; }
.enh-pick-list::-webkit-scrollbar-track   { background: transparent; margin: 6px 0; }
.enh-pick-list::-webkit-scrollbar-thumb   {
    background: var(--border-strong);
    border-radius: 3px;
}
.enh-pick-list::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.enh-pick-list .enh-pick-empty { grid-column: 1 / -1; }
.enh-pick-item {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto auto;
    place-items: center;
    text-align: center;
    aspect-ratio: 1 / 1;
    padding: 6px 4px 7px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
}
.enh-pick-item::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--border-strong);
    border-top-left-radius: 10px; border-bottom-left-radius: 10px;
    transition: background 0.18s;
}
.enh-pick-item:hover {
    border-color: var(--border-strong);
    background: var(--bg-card-2);
    transform: translateY(-1px);
}
.enh-pick-item:hover::before { background: var(--accent); }
.enh-pick-icon { font-size: 28px; line-height: 1; }
.enh-pick-name {
    font-size: 12px; font-weight: 500; color: var(--text);
    line-height: 1.2; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 100%; padding: 0 4px;
}
.enh-pick-cat {
    font-size: 10px; color: var(--text-dim);
    padding: 1px 6px; border-radius: 999px;
    background: var(--surface-2, #2a2d3a);
}
.enh-pick-empty { padding: 24px; text-align: center; color: var(--text-mute, #888); }

/* ============ 技能图标（emoji ↔ jpg 通用基线） ============ */
.skill-icon-img {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.25em;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35);
    background: rgba(255,255,255,0.04);
}
.panel-skills .skill-icon .skill-icon-img,
.skill-icon .skill-icon-img {
    width: 32px;
    height: 32px;
    vertical-align: middle;
}
.active-action-skill .skill-icon-img,
#action-modal-title .skill-icon-img {
    width: 1.25em;
    height: 1.25em;
}

/* ============ 物品图标（emoji ↔ png 通用基线） ============ */
/* 与 emoji 字号匹配的等宽内联图标，可在仓库/feed/弹窗等处替换 emoji */
.item-icon-img {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.25em;
    object-fit: contain;
    display: inline-block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* ─── 组队面板（v0.7） ─── */
/* ─── 组队面板（v0.6.x，主题琥珀风） ─── */
.party-panel {
    padding: 14px 18px;
    display: flex; flex-direction: column; gap: 16px;
    color: var(--text);
}
.party-panel[hidden] { display: none !important; }

.party-section {
    display: flex; flex-direction: column; gap: 8px;
}
.party-section h3 {
    margin: 0 0 4px 0;
    font-size: 13px;
    color: var(--accent);
    letter-spacing: 0.5px;
    font-weight: 600;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--accent-shadow);
}
.party-empty {
    color: var(--text-dim);
    opacity: 0.7;
    font-size: 12px;
    padding: 8px 2px;
    font-style: italic;
}
.party-meta {
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 4px;
}

.party-members,
.party-invites {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.party-members li,
.party-invites li {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: linear-gradient(180deg, var(--bg-card), var(--bg-panel));
    border: 1px solid var(--accent-shadow);
    border-radius: 6px;
    transition: border-color 0.15s, transform 0.1s;
}
.party-members li:hover,
.party-invites li:hover {
    border-color: var(--accent);
    transform: translateX(1px);
}
.party-member-name { font-weight: 500; color: var(--text); font-size: 13px; }
.party-member-id { color: var(--text-dim); font-size: 11px; opacity: 0.75; }
.party-role-leader {
    background: linear-gradient(135deg, var(--accent), #a87a3f);
    color: #1a120a;
    padding: 2px 8px; border-radius: 8px;
    font-size: 10px; font-weight: 700;
    margin-left: auto;
    box-shadow: 0 1px 3px var(--accent-shadow);
}

.party-actions {
    display: flex; gap: 8px; align-items: center;
    flex-wrap: wrap; margin-top: 4px;
}
.party-invite-form { display: flex; gap: 8px; flex: 1; min-width: 200px; }
.party-invite-form input {
    flex: 1; min-width: 0;
    padding: 8px 12px;
    background: var(--bg-deep); color: var(--text);
    border: 1px solid var(--accent-shadow);
    border-radius: 6px; font-size: 13px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.party-invite-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-shadow);
}
.party-invite-form input::placeholder { color: var(--text-dim); opacity: 0.6; }
.party-invite-form button {
    padding: 8px 18px;
    background: linear-gradient(135deg, var(--accent), #a87a3f);
    color: #1a120a; font-weight: 700;
    border: 0; border-radius: 6px;
    cursor: pointer; font-size: 13px;
    box-shadow: 0 2px 6px var(--accent-shadow);
    transition: box-shadow 0.15s, transform 0.1s;
}
.party-invite-form button:hover {
    background: linear-gradient(135deg, var(--accent-hi), var(--accent));
    box-shadow: 0 3px 10px var(--accent-shadow);
}
.party-invite-form button:active { transform: translateY(1px); }

#party-leave-btn,
.party-danger {
    padding: 8px 16px;
    background: linear-gradient(180deg, #5a2a22, #3d1d18);
    color: #f0c0b3;
    border: 1px solid rgba(196, 74, 58, 0.4);
    border-radius: 6px;
    font-size: 13px; cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
#party-leave-btn:hover,
.party-danger:hover {
    background: linear-gradient(180deg, #7a3a30, #5a2a22);
    border-color: #c44a3a;
}

.party-invite-info { flex: 1; font-size: 13px; color: var(--text); }
.party-accept-btn,
.party-decline-btn {
    padding: 4px 12px; font-size: 12px;
    border-radius: 4px; cursor: pointer;
    border: 1px solid var(--accent-shadow);
    transition: background 0.15s, border-color 0.15s;
}
.party-accept-btn {
    background: linear-gradient(135deg, var(--accent), #a87a3f);
    color: #1a120a; font-weight: 700;
    border-color: transparent;
}
.party-accept-btn:hover {
    background: linear-gradient(135deg, var(--accent-hi), var(--accent));
}
.party-decline-btn {
    background: var(--bg-deep); color: var(--text);
}
.party-decline-btn:hover {
    background: var(--bg-card-2);
    border-color: var(--accent);
}


/* ─── 2v2 战斗 arena（v0.7） ─── */
.battle-arena.is-2v2 .battle-arena-enemy {
    justify-content: flex-end;
    align-items: center;
}
.battle-arena.is-2v2 .battle-arena-self {
    justify-content: flex-start;
    align-items: center;
}
.battle-arena.is-2v2 .ba2-row {
    display: flex; align-items: center; gap: 8px; padding: 6px 4px;
    flex: 0 0 auto;
    max-width: 480px; width: 100%;
}
.battle-arena.is-2v2 .ba2-row.ba2-enemies { justify-content: space-between; }
.battle-arena.is-2v2 .ba2-row.ba2-self    { justify-content: space-between; }
.ba2-portrait { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.ba2-portrait.ba-portrait-img {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid var(--accent, #6c8cff);
    box-shadow: 0 2px 6px rgba(108,140,255,0.3);
}
.ba2-unit { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ba2-name { font-size: 12px; color: var(--text, #ddd); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba2-elem { margin-top: 1px; }

/* ─── 社交（v0.6.x，中栏，星球主题色板） ─── */
.skill-row.social-row { position: relative; }
.social-row-badge {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    min-width: 16px; height: 16px; padding: 0 5px;
    border-radius: 8px;
    background: linear-gradient(135deg, #c44a3a, #8a2a1f);
    color: #fff7e6;
    font-size: 10px; line-height: 16px; text-align: center; font-weight: 700;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
#actions-list.as-social-block { display: block !important; max-width: none !important; width: 100%; min-width: 0; overflow-x: hidden; }

.social-page {
    padding: 14px 18px; color: var(--text); line-height: 1.5;
    overflow-y: auto; overflow-x: hidden;
    max-height: 100%; height: 100%;
    display: flex; flex-direction: column; gap: 12px;
    min-width: 0; box-sizing: border-box;
}
.social-tabs {
    display: flex; gap: 8px;
    border-bottom: 1px solid var(--accent-shadow);
    padding-bottom: 8px; flex: none;
}
/* 复用 guide-tab 类型的按钮样式但保持本地标识 */
.social-tab-badge {
    margin-left: 6px; padding: 0 6px;
    background: linear-gradient(135deg, #c44a3a, #8a2a1f); color: #fff7e6;
    border-radius: 8px; font-size: 10px; line-height: 14px; font-weight: 700;
    display: inline-block; vertical-align: middle;
}
.social-body {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; gap: 12px;
    min-width: 0;
}

.social-add-row { display: flex; gap: 8px; min-width: 0; }
.social-add-row input {
    flex: 1; min-width: 0; padding: 8px 12px;
    background: var(--bg-deep);
    color: var(--text);
    border: 1px solid var(--accent-shadow);
    border-radius: 6px; font-size: 13px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.social-add-row input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-shadow);
}
.social-add-row input::placeholder { color: var(--text-dim, #8a7d6b); opacity: 0.65; }
.social-add-row button {
    padding: 8px 18px;
    background: linear-gradient(135deg, var(--accent), #a87a3f);
    color: #1a120a; font-weight: 700;
    border: 0; border-radius: 6px; cursor: pointer; font-size: 13px;
    box-shadow: 0 2px 6px var(--accent-shadow);
    transition: transform 0.1s, box-shadow 0.15s;
}
.social-add-row button:hover {
    background: linear-gradient(135deg, var(--accent-hi), var(--accent));
    box-shadow: 0 3px 10px var(--accent-shadow);
}
.social-add-row button:active { transform: translateY(1px); }

.social-feedback { font-size: 12px; color: var(--text-dim); min-height: 14px; }
.social-feedback.error { color: #e8836b; }
.social-feedback.success { color: #9bcf6a; }

.social-section-title {
    font-size: 12px;
    color: var(--accent);
    margin-top: 6px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--accent-shadow);
    letter-spacing: 0.5px;
    font-weight: 600;
}

.social-list { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.social-list:empty::before {
    content: "（无）"; color: var(--text-dim); opacity: 0.5;
    font-size: 12px; padding: 6px 2px; font-style: italic;
}
.social-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: linear-gradient(180deg, var(--bg-card), var(--bg-panel));
    border: 1px solid var(--accent-shadow);
    border-radius: 6px;
    transition: border-color 0.15s, transform 0.1s;
    min-width: 0; flex-wrap: wrap;
}
.social-item:hover {
    border-color: var(--accent);
}
.social-item-name {
    flex: 1; min-width: 0; font-size: 13px;
    color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-weight: 500;
}
.social-item-status {
    font-size: 11px; padding: 2px 8px; border-radius: 10px;
    background: var(--bg-deep);
    color: var(--text-dim);
    border: 1px solid var(--accent-shadow);
}
.social-item-status.online {
    background: rgba(120, 180, 80, 0.15);
    color: #9bcf6a;
    border-color: rgba(120, 180, 80, 0.4);
}
.social-item-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.social-item-actions button {
    padding: 4px 10px; font-size: 11px;
    background: var(--bg-deep);
    color: var(--text);
    border: 1px solid var(--accent-shadow);
    border-radius: 4px; cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.social-item-actions button:hover {
    background: var(--bg-card-2);
    border-color: var(--accent);
}
.social-item-actions button.primary {
    background: linear-gradient(135deg, var(--accent), #a87a3f);
    color: #1a120a; font-weight: 700;
    border-color: transparent;
}
.social-item-actions button.primary:hover {
    background: linear-gradient(135deg, var(--accent-hi), var(--accent));
}
.social-item-actions button.danger {
    background: linear-gradient(180deg, #5a2a22, #3d1d18);
    color: #f0c0b3;
    border-color: rgba(196, 74, 58, 0.4);
}
.social-item-actions button.danger:hover {
    background: linear-gradient(180deg, #7a3a30, #5a2a22);
    border-color: #c44a3a;
}


/* ─── 市场系统（v0.6） ─────────────────────────────────────────── */
.market-browse-search {
    display: flex; gap: 8px; margin: 8px 0 12px;
}
.market-browse-search input {
    flex: 1; padding: 6px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-base); color: var(--text);
}
.market-browse-search button {
    padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--accent); color: #fff; cursor: pointer;
}
.market-browse-search button:hover { background: var(--accent-hi); }

.market-item-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 6px; margin-bottom: 12px; max-height: 200px; overflow-y: auto;
}
.market-item-tile {
    display: flex; flex-direction: column; align-items: center;
    padding: 6px 4px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-panel); cursor: pointer;
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    transition: background 0.15s, border-color 0.15s;
}
.market-item-tile:hover { background: var(--bg-elev); }
.market-item-tile.active { border-color: var(--accent); background: var(--bg-elev); }
.market-item-icon { font-size: 22px; }
.market-item-name {
    font-size: 11px; color: var(--text-dim); text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;
}

.market-depth { margin-top: 8px; }
.market-depth-title {
    font-size: 14px; font-weight: 600; color: var(--text);
    padding: 6px 0; border-bottom: 1px solid var(--border); margin-bottom: 8px;
}
.market-section-title {
    font-size: 12px; color: var(--text-dim); margin: 10px 0 4px;
    text-transform: none;
}
.market-table { display: flex; flex-direction: column; gap: 2px; }
.mkt-row {
    display: grid; grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr;
    align-items: center; gap: 6px;
    padding: 4px 8px; border-radius: 4px; font-size: 12px;
}
.mkt-row:hover:not(.mkt-row-head) { background: var(--bg-elev); }
.mkt-row-head { color: var(--text-dim); font-size: 11px; padding: 2px 8px; }
.mkt-row-inst { grid-template-columns: 1fr 0.5fr 0.6fr 0.6fr 0.7fr 0.9fr; }
.mkt-row-mine { grid-template-columns: 0.8fr 1.4fr 1fr 0.8fr 0.7fr 0.7fr; }
.mkt-row-trade { grid-template-columns: 0.5fr 1.5fr 0.9fr 0.6fr 1fr 1.2fr; }

.market-price { font-family: monospace; color: #d4a017; }
.market-side-sell { color: #d44; font-weight: 600; }
.market-side-buy  { color: #4a4; font-weight: 600; }
.market-pos { color: #4a4; }
.market-neg { color: #d44; }
.market-dim { color: var(--text-dim); font-size: 11px; }

.market-empty, .market-empty-row, .market-depth-loading {
    color: var(--text-dim); padding: 12px; text-align: center; font-style: italic;
}

/* 我的挂单 tab 顶部的槽位提示 */
.market-slot-info {
    color: var(--text-dim); font-size: 12px;
    padding: 6px 4px 10px; text-align: right;
}
.market-slot-info b { color: var(--text); }

.mkt-row button {
    padding: 3px 10px; border-radius: 4px; border: 1px solid var(--border);
    background: var(--bg-panel); cursor: pointer; font-size: 11px;
}
.mkt-row button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.mkt-row button.primary:hover { background: var(--accent-hi); }
.mkt-row button.danger  { background: #a44;  color: #fff; border-color: #a44; }
.mkt-row button.danger:hover  { opacity: 0.85; }

/* 挂单弹窗 */
.market-list-card { min-width: 320px; max-width: 420px; }
.market-list-tabs, .market-list-modes {
    display: flex; gap: 6px; margin-bottom: 10px;
}
.market-list-tabs button, .market-list-modes button {
    flex: 1; padding: 6px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-panel); cursor: pointer;
    color: var(--text); font-size: 12px;
}
.market-list-tabs button.active, .market-list-modes button.active {
    background: var(--accent); color: #fff; border-color: var(--accent);
}
.market-list-body {
    display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;
}
.market-list-body label {
    display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim);
}
.market-list-body input, .market-list-body select {
    padding: 6px 8px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-base); color: var(--text);
    font-size: 13px;
}
.market-list-hint {
    font-size: 11px; color: var(--text-dim); padding: 4px 0;
}

.market-list-title {
    font-size: 16px; font-weight: 700; color: var(--accent);
    margin-bottom: 12px; text-align: center;
    padding-bottom: 10px; border-bottom: 1px dashed var(--border);
}
.market-list-actions {
    display: flex; gap: 8px; justify-content: flex-end;
    margin-top: 12px;
}
.market-list-actions button {
    padding: 6px 18px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
    font-size: 13px;
}
.market-list-actions button.primary {
    background: linear-gradient(135deg, var(--accent), #a87a3f);
    color: #1a120a; font-weight: 700; border: 0;
    box-shadow: 0 2px 6px var(--accent-shadow);
}
.market-list-actions button.primary:hover {
    background: linear-gradient(135deg, var(--accent-hi), var(--accent));
}

.market-detail-card { max-width: 720px; }
.market-detail-body {
    max-height: 60vh; overflow-y: auto; padding-right: 4px;
    margin-bottom: 12px;
}
.market-detail-body .market-depth-title { display: none; }  /* 标题已在弹窗顶部 */
.market-item-grid-full {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    max-height: none; overflow-y: visible;
}

.market-cat-tabs {
    margin: 4px 0 10px;
}

/* 市场详情弹窗：左右两列布局 */
.market-depth-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.market-col {
    display: flex; flex-direction: column; gap: 6px;
    min-width: 0;
}
.market-col-head {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--accent-shadow);
    margin-bottom: 4px;
}
.market-col-title {
    font-size: 13px; font-weight: 600; color: var(--text);
}
.market-col-act {
    padding: 4px 10px; border-radius: 5px; cursor: pointer; font-size: 12px;
    border: 0;
    background: linear-gradient(135deg, var(--accent), #a87a3f);
    color: #1a120a; font-weight: 700;
    box-shadow: 0 2px 6px var(--accent-shadow);
}
.market-col-act:hover {
    background: linear-gradient(135deg, var(--accent-hi), var(--accent));
}

/* 新行布局：仅"单价 / 数量" */
.mkt-row-2col {
    grid-template-columns: 1fr 1fr !important;
}
/* 装备实例聚合行：单价 / 强化 / 抗排异 / 件数 */
.mkt-row-inst-4col {
    grid-template-columns: 1fr 0.6fr 0.7fr 0.7fr !important;
}

/* 窄屏：两列改单列纵向堆叠 */
@media (max-width: 700px) {
    .market-depth-cols { grid-template-columns: 1fr; }
}

/* 市场挂单弹窗：作为二层叠加在详情弹窗之上 */
.market-modal-stack-2 { z-index: 1100; }
.market-list-locked-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; margin-bottom: 8px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-left: 3px solid var(--accent); border-radius: 6px;
}
.market-list-locked-icon { font-size: 24px; }
.market-list-locked-name { font-size: 14px; font-weight: 600; color: var(--text); }

.market-enhance-filter {
    padding: 3px 8px; font-size: 12px;
    background: var(--bg-base); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    margin-right: 6px;
}
.market-enhance-filter:focus {
    outline: none; border-color: var(--accent);
}

.mkt-row-buy-inst { grid-template-columns: 1fr 0.6fr 0.6fr !important; }

.mkt-row-inst-3col { grid-template-columns: 1fr 0.6fr 0.6fr !important; }
.market-list-warn {
    color: #e8836b; font-size: 12px;
    padding: 6px 8px; margin: 6px 0;
    background: rgba(232, 131, 107, 0.10);
    border-left: 3px solid #e8836b; border-radius: 4px;
}

.mkt-row-3col { grid-template-columns: 1fr 0.7fr 0.7fr !important; }
.market-row-act {
    padding: 2px 8px; font-size: 11px;
    border-radius: 4px; cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text);
}
.market-row-act:hover { background: var(--bg-elev); }
.market-row-act.primary {
    background: linear-gradient(135deg, var(--accent), #a87a3f);
    color: #1a120a; font-weight: 700; border: 0;
}
.market-row-act.primary:hover {
    background: linear-gradient(135deg, var(--accent-hi), var(--accent));
}

/* ─── 战斗脚本管理弹窗（v0.6.x） ─── */
.script-modal-card { width: min(720px, 92vw); }
/* 战斗中栏「战术」面板：复用 .script-* 内部样式，套用 party-panel 同款外壳 */
.script-panel {
    padding: 14px 18px;
    display: flex; flex-direction: column; gap: 14px;
    color: var(--text);
    overflow-y: auto; overflow-x: hidden;
    max-height: 100%; height: 100%;
}
/* hidden 兜底：display:flex 会覆盖 [hidden] 默认的 display:none */
.script-panel[hidden] { display: none; }
.script-toolbar {
    display: flex; gap: 8px; align-items: center;
    padding-bottom: 10px; margin-bottom: 12px;
    border-bottom: 1px solid var(--accent-shadow);
}
.script-select {
    flex: 1; min-width: 0;
    padding: 6px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-base); color: var(--text);
    font-size: 14px;
}
.script-toolbar button {
    padding: 6px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-deep); color: var(--text);
    cursor: pointer; font-size: 14px;
}
.script-toolbar button:hover { background: var(--bg-card-2); border-color: var(--accent); }
.script-toolbar button.danger { color: #f0c0b3; border-color: rgba(196, 74, 58, 0.4); }
.script-toolbar button.danger:hover { background: #5a2a22; border-color: #c44a3a; }

.script-editor {
    display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px;
    margin-bottom: 12px;
}
.script-editor-col h4 { margin: 0 0 6px; font-size: 13px; color: var(--text-dim); }
.script-equipped-row {
    display: flex; flex-wrap: wrap; gap: 6px;
    min-height: 64px;
    padding: 6px; border-radius: 6px;
    background: var(--bg-deep); border: 1px dashed var(--accent-shadow);
}
.script-move-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 6px 8px; min-width: 64px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 5px; cursor: grab; user-select: none;
    font-size: 11px; line-height: 1.3;
}
.script-move-card:hover { border-color: var(--accent); background: var(--bg-card-2); }
.script-move-card[draggable="true"]:active { cursor: grabbing; }
.script-move-card .smc-name { color: var(--text-bright); font-weight: 600; font-size: 12px; }
.script-move-card .smc-mp { color: var(--text-dim); font-size: 10px; }
.script-move-card.disabled { opacity: 0.4; cursor: not-allowed; }

.script-seq {
    min-height: 64px;
    display: flex; flex-direction: column; gap: 4px;
    padding: 6px; border-radius: 6px;
    background: var(--bg-deep); border: 1px dashed var(--accent-shadow);
}
.script-seq-empty { color: var(--text-dim); font-size: 12px; padding: 12px; text-align: center; }
.script-seq-row {
    display: grid; grid-template-columns: 18px 1fr auto auto auto;
    gap: 6px; align-items: center;
    padding: 5px 8px; border-radius: 5px;
    background: var(--bg-card); border: 1px solid var(--border);
    font-size: 12px;
}
.script-seq-row[draggable="true"] { cursor: grab; }
.script-seq-row.drop-hover { border-color: var(--accent); border-style: dashed; }
.script-seq-row .ssr-idx { color: var(--text-dim); font-variant-numeric: tabular-nums; text-align: right; }
.script-seq-row .ssr-name { color: var(--text-bright); font-weight: 600; }
.script-seq-row .ssr-flag {
    padding: 3px 6px; border-radius: 4px;
    border: 1px solid var(--border); background: var(--bg-deep); color: var(--text);
    font-size: 11px;
}
.script-seq-row .ssr-arrows { display: flex; flex-direction: column; gap: 1px; }
.script-seq-row .ssr-arrow {
    width: 18px; height: 12px; line-height: 12px;
    border: 1px solid var(--border); background: var(--bg-deep); color: var(--text);
    border-radius: 2px; font-size: 9px; cursor: pointer; padding: 0;
}
.script-seq-row .ssr-del {
    width: 22px; height: 22px;
    border: 1px solid rgba(196, 74, 58, 0.4); background: var(--bg-deep);
    color: #f0c0b3; border-radius: 4px; cursor: pointer;
}
.script-seq-row .ssr-del:hover { background: #5a2a22; }

.script-actions {
    display: flex; gap: 10px; align-items: center; justify-content: flex-end;
    padding-top: 10px; border-top: 1px solid var(--accent-shadow);
}
.script-actions .primary {
    padding: 6px 18px; border-radius: 6px;
    background: linear-gradient(135deg, var(--accent), #a87a3f);
    color: #1a120a; font-weight: 700; border: none; cursor: pointer;
}
.script-actions .primary:hover { background: linear-gradient(135deg, var(--accent-hi), var(--accent)); }
.script-actions .primary:disabled { opacity: 0.4; cursor: not-allowed; }
.script-count { color: var(--text-dim); font-size: 11px; }
.script-hint { color: var(--text-dim); font-size: 11px; margin: 4px 0 0; }
.script-hint.error { color: #e8836b; }

/* 战斗弹窗内的"战术"行 */
.combat-tactic-row {
    display: flex; gap: 8px; align-items: center;
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid var(--accent-shadow);
    font-size: 13px;
}
.combat-tactic-row label { color: var(--text-dim); font-size: 12px; }
.combat-tactic-row select {
    flex: 1; min-width: 0;
    padding: 5px 8px; border-radius: 5px;
    border: 1px solid var(--border); background: var(--bg-base); color: var(--text);
    font-size: 13px;
}
.combat-tactic-row button {
    padding: 5px 10px; border-radius: 5px;
    border: 1px solid var(--border); background: var(--bg-deep); color: var(--text);
    cursor: pointer; font-size: 12px;
}
.combat-tactic-row button:hover { background: var(--bg-card-2); border-color: var(--accent); }

@media (max-width: 1100px) {
    .script-editor { grid-template-columns: 1fr; }
    .script-modal-card { width: 95vw; }
}

/* ─── 聊天名字点击菜单（v0.6.x 末） ─── */
.chat-name-clickable { cursor: pointer; transition: color .15s; }
.chat-name-clickable:hover { color: var(--accent); text-decoration: underline; }
.chat-name-menu {
    position: fixed; z-index: 9999;
    min-width: 140px;
    background: var(--bg-panel, #2a1f17);
    border: 1px solid var(--border-strong, #5a3f2a);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,.45);
    padding: 4px; display: flex; flex-direction: column; gap: 2px;
}
.chat-name-menu-header {
    padding: 6px 10px; font-size: 12px; font-weight: 700;
    color: var(--accent, #d8a059); border-bottom: 1px solid var(--border, #4a3220);
    margin-bottom: 2px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-name-menu button {
    background: transparent; color: var(--text, #e8d8c0);
    border: none; padding: 7px 12px; text-align: left;
    font-size: 13px; cursor: pointer; border-radius: 4px;
    transition: background .12s;
}
.chat-name-menu button:hover { background: var(--bg-hover, #3a2a1f); color: var(--accent, #d8a059); }

/* ─── 左栏 skill-row 未读红点（v0.6.x 末，社交/市场）─── */
.skill-row-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    margin-left: auto;
    background: #d23a3a; color: #fff;
    border-radius: 9px; font-size: 11px; font-weight: 700;
    line-height: 18px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.skill-row-badge.dot {
    min-width: 10px; width: 10px; height: 10px; padding: 0;
    border-radius: 50%; font-size: 0;
}

/* 分组标题旁的红点徽章（如「战斗」标题右侧的组队邀请数） */
.skill-group-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 5px;
    margin-left: 6px; vertical-align: middle;
    background: #d23a3a; color: #fff;
    border-radius: 8px; font-size: 10px; font-weight: 700;
    line-height: 16px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.skill-group-badge.dot {
    min-width: 8px; width: 8px; height: 8px; padding: 0;
    border-radius: 50%; font-size: 0;
}

/* ─── 市场成交历史：未领取行高亮 + 领取按钮 ─── */
.market-history-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 8px 8px 8px;
}
.market-history-summary {
    color: var(--text-warn, #d9a05a); font-weight: 600;
}
.btn-claim-all {
    padding: 4px 12px; font-size: 12px;
}
.mkt-row-trade {
    grid-template-columns: 36px 1.6fr 1fr 0.7fr 1fr 1.2fr 70px !important;
}
.mkt-row-unclaimed {
    background: rgba(217, 160, 90, 0.08);
    border-left: 3px solid var(--text-warn, #d9a05a);
}
.btn-claim {
    padding: 2px 10px; font-size: 11px;
    background: var(--accent); color: #fff;
    border: 0; border-radius: 4px; cursor: pointer;
}
.btn-claim:hover { filter: brightness(1.1); }
.btn-claim:disabled { opacity: 0.5; cursor: wait; }

/* 市场顶部 tab 徽标（成交历史未领取数） */
.tab-badge-dot {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px;
    margin-left: 6px;
    background: #d23a3a; color: #fff;
    border-radius: 8px; font-size: 10px; font-weight: 700;
    line-height: 16px; vertical-align: middle;
}
.tab-badge-dot.dot {
    min-width: 8px; width: 8px; height: 8px; padding: 0;
    border-radius: 50%; font-size: 0;
}

/* ─── 任务系统（v0.7+） ─── */
#actions-list.as-tasks-block {
    display: block !important;
    max-width: none !important;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}
.tasks-page {
    padding: 14px 18px; color: var(--text); line-height: 1.5;
    overflow-y: auto; overflow-x: hidden;
    max-height: 100%; height: 100%;
    display: flex; flex-direction: column; gap: 10px;
    min-width: 0; box-sizing: border-box;
}
.tasks-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap; gap: 8px;
}
.tasks-lp {
    font-size: 16px; font-weight: 700;
    color: var(--accent, #d8a059);
}
.tasks-lp b { font-size: 18px; margin-left: 4px; }
.tasks-meta {
    font-size: 12px; color: var(--text-dim);
}
.tasks-tabs {
    display: flex; gap: 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}
.tasks-tab {
    background: transparent; color: var(--text-dim);
    border: 1px solid var(--border); border-bottom: none;
    padding: 6px 14px; font-size: 13px; cursor: pointer;
    border-radius: 6px 6px 0 0;
    position: relative;
}
.tasks-tab.active {
    background: var(--bg-base); color: var(--accent);
    border-color: var(--accent);
}
.tasks-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px;
    margin-left: 6px;
    background: #d23a3a; color: #fff;
    border-radius: 8px; font-size: 10px; font-weight: 700;
    line-height: 16px; vertical-align: middle;
}
.tasks-body {
    flex: 1; min-height: 0; overflow-y: auto;
}
.tasks-empty {
    padding: 30px 0; text-align: center; color: var(--text-dim);
    font-style: italic;
}
.tasks-list, .tasks-shop-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.tasks-item {
    background: var(--bg-panel, #2a2218);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
}
.tasks-item.done {
    border-color: var(--accent, #d8a059);
    box-shadow: 0 0 6px rgba(216, 160, 89, 0.2);
}
.tasks-item-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px; flex-wrap: wrap;
}
.tasks-item-kind {
    font-size: 11px; color: var(--accent);
    background: rgba(216,160,89,.12);
    padding: 2px 6px; border-radius: 3px;
}
.tasks-item-target {
    font-weight: 600; flex: 1;
}
/* 任务目标图标统一为 inline 小图：战斗任务用 regionIconHtml(.action-tile-icon-img 默认 52px)
   会在任务行里显得过大，强制缩为与 .item-icon-img 同款 1.15em 行内尺寸。 */
.tasks-item-target .action-tile-icon-img,
.tasks-item-target .item-icon-img {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.25em;
    object-fit: contain;
    display: inline-block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.tasks-item-reward {
    font-size: 12px; color: var(--text-warn, #d9a05a);
}
.tasks-item-desc {
    font-size: 12px; color: var(--text-dim);
    margin: 4px 0 6px;
}
.tasks-progress {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
}
.tasks-progress-bar {
    flex: 1; height: 6px;
    background: var(--bg-base);
    border-radius: 3px; overflow: hidden;
}
.tasks-progress-fill {
    height: 100%; background: var(--accent, #d8a059);
    transition: width .3s;
}
.tasks-progress-text {
    font-size: 11px; color: var(--text-dim);
    min-width: 70px; text-align: right;
}
.tasks-item-actions {
    display: flex; justify-content: flex-end;
}
.tasks-claim-btn {
    background: var(--accent, #d8a059); color: #2a2218;
    border: 0; padding: 6px 14px; font-weight: 700;
    border-radius: 4px; cursor: pointer; font-size: 13px;
}
.tasks-claim-btn:hover { filter: brightness(1.1); }
.tasks-pending {
    color: var(--text-dim); font-size: 12px;
}
/* 商店 */
.tasks-shop-item {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--bg-panel, #2a2218);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    gap: 12px;
}
.tasks-shop-item.sold-out { opacity: .5; }
.tasks-shop-info { flex: 1; min-width: 0; }
.tasks-shop-name { font-weight: 600; font-size: 14px; }
.tasks-shop-desc {
    font-size: 12px; color: var(--text-dim); margin-top: 2px;
}
.tasks-buy-btn {
    background: var(--accent, #d8a059); color: #2a2218;
    border: 0; padding: 6px 14px; font-weight: 700;
    border-radius: 4px; cursor: pointer;
    min-width: 80px; font-size: 13px;
}
.tasks-buy-btn:disabled {
    background: var(--border); color: var(--text-dim);
    cursor: not-allowed;
}
.tasks-buy-btn:not(:disabled):hover { filter: brightness(1.1); }
.skill-row.tasks-row { cursor: pointer; }

/* ============ v0.7+ 团体战面板 ============ */
.raid-panel {
    padding: 12px;
    color: var(--text);
    font-size: 13px;
    overflow-y: auto;
    max-height: 100%;
}
.raid-panel .raid-loading,
.raid-panel .raid-empty,
.raid-panel .raid-error {
    text-align: center;
    color: var(--text-dim);
    padding: 24px 12px;
}
.raid-panel .raid-error { color: #e85a5a; }

.raid-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-dim);
}
.raid-header h3 { margin: 0; font-size: 16px; }
.raid-status { font-size: 12px; }
.raid-status b { color: #f5b942; }
.raid-status-detail { color: var(--text-dim); margin-left: 4px; }

.raid-boss-list {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 14px;
}
.raid-boss-card {
    flex: 0 0 auto; min-width: 160px;
    display: flex; align-items: center; gap: 8px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 8px; padding: 8px 12px; cursor: pointer;
    transition: all 0.15s;
    color: inherit; font: inherit;
}
.raid-boss-card:hover { border-color: var(--accent); }
.raid-boss-card.active {
    border-color: #f5b942; background: rgba(245, 185, 66, 0.08);
}
.raid-boss-icon { font-size: 26px; }
.raid-boss-meta { text-align: left; }
.raid-boss-name { font-weight: 600; }
.raid-boss-level { font-size: 11px; color: var(--text-dim); }

.raid-detail {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
}
.raid-section { margin-bottom: 14px; }
.raid-section h4 { margin: 0 0 6px 0; font-size: 13px; color: var(--accent); }

.raid-wave-list { margin: 0; padding-left: 0; list-style: none; }
.raid-wave-row {
    padding: 6px 8px; border-radius: 4px;
    background: var(--surface-2);
    margin-bottom: 4px;
}
.raid-wave-no { font-weight: 600; color: #f5b942; margin-right: 6px; }
.raid-enemy {
    display: inline-block; margin-right: 8px;
    padding: 2px 6px; border-radius: 3px;
    background: rgba(255,255,255,0.04);
}

.raid-reward-list { margin: 0; padding-left: 18px; }
.raid-reward-list li { margin-bottom: 2px; }
.raid-reward-prob { color: var(--text-dim); font-size: 11px; }

.raid-binding-row {
    display: flex; gap: 6px; align-items: center;
    margin-bottom: 6px; flex-wrap: wrap;
}
.raid-binding-name {
    flex: 0 0 auto; min-width: 80px;
    font-weight: 600;
}
.raid-binding-select {
    flex: 1 1 auto; min-width: 100px;
    padding: 4px 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
}
.raid-binding-empty { color: var(--text-dim); font-style: italic; }
.raid-binding-row.no-script .raid-binding-empty { flex: 1; }

.raid-actions {
    display: flex; justify-content: center; margin-top: 12px;
}
.raid-start-btn {
    padding: 10px 24px; font-size: 14px; font-weight: 600;
    background: linear-gradient(135deg, #f5b942, #e85a5a);
    color: #fff; border: none; border-radius: 6px;
    cursor: pointer;
}
.raid-start-btn:disabled {
    background: var(--surface-2); color: var(--text-dim);
    cursor: not-allowed;
}

/* 战报模式 */
.raid-live { padding: 4px; }
.raid-live-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px; padding-bottom: 6px;
    border-bottom: 1px solid var(--border-dim);
}
.raid-live-header h3 { margin: 0; font-size: 14px; }
.raid-live-status { color: #f5b942; font-weight: 600; }

.raid-log {
    max-height: 320px; overflow-y: auto;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px;
    font-family: monospace;
    font-size: 12px;
    line-height: 1.5;
}
.raid-log-wave-head {
    color: #f5b942; font-weight: 600;
    margin: 6px 0 4px 0;
}
.raid-log-line { padding: 2px 0; }
.raid-log-line.phase-event {
    color: #ff8a3d;
    background: rgba(255, 138, 61, 0.06);
    padding: 4px 6px; margin: 4px 0;
    border-left: 2px solid #ff8a3d;
}
.raid-log-pending {
    text-align: center; padding: 8px;
    color: var(--text-dim); font-style: italic;
}
.raid-log-done {
    text-align: center; padding: 14px;
    font-size: 18px; font-weight: 700;
    margin: 8px 0;
    border-radius: 6px;
}
.raid-log-done.won {
    background: rgba(94, 200, 110, 0.12);
    color: #5ec86e;
}
.raid-log-done.lost {
    background: rgba(232, 90, 90, 0.12);
    color: #e85a5a;
}
.raid-rewards-got {
    background: var(--surface-2);
    padding: 8px 10px; border-radius: 4px;
    margin-bottom: 10px;
}
.raid-reward-tag {
    display: inline-block;
    background: rgba(245, 185, 66, 0.16);
    color: #f5b942;
    padding: 2px 8px; border-radius: 3px;
    margin: 0 4px 2px 0;
}
.raid-back-btn {
    padding: 8px 18px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    cursor: pointer;
}
.raid-back-btn:hover { border-color: var(--accent); }

/* 团体战：菌兽元素徽章 + 脚本绑定场次标签 */
.raid-enemy-elem {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    font-size: 11px;
    border-radius: 3px;
    background: rgba(255,255,255,0.06);
    color: var(--text-dim);
}
.raid-binding-wave-label {
    flex: 0 0 auto;
    color: var(--text-dim);
    font-size: 12px;
    margin-left: 4px;
}

/* 团体战：队员脚本只读显示 */
.raid-binding-row.readonly { opacity: 0.85; }
.raid-binding-readonly-val {
    flex: 0 1 auto;
    padding: 4px 8px;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 4px;
    color: var(--text-dim);
    font-size: 12px;
}
.raid-binding-hint {
    font-size: 11px;
    color: var(--text-dim);
    margin: 6px 0 0 0;
    font-style: italic;
}

/* ─── 团体战 · 移动端响应式（≤900px） ─── */
@media (max-width: 900px) {
    .raid-panel {
        padding: 8px;
        font-size: 12px;
    }

    /* 头部：标题 + 剩余次数纵向堆叠，避免左右挤压 */
    .raid-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin-bottom: 8px;
        padding-bottom: 6px;
    }
    .raid-header h3 { font-size: 15px; }
    .raid-status { font-size: 11px; }
    .raid-status-detail {
        display: block;
        margin-left: 0;
        margin-top: 2px;
    }

    /* Boss 列表：自适应网格，窄屏单卡占满整行 */
    .raid-boss-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 6px;
        margin-bottom: 10px;
    }
    .raid-boss-card {
        min-width: 0;            /* 取消硬下限，跟随 grid */
        padding: 8px 10px;
    }
    .raid-boss-icon { font-size: 24px; }
    .raid-boss-name { font-size: 13px; }
    .raid-boss-level { font-size: 10px; }

    /* 详情卡：缩小内边距 */
    .raid-detail { padding: 8px; }
    .raid-section { margin-bottom: 10px; }
    .raid-section h4 { font-size: 12px; }

    /* 挑战流程：场次标签独占一行，敌人列表自然换行 */
    .raid-wave-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 6px 8px;
    }
    .raid-wave-no { margin-right: 0; font-size: 12px; }
    .raid-enemy {
        margin-right: 0;
        font-size: 11px;
        padding: 2px 5px;
    }
    .raid-enemy-elem { font-size: 10px; padding: 0 4px; }

    /* 奖励列表：缩小左缩进、概率标签同行紧凑 */
    .raid-reward-list { padding-left: 16px; font-size: 12px; }
    .raid-reward-prob { font-size: 10px; }

    /* 战术配置：每位玩家纵向布局，3 场各占一行 */
    .raid-binding-row {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 6px;
        background: var(--surface-2);
        border-radius: 6px;
        margin-bottom: 6px;
    }
    .raid-binding-name {
        min-width: 0;
        font-size: 12px;
        padding-bottom: 2px;
        border-bottom: 1px dashed var(--border-dim);
    }
    /* 把每条「第 N 场：select」 打成一行 grid（label 列定宽 + select 占余） */
    .raid-binding-wave-label {
        margin-left: 0;
        font-size: 11px;
        align-self: center;
    }
    /* 让 label + 紧邻 select / readonly 自然换行成 2-cell 一行 */
    .raid-binding-row {
        display: grid;
        grid-template-columns: max-content 1fr;
        column-gap: 6px;
        row-gap: 4px;
    }
    .raid-binding-name { grid-column: 1 / -1; }
    .raid-binding-select { width: 100%; min-width: 0; }
    .raid-binding-readonly-val { width: 100%; box-sizing: border-box; }

    /* 发起按钮：允许文字折行、padding 紧凑 */
    .raid-actions { margin-top: 10px; }
    .raid-start-btn {
        width: 100%;
        padding: 10px 12px;
        font-size: 13px;
        white-space: normal;
        line-height: 1.3;
    }
}