/* Shared visual-mode badges and drag handle */
[data-quest-visual-root] .item-card-wrapper::before,
[data-quest-visual-root] .item-card[data-item-wrapper]::before,
.masonry-view-active .item-card-wrapper::before,
.masonry-view-active .item-card[data-item-wrapper]::before {
    content: attr(data-rank);
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    z-index: 60;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.dragging-in-masonry .item-card-wrapper::before,
.dragging-in-masonry .item-card[data-item-wrapper]::before,
[data-quest-visual-root] .sortable-container.drag-active .item-card-wrapper::before,
[data-quest-visual-root] .sortable-container.drag-active .item-card[data-item-wrapper]::before,
.masonry-view-active .sortable-container.drag-active .item-card-wrapper::before,
.masonry-view-active .sortable-container.drag-active .item-card[data-item-wrapper]::before {
    opacity: 1;
}

/* Section menu button: always visible on touch, hover-only on pointer devices */
.section-menu-btn {
    opacity: 1;
    transition: opacity 0.15s ease;
}
@media (hover: hover) {
    .section-menu-btn {
        opacity: 0;
    }
    .group:hover .section-menu-btn {
        opacity: 1;
    }
}

/* Generic visual grid layout helpers for quest/collection */
.masonry-view-active .visual-grid-container {
    position: relative !important;
    display: block !important;
    padding-bottom: 2rem !important;
}

.masonry-view-active .visual-grid-container > .item-card-wrapper,
.masonry-view-active .visual-grid-container > .item-card,
.masonry-view-active .visual-grid-container > .masonry-mode-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Constrain tall media in shared Onion visual mode cards */
.masonry-view-active .item-card [data-masonry-media] {
    max-height: 360px !important;
    height: auto !important;
    overflow: hidden !important;
}

.masonry-view-active .item-card [data-masonry-media] img,
.masonry-view-active .visual-card-skeleton img {
    max-height: 360px !important;
    height: auto !important;
    object-fit: contain !important;
}

[data-quest-visual-root] .item-card-wrapper[data-drag-handle="true"]::before,
[data-quest-visual-root] .item-card[data-item-wrapper][data-drag-handle="true"]::before,
.masonry-view-active .item-card-wrapper[data-drag-handle="true"]::before,
.masonry-view-active .item-card[data-item-wrapper][data-drag-handle="true"]::before {
    content: '';
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.75) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.5 4.625C6.12132 4.625 6.625 4.12132 6.625 3.5C6.625 2.87868 6.12132 2.375 5.5 2.375C4.87868 2.375 4.375 2.87868 4.375 3.5C4.375 4.12132 4.87868 4.625 5.5 4.625ZM9.5 4.625C10.1213 4.625 10.625 4.12132 10.625 3.5C10.625 2.87868 10.1213 2.375 9.5 2.375C8.87868 2.375 8.375 2.87868 8.375 3.5C8.375 4.12132 8.87868 4.625 9.5 4.625ZM10.625 7.5C10.625 8.12132 10.1213 8.625 9.5 8.625C8.87868 8.625 8.375 8.12132 8.375 7.5C8.375 6.87868 8.87868 6.375 9.5 6.375C10.1213 6.375 10.625 6.87868 10.625 7.5ZM5.5 8.625C6.12132 8.625 6.625 8.12132 6.625 7.5C6.625 6.87868 6.12132 6.375 5.5 6.375C4.87868 6.375 4.375 6.87868 4.375 7.5C4.375 8.12132 4.87868 8.625 5.5 8.625ZM10.625 11.5C10.625 12.1213 10.1213 12.625 9.5 12.625C8.87868 12.625 8.375 12.1213 8.375 11.5C8.375 10.8787 8.87868 10.375 9.5 10.375C10.1213 10.375 10.625 10.8787 10.625 11.5ZM5.5 12.625C6.12132 12.625 6.625 12.1213 6.625 11.5C6.625 10.8787 6.12132 10.375 5.5 10.375C4.87868 10.375 4.375 10.8787 4.375 11.5C4.375 12.1213 4.87868 12.625 5.5 12.625Z' fill='%23ffffff'/></svg>") center center no-repeat;
    background-size: 18px 18px;
    border-radius: 6px;
    opacity: 1;
}