/* ==========================================================================
   孔明棋 · 独立钻石 · 棋盘专属样式
   页面外壳 / 弹窗 / 卡片沿用 maze.css（同一套深色设备风），
   这里负责孔位、棋子、可选落点高亮、终点孔（金圈）与通关脉冲。
   ========================================================================== */

/* 棋盘里是点选棋子再点落点，指针用 pointer 而非 grab */
.mz-svg { cursor: pointer; }
.mz-svg:active { cursor: pointer; }

/* ---------- 孔位（底座） ---------- */

.pg-hole {
    fill: #0b130f;
    stroke: rgba(255, 255, 255, .10);
    stroke-width: 1.5;
    transition: fill .15s ease, stroke .15s ease;
}

/* 困难档的「指定终点孔」——金圈 */
.pg-hole.is-target {
    fill: #1c1402;
    stroke: var(--led-amber);
    stroke-width: 2.5;
    filter: drop-shadow(0 0 6px rgba(255, 180, 84, .55));
}

/* ---------- 棋子 ---------- */

.pg-peg {
    fill: radial-gradient(circle at 35% 30%, #e9e2d0, #b9ad8e 60%, #7c7152);
    fill: #cdbf9c;
    stroke: #4a4230;
    stroke-width: 2;
    cursor: pointer;
    transition: fill .12s ease, transform .08s ease, filter .12s ease;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55));
}

.pg-peg:hover { filter: drop-shadow(0 0 7px rgba(205, 191, 156, .7)); }

.pg-peg.is-sel {
    fill: #ffd36b;
    stroke: #7a5a16;
    filter: drop-shadow(0 0 9px rgba(255, 200, 90, .85));
    animation: pg-selpulse 1s ease-in-out infinite;
}

@keyframes pg-selpulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

/* 选中棋子可跳到的落点（脉冲小圆环） */
.pg-target {
    fill: none;
    stroke: var(--led-green);
    stroke-width: 3;
    opacity: .85;
    pointer-events: none;
    animation: pg-targetpulse 1.1s ease-in-out infinite;
}

@keyframes pg-targetpulse {
    0%, 100% { opacity: .35; transform: scale(.82); }
    50% { opacity: .9; transform: scale(1); }
}

/* SVG 内 transform 以圆心为基准需要 transform-box */
.pg-peg, .pg-target { transform-box: fill-box; transform-origin: center; }

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

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

@keyframes pg-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);
    }
}

/* ---------- 规则标签（盘面上的玩法提示） ---------- */

.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);
}

/* ---------- 提示按钮的成本标签 ---------- */

.mz-tool-cost {
    position: absolute;
    top: -7px;
    right: -7px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    color: #1a1205;
    background: var(--led-amber);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}

.mz-tool { position: relative; }

@media (prefers-reduced-motion: reduce) {
    .pg-peg.is-sel,
    .pg-target,
    .mz-board-stage.is-win { animation: none; }
}