/* ===== 地图 · A 图卷通屏 =====
   薄 chrome + 画布 flex:1 吃满侧栏剩余高度（去掉 480 封顶）
   配色对齐今日弹窗 token；无左轨装饰 */
/* 各郡专属色 token：每个郡有独立色相身份。:root 定义暗色默认值，
   亮色主题由 game-themes.css 覆盖。节点 rgba 用 color-mix 派生。 */
:root {
    --beihuang-blue: #5a8ce0;       /* 北荒郡：冰蓝 */
    --beihuang-purple: #7c6cf0;     /* 北荒：神行紫 */
    --wanyao-gold: #b8a030;         /* 万妖神州：翠金 */
    --youming-purple: #8860c0;      /* 幽冥鬼域：青紫 */
    --tianlong-azure: #4090e0;      /* 天龙苍境：苍蓝 */
    --jimo-crimson: #c04040;        /* 极魔血渊：暗红 */
    --changsheng-green: #60a850;    /* 长生大荒：生机绿 */
    --hundun-gray: #8878a0;         /* 混沌墟土：灰紫 */
    --canghai-teal: #7f9160;        /* 沧海郡：青翠 */
}

/* 侧栏壳：禁止整页滚，把高度交给地图舞台 */
#mapPanel.map-panel-shell,
.side-content#mapPanel.map-panel-shell {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.map-current-area {
    font-size: var(--font-label);
    color: var(--text-jade);
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 驻留条 · 对齐护道/师徒 hero 薄条 */
.map-loc-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
    margin: 0 0 var(--space-8);
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-gold, color-mix(in srgb, var(--accent-gold) 35%, var(--border-color)));
    background:
        linear-gradient(135deg, var(--gradient-gold, rgba(183, 120, 31, 0.08)), transparent 60%),
        var(--bg-card);
}
.map-loc-bar[hidden] { display: none !important; }
.map-loc-bar__name {
    font-family: var(--font-serif, "Songti SC", STSong, serif);
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}
.map-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-pill);
    font-size: var(--font-micro);
    font-weight: 600;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    background: transparent;
}
.map-chip--jade {
    color: var(--text-jade);
    border-color: rgba(22, 128, 106, 0.38);
    background: rgba(22, 128, 106, 0.08);
}
.map-chip--gold {
    color: var(--text-gold);
    border-color: rgba(183, 120, 31, 0.38);
    background: rgba(183, 120, 31, 0.10);
}

/* 跨郡提示 · token 化 */
.map-travel-tip {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-8);
    align-items: baseline;
    margin: 0 0 var(--space-8);
    padding: 0 var(--space-2);
    font-size: var(--font-caption);
    line-height: 1.55;
    color: var(--text-muted);
    border: 0;
}
.map-travel-tip__k {
    color: var(--text-gold);
    font-weight: 700;
    letter-spacing: 1px;
    flex: 0 0 auto;
}
.map-travel-tip__t {
    flex: 1 1 12em;
    min-width: 0;
}
.map-travel-tip strong {
    color: var(--text-secondary);
    font-weight: 600;
}

/* ===== 跨郡传送弹窗 · 途径行（cr- = cross-region）=====
 * 沿用 gc-dialog B顶×C中 壳；途径=阵/符/步，单字楷体篆章为视觉种子。
 * 行=可点按钮，左篆章+途径名，右代价/余额。tone 驱动语义色：
 *   purple=传送符 gold=传送阵 jade=步行。
 * 扁平描边，无渐变无投影，与 modal-action-btn 同族但更结构化。
 */
.cr-ways {
    margin-top: var(--space-12);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}
/* 无 foot 时补底部留白（原靠 gc-foot padding 撑着） */
.gc-mid.cr-mid { padding-bottom: var(--space-20); }
.cr-way {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    padding: var(--space-12) var(--space-14);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: transparent;
    font-family: inherit;
    font-size: var(--font-body);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, opacity .15s;
    -webkit-appearance: none;
    appearance: none;
}
.cr-way:hover {
    border-color: var(--border-gold);
    color: var(--text-primary);
}
/* 篆章：单字楷体方印，途径身份 */
.cr-way__seal {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--font-heading);
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid currentColor;
    opacity: .9;
}
.cr-way__name {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-weight: 600;
    letter-spacing: .5px;
}
.cr-way__cost {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--font-caption);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
    line-height: 1.5;
}
/* 语义色变体（与全站 token 对齐） */
.cr-way[data-tone="purple"] {
    border-color: color-mix(in srgb, var(--ghost-purple) 30%, transparent);
    color: var(--text-purple, var(--ghost-purple-deep));
    background: color-mix(in srgb, var(--ghost-purple) 7%, transparent);
}
.cr-way[data-tone="purple"] .cr-way__cost { color: var(--text-purple, var(--ghost-purple-deep)); }
.cr-way[data-tone="purple"]:hover { border-color: color-mix(in srgb, var(--ghost-purple) 55%, transparent); }

.cr-way[data-tone="gold"] {
    border-color: var(--border-gold);
    color: var(--text-gold);
    background: color-mix(in srgb, var(--craft-gold) 7%, transparent);
}
.cr-way[data-tone="gold"] .cr-way__cost { color: var(--text-gold); }
.cr-way[data-tone="gold"]:hover { border-color: var(--accent-gold); }

.cr-way[data-tone="jade"] {
    border-color: var(--border-jade);
    color: var(--accent-jade);
    background: var(--bg-glass-jade);
}
.cr-way[data-tone="jade"] .cr-way__cost { color: var(--accent-jade); }
.cr-way[data-tone="jade"]:hover { border-color: var(--accent-jade); }

/* 禁用态：虚边篆章、灰化 */
.cr-way:disabled,
.cr-way.is-blocked {
    opacity: .5;
    cursor: not-allowed;
}
.cr-way:disabled:hover,
.cr-way.is-blocked:hover {
    border-color: var(--border-color);
    color: var(--text-secondary);
    background: transparent;
}
.cr-way:disabled .cr-way__seal,
.cr-way.is-blocked .cr-way__seal { border-style: dashed; }

/* 薄 chrome：搜索 / 钉选 / 郡 tab */
.map-chrome {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: 0 0 var(--space-8);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    margin-bottom: 0;
}

.map-chrome__nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
    min-width: 0;
}
.map-chrome__nav .map-region-tabs {
    flex: none;
    width: 100%;
    min-width: 0;
}
.map-view-switch {
    flex: none;
    align-self: flex-end;
    display: flex;
    gap: var(--space-4);
}
.map-view-switch__btn {
    height: 32px;
    min-width: 44px;
    padding: 0 var(--space-10);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-label);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
}
.map-view-switch__btn:hover {
    color: var(--text-jade);
    border-color: color-mix(in srgb, var(--accent-jade) 40%, var(--border-color));
}
.map-view-switch__btn.is-on {
    color: var(--text-jade);
    border-color: color-mix(in srgb, var(--accent-jade) 40%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 12%, transparent);
}

.map-catalog-stage {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.map-catalog {
    padding: var(--space-8) var(--space-4) var(--space-24);
}
.map-catalog-sec + .map-catalog-sec {
    margin-top: var(--space-16);
}
.map-catalog-sec__title {
    margin: 0 0 var(--space-8);
    font-size: var(--font-title);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 1px;
}
.map-catalog-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.map-catalog-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    min-height: 44px;
    padding: var(--space-8) var(--space-10);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.map-catalog-row.is-clickable:hover {
    border-color: color-mix(in srgb, var(--accent-jade) 40%, var(--border-color));
}
.map-catalog-row:disabled {
    cursor: default;
    opacity: 0.72;
}
.map-catalog-row__n {
    flex: none;
    width: 20px;
    font-size: var(--font-caption);
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.map-catalog-row__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-body);
    font-weight: 600;
}
.map-catalog-row__realm {
    flex: none;
    font-size: var(--font-caption);
    color: var(--text-muted);
}
.map-catalog-row__meta {
    flex: none;
    font-size: var(--font-caption);
    font-weight: 600;
    color: var(--text-secondary);
}
.map-catalog-row--current .map-catalog-row__meta { color: var(--text-gold); }
.map-catalog-row--open .map-catalog-row__meta { color: var(--text-jade); }
.map-catalog-row--teleport .map-catalog-row__meta { color: var(--accent-purple, var(--text-gold)); }
.map-catalog-empty {
    margin: var(--space-24) 0;
    text-align: center;
    font-size: var(--font-label);
    color: var(--text-muted);
}

