/* ==========================================================================
   接水管 · 彩色管网 · 棋盘专属样式
   页面外壳 / 弹窗 / 卡片沿用 maze.css（同一套「拆弹终端」深色设备风），
   这里负责彩色管路、通水动效、阀门 / 锈管 / 焊死标记与冲突告警。
   ========================================================================== */

/* ---------- 棋盘配色令牌 ---------- */

.pp-cell[data-color="0"] { --pc: #4a95e8; --pc-soft: #b6d8fb; }
.pp-cell[data-color="1"] { --pc: #2fc3a4; --pc-soft: #a4eddb; }
.pp-cell[data-color="2"] { --pc: #f0a53c; --pc-soft: #fbdfae; }
.pp-cell[data-color="3"] { --pc: #b184ea; --pc-soft: #e0cbf9; }
.pp-cell[data-color="x"] { --pc: #77808c; --pc-soft: #b6bec8; }

/* 棋盘里点按旋转，指针用 pointer 而非 grab */
.mz-svg { cursor: pointer; }

.pp-bg {
    fill: #0c141a;
    stroke: var(--con-line);
    stroke-width: 2;
}

.pp-floor {
    fill: #121d24;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, .4));
}

.pp-cell-bg {
    fill: rgba(255, 255, 255, .022);
    stroke: rgba(255, 255, 255, .05);
    stroke-width: 1;
}

/* ---------- 单块管子 ---------- */

.pp-cell { cursor: pointer; transition: filter .12s ease; }
.pp-cell:hover { filter: brightness(1.12); }
.pp-cell.is-welded { cursor: not-allowed; }
.pp-cell.is-welded:hover { filter: none; }

/* 管道主干：未通水时压暗，通水后点亮 */
.pp-pipe {
    fill: none;
    stroke: var(--pc);
    stroke-width: 15;
    stroke-linecap: round;
    opacity: .58;
    filter: saturate(.8);
    transition: opacity .18s ease, stroke .18s ease;
}

.pp-hub {
    fill: var(--pc);
    opacity: .62;
    stroke: #0c141a;
    stroke-width: 2;
    transition: opacity .18s ease;
}

.pp-cell.is-flow .pp-pipe {
    stroke: var(--pc-soft);
    opacity: .95;
    filter: saturate(1) drop-shadow(0 0 7px var(--pc));
}

.pp-cell.is-flow .pp-hub {
    fill: var(--pc-soft);
    opacity: 1;
}

/* 水流动画：沿管路流动的亮线 */
.pp-flowline {
    fill: none;
    stroke: #f4feff;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 9 13;
    opacity: .62;
    pointer-events: none;
    animation: pp-flowdash .85s linear infinite;
}

@keyframes pp-flowdash {
    to { stroke-dashoffset: -22; }
}

/* ---------- 死头封盖 / 阀门 / 焊死 ---------- */

/* 单开口管子的另一头是焊死的法兰 */
.pp-cap line {
    stroke: var(--pc);
    stroke-width: 7;
    stroke-linecap: butt;
    opacity: .45;
}

.pp-cell.is-flow .pp-cap line { opacity: .8; }

/* 单向阀箭头 */
.pp-arrow {
    fill: #f6f2e4;
    stroke: #0c141a;
    stroke-width: 1.6;
    opacity: .82;
}

.pp-cell.is-flow .pp-arrow { opacity: 1; fill: #fff; }

/* 焊死标记（两颗铆钉） */
.pp-weld circle {
    fill: #d9c48a;
    stroke: #211607;
    stroke-width: 1.4;
    opacity: .9;
}

/* ---------- 水源 / 终点 ---------- */

.pp-node { pointer-events: none; }

.pp-node-ring {
    fill: none;
    stroke: var(--pc);
    stroke-width: 3;
    opacity: .9;
}

.pp-node-src .pp-node-ring {
    stroke-dasharray: 7 6;
    animation: pp-nodespin 7s linear infinite;
}

.pp-node-src .pp-node-core {
    fill: var(--pc);
    filter: drop-shadow(0 0 9px var(--pc));
    animation: pp-nodepulse 1.9s ease-in-out infinite;
}

.pp-node-snk .pp-node-ring {
    stroke-width: 4;
    stroke-dasharray: 12 8;
    animation: pp-nodespin 9s linear infinite reverse;
}

.pp-node-snk .pp-node-core {
    fill: #0c141a;
    stroke: var(--pc);
    stroke-width: 3;
}

@keyframes pp-nodespin {
    to { transform: rotate(360deg); }
}

@keyframes pp-nodepulse {
    0%, 100% { opacity: .75; }
    50% { opacity: 1; }
}

/* ---------- 锈管（废管） ---------- */

.pp-cell.is-blocker .pp-pipe {
    stroke: #5d6672;
    opacity: .55;
    filter: saturate(.2);
    stroke-dasharray: 7 5;
}

.pp-cell.is-blocker .pp-hub { fill: #4a525d; opacity: .6; }

.pp-cell.is-blocker .pp-cap line { stroke: #6b7480; }

/* ---------- 冲突告警：混流 / 漏水 ---------- */

.pp-cell.is-bad .pp-pipe {
    stroke: var(--led-red);
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(255, 109, 90, .85));
    animation: pp-badblink .7s ease-in-out infinite;
}

.pp-cell.is-bad .pp-hub { fill: var(--led-red); opacity: 1; }

@keyframes pp-badblink {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}

/* ---------- 标记 / 提示 ---------- */

.pp-mark { display: none; }
.pp-cell.is-marked .pp-mark { display: block; }
.pp-mark circle {
    fill: var(--led-amber);
    stroke: #211607;
    stroke-width: 1.4;
    filter: drop-shadow(0 0 6px rgba(255, 180, 84, .8));
}

.pp-cell.is-hint .pp-pipe {
    stroke: var(--led-amber);
    filter: drop-shadow(0 0 9px rgba(255, 180, 84, .9));
    animation: pp-hint-blink 1s ease infinite;
}

@keyframes pp-hint-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* ==========================================================================
   棋盘外的新增 UI
   ========================================================================== */

/* ---------- 机制标签 ---------- */

/* maze.css 里 .mz-coach 是 display:flex，会盖掉 hidden 属性，这里补回来 */
.mz-coach[hidden] { display: none; }

/* 告警文案较长，胶囊形会把首尾文字切进圆角，这里改成小圆角长条 */
.mz-toast {
    border-radius: 16px;
    padding: 9px 18px;
    line-height: 1.5;
    max-width: 92%;
}

.pp-mech {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--led-amber);
    background: color-mix(in srgb, var(--led-amber) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--led-amber) 42%, transparent);
}

/* ---------- 颜色进度条 ---------- */

.pp-color-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 10px;
}

.pp-color-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--con-text);
    background: var(--led-window);
    border: 1px solid var(--con-line);
    font-family: var(--font-mono);
}

.pp-color-chip i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4a95e8;
    box-shadow: 0 0 8px rgba(74, 149, 232, .6);
}

.pp-color-chip[data-color="1"] i { background: #2fc3a4; box-shadow: 0 0 8px rgba(47, 195, 164, .6); }
.pp-color-chip[data-color="2"] i { background: #f0a53c; box-shadow: 0 0 8px rgba(240, 165, 60, .6); }
.pp-color-chip[data-color="3"] i { background: #b184ea; box-shadow: 0 0 8px rgba(177, 132, 234, .6); }

.pp-color-chip b {
    font-weight: 800;
    color: var(--con-dim);
    font-variant-numeric: tabular-nums;
}

.pp-color-chip.is-done {
    border-color: color-mix(in srgb, var(--led-green) 55%, transparent);
    color: var(--led-green);
}

.pp-color-chip.is-done b { color: var(--led-green); }

/* ---------- 仪表超限 ---------- */

.mz-meter b.is-over {
    color: var(--led-red);
    text-shadow: 0 0 10px rgba(255, 109, 90, .5);
}

/* ---------- 工具按钮开关态 ---------- */

.mz-tool.is-on {
    border-color: var(--led-amber);
    color: var(--led-amber);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--led-amber) 35%, transparent), 0 2px 0 rgba(0, 0, 0, .35);
}

.mz-tool .mz-tool-text { font-weight: 800; }

/* ---------- 通关脉冲 ---------- */

/* 结算面板多了一项「标准步数」，改成四列 */
.mz-win-stars { margin-bottom: 4px; }

.mz-win-stats { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 460px) {
    .mz-win-stats { grid-template-columns: repeat(2, 1fr); }
}

.mz-board-stage.is-win { animation: pp-winpulse .9s ease; }

@keyframes pp-winpulse {
    0%, 100% { box-shadow: inset 0 2px 14px rgba(0, 0, 0, .5); }
    40% {
        box-shadow: inset 0 2px 14px rgba(0, 0, 0, .5),
            0 0 0 3px color-mix(in srgb, var(--led-green) 45%, transparent),
            0 0 30px rgba(111, 227, 165, .35);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pp-flowline,
    .pp-cell.is-hint .pp-pipe,
    .pp-cell.is-bad .pp-pipe,
    .pp-node-src .pp-node-ring,
    .pp-node-src .pp-node-core,
    .pp-node-snk .pp-node-ring,
    .mz-board-stage.is-win { animation: none; }
}