/* =========================================================
   HANGMAN RESCUE - PREMIUM ROUND TRANSITION
   ========================================================= */

.hr-round-transition-overlay {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px;
    box-sizing: border-box;

    pointer-events: none;

    opacity: 0;
    visibility: hidden;

    z-index: 11000;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 211, 103, 0.15),
            rgba(6, 19, 36, 0.56) 56%,
            rgba(2, 7, 16, 0.78) 100%
        );

    backdrop-filter: blur(2px);

    transition:
        opacity 220ms ease,
        visibility 220ms ease;
}

.hr-round-transition-overlay.hr-visible {
    opacity: 1;
    visibility: visible;
}

.hr-round-transition-card {
    position: relative;

    width: min(570px, calc(100vw - 34px));

    overflow: hidden;

    padding: 23px 24px 21px;
    box-sizing: border-box;

    border: 4px solid #b97016;
    border-radius: 24px;

    background:
        linear-gradient(
            180deg,
            rgba(48, 28, 9, 0.99),
            rgba(14, 31, 52, 0.99)
        );

    box-shadow:
        inset 0 0 0 2px rgba(255, 221, 118, 0.28),
        0 20px 55px rgba(0, 0, 0, 0.72),
        0 0 30px rgba(255, 193, 54, 0.22);

    color: #ffffff;
    text-align: center;

    transform:
        translateY(25px)
        scale(0.84);

    opacity: 0;
}

.hr-round-transition-overlay.hr-visible
.hr-round-transition-card {
    animation:
        hrRoundCardEnter 620ms
        cubic-bezier(0.18, 0.86, 0.25, 1.18)
        forwards;
}

.hr-round-transition-rays {
    position: absolute;
    inset: -90%;

    pointer-events: none;

    opacity: 0.28;

    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(255, 213, 91, 0.24) 0deg 9deg,
            transparent 9deg 22deg
        );

    animation:
        hrRoundRaysRotate 20s linear infinite;
}

.hr-round-transition-content {
    position: relative;
    z-index: 2;
}

.hr-round-transition-kicker {
    display: block;

    margin-bottom: 4px;

    color: #f1cc71;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hr-round-transition-title {
    display: block;

    margin: 0;

    color: #ffe28b;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 6vw, 48px);
    font-weight: 900;
    line-height: 1.05;

    letter-spacing: 0.03em;

    text-shadow:
        0 3px 0 #723708,
        0 6px 8px rgba(0, 0, 0, 0.7),
        0 0 16px rgba(255, 210, 75, 0.38);
}

.hr-round-transition-category {
    display: block;

    margin: 9px 0 4px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 800;
}

.hr-round-transition-clue {
    display: block;

    max-width: 450px;

    margin: 0 auto 17px;

    color: #d9eaff;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.hr-round-transition-countdown {
    display: grid;
    place-items: center;

    width: 96px;
    height: 96px;

    margin: 0 auto;

    border: 4px solid #e5a92e;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(55, 111, 73, 0.96),
            rgba(13, 52, 31, 0.98)
        );

    box-shadow:
        inset 0 0 18px rgba(255, 255, 255, 0.13),
        0 0 22px rgba(74, 223, 123, 0.25);

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 50px;
    font-weight: 900;
    line-height: 1;

    text-shadow:
        0 3px 4px rgba(0, 0, 0, 0.65);

    transform: scale(0.8);
}

.hr-round-transition-countdown.hr-pop {
    animation:
        hrRoundCountdownPop 760ms
        cubic-bezier(0.16, 0.88, 0.22, 1.22);
}

.hr-round-transition-countdown.hr-go {
    width: 145px;

    border-radius: 999px;

    color: #fff09a;

    font-size: 37px;

    box-shadow:
        inset 0 0 18px rgba(255, 255, 255, 0.16),
        0 0 26px rgba(255, 205, 65, 0.42);
}

/* ---------------------------------------------------------
   BOARD LOCK WHILE COUNTDOWN PLAYS
   --------------------------------------------------------- */

body.hr-round-transition-active #keyboard,
body.hr-round-transition-active .keyboard,
body.hr-round-transition-active .solve-row {
    pointer-events: none !important;
}

body.hr-round-transition-active #keyboard,
body.hr-round-transition-active .keyboard {
    opacity: 0.42 !important;

    filter:
        grayscale(0.42)
        saturate(0.58)
        blur(0.2px);
}

body.hr-round-transition-active .solve-row {
    opacity: 0.48;
}

/* ---------------------------------------------------------
   BOARD RESET EFFECTS
   --------------------------------------------------------- */

body.hr-round-resetting .word-plaque {
    animation:
        hrOldWordFade 480ms ease-in-out;
}

body.hr-round-resetting #keyboard .key,
body.hr-round-resetting .keyboard .key {
    animation:
        hrKeyboardReset 520ms ease-in-out;
}

body.hr-round-resetting .category-banner {
    animation:
        hrParchmentFlip 720ms ease-in-out;
}

body.hr-round-resetting .clue-card {
    animation:
        hrClueRefresh 760ms ease-in-out;
}

body.hr-round-resetting .danger-card {
    animation:
        hrWrongCountReset 720ms ease-in-out;
}

body.hr-round-resetting #maskedWord,
body.hr-round-resetting .masked-word {
    animation:
        hrNewWordReveal 850ms
        cubic-bezier(0.18, 0.86, 0.24, 1.16);
}

/* ---------------------------------------------------------
   PIRATE AND KRAKEN RESET
   --------------------------------------------------------- */

#scene.hr-round-scene-reset
.hr-premium-pirate-art {
    animation:
        hrRoundPirateReset 1250ms
        cubic-bezier(0.18, 0.75, 0.22, 1)
        both !important;
}