.map-region-tabs {
    display: flex;
    gap: var(--space-6);
    margin-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-2);
}
.map-region-tabs::-webkit-scrollbar { display: none; }

.map-material-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--space-6);
    align-items: center;
    margin-bottom: 0;
}

.map-material-search__input {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    box-sizing: border-box;
    height: 34px;
}

.map-material-search__btn {
    height: 34px;
    padding: 0 var(--space-10);
    border: 1px solid rgba(22, 128, 106, 0.40);
    border-radius: var(--radius-md);
    background: rgba(22, 128, 106, 0.12);
    color: var(--text-jade);
    font-family: inherit;
    font-size: var(--font-label);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
}
.map-material-search__btn:hover {
    background: rgba(22, 128, 106, 0.18);
    border-color: rgba(22, 128, 106, 0.55);
}

.map-material-search__btn--muted {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-muted);
    font-weight: 600;
}
.map-material-search__btn--muted:hover {
    border-color: var(--border-gold, var(--border-color));
    color: var(--text-secondary);
    background: var(--bg-input, rgba(42, 42, 38, 0.04));
}

.map-material-search__hint {
    grid-column: 1 / -1;
    min-height: 0;
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.3;
}
.map-material-search__hint:empty { display: none; }

.map-pinned-focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    margin: 0;
    padding: var(--space-8) var(--space-10);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 42%, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-card) 86%, var(--accent-gold) 14%);
    box-shadow: none;
}

.map-pinned-focus__main {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
    color: var(--text-primary);
    font-size: var(--font-label);
    line-height: 1.45;
}

.map-pinned-focus__tag {
    flex: 0 0 auto;
    padding: var(--space-2) var(--space-8);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 45%, transparent);
    border-radius: var(--radius-pill);
    color: var(--text-gold);
    font-size: var(--font-caption);
    white-space: nowrap;
}

.map-pinned-focus__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-pinned-focus__hint {
    color: var(--text-muted);
    white-space: nowrap;
}

.map-pinned-focus__clear {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 var(--space-10);
    border: 1px solid rgba(22, 128, 106, 0.40);
    border-radius: var(--radius-md);
    background: rgba(22, 128, 106, 0.12);
    color: var(--text-jade);
    font-family: inherit;
    font-size: var(--font-label);
    font-weight: 600;
    cursor: pointer;
}

.map-pinned-focus__clear:hover {
    border-color: rgba(22, 128, 106, 0.55);
    background: rgba(22, 128, 106, 0.18);
}

.map-region-tab {
    flex: 0 0 auto;
    min-width: 52px;
    height: 32px;
    padding: 0 var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-label);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    letter-spacing: 1px;
    white-space: nowrap;
}

.map-region-tab:hover {
    color: var(--text-jade);
    border-color: rgba(22, 128, 106, 0.40);
    background: rgba(22, 128, 106, 0.06);
}

.map-region-tab.active {
    color: var(--text-jade);
    border-color: rgba(22, 128, 106, 0.40);
    background: rgba(22, 128, 106, 0.12);
    font-weight: 600;
}

/* 地图容器：占满 panel 剩余高度 */
.map-container,
#mapPanel .map-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

#mapCanvasWrap,
#mapCanvasWrap.map-canvas-stage {
    flex: 1 1 auto;
    min-height: 240px;
    overflow: hidden;
    position: relative;
}

#mapCanvasWrap.map-route-wrap {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* 关键：画布吃满舞台，不再 480 封顶 */
.map-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 280px;
    background:
        radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--accent-jade) 8%, transparent) 0%, transparent 60%),
        radial-gradient(circle at 18% 28%, color-mix(in srgb, var(--beihuang-blue) 5%, transparent), transparent 42%),
        var(--bg-card);
    border: none;
    border-radius: 0;
    cursor: grab;
    will-change: transform;
    transition: none;
}

@media (min-width: 900px) {
    .map-canvas {
        min-height: 360px;
    }
    #mapCanvasWrap,
    #mapCanvasWrap.map-canvas-stage {
        min-height: 320px;
    }
}

.map-canvas:active {
    cursor: grabbing;
}

.map-canvas.map-route-canvas {
    /* 路由大图：至少铺满舞台，内容更高时由 wrap 滚动 */
    min-height: max(100%, 520px);
    height: auto;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--border-color) 16%, transparent) 1px, transparent 1px),
        linear-gradient(0deg, color-mix(in srgb, var(--border-color) 14%, transparent) 1px, transparent 1px),
        color-mix(in srgb, var(--bg-card) 94%, var(--accent-jade) 6%) !important;
    background-size: 72px 72px, 72px 72px, auto !important;
}

.map-zoom-controls {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    z-index: 10;
}

.map-zoom-btn {
    width: 36px;
    height: 36px;
    margin: 0;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-primary);
    font-size: var(--font-title);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--text-primary) 8%, transparent);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1;
}

.map-zoom-btn:hover {
    background: rgba(22, 128, 106, 0.14);
    border-color: rgba(22, 128, 106, 0.40);
    color: var(--text-jade);
    transform: none;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-jade) 12%, transparent);
}

.map-drops-btn-wrap {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.map-drops-btn {
    height: 32px;
    min-width: 52px;
    margin: 0;
    padding: 0 var(--space-10);
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    background: color-mix(in srgb, var(--bg-card) 94%, transparent);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--font-label);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.map-drops-btn:hover,
.map-drops-btn:focus-visible {
    color: var(--text-jade);
    border-color: color-mix(in srgb, var(--accent-jade) 40%, var(--border-color));
}

.map-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.map-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    cursor: default;
    z-index: 2;
}

.map-node-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-jade);
    border: 2px solid color-mix(in srgb, var(--accent-jade) 40%, transparent);
    transition: all 0.3s;
}

.map-node-name {
    font-size: var(--font-caption);
    color: var(--text-primary);
    white-space: nowrap;
    font-weight: 500;
}

.map-node-range {
    font-size: var(--font-micro);
    line-height: 1.2;
    color: var(--text-secondary);
    white-space: nowrap;
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--combat-dark) 75%, transparent);
    border: 1px solid var(--glass-white-1);
    letter-spacing: 0.5px;
}

.map-node-badge {
    font-size: var(--font-micro);
    background: var(--accent-jade);
    color: #fff;
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-md);
}

