.ra-card {
    min-width:0;
    position:relative;
}

.ra-card__poster {
    display:block;
    position:relative;
    overflow:hidden;
    aspect-ratio:2/3;
    border-radius:6px;
    background:#111217;
}

.ra-card__poster img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .25s ease;
}

.ra-card:hover img {
    transform:scale(1.025);
}

.ra-card__top {
    position:absolute;
    top:7px;
    left:7px;
    z-index:3;
    display:flex;
    gap:4px;
}

.ra-score,
.ra-rating {
    min-height:20px;
    padding:3px 7px;
    display:flex;
    align-items:center;
    border-radius:10px;
    background:rgba(10,11,13,.88);
    backdrop-filter:blur(6px);
    font-size:11px;
    font-weight:700;
}

.ra-score {
    color:#ffd600;
}

.ra-rating {
    color:#ddd;
}

.ra-card__episodes {
    position:absolute;

    z-index:5;

    left:7px;
    bottom:7px;

    display:flex;
    align-items:center;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.13);
    border-radius:3px;

    background:rgba(4,5,6,.9);

    backdrop-filter:blur(5px);
}

.ra-ep-badge {
    min-height:19px;

    display:flex;
    align-items:center;

    gap:3px;

    padding:2px 5px;

    border-right:1px solid #303238;

    color:#e9eaec;

    font-size:9px;
    line-height:1;

    font-weight:600;
}

.ra-ep-badge:last-child {
    border-right:0;
}

.ra-ep-badge svg {
    width:10px;
    height:10px;

    fill:none;

    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.ra-ep-sub {
    color:#f2f3f4;
}

.ra-ep-dub {
    color:#d8dae0;
}

.ra-ep-raw {
    color:#b7bac0;
}

.ra-ep-total {
    color:#f2f3f4;
}

.ra-card__episodes span {
    padding:4px 6px;
    color:#fff;
    font-size:10px;
    border-right:1px solid #292b30;
}

.ra-card__play {
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    background:rgba(0,0,0,.38);
    transition:.18s ease;
}

.ra-card__play span {
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#08090a;
    background:#fff;
    font-size:19px;
}

.ra-card:hover .ra-card__play {
    opacity:1;
}

.ra-card__title {
    margin:10px 0 0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:14px;
    font-weight:600;
}

.ra-card__title a {
    color:#f5f5f5;
    text-decoration:none;
}

.ra-card__meta {
    display:flex;
    gap:5px;
    margin-top:7px;
    color:#8d9098;
    font-size:11px;
    text-transform:uppercase;
}
.ra-card__title {
    display:flex;
    align-items:center;

    gap:7px;

    min-width:0;
}

.ra-card__title a {
    min-width:0;

    overflow:hidden;

    color:#f1f2f3;

    white-space:nowrap;
    text-overflow:ellipsis;

    text-decoration:none;
}

.ra-card-status-dot {
    width:5px;
    height:5px;

    flex:0 0 5px;

    border-radius:50%;

    background:#19df72;
}

.ra-card__meta {
    display:flex;
    align-items:center;

    gap:5px;

    margin-top:6px;

    color:#898d95;

    font-size:10px;
}

.ra-card__meta span + span::before {
    content:"·";

    margin-right:5px;
}

.ra-card__play {
    position:absolute;

    z-index:4;

    top:50%;
    left:50%;

    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:#fff;
    color:#08090a;

    transform:
        translate(-50%, -50%)
        scale(.85);

    opacity:0;

    transition:
        opacity .18s ease,
        transform .18s ease;
}

.ra-card__poster:hover
.ra-card__play {
    opacity:1;

    transform:
        translate(-50%, -50%)
        scale(1);
}