/**
 * Chassaka visual effects — Phase 1
 * Legal-move markers, capture targets, selection, check fire/smoke.
 * All effect nodes use pointer-events: none so board clicks still work.
 */

/* ---- Layers inside each square ---- */
.fx-bg-layer,
.fx-fg-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.fx-bg-layer {
    z-index: 0;
}

.square > .piece-container {
    z-index: 2;
}

.fx-fg-layer {
    z-index: 4;
}

.square > .coord {
    z-index: 5;
}

/* ---- Selected piece ---- */
.fx-select-glow {
    position: absolute;
    left: 50%;
    bottom: 8%;
    width: 42%;
    height: 14%;
    transform: translateX(-50%);
    background: var(--selected);
    box-shadow: 0 0 0 1px var(--selected-edge);
    image-rendering: pixelated;
    pointer-events: none;
    clip-path: polygon(
        20% 40%, 35% 15%, 65% 15%, 80% 40%, 80% 70%, 65% 90%, 35% 90%, 20% 70%
    );
}

.piece-container.fx-selected {
    overflow: visible;
    will-change: transform;
    transform-origin: center bottom;
}

/* ---- Empty legal-move marker (diamond of 4 pixels) ---- */
.fx-legal-marker {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform-origin: center center;
}

.fx-legal-pixel {
    position: absolute;
    width: 6px;
    height: 6px;
    left: 50%;
    top: 50%;
    margin: -3px 0 0 -3px;
    background: rgba(20, 20, 24, 0.55);
    box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.12);
    image-rendering: pixelated;
    pointer-events: none;
}

.square.dark .fx-legal-pixel {
    background: rgba(255, 255, 255, 0.42);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}

.fx-legal-pixel--n { transform: translateY(-7px); }
.fx-legal-pixel--e { transform: translateX(7px); }
.fx-legal-pixel--s { transform: translateY(7px); }
.fx-legal-pixel--w { transform: translateX(-7px); }

/* ---- Capture targeting corners ---- */
.fx-capture-marker {
    position: absolute;
    inset: 6%;
    pointer-events: none;
    transform-origin: center center;
}

.fx-capture-corner {
    position: absolute;
    width: 12px;
    height: 12px;
    pointer-events: none;
    box-sizing: border-box;
    border-color: rgba(30, 30, 36, 0.75);
    border-style: solid;
    border-width: 0;
}

.square.dark .fx-capture-corner {
    border-color: rgba(255, 220, 180, 0.85);
}

.fx-capture-corner--tl {
    top: 0;
    left: 0;
    border-top-width: 3px;
    border-left-width: 3px;
}

.fx-capture-corner--tr {
    top: 0;
    right: 0;
    border-top-width: 3px;
    border-right-width: 3px;
}

.fx-capture-corner--bl {
    bottom: 0;
    left: 0;
    border-bottom-width: 3px;
    border-left-width: 3px;
}

.fx-capture-corner--br {
    bottom: 0;
    right: 0;
    border-bottom-width: 3px;
    border-right-width: 3px;
}

.square.legal.capture > .piece-container {
    animation: fx-capture-piece-pulse 1.2s ease-in-out infinite;
}

@keyframes fx-capture-piece-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.12); }
}

/* ---- Check fire (CSS pixel placeholder) ---- */
.fx-check-fire {
    position: absolute;
    left: 50%;
    bottom: 2%;
    width: 78%;
    height: 48%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
    image-rendering: pixelated;
}

.fx-flame {
    position: absolute;
    bottom: 0;
    width: 18%;
    background: #ff6a00;
    box-shadow: inset -2px 0 0 #ff3b00, inset 2px 0 0 #ffcc33;
    pointer-events: none;
    animation: fx-flame-flicker 0.45s steps(2, end) infinite;
    image-rendering: pixelated;
    clip-path: polygon(
        30% 100%, 20% 70%, 25% 45%, 15% 25%, 35% 35%, 40% 10%,
        55% 28%, 70% 5%, 75% 30%, 90% 20%, 80% 50%, 85% 75%, 70% 100%
    );
}