#scene.hr-round-scene-reset
.hr-premium-pirate-fallback {
    animation:
        hrRoundPirateFallbackReset 1250ms
        cubic-bezier(0.18, 0.75, 0.22, 1)
        both !important;
}

#scene.hr-round-scene-reset #kraken,
#scene.hr-round-scene-reset .kraken {
    animation:
        hrRoundKrakenReset 1550ms
        cubic-bezier(0.22, 0.65, 0.24, 1)
        both !important;
}

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

@keyframes hrRoundCardEnter {
    0% {
        opacity: 0;

        transform:
            translateY(25px)
            scale(0.82)
            rotate(-2deg);
    }

    68% {
        opacity: 1;

        transform:
            translateY(-5px)
            scale(1.035)
            rotate(1deg);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1)
            rotate(0);
    }
}

@keyframes hrRoundRaysRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes hrRoundCountdownPop {
    0% {
        opacity: 0;

        transform:
            scale(0.42)
            rotate(-8deg);
    }

    44% {
        opacity: 1;

        transform:
            scale(1.18)
            rotate(3deg);
    }

    72% {
        transform:
            scale(0.94)
            rotate(0deg);
    }

    100% {
        opacity: 1;

        transform:
            scale(1)
            rotate(0deg);
    }
}

@keyframes hrOldWordFade {
    0%,
    100% {
        opacity: 1;

        transform:
            scale(1);
    }

    45% {
        opacity: 0.15;

        transform:
            scale(0.94);
    }
}

@keyframes hrKeyboardReset {
    0%,
    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

    45% {
        opacity: 0.12;

        transform:
            translateY(5px)
            scale(0.94);
    }
}

@keyframes hrParchmentFlip {
    0%,
    100% {
        transform:
            perspective(500px)
            rotateX(0deg);

        filter:
            brightness(1);
    }

    48% {
        transform:
            perspective(500px)
            rotateX(82deg);

        filter:
            brightness(1.18);
    }
}

@keyframes hrClueRefresh {
    0%,
    100% {
        opacity: 1;

        transform:
            translateX(0);
    }

    42% {
        opacity: 0;

        transform:
            translateX(12px);
    }

    58% {
        opacity: 0;

        transform:
            translateX(-12px);
    }
}

@keyframes hrWrongCountReset {
    0%,
    100% {
        filter:
            brightness(1);

        transform:
            scale(1);
    }

    45% {
        filter:
            brightness(1.18)
            saturate(0.6);

        transform:
            scale(0.96);
    }
}

@keyframes hrNewWordReveal {
    0% {
        opacity: 0;

        transform:
            translateY(10px)
            scale(0.88);

        letter-spacing:
            0.18em;
    }

    64% {
        opacity: 1;

        transform:
            translateY(-2px)
            scale(1.06);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes hrRoundPirateReset {
    0% {
        opacity: 0.2;

        translate:
            calc(var(--hr-pirate-x, 0px) - 85px)
            0;

        filter:
            brightness(0.85);
    }

    55% {
        opacity: 1;

        translate:
            calc(var(--hr-pirate-x, 0px) + 4px)
            -5px;

        filter:
            brightness(1.12);
    }

    100% {
        opacity: 1;

        translate:
            var(--hr-pirate-x, 0px)
            0;

        filter:
            brightness(1);
    }
}

@keyframes hrRoundPirateFallbackReset {
    0% {
        opacity: 0.2;

        translate:
            -75px
            0;
    }

    100% {
        opacity: 1;

        translate:
            0
            0;
    }
}

@keyframes hrRoundKrakenReset {
    0% {
        opacity: 0;

        translate:
            var(--hr-kraken-x, 0px)
            calc(var(--hr-kraken-y, 0px) + 75%);

        scale:
            calc(var(--hr-kraken-scale, 1) * 0.85);
    }

    63% {
        opacity: 1;

        translate:
            var(--hr-kraken-x, 0px)
            calc(var(--hr-kraken-y, 0px) - 7px);

        scale:
            calc(var(--hr-kraken-scale, 1) * 1.025);
    }

    100% {
        opacity: 1;

        translate:
            var(--hr-kraken-x, 0px)
            var(--hr-kraken-y, 0px);

        scale:
            var(--hr-kraken-scale, 1);
    }
}

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

@media (max-width: 560px) {
    .hr-round-transition-overlay {
        align-items: flex-start;

        padding-top: 18vh;
    }

    .hr-round-transition-card {
        width:
            calc(100vw - 24px);

        padding:
            18px 14px 17px;

        border-width:
            3px;

        border-radius:
            18px;
    }

    .hr-round-transition-kicker {
        font-size:
            10px;
    }

    .hr-round-transition-title {
        font-size:
            29px;
    }

    .hr-round-transition-category {
        font-size:
            13px;
    }

    .hr-round-transition-clue {
        margin-bottom:
            13px;

        font-size:
            11px;
    }

    .hr-round-transition-countdown {
        width:
            78px;
        height:
            78px;

        font-size:
            40px;
    }

    .hr-round-transition-countdown.hr-go {
        width:
            125px;

        font-size:
            31px;
    }

    @keyframes hrRoundPirateReset {
        0% {
            opacity: 0.2;

            translate:
                calc(var(--hr-pirate-x, 0px) - 48px)
                0;
        }

        100% {
            opacity: 1;

            translate:
                var(--hr-pirate-x, 0px)
                0;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .hr-round-transition-overlay *,
    body.hr-round-resetting *,
    #scene.hr-round-scene-reset * {
        animation-duration:
            1ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            1ms !important;
    }
}