/* SportsWatch — custom styles layered on top of Bootstrap 5. */

:root {
    --sw-brand: #0d6efd;
}

.navbar-brand {
    letter-spacing: 0.3px;
}

main .card {
    border: 0;
}

/* Player page comments */
#comments-list .comment:last-child {
    border-bottom: 0 !important;
}
#comments-list .seek {
    font-variant-numeric: tabular-nums;
}

/* Allow flex children to shrink so .text-truncate works. */
.min-w-0 {
    min-width: 0;
}

/* Game browse thumbnails (Watch page) */
.game-thumb .play-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    pointer-events: none;
}
.game-thumb:hover .play-badge {
    background: rgba(13, 110, 253, .95);
}

/* Highlight the comment the video is currently at (autoscroll). */
#comments-list .comment.comment-active {
    background-color: #fff3cd;
    border-radius: .25rem;
    padding-left: .4rem;
    padding-right: .4rem;
}

/* On small screens the comments panel stacks below the video (drawer-like). */
@media (max-width: 991.98px) {
    #comments-col .card {
        height: auto !important;
    }
    #comments-list {
        max-height: 50vh !important;
    }
}

/* Tidy comment form bar */
#comment-form textarea {
    resize: vertical;
}