.tv-container {
    display: flex;
    gap: 20px;
}

/* =========================
   PREVIEW (BOTH VIEWS BASE)
========================= */

.tv-preview {
    width: 300px;
}

.tv-preview-box {
    background: #F9F9F9;
    border-radius: 15px;
    padding: 15px;
    text-align: center;
    border: 1px solid #E6E6E6;
}

#tv-preview-img {
    width: 100%;
    border-radius: 15px;
}

#tv-preview-name {
    margin-top: 10px;
    font-weight: bold;
}

#tv-status {
    margin-top: 10px;
    font-size: 12px;
    color: #666;
}

/* =========================
   DESKTOP LIST
========================= */

.tv-ranking {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ITEM BASE */
.tv-item {
    display: flex;
    align-items: center;

    background: #F9F9F9;
    border-radius: 15px;
    padding: 10px 15px;

    border: 1px solid #E6E6E6;

    cursor: grab;

    transition: background 0.2s ease, border 0.2s ease;
}

/* =========================
   DESKTOP RANK FIX (LINKS SAUBER)
========================= */

.tv-rank {
    width: 30px;
    min-width: 30px;

    text-align: left;

    color: #B3B3B3;
    font-weight: 500;
    font-size: 14px;

    margin-right: 12px;

    flex-shrink: 0;
}

/* IMAGE */
.tv-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 5px;

    margin-right: 10px;
}

/* NAME */
.tv-item span {
    font-size: 14px;
    flex: 1;
}

/* ACTIVE */
.tv-item.active {
    border: 1px solid #FFD800;
}

/* DRAGGING */
.tv-item.dragging {
    background: #FFEA66;
    border: 1px solid #E6C200;
}

/* =========================
   MOBILE LAYOUT
========================= */

@media (max-width: 768px) {

    /* STACK */
    .tv-container {
        flex-direction: column;
        gap: 10px;
    }

    /* PREVIEW */
    .tv-preview {
        width: 100%;
    }

    #tv-preview-img {
        width: 100%;
        max-height: 35vh;
        object-fit: contain;
        border-radius: 15px;
    }

    #tv-preview-name {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        margin-top: 8px;
    }

    /* =========================
       MOBILE FIT STRIP (NO SCROLL)
    ========================= */

    .tv-ranking {
        display: flex;
        flex-direction: row;

        overflow: hidden;

        width: 100%;

        gap: 4px;

        justify-content: space-between;
        align-items: flex-end;
    }

    .tv-item {
        flex: 1;
        min-width: 0;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        padding: 4px 2px;

        border-radius: 10px;
    }

    .tv-item img {
        width: 28px;
        height: 28px;
        border-radius: 4px;

        margin: 0;
    }

    .tv-item span {
        display: none;
    }

    .tv-rank {
        display: block;

        width: auto;
        min-width: auto;

        margin-top: 4px;
        margin-right: 0;

        font-size: 10px;
        text-align: center;
    }

    .tv-item.active {
        border: 1px solid #FFD800;
    }

    .tv-item.dragging {
        background: #FFEA66;
    }
}