/* =========================================================
   HANGMAN RESCUE - MOBILE KEYBOARD TIMER
   ========================================================= */

.hr-mobile-turn-timer {
    display: none;
}

/*
  Mobile-only timer directly above the keyboard.
*/
@media (max-width: 560px) {
    .hr-mobile-turn-timer {
        position: relative;

        display: none;

        width: calc(100% - 12px);
        box-sizing: border-box;

        margin: 5px auto 7px;
        padding: 6px 9px 7px;

        border: 2px solid rgba(184, 117, 21, 0.95);
        border-radius: 12px;

        background:
            linear-gradient(
                180deg,
                rgba(22, 43, 70, 0.98),
                rgba(7, 24, 44, 0.98)
            );

        box-shadow:
            inset 0 0 0 1px rgba(255, 210, 85, 0.18),
            0 3px 8px rgba(0, 0, 0, 0.38);

        color: #ffffff;

        z-index: 30;
    }

    .hr-mobile-turn-timer.hr-visible {
        display: block;
    }

    .hr-mobile-turn-timer__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;

        margin-bottom: 4px;
    }

    .hr-mobile-turn-timer__label {
        overflow: hidden;

        color: #f7d477;

        font-size: 11px;
        font-weight: 800;
        line-height: 1.1;

        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-overflow: ellipsis;
        white-space: nowrap;

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

    .hr-mobile-turn-timer__seconds {
        flex: 0 0 auto;

        min-width: 48px;

        color: #e9fff0;

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

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

    .hr-mobile-turn-timer__track {
        position: relative;

        width: 100%;
        height: 7px;

        overflow: hidden;

        border: 1px solid rgba(255, 255, 255, 0.17);
        border-radius: 999px;

        background:
            rgba(0, 0, 0, 0.52);

        box-shadow:
            inset 0 1px 3px rgba(0, 0, 0, 0.65);
    }

    .hr-mobile-turn-timer__fill {
        position: absolute;

        top: 0;
        bottom: 0;
        left: 0;

        width: 0%;

        border-radius: inherit;

        background:
            linear-gradient(
                90deg,
                #15a94b,
                #42e26f
            );

        box-shadow:
            0 0 7px rgba(59, 232, 110, 0.74);

        transition:
            width 180ms linear,
            background 180ms ease,
            box-shadow 180ms ease;
    }

    /*
      Yellow warning under ten seconds.
    */
    .hr-mobile-turn-timer.hr-warning
    .hr-mobile-turn-timer__fill {
        background:
            linear-gradient(
                90deg,
                #d79a0c,
                #ffd13d
            );

        box-shadow:
            0 0 8px rgba(255, 201, 47, 0.78);
    }

    .hr-mobile-turn-timer.hr-warning
    .hr-mobile-turn-timer__seconds {
        color: #ffe47e;
    }

    /*
      Red danger warning during the final five seconds.
    */
    .hr-mobile-turn-timer.hr-danger
    .hr-mobile-turn-timer__fill {
        background:
            linear-gradient(
                90deg,
                #b31919,
                #ff4545
            );

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

        animation:
            hrMobileTimerPulse 650ms ease-in-out infinite;
    }

    .hr-mobile-turn-timer.hr-danger
    .hr-mobile-turn-timer__seconds {
        color: #ff8d8d;

        animation:
            hrMobileTimerTextPulse 650ms ease-in-out infinite;
    }
}

@media (max-width: 430px) {
    .hr-mobile-turn-timer {
        width: calc(100% - 8px);

        margin-top: 4px;
        margin-bottom: 5px;

        padding:
            5px 7px 6px;
    }

    .hr-mobile-turn-timer__label {
        font-size: 10px;
    }

    .hr-mobile-turn-timer__seconds {
        min-width: 44px;

        font-size: 11px;
    }

    .hr-mobile-turn-timer__track {
        height: 6px;
    }
}

@keyframes hrMobileTimerPulse {
    0%,
    100% {
        opacity: 0.78;
        filter: brightness(0.92);
    }

    50% {
        opacity: 1;
        filter: brightness(1.35);
    }
}

@keyframes hrMobileTimerTextPulse {
    0%,
    100% {
        opacity: 0.82;
    }

    50% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hr-mobile-turn-timer,
    .hr-mobile-turn-timer * {
        animation: none !important;
        transition-duration: 1ms !important;
    }
}