.jigsaw-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(165deg, #E8F4FC 0%, #D6EBF7 35%, #C4E2F2 70%, #B8DCF0 100%);
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.jigsaw-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.jigsaw-piece {
    position: absolute;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.08)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.05));
}

.jigsaw-piece svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.jigsaw-piece.blue {
    --piece-color: #1C9CFC;
    --piece-gradient-start: #4DB5FF;
    --piece-gradient-end: #0A84FF;
}

.jigsaw-piece.yellow {
    --piece-color: #FFD60A;
    --piece-gradient-start: #FFE066;
    --piece-gradient-end: #FFCC00;
}

.jigsaw-piece.coral {
    --piece-color: #FF6B6B;
    --piece-gradient-start: #FF9999;
    --piece-gradient-end: #FF453A;
}

.jigsaw-piece.green {
    --piece-color: #30D158;
    --piece-gradient-start: #6EE790;
    --piece-gradient-end: #28B14C;
}

.jigsaw-piece.teal {
    --piece-color: #5AC8FA;
    --piece-gradient-start: #8EDAFF;
    --piece-gradient-end: #32ADE6;
}

.jigsaw-piece.purple {
    --piece-color: #BF5AF2;
    --piece-gradient-start: #DA9CFF;
    --piece-gradient-end: #AF52DE;
}

@media (max-width: 768px) {
    .jigsaw-piece {
        filter: drop-shadow(0 6px 15px rgba(0, 0, 0, 0.06)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.04));
    }
}

@media (max-width: 480px) {
    .jigsaw-piece {
        filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.05));
    }
}

.main-content,
.page-content,
.app-content {
    position: relative;
    z-index: 1;
}