/* 跨郡传送节点角标（#5731 散修/手机端可见标识） */
.map-node-badge--teleport {
    background: color-mix(in srgb, var(--accent-gold, #c9a227) 88%, #8a6a10);
    color: #1a1408;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent-gold, #c9a227) 35%, transparent);
}
.map-poi-extra--teleport {
    color: var(--accent-gold, #c9a227) !important;
    border-color: color-mix(in srgb, var(--accent-gold, #c9a227) 45%, transparent) !important;
    font-weight: 700;
}
.map-node-teleport .map-poi-pin {
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent-gold, #c9a227) 40%, transparent);
}

/* 当前位置 */
.map-node-current .map-node-dot {
    width: 16px;
    height: 16px;
    background: var(--gold);
    border-color: color-mix(in srgb, var(--craft-gold-bright) 60%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--craft-gold-bright) 50%, transparent);
    animation: nodePulse 2s ease-in-out infinite;
}

.map-node-current .map-node-name {
    color: var(--gold);
    font-weight: 600;
}

.map-node-material-hit .map-node-dot {
    background: var(--craft-gold);
    border-color: color-mix(in srgb, var(--craft-gold-bright) 72%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--craft-gold-bright) 72%, transparent), 0 0 30px color-mix(in srgb, var(--beihuang-blue) 22%, transparent);
}

.map-node-material-hit .map-node-name {
    color: var(--craft-gold-bright);
    font-weight: 700;
}

.map-node-material-label {
    color: var(--craft-gold) !important;
    border-color: color-mix(in srgb, var(--craft-gold-bright) 36%, transparent) !important;
    background: color-mix(in srgb, var(--craft-gold-bright) 12%, transparent) !important;
}

/* 可前往 */
.map-node-open {
    cursor: pointer;
}

.map-node-open:hover .map-node-dot {
    transform: scale(1.3);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent-jade) 50%, transparent);
}

.map-node-open .map-node-name {
    color: var(--text-jade);
}

.map-node-open .map-node-range {
    color: var(--ghost-purple-deep);
    border-color: color-mix(in srgb, var(--accent-jade) 35%, transparent);
}

/* 未开放 - 雾气笼罩 */
.map-node-fog {
    opacity: 0.35;
    filter: blur(1px);
}

.map-node-fog .map-node-dot {
    background: #555;
    border-color: #444;
}

.map-node-fog .map-node-name {
    color: #888;
    font-style: italic;
}

.map-node-fog .map-node-range {
    display: none;
}

/* 不可前往(已开放但不相邻) */
.map-node-locked .map-node-dot {
    background: #666;
    border-color: #555;
}

.map-node-locked .map-node-range {
    opacity: 0.5;
}

/* 神行符可达 (同郡非相邻) */
.map-node-shenxing {
    cursor: pointer;
}

.map-node-shenxing .map-node-dot {
    background: color-mix(in srgb, var(--youming-purple) 55%, white);
    border: 2px dashed color-mix(in srgb, var(--youming-purple) 50%, white);
}

.map-node-shenxing .map-node-name {
    color: color-mix(in srgb, var(--youming-purple) 50%, white);
}

.map-node-shenxing:hover .map-node-dot {
    transform: scale(1.3);
    box-shadow: 0 0 10px color-mix(in srgb, var(--youming-purple) 50%, white), 0 0 20px color-mix(in srgb, var(--youming-purple) 50%, white);
}

.map-node-shenxing .map-node-range {
    color: color-mix(in srgb, var(--ghost-purple) 90%, transparent);
    border-color: color-mix(in srgb, var(--youming-purple) 50%, white);
}

/* 不可直接移动但已开放的区域 (可点击获取提示) */
.map-node-clickable {
    cursor: pointer;
}

.map-node-clickable .map-node-dot {
    background: #777;
    border: 2px dotted color-mix(in srgb, var(--text-muted) 50%, transparent);
}

.map-node-clickable:hover .map-node-dot {
    transform: scale(1.2);
    box-shadow: 0 0 8px color-mix(in srgb, var(--text-muted) 30%, transparent);
}

.map-node-clickable .map-node-name {
    color: var(--text-muted);
}

@keyframes nodePulse {

    0%,
    100% {
        box-shadow: 0 0 8px color-mix(in srgb, var(--craft-gold-bright) 40%, transparent);
    }

    50% {
        box-shadow: 0 0 20px color-mix(in srgb, var(--craft-gold-bright) 70%, transparent);
    }
}

/* ===== 郡名水印 ===== */
.map-region-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: var(--font-hero-xl);
    color: var(--glass-white-2);
    letter-spacing: 24px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}


/* ===== 北荒郡专属主题 ===== */

