/* mc-level 闯关地图样式,URL: /mc-level/mc_level.css
   规范 docs/design/ui-refresh.md §4.3:时间线卡片(左竖线 + 圆形状态点 + pill 标签)。
   颜色/圆角/阴影统一引用 var(--mc-*) 令牌;令牌没有的色值(锁灰/浅绿底)局部定义。 */

/* ---- 时间线骨架 ---- */
.mc-level-map {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mc-level-node {
    position: relative;
    padding-left: 36px;
    margin-bottom: 14px;
    scroll-margin-top: 62px; /* 锚点定位(#mc-current)时避让固定顶部导航 */
}
/* 左侧 2px 竖线,串联各状态点 */
.mc-level-node::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 26px;
    bottom: -14px;
    width: 2px;
    background: var(--mc-border);
}
.mc-level-node:last-child::before {
    display: none;
}

/* ---- 20px 圆形状态点(内联 SVG 白图标)---- */
.mc-level-node__dot {
    position: absolute;
    left: 0;
    top: 18px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.mc-level-node__dot svg {
    width: 11px;
    height: 11px;
    display: block;
}
.mc-level-node--done .mc-level-node__dot {
    background: var(--mc-success);
}
.mc-level-node--open .mc-level-node__dot {
    background: var(--mc-primary);
    box-shadow: 0 0 0 4px var(--mc-primary-soft);
}
.mc-level-node--locked .mc-level-node__dot {
    background: #c3c7cd; /* 令牌无中性灰,局部定义 */
}

/* ---- 节点卡片 ---- */
.mc-level-node__card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--mc-card);
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow-sm);
    transition: var(--mc-ease);
}
.mc-level-node--open .mc-level-node__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mc-shadow-md);
}
.mc-level-node--locked .mc-level-node__card {
    opacity: .6;
}
.mc-level-node__main {
    flex: 1;
    min-width: 0;
}
.mc-level-node__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px;
}
.mc-level-node__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.mc-level-node__progress-text {
    font-size: 12px;
    color: var(--mc-text-3);
}

/* ---- 状态 pill 标签(浅绿底/主色浅底令牌外,局部定义)---- */
.mc-level-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--mc-radius-pill);
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
}
.mc-level-pill--done {
    background: #e6f6ec;
    color: var(--mc-success);
}
.mc-level-pill--open {
    background: var(--mc-primary-soft);
    color: var(--mc-primary);
}
.mc-level-pill--locked {
    background: #f0f1f3;
    color: var(--mc-text-3);
}

/* ---- 右侧进度条 ---- */
.mc-level-node__side {
    flex: none;
    width: 140px;
}
.mc-level-node__bar {
    height: 6px;
    border-radius: var(--mc-radius-pill);
    background: var(--mc-border-soft);
    overflow: hidden;
}
.mc-level-node__bar-fill {
    height: 100%;
    border-radius: var(--mc-radius-pill);
    background: var(--mc-primary);
    transition: width .3s ease;
}
.mc-level-node--done .mc-level-node__bar-fill {
    background: var(--mc-success);
}

/* ---- 地图卡片内联题目列表(<details>)----
   紧凑两列(窄屏一列),行高 26px 左右,避免把卡片撑得太高;
   未解锁节点题目链接禁用(纯文本 + 弱化色),已 AC 右侧打 ✓。 */
.mc-level-node__problems {
    margin-top: 10px;
    background: var(--mc-card);
    border: 1px solid var(--mc-border-soft);
    border-radius: var(--mc-radius);
}
.mc-level-node__problems > summary {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mc-text-2);
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.mc-level-node__problems > summary::-webkit-details-marker {
    display: none;
}
.mc-level-node__problems > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 6px;
    color: var(--mc-text-3);
    transition: transform .18s ease;
}
.mc-level-node__problems[open] > summary::before {
    transform: rotate(90deg);
}
.mc-level-node__problem-list {
    list-style: none;
    margin: 0;
    padding: 2px 14px 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}
.mc-level-node__problem {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 0;
    border-top: 1px dashed var(--mc-border-soft);
    font-size: 13px;
    min-width: 0;
}
.mc-level-node__problem:nth-child(-n+2) {
    border-top: none;
}
.mc-level-node__problem-id {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--mc-text-3);
}
.mc-level-node__problem-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mc-text);
}
.mc-level-node__problem-title:hover {
    color: var(--mc-primary);
}
.mc-level-node__problem.is-locked .mc-level-node__problem-title {
    color: var(--mc-text-3);
    cursor: not-allowed;
}
.mc-level-node__problem-ac {
    flex: none;
    color: var(--mc-success);
    font-weight: 700;
}

/* ---- 详情页题目状态点(§4.3:状态点 + 题名 + 通过/提交数)---- */
.mc-prob-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.mc-prob-dot--ac {
    background: var(--mc-success);
}
.mc-prob-dot--wa {
    background: var(--mc-danger);
}
.mc-prob-dot--none {
    background: var(--mc-border);
}

