/* =========================================================
   HANGMAN RESCUE PWA CONTROLS
   ========================================================= */

.hr-pwa-controls {
    position: fixed;
    right:
        max(14px, env(safe-area-inset-right));
    bottom:
        max(14px, env(safe-area-inset-bottom));

    display: grid;
    gap: 9px;

    z-index: 25000;

    pointer-events: none;
}

.hr-pwa-install {
    min-height: 45px;

    padding: 10px 16px;

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

    background:
        linear-gradient(
            180deg,
            #d99118,
            #753707
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 7px 18px rgba(0, 0, 0, 0.47),
        0 0 16px rgba(244, 175, 38, 0.23);

    color: #fff7d1;

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

    cursor: pointer;
    pointer-events: auto;

    animation:
        hrPwaInstallPulse
        2.5s ease-in-out infinite;
}

.hr-pwa-install[hidden] {
    display: none !important;
}

.hr-pwa-update {
    display: flex;
    align-items: center;
    gap: 10px;

    width: min(360px, calc(100vw - 28px));

    padding: 10px 11px;

    border: 2px solid #4ca7d9;
    border-radius: 13px;

    background:
        rgba(7, 28, 47, 0.97);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.56);

    color: #ffffff;

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

    pointer-events: auto;
}

.hr-pwa-update[hidden] {
    display: none !important;
}

.hr-pwa-update span {
    flex: 1;
}

.hr-pwa-update button {
    min-height: 35px;

    padding: 7px 11px;

    border: 1px solid #eac34e;
    border-radius: 9px;

    background:
        linear-gradient(
            180deg,
            #d68b17,
            #773907
        );

    color: #fff7d4;

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

    cursor: pointer;
}

.hr-pwa-toast {
    width: min(330px, calc(100vw - 28px));

    padding: 10px 13px;

    border: 1px solid rgba(126, 195, 232, 0.57);
    border-radius: 11px;

    background:
        rgba(5, 23, 39, 0.96);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.53);

    color: #e4f4ff;

    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;

    pointer-events: auto;
}

.hr-pwa-toast[hidden] {
    display: none !important;
}

@keyframes hrPwaInstallPulse {
    0%,
    100% {
        transform:
            translateY(0);

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            0 7px 18px rgba(0, 0, 0, 0.47),
            0 0 10px rgba(244, 175, 38, 0.16);
    }

    50% {
        transform:
            translateY(-2px);

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            0 10px 22px rgba(0, 0, 0, 0.54),
            0 0 23px rgba(244, 175, 38, 0.37);
    }
}

@media (max-width: 600px) {
    .hr-pwa-controls {
        left:
            max(10px, env(safe-area-inset-left));
        right:
            max(10px, env(safe-area-inset-right));
        bottom:
            max(10px, env(safe-area-inset-bottom));
    }

    .hr-pwa-install {
        justify-self: end;

        min-height: 43px;

        padding: 9px 14px;

        font-size: 12px;
    }

    .hr-pwa-update,
    .hr-pwa-toast {
        width: 100%;
    }
}

@media (display-mode: standalone) {
    .hr-pwa-install {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hr-pwa-install {
        animation: none !important;
    }
}