/* -- 画布背景: 冰冷暗紫色调 -- */
.map-region-beihuang {
    background:
        radial-gradient(ellipse at 50% 10%, color-mix(in srgb, var(--beihuang-purple) 12%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 70%, color-mix(in srgb, var(--beihuang-blue) 8%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, color-mix(in srgb, var(--beihuang-blue) 6%, transparent) 0%, transparent 50%),
        linear-gradient(180deg, var(--combat-dark) 0%, var(--combat-dark) 40%, var(--combat-dark) 100%);
    border-color: color-mix(in srgb, var(--beihuang-blue) 20%, transparent);
}

/* -- 水印颜色 -- */
.map-region-beihuang .map-region-watermark {
    color: color-mix(in srgb, var(--beihuang-blue) 4%, transparent);
}

/* -- 节点圆点: 冰蓝色 -- */
.map-region-beihuang .map-node-dot {
    background: var(--beihuang-blue);
    border-color: color-mix(in srgb, var(--beihuang-blue) 40%, transparent);
}

/* -- 节点名称 -- */
.map-region-beihuang .map-node-name {
    color: color-mix(in srgb, var(--beihuang-blue) 40%, white);
}

/* -- 境界范围标签 -- */
.map-region-beihuang .map-node-range {
    background: color-mix(in srgb, var(--combat-dark) 80%, transparent);
    border-color: color-mix(in srgb, var(--beihuang-blue) 25%, transparent);
    color: var(--ghost-purple-deep);
}

/* -- 当前位置: 冰霜白+紫辉光 -- */
.map-region-beihuang .map-node-current .map-node-dot {
    background: linear-gradient(135deg, color-mix(in srgb, var(--beihuang-blue) 60%, white), color-mix(in srgb, var(--beihuang-purple) 50%, white));
    border-color: color-mix(in srgb, var(--beihuang-blue) 60%, white);
    box-shadow: 0 0 14px color-mix(in srgb, var(--beihuang-blue) 60%, white), 0 0 28px color-mix(in srgb, var(--beihuang-purple) 20%, transparent);
    animation: beihuangPulse 2.5s ease-in-out infinite;
}

.map-region-beihuang .map-node-current .map-node-name {
    color: color-mix(in srgb, var(--beihuang-blue) 35%, white);
}

.map-region-beihuang .map-node-badge {
    background: linear-gradient(135deg, var(--beihuang-blue), var(--beihuang-purple));
    box-shadow: 0 0 8px color-mix(in srgb, var(--beihuang-blue) 30%, transparent);
}

/* -- 可前往: 冰蓝悬停辉光 -- */
.map-region-beihuang .map-node-open .map-node-name {
    color: color-mix(in srgb, var(--beihuang-blue) 50%, white);
}

.map-region-beihuang .map-node-open:hover .map-node-dot {
    box-shadow: 0 0 12px color-mix(in srgb, var(--beihuang-blue) 60%, transparent), 0 0 24px color-mix(in srgb, var(--beihuang-blue) 20%, transparent);
    border-color: color-mix(in srgb, var(--beihuang-blue) 60%, transparent);
}

.map-region-beihuang .map-node-open .map-node-range {
    color: color-mix(in srgb, var(--ghost-purple) 95%, transparent);
    border-color: color-mix(in srgb, var(--beihuang-blue) 30%, transparent);
}

/* -- 高危节点: 微弱红色外辉 (dangerLevel >= 9) -- */
.map-region-beihuang .map-node-open[data-danger="9"] .map-node-dot,
.map-region-beihuang .map-node-current[data-danger="9"] .map-node-dot {
    box-shadow: 0 0 10px color-mix(in srgb, var(--beihuang-blue) 40%, transparent), 0 0 20px color-mix(in srgb, var(--jimo-crimson) 15%, transparent);
}
.map-region-beihuang .map-node-open[data-danger="10"] .map-node-dot,
.map-region-beihuang .map-node-current[data-danger="10"] .map-node-dot {
    background: linear-gradient(135deg, var(--beihuang-purple), var(--beihuang-purple));
    box-shadow: 0 0 10px color-mix(in srgb, var(--beihuang-purple) 50%, transparent), 0 0 25px color-mix(in srgb, var(--danger-color) 20%, transparent);
    animation: voidRiftPulse 2s ease-in-out infinite;
}

/* -- 迷雾节点 -- */
.map-region-beihuang .map-node-fog .map-node-dot {
    background: color-mix(in srgb, var(--beihuang-purple) 40%, black);
    border-color: var(--ghost-purple-dark);
}

.map-region-beihuang .map-node-fog .map-node-name {
    color: var(--accent-blue);
}

/* -- 锁定节点 -- */
.map-region-beihuang .map-node-locked .map-node-dot {
    background: var(--text-secondary);
    border-color: color-mix(in srgb, var(--beihuang-purple) 40%, black);
}

/* -- 神行符可达 -- */
.map-region-beihuang .map-node-shenxing .map-node-dot {
    background: var(--beihuang-purple);
    border: 2px dashed color-mix(in srgb, var(--beihuang-purple) 50%, transparent);
}

.map-region-beihuang .map-node-shenxing .map-node-name {
    color: color-mix(in srgb, var(--beihuang-purple) 50%, white);
}

.map-region-beihuang .map-node-shenxing:hover .map-node-dot {
    box-shadow: 0 0 10px color-mix(in srgb, var(--beihuang-purple) 50%, transparent), 0 0 20px color-mix(in srgb, var(--beihuang-purple) 20%, transparent);
}

/* -- 可点击远程区域 (北荒) -- */
.map-region-beihuang .map-node-clickable .map-node-dot {
    background: var(--ghost-purple-accent);
    border: 2px dotted color-mix(in srgb, var(--beihuang-purple) 50%, transparent);
}

.map-region-beihuang .map-node-clickable:hover .map-node-dot {
    box-shadow: 0 0 8px color-mix(in srgb, var(--beihuang-blue) 30%, transparent);
}

.map-region-beihuang .map-node-clickable .map-node-name {
    color: var(--ghost-purple-muted);
}

/* -- 北荒脉冲动画 -- */
@keyframes beihuangPulse {
    0%, 100% {
        box-shadow: 0 0 10px color-mix(in srgb, var(--beihuang-blue) 60%, white), 0 0 20px color-mix(in srgb, var(--beihuang-purple) 15%, transparent);
    }
    50% {
        box-shadow: 0 0 20px color-mix(in srgb, var(--beihuang-blue) 60%, white), 0 0 35px color-mix(in srgb, var(--beihuang-purple) 30%, transparent);
    }
}

/* -- 虚空裂缝专属脉冲 -- */
@keyframes voidRiftPulse {
    0%, 100% {
        box-shadow: 0 0 8px color-mix(in srgb, var(--beihuang-purple) 40%, transparent), 0 0 18px color-mix(in srgb, var(--jimo-crimson) 55%, white);
        filter: hue-rotate(0deg);
    }
    50% {
        box-shadow: 0 0 18px color-mix(in srgb, var(--beihuang-purple) 70%, transparent), 0 0 30px color-mix(in srgb, var(--jimo-crimson) 55%, white);
        filter: hue-rotate(10deg);
    }
}

/* ===== 外荒六洲专属主题 ===== */

/* -- 万妖神州: 翠金兽纹色调 -- */
.map-region-wanyao {
    background:
        radial-gradient(ellipse at 40% 70%, color-mix(in srgb, var(--wanyao-gold) 10%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, color-mix(in srgb, var(--changsheng-green) 8%, transparent) 0%, transparent 50%),
        linear-gradient(180deg, var(--combat-dark) 0%, var(--combat-dark) 40%, black 100%);
    border-color: color-mix(in srgb, var(--accent-gold) 20%, transparent);
}
.map-region-wanyao .map-region-watermark { color: color-mix(in srgb, var(--wanyao-gold) 4%, transparent); }
.map-region-wanyao .map-node-dot { background: var(--wanyao-gold); border-color: color-mix(in srgb, var(--wanyao-gold) 40%, transparent); }
.map-region-wanyao .map-node-name { color: color-mix(in srgb, var(--wanyao-gold) 55%, white); }
.map-region-wanyao .map-node-range { background: color-mix(in srgb, var(--combat-dark) 80%, transparent); border-color: color-mix(in srgb, var(--wanyao-gold) 25%, transparent); color: color-mix(in srgb, var(--wanyao-gold) 60%, var(--text-muted)); }
.map-region-wanyao .map-node-open .map-node-name { color: color-mix(in srgb, var(--wanyao-gold) 50%, white); }
.map-region-wanyao .map-node-open .map-node-range { color: color-mix(in srgb, var(--wanyao-gold) 95%, transparent); border-color: color-mix(in srgb, var(--wanyao-gold) 30%, transparent); }
.map-region-wanyao .map-node-open:hover .map-node-dot { box-shadow: 0 0 12px color-mix(in srgb, var(--wanyao-gold) 60%, transparent), 0 0 24px color-mix(in srgb, var(--changsheng-green) 20%, transparent); }
.map-region-wanyao .map-node-current .map-node-dot { background: linear-gradient(135deg, color-mix(in srgb, var(--wanyao-gold) 45%, white), color-mix(in srgb, var(--changsheng-green) 50%, var(--craft-gold-bright))); border-color: color-mix(in srgb, var(--wanyao-gold) 55%, white); box-shadow: 0 0 14px color-mix(in srgb, var(--wanyao-gold) 55%, white); }
.map-region-wanyao .map-node-current .map-node-name { color: var(--craft-gold-soft); }

/* -- 幽冥鬼域: 幽冷青紫色调 -- */
.map-region-youming {
    background:
        radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--ghost-purple-accent) 10%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--accent-blue) 8%, transparent) 0%, transparent 50%),
        linear-gradient(180deg, color-mix(in srgb, var(--youming-purple) 15%, black) 0%, var(--combat-dark) 40%, black 100%);
    border-color: color-mix(in srgb, var(--youming-purple) 20%, transparent);
}
.map-region-youming .map-region-watermark { color: color-mix(in srgb, var(--youming-purple) 4%, transparent); }
.map-region-youming .map-node-dot { background: var(--youming-purple); border-color: color-mix(in srgb, var(--youming-purple) 40%, transparent); }
.map-region-youming .map-node-name { color: color-mix(in srgb, var(--youming-purple) 45%, white); }
.map-region-youming .map-node-range { background: color-mix(in srgb, var(--combat-dark) 80%, transparent); border-color: color-mix(in srgb, var(--youming-purple) 25%, transparent); color: color-mix(in srgb, var(--youming-purple) 50%, var(--text-muted)); }
.map-region-youming .map-node-open .map-node-name { color: color-mix(in srgb, var(--youming-purple) 40%, white); }
.map-region-youming .map-node-open .map-node-range { color: color-mix(in srgb, var(--ghost-purple) 95%, transparent); border-color: color-mix(in srgb, var(--youming-purple) 30%, transparent); }
.map-region-youming .map-node-open:hover .map-node-dot { box-shadow: 0 0 12px color-mix(in srgb, var(--youming-purple) 60%, transparent), 0 0 24px color-mix(in srgb, var(--tianlong-azure) 20%, transparent); }
.map-region-youming .map-node-current .map-node-dot { background: linear-gradient(135deg, color-mix(in srgb, var(--youming-purple) 55%, white), var(--beihuang-blue)); border-color: color-mix(in srgb, var(--youming-purple) 55%, white); box-shadow: 0 0 14px color-mix(in srgb, var(--youming-purple) 55%, white); }
.map-region-youming .map-node-current .map-node-name { color: color-mix(in srgb, var(--youming-purple) 40%, white); }

/* -- 天龙苍境: 雷电苍蓝色调 -- */
.map-region-tianlong {
    background:
        radial-gradient(ellipse at 60% 30%, color-mix(in srgb, var(--tianlong-azure) 10%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 70%, color-mix(in srgb, var(--tianlong-azure) 55%, white) 0%, transparent 50%),
        linear-gradient(180deg, black 0%, var(--combat-dark) 40%, black 100%);
    border-color: color-mix(in srgb, var(--tianlong-azure) 20%, transparent);
}
.map-region-tianlong .map-region-watermark { color: color-mix(in srgb, var(--tianlong-azure) 4%, transparent); }
.map-region-tianlong .map-node-dot { background: var(--tianlong-azure); border-color: color-mix(in srgb, var(--tianlong-azure) 40%, transparent); }
.map-region-tianlong .map-node-name { color: color-mix(in srgb, var(--tianlong-azure) 45%, white); }
.map-region-tianlong .map-node-range { background: color-mix(in srgb, var(--bg-primary) 80%, transparent); border-color: color-mix(in srgb, var(--tianlong-azure) 25%, transparent); color: color-mix(in srgb, var(--tianlong-azure) 50%, var(--text-muted)); }
.map-region-tianlong .map-node-open .map-node-name { color: color-mix(in srgb, var(--tianlong-azure) 35%, white); }
.map-region-tianlong .map-node-open .map-node-range { color: color-mix(in srgb, var(--ghost-purple) 95%, transparent); border-color: color-mix(in srgb, var(--tianlong-azure) 30%, transparent); }
.map-region-tianlong .map-node-open:hover .map-node-dot { box-shadow: 0 0 12px color-mix(in srgb, var(--tianlong-azure) 60%, transparent), 0 0 24px color-mix(in srgb, var(--tianlong-azure) 55%, white); }
.map-region-tianlong .map-node-current .map-node-dot { background: linear-gradient(135deg, color-mix(in srgb, var(--tianlong-azure) 55%, white), color-mix(in srgb, var(--beihuang-blue) 40%, white)); border-color: color-mix(in srgb, var(--tianlong-azure) 60%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--tianlong-azure) 50%, transparent); }
.map-region-tianlong .map-node-current .map-node-name { color: color-mix(in srgb, var(--tianlong-azure) 30%, white); }

