/* 评论二次元背景 — Q版角色横幅 */

/* 基础样式 */
.comment-list > .comment > .list-inline > .comt-main {
    position: relative;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 95%;
    border-radius: 10px;
    transition: background-size 0.3s ease;
    padding-right: 100px; /* 给角色留空间 */
    min-height: 80px;
}

.comment-list > .comment > .list-inline > .comt-main:hover {
    background-size: auto 105%;
}

/* 25张角色横幅循环 */
.comment-list > .comment:nth-child(25n+1)  > .list-inline > .comt-main { background-image: url('../img/comment-bg/1.webp'); }
.comment-list > .comment:nth-child(25n+2)  > .list-inline > .comt-main { background-image: url('../img/comment-bg/2.webp'); }
.comment-list > .comment:nth-child(25n+3)  > .list-inline > .comt-main { background-image: url('../img/comment-bg/3.webp'); }
.comment-list > .comment:nth-child(25n+4)  > .list-inline > .comt-main { background-image: url('../img/comment-bg/4.webp'); }
.comment-list > .comment:nth-child(25n+5)  > .list-inline > .comt-main { background-image: url('../img/comment-bg/5.webp'); }
.comment-list > .comment:nth-child(25n+6)  > .list-inline > .comt-main { background-image: url('../img/comment-bg/6.webp'); }
.comment-list > .comment:nth-child(25n+7)  > .list-inline > .comt-main { background-image: url('../img/comment-bg/7.webp'); }
.comment-list > .comment:nth-child(25n+8)  > .list-inline > .comt-main { background-image: url('../img/comment-bg/8.webp'); }
.comment-list > .comment:nth-child(25n+9)  > .list-inline > .comt-main { background-image: url('../img/comment-bg/9.webp'); }
.comment-list > .comment:nth-child(25n+10) > .list-inline > .comt-main { background-image: url('../img/comment-bg/10.webp'); }
.comment-list > .comment:nth-child(25n+11) > .list-inline > .comt-main { background-image: url('../img/comment-bg/11.webp'); }
.comment-list > .comment:nth-child(25n+12) > .list-inline > .comt-main { background-image: url('../img/comment-bg/12.webp'); }
.comment-list > .comment:nth-child(25n+13) > .list-inline > .comt-main { background-image: url('../img/comment-bg/13.webp'); }
.comment-list > .comment:nth-child(25n+14) > .list-inline > .comt-main { background-image: url('../img/comment-bg/14.webp'); }
.comment-list > .comment:nth-child(25n+15) > .list-inline > .comt-main { background-image: url('../img/comment-bg/15.webp'); }
.comment-list > .comment:nth-child(25n+16) > .list-inline > .comt-main { background-image: url('../img/comment-bg/16.webp'); }
.comment-list > .comment:nth-child(25n+17) > .list-inline > .comt-main { background-image: url('../img/comment-bg/17.webp'); }
.comment-list > .comment:nth-child(25n+18) > .list-inline > .comt-main { background-image: url('../img/comment-bg/18.webp'); }
.comment-list > .comment:nth-child(25n+19) > .list-inline > .comt-main { background-image: url('../img/comment-bg/19.webp'); }
.comment-list > .comment:nth-child(25n+20) > .list-inline > .comt-main { background-image: url('../img/comment-bg/20.webp'); }
.comment-list > .comment:nth-child(25n+21) > .list-inline > .comt-main { background-image: url('../img/comment-bg/21.webp'); }
.comment-list > .comment:nth-child(25n+22) > .list-inline > .comt-main { background-image: url('../img/comment-bg/22.webp'); }
.comment-list > .comment:nth-child(25n+23) > .list-inline > .comt-main { background-image: url('../img/comment-bg/23.webp'); }
.comment-list > .comment:nth-child(25n+24) > .list-inline > .comt-main { background-image: url('../img/comment-bg/24.webp'); }
.comment-list > .comment:nth-child(25n)    > .list-inline > .comt-main { background-image: url('../img/comment-bg/25.webp'); }

/* 暗色模式：背景图降低亮度 */
:root.dark .comment-list > .comment > .list-inline > .comt-main {
    filter: brightness(0.85);
}

/* 响应式 */
@media (max-width: 767px) {
    .comment-list > .comment > .list-inline > .comt-main {
        padding-right: 60px;
        background-size: auto 80%;
        min-height: 60px;
    }
    .comment-list > .comment > .list-inline > .comt-main:hover {
        background-size: auto 90%;
    }
}

@media (max-width: 480px) {
    .comment-list > .comment > .list-inline > .comt-main {
        padding-right: 40px;
        background-size: auto 70%;
    }
}
