.boss-explorer {
            display: flex;
            align-items: stretch;
            gap: 15px;
            flex-wrap: nowrap;
            height: 100%;
        }

        /* Each column is now its own boxed container (content-bg, matching the site-wide
           "container" rule) instead of three unboxed flex columns separated only by thin
           .boss-col-divider lines -- the dividers are gone now that the box borders themselves
           (plus .boss-explorer's own 15px gap) provide the separation, same as how
           .builds-main-col/.builds-maint-col sit side by side with just a gap, no divider. Since
           .boss-explorer already stretches every child to the row's full height
           (align-items:stretch), each box's own border now visibly reaches full height on its
           own -- arguably a clearer signal than a thin line ever was. */
        .boss-category-col {
            flex: 0 0 170px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            background: var(--skin-content-bg);
            backdrop-filter: blur(var(--skin-content-blur)) saturate(150%);
            -webkit-backdrop-filter: blur(var(--skin-content-blur)) saturate(150%);
            border: 1px solid var(--skin-content-border);
            border-radius: 10px;
            padding: 12px;
        }

        .boss-category-item {
            text-align: left;
            padding: 10px 12px;
            border: none;
            border-radius: 8px;
            background: var(--skin-card-bg);
            color: var(--skin-text-muted);
            font-weight: 600;
            font-size: 0.82em;
            cursor: pointer;
            transition: opacity 0.15s, transform 0.15s;
        }

        .boss-category-item:hover { background: var(--skin-card-bg-hover); }
        .boss-category-item.selected { background: var(--skin-active-2); color: var(--skin-active-text); }

        /* Was a fixed flex-basis (490px) with a fixed 5-column grid, sized back when the page had
           no width cap. Once the Simulador page joined the other pages' 900px cap (see "Card
           Planner Redesign"), that fixed 490px plus the category/detail columns' own widths no
           longer fit -- .boss-explorer's flex-wrap:nowrap then forced a horizontal scrollbar
           instead of wrapping, exactly the "5 numa linha e aparece barra pra direita" the user
           flagged. flex: 1 1 ... (shrinkable) + auto-fill (column COUNT adapts to whatever width
           the flex row actually gives it) fixes both at once: the row always fits, and the grid
           itself drops to fewer columns / more rows rather than overflowing sideways. */
        .boss-list-col {
            flex: 1 1 260px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
            gap: 10px;
            align-content: start;
            max-height: 600px;
            overflow-y: auto;
            cursor: grab;
            user-select: none;
            background: var(--skin-content-bg);
            backdrop-filter: blur(var(--skin-content-blur)) saturate(150%);
            -webkit-backdrop-filter: blur(var(--skin-content-blur)) saturate(150%);
            border: 1px solid var(--skin-content-border);
            border-radius: 10px;
            padding: 12px;
        }

        .boss-list-col.dragging { cursor: grabbing; }

        .boss-detail-col {
            flex: 1 1 240px;
            min-width: 220px;
            background: var(--skin-content-bg);
            backdrop-filter: blur(var(--skin-content-blur)) saturate(150%);
            -webkit-backdrop-filter: blur(var(--skin-content-blur)) saturate(150%);
            border: 1px solid var(--skin-content-border);
            border-radius: 10px;
            padding: 14px;
        }
        /* #bossSelectResult reuses .boss-detail-col but renders ONE single .mvp-card as its whole
           content (see renderBossSelectResult()) -- boxing the column AND the card inside it is
           the exact same "box wrapping something that's already a complete box" mistake .mvp-card
           itself was fixed for elsewhere (see .builds-main-col's own comment). #buildGuidesDetail,
           the OTHER thing that reuses .boss-detail-col, renders loose content instead (stat boxes,
           skill rows, no self-contained card of its own) and genuinely needs the shared box above
           -- so this is a targeted override for the one usage that doesn't, not a change to the
           shared rule itself. */
        #bossSelectResult.boss-detail-col {
            background: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border: none;
            padding: 0;
        }