/*
 * wiki-legendary-boxes.css — "Star Boxes" showcase page sheet (S7).
 * Layer 3 page CSS: composes shared ui-* controls and consumes --ui-* tokens
 * (defined in frontend-design-system.css) only. Never restyles shared
 * components; zero design debt per docs/frontend_design_system.md.
 *
 * FROZEN CLASS CONTRACT (page prefix `ui-wiki-legendary-boxes-`):
 *   root     ui-wiki-legendary-boxes
  *   hero     -hero, -hero-body, -hero-eyebrow, -hero-sticker, -hero-art,
  *            -hero-photo,
 *            -hero-scrap, -hero-scrap-label, -hero-scrap-unit,
 *            -hero-scrap-scale, -hero-scrap-item, -hero-scrap-stars
 *   layout   -grid, -section, -section-title, -cards, -card
 *   card     -card-icon, -card-headline, -card-name (a real link to the
 *            box's wiki item page; same color as the plain title),
 *            -card-name-sr (visually hidden name+tier for the disclosure
 *            button), -star-row,
 *            -card-caret, -summary (always-visible row: price/scrap stats
 *            + stash chips on one line), -details, -details-inner,
 *            -inline-desc + -obtain (mobile-only texts inside details; at
 *            >=768px the details block is hidden and the tooltip owns both),
 *            -stats, -stat,
 *            -stash-chip, -stash-count, -stash-craft,
 *            -tip, -dots-trigger, -dots-menu, -dots-head, -dots-title,
 *            -dots-sub, -menu-item
 *            (page-local, unprefixed: .lbx-card-head — the head row div
 *            carrying the tooltip trigger; .lbx-card-head-main — the
 *            icon+stars disclosure button inside it)
  *   modal    -modal-backdrop, -modal, -modal-title, -modal-form, -modal-actions
  *            (page-local, unprefixed: .lbx-modal-x — the 40px title-row
  *            close button; [data-lbx-clear] lives first inside -actions)
 *   filters  -filters, -filters-row (--search modifier), -filters-group
 *            (--select modifier for select-only dimensions), -filters-tag,
 *            -filters-rail (--mobile modifier for mobile-only chip rows),
 *            -chip, -chips, -search, -filters-toggle (+ -toggle-icon,
 *            -toggle-count; the single mobile entry row), -filters-panel
 *            (mobile collapsible wrapper; display: contents on desktop)
 *   states   is-active (chips AND dropdown triggers), is-open (card details / tip / dots menu /
 *            modal backdrop), is-empty (zero-quantity stash chip),
 *            is-price / is-scrap (stat modifiers)
 *   mobile listbox dropdown family (copied from the wiki-list pattern):
 *            -dropdown, -dropdown-trigger, -dropdown-label, -dropdown-caret,
 *            -dropdown-menu, -dropdown-item (+ .is-selected)
 *
 * TIER COLORS (decision D8, redesign R2): the tier color comes from the DB
 * dictionary `color_key`, mirrored by `[data-tier-color="<key>"]` on the CARD
 * ROOT. The WHOLE card surface carries the tier: each known key owns a full
 * feed-style gradient (150deg tint of its color over the panel surface) plus
 * a matching pointer-tracked spotlight glow and hover lift. A card without
 * a tier (or an unknown key) keeps the neutral base surface (yellow feed
 * glow). No visible tier text or dot — a visually-hidden span keeps the
 * tier name for screen readers. Known keys: brown (renders as vivid orange
 * oklch(69% 0.19 56); the DB key stays "brown", only the surface color is
 * orange) / green / blue.
 * D8 EXTENSION RULE: a NEW color_key requires adding exactly one
 * `[data-tier-color="<key>"]` surface + `::before` spotlight-glow pair below,
 * built from existing tokens — no other file, no logic changes.
 *
 * EXPECTED DOM SHAPES this sheet styles (agreed with the S6 templates):
 *   card    .ui-wiki-legendary-boxes-card (position: relative; the HTMX
 *           outerHTML swap target; entrance stagger via --i set by the
 *           :nth-child rules below — no inline styles, audit rule)
  *             .lbx-card-head (row div: trigger button + name link + caret;
  *             carries [data-lbx-tip])
  *               .lbx-card-head-main (button: icon + stars + sr-only name;
  *               carries [data-lbx-expand]; aria-expanded mirrors the
  *               details state)
  *                 .-card-icon / .-card-headline (.-star-row + hidden
  *                 .-card-name-sr; tier lives in the card surface)
  *               .-card-name (a real link to the box's wiki item page;
  *               same color as the plain title — the name reads as text,
  *               not as an accent link)
  *               / .-card-caret (span, [data-lbx-expand] tap affordance)
 *             .-details > .-details-inner (inline description + obtain);
 *             collapsed on mobile via grid-template-rows 0fr -> 1fr when the
 *             card has .is-open, hidden entirely at >=768px (the tooltip owns
 *             both texts); .-summary (stats + stash chips on one row) always
 *             visible at every width
 *             .-dots-trigger absolutely pinned to the card corner,
 *             .-dots-menu absolutely anchored under that corner,
 *             [data-box-stash-slot] a chip row (hidden while empty).
 *   modal   .ui-wiki-legendary-boxes-modal-backdrop is the fixed scrim root
 *           (opened via .is-open or by removing [hidden]); .-modal is the
 *           scrollable panel inside it; -modal-title / -modal-form /
 *           -modal-actions are the panel parts. No native <dialog>.
 *   tooltip one shared .-tip element moved by the page JS (stash .st-tip
 *           contract port: position fixed, viewport-clamped by JS-set
 *           coordinates, .is-open fades it in, z-index --ui-z-tooltip).
 * The search field itself is the shared .ui-input inside .-search.
 *
 * Z-INDEX CONTRACT: dots menu --ui-z-dropdown (30) < modal backdrop
 * --ui-z-backdrop (60) < tooltip --ui-z-tooltip (90).
 * Mobile-first: base composition targets 320–767px (one 16px outer gutter,
 * single-column cards, flat filters per Flat Mode). The hero is frameless
 * at every width (R6 mobile, R7 desktop: no border/keyline/background;
 * explicit text rhythm eyebrow 0 / sticker +16 / title +12 / scrap +16;
 * centered photo stage with glow pedestal + halo ring, photo capped at
 * native 270px). Cards gain columns at >=768px (two) and >=1024px
 * (three). Every interactive control is >=44x44px at mobile widths
 * (rule 3.17).
 */

/* ---------- page frame ---------- */

.ui-wiki-legendary-boxes {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding: var(--ui-space-8) var(--ui-space-4) var(--ui-space-12);
    display: grid;
    gap: var(--ui-space-6);
    min-width: 0;
}

/* ---------- hero (flat showcase intro, R7) ---------- */

/* Frameless intro block at every width (Flat Mode, was a framed poster
   before R6/R7): no border, no keyline, no panel background — copy and the
   photo stage sit directly on the page canvas. The text column below owns
   an explicit editorial rhythm (each element sets its own top margin)
   instead of one uniform grid gap, so eyebrow / sticker / title / scrap
   read as one composed stack. */
.ui-wiki-legendary-boxes-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--ui-space-4);
    min-width: 0;
    padding: var(--ui-space-2) 0 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    animation: lbx-hero-in var(--ui-duration-overlay) var(--ui-ease-out);
}

/* Soft signal glow behind the photo stage (single column: bottom-anchored,
   full-bleed; the >=768px rule re-anchors it behind the art column). */
.ui-wiki-legendary-boxes-hero::before {
    content: "";
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 62%;
    background:
        radial-gradient(78% 68% at 50% 42%,
            color-mix(in oklch, var(--ui-brand-signal) 12%, transparent),
            transparent 70%);
    pointer-events: none;
}