/* ---- 顶部总进度条(已通关 X/N)---- */
.mc-level-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.mc-level-summary__text {
    flex: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--mc-text-2);
}
.mc-level-summary__bar {
    flex: 1;
    min-width: 0;
    height: 8px;
    border-radius: var(--mc-radius-pill);
    background: var(--mc-border-soft);
    overflow: hidden;
}
.mc-level-summary__bar-fill {
    height: 100%;
    border-radius: var(--mc-radius-pill);
    background: var(--mc-primary);
    transition: width .3s ease;
}

/* ---- 移动端适配(<=640px,地图长列表/进度条小屏)---- */
@media screen and (max-width: 640px) {
    .mc-level-node {
        padding-left: 28px;
    }
    .mc-level-node::before {
        left: 8px; /* 移动端圆点 16px 中心在 8px,竖线对齐圆心 */
    }
    .mc-level-node__dot {
        width: 16px;
        height: 16px;
    }
    /* 卡片上下排列,右侧进度条通栏,防小屏横向溢出 */
    .mc-level-node__card {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px 14px;
    }
    .mc-level-node__side {
        width: 100%;
    }
    .mc-level-node__title {
        font-size: 15px;
        overflow-wrap: anywhere;
    }
    /* 窄屏题目列表改单列,避免两列挤在一起换行 */
    .mc-level-node__problem-list {
        grid-template-columns: 1fr;
    }
}

/* ---- 多岛屿(2026-08-24 多岛版):一座大陆 = 一个 training ----
   岛头:序号徽章 + 标题 + 状态 pill + 进度;每岛一个主色(6 色循环,--isl 局部变量),
   锁岛整岛灰化且不渲染关卡列表。 */
.mc-isl {
    --isl: var(--mc-primary);
    --isl-soft: var(--mc-primary-soft);
    margin-bottom: 26px;
}
.mc-isl--1 { --isl: #0ea5e9; --isl-soft: rgba(14, 165, 233, .12); }
.mc-isl--2 { --isl: #8b5cf6; --isl-soft: rgba(139, 92, 246, .12); }
.mc-isl--3 { --isl: #f59e0b; --isl-soft: rgba(245, 158, 11, .12); }
.mc-isl--4 { --isl: #10b981; --isl-soft: rgba(16, 185, 129, .12); }
.mc-isl--5 { --isl: #ef4444; --isl-soft: rgba(239, 68, 68, .12); }

.mc-isl__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    margin-bottom: 14px;
    background: var(--mc-card);
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow-sm);
    border-left: 4px solid var(--isl);
}
.mc-isl__no {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    color: var(--isl);
    background: var(--isl-soft);
}
.mc-isl__main {
    flex: 1;
    min-width: 0;
}
.mc-isl__title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 4px;
}
.mc-isl__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: var(--mc-text-3);
}
.mc-isl__hint {
    color: var(--mc-text-3);
}
.mc-isl__side {
    flex: none;
    width: 160px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mc-isl__pct {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--mc-text-2);
}
/* 岛色渗透到岛内节点:开放节点圆点/进度条用岛色,增强分区感 */
.mc-isl .mc-level-node--open .mc-level-node__dot {
    background: var(--isl);
    box-shadow: 0 0 0 4px var(--isl-soft);
}
.mc-isl .mc-level-node__bar-fill {
    background: var(--isl);
}
.mc-isl .mc-level-node--done .mc-level-node__bar-fill {
    background: var(--mc-success); /* 通关态保持绿色语义 */
}
/* 锁岛:整岛灰化,岛头左侧色条变灰 */
.mc-isl--locked .mc-isl__head {
    border-left-color: var(--mc-border);
    opacity: .75;
}
.mc-isl--locked .mc-isl__no {
    color: var(--mc-text-3);
    background: var(--mc-border-soft);
}
/* 通关岛:序号徽章换金色 */
.mc-isl--done .mc-isl__no {
    color: #b45309;
    background: rgba(245, 158, 11, .16);
}

@media screen and (max-width: 640px) {
    .mc-isl__head {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 12px;
    }
    .mc-isl__side {
        width: 100%;
    }
}

/* ---- 起始岛指派表单(/mc/level/start)---- */
.mc-start-form {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}
.mc-start-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mc-text-2);
}

/* ---- 二期:蛇形路径 + BOSS 关 + 岛屿视觉强化(2026-08-24)----
   蛇形:关卡卡三档横向摆动(中心点 31%/50%/69%),卡间虚线连接;
   BOSS 关:每岛末关,岛色描边 + 光晕 + 👹 徽章;锁岛:占位面板不再渲染路径。 */

