/* =========================================================
   HANGMAN RESCUE - PREMIUM RESCUE VICTORY
   ========================================================= */

.hr-rescue-victory-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: 10000;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 198, 54, 0.16),
            rgba(15, 8, 27, 0.24) 52%,
            rgba(4, 4, 14, 0.64) 100%
        );

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

.hr-rescue-victory-overlay.hr-visible {
    opacity: 1;
    visibility: visible;
}

.hr-rescue-victory-card {
    position: relative;

    width: min(520px, calc(100vw - 32px));

    overflow: hidden;

    padding: 22px 24px 20px;
    box-sizing: border-box;

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

    background:
        linear-gradient(
            180deg,
            rgba(53, 30, 9, 0.98),
            rgba(18, 31, 53, 0.99)
        );

    box-shadow:
        inset 0 0 0 2px rgba(255, 224, 119, 0.35),
        0 18px 50px rgba(0, 0, 0, 0.72),
        0 0 35px rgba(255, 184, 45, 0.34);

    color: #ffffff;
    text-align: center;

    pointer-events: auto;

    transform:
        translateY(24px)
        scale(0.82);

    opacity: 0;
}

.hr-rescue-victory-overlay.hr-visible
.hr-rescue-victory-card {
    animation:
        hrVictoryCardEnter 720ms
        cubic-bezier(0.18, 0.88, 0.26, 1.18)
        forwards;
}

.hr-rescue-victory-rays {
    position: absolute;
    inset: -70%;

    pointer-events: none;

    opacity: 0.42;

    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(255, 209, 87, 0.22) 0deg 8deg,
            transparent 8deg 20deg
        );

    animation:
        hrVictoryRays 18s linear infinite;
}

.hr-rescue-victory-content {
    position: relative;
    z-index: 2;
}

.hr-rescue-victory-icon {
    display: block;

    margin-bottom: 4px;

    font-size: 42px;
    line-height: 1;

    animation:
        hrVictoryIconBounce 900ms ease-in-out infinite alternate;
}

.hr-rescue-victory-title {
    display: block;

    margin: 0;

    color: #ffd467;

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

    letter-spacing: 0.035em;

    text-shadow:
        0 3px 0 #753409,
        0 6px 8px rgba(0, 0, 0, 0.72),
        0 0 18px rgba(255, 203, 71, 0.46);
}

.hr-rescue-victory-message {
    display: block;

    margin: 10px auto 14px;

    max-width: 430px;

    color: #fff4cb;

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

.hr-rescue-victory-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: fit-content;

    margin: 0 auto 15px;
    padding: 9px 18px;

    border: 2px solid rgba(255, 201, 65, 0.78);
    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(121, 68, 11, 0.88),
            rgba(60, 32, 7, 0.92)
        );

    box-shadow:
        inset 0 0 8px rgba(255, 221, 102, 0.25),
        0 4px 10px rgba(0, 0, 0, 0.34);

    color: #ffe88f;

    font-size: 16px;
    font-weight: 900;
}

.hr-rescue-victory-score strong {
    color: #ffffff;
    font-size: 22px;
}

.hr-rescue-victory-actions {
    min-height: 45px;
}