.fx-flame--0 { left: 8%;  height: 70%; animation-delay: 0s; background: #e85d04; }
.fx-flame--1 { left: 26%; height: 95%; animation-delay: 0.08s; background: #f48c06; }
.fx-flame--2 { left: 44%; height: 100%; animation-delay: 0.16s; background: #ffba08; width: 20%; }
.fx-flame--3 { left: 62%; height: 88%; animation-delay: 0.04s; background: #f48c06; }
.fx-flame--4 { left: 78%; height: 65%; animation-delay: 0.12s; background: #dc2f02; }
.fx-flame--front {
    left: 35%;
    width: 28%;
    height: 40%;
    bottom: -2%;
    background: #ffba08;
    opacity: 0.85;
    animation-delay: 0.2s;
    z-index: 1;
}

@keyframes fx-flame-flicker {
    0%   { transform: scaleY(1) scaleX(1); opacity: 1; }
    50%  { transform: scaleY(0.88) scaleX(1.06); opacity: 0.92; }
    100% { transform: scaleY(1.05) scaleX(0.96); opacity: 1; }
}

.fx-flame-fg {
    position: absolute;
    left: 42%;
    bottom: 4%;
    width: 16%;
    height: 18%;
    background: #ffba08;
    box-shadow: inset -1px 0 0 #ff6a00;
    pointer-events: none;
    clip-path: polygon(40% 100%, 20% 50%, 45% 30%, 55% 0%, 70% 40%, 80% 55%, 60% 100%);
    animation: fx-flame-flicker 0.4s steps(2, end) infinite;
    animation-delay: 0.1s;
    opacity: 0.9;
}

.fx-smoke-pixel {
    position: absolute;
    width: 5px;
    height: 5px;
    margin-left: -2px;
    background: rgba(180, 180, 190, 0.75);
    box-shadow: 1px 0 0 rgba(120, 120, 130, 0.5);
    pointer-events: none;
    image-rendering: pixelated;
    z-index: 5;
}

.square.in-check > .piece-container {
    z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
    .fx-flame,
    .fx-flame-fg {
        animation: none;
    }

    .square.legal.capture > .piece-container {
        animation: none;
    }

    .fx-legal-marker,
    .fx-capture-marker {
        opacity: 1 !important;
        transform: scale(1) !important;
    }

    .fx-check-fire {
        opacity: 0.85;
    }

    .fx-smoke-pixel {
        display: none;
    }

    .piece-container.fx-selected {
        transform: scale(1.04);
    }
}

/* ---- Phase 2: walking overlay ---- */
.fx-walk-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20;
    overflow: visible;
    /* Sit above the 8x8 grid without occupying a cell */
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}


.fx-walk-floater {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 21;
    will-change: transform;
    transform-origin: center bottom;
}

.fx-walk-floater .fx-walk-piece,
.fx-walk-floater .chess-piece {
    display: block;
    width: var(--piece-scale, var(--board-piece-scale));
    height: var(--piece-scale, var(--board-piece-scale));
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    pointer-events: none;
    transform-origin: center bottom;
}

.piece-container.fx-walk-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}

.fx-land-dust-pixel {
    position: absolute;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    background: rgba(90, 80, 60, 0.75);
    box-shadow: 1px 0 0 rgba(40, 35, 25, 0.4);
    pointer-events: none;
    image-rendering: pixelated;
    z-index: 6;
}

.square.dark .fx-land-dust-pixel {
    background: rgba(200, 190, 160, 0.7);
}

@media (prefers-reduced-motion: reduce) {
    .fx-walk-floater .fx-walk-piece {
        transform: none !important;
    }

    .fx-land-dust-pixel {
        display: none;
    }
}

/* ---- Phase 3: capture debris + promotion sparks ---- */
.fx-capture-debris {
    position: absolute;
    width: 5px;
    height: 5px;
    margin-left: -2px;
    margin-top: -2px;
    background: rgba(220, 80, 60, 0.9);
    box-shadow: 1px 0 0 rgba(120, 40, 20, 0.5);
    pointer-events: none;
    image-rendering: pixelated;
    z-index: 22;
}

.fx-capture-victim {
    z-index: 19;
}

.fx-promo-spark {
    position: absolute;
    width: 5px;
    height: 5px;
    margin-left: -2px;
    margin-top: -2px;
    background: rgba(255, 230, 120, 0.95);
    box-shadow: 0 0 0 1px rgba(255, 200, 60, 0.5);
    pointer-events: none;
    image-rendering: pixelated;
    z-index: 22;
}

@media (prefers-reduced-motion: reduce) {
    .fx-capture-debris,
    .fx-promo-spark {
        display: none;
    }
}


/* ---- Phase 4: checkmate explosion ---- */
.chessboard.fx-checkmate-active {
    /* interaction already disabled via button.disabled; keep overlay non-blocking */
}

.fx-checkmate-king-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}

.fx-check-fire--mate {
    filter: brightness(1.15) saturate(1.2);
}

.fx-check-fire--mate-grow {
    transform-origin: center bottom;
}

.fx-mate-flash {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 30;
    background: #fff8e0;
    opacity: 0;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

.fx-mate-flash--on {
    opacity: 0.85;
}

.fx-mate-fragment {
    position: absolute;
    pointer-events: none;
    image-rendering: pixelated;
    z-index: 25;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.25);
}

.fx-mate-fragment--crown {
    background: #ffd700 !important;
    box-shadow: 0 0 0 1px rgba(180, 120, 0, 0.5);
}

.fx-mate-smoke {
    position: absolute;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background: rgba(180, 180, 190, 0.75);
    pointer-events: none;
    image-rendering: pixelated;
    z-index: 24;
}

.chessboard.fx-checkmate-reduced .fx-check-fire {
    opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
    .fx-mate-fragment,
    .fx-mate-smoke,
    .fx-mate-flash {
        display: none;
    }

    .chessboard.fx-checkmate-active {
        transform: none !important;
    }
}

/* ---- Phase 5: board collapse loss (pieces + tiles + collision illusion) ---- */
.fx-board-collapse-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 35;
    overflow: visible;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

.fx-collapse-piece {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform;
}

.fx-collapse-piece .fx-collapse-piece-img,
.fx-collapse-piece .chess-piece {
    display: block;
    width: var(--piece-scale, var(--board-piece-scale));
    height: var(--piece-scale, var(--board-piece-scale));
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    pointer-events: none;
}

.piece-container.fx-collapse-piece-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Hide real board tile artwork while clones fall (pieces already hidden individually) */
.chessboard.fx-board-collapse-surface-hidden > .square {
    background-image: none !important;
    background-color: transparent !important;
}

.chessboard.fx-board-collapse-surface-hidden > .square > .coord {
    opacity: 0;
}

.fx-collapse-tile {
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    transform-origin: center center;
    will-change: transform;
    image-rendering: pixelated;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.fx-collapse-tile--light {
    background-color: var(--light-square, #c8c0b4);
    background-image: var(--light-square-img);
}

.fx-collapse-tile--dark {
    background-color: var(--dark-square, #4a4e56);
    background-image: var(--dark-square-img);
}

/* Phase 3: impact dust pixels (collision illusion) */
.fx-collapse-dust {
    position: absolute;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    margin-top: -2px;
    background: rgba(200, 190, 160, 0.85);
    box-shadow: 1px 0 0 rgba(80, 70, 50, 0.45);
    pointer-events: none;
    image-rendering: pixelated;
    z-index: 60;
}

.chessboard.fx-board-collapse-active {
    /* interaction already disabled via finished game; overlay non-blocking */
}

@media (prefers-reduced-motion: reduce) {
    .fx-collapse-piece,
    .fx-collapse-tile {
        will-change: auto;
    }

    .fx-collapse-dust {
        display: none;
    }

    .chessboard.fx-board-collapse-active {
        transform: none !important;
    }
}

/* ---- Result banner: YOU WIN / YOU LOSE (closes victory / loss sequences) ---- */
.fx-result-banner-layer {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
    z-index: 60; /* above board FX (35) and the victory celebration (40) */
}

.fx-result-banner-img {
    display: block;
    width: 50px; /* JS animates width; height auto keeps the aspect ratio */
    height: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    user-select: none;
    pointer-events: none;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5));
}

@media (prefers-reduced-motion: reduce) {
    .fx-result-banner-img {
        filter: none;
    }
}

/* ---- Victory Castle Celebration ---- */
#panel-game.fx-victory-active {
    overflow: hidden;
}

#panel-game.fx-victory-clearing .board-column,
#panel-game.fx-victory-clearing .side-column .panel-card {
    will-change: transform, opacity;
}

.fx-victory-ui-away {
    pointer-events: none !important;
}

.fx-victory-ui-hidden.fx-victory-slide-left {
    transform: translateX(-120%) !important;
    opacity: 0 !important;
}

.fx-victory-ui-hidden.fx-victory-slide-right {
    transform: translateX(120%) !important;
    opacity: 0 !important;
}

#victory-celebration,
.victory-celebration {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    overflow: hidden;
}

.victory-celebration:not(.victory-celebration--active) {
    display: none;
}

.victory-celebration--active {
    display: block;
}

/* Fireworks canvas overlay: sits behind the castle (z-index 1) and the
   dancing army (z-index 2) so both remain clearly visible (PRD §15). */
.victory-fireworks-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.victory-castle-container {
    position: absolute;
    left: 50%;
    top: 48%;
    width: min(42vw, 420px);
    max-width: 90vw;
    transform: translate(-50%, -50%) scale(0.55);
    transform-origin: center center;
    opacity: 0;
    z-index: 1;
    will-change: transform, left, top, opacity;
}

.victory-castle-container--settled {
    opacity: 1;
}

.victory-castle {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    user-select: none;
    pointer-events: none;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.45));
}

