/* Remove-item button — only ever interactive in edit mode; CSS-gated via the
   board's own data-editable flag rather than relying on server-side markup
   differences, since view/edit share the exact same chip markup. */
#tierlist-board[data-editable="1"] .tl-chip:hover .tl-chip-remove {
    display: flex;
}

.tl-chip-remove {
    display: none;
}

/* Drag & drop (see assets/scripts/tierlist-board.js) */
.tl-tier-items.tl-drop-target {
    outline: 2px dashed rgba(167, 139, 250, 0.6);
    outline-offset: -4px;
    background: rgba(167, 139, 250, 0.06) !important;
}

/* Native HTML5 drag keeps the source element in place (the browser renders
   its own ghost that follows the cursor) — dim it so it reads as "in flight"
   rather than duplicated. */
.tl-chip-dragging {
    opacity: 0.35;
}

/* "Download" (assets/scripts/tierlist-board.js calls window.print()) — print
   just the board, wherever it sits in the page, without needing to know every
   other element on the page (header, tab bar, promo banners, ...). */
@media print {
    body * {
        visibility: hidden;
    }

    #tierlist-board,
    #tierlist-board * {
        visibility: visible;
    }

    #tierlist-board {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        color: #000;
    }

    #tl-share-btn,
    #tl-download-btn,
    .tl-chip-remove {
        display: none !important;
    }

    .tl-chip-title {
        color: #000 !important;
    }
}