/* -- 极魔血渊: 暗红血色调 -- */
.map-region-jimo {
    background:
        radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--accent-crimson) 10%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 20%, color-mix(in srgb, var(--ghost-purple-bg) 8%, transparent) 0%, transparent 50%),
        linear-gradient(180deg, var(--combat-dark) 0%, var(--combat-dark) 40%, black 100%);
    border-color: color-mix(in srgb, var(--jimo-crimson) 20%, transparent);
}
.map-region-jimo .map-region-watermark { color: color-mix(in srgb, var(--jimo-crimson) 4%, transparent); }
.map-region-jimo .map-node-dot { background: var(--jimo-crimson); border-color: color-mix(in srgb, var(--jimo-crimson) 40%, transparent); }
.map-region-jimo .map-node-name { color: color-mix(in srgb, var(--jimo-crimson) 45%, white); }
.map-region-jimo .map-node-range { background: color-mix(in srgb, var(--combat-dark) 80%, transparent); border-color: color-mix(in srgb, var(--jimo-crimson) 25%, transparent); color: color-mix(in srgb, var(--jimo-crimson) 50%, var(--text-muted)); }
.map-region-jimo .map-node-open .map-node-name { color: color-mix(in srgb, var(--danger-color) 35%, white); }
.map-region-jimo .map-node-open .map-node-range { color: color-mix(in srgb, var(--jimo-crimson) 95%, transparent); border-color: color-mix(in srgb, var(--jimo-crimson) 30%, transparent); }
.map-region-jimo .map-node-open:hover .map-node-dot { box-shadow: 0 0 12px color-mix(in srgb, var(--jimo-crimson) 60%, transparent), 0 0 24px color-mix(in srgb, var(--danger-color) 30%, transparent); }
.map-region-jimo .map-node-current .map-node-dot { background: linear-gradient(135deg, color-mix(in srgb, var(--jimo-crimson) 55%, white), color-mix(in srgb, var(--jimo-crimson) 90%, black)); border-color: color-mix(in srgb, var(--jimo-crimson) 55%, white); box-shadow: 0 0 14px color-mix(in srgb, var(--jimo-crimson) 55%, white); }
.map-region-jimo .map-node-current .map-node-name { color: color-mix(in srgb, var(--danger-color) 30%, white); }

/* -- 长生大荒: 枯木生机金绿色调 -- */
.map-region-changsheng {
    background:
        radial-gradient(ellipse at 40% 40%, color-mix(in srgb, var(--changsheng-green) 8%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 80%, color-mix(in srgb, var(--wanyao-gold) 6%, transparent) 0%, transparent 50%),
        linear-gradient(180deg, black 0%, var(--combat-dark) 40%, black 100%);
    border-color: color-mix(in srgb, var(--changsheng-green) 20%, transparent);
}
.map-region-changsheng .map-region-watermark { color: color-mix(in srgb, var(--changsheng-green) 4%, transparent); }
.map-region-changsheng .map-node-dot { background: var(--changsheng-green); border-color: color-mix(in srgb, var(--changsheng-green) 40%, transparent); }
.map-region-changsheng .map-node-name { color: color-mix(in srgb, var(--changsheng-green) 45%, white); }
.map-region-changsheng .map-node-range { background: color-mix(in srgb, var(--bg-primary) 80%, transparent); border-color: color-mix(in srgb, var(--changsheng-green) 25%, transparent); color: color-mix(in srgb, var(--changsheng-green) 50%, var(--text-muted)); }
.map-region-changsheng .map-node-open .map-node-name { color: color-mix(in srgb, var(--changsheng-green) 35%, white); }
.map-region-changsheng .map-node-open .map-node-range { color: color-mix(in srgb, var(--canghai-teal) 95%, transparent); border-color: color-mix(in srgb, var(--changsheng-green) 30%, transparent); }
.map-region-changsheng .map-node-open:hover .map-node-dot { box-shadow: 0 0 12px color-mix(in srgb, var(--changsheng-green) 60%, transparent), 0 0 24px color-mix(in srgb, var(--changsheng-green) 50%, white); }
.map-region-changsheng .map-node-current .map-node-dot { background: linear-gradient(135deg, color-mix(in srgb, var(--changsheng-green) 55%, white), color-mix(in srgb, var(--changsheng-green) 40%, var(--craft-gold-bright))); border-color: color-mix(in srgb, var(--changsheng-green) 55%, white); box-shadow: 0 0 14px color-mix(in srgb, var(--changsheng-green) 55%, white); }
.map-region-changsheng .map-node-current .map-node-name { color: color-mix(in srgb, var(--changsheng-green) 30%, white); }

/* -- 混沌墟土: 虚无灰紫色调 -- */
.map-region-hundun {
    background:
        radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--ghost-purple-accent) 10%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 70%, color-mix(in srgb, var(--hundun-gray) 8%, transparent) 0%, transparent 50%),
        linear-gradient(180deg, var(--combat-dark) 0%, var(--combat-dark) 40%, color-mix(in srgb, var(--youming-purple) 15%, black) 100%);
    border-color: color-mix(in srgb, var(--hundun-gray) 20%, transparent);
}
.map-region-hundun .map-region-watermark { color: color-mix(in srgb, var(--hundun-gray) 4%, transparent); }
.map-region-hundun .map-node-dot { background: var(--hundun-gray); border-color: color-mix(in srgb, var(--hundun-gray) 40%, transparent); }
.map-region-hundun .map-node-name { color: color-mix(in srgb, var(--hundun-gray) 45%, white); }
.map-region-hundun .map-node-range { background: color-mix(in srgb, var(--combat-dark) 80%, transparent); border-color: color-mix(in srgb, var(--hundun-gray) 25%, transparent); color: color-mix(in srgb, var(--hundun-gray) 50%, var(--text-muted)); }
.map-region-hundun .map-node-open .map-node-name { color: color-mix(in srgb, var(--hundun-gray) 35%, white); }
.map-region-hundun .map-node-open .map-node-range { color: color-mix(in srgb, var(--ghost-purple) 95%, transparent); border-color: color-mix(in srgb, var(--hundun-gray) 30%, transparent); }
.map-region-hundun .map-node-open:hover .map-node-dot { box-shadow: 0 0 12px color-mix(in srgb, var(--hundun-gray) 60%, transparent), 0 0 24px color-mix(in srgb, var(--youming-purple) 30%, transparent); }
.map-region-hundun .map-node-current .map-node-dot { background: linear-gradient(135deg, color-mix(in srgb, var(--hundun-gray) 55%, white), color-mix(in srgb, var(--youming-purple) 35%, white)); border-color: color-mix(in srgb, var(--hundun-gray) 55%, white); box-shadow: 0 0 14px color-mix(in srgb, var(--hundun-gray) 55%, white); }
.map-region-hundun .map-node-current .map-node-name { color: color-mix(in srgb, var(--hundun-gray) 30%, white); }

/* ===== 沧海郡微调 ===== */
.map-region-canghai {
    background:
        radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--tianlong-azure) 8%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse at 30% 30%, color-mix(in srgb, var(--accent-jade) 6%, transparent) 0%, transparent 50%),
        var(--bg-panel);
    border-color: color-mix(in srgb, var(--accent-jade) 20%, transparent);
}

