/* ===== 中国军棋 暗棋 棋盘与棋子 ===== */

.army-game {
    --army-rail: #5a3a18;
    --army-rail-inner: #f6e7c6;
    --army-road: rgba(95, 64, 30, 0.55);
    --army-camp: rgba(95, 64, 30, 0.65);
    --army-hq: rgba(95, 64, 30, 0.75);
    --army-frontline: rgba(166, 76, 56, 0.55);
    --army-board-bg-1: #f3dcae;
    --army-board-bg-2: #e2bf85;
    --army-board-bg-3: #cf9d63;
    --army-board-max-h: min(89dvh, 1300px);
    --army-board-max-w: 96vw;
    --army-cell-bg: rgba(255, 248, 226, 0.55);
    --army-cell-border: rgba(95, 64, 30, 0.55);
    --army-paper: #fff9ec;
    --army-paper-shadow: #efe1bf;
    --army-ink: #433426;
    --army-black-ink: #314255;
    --army-red-ink: #9a3b2c;
    --army-panel-bg: linear-gradient(180deg, #faf1dc 0%, #f1e0bd 100%);
    --army-panel-border: rgba(161, 126, 70, 0.35);
}

.army-game #game-section {
    padding: 1rem 1.35rem;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(248, 243, 232, 0.94), rgba(244, 238, 226, 0.98));
}

.army-game .game-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 0.9rem;
    width: 100%;
    height: 100%;
}

.army-game .game-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 178px;
    max-width: 178px;
    width: 178px;
    flex: 0 0 auto;
}

.army-game .right-sidebar {
    align-items: stretch;
}

.army-game .game-room-info,
.army-game .turn-indicator,
.army-game .status-banner {
    background: var(--army-panel-bg);
    color: #5a4325;
    border: 1px solid var(--army-panel-border);
    border-radius: 10px;
    padding: 0.78rem 0.85rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 5px 10px rgba(93, 71, 37, 0.08);
    letter-spacing: 0.03em;
}

.army-game .game-room-info {
    margin-bottom: 0;
    font-size: 0.9rem;
}

.army-game .turn-indicator {
    font-size: 0.98rem;
    line-height: 1.45;
}

.army-game .game-btn {
    border-radius: 10px;
    letter-spacing: 0.08em;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(72, 52, 20, 0.12);
}

