/* Valid Palindrome - Mirror Shards */

/* Full size mirror - Starts */

/* ===============================
   MIRROR SHARD SHAPE
   =============================== */
.mirror-shards {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 80px 0 25px;
}

.mirror-shard {
    width: 260px;
    height: 70px;
    background: linear-gradient( 145deg, #d8f7ff, #6ec6ff, #9b7cff );
    border: 3px solid #e8fbff;
    border-radius: 18px 8px 18px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: bold;
    color: #183153;
    box-shadow: 0 0 12px rgba(110,198,255,0.8), inset 0 0 12px rgba(255,255,255,0.8);
    transform: rotate(3deg);
    cursor: pointer;
    transition: .3s ease;
    position: relative;
}



    .mirror-shard:hover {
        transform: rotate(0deg) scale(1.08);
    }



/* ===============================
   SUCCESS SHINE
   =============================== */


.mirror-shards.shine .mirror-shard {
    animation: shardShine 1s infinite alternate;
}


@keyframes shardShine {

    from {
        box-shadow: 0 0 12px rgba(110,198,255,.8), inset 0 0 12px white;
    }

    to {
        box-shadow: 0 0 35px white, 0 0 60px cyan, inset 0 0 20px white;
    }
}




/* ===============================
   CRACK BEFORE SHATTER
   =============================== */


.mirror-shards.break .mirror-shard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 55deg, transparent 47%, white 48%, white 50%, transparent 52% );
}



.mirror-shards.break .mirror-shard {
    animation: mirrorShake .4s;
}



/* ===============================
   SHATTER PIECES
   =============================== */


.crack-piece {
    position: absolute;
    width: 50%;
    height: 50%;
    background: linear-gradient( 145deg, #d8f7ff, #6ec6ff, #9b7cff );
    border: 2px solid #e8fbff;
    opacity: 0;
}


.piece-1 {
    top: 0;
    left: 0;
}


.piece-2 {
    top: 0;
    right: 0;
}


.piece-3 {
    bottom: 0;
    left: 0;
}


.piece-4 {
    bottom: 0;
    right: 0;
}




.mirror-shards.break .mirror-shard {
    opacity: 0;
}



.mirror-shards.break .crack-piece {
    opacity: 1;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}



.mirror-shards.break .piece-1 {
    animation-name: break1;
}


.mirror-shards.break .piece-2 {
    animation-name: break2;
}


.mirror-shards.break .piece-3 {
    animation-name: break3;
}


.mirror-shards.break .piece-4 {
    animation-name: break4;
}




@keyframes break1 {

    to {
        transform: translate(-120px,-80px) rotate(-45deg);
        opacity: 0;
    }
}


@keyframes break2 {

    to {
        transform: translate(120px,-90px) rotate(60deg);
        opacity: 0;
    }
}


@keyframes break3 {

    to {
        transform: translate(-100px,100px) rotate(-70deg);
        opacity: 0;
    }
}


@keyframes break4 {

    to {
        transform: translate(120px,100px) rotate(80deg);
        opacity: 0;
    }
}



@keyframes mirrorShake {

    0% {
        transform: rotate(3deg);
    }

    50% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(3deg);
    }
}
/* Full size mirror - Ends */
/* Mirror letter pieces(Individual letters) - Starts */
/* ===============================
   PALINDROME CRYSTAL LETTER SHARD
   =============================== */

.crystal-mirror-shard {
    width: 55px;
    height: 70px;
    background: linear-gradient( 145deg, #d8f7ff, #6ec6ff, #9b7cff );
    border: 3px solid #e8fbff;
    border-radius: 18px 8px 18px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: bold;
    color: #183153;
    box-shadow: 0 0 12px rgba(110,198,255,0.8), inset 0 0 12px rgba(255,255,255,0.8);
    transform: rotate(3deg);
    cursor: pointer;
    transition: .3s ease;
}


    .crystal-mirror-shard:hover {
        transform: rotate(0deg) scale(1.1);
    }

    /* ===============================
   CURRENT LETTER - ACTIVE CRYSTAL
   =============================== */

    .crystal-mirror-shard.selected {
        transform: rotate(0deg) scale(1.25) translateY(-8px);
        border: 4px solid #00e5ff;
        background: linear-gradient(145deg, #ffffff, #7ff6ff, #00aaff);
        color: #002b45;
        box-shadow: 0 0 10px white, 0 0 25px #00e5ff, 0 0 50px #00e5ff, 0 0 80px rgba(0,229,255,0.9), inset 0 0 20px white;
        z-index: 20;
        animation: activeCrystalPulse 0.7s infinite alternate;
    }


@keyframes activeCrystalPulse {
    from {
        filter: brightness(1);
    }

    to {
        filter: brightness(1.5);
    }
}
/* Mirror letter pieces - Ends */