/* No inner frame at any width (the poster's second border, removed R6). */
.ui-wiki-legendary-boxes-hero::after {
    display: none;
}

/* Explicit rhythm scale (mobile-first, single source at every width):
   eyebrow 0 / sticker +24 (the loud billboard needs distance from the
   quiet eyebrow) / title +16 (display presence) / scrap group +24
   (separate info group under the display title) / chips +12 after
   their label (tight group). */
.ui-wiki-legendary-boxes-hero-body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0;
    min-width: 0;
}

/* Mono eyebrow with the leading dash line. */
.ui-wiki-legendary-boxes-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-3);
    color: var(--ui-text-secondary);
    font: 700 0.75rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.ui-wiki-legendary-boxes-hero-eyebrow::before {
    content: "";
    width: 34px;
    height: 2px;
    background: var(--ui-text-secondary);
}

/* Tilted yellow billboard sticker with dark ink. Flush with the text
   column edge (no indent); pivots on its left edge so the tilt never
   drifts the sticker right. */
.ui-wiki-legendary-boxes-hero-sticker {
    justify-self: start;
    margin: var(--ui-space-6) 0 0;
    padding: 5px 14px;
    border-radius: 6px;
    background: var(--ui-brand-signal);
    color: var(--ui-bg-canvas);
    font: 700 0.6875rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: rotate(-2deg);
    transform-origin: left center;
    box-shadow: 3px 3px 0 color-mix(in oklch, var(--ui-bg-canvas) 70%, var(--ui-brand-signal) 6%);
}

/* Display title: uppercase yellow with the hard offset shadow. */
.ui-wiki-legendary-boxes-title {
    position: relative;
    margin: var(--ui-space-4) 0 0;
    color: var(--ui-brand-signal);
    font: 800 clamp(1.625rem, 1rem + 2.8vw, 3rem)/1.06 "Onest", system-ui, sans-serif;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow: 3px 3px 0 color-mix(in oklch, var(--ui-bg-canvas) 85%, var(--ui-brand-signal));
}

.ui-wiki-legendary-boxes-state {
    position: relative;
    margin: calc(var(--ui-space-2) * -1) 0 0;
    max-width: 52ch;
    color: var(--ui-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* Scrap-yield sticker chips: real game data (modules per star rank).
   Cream chips with a slight alternating tilt, like the feed banner tags. */
.ui-wiki-legendary-boxes-hero-scrap {
    position: relative;
    display: grid;
    gap: var(--ui-space-3);
    justify-items: start;
    margin-top: var(--ui-space-6);
    min-width: 0;
}

.ui-wiki-legendary-boxes-hero-scrap-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ui-space-2);
    color: var(--ui-text-secondary);
    font: 600 0.6875rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ui-wiki-legendary-boxes-hero-scrap-unit {
    color: var(--ui-text-secondary);
    font-family: "Onest", system-ui, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-transform: none;
}

.ui-wiki-legendary-boxes-hero-scrap-scale {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2) var(--ui-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-wiki-legendary-boxes-hero-scrap-item {
    display: inline-flex;
    align-items: baseline;
    gap: var(--ui-space-2);
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--ui-text-primary);
    color: var(--ui-bg-canvas);
    font: 800 0.9375rem/1 "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    transform: rotate(-1.25deg);
}

.ui-wiki-legendary-boxes-hero-scrap-item:nth-child(2n) {
    transform: rotate(1deg);
}

.ui-wiki-legendary-boxes-hero-scrap-stars {
    font-weight: 700;
    letter-spacing: 0.08em;
    opacity: 0.75;
}

/* Game-rendered ammo-box photo as a centered stage (same language at
   every width): glow pedestal + floor shadow ground the box, a thin halo
   ring replaces the old dotted orbit. The photo is capped at its native
   270px so it never upscales (no grain). */
.ui-wiki-legendary-boxes-hero-art {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    justify-self: stretch;
    width: 100%;
    margin-top: 0;
    padding: var(--ui-space-3) 0 var(--ui-space-4);
    background:
        radial-gradient(74% 60% at 50% 44%,
            color-mix(in oklch, var(--ui-brand-signal) 16%, transparent),
            transparent 70%),
        radial-gradient(52% 14% at 50% 88%,
            color-mix(in oklch, var(--ui-bg-canvas) 78%, transparent),
            transparent 72%);
}

.ui-wiki-legendary-boxes-hero-art::before {
    content: "";
    grid-area: 1 / 1;
    place-self: center;
    width: min(88vw, 310px);
    aspect-ratio: 1 / 1;
    border: 1px solid color-mix(in oklch, var(--ui-brand-signal) 22%, transparent);
    border-radius: 50%;
    opacity: 0.45;
    pointer-events: none;
}

.ui-wiki-legendary-boxes-hero-photo {
    grid-area: 1 / 1;
    place-self: center;
    position: relative;
    display: block;
    width: min(78vw, 270px);
    height: auto;
    border-radius: 0;
    filter: drop-shadow(0 22px 28px oklch(5% 0.02 257 / 0.55));
}

.ui-wiki-legendary-boxes-empty {
    margin: 0;
    padding: var(--ui-space-8) var(--ui-space-4);
    border: 1px dashed var(--ui-border-default);
    border-radius: var(--ui-radius-panel);
    color: var(--ui-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
    text-align: center;
}

.ui-wiki-legendary-boxes-grid {
    display: grid;
    gap: var(--ui-space-8);
    min-width: 0;
}

.ui-wiki-legendary-boxes-section {
    display: grid;
    gap: var(--ui-space-3);
    min-width: 0;
}

.ui-wiki-legendary-boxes-section-title {
    margin: 0;
    color: var(--ui-text-primary);
    font: 700 1.0625rem/1.3 "Onest", system-ui, sans-serif;
}

/* Entrance for the hero only (runs once; suppressed under reduced motion). */
@keyframes lbx-hero-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- filters (redesign R3: one-line toolbar) ---------- */

/* Two thin rows UNDER the banner, unframed at every width (the banner is the
   page's single decorative level): row 1 is the search line, row 2 holds all
   filter dimensions — Stars as a one-click chip rail, Type / Tier / Craft as
   select-only groups (compact listbox triggers on desktop, labeled chip rows
   on mobile). No global reset: chips toggle off on a second tap, selects
   ship their own "All" option. */
.ui-wiki-legendary-boxes-filters {
    display: grid;
    gap: var(--ui-space-4);
    min-width: 0;
}

.ui-wiki-legendary-boxes-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
    min-width: 0;
}

.ui-wiki-legendary-boxes-filters-row--search {
    display: grid;
}

.ui-wiki-legendary-boxes-search {
    position: relative;
    display: block;
    min-width: 0;
}

/* Fallback when the search input carries the page class instead of ui-input. */
input.ui-wiki-legendary-boxes-search {
    width: 100%;
    min-width: 0;
    min-height: var(--ui-control-touch);
    padding: 0 var(--ui-space-4);
    border: 1px solid var(--ui-border-default);
    border-radius: var(--ui-radius-control);
    background: var(--ui-bg-subtle);
    color: var(--ui-text-primary);
    font: 500 1rem/1.4 "Onest", system-ui, sans-serif;
    caret-color: var(--ui-accent);
}

input.ui-wiki-legendary-boxes-search::placeholder {
    color: var(--ui-text-muted);
    opacity: 1;
}

input.ui-wiki-legendary-boxes-search:focus {
    border-color: var(--ui-focus);
    background: var(--ui-bg-canvas);
    box-shadow: var(--ui-shadow-focus);
    outline: none;
}

/* Desktop chip rail: collapsed on mobile in favor of the listbox dropdowns
   (wiki-list mobile pattern), wrapping flex row from 768px up. */
.ui-wiki-legendary-boxes-filters-rail {
    display: none;
}

.ui-wiki-legendary-boxes-filters-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
    min-width: 0;
    flex: 1 1 0;
}