.victory-army {
    position: absolute;
    left: 50%;
    bottom: clamp(6%, 10vh, 18%);
    transform: translate(-50%, 12%);
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(0.35rem, 1.5vw, 1.1rem);
    z-index: 2;
    opacity: 0;
    width: min(92vw, 560px);
    pointer-events: none;
}

.victory-army--visible {
    opacity: 1;
}

.victory-piece {
    flex: 0 1 auto;
    width: clamp(36px, 9vw, 72px);
    height: clamp(36px, 9vw, 72px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transform-origin: center bottom;
}

.victory-piece-img,
.victory-piece .chess-piece,
.victory-piece-fallback {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    user-select: none;
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
}

.victory-piece-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #f5f0e6;
}

.victory-army--dancing .victory-piece {
    animation-name: victoryBounce;
    animation-duration: var(--victory-bounce-ms, 850ms);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: var(--victory-bounce-delay, 0ms);
}

@keyframes victoryBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12%);
    }
}

@media (max-width: 640px) {
    .victory-castle-container {
        width: min(70vw, 280px);
    }

    .victory-army {
        width: 96vw;
        gap: 0.25rem;
        bottom: 8%;
    }

    .victory-piece {
        width: clamp(28px, 12vw, 48px);
        height: clamp(28px, 12vw, 48px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fx-victory-ui-away {
        transition: none !important;
    }

    .victory-castle-container {
        transition: none !important;
        will-change: auto;
    }

    .victory-army {
        transition: none !important;
    }

    .victory-army--dancing .victory-piece {
        animation: none !important;
    }

    @keyframes victoryBounce {
        0%, 100% { transform: none; }
        50% { transform: none; }
    }
}