.movie-card,
.movie-detail-card{
    position:relative;
    width:100%;
    max-width:700px;
    margin:0;
    display:grid;
    grid-template-columns:220px 1fr;
    gap:28px;
    padding:24px;
    background:var(--bg-glass);
    border:1px solid var(--border-light);
    border-radius:22px;
    backdrop-filter:blur(12px);
    box-shadow:
        0 0 30px var(--shadow-main),
        inset 0 0 0 1px var(--border-subtle);
    animation:detailFadeIn 0.22s ease;
}

.movie-card img,
.movie-detail-card img{
    width:100%;
    border-radius:16px;
    display:block;
    box-shadow:0 0 24px var(--shadow-main);
}

.movie-info{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:12px;
    color:var(--text-main);
}

.movie-info h2,
.movie-info h3{
    margin:0;
    font-size:2rem;
    line-height:1.1;
    color:var(--text-main);
}

.movie-info p{
    margin:0;
    font-size:1rem;
    line-height:1.6;
    color:var(--text-muted);
}

.movie-info strong{
    color:var(--text-main);
}

.movie-title-row h2{
    flex:1 1 auto;
    min-width:0;
}

.movie-meta{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
    flex-wrap: wrap;
    font-weight:700;
}

.rt-score{
    display:inline-flex;
    align-items:center;
    gap:2px;
}

.rt-score img{
    width:32px;
    height:32px;
    object-fit:contain;
    display:block;
}

.smaller{
    font-size:12px;
}

.movie-nav{
    position:absolute;
    top:30px;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,0.45);
    color:var(--accent-primary);
    font-size:2rem;
    line-height:1;
    cursor:pointer;
    z-index:5;
    backdrop-filter:blur(6px);
    transition:0.25s ease;
}

.movie-nav:hover{
    background:rgba(0,0,0,0.7);
    box-shadow:0 0 12px var(--glow-primary);
}

.prev-movie{
    left:12px;
}

.next-movie{
    right:12px;
}

.poster-wrap{
    position:relative;
    width:fit-content;
    height:fit-content;
    margin:0 auto 7px;
}

.poster-wrap img,
.poster-wrap .poster-link,
.poster-wrap .no-poster,
.poster-wrap .poster-placeholder{
    display:block;
}

.poster-link{
    position:relative;
    display:inline-block;
    width:auto;
    height:fit-content;
    line-height:0;
    margin:0 auto;
    cursor:pointer;
}

.poster-link img{
    display:block;
    width:100%;
}

.poster-play{
    position:absolute;
    right:10px;
    bottom:10px;
    width:34px;
    height:34px;
    border-radius:50%;
    background:rgba(0,0,0,0.45);
    backdrop-filter:blur(6px);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:1;
    transition:0.25s ease;
}

.poster-play::before{
    content:"";
    width:0;
    height:0;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    border-left:10px solid var(--accent-primary);
    transform:translateX(1px);
}

.no-poster,
.poster-placeholder{
    width:100%;
    min-height:330px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:16px;
    background:var(--bg-input);
    border:1px solid var(--border-light);
    color:var(--text-muted);
}

.favorite-movie{
    position:absolute;
    left:4px;
    bottom:-28px;
    border:none;
    background:none;
    color:#000;
    font-size:1.6rem;
    line-height:1;
    cursor:pointer;
    -webkit-text-stroke:1px rgba(64,255,89,0.45);
    text-shadow:
        0 0 3px rgba(255,255,255,0.15),
        0 0 10px rgba(0,0,0,0.7);
    transition:0.25s ease;
}

.favorite-movie:hover{
    transform:scale(1.12);
}

.favorite-movie.active{
    color:var(--accent-primary);
    text-shadow:
        0 0 8px var(--glow-primary),
        0 0 18px var(--glow-primary);
}

.favorite-movie:not(.active):not(:hover){
    animation:heartIdlePulse 1.8s ease-in-out infinite;
}

.toggle-cast{
    display:inline-flex;
    align-items:center;
    margin-left:6px;
    padding:0;
    border:none;
    background:transparent;
    color:var(--accent-primary);
    font:inherit;
    font-size:0.9em;
    font-weight:700;
    cursor:pointer;
    text-transform:lowercase;
    text-shadow:0 0 8px var(--glow-primary);
}

.toggle-cast:hover{
    color:var(--text-main);
    text-shadow:0 0 12px var(--glow-primary);
}

.movie-detail-card.glitch-transition{
    animation:detailGlitch 0.22s ease;
}

@keyframes detailFadeIn{
    0%{
        opacity:0;
        transform:translateY(6px) scale(0.985);
        filter:blur(3px);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
        filter:blur(0);
    }
}

@keyframes detailGlitch{
    0%{
        opacity:0.4;
        transform:translateX(-2px);
        filter:hue-rotate(20deg);
    }

    20%{
        opacity:0.75;
        transform:translateX(2px);
    }

    40%{
        opacity:0.55;
        transform:translateX(-1px);
    }

    100%{
        opacity:1;
        transform:translateX(0);
        filter:none;
    }
}

@keyframes heartIdlePulse{
    0%, 100%{
        transform:scale(1);
        -webkit-text-stroke:1px rgba(64,255,89,0.35);
        text-shadow:
            0 0 4px rgba(64,255,89,0.12),
            0 0 10px rgba(0,0,0,0.7);
    }

    50%{
        transform:scale(1.14);
        -webkit-text-stroke:1px rgba(64,255,89,0.8);
        text-shadow:
            0 0 8px rgba(64,255,89,0.45),
            0 0 18px rgba(64,255,89,0.25);
    }
}

@media(max-width:950px){
    .movie-card,
    .movie-detail-card{
        grid-template-columns:1fr;
        padding:18px;
        gap:18px;
        max-width:360px;
        margin:0 auto;
    }

    .movie-card img,
    .movie-detail-card img,
    .poster-link,
    .no-poster,
    .poster-placeholder{
        width:100%;
        max-width:170px;
        margin:0 auto;
    }

    .movie-info{
        text-align:center;
        align-items:center;
    }

    .movie-info h2,
    .movie-info h3{
        font-size:1.45rem;
    }

    .movie-info p{
        font-size:0.9rem;
        line-height:1.3;
        margin-top:-5px;
    }

    .movie-title-row{
        flex-direction:column;
        gap:6px;
        text-align:center;
    }

    .movie-meta{
        justify-content:center;
        flex-wrap:wrap;
    }
}