/* ============================================================
   LIQUID GLASS — clean frosted material + optional mild refraction
   ============================================================ */

.inv-item,
.element,
.bottom-bar,
.trash-zone,
.discovery-card {
    --lg-rim: rgba(255, 255, 255, 0.5);
}

.inv-item,
.element,
.bottom-bar,
.trash-zone,
.discovery-card {
    isolation: isolate;
    background:
        linear-gradient(160deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.05) 40%,
            rgba(255, 255, 255, 0.02) 100%),
        rgba(18, 18, 28, 0.42) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.38),
        0 2px 6px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 var(--lg-rim),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}

/* Soft top specular */
.inv-item::before,
.element::before,
.bottom-bar::before,
.discovery-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.06) 22%,
        transparent 50%
    );
}

/* Kill hard pill highlight strip from base components */
.element::after,
.inv-item::after {
    content: none !important;
    display: none !important;
}

/* Restore a soft bottom wash on inventory cards only */
.inv-item::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 110% 45% at 50% 110%, rgba(129, 140, 248, 0.1), transparent 65%);
}

/* ----------------------------------------------------------
   Chromium: mild refractive warp (no chromatic / no contrast abuse)
   ---------------------------------------------------------- */
html.lg-refract .element:not(.dragging):not(.merging) {
    backdrop-filter: url(#lg-pill) blur(2px) saturate(165%) !important;
    -webkit-backdrop-filter: url(#lg-pill) blur(2px) saturate(165%) !important;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.02) 100%),
        rgba(255, 255, 255, 0.04) !important;
}

html.lg-refract .inv-item {
    backdrop-filter: url(#lg-card) blur(2.5px) saturate(155%) !important;
    -webkit-backdrop-filter: url(#lg-card) blur(2.5px) saturate(155%) !important;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03) 50%),
        rgba(255, 255, 255, 0.035) !important;
}

html.lg-refract .bottom-bar {
    backdrop-filter: url(#lg-dock) blur(2px) saturate(160%) !important;
    -webkit-backdrop-filter: url(#lg-dock) blur(2px) saturate(160%) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
        rgba(255, 255, 255, 0.04) !important;
}

html.lg-refract .trash-zone {
    backdrop-filter: blur(14px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
}

html.lg-refract .discovery-card {
    backdrop-filter: url(#lg-modal) blur(3px) saturate(165%) !important;
    -webkit-backdrop-filter: url(#lg-modal) blur(3px) saturate(165%) !important;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 45%),
        rgba(20, 20, 30, 0.55) !important;
}

/* Sidebar: frosted only — panel refraction looked warped */
html.lg-refract .sidebar {
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}

html.lg-refract .inv-item:hover {
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(129, 140, 248, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
}

/* Layout anchors (glass sheet must not restack them) */
.bottom-bar {
    position: absolute !important;
    bottom: 28px !important;
    left: 50% !important;
    top: auto !important;
    transform: translateX(-50%);
}

.trash-zone {
    position: absolute !important;
    bottom: 28px !important;
    right: 30px !important;
    top: auto !important;
    left: auto !important;
}

.element {
    position: absolute !important;
}

/* Drag: keep glass, drop refraction on idle siblings */
html.lg-refract .element.dragging,
html.lg-refract .element.selected {
    backdrop-filter: url(#lg-pill) blur(2px) saturate(165%) !important;
    -webkit-backdrop-filter: url(#lg-pill) blur(2px) saturate(165%) !important;
}

.element.dragging {
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 50%),
        rgba(255, 255, 255, 0.05) !important;
}

html.lg-refract body.is-dragging .element:not(.dragging),
body.is-dragging .element:not(.dragging),
html.lg-refract body.is-merging .element:not(.merging),
body.is-merging .element:not(.merging) {
    backdrop-filter: blur(8px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
}

html.lg-refract body.is-dragging .inv-item,
html.lg-refract body.is-dragging .sidebar,
html.lg-refract body.is-dragging .bottom-bar,
html.lg-refract body.is-dragging .trash-zone,
html.lg-refract body.is-merging .inv-item,
html.lg-refract body.is-merging .sidebar,
html.lg-refract body.is-merging .bottom-bar,
html.lg-refract body.is-merging .trash-zone,
body.is-dragging .inv-item,
body.is-dragging .sidebar,
body.is-dragging .bottom-bar,
body.is-dragging .trash-zone,
body.is-merging .inv-item,
body.is-merging .sidebar,
body.is-merging .bottom-bar,
body.is-merging .trash-zone {
    backdrop-filter: blur(8px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
}

/* Merge: kill ALL backdrop-filter on merging pills (biggest lag source) */
.element.merging,
html.lg-refract .element.merging,
body.is-merging .element.merging {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08)),
        rgba(255, 255, 255, 0.1) !important;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    will-change: transform, opacity;
}

html.lg-lowpower .element.dragging,
html.lg-lowpower body.is-dragging .element.dragging {
    backdrop-filter: blur(10px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(155%) !important;
}