/* R3 select-only group: on desktop the compact dropdown trigger below
   carries the state (no chip rail); on mobile the --mobile rail below
   carries it instead (no dropdown). */
.ui-wiki-legendary-boxes-filters-group--select {
    flex: 0 0 auto;
}

/* Compact mono tags introduce each chip group on desktop. */
.ui-wiki-legendary-boxes-filters-tag {
    display: none;
    color: var(--ui-text-muted);
    font: 700 0.625rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ui-wiki-legendary-boxes-chips {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--ui-space-2) - 2px);
    min-width: 0;
}

.ui-wiki-legendary-boxes-chip {
    min-height: var(--ui-control-touch);
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    max-width: 100%;
    padding: 0 var(--ui-space-3);
    border: 1px solid var(--ui-border-default);
    border-radius: var(--ui-radius-control);
    background: color-mix(in oklch, var(--ui-bg-raised) 38%, transparent);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    color: var(--ui-text-secondary);
    font: 650 0.8125rem/1.2 "Onest", system-ui, sans-serif;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color var(--ui-duration-fast) ease,
        background-color var(--ui-duration-fast) ease,
        border-color var(--ui-duration-fast) ease;
}

.ui-wiki-legendary-boxes-chip.is-active {
    border-color: color-mix(in oklch, var(--ui-accent) 42%, transparent);
    background: var(--ui-accent-soft);
    color: var(--ui-text-primary);
}

.ui-wiki-legendary-boxes-chip:focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 3px;
}

/* Plain count inside a chip: just the number, no badge chrome. */
.ui-wiki-legendary-boxes-chip-count {
    color: var(--ui-text-muted);
    font-variant-numeric: tabular-nums;
}

@supports not (backdrop-filter: blur(1px)) {
    .ui-wiki-legendary-boxes-chip {
        background: color-mix(in oklch, var(--ui-bg-raised) 82%, transparent);
    }
}

/* ---------- mobile listbox dropdowns (wiki-list pattern) ---------- */

.ui-wiki-legendary-boxes-dropdown {
    position: relative;
    display: block;
    min-width: 0;
}

/* ---------- mobile collapsible filter panel (R5) ----------
   Mobile shows ONE entry row: tapping it expands the in-flow panel with a
   labeled wrapping chip block per dimension (nothing overlays the content).
   On desktop the toggle hides and the panel dissolves (display: contents)
   so the groups sit directly in the one-line toolbar row. */

.ui-wiki-legendary-boxes-filters-toggle {
    width: 100%;
    min-height: var(--ui-control-touch);
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    padding: 0 var(--ui-space-4);
    border: 1px solid var(--ui-border-default);
    border-radius: var(--ui-radius-control);
    background: var(--ui-bg-subtle);
    color: var(--ui-text-primary);
    font: 650 0.9375rem/1.2 "Onest", system-ui, sans-serif;
    cursor: pointer;
    transition:
        border-color var(--ui-duration-fast) ease,
        background-color var(--ui-duration-fast) ease;
}

.ui-wiki-legendary-boxes-filters-toggle:focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 3px;
}

.ui-wiki-legendary-boxes-filters-toggle.is-active {
    border-color: color-mix(in oklch, var(--ui-accent) 42%, transparent);
    background: var(--ui-accent-soft);
}

.ui-wiki-legendary-boxes-filters-toggle-icon {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--ui-text-muted);
}

.ui-wiki-legendary-boxes-filters-toggle-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid color-mix(in oklch, var(--ui-accent) 42%, transparent);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-accent-soft);
    color: var(--ui-text-primary);
    font: 700 0.75rem/1 "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.ui-wiki-legendary-boxes-filters-toggle-count[hidden] {
    display: none;
}

.ui-wiki-legendary-boxes-filters-toggle .ui-wiki-legendary-boxes-dropdown-caret {
    margin-inline-start: auto;
}

.ui-wiki-legendary-boxes-filters-toggle[aria-expanded="true"] .ui-wiki-legendary-boxes-dropdown-caret {
    transform: rotate(180deg);
}

/* Visibility is owned by the [hidden] attribute (dropdown contract). */
.ui-wiki-legendary-boxes-filters-panel {
    display: grid;
    gap: var(--ui-space-3);
    min-width: 0;
}

/* The grid above must never override [hidden] (same for display: contents
   on desktop, which is scoped with :not([hidden]) below). */
.ui-wiki-legendary-boxes-filters-panel[hidden] {
    display: none;
}

/* ---------- mobile labeled chip rows (R4, wiki-list pattern retired) ----------
   Every dimension renders as a labeled wrapping chip block: the mono tag
   sits on its own line above the chips, chips wrap onto as many lines as
   needed — nothing is ever cut off past the screen edge, no scrolling, no
   overlay menus. Dropdowns are desktop-only (>=768px). */

@media (max-width: 767px) {
    .ui-wiki-legendary-boxes-filters-row:not(.ui-wiki-legendary-boxes-filters-row--search) {
        display: grid;
        gap: var(--ui-space-3);
    }

    .ui-wiki-legendary-boxes-filters-row:not(.ui-wiki-legendary-boxes-filters-row--search) .ui-wiki-legendary-boxes-filters-group {
        display: grid;
        flex: none;
        gap: var(--ui-space-2);
    }

    .ui-wiki-legendary-boxes-filters-tag {
        display: block;
    }

    .ui-wiki-legendary-boxes-filters-rail,
    .ui-wiki-legendary-boxes-filters-rail--mobile {
        display: flex;
    }

    .ui-wiki-legendary-boxes-filters-row:not(.ui-wiki-legendary-boxes-filters-row--search) .ui-wiki-legendary-boxes-chips {
        flex-wrap: wrap;
    }

    .ui-wiki-legendary-boxes-dropdown {
        display: none;
    }
}

.ui-wiki-legendary-boxes-dropdown-trigger {
    width: 100%;
    min-height: var(--ui-control-touch);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding: 0 var(--ui-space-4);
    border: 1px solid var(--ui-border-default);
    border-radius: var(--ui-radius-control);
    background: var(--ui-bg-subtle);
    color: var(--ui-text-primary);
    font: 650 0.9375rem/1.2 "Onest", system-ui, sans-serif;
    cursor: pointer;
    transition:
        border-color var(--ui-duration-fast) ease,
        background-color var(--ui-duration-fast) ease;
}

.ui-wiki-legendary-boxes-dropdown-trigger:focus-visible,
.ui-wiki-legendary-boxes-dropdown-item:focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 3px;
}

.ui-wiki-legendary-boxes-dropdown-label {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-2);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ui-wiki-legendary-boxes-dropdown-caret {
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    flex: 0 0 auto;
    color: var(--ui-text-muted);
    transition: transform var(--ui-duration-standard) var(--ui-ease-out);
}

.ui-wiki-legendary-boxes-dropdown-trigger[aria-expanded="true"] .ui-wiki-legendary-boxes-dropdown-caret {
    transform: rotate(180deg);
}

/* Active select: the trigger mirrors the chip .is-active treatment so the
   chosen Type / Tier / Craft reads at a glance without opening the menu. */
.ui-wiki-legendary-boxes-dropdown-trigger.is-active {
    border-color: color-mix(in oklch, var(--ui-accent) 42%, transparent);
    background: var(--ui-accent-soft);
    color: var(--ui-text-primary);
}

