.hint_popup {
    display: none;
    position: absolute;
    left: 50%; top: 50%; width: 40rem; height: 20rem;
    background-color: var(--catalog-bg-color); 
    backdrop-filter: blur(3rem);
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.75);
    pointer-events: none;
    cursor: pointer;
    transition: transform 0.3s, opacity 0.3s;
    transform-origin: center;
    transform: translate(-50%,-50%) scale(0.7);
    opacity: 0;

    border-radius: 2.5rem;
    background-color: rgba(0,0,0,0.75);
    outline: 3.5px solid #be3d3d;
    overflow: hidden;
}

.hint_popup.mouse {
    background-size: 78%;
    background-image: url(images/hint_mouse.svg);
    background-position: center;
    background-repeat: no-repeat;
}

body.hint_mouse .hint_popup.mouse,
body.hint_tanks .hint_popup.tanks {
    transform: translate(-50%,-50%) scale(1.0);
    opacity: 1;
    pointer-events: all;
}

.hint_popup .hint_close {
    position: absolute;
    right: 1rem; top: 1rem; width: 4rem; height: 4rem;
}

.hint_popup .hint_close svg {
    position: absolute;
    left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: 100%; height: 100%;
    pointer-events: none;
}

.hint_popup.tanks {
    padding: 1rem;
    height: auto;
}

.hint_popup video {
    left: 1rem; top: 1rem; width: 100%; height: 22rem;
    border-radius: 1.5rem;
    object-fit: cover;
}

.hint_popup .text {
    font-family: 'Intro';
    font-size: 1.6rem;
    padding: 1rem;
    color: white;
}

@media (pointer: fine) {
    .hint_popup {
        display: block;
    }
}