/* ===== 地图桌面端优化 ===== */
@media (min-width: 769px) {
    .map-canvas {
        height: min(72vh, 600px);
    }

    .map-node {
        gap: var(--space-6);
    }

    .map-node-dot {
        width: 14px;
        height: 14px;
    }

    .map-node-name {
        font-size: var(--font-body);
        letter-spacing: 1px;
    }

    .map-node-range {
        font-size: var(--font-micro);
        padding: var(--space-2) var(--space-8);
        letter-spacing: 0.5px;
    }

    .map-node-badge {
        font-size: var(--font-micro);
        padding: var(--space-2) var(--space-8);
    }

    .map-node-current .map-node-dot {
        width: 18px;
        height: 18px;
    }

    .map-node-current .map-node-name {
        font-size: var(--font-body-lg);
    }
}

/* ===== 探索日志类型 ===== */
.log-explore {
    color: var(--text-jade);
}

.log-move {
    color: var(--ghost-purple-muted);
}

.log-death {
    color: var(--danger-color);
    font-weight: 600;
}

.log-revive {
    color: var(--gold);
}

.log-rest {
    color: var(--ghost-purple-muted);
}


/* ===== 自定义高级悬浮提示框 ===== */
.map-custom-tooltip {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    width: max-content;
    max-width: 280px;
    background: var(--bg-card);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid var(--accent-jade);
    border-radius: var(--radius-md);
    padding: var(--space-12) var(--space-14);
    color: var(--text-primary);
    box-shadow: var(--shadow-md, 0 8px 32px var(--shadow-black-1)), inset 0 0 0 1px var(--border-color);
    transform: translate(-50%, -100%);
    margin-top: calc(-1 * var(--space-14));
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

.map-custom-tooltip.show {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 4px));
}
.map-custom-tooltip.danger-border {
    border-color: var(--accent-crimson);
}
.map-custom-tooltip.danger-title .map-tooltip-title {
    color: var(--text-red);
}

.map-custom-tooltip::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 7px 7px 0;
    border-style: solid;
    border-color: var(--accent-jade) transparent transparent transparent;
}
.map-custom-tooltip.danger-border::after {
    border-color: var(--accent-crimson) transparent transparent transparent;
}

.map-tooltip-title {
    font-size: var(--font-action);
    font-weight: 600;
    color: var(--text-jade);
    margin-bottom: var(--space-2);
    letter-spacing: 1px;
}

.map-tooltip-desc {
    font-size: var(--font-label);
    color: var(--text-primary);
    line-height: 1.7;
    border-top: 1px dashed var(--border-color);
    padding-top: var(--space-8);
    white-space: pre-wrap;
}

.map-tooltip-warning {
    font-size: var(--font-caption);
    color: var(--text-red);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    font-weight: 600;
    border-top: 1px dashed var(--border-color);
}

/* ===== 世界大图深度虚空图卷 ===== */
.map-region-world {
    background: 
        radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--youming-purple) 40%, transparent) 0%, color-mix(in srgb, var(--bg-primary) 95%, transparent) 100%),
        var(--bg-panel);
    border-color: color-mix(in srgb, var(--jimo-crimson) 55%, white);
}
.map-region-world .map-node-dot {
    background: var(--danger-color);
    box-shadow: 0 0 12px color-mix(in srgb, var(--jimo-crimson) 55%, white);
}
.map-region-world .map-node-name {
    color: color-mix(in srgb, var(--danger-color) 50%, white);
    text-shadow: 0 0 5px color-mix(in srgb, var(--danger-color) 60%, transparent), 0 0 15px color-mix(in srgb, var(--danger-color) 30%, transparent);
    font-size: var(--font-action);
    font-weight: bold;
    letter-spacing: 2px;
}

/* ===== 节点 Hover 动效(仅高亮,不位移/缩放,避免重影) ===== */
.map-node {
    transition: box-shadow 0.3s;
}
.map-node:hover {
    z-index: 100;
}
.map-node:hover .map-node-dot {
    box-shadow: 0 0 15px var(--accent-jade), 0 0 30px color-mix(in srgb, var(--accent-jade) 40%, transparent);
}
.map-region-world .map-node:hover .map-node-dot {
    box-shadow: 0 0 15px color-mix(in srgb, var(--danger-color) 50%, white), 0 0 30px color-mix(in srgb, var(--danger-color) 50%, transparent);
}

/* ===== 高阶界门中心涟漪呼吸 ===== */
.map-node-hub .map-node-dot {
    width: 12px;
    height: 12px;
    background: var(--accent-gold);
    box-shadow: 0 0 12px var(--accent-gold);
    position: relative;
}
.map-node-hub .map-node-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--craft-gold-bright) 50%, transparent);
    animation: hubRipple 2.5s infinite ease-out;
    pointer-events: none;
}
@keyframes hubRipple {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--craft-gold-bright) 60%, transparent); }
    100% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--craft-gold-bright) 0%, transparent); }
}
.map-region-world .map-node-hub .map-node-dot::before {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger-color) 50%, transparent);
    animation: hubRippleWorld 2.5s infinite ease-out;
}
@keyframes hubRippleWorld {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger-color) 60%, transparent); }
    100% { box-shadow: 0 0 0 20px color-mix(in srgb, var(--danger-color) 0%, transparent); }
}

/* ===== 连线生动流光 (SVG line) ===== */
@keyframes voidStream {
    from { stroke-dashoffset: 10; }
    to { stroke-dashoffset: 0; }
}
.line-animated {
    animation: voidStream 0.6s linear infinite;
}

.map-node-online {
    background: color-mix(in srgb, var(--jimo-crimson) 85%, transparent) !important;
    color: var(--craft-gold-soft) !important;
    border: 1px solid color-mix(in srgb, var(--craft-gold-bright) 40%, transparent) !important;
    box-shadow: 0 1px 4px var(--shadow-black-1) !important;
    font-weight: bold !important;
    margin-top: var(--space-2) !important;
}

/* ===== 区域卡片式地图 ===== */
.map-canvas {
    min-height: 560px;
    
    
    
    
    
    
}

.map-node {
    width: 108px;
    align-items: stretch;
    gap: 0;
}

.map-node[role="button"] {
    cursor: pointer;
}

.map-node.map-node-fog {
    opacity: 0.74;
    filter: none;
}

.map-node-badge {
    position: relative;
    z-index: 1;
}

.map-node-badge {
    position: absolute;
    top: -8px;
    right: -6px;
    top: -7px;
    right: -5px;
    border: 1px solid color-mix(in srgb, var(--accent-gold) 58%, transparent);
    background: var(--accent-gold);
    color: var(--text-on-gold);
    box-shadow: var(--shadow-sm);
}

@media (min-width: 769px) {
    .map-canvas {
        height: min(78vh, 720px);
    }

    .map-node {
        width: 116px;
    }
}

@media (max-width: 768px) {
    .map-region-tabs {
        overflow-x: auto;
        padding-bottom: var(--space-2);
    }

    .map-region-tab {
        min-width: 74px;
        flex: 0 0 auto;
        letter-spacing: 0;
    }

    .map-material-search {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .map-material-search__btn--muted {
        grid-column: 2;
    }

    .map-canvas {
        min-height: 540px;
    }

    .map-node {
        width: 104px;
    }
}

html.theme-light .map-canvas {
    
    
    
    
    
    
    background:
        radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--canghai-teal) 5%, transparent) 0%, transparent 60%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 78%, transparent), color-mix(in srgb, var(--bg-panel) 92%, transparent)),
        var(--bg-panel);
}

html.theme-light .map-region-world,
html.theme-light .map-region-beihuang,
html.theme-light .map-region-canghai,
html.theme-light .map-region-wanyao,
html.theme-light .map-region-youming,
html.theme-light .map-region-tianlong,
html.theme-light .map-region-jimo,
html.theme-light .map-region-changsheng,
html.theme-light .map-region-hundun {
    background:
        radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--canghai-teal) 6%, transparent) 0%, transparent 58%),
        radial-gradient(ellipse at 18% 20%, color-mix(in srgb, var(--jimo-crimson) 4%, transparent) 0%, transparent 42%),
        var(--bg-panel);
}