/* Visibility is owned by the [hidden] attribute (wiki-list contract). */
.ui-wiki-legendary-boxes-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--ui-space-2));
    left: 0;
    right: 0;
    z-index: var(--ui-z-dropdown);
    max-height: min(360px, 60dvh);
    overflow-y: auto;
    padding: var(--ui-space-2);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-panel);
    background: var(--ui-bg-raised);
    box-shadow: var(--ui-shadow-panel);
}

.ui-wiki-legendary-boxes-dropdown-item {
    width: 100%;
    min-height: var(--ui-control-touch);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: 0 var(--ui-space-3);
    border: 0;
    border-radius: var(--ui-radius-control);
    background: transparent;
    color: var(--ui-text-secondary);
    font: 600 0.875rem/1.25 "Onest", system-ui, sans-serif;
    text-align: left;
    cursor: pointer;
    transition:
        color var(--ui-duration-fast) ease,
        background-color var(--ui-duration-fast) ease;
}

.ui-wiki-legendary-boxes-dropdown-item.is-selected {
    background: var(--ui-accent-soft);
    color: var(--ui-text-primary);
}

/* ---------- cards (redesign R1) ---------- */

.ui-wiki-legendary-boxes-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ui-space-3);
    min-width: 0;
}

/* Stagger entrance: --i is set per sibling position (audit rule: no inline
   styles); the animation-delay min() below caps the wait at ~240ms. */
.ui-wiki-legendary-boxes-cards > :nth-child(2) { --i: 1; }
.ui-wiki-legendary-boxes-cards > :nth-child(3) { --i: 2; }
.ui-wiki-legendary-boxes-cards > :nth-child(4) { --i: 3; }
.ui-wiki-legendary-boxes-cards > :nth-child(5) { --i: 4; }
.ui-wiki-legendary-boxes-cards > :nth-child(6) { --i: 5; }
.ui-wiki-legendary-boxes-cards > :nth-child(7) { --i: 6; }
.ui-wiki-legendary-boxes-cards > :nth-child(8) { --i: 7; }

.ui-wiki-legendary-boxes-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--ui-border-default);
    border-radius: var(--ui-radius-surface);
    /* Neutral tier surface (feed .feed-run proportions: 150deg tint of the
       panel surface over the canvas). Tier tints below override this.
       No overflow: hidden — the admin dots popover must paint past the
       card's bottom edge. */
    background:
        linear-gradient(150deg,
            color-mix(in oklch, var(--ui-brand-signal) 5%, var(--ui-bg-surface)),
            var(--ui-bg-surface) 42%,
            var(--ui-bg-canvas) 100%);
    box-shadow: 0 12px 40px -20px oklch(5% 0.02 257 / 0.55);
    animation: lbx-card-in var(--ui-duration-overlay) var(--ui-ease-out) backwards;
    animation-delay: min(calc(var(--i, 0) * 30ms), 240ms);
    transition:
        border-color var(--ui-duration-fast) ease,
        box-shadow var(--ui-duration-fast) ease,
        transform var(--ui-duration-fast) var(--ui-ease-out);
}

/* --- tier surfaces (R2): full-card feed-style gradients ---
   Every card owns its tier tint; hover lift + glow live in the
   fine-pointer block below. The ::before spotlight layer is shared with
   the base rule and recolored per tier.
   The "brown" key (the Хламолега tier) renders as vivid orange
   (oklch 69% 0.19 56) — the DB color_key stays "brown", only the surface
   color is orange so it reads apart from the yellow brand signal. */

.ui-wiki-legendary-boxes-card[data-tier-color="brown"] {
    /* NOTE: srgb on purpose. Mixing this orange with the navy surface in
       oklch rotates the hue through red (56deg -> 257deg takes the short
       arc via ~29deg red), so the card read as red. srgb/alpha overlay
       keeps the hue on orange. */
    border-color: color-mix(in srgb, oklch(69% 0.19 56) 85%, var(--ui-border-default));
    background:
        radial-gradient(130% 120% at 50% -30%,
            color-mix(in srgb, oklch(69% 0.19 56) 40%, transparent), transparent 55%),
        linear-gradient(150deg,
            color-mix(in srgb, oklch(69% 0.19 56) 55%, transparent),
            color-mix(in srgb, oklch(69% 0.19 56) 26%, transparent) 55%,
            color-mix(in srgb, oklch(69% 0.19 56) 12%, transparent) 100%),
        linear-gradient(150deg,
            var(--ui-bg-surface),
            var(--ui-bg-surface) 42%,
            var(--ui-bg-canvas) 100%);
    box-shadow:
        0 12px 40px -20px oklch(5% 0.02 257 / 0.55),
        0 0 24px color-mix(in srgb, oklch(69% 0.19 56) 14%, transparent);
}

.ui-wiki-legendary-boxes-card[data-tier-color="green"] {
    border-color: color-mix(in oklch, var(--ui-success) 85%, var(--ui-border-default));
    background:
        radial-gradient(130% 120% at 50% -30%,
            color-mix(in oklch, var(--ui-success) 38%, transparent), transparent 55%),
        linear-gradient(150deg,
            color-mix(in oklch, var(--ui-success) 55%, var(--ui-bg-surface)),
            color-mix(in oklch, var(--ui-success) 26%, var(--ui-bg-surface)) 55%,
            color-mix(in oklch, var(--ui-success) 12%, var(--ui-bg-canvas)) 100%);
    box-shadow:
        0 12px 40px -20px oklch(5% 0.02 257 / 0.55),
        0 0 24px color-mix(in oklch, var(--ui-success) 14%, transparent);
}

.ui-wiki-legendary-boxes-card[data-tier-color="blue"] {
    border-color: color-mix(in oklch, var(--ui-accent) 88%, var(--ui-border-default));
    background:
        radial-gradient(130% 120% at 50% -30%,
            color-mix(in oklch, var(--ui-accent) 40%, transparent), transparent 55%),
        linear-gradient(150deg,
            color-mix(in oklch, var(--ui-accent) 58%, var(--ui-bg-surface)),
            color-mix(in oklch, var(--ui-accent) 28%, var(--ui-bg-surface)) 55%,
            color-mix(in oklch, var(--ui-accent) 13%, var(--ui-bg-canvas)) 100%);
    box-shadow:
        0 12px 40px -20px oklch(5% 0.02 257 / 0.55),
        0 0 24px color-mix(in oklch, var(--ui-accent) 15%, transparent);
}

/* Tier-tinted icon wells so the tier reads even before the eye parses
   the surface gradient ("brown" = vivid orange, same literal as the card
   surface so the well never drifts toward yellow). */
.ui-wiki-legendary-boxes-card[data-tier-color="brown"] .ui-wiki-legendary-boxes-card-icon {
    border-color: color-mix(in srgb, oklch(69% 0.19 56) 65%, var(--ui-border-subtle));
    background-color: var(--ui-bg-subtle);
    background-image: linear-gradient(0deg,
        color-mix(in srgb, oklch(69% 0.19 56) 28%, transparent),
        color-mix(in srgb, oklch(69% 0.19 56) 28%, transparent));
}

.ui-wiki-legendary-boxes-card[data-tier-color="green"] .ui-wiki-legendary-boxes-card-icon {
    border-color: color-mix(in oklch, var(--ui-success) 65%, var(--ui-border-subtle));
    background: color-mix(in oklch, var(--ui-success) 28%, var(--ui-bg-subtle));
}

.ui-wiki-legendary-boxes-card[data-tier-color="blue"] .ui-wiki-legendary-boxes-card-icon {
    border-color: color-mix(in oklch, var(--ui-accent) 68%, var(--ui-border-subtle));
    background: color-mix(in oklch, var(--ui-accent) 30%, var(--ui-bg-subtle));
}

/* The entrance animation / hover lift put a transform on the card, which
   makes it a stacking context — an open dots popover would then paint UNDER
   the following sibling cards. Raise the interactive card above siblings. */
