/* ---- Hero banner (Build Guides tab): a seamless mosaic of character art -- tiles sit
           edge to edge with no gap/padding/border between them and each fills the banner's full
           height, so the row of characters IS the banner (no background showing through, no
           rounded "window" frame per tile). Modeled directly on ROOCDB's own homepage mosaic
           (roocdb.com: .cmural/.cmural-tile -- flex row, gap:0, tile height = full container
           height, plain object-fit:cover). Only each job branch's FINAL class is shown (e.g.
           Lord Knight / Paladin, not Knight / Crusader too) -- see FINAL_CLASSES. */
        .class-hero-banner {
            /* Fixed height again, filling 100% of its parent's width like it always did -- the
               parent (.panel.main-panel, scoped for the Builds/Skill Planner pages below) is what
               actually got capped narrower, not the banner itself. Two earlier attempts capped
               the banner's own width instead: that shrank the banner but left the surrounding
               white panel uncapped, so the two drifted out of sync (a lot of empty white margin
               around a now-narrower banner) -- exactly backwards from what was asked, which was
               to shrink the whole page, not to grow the banner back out to fill an oversized
               panel. Capping the parent instead means the banner is back to simply matching
               whatever width its container is, same relationship as before, just at a smaller
               container size. */
            height: 140px;
            margin-bottom: 22px;
            /* radius 0 to match ROOCDB's own mosaic exactly -- a rounded banner only clips the
               first/last tile's corners (top+bottom, since they sit at the banner's own
               top-left/bottom-left and top-right/bottom-right corners), which looked like a
               rendering glitch rather than a deliberate frame. */
            border-radius: 0;
            overflow: hidden;
        }
        .class-picker-strip {
            display: flex;
            height: 100%;
            /* NEVER add a gap here -- tried once (a per-tile width reduction request) and it
               visibly separated the characters, which the user explicitly said should always
               stay joined/edge-to-edge. If the banner needs to be narrower, shrink the whole
               .class-hero-banner (max-width below), not the spacing between tiles. */
            gap: 0;
        }
        .class-window-card {
            flex: 1 1 0; /* see the .nav-link fix above -- buttons in a flex row don't get
                            flex: 1 unless explicitly opted in; here it's exactly what we want,
                            so every tile shares the banner's width evenly with none left over */
            min-width: 0;
            height: 100%;
            border: none;
            background: #24345a; /* fallback only -- renderClassPicker() overrides this per class
                                     with a gradient built from that class's own icon accent color */
            overflow: hidden;
            position: relative;
            cursor: pointer;
            padding: 0;
            border-radius: 0; /* .class-window-card is a <button>, and the global button{} rule
                                  gives every button an 8px radius -- left alone, each tile in the
                                  mosaic rounds its own corners, which reads as a seam/glitch where
                                  tiles meet instead of one continuous banner edge. */
            /* Grayscale the WHOLE tile (its own per-class background gradient + the hero image +
               the footer/icon, composited together) when not selected, not just the character
               art -- filter on the tile itself covers all of that in one declaration, instead of
               only desaturating .cls-window-img and leaving the colored background/icon behind
               it untouched. */
            filter: grayscale(1) brightness(0.8);
            transition: filter 0.15s;
        }
        .class-window-card.selected { filter: none; }
        .class-window-card:hover:not(.selected) { filter: grayscale(0.4) brightness(0.9); }
        /* Selection border lives on a ::after pseudo-element, not a box-shadow on the card
           itself -- box-shadow paints as part of the card's own background/border step, which
           happens BEFORE its position:absolute children (the hero img) are painted, so the img
           was fully covering the inset shadow. ::after is generated after all real children in
           paint order, so it reliably draws on top of the img instead. */
        .class-window-card::after {
            content: "";
            position: absolute;
            inset: 0;
            box-shadow: inset 0 0 0 0 var(--skin-active-2);
            transition: box-shadow 0.15s;
            z-index: 3;
            pointer-events: none;
        }
        .class-window-card.selected::after { box-shadow: inset 0 0 0 2px var(--skin-active-2); }
        .class-window-card.selected { z-index: 2; }
        .class-window-card .cls-window-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 50% 8%;
            transform: scale(1.3);
        }
        /* Just the icon now -- the class name used to sit below it, but at this tile width (14
           classes sharing one banner, further narrowed once the page itself got capped at 900px)
           the name was getting cropped/ellipsized rather than actually reading. The full name is
           still available via the button's own title="" tooltip (hover/long-press). */
        .class-window-card .cls-window-footer {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 8px 3px;
            background: linear-gradient(0deg, var(--skin-fade-color) 0%, transparent 100%);
            display: flex;
            justify-content: center;
        }
        .class-window-card .cls-window-icon {
            width: 24px;
            height: 24px;
            background: center/contain no-repeat;
            flex-shrink: 0;
        }
        .class-window-card .cls-badge {
            position: absolute;
            top: 6px;
            right: 4px;
            background: #3ecf8e;
            color: white;
            font-size: 0.52em;
            font-weight: 800;
            padding: 1px 4px;
            border-radius: 999px;
            z-index: 2;
        }

        .class-hero-content {
            position: absolute;
            top: 18px;
            left: 0;
            right: 0;
            z-index: 2;
            text-align: center;
            color: white;
        }
        .class-hero-icon { width: 48px; height: 48px; border-radius: 999px; margin: 0 auto 6px; border: 3px solid rgba(255,255,255,0.8); background: center/cover no-repeat #fff; }
        .class-hero-name { font-size: 1.3em; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,0.35); }
        .class-hero-count { font-size: 0.8em; opacity: 0.9; margin-top: 4px; }