/* ===== 三角洲·跑刀路线前台页 =====
   配合 templates/html/delta/delta_run_route.html 与 delta_run_route_embed.html 使用。
   地图叠加层沿用通用地图板块的约定：坐标是底图百分比，
   SVG 用 viewBox="0 0 100 100" preserveAspectRatio="none"，
   stroke 一律加 vector-effect="non-scaling-stroke"，避免被 viewBox 拉伸变粗。 */

/* ===== 概览数字 ===== */
.rr-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .6rem;
}
.rr-stat {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .8rem;
    border: 1px solid var(--dta-border);
    border-radius: 12px;
    background: var(--dta-panel);
}
.rr-stat > .bi {
    font-size: 1.2rem;
    color: var(--dta-cyan);
}
.rr-stat-v {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dta-text);
    font-family: var(--dta-mono);
    line-height: 1.2;
}
.rr-stat-l { font-size: .74rem; color: var(--dta-muted); }

/* ===== 地图切换 ===== */
.rr-maps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}
.rr-maps-label {
    font-size: .82rem;
    color: var(--dta-muted);
    margin-right: .2rem;
    white-space: nowrap;
}

/* ===== 当前路线标题与元信息 ===== */
.rr-detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: .85rem 0;
}
.rr-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}
.rr-title h5 { color: var(--dta-text); font-weight: 700; }
.rr-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
    font-size: .8rem;
    color: var(--dta-muted);
}
.rr-meta-item { display: inline-flex; align-items: center; gap: .3rem; }
.rr-meta-item .bi { color: var(--dta-cyan); }