.ui-wiki-legendary-boxes-card:hover,
.ui-wiki-legendary-boxes-card:has(.ui-wiki-legendary-boxes-dots-menu.is-open) {
    z-index: 1;
}

@keyframes lbx-card-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* --- head row: disclosure trigger + name link + caret (collapsed mobile
   minimum) --- */

/* The head row carries the tooltip contract ([data-lbx-tip]); the name link
   navigates, so the disclosure trigger is the icon+stars button beside it. */
.lbx-card-head {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    width: 100%;
    min-height: var(--ui-control-touch);
    cursor: pointer;
    transition: transform var(--ui-duration-fast) var(--ui-ease-out);
}

/* Button reset + the disclosure contract ([data-lbx-expand]): touch tap
   opens details, keyboard focus rings like every control. */
.lbx-card-head-main {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    padding: 0;
    border: 0;
    background: none;
    text-align: start;
    cursor: pointer;
}

.lbx-card-head-main:focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
}

/* Reserve the admin corner so the pinned dots trigger never overlaps the
   caret/name (no effect for guests — no trigger rendered). */
.ui-wiki-legendary-boxes-card:has(.ui-wiki-legendary-boxes-dots-trigger) .lbx-card-head {
    padding-inline-end: calc(var(--ui-control-touch) + var(--ui-space-2) - 14px);
}

.ui-wiki-legendary-boxes-card-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--ui-border-subtle);
    border-radius: var(--ui-radius-control);
    background: var(--ui-bg-subtle);
}

.ui-wiki-legendary-boxes-card-icon img {
    max-width: 100%;
    height: auto;
}

.ui-wiki-legendary-boxes-card-headline {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* The name is a real link (R13): same color as the plain title — the link
   affordance comes only from the hover/focus underline. */
.ui-wiki-legendary-boxes-card-name {
    flex: 1 1 auto;
    margin: 0;
    color: var(--ui-text-primary);
    font: 650 1rem/1.3 "Onest", system-ui, sans-serif;
    overflow-wrap: anywhere;
    hyphens: auto;
    cursor: pointer;
    text-decoration: none;
}

.ui-wiki-legendary-boxes-card-name:hover,
.ui-wiki-legendary-boxes-card-name:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ui-wiki-legendary-boxes-card-name:focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
}

/* Restore the tight 6px star-row -> name rhythm across the row's 12px gap
   (only when a star row actually precedes the name). */
.lbx-card-head-main:has(.ui-wiki-legendary-boxes-star-row) + .ui-wiki-legendary-boxes-card-name {
    margin-inline-start: -6px;
}

/* Star row: one ph-star-fill per star rank; brightens + pops on card hover
   (staggered, fine pointers only — see the hover block below). */
.ui-wiki-legendary-boxes-star-row {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--ui-brand-signal);
}

.ui-wiki-legendary-boxes-star-row .ui-icon {
    transition:
        transform var(--ui-duration-fast) var(--ui-ease-out),
        color var(--ui-duration-fast) ease;
}

/* Name + tier for assistive tech only, inside the disclosure button: the
   visual name is the link beside it, and the tier is carried by the
   whole-card surface tint, never by text alone. */
.ui-wiki-legendary-boxes-card-name-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ui-wiki-legendary-boxes-card-caret {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    color: var(--ui-text-muted);
    transition: transform var(--ui-duration-standard) var(--ui-ease-out);
}

.ui-wiki-legendary-boxes-card.is-open .ui-wiki-legendary-boxes-card-caret {
    transform: rotate(180deg);
}

/* Cards without a details block have no disclosure: caret hidden, head
   trigger inert (the tooltip hover contract on the head still works). */
.ui-wiki-legendary-boxes-card:not(:has(.ui-wiki-legendary-boxes-details)) .ui-wiki-legendary-boxes-card-caret {
    display: none;
}

.ui-wiki-legendary-boxes-card:not(:has(.ui-wiki-legendary-boxes-details)) .lbx-card-head {
    cursor: default;
}

.ui-wiki-legendary-boxes-card:not(:has(.ui-wiki-legendary-boxes-details)) .lbx-card-head-main {
    cursor: default;
}

/* --- summary row: price/second-price stats + own-stash chips, always visible ---
   Lives OUTSIDE the collapsible details so price, scrap yield and the
   viewer's stash lines stay visible on mobile without a tap.
   One row: the price range reads first ("25 – 35"), the stash chips follow
   on the same line; when the row is too narrow the whole slot wraps below
   the prices and its chips wrap inside it. Tight 4px lives INSIDE the
   price range only. */

.ui-wiki-legendary-boxes-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-3);
    padding-top: var(--ui-space-3);
}

/* Hidden while fully empty so it never adds a stray flex gap to the card.
   :has covers the no-stats guest case; empty stash slots are display: none
   by their own rule, so an empty slot plus a missing stats block leaves the
   summary with zero rendered height either way. */
.ui-wiki-legendary-boxes-summary:not(:has(.ui-wiki-legendary-boxes-stats, [data-box-stash-slot] > *)) {
    display: none;
}

/* --- details block: grid-rows disclosure (mobile) / always open (desktop) ---
   Holds only "what it gives" + "how to obtain"; stats and stash chips live
   in .-summary above and stay visible on mobile. */

.ui-wiki-legendary-boxes-details {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--ui-duration-standard) var(--ui-ease-out);
}

/* Group air above the details content lives on the inner wrapper (12px):
   it is clipped away by overflow:hidden while the 0fr row stays collapsed,
   and it covers every state — mobile open, desktop always-open, and cards
   whose description is hidden on desktop. */
.ui-wiki-legendary-boxes-details-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ui-space-2);
    min-height: 0;
    overflow: hidden;
    padding-top: var(--ui-space-3);
}

.ui-wiki-legendary-boxes-card.is-open .ui-wiki-legendary-boxes-details {
    grid-template-rows: 1fr;
}

/* --- stat row: price + second price read as ONE range ("25 – 35") ---
   The row binds tight (4px); the separator is a bold en-dash set in the
   same 700 mono as the numbers so it continues the price instead of
   starting a new stat. Signal owns both reward numbers. */

.ui-wiki-legendary-boxes-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-1);
}

.ui-wiki-legendary-boxes-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ui-wiki-legendary-boxes-stat.is-scrap {
    gap: var(--ui-space-1);
}

.ui-wiki-legendary-boxes-stat .ui-icon {
    color: var(--ui-text-muted);
}

.ui-wiki-legendary-boxes-stat.is-price .ui-icon {
    color: color-mix(in oklch, var(--ui-brand-signal) 82%, transparent);
}

