/* Shared short-drama cards: Figma 44305:154165 and 44271:7372. */
:root {
    /* Homepage H5 tag appearance, also used by recommendation cards. */
    --poster-tag-height: 24px;
    --poster-tag-padding: 2px 8px;
    --poster-tag-border: 1px solid rgba(255, 74, 74, .08);
    --poster-tag-radius: 9px;
    --poster-tag-background: rgba(255, 74, 74, .08);
    --poster-tag-color: #ff7676;
    --poster-tag-font: 400 12px / 18px "PingFang SC";
}

.poster-hover-tag-source[hidden],
.poster-hover-popup[hidden] {
    display: none !important;
}

@media (min-width: 768px) {
    body .poster-card {
        box-sizing: border-box;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 18px;
        background: #1d1d1d;
    }

    body .poster-card:hover {
        background: #1d1d1d;
    }

    body .poster-card .poster-cover {
        width: 100%;
        height: auto;
        padding: 0;
        aspect-ratio: 3 / 4;
        border-radius: 0;
    }

    body .poster-card .poster-card-body {
        flex: 0 0 auto;
        min-height: 72px;
        padding: 12px 10px;
        gap: 6px;
        background: #1d1d1d;
    }

    body .poster-card .poster-card-title {
        min-height: 22px;
        color: #f5f5f5;
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
    }

    body .poster-card .poster-card-subtitle {
        min-height: 20px;
        color: #aaa;
        font-size: 14px;
        line-height: 20px;
    }

    body .poster-card .poster-card-meta {
        display: none;
    }
}