/* ----- chessboard container ----- */
.army-game .chessboard {
    position: relative;
    display: block;
    aspect-ratio: 500 / 691;
    height: min(var(--army-board-max-h), 100%);
    max-width: min(var(--army-board-max-w), calc(100vw - 18rem));
    max-height: 100%;
    width: auto;
    padding: 0;
    border: none;
    border-radius: 6px;
    background-color: #fbf6e8;
    background-image: url('table.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 8px 16px rgba(64, 44, 18, 0.18);
    container-type: inline-size;
    transform-origin: center;
    transition: transform 0.25s ease;
    overflow: hidden;
}

/* ----- cells layer (overlay aligned with painted stations) ----- */
.cells-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.cell {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto;
    border: none;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.cell--deploy-zone {
    background: transparent;
    box-shadow: none;
}

.cell.selected {
    background-color: rgba(100, 200, 100, 0.45) !important;
    border-radius: 4px;
}

.cell.valid-move {
    background-color: rgba(100, 200, 100, 0.45) !important;
    border-radius: 4px;
}

/* Show a center dot for empty target cells so move targets are obvious
   even when no piece is rendered there. */
.cell.valid-move:empty::after {
    content: '';
    position: absolute;
    width: 28%;
    height: 28%;
    border-radius: 50%;
    background: rgba(60, 130, 60, 0.85);
    box-shadow: 0 0 4px rgba(40, 90, 40, 0.5);
    pointer-events: none;
    z-index: 3;
}

.cell.last-from,
.cell.last-move {
    background-color: rgba(100, 149, 237, 0.5) !important;
    border-radius: 4px;
}

/* ----- pieces ----- */
.army-piece {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88%;
    height: 86%;
    border-radius: 2px;
    font-weight: 700;
    font-size: clamp(0.86rem, 3.1cqh, 1.2rem);
    letter-spacing: 0;
    background: linear-gradient(180deg, var(--army-paper) 0%, var(--army-paper-shadow) 100%);
    border: 1px solid rgba(88, 61, 28, 0.52);
    color: var(--army-ink);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 2px 5px rgba(60, 44, 20, 0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    user-select: none;
}

.army-piece::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(184, 62, 46, 0.12), rgba(184, 62, 46, 0) 22%);
    pointer-events: none;
}

.army-piece.two-char {
    font-size: clamp(0.72rem, 2.5cqh, 1rem);
    letter-spacing: -0.04em;
}

.army-piece-label {
    position: relative;
    z-index: 1;
    text-shadow: none;
    line-height: 1;
    font-size: clamp(1rem, 4.5cqi, 3rem);
}

.army-piece.red {
    color: var(--army-red-ink);
    border-color: rgba(154, 59, 44, 0.45);
}

.army-piece.black {
    color: var(--army-black-ink);
    border-color: rgba(49, 66, 85, 0.5);
}

.army-piece:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.army-piece.moving {
    transform: none;
    filter: drop-shadow(0 6px 10px rgba(60, 44, 20, 0.24));
    will-change: left, top;
}

.army-piece.moving:hover {
    transform: none;
    filter: drop-shadow(0 6px 10px rgba(60, 44, 20, 0.24));
}

/* concealed back: no '暗' text, subtle star emblem */
.army-piece.concealed {
    border-color: rgba(0, 0, 0, 0.32);
}

.army-piece.concealed::before {
    inset: 6%;
    border-radius: 2px;
    border: 1px dashed rgba(255, 246, 224, 0.35);
    background: none;
}

.army-piece.concealed::after {
    content: '★';
    position: absolute;
    font-size: clamp(1rem, 4.5cqi, 3rem);
    color: rgba(255, 239, 189, 0.84);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.army-piece.concealed.red {
    background: linear-gradient(180deg, #c85d46 0%, #9f372b 100%);
    border-color: rgba(107, 24, 16, 0.55);
    color: transparent;
}

.army-piece.concealed.black {
    background: linear-gradient(180deg, #5f7288 0%, #334355 100%);
    border-color: rgba(28, 37, 49, 0.58);
    color: transparent;
}

.army-piece.publicly-revealed {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 0 0 2px rgba(226, 151, 45, 0.4),
        0 0 12px rgba(226, 151, 45, 0.38),
        0 2px 5px rgba(60, 44, 20, 0.18);
}

.army-piece.own-publicly-revealed {
    animation: own-flag-revealed-pulse 1.4s ease-in-out infinite;
}

.army-piece.own-publicly-revealed::after {
    content: '已亮明';
    position: absolute;
    top: -0.35rem;
    right: -0.2rem;
    padding: 0.08rem 0.28rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe6a6 0%, #f0b84b 100%);
    color: #6f3a08;
    font-size: clamp(0.44rem, 1.5cqi, 0.7rem);
    line-height: 1.2;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 5px rgba(111, 58, 8, 0.24);
    white-space: nowrap;
    z-index: 2;
    pointer-events: none;
}

@keyframes own-flag-revealed-pulse {
    0%,
    100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            0 0 0 2px rgba(226, 151, 45, 0.4),
            0 0 12px rgba(226, 151, 45, 0.38),
            0 2px 5px rgba(60, 44, 20, 0.18);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.94),
            0 0 0 2px rgba(226, 151, 45, 0.56),
            0 0 18px rgba(226, 151, 45, 0.5),
            0 4px 10px rgba(60, 44, 20, 0.24);
    }
}

.army-piece-marker {
    position: absolute;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
    z-index: 3;
    min-width: 1.55rem;
    max-width: 90%;
    padding: 0.12rem 0.36rem;
    border-radius: 999px;
    background: rgba(28, 36, 49, 0.84);
    color: #fff6da;
    font-weight: 700;
    font-size: clamp(1rem, 4.5cqi, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.army-piece.concealed.red .army-piece-marker {
    background: rgba(105, 32, 22, 0.84);
}

.army-piece.concealed.black .army-piece-marker {
    background: rgba(25, 34, 44, 0.88);
}

.piece-mark-panel {
    width: min(92vw, 480px);
}

#piece-mark-target-label {
    margin: 0.35rem 0 0;
    color: #5c4530;
}

.piece-mark-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 1rem 0 0.9rem;
}

.piece-mark-option {
    border: 1px solid rgba(153, 118, 64, 0.28);
    border-radius: 10px;
    background: linear-gradient(180deg, #fff8eb 0%, #f2e2be 100%);
    color: #5a4325;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.6rem 0.35rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(93, 71, 37, 0.08);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.piece-mark-option--quick {
    grid-column: span 2;
}

.piece-mark-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(93, 71, 37, 0.12);
}

.piece-mark-option.is-active {
    border-color: rgba(67, 110, 72, 0.55);
    box-shadow: inset 0 0 0 1px rgba(67, 110, 72, 0.28), 0 6px 12px rgba(93, 71, 37, 0.12);
    background: linear-gradient(180deg, #f7fde8 0%, #dfe9bc 100%);
}

/* ----- right-sidebar status banner ----- */
.status-banner {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.92rem;
    line-height: 1.5;
    white-space: pre-line;
    text-align: center;
    background: rgba(255, 255, 255, 0.78);
    color: #4a3a22;
    border: 1px solid rgba(180, 145, 90, 0.28);
    box-shadow: 0 6px 14px rgba(60, 40, 14, 0.06);
}

.status-banner.warn {
    background: rgba(255, 232, 200, 0.92);
    color: #8a4a16;
    border-color: rgba(200, 140, 60, 0.45);
}

.status-banner.deploy {
    background: rgba(255, 244, 220, 0.92);
    color: #6e4f18;
    border-color: rgba(184, 149, 88, 0.4);
}

.status-banner.red {
    background: rgba(220, 96, 76, 0.16);
    color: #8b2a23;
    border-color: rgba(180, 60, 50, 0.32);
}

.status-banner.black {
    background: rgba(60, 80, 110, 0.16);
    color: #2a3643;
    border-color: rgba(60, 80, 110, 0.32);
}

.status-banner.ended {
    background: rgba(80, 80, 80, 0.12);
    color: #3b3023;
}

.turn-indicator.red {
    background: linear-gradient(180deg, #bf5a46 0%, #a74233 100%);
    color: #fff3e6;
    border-color: rgba(129, 46, 29, 0.38);
}

.turn-indicator.black {
    background: linear-gradient(180deg, #20242a 0%, #090b0d 100%);
    color: #3498db;
    border-color: rgba(20, 24, 28, 0.62);
}

.game-room-info.deploying,
.room-status.deploying {
    background: rgba(184, 149, 107, 0.18);
    color: #7b5a27;
}

.game-room-info.ended,
.room-status.ended {
    background: rgba(46, 46, 46, 0.08);
    color: #5b4333;
}

#deployment-controls,
#player-controls,
#spectator-controls {
    width: 100%;
}

#player-controls .game-btn,
#deployment-controls .game-btn,
#spectator-controls .game-btn {
    min-width: 0;
}

/* ----- responsive ----- */
@media (max-width: 1178px) {
    .army-game .game-sidebar {
        min-width: 170px;
        max-width: 170px;
        width: 170px;
    }

    .army-game .chessboard {
        max-width: min(var(--army-board-max-w), calc(100vw - 14.5rem));
    }
}

@media (max-width: 1024px) {
    .army-game {
        --army-board-max-h: min(92dvh, 1100px);
    }

    .army-game .chessboard {
        height: var(--army-board-max-h);
        max-width: 100%;
        max-height: none;
        aspect-ratio: 500 / 691;
    }
}

@media (max-width: 820px) {
    .army-game {
        --army-board-max-h: min(86dvh, 880px);
        --army-board-max-w: 96vw;
    }

    .army-game .game-layout {
        flex-direction: column;
        align-items: center;
        gap: 0.85rem;
    }

    .army-game .game-sidebar {
        width: 100%;
        min-width: 0;
        max-width: none;
        order: 2;
    }

    .army-game .chessboard {
        order: 1;
    }

    .army-game #deployment-controls,
    .army-game #spectator-controls,
    .army-game #player-controls {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
}

@media (max-width: 520px) {
    .army-game {
        --army-board-max-h: min(78dvh, 720px);
        --army-board-max-w: 96vw;
    }

    .army-piece {
        width: 78%;
        height: 72%;
        font-size: clamp(0.72rem, 3.6cqh, 1rem);
        border-radius: 4px;
    }

    .army-piece.two-char {
        font-size: clamp(0.64rem, 2.9cqh, 0.9rem);
    }

    .piece-mark-options {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}