/* ============================================
   Puzzle Animation Component
   Self-contained, embeddable puzzle effect
   Uses clip-path: shape() (Chrome 133+)
   ============================================ */

/* ---- Test Page Styles (only for puzzle-test.html) ---- */
.puzzle-page {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: Georgia, 'Times New Roman', serif;
}

.puzzle-page-wrapper {
    text-align: center;
    padding: 2rem 1rem;
}

.puzzle-page-title {
    color: #e8e8e8;
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    margin: 0 0 1.5rem;
    font-weight: 300;
    letter-spacing: 0.05em;
}


/* ---- Puzzle Container (embeddable wrapper) ---- */
.puzzle-container {
    width: min(95vw, calc(100vh - 10rem));
    margin: 0 auto;
    position: relative;
}

@media (min-width: 769px) {
    .puzzle-container {
        width: min(90vw, calc(100vh - 10rem), 800px);
    }
}


/* ---- Puzzle Grid ---- */
.puzzle {
    display: grid;
    grid-template-columns: repeat(var(--piece-count-columns, 4), 1fr);
    grid-template-rows: repeat(var(--piece-count-rows, 4), 1fr);
    width: 100%;
    aspect-ratio: var(--piece-count-columns, 4) / var(--piece-count-rows, 4);
    position: relative;
}


/* ---- Individual Puzzle Piece ---- */
.puzzle-piece {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform, opacity;
}


/* ---- Puzzle Piece Shape (clip-path: shape()) ---- */
.puzzle-piece::after {
    content: '';
    position: absolute;
    inset: calc(-100% / 3);
    background-color: hsl(var(--hue, 0) 75% 65%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    clip-path: shape(
        from 20% 20%,

        /* Top edge */
        line to calc(40% + var(--top-offset, 0%)) 20%,
        curve to calc(50% + var(--top-offset, 0%)) calc(20% + var(--top-size, 0%))
            with calc(50% + var(--top-offset, 0%)) 20%
            / calc(50% + var(--top-offset, 0%) - abs(var(--top-size, 0%))) calc(20% + var(--top-size, 0%)),
        curve to calc(60% + var(--top-offset, 0%)) 20%
            with calc(50% + var(--top-offset, 0%) + abs(var(--top-size, 0%))) calc(20% + var(--top-size, 0%))
            / calc(50% + var(--top-offset, 0%)) 20%,
        line to 80% 20%,

        /* Right edge */
        line to 80% calc(40% + var(--right-offset, 0%)),
        curve to calc(80% - var(--right-size, 0%)) calc(50% + var(--right-offset, 0%))
            with 80% calc(50% + var(--right-offset, 0%))
            / calc(80% - var(--right-size, 0%)) calc(50% + var(--right-offset, 0%) - abs(var(--right-size, 0%))),
        curve to 80% calc(60% + var(--right-offset, 0%))
            with calc(80% - var(--right-size, 0%)) calc(50% + var(--right-offset, 0%) + abs(var(--right-size, 0%)))
            / 80% calc(50% + var(--right-offset, 0%)),
        line to 80% 80%,

        /* Bottom edge */
        line to calc(60% + var(--bottom-offset, 0%)) 80%,
        curve to calc(50% + var(--bottom-offset, 0%)) calc(80% - var(--bottom-size, 0%))
            with calc(50% + var(--bottom-offset, 0%)) 80%
            / calc(50% + var(--bottom-offset, 0%) + abs(var(--bottom-size, 0%))) calc(80% - var(--bottom-size, 0%)),
        curve to calc(40% + var(--bottom-offset, 0%)) 80%
            with calc(50% + var(--bottom-offset, 0%) - abs(var(--bottom-size, 0%))) calc(80% - var(--bottom-size, 0%))
            / calc(50% + var(--bottom-offset, 0%)) 80%,
        line to 20% 80%,

        /* Left edge */
        line to 20% calc(60% + var(--left-offset, 0%)),
        curve to calc(20% + var(--left-size, 0%)) calc(50% + var(--left-offset, 0%))
            with 20% calc(50% + var(--left-offset, 0%))
            / calc(20% + var(--left-size, 0%)) calc(50% + var(--left-offset, 0%) + abs(var(--left-size, 0%))),
        curve to 20% calc(40% + var(--left-offset, 0%))
            with calc(20% + var(--left-size, 0%)) calc(50% + var(--left-offset, 0%) - abs(var(--left-size, 0%)))
            / 20% calc(50% + var(--left-offset, 0%)),

        close
    );
}


/* ---- Number Display ---- */
.puzzle-piece-number {
    position: relative;
    z-index: 1;
    font-size: clamp(0.7rem, 2.5vw, 1.5rem);
    font-weight: bold;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    transition: opacity 0.5s ease;
    user-select: none;
}


/* ---- Complete Image Overlay ---- */
.puzzle-complete-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease 0.3s;
    pointer-events: none;
    border-radius: 4px;
    z-index: 10;
    object-fit: cover;
}


/* ---- Assembled State ---- */
.puzzle-container.assembled .puzzle-piece-number {
    opacity: 0;
}

.puzzle-container.assembled .puzzle-complete-image {
    opacity: 1;
}

.puzzle-container.assembled .puzzle {
    transition: opacity 0.6s ease 0.2s;
    opacity: 0;
}


/* ---- Replay Button ---- */
.puzzle-replay-btn {
    display: block;
    margin: 1.5rem auto 0;
    padding: 0.6rem 1.8rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    letter-spacing: 0.03em;
}

.puzzle-replay-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.puzzle-replay-btn:active {
    transform: translateY(0);
}


/* ---- Fallback for browsers without shape() ---- */
@supports not (clip-path: shape(from 0% 0%, line to 100% 0%, close)) {
    .puzzle-piece::after {
        inset: -8%;
        clip-path: polygon(
            0% 0%, 38% 0%, 42% 10%, 50% 12%, 58% 10%, 62% 0%, 100% 0%,
            100% 38%, 90% 42%, 88% 50%, 90% 58%, 100% 62%, 100% 100%,
            62% 100%, 58% 90%, 50% 88%, 42% 90%, 38% 100%, 0% 100%,
            0% 62%, 10% 58%, 12% 50%, 10% 42%, 0% 38%
        );
    }
}