.poster-hover-popup {
    position: fixed;
    z-index: 1200;
    --poster-hover-unit: 1px;
    max-height: calc(100dvh - 24px);
    box-sizing: border-box;
    overflow: hidden;
    border-radius: calc(18 * var(--poster-hover-unit));
    background: linear-gradient(117deg, #111518, #242b31);
    box-shadow: 0 calc(8 * var(--poster-hover-unit)) calc(24 * var(--poster-hover-unit)) rgba(0, 0, 0, .32);
    color: #f5f5f5;
    opacity: 0;
    transition: left .28s cubic-bezier(.22, 1, .36, 1), top .28s cubic-bezier(.22, 1, .36, 1), width .28s cubic-bezier(.22, 1, .36, 1), height .28s cubic-bezier(.22, 1, .36, 1), opacity .16s ease-out;
    scrollbar-width: thin;
    scrollbar-color: #555 transparent;
}

.poster-hover-popup.is-visible {
    opacity: 1;
}

.poster-hover-popup.is-ready {
    overflow: auto;
}

.poster-hover-popup.is-closing {
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease-out;
}

.poster-hover-tags,
.poster-hover-play {
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease-out;
}

.poster-hover-popup.is-ready .poster-hover-tags,
.poster-hover-popup.is-ready .poster-hover-play {
    opacity: 1;
    visibility: visible;
}

.poster-hover-cover-link {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

/* The cover is the scale reference, including while the hover card expands. */
body .poster-card .poster-cover,
.poster-hover-cover-link {
    container-type: inline-size;
}

body .poster-card .poster-cover > .home-corner-badge,
body .personal-library-cover > .home-corner-badge,
body .poster-hover-cover-link > .home-corner-badge {
    /* 232px desktop cover: 30px badge, 14px text and 8px inset. */
    --poster-badge-unit: calc(100cqw / 232);
    position: absolute;
    top: calc(8 * var(--poster-badge-unit));
    right: calc(8 * var(--poster-badge-unit));
    z-index: 2;
    display: inline-flex;
    box-sizing: border-box;
    min-height: calc(30 * var(--poster-badge-unit));
    align-items: center;
    justify-content: center;
    padding: calc(5 * var(--poster-badge-unit)) calc(10 * var(--poster-badge-unit));
    border-radius: calc(6 * var(--poster-badge-unit));
    color: #fff;
    font-size: calc(14 * var(--poster-badge-unit));
    font-weight: 400;
    line-height: calc(20 * var(--poster-badge-unit));
}

body .poster-card .poster-cover > .home-corner-badge--vip,
body .personal-library-cover > .home-corner-badge--vip,
body .poster-hover-cover-link > .home-corner-badge--vip {
    color: #320000;
    font-family: Georgia, serif;
    font-size: calc(18 * var(--poster-badge-unit));
}

@media (max-width: 767px) {
    body .poster-card .poster-cover > .home-corner-badge,
    body .personal-library-cover > .home-corner-badge {
        /* Preserve the H5 design proportions at its 164px cover width. */
        --poster-badge-unit: calc(100cqw / 164);
        min-height: calc(26 * var(--poster-badge-unit));
        padding: calc(4 * var(--poster-badge-unit)) calc(8 * var(--poster-badge-unit));
        font-size: calc(12 * var(--poster-badge-unit));
        line-height: calc(18 * var(--poster-badge-unit));
    }

    body .poster-card .poster-cover > .home-corner-badge--vip,
    body .personal-library-cover > .home-corner-badge--vip {
        font-size: calc(16 * var(--poster-badge-unit));
    }
}

.poster-hover-popup .home-corner-badge--hot { background: #ff4d60; }
.poster-hover-popup .home-corner-badge--new { background: #7065ff; }
.poster-hover-popup .home-corner-badge--free { background: #0bbba9; }
.poster-hover-popup .home-corner-badge--vip { background: linear-gradient(115deg, #ffe6b3, #ffd04d); color: #320000; font-family: Georgia, serif; }

.poster-hover-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.poster-hover-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(10 * var(--poster-hover-unit));
    padding: calc(16 * var(--poster-hover-unit));
}

.poster-hover-title {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    color: #f5f5f5;
    font-size: calc(20 * var(--poster-hover-unit));
    font-weight: 600;
    line-height: calc(28 * var(--poster-hover-unit));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.poster-hover-description {
    display: -webkit-box;
    max-width: 100%;
    height: calc(40 * var(--poster-hover-unit));
    flex: 0 0 calc(40 * var(--poster-hover-unit));
    margin: 0;
    overflow: hidden;
    color: #aaa;
    font-size: calc(14 * var(--poster-hover-unit));
    line-height: calc(20 * var(--poster-hover-unit));
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.poster-hover-tags {
    display: flex;
    max-width: 100%;
    align-items: center;
    gap: calc(6 * var(--poster-hover-unit));
    overflow: hidden;
}

.poster-hover-tag {
    display: inline-flex;
    max-width: 100%;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: calc(2 * var(--poster-hover-unit)) calc(8 * var(--poster-hover-unit));
    border: 1px solid rgba(255, 74, 74, .08);
    border-radius: calc(9 * var(--poster-hover-unit));
    background: linear-gradient(90deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
    color: #999;
    font-size: calc(14 * var(--poster-hover-unit));
    line-height: calc(20 * var(--poster-hover-unit));
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.poster-hover-tag:hover {
    color: #f5f5f5;
    border-color: rgba(255, 74, 74, .24);
}

.poster-hover-play {
    display: inline-flex;
    min-height: calc(40 * var(--poster-hover-unit));
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: calc(10 * var(--poster-hover-unit)) calc(24 * var(--poster-hover-unit));
    border-radius: calc(20 * var(--poster-hover-unit));
    background: linear-gradient(115deg, rgba(255, 75, 2, .6), #ff4b02);
    color: #fff;
    font-size: calc(14 * var(--poster-hover-unit));
    font-weight: 500;
    line-height: calc(20 * var(--poster-hover-unit));
    text-decoration: none;
}

.poster-hover-play:hover {
    background: #ff4b02;
}

.poster-hover-popup a:focus-visible {
    outline: calc(2 * var(--poster-hover-unit)) solid #ff7b47;
    outline-offset: calc(-3 * var(--poster-hover-unit));
}

@media (prefers-reduced-motion: reduce) {
    .poster-hover-popup {
        transition: none;
    }
}

/* Shared PC recommendation cards for playback, membership and wallet pages. */
@media (min-width: 861px) {
    :is(.play-page .play-related, .deposit-layout .deposit-recommendations) .poster-card { width: 100%; min-width: 0; height: auto; border-radius: 12px; border: 0; overflow: hidden; background: #262626; }
    :is(.play-page .play-related, .deposit-layout .deposit-recommendations) .poster-cover { width: 100%; height: auto; aspect-ratio: 3 / 4; padding: 0; border-radius: 12px; }
    :is(.play-page .play-related, .deposit-layout .deposit-recommendations) .poster-cover-img { width: 100%; height: 100%; object-fit: cover; }
    :is(.play-page .play-related, .deposit-layout .deposit-recommendations) .poster-card-body { padding: 8px; gap: 4px; min-height: 80px; background: transparent; }
    :is(.play-page .play-related, .deposit-layout .deposit-recommendations) .poster-card-title { display: block; font-size: 14px; line-height: 20px; min-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    :is(.play-page .play-related, .deposit-layout .deposit-recommendations) .poster-card-subtitle { display: block; font-size: 12px; line-height: 16px; min-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    :is(.play-page .play-related, .deposit-layout .deposit-recommendations) .poster-card-meta { display: flex; min-height: 20px; gap: 4px; font-size: 10px; line-height: 14px; }
    :is(.play-page .play-related, .deposit-layout .deposit-recommendations) .poster-card-heat { font-size: 10px; line-height: 14px; }
}

/* Playback on both ends, and membership/wallet recommendations, share H5 home tags. */
:is(.play-page .play-related, .deposit-layout .deposit-recommendations) .poster-card .poster-card-tag {
    box-sizing: border-box;
    max-width: 50%;
    min-height: var(--poster-tag-height);
    padding: var(--poster-tag-padding);
    border: var(--poster-tag-border);
    border-radius: var(--poster-tag-radius);
    background: var(--poster-tag-background);
    color: var(--poster-tag-color);
    font: var(--poster-tag-font);
}

/* Shared H5 card appearance; recharge pages retain their own scrolling layout. */
@media (max-width: 767px) {
    body:is(.home-page, .drama-shared-cards) .card-grid {
        column-gap: 15px;
    }

    .deposit-layout .deposit-recommendations .poster-card {
        flex-basis: calc((100% - 24px) / 2.5);
    }

    body:is(.home-page, .drama-shared-cards, .deposit-layout) .poster-card {
        overflow: hidden;
        border-radius: 12px;
        background: #1d1d1d;
    }

    body:is(.home-page, .drama-shared-cards, .deposit-layout) .poster-card .poster-cover {
        width: 100%;
        height: auto;
        padding: 0;
        aspect-ratio: 164 / 224;
        border-radius: 0;
    }

    body:is(.home-page, .drama-shared-cards, .deposit-layout) .poster-card .poster-like-badge {
        display: none;
    }

    body:is(.home-page, .drama-shared-cards, .deposit-layout) .poster-card .episode-badge {
        right: 8px;
        bottom: 8px;
        min-height: 24px;
        padding: 3px 8px;
        border-radius: 6px;
    }

    body:is(.home-page, .drama-shared-cards, .deposit-layout) .poster-card .poster-card-body {
        box-sizing: border-box;
        height: 86px;
        min-height: 86px;
        flex: 0 0 86px;
        padding: 8px 12px;
        gap: 4px;
        background: #1d1d1d;
    }

    body:is(.home-page, .drama-shared-cards, .deposit-layout) .poster-card .poster-card-title {
        min-height: 20px;
        color: #f5f5f5;
        font-family: "PingFang SC", sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

    body:is(.home-page, .drama-shared-cards, .deposit-layout) .poster-card .poster-card-subtitle {
        min-height: 18px;
        color: #999;
        font-family: "PingFang SC", sans-serif;
        font-size: 12px;
        line-height: 18px;
    }

    body:is(.home-page, .drama-shared-cards, .deposit-layout) .poster-card .poster-card-tag {
        box-sizing: border-box;
        max-width: 50%;
        min-height: var(--poster-tag-height);
        padding: var(--poster-tag-padding);
        border: var(--poster-tag-border);
        border-radius: var(--poster-tag-radius);
        background: var(--poster-tag-background);
        color: var(--poster-tag-color);
        font: var(--poster-tag-font);
    }

    body:is(.home-page, .drama-shared-cards, .deposit-layout) .poster-card .poster-card-heat {
        color: #8a8a8a;
        font-size: 12px;
        line-height: 18px;
    }
}