.ui-wiki-legendary-boxes-stat.is-price .ui-wiki-legendary-boxes-stat-value,
.ui-wiki-legendary-boxes-stat.is-scrap .ui-wiki-legendary-boxes-stat-value,
.ui-wiki-legendary-boxes-stat.is-scrap .ui-wiki-legendary-boxes-stat-dash {
    color: var(--ui-brand-signal);
    font: 700 0.875rem/1 "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* "What it gives" inline description: mobile-only rendering of the same
   variant rows the desktop tooltip shows on hover. Desktop hides it
   (>=768px rule below); the tooltip owns the effect text there. */

.ui-wiki-legendary-boxes-inline-desc {
    display: grid;
    gap: var(--ui-space-2);
    width: 100%;
    color: var(--ui-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.ui-wiki-legendary-boxes-inline-desc p {
    margin: 0;
}

.ui-wiki-legendary-boxes-inline-desc strong {
    color: var(--ui-brand-signal);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ui-wiki-legendary-boxes-inline-desc p.is-active strong {
    color: var(--ui-accent);
}

/* "How to obtain" (mobile-only rendering; the desktop tooltip owns the
   note) as a quiet footnote inside the details block. */

.ui-wiki-legendary-boxes-obtain {
    width: 100%;
    margin: 0;
    padding-top: 0;
    border-top: 0;
    color: var(--ui-text-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* --- own-stash platform chips (D12, R1) --- */

.ui-wiki-legendary-boxes-card [data-box-stash-slot] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
}

/* Invisible while empty so it never adds a stray flex gap to the card. */
.ui-wiki-legendary-boxes-card [data-box-stash-slot]:empty {
    display: none;
}

.ui-wiki-legendary-boxes-stash-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-bg-subtle);
    color: var(--ui-text-secondary);
    font: 600 0.75rem/1.2 "Onest", system-ui, sans-serif;
    white-space: nowrap;
}

.ui-wiki-legendary-boxes-stash-chip .ui-icon {
    flex: 0 0 auto;
    color: var(--ui-text-muted);
}

.ui-wiki-legendary-boxes-stash-count {
    color: var(--ui-accent);
    font: 700 0.6875rem/1 "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* ×0 line: dimmed (out of stock parity with the stash page). */
.ui-wiki-legendary-boxes-stash-chip.is-empty {
    opacity: 0.55;
}

.ui-wiki-legendary-boxes-stash-chip.is-empty .ui-wiki-legendary-boxes-stash-count {
    color: var(--ui-text-muted);
}

.ui-wiki-legendary-boxes-stash-craft {
    display: inline-flex;
    align-items: center;
    color: var(--ui-text-muted);
}

/* ---------- dots popover (admin corner) ---------- */

.ui-wiki-legendary-boxes-dots-trigger {
    position: absolute;
    top: var(--ui-space-2);
    right: var(--ui-space-2);
    width: var(--ui-control-touch);
    height: var(--ui-control-touch);
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--ui-border-subtle);
    border-radius: var(--ui-radius-control);
    background: transparent;
    color: var(--ui-text-secondary);
    cursor: pointer;
    transition:
        color var(--ui-duration-fast) ease,
        background-color var(--ui-duration-fast) ease,
        border-color var(--ui-duration-fast) ease;
}

.ui-wiki-legendary-boxes-dots-trigger:focus-visible,
.ui-wiki-legendary-boxes-menu-item:focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
}

/* Open trigger reads active (aria-expanded is owned by the page JS —
   no script change needed for this state). */
.ui-wiki-legendary-boxes-dots-trigger[aria-expanded="true"] {
    border-color: color-mix(in oklch, var(--ui-accent) 42%, transparent);
    background: var(--ui-accent-soft);
    color: var(--ui-text-primary);
}

/* Anchored under the admin corner of the card; opens via .is-open. A
   proper admin mini-panel (R8): wider, roomier, lifted above the tinted
   card surface with a two-layer shadow. Never wider than the viewport
   on narrow phones (right-anchored inside the card). */
.ui-wiki-legendary-boxes-dots-menu {
    position: absolute;
    top: calc(var(--ui-space-2) + var(--ui-control-touch) + var(--ui-space-1));
    right: var(--ui-space-2);
    z-index: var(--ui-z-dropdown);
    display: none;
    min-width: 264px;
    max-width: min(300px, calc(100vw - 48px));
    max-height: min(280px, 50dvh);
    overflow-y: auto;
    padding: var(--ui-space-3);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-panel);
    background: var(--ui-bg-raised);
    box-shadow:
        var(--ui-shadow-panel),
        0 18px 44px -12px oklch(5% 0.02 257 / 0.6);
}

.ui-wiki-legendary-boxes-dots-menu.is-open {
    display: grid;
    gap: var(--ui-space-2);
    animation: lbx-modal-pop var(--ui-duration-standard) var(--ui-ease-out);
}

/* Admin head: box name over a mono section label, with a signal accent
   bar so the moderation surface reads as designed, not as a bare box. */
.ui-wiki-legendary-boxes-dots-head {
    position: relative;
    display: grid;
    gap: 3px;
    margin: 0;
    padding: var(--ui-space-1) var(--ui-space-2) var(--ui-space-3) var(--ui-space-3);
    border-bottom: 1px solid var(--ui-border-subtle);
}

.ui-wiki-legendary-boxes-dots-head::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 14px;
    left: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--ui-brand-signal);
}

.ui-wiki-legendary-boxes-dots-title {
    overflow: hidden;
    color: var(--ui-text-primary);
    font: 700 0.9375rem/1.3 "Onest", system-ui, sans-serif;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ui-wiki-legendary-boxes-dots-sub {
    color: var(--ui-text-muted);
    font: 700 0.6875rem/1.3 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Edit action: icon sits in a tinted well, label in primary ink; hover
   washes the whole row accent-soft and tints the well. */
.ui-wiki-legendary-boxes-menu-item {
    width: 100%;
    min-height: var(--ui-control-touch);
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    padding: var(--ui-space-1) var(--ui-space-2);
    border: 1px solid transparent;
    border-radius: var(--ui-radius-control);
    background: transparent;
    color: var(--ui-text-primary);
    font: 600 0.875rem/1.25 "Onest", system-ui, sans-serif;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition:
        color var(--ui-duration-fast) ease,
        background-color var(--ui-duration-fast) ease,
        border-color var(--ui-duration-fast) ease;
}

/* Plain 18px icon in muted ink; hover tints it accent with the row. */
.ui-wiki-legendary-boxes-menu-item .ui-icon {
    flex: 0 0 auto;
    color: var(--ui-text-muted);
    transition: color var(--ui-duration-fast) ease;
}

.ui-wiki-legendary-boxes-menu-item:hover {
    border-color: color-mix(in oklch, var(--ui-accent) 30%, transparent);
    background: var(--ui-accent-soft);
    color: var(--ui-text-primary);
}

.ui-wiki-legendary-boxes-menu-item:hover .ui-icon {
    color: var(--ui-accent);
}

/* ---------- full-text tooltip (stash .st-tip contract port) ----------
   Readable mini-card: roomier padding, larger type, separated variant rows
   with a mono eyebrow for the scope label; the primary variant (active
   type filter) gets an accent-soft wash. Markup stays <p><strong> — CSS only. */

.ui-wiki-legendary-boxes-tip {
    position: fixed;
    z-index: var(--ui-z-tooltip);
    max-width: min(340px, calc(100vw - 16px));
    padding: 12px 14px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-panel);
    background: var(--ui-bg-raised);
    color: var(--ui-text-secondary);
    font: 500 0.8125rem/1.55 "Onest", system-ui, sans-serif;
    text-align: left;
    text-wrap: pretty;
    box-shadow: var(--ui-shadow-panel);
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition:
        opacity var(--ui-duration-fast) ease,
        transform 120ms var(--ui-ease-out);
}

.ui-wiki-legendary-boxes-tip.is-open {
    opacity: 1;
    transform: none;
}

.ui-wiki-legendary-boxes-tip p {
    margin: 0;
    overflow-wrap: anywhere;
}

.ui-wiki-legendary-boxes-tip p + p {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--ui-border-subtle);
}

.ui-wiki-legendary-boxes-tip strong {
    display: block;
    margin-bottom: 2px;
    color: var(--ui-brand-signal);
    font: 700 0.6875rem/1.3 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ui-wiki-legendary-boxes-tip p.is-active {
    margin-inline: -6px;
    padding: 6px;
    border: 1px solid color-mix(in oklch, var(--ui-accent) 30%, transparent);
    border-radius: var(--ui-radius-control);
    background: var(--ui-accent-soft);
}

.ui-wiki-legendary-boxes-tip p.is-active + p {
    border-top: 0;
    margin-top: 8px;
    padding-top: 0;
}

/* "How to obtain" note: quiet closing row after the effect variants
   (the shared p + p divider separates it from the description). */
.ui-wiki-legendary-boxes-tip .ui-wiki-legendary-boxes-tip-obtain {
    color: var(--ui-text-muted);
}

/* ---------- edit modal (scrim root + scrollable panel) ---------- */

.ui-wiki-legendary-boxes-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--ui-z-backdrop);
    display: none;
    padding: var(--ui-space-4);
    background: var(--ui-backdrop);
    overflow-y: auto;
}