html.theme-light .map-region-world .map-node-dot,
html.theme-light .map-node-dot {
    box-shadow: none;
}

html.theme-light .map-region-world .map-node-name,
html.theme-light .map-node-name {
    text-shadow: none;
}

html.theme-light .map-node-online {
    background: color-mix(in srgb, var(--accent-gold) 10%, white) !important;
    border-color: color-mix(in srgb, var(--accent-gold) 28%, transparent) !important;
    color: var(--text-gold) !important;
    box-shadow: none !important;
}
.map-node {
    width: 132px !important;
}

.map-node-badge {
    top: -6px !important;
    right: -4px !important;
    padding: var(--space-2) var(--space-6) !important;
    border-radius: var(--radius-pill) !important;
    font-size: var(--font-micro) !important;
}

.map-tooltip-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: var(--space-6) 0 var(--space-8);
}

.map-tooltip-meta span {
    display: inline-flex;
    padding: var(--space-2) var(--space-6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--bg-card-hover) 70%, transparent);
    color: var(--text-secondary);
    font-size: var(--font-micro);
    line-height: 1.2;
}
html.theme-light .map-custom-tooltip {
    background: color-mix(in srgb, var(--bg-card) 96%, white 4%);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}

@media (min-width: 769px) {
    .map-node {
        width: 144px !important;
    }
}

@media (max-width: 768px) {
    .map-node {
        width: 120px !important;
    }
}

/* ===== 地图 POI v2: 抛弃卡片式节点，改为地标 + 名牌 ===== */
.map-node {
    width: 132px !important;
    align-items: center !important;
    pointer-events: auto;
}

.map-poi {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    min-height: 46px;
    padding: var(--space-6) var(--space-10) var(--space-6) var(--space-8);
    /* 实色框+底兜底：App 旧 WebView 丢弃 color-mix 时仍可见地标外壳，避免「只有字没有框」 */
    border: 1px solid var(--border-color);
    border-color: color-mix(in srgb, var(--border-color) 70%, var(--accent-jade) 30%);
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    box-shadow: none;
    color: var(--text-primary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.map-poi-pin {
    display: flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--accent-jade);
    border-color: color-mix(in srgb, var(--accent-jade) 46%, transparent);
    border-radius: 50%;
    background: var(--bg-card);
    background:
        radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--bg-card-hover) 82%, transparent), transparent 58%),
        color-mix(in srgb, var(--accent-jade) 12%, var(--bg-card));
    color: var(--text-jade);
}

.map-poi-label {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
}

.map-poi-name {
    overflow: hidden;
    color: var(--text-primary) !important;
    font-size: var(--font-body) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: none !important;
}

.map-poi-meta {
    display: -webkit-box;
    max-height: 2.3em;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: var(--font-micro);
    line-height: 1.15;
    text-align: left;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* #9233：野外钓点小标。不占右上角（传送/产地）和左上角（当前），贴在地标左下 */
.map-poi-fish {
    position: absolute;
    left: 8px;
    bottom: -7px;
    z-index: 2;
    min-width: 16px;
    height: 16px;
    padding: 0 var(--space-4);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 42%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--bg-card) 90%, var(--accent-jade) 10%);
    color: var(--text-jade);
    font-size: var(--font-micro);
    line-height: 14px;
    letter-spacing: 0;
    text-align: center;
}
/* #9783 有商铺的区域角标；与钓点同点时向右错开 */
.map-poi-shop {
    position: absolute;
    left: 8px;
    bottom: -7px;
    z-index: 2;
    min-width: 16px;
    height: 16px;
    padding: 0 var(--space-4);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 42%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--bg-card) 90%, var(--accent-gold) 10%);
    color: var(--text-gold);
    font-size: var(--font-micro);
    line-height: 14px;
    letter-spacing: 0;
    text-align: center;
}
.map-poi-fish + .map-poi-shop {
    left: 32px;
}
.map-poi-extra {
    position: absolute;
    top: -8px;
    right: 10px;
    max-width: 48px;
    overflow: hidden;
    padding: var(--space-2) var(--space-6);
    border: 1px solid var(--accent-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 36%, transparent);
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    background: color-mix(in srgb, var(--bg-card) 92%, var(--accent-gold) 8%);
    color: var(--text-gold);
    font-size: var(--font-micro);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-node:hover {
    transform: translate(-50%, calc(-50% - 3px)) !important;
}

.map-node:hover .map-poi {
    border-color: var(--accent-jade);
    border-color: color-mix(in srgb, var(--accent-jade) 68%, var(--border-color));
    background: var(--bg-card);
    background: color-mix(in srgb, var(--bg-card) 96%, transparent);
    box-shadow: none;
    transform: translateY(-1px);
}

.map-node[role="button"]:focus-visible .map-poi {
    outline: 2px solid var(--accent-jade);
    outline: 2px solid color-mix(in srgb, var(--accent-jade) 80%, transparent);
    outline-offset: 4px;
}

.map-node-focused .map-poi {
    border-color: var(--accent-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 78%, var(--border-color));
    background: var(--bg-card);
    box-shadow: 0 0 0 2px rgba(183, 120, 31, 0.28);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-gold) 28%, transparent);
    animation: map-focus-pulse 1.2s ease-in-out 2;
    transform: translateY(-2px);
}

.map-node-pinned-focus .map-poi {
    border-color: var(--accent-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 82%, var(--border-color));
    background: var(--bg-card);
    box-shadow: 0 0 0 2px rgba(183, 120, 31, 0.32);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-gold) 32%, transparent);
    animation: map-focus-pulse 1.6s ease-in-out infinite;
}

.map-node-pinned-focus .map-poi-pin {
    border-color: var(--accent-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 62%, transparent);
    background: var(--bg-card);
    background: color-mix(in srgb, var(--accent-gold) 18%, var(--bg-card));
    color: var(--text-gold);
}

.map-node-badge--focus {
    background: color-mix(in srgb, var(--accent-gold) 84%, #fff 16%) !important;
    color: var(--text-on-gold) !important;
}

@keyframes map-focus-pulse {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.25);
    }
}

.map-poi-status-current {
    border-color: var(--accent-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 56%, var(--border-color));
    background: var(--bg-card);
}

.map-poi-status-current .map-poi-pin {
    border-color: var(--accent-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 54%, transparent);
    background: var(--bg-card);
    background: color-mix(in srgb, var(--accent-gold) 15%, var(--bg-card));
    color: var(--text-gold);
}

