/* ===========================
   Puzzle Component
   Progressive enhancement for concepts section
   =========================== */

/* Draggable state */
.puzzle-enabled .concept-icon {
    touch-action: none;
    user-select: none;
}

.concept-icon.is-dragging {
    z-index: 100;
    opacity: 0.85;
    transform: scale(1.15);
    cursor: grabbing;
    transition: none;
}

/* Drop zone */
.flow-logo.can-drop {
    outline: 2px dashed var(--jumbo-blue);
    outline-offset: 8px;
    border-radius: 50%;
}

.flow-logo.drop-active {
    outline-color: var(--marigold);
    outline-style: solid;
    background: rgba(102, 180, 244, 0.08);
    border-radius: 50%;
}

/* Placed pieces in octagonal slots around logo */
.concept-icon.placed {
    position: absolute !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
    z-index: 10;
}

.concept-icon.placed svg {
    width: 22px;
    height: 22px;
}

/* Slot positions around the logo (octagonal layout) */
.concept-icon.placed[data-slot="0"] { transform: translate(-50%, -50%) translate(0px, -56px); }     /* top */
.concept-icon.placed[data-slot="1"] { transform: translate(-50%, -50%) translate(40px, -40px); }     /* top-right */
.concept-icon.placed[data-slot="2"] { transform: translate(-50%, -50%) translate(56px, 0px); }       /* right */
.concept-icon.placed[data-slot="3"] { transform: translate(-50%, -50%) translate(40px, 40px); }      /* bottom-right */
.concept-icon.placed[data-slot="4"] { transform: translate(-50%, -50%) translate(0px, 56px); }       /* bottom */
.concept-icon.placed[data-slot="5"] { transform: translate(-50%, -50%) translate(-40px, 40px); }     /* bottom-left */
.concept-icon.placed[data-slot="6"] { transform: translate(-50%, -50%) translate(-56px, 0px); }      /* left */
.concept-icon.placed[data-slot="7"] { transform: translate(-50%, -50%) translate(-40px, -40px); }    /* top-left */

/* Completion celebration */
.concepts-flow.puzzle-complete .flow-logo {
    animation: puzzlePulse 0.6s ease-out;
}

@keyframes puzzlePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.puzzle-celebration {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--jumbo-blue);
    margin-top: 1rem;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.puzzle-celebration.visible {
    opacity: 1;
}

/* Reset button */
.puzzle-reset {
    display: none;
    margin: 1rem auto 0;
    padding: 0.4rem 1rem;
    background: transparent;
    border: 1px solid var(--color-muted);
    border-radius: 4px;
    color: var(--color-text-muted);
    font-family: var(--font-main);
    font-size: 0.75rem;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.puzzle-reset.visible {
    display: block;
}

.puzzle-reset:hover {
    border-color: var(--jumbo-blue);
    color: var(--jumbo-blue);
}

/* Mobile adjustments for placed pieces */
@media (max-width: 900px) {
    .concept-icon.placed[data-slot="0"] { transform: translate(-50%, -50%) translate(0px, -48px); }
    .concept-icon.placed[data-slot="1"] { transform: translate(-50%, -50%) translate(34px, -34px); }
    .concept-icon.placed[data-slot="2"] { transform: translate(-50%, -50%) translate(48px, 0px); }
    .concept-icon.placed[data-slot="3"] { transform: translate(-50%, -50%) translate(34px, 34px); }
    .concept-icon.placed[data-slot="4"] { transform: translate(-50%, -50%) translate(0px, 48px); }
    .concept-icon.placed[data-slot="5"] { transform: translate(-50%, -50%) translate(-34px, 34px); }
    .concept-icon.placed[data-slot="6"] { transform: translate(-50%, -50%) translate(-48px, 0px); }
    .concept-icon.placed[data-slot="7"] { transform: translate(-50%, -50%) translate(-34px, -34px); }
}