/* Opened via .is-open or by removing [hidden]; both toggles are supported. */
.ui-wiki-legendary-boxes-modal-backdrop.is-open,
.ui-wiki-legendary-boxes-modal-backdrop:not([hidden]) {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.ui-wiki-legendary-boxes-modal {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    max-height: calc(100dvh - var(--ui-space-8));
    margin: auto;
    display: grid;
    gap: var(--ui-space-4);
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-surface);
    background: var(--ui-bg-raised);
    box-shadow: var(--ui-shadow-panel);
    overflow-y: auto;
    animation: lbx-modal-pop var(--ui-duration-overlay) var(--ui-ease-out);
}

@keyframes lbx-modal-pop {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Title row: label takes the free space (ellipsis for long box names),
   the quiet X is pinned to the right edge as a 40px square. */
.ui-wiki-legendary-boxes-modal-title {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    margin: 0;
    color: var(--ui-text-primary);
    font: 700 1.125rem/1.3 "Onest", system-ui, sans-serif;
}

.ui-wiki-legendary-boxes-modal-title > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-wiki-legendary-boxes-modal-title .lbx-modal-x {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
}

.ui-wiki-legendary-boxes-modal-form {
    display: grid;
    gap: var(--ui-space-4);
    min-width: 0;
}

/* The shared .ui-textarea is only defined for the admin workspace today;
   scope the same appearance to this page's form so its textareas render. */
.ui-wiki-legendary-boxes-modal-form .ui-textarea {
    width: 100%;
    min-width: 0;
    min-height: 120px;
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-border-default);
    border-radius: var(--ui-radius-control);
    background: var(--ui-bg-subtle);
    color: var(--ui-text-primary);
    font: 500 0.9375rem/1.45 "Onest", system-ui, sans-serif;
    resize: vertical;
}

.ui-wiki-legendary-boxes-modal-form .ui-textarea:focus {
    border-color: var(--ui-focus);
    background: var(--ui-bg-canvas);
    box-shadow: var(--ui-shadow-focus);
    outline: none;
}

/* Footer: Clear spans the full row on mobile (Cancel/Save share the
   second row); on desktop all three sit one line with Clear pushed left. */
.ui-wiki-legendary-boxes-modal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ui-space-2);
}

.ui-wiki-legendary-boxes-modal-actions .ui-button {
    width: 100%;
}

.ui-wiki-legendary-boxes-modal-actions [data-lbx-clear] {
    grid-column: 1 / -1;
}

/* ---------- >=768px: tablet and up ---------- */

@media (min-width: 768px) {
    .ui-wiki-legendary-boxes {
        padding-inline: var(--ui-space-6);
    }

    /* Desktop keeps the flat language: two columns (copy + stage), glow
       re-anchored behind the art column, photo still capped at 270px. */
    .ui-wiki-legendary-boxes-hero {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: var(--ui-space-6);
        padding: var(--ui-space-4) 0 var(--ui-space-2);
    }

    .ui-wiki-legendary-boxes-hero::before {
        top: 0;
        right: 0;
        bottom: 0;
        left: 38%;
        width: auto;
        height: auto;
        background:
            radial-gradient(62% 58% at 62% 46%,
                color-mix(in oklch, var(--ui-brand-signal) 12%, transparent),
                transparent 70%);
    }

    .ui-wiki-legendary-boxes-hero-art {
        justify-self: center;
        width: min(100%, 340px);
        padding: var(--ui-space-2) 0;
    }

    .ui-wiki-legendary-boxes-hero-art::before {
        width: min(100%, 320px);
    }

    .ui-wiki-legendary-boxes-hero-photo {
        width: min(100%, 270px);
    }

    /* Unframed toolbar rows under the banner; groups take content width and
       the mono tags introduce each chip group. */
    .ui-wiki-legendary-boxes-filters-group {
        flex: 0 1 auto;
    }

    .ui-wiki-legendary-boxes-filters-tag {
        display: inline-block;
    }

    .ui-wiki-legendary-boxes-filters-rail {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--ui-space-2);
    }

    /* R4: mobile-only chip rows never render on desktop. */
    .ui-wiki-legendary-boxes-filters-rail--mobile {
        display: none;
    }

    /* R5: the mobile entry row never renders on desktop; the panel
       always dissolves so the groups sit directly in the one-line toolbar
       (the [hidden] guard above loses here on equal specificity by source
       order — grid swaps never touch the panel, so a stale hidden must not
       collapse the desktop row). */
    .ui-wiki-legendary-boxes-filters-toggle {
        display: none;
    }

    .ui-wiki-legendary-boxes-filters-row .ui-wiki-legendary-boxes-filters-panel {
        display: contents;
    }

    .ui-wiki-legendary-boxes-dropdown {
        display: none;
    }

    /* R3: select-only dimensions keep their dropdown on desktop, rendered as
       a compact chip-height trigger (one line with the Stars rail). */
    .ui-wiki-legendary-boxes-filters-group--select .ui-wiki-legendary-boxes-dropdown {
        display: block;
    }

    .ui-wiki-legendary-boxes-filters-group--select .ui-wiki-legendary-boxes-dropdown-trigger {
        width: auto;
        min-height: 36px;
        max-width: 220px;
        padding: 0 var(--ui-space-3);
        font-size: 0.8125rem;
    }

    /* Narrow triggers (e.g. Craft "Все") size the menu to its longest item
       instead of squeezing it into the trigger width. */
    .ui-wiki-legendary-boxes-filters-group--select .ui-wiki-legendary-boxes-dropdown-menu {
        left: 0;
        right: auto;
        min-width: 100%;
        width: max-content;
        max-width: min(280px, calc(100vw - 32px));
    }

    .ui-wiki-legendary-boxes-chip {
        min-height: 36px;
        padding: 0 8px;
    }

    .ui-wiki-legendary-boxes-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--ui-space-4);
    }

    .ui-wiki-legendary-boxes-section {
        gap: var(--ui-space-4);
    }

    .ui-wiki-legendary-boxes-dots-trigger {
        width: 36px;
        height: 36px;
    }

    /* Desktop: the details block is retired — the hover tooltip owns both
       "what it gives" and "how to obtain"; the card shows only the
       always-visible summary row, and the expand affordance is inert (the
       head stays for the tooltip hover contract only). */
    .ui-wiki-legendary-boxes-details {
        display: none;
    }

    .ui-wiki-legendary-boxes-card-caret {
        display: none;
    }

    .lbx-card-head {
        cursor: default;
    }

    /* Desktop: the name link stays a link (it navigates), only the retired
       disclosure trigger loses the pointer. */
    .lbx-card-head-main {
        cursor: default;
    }

    .ui-wiki-legendary-boxes-card:has(.ui-wiki-legendary-boxes-dots-trigger) .lbx-card-head {
        padding-inline-end: calc(36px + var(--ui-space-2) - 14px);
    }

    .ui-wiki-legendary-boxes-dots-menu {
        top: calc(var(--ui-space-2) + 36px + var(--ui-space-1));
    }

    .ui-wiki-legendary-boxes-menu-item,
    .ui-wiki-legendary-boxes-dropdown-item {
        min-height: var(--ui-control-height);
    }

    .ui-wiki-legendary-boxes-modal {
        padding: var(--ui-space-6);
    }

    .ui-wiki-legendary-boxes-modal-actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .ui-wiki-legendary-boxes-modal-actions .ui-button {
        width: auto;
    }

    .ui-wiki-legendary-boxes-modal-actions [data-lbx-clear] {
        grid-column: auto;
        margin-inline-end: auto;
    }
}

