/* Full item cards are shown in the quest/achievement reward tooltip. */
.quest-card-tooltip {
    max-height: min(680px, calc(100vh - 32px));
    max-height: min(680px, calc(100dvh - 32px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    /* Невидимый popup не должен оставаться стеклянной панелью поверх страницы:
       иначе после закрытия он перехватывает следующие тапы по карточкам. */
    pointer-events: none;
}

.quest-card-tooltip.is-visible {
    pointer-events: auto;
}

.quest-card-tooltip__close {
    position: sticky;
    top: 0;
    z-index: 2;
    float: right;
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: -7px -9px 5px 8px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    background: rgba(12, 14, 18, 0.96);
    color: rgba(255, 255, 255, 0.82);
    font: 24px/1 Arial, sans-serif;
    cursor: pointer;
}

.quest-card-tooltip__content {
    min-width: 0;
}

/* GIF не меняет предел ширины текущего tooltip: на больших экранах он занимает
   до 360px, а на телефоне сжимается вместе с доступной областью popup. */
.quest-card-tooltip__media {
    display: block;
    width: auto;
    max-width: min(360px, 100%);
    height: auto;
    max-height: 360px;
    margin: 10px auto 0;
    border-radius: 4px;
}

@media (hover: none), (pointer: coarse) {
    .quest-card-tooltip__close {
        display: inline-flex;
    }

    .quest-card-tooltip {
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        padding: 14px 16px;
        font-size: 14px;
        line-height: 1.5;
    }

    .quest-card [data-tooltip] {
        -webkit-tap-highlight-color: transparent;
    }

    .quest-card__reward {
        cursor: pointer;
        touch-action: manipulation;
    }
}