.hr-rescue-victory-next {
    min-width: 170px;

    padding: 11px 22px;

    border: 2px solid #ffda67;
    border-radius: 13px;

    background:
        linear-gradient(
            180deg,
            #2aa95f,
            #126836
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        0 5px 12px rgba(0, 0, 0, 0.40),
        0 0 15px rgba(45, 213, 111, 0.22);

    color: #ffffff;

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

    cursor: pointer;

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

.hr-rescue-victory-next:hover {
    filter: brightness(1.12);
}

.hr-rescue-victory-waiting {
    display: inline-block;

    padding: 10px 16px;

    color: #d9e9ff;

    font-size: 13px;
    font-weight: 700;
}

/* ---------------------------------------------------------
   SCENE VICTORY EFFECTS
   --------------------------------------------------------- */

#scene.hr-rescue-running {
    animation:
        hrVictorySceneGlow 2200ms ease-in-out;
}

/*
  The premium pirate image moves back toward the ship.
  The host keeps its server-controlled horizontal stage position,
  while this visual animation temporarily carries the artwork left.
*/
#scene.hr-rescue-running
.hr-premium-pirate-art {
    animation:
        hrPirateRescueReturn 2400ms
        cubic-bezier(0.18, 0.72, 0.22, 1)
        forwards !important;
}

#scene.hr-rescue-running
.hr-premium-pirate-fallback {
    animation:
        hrPirateFallbackReturn 2400ms
        cubic-bezier(0.18, 0.72, 0.22, 1)
        forwards !important;
}

/*
  Kraken sinks away from the rescued pirate.
*/
#scene.hr-rescue-running #kraken,
#scene.hr-rescue-running .kraken {
    animation:
        hrKrakenVictorySink 2500ms
        cubic-bezier(0.38, 0.03, 0.74, 0.42)
        forwards !important;
}

/* ---------------------------------------------------------
   ROPE BREAK FRAGMENTS
   --------------------------------------------------------- */

.hr-victory-rope-piece {
    position: absolute;

    width: 27px;
    height: 5px;

    pointer-events: none;

    z-index: 76;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #d39b47,
            #80501f
        );

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.65);

    transform-origin: center;

    animation:
        hrRopeFragmentFall 1050ms ease-in forwards;
}

/* ---------------------------------------------------------
   GOLD COINS AND SPARKLES
   --------------------------------------------------------- */

.hr-victory-coin {
    position: absolute;

    width: var(--coin-size, 15px);
    height: var(--coin-size, 15px);

    pointer-events: none;

    z-index: 78;

    border: 2px solid #fff0a3;
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 34% 28%,
            #fff7af 0%,
            #ffd43d 30%,
            #dc8c0e 70%,
            #8c4804 100%
        );

    box-shadow:
        0 0 8px rgba(255, 210, 57, 0.92);

    animation:
        hrVictoryCoinBurst
        var(--coin-time, 1500ms)
        cubic-bezier(0.16, 0.74, 0.28, 1)
        forwards;
}

.hr-victory-coin::after {
    content: "★";

    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    color: rgba(126, 69, 4, 0.72);
    font-size: 58%;
    font-weight: 900;
}

.hr-victory-spark {
    position: absolute;

    width: 9px;
    height: 9px;

    pointer-events: none;

    z-index: 79;

    background: #fff2a5;

    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, 82, 0.95)
        );

    animation:
        hrVictorySpark
        var(--spark-time, 1100ms)
        ease-out
        forwards;
}

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