/* ---------- >=1024px: three-column card grid ---------- */

@media (min-width: 1024px) {
    .ui-wiki-legendary-boxes-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- >=1024px: single-line filter toolbar (R3) ----------
   The filter row never wraps: groups keep content width and the Stars chips
   scroll internally on narrow desktop widths instead of breaking the row
   into a second line. Dropdown menus stay unclipped (no overflow on the
   row itself). */

@media (min-width: 1024px) {
    .ui-wiki-legendary-boxes-filters-row:not(.ui-wiki-legendary-boxes-filters-row--search) {
        flex-wrap: nowrap;
        gap: var(--ui-space-4);
    }

    .ui-wiki-legendary-boxes-filters-row:not(.ui-wiki-legendary-boxes-filters-row--search) .ui-wiki-legendary-boxes-filters-group {
        flex: 0 0 auto;
    }

    .ui-wiki-legendary-boxes-filters-row:not(.ui-wiki-legendary-boxes-filters-row--search) .ui-wiki-legendary-boxes-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ui-wiki-legendary-boxes-filters-row:not(.ui-wiki-legendary-boxes-filters-row--search) .ui-wiki-legendary-boxes-chips::-webkit-scrollbar {
        display: none;
    }
}

/* ---------- >=1366px: the filter groups fit one line, so they spread across
   the full block width (stars left, reset right) ---------- */

@media (min-width: 1366px) {
    .ui-wiki-legendary-boxes-filters-row:not(.ui-wiki-legendary-boxes-filters-row--search) {
        justify-content: space-between;
    }
}

/* ---------- hover affordances (fine pointers only) ---------- */

@media (hover: hover) and (pointer: fine) {
    /* Card lift + tier glow (R2, feed-run language). The tinted surface owns
       the tier; hover deepens the border into the tier color, lifts the card,
       and fades in the pointer-tracked spotlight (::before, --mx/--my set
       by the page JS — feed-challenges.js parity). */
    .ui-wiki-legendary-boxes-card:hover {
        border-color: color-mix(in oklch, var(--ui-brand-signal) 25%, transparent);
        box-shadow: 0 20px 44px -18px oklch(5% 0.02 257 / 0.6);
        transform: translateY(-3px);
    }

    .ui-wiki-legendary-boxes-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        opacity: 0;
        transition: opacity var(--ui-duration-fast) ease;
        pointer-events: none;
        background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 50%),
            color-mix(in oklch, var(--ui-brand-signal) 8%, transparent), transparent 70%);
    }

    .ui-wiki-legendary-boxes-card:hover::before {
        opacity: 1;
    }

    /* Hover lift: tier border blooms into its color over the lifted card. */
    .ui-wiki-legendary-boxes-card[data-tier-color="brown"]:hover {
        border-color: color-mix(in srgb, oklch(69% 0.19 56) 55%, transparent);
        box-shadow: 0 20px 44px -18px oklch(5% 0.02 257 / 0.6),
            0 0 14px color-mix(in srgb, oklch(69% 0.19 56) 22%, transparent);
    }

    .ui-wiki-legendary-boxes-card[data-tier-color="brown"]::before {
        background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 50%),
            color-mix(in srgb, oklch(69% 0.19 56) 14%, transparent), transparent 70%);
    }

    .ui-wiki-legendary-boxes-card[data-tier-color="green"]:hover {
        border-color: color-mix(in oklch, var(--ui-success) 55%, transparent);
        box-shadow: 0 20px 44px -18px oklch(5% 0.02 257 / 0.6),
            0 0 14px color-mix(in oklch, var(--ui-success) 20%, transparent);
    }

    .ui-wiki-legendary-boxes-card[data-tier-color="green"]::before {
        background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 50%),
            color-mix(in oklch, var(--ui-success) 14%, transparent), transparent 70%);
    }

    .ui-wiki-legendary-boxes-card[data-tier-color="blue"]:hover {
        border-color: color-mix(in oklch, var(--ui-accent) 55%, transparent);
        box-shadow: 0 20px 44px -18px oklch(5% 0.02 257 / 0.6),
            0 0 14px color-mix(in oklch, var(--ui-accent) 22%, transparent);
    }

    .ui-wiki-legendary-boxes-card[data-tier-color="blue"]::before {
        background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 50%),
            color-mix(in oklch, var(--ui-accent) 15%, transparent), transparent 70%);
    }

    /* Signature touch: the star row pops star by star (30ms stagger). */
    .ui-wiki-legendary-boxes-card:hover .ui-wiki-legendary-boxes-star-row .ui-icon {
        transform: scale(1.18);
        color: color-mix(in oklch, var(--ui-brand-signal) 78%, var(--ui-text-primary));
    }

    .ui-wiki-legendary-boxes-card:hover .ui-wiki-legendary-boxes-star-row .ui-icon:nth-child(2) {
        transition-delay: 30ms;
    }

    .ui-wiki-legendary-boxes-card:hover .ui-wiki-legendary-boxes-star-row .ui-icon:nth-child(3) {
        transition-delay: 60ms;
    }

    .ui-wiki-legendary-boxes-card:hover .ui-wiki-legendary-boxes-star-row .ui-icon:nth-child(4) {
        transition-delay: 90ms;
    }

    .ui-wiki-legendary-boxes-chip:hover {
        border-color: var(--ui-border-strong);
        background: color-mix(in oklch, var(--ui-bg-raised) 58%, transparent);
        color: var(--ui-text-primary);
    }

    .ui-wiki-legendary-boxes-chip.is-active:hover {
        border-color: color-mix(in oklch, var(--ui-accent) 60%, transparent);
        background: var(--ui-accent-soft);
        color: var(--ui-text-primary);
    }

    .ui-wiki-legendary-boxes-dropdown-trigger:hover,
    .ui-wiki-legendary-boxes-filters-toggle:hover,
    .ui-wiki-legendary-boxes-dropdown-item:hover,
    .ui-wiki-legendary-boxes-dots-trigger:hover {
        border-color: var(--ui-border-strong);
        background: var(--ui-bg-interactive);
        color: var(--ui-text-primary);
    }

    /* The admin menu item owns its accent hover above (icon well tint);
       the generic control wash must not override it. */
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .ui-wiki-legendary-boxes-hero,
    .ui-wiki-legendary-boxes-card,
    .lbx-card-head,
    .ui-wiki-legendary-boxes-card-caret,
    .ui-wiki-legendary-boxes-star-row .ui-icon,
    .ui-wiki-legendary-boxes-details,
    .ui-wiki-legendary-boxes-chip,
    .ui-wiki-legendary-boxes-filters-toggle,
    .ui-wiki-legendary-boxes-dropdown-trigger,
    .ui-wiki-legendary-boxes-dropdown-caret,
    .ui-wiki-legendary-boxes-dropdown-item,
    .ui-wiki-legendary-boxes-dots-trigger,
    .ui-wiki-legendary-boxes-dots-menu,
    .ui-wiki-legendary-boxes-menu-item,
    .ui-wiki-legendary-boxes-tip,
    .ui-wiki-legendary-boxes-modal-backdrop,
    .ui-wiki-legendary-boxes-modal {
        transition: none;
        animation: none;
    }
}

/* Touch press feedback on the expand header (no hover to lean on). */
@media (hover: none) {
    .lbx-card-head:active {
        transform: scale(0.99);
    }
}