/* =========================================================
   HANGMAN RESCUE - LETTER AND WORD FEEDBACK
   ========================================================= */

/* ---------------------------------------------------------
   KEYBOARD LETTER STATES
   --------------------------------------------------------- */

#keyboard .key.hr-key-correct,
.keyboard .key.hr-key-correct {
    border-color:
        rgba(95, 255, 145, 0.98) !important;

    background:
        linear-gradient(
            180deg,
            #37bc69,
            #12733b
        ) !important;

    color:
        #f0fff5 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        0 3px 8px rgba(0, 0, 0, 0.38),
        0 0 14px rgba(58, 232, 112, 0.55) !important;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.72);

    opacity: 1 !important;

    filter: none !important;
}

#keyboard .key.hr-key-wrong,
.keyboard .key.hr-key-wrong {
    border-color:
        rgba(255, 99, 99, 0.98) !important;

    background:
        linear-gradient(
            180deg,
            #c94444,
            #781b1b
        ) !important;

    color:
        #fff0f0 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 3px 8px rgba(0, 0, 0, 0.38),
        0 0 12px rgba(255, 62, 62, 0.44) !important;

    opacity: 0.82 !important;

    filter: none !important;
}

#keyboard .key.hr-key-correct-flash,
.keyboard .key.hr-key-correct-flash {
    animation:
        hrCorrectKeyFlash 740ms
        cubic-bezier(0.19, 0.82, 0.26, 1.22);
}

#keyboard .key.hr-key-wrong-flash,
.keyboard .key.hr-key-wrong-flash {
    animation:
        hrWrongKeyShake 620ms ease-in-out;
}

/* ---------------------------------------------------------
   WORD PLAQUE EFFECTS
   --------------------------------------------------------- */

.word-plaque.hr-word-correct {
    animation:
        hrWordPlaqueCorrect 760ms
        cubic-bezier(0.18, 0.84, 0.26, 1.12);
}

.word-plaque.hr-word-wrong {
    animation:
        hrWordPlaqueWrong 610ms ease-in-out;
}

.word-plaque.hr-word-solved {
    position: relative;

    overflow: visible;

    animation:
        hrWordPlaqueSolved 1450ms
        cubic-bezier(0.18, 0.80, 0.22, 1.10);
}

.word-plaque.hr-word-solved::after {
    content: "";

    position: absolute;
    inset: -7px;

    pointer-events: none;

    border: 3px solid rgba(255, 216, 83, 0.92);
    border-radius: inherit;

    opacity: 0;

    box-shadow:
        0 0 18px rgba(255, 206, 55, 0.74),
        inset 0 0 15px rgba(255, 226, 112, 0.18);

    animation:
        hrSolvedPlaqueRing 1450ms ease-out;
}

/* ---------------------------------------------------------
   NEWLY REVEALED LETTERS
   --------------------------------------------------------- */

#maskedWord.hr-letter-pop,
.masked-word.hr-letter-pop {
    animation:
        hrMaskedWordPop 690ms
        cubic-bezier(0.18, 0.84, 0.23, 1.20);
}

#maskedWord.hr-word-reveal,
.masked-word.hr-word-reveal {
    color:
        #fff0a8 !important;

    text-shadow:
        0 2px 0 #874807,
        0 4px 5px rgba(0, 0, 0, 0.65),
        0 0 14px rgba(255, 205, 60, 0.72) !important;

    animation:
        hrSolvedWordReveal 1500ms
        cubic-bezier(0.18, 0.82, 0.22, 1.14);
}

/* ---------------------------------------------------------
   CORRECT-GUESS SPARKLES
   --------------------------------------------------------- */

.hr-letter-spark {
    position: absolute;

    width: var(--spark-size, 8px);
    height: var(--spark-size, 8px);

    pointer-events: none;

    z-index: 90;

    background:
        #fff4a5;

    clip-path:
        polygon(
            50% 0%,
            61% 38%,
            100% 50%,
            61% 62%,
            50% 100%,
            39% 62%,
            0% 50%,
            39% 38%
        );

    filter:
        drop-shadow(
            0 0 5px
            rgba(255, 220, 79, 0.95)
        );

    animation:
        hrLetterSparkFly
        var(--spark-time, 850ms)
        ease-out
        forwards;
}

/* ---------------------------------------------------------
   WHOLE-WORD WRONG SOLVE CAPTION
   --------------------------------------------------------- */

.hr-wrong-solve-caption {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 95;

    padding: 7px 12px;

    pointer-events: none;

    border: 2px solid rgba(255, 132, 132, 0.92);
    border-radius: 10px;

    background:
        rgba(91, 13, 13, 0.94);

    color:
        #ffd4d4;

    font-size: 12px;
    font-weight: 900;
    line-height: 1;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.48),
        0 0 14px rgba(255, 59, 59, 0.35);

    transform:
        translate(-50%, -50%);

    animation:
        hrWrongSolveCaption 950ms ease-out forwards;
}