/* 蛇形骨架:去掉直线时间轴,改用卡间虚线 */
.mc-snake .mc-level-node {
    padding-left: 0;
    margin-bottom: 30px;
}
.mc-snake .mc-level-node::before {
    display: none;
}
.mc-level-node__wrap {
    position: relative;
    width: 62%;
    margin-left: 0;
}
.mc-snake--1 .mc-level-node__wrap {
    margin-left: 19%;
}
.mc-snake--2 .mc-level-node__wrap {
    margin-left: 38%;
}
/* 虚线连接器(上一卡中心 → 本卡中心):b 自 31%→50%,c 自 50%→69%,a 自 69% 回 31% */
.mc-snake .mc-level-node::after {
    content: '';
    position: absolute;
    top: -24px;
    height: 24px;
    border-top: 3px dashed var(--isl, var(--mc-border));
    opacity: .55;
    pointer-events: none;
}
.mc-snake .mc-level-node:first-child::after {
    display: none;
}
.mc-snake--1::after {
    left: 31%;
    width: 19%;
}
.mc-snake--2::after {
    left: 50%;
    width: 19%;
}
.mc-snake--0::after {
    left: 31%;
    width: 38%;
}
/* 状态点改为关卡卡的左上角徽章 */
.mc-snake .mc-level-node__dot {
    left: -11px;
    top: -11px;
    width: 24px;
    height: 24px;
    border: 2px solid var(--mc-card);
    box-shadow: var(--mc-shadow-sm);
    z-index: 1;
}

/* BOSS 关(每岛末关) */
.mc-level-node--boss .mc-level-node__card {
    border: 2px solid var(--isl, var(--mc-primary));
    box-shadow: 0 0 0 4px var(--isl-soft, var(--mc-primary-soft)), var(--mc-shadow-md);
}
.mc-boss-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--mc-radius-pill);
    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: .4px;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
}

/* 当前可挑战关卡:呼吸光圈引导视线 */
@media (prefers-reduced-motion: no-preference) {
    .mc-snake .mc-level-node--open#mc-current .mc-level-node__card {
        animation: mcNodePulse 2.2s ease-in-out infinite;
    }
    @keyframes mcNodePulse {
        0%, 100% { box-shadow: 0 0 0 0 var(--isl-soft, var(--mc-primary-soft)), var(--mc-shadow-sm); }
        50% { box-shadow: 0 0 0 7px var(--isl-soft, var(--mc-primary-soft)), var(--mc-shadow-md); }
    }
}

/* 锁岛占位面板(虚线框 + 大锁) */
.mc-isl__lockmask {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 34px 16px;
    margin-bottom: 6px;
    color: var(--mc-text-3);
    border: 2px dashed var(--mc-border);
    border-radius: var(--mc-radius);
}
.mc-isl__lockmask-icon {
    font-size: 30px;
    opacity: .7;
}
.mc-isl__lockmask-text {
    font-size: 13px;
}

/* 岛头:岛色渐变带 */
.mc-isl__head {
    background: linear-gradient(90deg, var(--isl-soft), var(--mc-card) 60%);
}

/* 窄屏:取消蛇形摆动,整卡通栏堆叠 */
@media screen and (max-width: 640px) {
    .mc-snake .mc-level-node__wrap {
        width: 100%;
        margin-left: 0;
    }
    .mc-snake .mc-level-node::after {
        display: none;
    }
    .mc-snake .mc-level-node {
        margin-bottom: 16px;
    }
}

/* ---- 支线试炼(2026-08-25 主线/支线):地图页主线之后的支线卡片区 + 支线单岛视图 ----
   支线恒解锁,不参与岛间链;卡片 = emoji + 标题 + 简介(2 行截断) + 章节进度条。 */
.mc-sides {
    margin-top: 30px;
}
.mc-sides__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--mc-text);
    margin-bottom: 4px;
}
.mc-sides__hint {
    font-size: 12.5px;
    color: var(--mc-text-3);
    margin-bottom: 14px;
}
.mc-sides__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.mc-side-card {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    background: var(--mc-card);
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow-sm);
    border-left: 4px solid var(--mc-primary);
    color: var(--mc-text);
    transition: var(--mc-ease);
}
.mc-side-card:hover {
    box-shadow: var(--mc-shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--mc-text);
}
.mc-side-card--done {
    border-left-color: var(--mc-success);
}
.mc-side-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mc-side-card__emoji {
    flex: none;
    font-size: 18px;
}
.mc-side-card__title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--mc-text);
    margin: 0;
    min-width: 0;
}
.mc-side-card__intro {
    flex: 1;
    font-size: 12.5px;
    color: var(--mc-text-3);
    margin: 8px 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mc-side-card__foot {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mc-side-card__count {
    flex: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mc-text-2);
}
.mc-side-card__bar {
    flex: 1;
}

/* 支线单岛视图:岛头用紫色族区分主线(复用 mc-isl 结构,仅换主色) */
.mc-isl--side {
    --isl: #8b5cf6;
    --isl-soft: rgba(139, 92, 246, .12);
}