@keyframes hrVictoryCardEnter {
    0% {
        opacity: 0;
        transform:
            translateY(28px)
            scale(0.78)
            rotate(-2deg);
    }

    64% {
        opacity: 1;
        transform:
            translateY(-6px)
            scale(1.04)
            rotate(1deg);
    }

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

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

@keyframes hrVictoryIconBounce {
    from {
        transform:
            translateY(0)
            rotate(-4deg);
    }

    to {
        transform:
            translateY(-5px)
            rotate(4deg);
    }
}

@keyframes hrVictorySceneGlow {
    0%,
    100% {
        filter: none;
    }

    30% {
        filter:
            brightness(1.18)
            saturate(1.20);
    }

    62% {
        filter:
            brightness(1.06)
            saturate(1.12);
    }
}

@keyframes hrPirateRescueReturn {
    0% {
        translate:
            var(--hr-pirate-x, 0px)
            0;

        rotate: 0deg;

        filter:
            drop-shadow(
                0 6px 5px
                rgba(0, 0, 0, 0.45)
            );
    }

    15% {
        rotate: -5deg;
    }

    28% {
        rotate: 5deg;
    }

    42% {
        translate:
            calc(var(--hr-pirate-x, 0px) - 8px)
            -12px;

        rotate: -4deg;

        filter:
            drop-shadow(
                0 0 12px
                rgba(255, 220, 90, 0.75)
            )
            brightness(1.12);
    }

    62% {
        translate:
            calc(var(--hr-pirate-x, 0px) - 42px)
            -4px;

        rotate: 4deg;
    }

    100% {
        translate:
            calc(var(--hr-pirate-x, 0px) - 92px)
            0;

        rotate: -2deg;

        filter:
            drop-shadow(
                0 5px 5px
                rgba(0, 0, 0, 0.42)
            )
            brightness(1.04);
    }
}

@keyframes hrPirateFallbackReturn {
    0% {
        translate: 0 0;
        rotate: 0;
    }

    40% {
        translate: -10px -12px;
        rotate: -5deg;
    }

    100% {
        translate: -92px 0;
        rotate: -2deg;
    }
}

@keyframes hrKrakenVictorySink {
    0% {
        translate:
            var(--hr-kraken-x, 0px)
            var(--hr-kraken-y, 0px);

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

        opacity: 1;
    }

    24% {
        translate:
            calc(var(--hr-kraken-x, 0px) + 10px)
            calc(var(--hr-kraken-y, 0px) - 7px);

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

        opacity: 1;
    }

    100% {
        translate:
            calc(var(--hr-kraken-x, 0px) + 25px)
            calc(var(--hr-kraken-y, 0px) + 72%);

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

        opacity: 0.12;
    }
}

@keyframes hrRopeFragmentFall {
    0% {
        opacity: 1;

        transform:
            translate(0, 0)
            rotate(var(--rope-rotation, 0deg));
    }

    100% {
        opacity: 0;

        transform:
            translate(
                var(--rope-x, 0px),
                var(--rope-y, 95px)
            )
            rotate(
                calc(
                    var(--rope-rotation, 0deg)
                    + 190deg
                )
            );
    }
}

@keyframes hrVictoryCoinBurst {
    0% {
        opacity: 0;

        transform:
            translate(0, 0)
            scale(0.38)
            rotateY(0deg);
    }

    18% {
        opacity: 1;
    }

    68% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            translate(
                var(--coin-x, 0px),
                var(--coin-y, -90px)
            )
            scale(1)
            rotateY(720deg);
    }
}

@keyframes hrVictorySpark {
    0% {
        opacity: 0;

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

    25% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            translate(
                var(--spark-x, 0px),
                var(--spark-y, -70px)
            )
            scale(1.3)
            rotate(180deg);
    }
}

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

        padding-top: 19vh;
    }

    .hr-rescue-victory-card {
        width: calc(100vw - 26px);

        padding:
            18px 14px 16px;

        border-width: 3px;
        border-radius: 18px;
    }

    .hr-rescue-victory-title {
        font-size: 30px;
    }

    .hr-rescue-victory-icon {
        font-size: 34px;
    }

    .hr-rescue-victory-message {
        margin-top: 8px;

        font-size: 13px;
    }

    .hr-rescue-victory-score {
        padding: 7px 15px;

        font-size: 14px;
    }

    .hr-rescue-victory-score strong {
        font-size: 19px;
    }

    /*
      Shorter mobile rescue slide so the pirate stays within
      the narrower scene.
    */
    @keyframes hrPirateRescueReturn {
        0% {
            translate:
                var(--hr-pirate-x, 0px)
                0;

            rotate: 0deg;
        }

        40% {
            translate:
                calc(var(--hr-pirate-x, 0px) - 5px)
                -8px;

            rotate: -5deg;

            filter:
                drop-shadow(
                    0 0 10px
                    rgba(255, 220, 90, 0.74)
                )
                brightness(1.12);
        }

        100% {
            translate:
                calc(var(--hr-pirate-x, 0px) - 55px)
                0;

            rotate: -2deg;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .hr-rescue-victory-overlay *,
    #scene.hr-rescue-running *,
    #scene.hr-rescue-running {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}