/* ===== 游戏模式标签（普通 / 机密 / 绝密，只有这三档） ===== */
.rr-mode {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 99px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.rr-mode-normal { color: #4ade80; background: rgba(74, 222, 128, .12); border-color: rgba(74, 222, 128, .3); }
.rr-mode-confidential { color: #fbbf24; background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .3); }
.rr-mode-topsecret { color: #f87171; background: rgba(248, 113, 113, .14); border-color: rgba(248, 113, 113, .34); }

/* ===== 地图组件 ===== */
.run-route-map {
    margin: 0;
    border: 1px solid var(--dta-border);
    border-radius: 14px;
    background: var(--dta-panel);
    overflow: hidden;
}
.run-route-map .rrm-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--dta-border);
    font-size: .88rem;
    font-weight: 700;
    color: var(--dta-text);
}
.run-route-map .rrm-head .rrm-route {
    font-weight: 400;
    font-size: .78rem;
    color: var(--dta-muted);
    border-left: 1px solid var(--dta-border);
    padding-left: .5rem;
}
.run-route-map .rrm-head .rrm-hint {
    margin-left: auto;
    font-size: .74rem;
    font-weight: 400;
    color: var(--dta-muted);
}
.rrm-c-start { color: #22c55e; }
.rrm-c-way { color: #38bdf8; }
.rrm-c-end { color: #f97316; }

.run-route-map .rrm-canvas {
    position: relative;
    line-height: 0;
    background: rgba(15, 23, 42, .04);
}
.run-route-map .rrm-canvas > img {
    width: 100%;
    height: auto;
    display: block;
}
.run-route-map .rrm-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* 路线显隐：默认只显示出生点标记，不画线；只有被悬停/点选的出生点那一组才显示。
   data-active 由页面脚本按当前出生点设置（纯 CSS 做不到「悬停 A 处显示 B 处的一组线」）。 */
.run-route-map .rrm-group,
.run-route-map .rrm-pin[data-spawn] { display: none; }
.run-route-map[data-active] .rrm-group[data-spawn] { display: inline; }
.run-route-map[data-active] .rrm-pin[data-spawn] { display: flex; }

/* 撤离点：属于某一条路线，跟着它那个出生点一起显隐 */
.run-route-map .rrm-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: .28rem;
    pointer-events: none;
}
.run-route-map .rrm-pin > .bi { font-size: 1.28rem; line-height: 1; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); }
.run-route-map .rrm-exit > .bi { color: #f97316; }
.run-route-map .rrm-pin .rrm-tag {
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;
    padding: .05rem .4rem;
    border-radius: 6px;
    white-space: nowrap;
    color: var(--dta-text);
    background: rgba(6, 16, 24, .78);
    border: 1px solid var(--dta-border-strong);
}
body.theme-light .run-route-map .rrm-pin .rrm-tag { color: #0f172a; background: rgba(255, 255, 255, .9); }

/* 出生点标记：本页主交互，始终可见、可悬停可点击 */
.run-route-map .rrm-spawn {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: .28rem;
    cursor: pointer;
    pointer-events: auto;
}
.run-route-map .rrm-spawn > .bi {
    font-size: 1.32rem;
    line-height: 1;
    color: #22c55e;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
    transition: transform .15s ease;
}
.run-route-map .rrm-spawn .rrm-tag {
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.4;
    padding: .08rem .45rem;
    border-radius: 6px;
    white-space: nowrap;
    color: var(--dta-text);
    background: rgba(6, 16, 24, .8);
    border: 1px solid rgba(34, 197, 94, .5);
}
body.theme-light .run-route-map .rrm-spawn .rrm-tag { color: #0f172a; background: rgba(255, 255, 255, .92); }
/* 路线条数角标 */
.run-route-map .rrm-spawn .rrm-cnt {
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 .22rem;
    border-radius: 99px;
    font-size: .62rem;
    font-weight: 700;
    text-align: center;
    color: #04140a;
    background: #22c55e;
}
.run-route-map .rrm-spawn:hover > .bi,
.run-route-map .rrm-spawn.is-active > .bi { transform: scale(1.25); }
.run-route-map .rrm-spawn.is-active .rrm-tag { border-color: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, .28); }
/* 没标位置的出生点：仍然列出来（提示管理员补齐），但不假装有路线 */
.run-route-map .rrm-spawn.is-invalid > .bi { color: #94a3b8; }
.run-route-map .rrm-spawn.is-invalid .rrm-tag { border-color: var(--dta-border); opacity: .7; }

/* 途经点序号 */
.run-route-map .rrm-way {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
    min-width: 17px;
    height: 17px;
    line-height: 15px;
    text-align: center;
    border-radius: 99px;
    font-size: .62rem;
    font-weight: 700;
    color: #061018;
    background: #7dd3fc;
    border: 1px solid rgba(255, 255, 255, .8);
    pointer-events: none;
}

.run-route-map .rrm-empty {
    padding: 2.4rem 1rem;
    text-align: center;
    color: var(--dta-muted);
    font-size: .84rem;
    line-height: 1.8;
}
.run-route-map .rrm-empty i { font-size: 1.7rem; display: block; margin-bottom: .4rem; opacity: .6; }
.run-route-map .rrm-warn {
    padding: .5rem .85rem;
    font-size: .78rem;
    color: #fbbf24;
    border-top: 1px solid var(--dta-border);
}
.run-route-map .rrm-foot {
    padding: .5rem .85rem;
    font-size: .76rem;
    color: var(--dta-muted);
    line-height: 1.7;
    border-top: 1px solid var(--dta-border);
}

/* ===== 出生点选择条：悬停预览、点一下固定 ===== */
.rr-spawn-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: .75rem;
}
.rr-spawn-bar-label {
    font-size: .82rem;
    color: var(--dta-muted);
    margin-right: .2rem;
    white-space: nowrap;
}
.rr-spawn-chip { display: inline-flex; align-items: center; gap: .3rem; }
.rr-spawn-chip .bi { color: #22c55e; font-size: .76rem; }
.rr-spawn-chip-cnt {
    min-width: 15px;
    padding: 0 .25rem;
    border-radius: 99px;
    font-size: .64rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    color: #061018;
    background: rgba(34, 197, 94, .85);
}
.rr-spawn-chip.active .rr-spawn-chip-cnt { background: #fff; color: #0f172a; }
.rr-spawn-bar-hint { font-size: .74rem; color: var(--dta-muted); margin-left: .2rem; }

/* ===== 出生点面板（地图下方 / 窄屏时的主内容） ===== */
.rr-focus { margin-top: 1rem; }
.rr-focus-head {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--dta-text);
}
.rr-focus-head .bi { color: #22c55e; }
.rr-focus-cnt { font-size: .76rem; font-weight: 400; color: var(--dta-muted); }

/* ===== 右侧面板：行进路线 / 关键提示 / 推荐配装 ===== */
.rr-panel {
    border: 1px solid var(--dta-border);
    border-radius: 14px;
    background: var(--dta-panel);
    overflow: hidden;
}
.rr-panel-head {
    display: flex;
    align-items: center;
    padding: .55rem .8rem;
    border-bottom: 1px solid var(--dta-border);
    font-size: .84rem;
    font-weight: 700;
    color: var(--dta-text);
}
.rr-panel-hint { margin-left: auto; font-size: .72rem; font-weight: 400; color: var(--dta-muted); }
.rr-panel-title { margin-left: .4rem; }
.rr-text { padding: .7rem .8rem; font-size: .82rem; color: var(--dta-muted); line-height: 1.75; }
/* 路线面板里的「起点 → 终点」摘要行 */
.rr-route-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .5rem .8rem;
    border-bottom: 1px solid var(--dta-border);
    font-size: .78rem;
    color: var(--dta-muted);
}
.rr-route-meta .bi { margin-right: .2rem; }
.rr-route-meta .rr-arrow { color: var(--dta-border-strong); }
.rr-route-meta .rr-earn { margin-left: auto; color: var(--dta-green); }
/* 面板里的小节标题（关键提示 / 推荐配装） */
.rr-panel-sub {
    padding: .5rem .8rem 0;
    font-size: .78rem;
    font-weight: 700;
    color: var(--dta-text);
}

.rr-steps {
    list-style: none;
    margin: 0;
    padding: .55rem .8rem .7rem;
    counter-reset: step;
}
.rr-step {
    position: relative;
    display: flex;
    gap: .5rem;
    padding: .3rem 0 .3rem .1rem;
    font-size: .82rem;
}
/* 步骤之间的连接竖线 */
.rr-step + .rr-step::before {
    content: "";
    position: absolute;
    left: 10px;
    top: -4px;
    width: 1px;
    height: .55rem;
    background: var(--dta-border);
}
.rr-step-idx {
    flex: none;
    width: 21px;
    height: 21px;
    line-height: 21px;
    text-align: center;
    border-radius: 50%;
    font-size: .7rem;
    font-weight: 700;
    color: #061018;
    background: #7dd3fc;
}
.rr-step.is-spawn .rr-step-idx { background: #22c55e; color: #04140a; }
.rr-step.is-exit .rr-step-idx { background: #f97316; color: #1a0c02; }
.rr-step-body { display: flex; flex-direction: column; min-width: 0; }
.rr-step-name { color: var(--dta-text); font-weight: 600; }
/* 节点的文字标注（后台逐点填写），前台只显示这段文字，不露出底图百分比坐标 */
.rr-step-note { font-size: .76rem; color: var(--dta-muted); line-height: 1.5; word-break: break-word; }
.rr-step-note.rr-step-blank { opacity: .55; font-style: italic; }

.rr-tips {
    margin: 0;
    padding: .6rem .8rem .7rem 1.9rem;
    font-size: .82rem;
    color: var(--dta-muted);
    line-height: 1.8;
}
.rr-tips li { margin-bottom: .2rem; }

.rr-link {
    display: block;
    padding: .65rem .8rem;
    font-size: .82rem;
    color: var(--dta-cyan);
    text-decoration: none;
}
.rr-link:hover { background: var(--dta-panel-hover); color: var(--dta-cyan); }

/* ===== 本图全部路线 ===== */
.rr-list-title { color: var(--dta-text); font-weight: 700; margin-bottom: .6rem; }
.rr-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: .6rem;
}
.rr-card {
    display: block;
    border: 1px solid var(--dta-border);
    border-radius: 13px;
    background: var(--dta-panel);
    padding: .6rem .7rem .65rem;
    text-decoration: none;
    transition: all .18s ease;
}
.rr-card:hover { border-color: var(--dta-border-strong); background: var(--dta-panel-hover); }
.rr-card.active { border-color: var(--dta-cyan); background: rgba(34, 211, 238, .07); }
.rr-card-top { display: flex; align-items: center; gap: .4rem; }
.rr-card-earn {
    margin-left: auto;
    font-size: .72rem;
    color: var(--dta-green);
    font-family: var(--dta-mono);
}
.rr-card-name {
    margin-top: .35rem;
    font-size: .88rem;
    font-weight: 700;
    color: var(--dta-text);
    line-height: 1.45;
}
.rr-card-sub {
    margin-top: .2rem;
    font-size: .75rem;
    color: var(--dta-muted);
    line-height: 1.6;
}
.rr-card-sub .bi-play-circle { color: #22c55e; }
.rr-card-sub .bi-flag { color: #f97316; }
.rr-card-foot {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .35rem;
    font-size: .72rem;
    color: var(--dta-muted);
}
.rr-card-tags { margin-top: .35rem; }

/* ===== 无数据占位 ===== */
.rr-empty {
    padding: 3rem 1.2rem;
    text-align: center;
    border: 1px dashed var(--dta-border);
    border-radius: 14px;
    color: var(--dta-muted);
    font-size: .88rem;
    line-height: 1.9;
}
.rr-empty i { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .55; }
.rr-empty a { color: var(--dta-cyan); }

/* 亮色主题下地图叠加层的可读性微调 */
body.theme-light .run-route-map .rrm-way { color: #061018; background: #38bdf8; }
body.theme-light .rr-card.active { background: rgba(34, 211, 238, .12); }

/* ===== 布局：地图铺满 container，侧栏用容器两侧留白 =====
   与钓鱼页侧栏同一套做法：
     · 正常流里，侧栏排在地图下方（不参与地图宽度）
     · ≥1800px 且留白放得下时，脚本把侧栏挂到 body 下，固定在容器左侧留白里，
       container 宽度与居中方式完全不动，所以地图宽度一点没被挤 */

/* 地图整行：宽度 = container 宽度；高度按底图比例自然铺开 */
.rr-map-wrap { position: relative; }
.rr-map-row { min-width: 0; }
.rr-map-row .run-route-map { width: 100%; }

/* 侧栏按钮：只在宽屏（真的会变成左侧栏时）才出现，与钓鱼页一致 */
.rr-rail-toggle { display: none; }

@media (min-width: 1800px) {
    .rr-rail-toggle { display: inline-flex; align-items: center; margin-left: auto; }
    /* 固定在容器左侧留白里：宽度跟着留白走，留白越宽栏越宽（220~340） */
    body.delta-body > .rr-side {
        position: fixed;
        left: 0;
        top: 57px;
        bottom: 0;
        width: clamp(220px, calc((100vw - 1320px) / 2 - 24px), 340px);
        margin: 0;
        max-height: none;
        padding: 1rem .9rem 2rem;
        border: none;
        border-right: 1px solid var(--dta-border);
        border-radius: 0;
        background: rgba(10, 14, 23, .94);
        backdrop-filter: blur(10px);
        box-shadow: 6px 0 26px rgba(0, 0, 0, .3);
        overflow-y: auto;
        z-index: 1029;
    }
    body.theme-light > .rr-side { background: #fff; box-shadow: 6px 0 26px rgba(30, 41, 59, .08); }
    /* 收起侧栏：地图仍占满 container，右侧不留空洞 */
    body.run-route-rail-off > .rr-side { display: none; }
    /* 栏内的面板贴着栏走，头一块不用再留上边距 */
    body.delta-body > .rr-side .rr-panel {
        background: rgba(255, 255, 255, .03);
        border-color: rgba(255, 255, 255, .07);
    }
    body.delta-body > .rr-side .rr-panel:first-child { margin-top: 0 !important; }
    body.theme-light > .rr-side .rr-panel { background: #fff; border-color: var(--dta-border); }
    .rr-side::-webkit-scrollbar { width: 6px; }
    .rr-side::-webkit-scrollbar-thumb { background: var(--dta-border-strong); border-radius: 3px; }
}

@media (max-width: 575.98px) {
    .run-route-map .rrm-pin .rrm-tag { display: none; }
    .run-route-map .rrm-pin > .bi { font-size: 1.45rem; }
}