/* ---------------------------------------------------------
   KEYFRAMES
   --------------------------------------------------------- */

@keyframes hrCorrectKeyFlash {
    0% {
        transform:
            scale(1);
    }

    30% {
        transform:
            translateY(-6px)
            scale(1.16);

        filter:
            brightness(1.28);
    }

    55% {
        transform:
            translateY(1px)
            scale(0.96);
    }

    100% {
        transform:
            translateY(0)
            scale(1);

        filter:
            brightness(1);
    }
}

@keyframes hrWrongKeyShake {
    0%,
    100% {
        transform:
            translateX(0)
            rotate(0);
    }

    16% {
        transform:
            translateX(-7px)
            rotate(-4deg);
    }

    32% {
        transform:
            translateX(6px)
            rotate(4deg);
    }

    48% {
        transform:
            translateX(-5px)
            rotate(-3deg);
    }

    64% {
        transform:
            translateX(4px)
            rotate(2deg);
    }

    80% {
        transform:
            translateX(-2px);
    }
}

@keyframes hrWordPlaqueCorrect {
    0%,
    100% {
        transform:
            scale(1);

        filter:
            brightness(1);
    }

    38% {
        transform:
            scale(1.025);

        filter:
            brightness(1.18)
            saturate(1.16);

        box-shadow:
            0 0 20px rgba(72, 232, 120, 0.32);
    }
}

@keyframes hrWordPlaqueWrong {
    0%,
    100% {
        transform:
            translateX(0);

        filter:
            none;
    }

    15% {
        transform:
            translateX(-9px);

        filter:
            brightness(0.92)
            sepia(0.25)
            saturate(1.5);
    }

    30% {
        transform:
            translateX(8px);
    }

    45% {
        transform:
            translateX(-6px);
    }

    60% {
        transform:
            translateX(5px);
    }

    76% {
        transform:
            translateX(-3px);
    }
}

@keyframes hrWordPlaqueSolved {
    0% {
        transform:
            scale(1);

        filter:
            brightness(1);
    }

    34% {
        transform:
            scale(1.055);

        filter:
            brightness(1.28)
            saturate(1.24);
    }

    58% {
        transform:
            scale(0.985);
    }

    100% {
        transform:
            scale(1);

        filter:
            brightness(1.08);
    }
}

@keyframes hrSolvedPlaqueRing {
    0% {
        opacity: 0;

        transform:
            scale(0.92);
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            scale(1.08);
    }
}

@keyframes hrMaskedWordPop {
    0% {
        transform:
            scale(1);
    }

    34% {
        transform:
            translateY(-5px)
            scale(1.09);

        color:
            #eaffef;

        text-shadow:
            0 0 12px rgba(63, 239, 119, 0.72);
    }

    68% {
        transform:
            translateY(1px)
            scale(0.985);
    }

    100% {
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes hrSolvedWordReveal {
    0% {
        opacity: 0.55;

        transform:
            scale(0.88);

        letter-spacing:
            0.22em;
    }

    35% {
        opacity: 1;

        transform:
            scale(1.10);

        letter-spacing:
            0.09em;
    }

    64% {
        transform:
            scale(0.98);
    }

    100% {
        opacity: 1;

        transform:
            scale(1);

        letter-spacing:
            inherit;
    }
}

@keyframes hrLetterSparkFly {
    0% {
        opacity: 0;

        transform:
            translate(0, 0)
            scale(0.25)
            rotate(0deg);
    }

    22% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            translate(
                var(--spark-x, 0px),
                var(--spark-y, -55px)
            )
            scale(1.35)
            rotate(190deg);
    }
}

@keyframes hrWrongSolveCaption {
    0% {
        opacity: 0;

        transform:
            translate(-50%, -30%)
            scale(0.78);
    }

    24% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.04);
    }

    68% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -80%)
            scale(0.96);
    }
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 560px) {
    .hr-wrong-solve-caption {
        padding:
            6px 9px;

        font-size:
            10px;
    }

    #keyboard .key.hr-key-correct-flash,
    .keyboard .key.hr-key-correct-flash {
        animation-duration:
            610ms;
    }

    #keyboard .key.hr-key-wrong-flash,
    .keyboard .key.hr-key-wrong-flash {
        animation-duration:
            530ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    #keyboard .key,
    .keyboard .key,
    .word-plaque,
    #maskedWord,
    .masked-word,
    .hr-letter-spark,
    .hr-wrong-solve-caption {
        animation-duration:
            1ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            1ms !important;
    }
}