/* ============================================================
   hud-surge.css — 共流过境 · 十阶段触发块
   跟 page-hud 同一张皮:细线框、Alpha Sector 字、0.16s 过渡。
   形态(用户定稿):去文字、去外框、去底色 —— 只留 10 个块,
   斜 45° 贴在三角投影(proj-node)斜边外侧,块身沿斜边铺满其全长。
   逻辑见 hud-surge.js。
   ============================================================ */

.hud-surge {
    /* 摄像机斜边是「/」向对角线:右上 → 左下,即 x+y = C 的直线,
       C = 160/168 × 摄像机宽。rotate(-45°) 后条的 x 轴指向右上
       (与斜边同向);左上角锚点放在斜边外侧(左下侧)一点,
       条身即沿斜边平行铺开。宽 = 斜边全长(摄像机 160/168 × 宽)。 */
    --cam: clamp(88px, 9vw, 132px);
    --cam-edge: calc(var(--cam) * 1.3);      /* 斜边在屏幕上的长度 */
    --blk: calc(var(--cam-edge) / 10);         /* 单块长 = 斜边/10 */

    position: fixed;
    left: calc(var(--cam) * 0.476 - var(--cam-edge) / 2 + 29px);
    top: calc(var(--cam) * 0.476 + var(--cam-edge) / 2 - 19px);
    width: var(--cam-edge);
    height: var(--blk);
    transform: rotate(-45deg);
    transform-origin: left top;
    display: flex;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 62;                              /* 高于摄像机(z:-1)、echo-hot(61) */
}

/* 十个块:等分排布,块间留 3px 缝 */
.hud-surge__rail {
    display: flex;
    gap: 3px;
    width: 100%;
    height: 100%;
    background: transparent;
}

/* 单块:已完成/进行中 = 青色;未到 = 极淡的线 */
.hud-surge__cell {
    flex: 1 1 0;
    height: 4px;
    align-self: center;
    border-radius: 1px;
    background: var(--hud-rail, rgba(234, 243, 255, 0.16));
    transition: background-color 0.16s ease;
}

.hud-surge.is-live .hud-surge__cell.on {
    background: var(--mc-color, rgb(34, 211, 238));
}

/* 爆发段(armed / 满 10):全块亮起 + 微光(发光 token, 亮模式自动翻墨青) */
.hud-surge.is-full .hud-surge__cell {
    background: var(--mc-color, rgb(34, 211, 238));
    box-shadow: 0 0 6px var(--glow-dim, rgba(34, 211, 238, 0.45));
}

/* 亮色模式:未到的块改墨色淡线;已完成的仍走青绿(--mc-color 亮模式已换) */
:root[data-theme="light"] .hud-surge__cell {
    background: rgba(58, 63, 72, 0.22);
}

:root[data-theme="light"] .hud-surge.is-live .hud-surge__cell.on,
:root[data-theme="light"] .hud-surge.is-full .hud-surge__cell {
    background: rgb(14, 116, 122);
}

@media (max-width: 1180px) {
    .hud-surge {
        display: none;                        /* HUD 整体隐藏的窄屏,它跟着走 */
    }
}