.map-poi-status-teleport .map-poi-pin {
    border-color: var(--accent-purple, var(--ghost-purple, #8860c0));
    border-color: color-mix(in srgb, var(--accent-purple) 48%, transparent);
    background: var(--bg-card);
    background: color-mix(in srgb, var(--accent-purple) 13%, var(--bg-card));
    color: var(--accent-purple);
}

.map-poi-status-locked,
.map-poi-status-fog {
    border-color: var(--border-color);
    border-color: color-mix(in srgb, var(--border-color) 84%, transparent);
    background: var(--bg-card);
}

.map-poi-status-locked .map-poi-pin,
.map-poi-status-fog .map-poi-pin {
    border-color: var(--border-color);
    background: var(--bg-card-hover, var(--bg-card));
    background: color-mix(in srgb, var(--bg-card-hover) 64%, transparent);
    color: var(--text-muted);
}

.map-poi-danger-danger,
.map-poi-danger-extreme {
    border-color: var(--accent-crimson);
    border-color: color-mix(in srgb, var(--accent-crimson) 52%, var(--border-color));
}

.map-poi-danger-danger .map-poi-pin,
.map-poi-danger-extreme .map-poi-pin {
    border-color: var(--accent-crimson);
    border-color: color-mix(in srgb, var(--accent-crimson) 48%, transparent);
    background: var(--bg-card);
    background: color-mix(in srgb, var(--accent-crimson) 12%, var(--bg-card));
    color: var(--text-red);
}

.map-node-badge {
    top: -9px !important;
    right: auto !important;
    left: 10px !important;
    padding: var(--space-2) var(--space-8) !important;
    border-radius: var(--radius-pill) !important;
    border: 1px solid var(--accent-gold) !important;
    border-color: color-mix(in srgb, var(--accent-gold) 50%, transparent) !important;
    background: var(--accent-gold) !important;
    color: var(--text-on-gold) !important;
    font-size: var(--font-micro) !important;
    line-height: 1 !important;
    box-shadow: var(--shadow-sm) !important;
}

html.theme-light .map-poi {
    background: var(--bg-card);
    background: color-mix(in srgb, var(--bg-card) 96%, transparent);
    box-shadow: none;
}

html.theme-light .map-poi-extra {
    background: var(--bg-card);
    background: color-mix(in srgb, var(--bg-card) 94%, var(--accent-gold) 6%);
}

@media (min-width: 769px) {
    .map-node {
        width: 148px !important;
    }

    .map-poi-name {
        font-size: var(--font-body-lg) !important;
    }
}

@media (max-width: 768px) {
    .map-pinned-focus {
        align-items: stretch;
        flex-direction: column;
        gap: var(--space-8);
    }

    .map-pinned-focus__main {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-6);
    }

    .map-pinned-focus__text,
    .map-pinned-focus__hint {
        width: 100%;
        white-space: normal;
    }

    .map-pinned-focus__clear {
        width: 100%;
    }

    .map-node {
        width: 108px !important;
    }

    .map-poi {
        grid-template-columns: 26px minmax(0, 1fr);
        gap: var(--space-6);
        min-height: 38px;
        padding: var(--space-4) var(--space-8) var(--space-4) var(--space-6);
    }

    .map-poi-pin {
        width: 26px;
        height: 26px;
    }

    .map-poi-name {
        font-size: var(--font-caption) !important;
    }

    .map-poi-meta {
        font-size: var(--font-micro);
    }

    .map-poi-extra {
        top: -7px;
        right: 8px;
        max-width: 42px;
        padding: var(--space-2) var(--space-6);
        font-size: var(--font-micro);
    }

    .map-node-badge {
        top: -8px !important;
        left: 8px !important;
        padding: var(--space-2) var(--space-6) !important;
        font-size: var(--font-micro) !important;
    }
}

@media (max-width: 420px) {
    .map-canvas {
        min-height: 500px;
    }

    .map-node {
        width: 98px !important;
    }

    .map-poi {
        grid-template-columns: 24px minmax(0, 1fr);
        gap: var(--space-4);
        min-height: 36px;
        padding: var(--space-4) var(--space-6) var(--space-4) var(--space-6);
    }

    .map-poi-pin {
        width: 24px;
        height: 24px;
    }

    .map-poi-name {
        font-size: var(--font-caption) !important;
    }

    .map-poi-meta {
        font-size: var(--font-micro);
    }
}

.map-poi-meta.map-poi-meta {
    max-height: 2.3em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

@media (hover: none), (pointer: coarse) {
    .map-custom-tooltip.show {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translate(-50%, -100%) !important;
    }

    .map-node:hover {
        transform: translate(-50%, -50%) !important;
        z-index: 2;
    }

    .map-node:hover .map-poi {
        box-shadow: none;
        transform: none;
    }
}

.map-route-canvas .map-node {
    width: 116px !important;
}

.map-route-canvas .map-poi {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: 42px;
    padding: var(--space-6) var(--space-10);
    /* 路线视图也保留实色框兜底，避免 App 无框 */
    background: var(--bg-card);
    background: color-mix(in srgb, var(--bg-card) 90%, transparent);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.map-route-canvas .map-poi-pin {
    display: none;
}

.map-route-canvas .map-poi-label {
    align-items: center;
}

.map-route-canvas .map-poi-name {
    font-size: var(--font-label) !important;
    line-height: 1.05 !important;
    text-align: center !important;
}

.map-route-canvas .map-poi-meta {
    display: -webkit-box;
    max-height: 2.25em;
    margin-top: var(--space-4);
    color: var(--text-secondary);
    font-size: var(--font-micro);
    line-height: 1.12;
    text-align: center;
    -webkit-line-clamp: 2;
}

.map-route-canvas .map-poi-extra {
    top: -6px;
    right: 6px;
    max-width: 38px;
    padding: var(--space-2) var(--space-6);
    font-size: var(--font-micro);
}
.map-route-canvas .map-poi-fish {
    left: 6px;
    bottom: -6px;
}

.map-route-canvas .map-node-badge {
    top: -7px !important;
    left: 7px !important;
    padding: var(--space-2) var(--space-6) !important;
    font-size: var(--font-micro) !important;
}

@media (min-width: 769px) {
    .map-route-canvas .map-node {
        width: 128px !important;
    }
}

@media (max-width: 768px) {
    .map-route-canvas .map-node {
        width: 112px !important;
    }

    .map-route-canvas .map-poi {
        min-height: 40px;
        padding: var(--space-6) var(--space-8);
    }

    .map-route-canvas .map-poi-name {
        font-size: var(--font-caption) !important;
    }

    .map-route-canvas .map-poi-meta {
        font-size: var(--font-micro);
    }
}

@media (max-width: 420px) {
    .map-route-canvas .map-node {
        width: 104px !important;
    }

    .map-route-canvas .map-poi {
        min-height: 38px;
        padding: var(--space-6) var(--space-6);
    }
}

/* 地图只显示地标和路线，不再绘制固定方形底板 */
.map-canvas,
.map-container,
#mapCanvasWrap,
.map-region-world,
.map-region-beihuang,
.map-region-canghai,
.map-region-wanyao,
.map-region-youming,
.map-region-tianlong,
.map-region-jimo,
.map-region-changsheng,
.map-region-hundun {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   地图物产弹窗 · A 物产笺
   design/map-drops-modal — 纵列表 + 品阶名色 + 掉率章
   无左轨 / 无通栏顶条；壳用 gc-dialog
   ═══════════════════════════════════════════════════════════════ */
.map-drops-dialog.gc-dialog {
    width: min(100%, 380px);
    max-height: min(88vh, 640px);
}
.map-drops-dialog .gc-mid {
    text-align: left;
    max-height: min(52vh, 400px);
    overflow: auto;
}
.map-drops-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}
.map-drops-chip {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-pill);
    font-size: var(--font-caption);
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    border: 1px solid var(--border-color);
}
.map-drops-chip--jade {
    color: var(--text-jade);
    border-color: color-mix(in srgb, var(--accent-jade) 35%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 8%, transparent);
}
.map-drops-note {
    font-size: var(--font-caption);
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0 0 var(--space-12);
    text-wrap: wrap;
}
.map-drops-empty {
    padding: var(--space-32) var(--space-8);
    text-align: center;
    font-size: var(--font-body);
    line-height: 1.7;
    color: var(--text-secondary);
}
.map-drops-area + .map-drops-area {
    margin-top: var(--space-16);
}
.map-drops-area-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}
.map-drops-area-name {
    min-width: 0;
    flex: 1 1 auto;
    font-size: var(--font-body);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}
.map-drops-area-meta {
    flex: none;
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.3;
}
.map-drops-list {
    display: flex;
    flex-direction: column;
}
.map-drops-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-4) var(--space-12);
    align-items: center;
    padding: var(--space-10) 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent);
}
.map-drops-row:last-child {
    border-bottom: 0;
}
.map-drops-name {
    font-size: var(--font-body-lg);
    font-weight: 600;
    letter-spacing: 0.4px;
    line-height: 1.35;
    min-width: 0;
}
.map-drops-type {
    grid-column: 1;
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.3;
}
.map-drops-rate {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    min-width: 54px;
    text-align: center;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: var(--font-label);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
.map-drops-rate.is-high {
    color: var(--text-jade);
    border-color: color-mix(in srgb, var(--accent-jade) 40%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 8%, transparent);
}
.map-drops-rate.is-mid {
    color: var(--text-gold);
    border-color: var(--border-gold, color-mix(in srgb, var(--accent-gold) 40%, transparent));
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
}