/* Modal Path Ethics — The Inner Apocalypse reader badge.
   Loaded last so its active search glyph can supersede earlier collectible icon sets
   without destroying their stored state. */
:root {
    --mpe-ia-badge-glyph: url("player-glyphs/inner-apocalypse.svg");
}

html[data-inner-apocalypse-glyph="better-forest"] { --mpe-ia-badge-glyph: url("player-glyphs/better-forest.svg"); }
html[data-inner-apocalypse-glyph="inner-apocalypse"] { --mpe-ia-badge-glyph: url("player-glyphs/inner-apocalypse.svg"); }
html[data-inner-apocalypse-glyph="inner-sovereignty"] { --mpe-ia-badge-glyph: url("player-glyphs/inner-sovereignty.svg"); }
html[data-inner-apocalypse-glyph="outer-apocalypse"] { --mpe-ia-badge-glyph: url("player-glyphs/outer-apocalypse.svg"); }
html[data-inner-apocalypse-glyph="outer-sovereignty"] { --mpe-ia-badge-glyph: url("player-glyphs/outer-sovereignty.svg"); }

/* notipede.css predates this collectible and hides an otherwise-empty rack.
   An unlocked Inner Apocalypse badge is sufficient to keep the rack present. */
html[data-inner-apocalypse-icons-unlocked="true"] .mpe-badge-rack {
    display: flex !important;
}

.mpe-badge--inner-apocalypse::before {
    background: #f7f3e8;
    content: "";
    display: block;
    filter: drop-shadow(0 0 .42rem rgba(255,255,255,.22)) drop-shadow(0 1px 2px rgba(0,0,0,.5));
    height: 2.72rem;
    opacity: .92;
    transform: rotate(var(--mpe-ia-glyph-turn, 0deg));
    transition: transform .2s ease, opacity .16s ease, filter .16s ease;
    width: 2.72rem;
    -webkit-mask: var(--mpe-ia-badge-glyph) center / contain no-repeat;
    mask: var(--mpe-ia-badge-glyph) center / contain no-repeat;
}

.mpe-badge--inner-apocalypse::after {
    border: 1px solid rgba(247,243,232,.13);
    content: "";
    inset: .34rem;
    pointer-events: none;
    position: absolute;
    transform: rotate(45deg);
}

html[data-inner-apocalypse-icons-active="true"] .mpe-badge--inner-apocalypse {
    border-color: rgba(247,243,232,.62);
    box-shadow:
        inset .14rem 0 0 rgba(238,198,67,.42),
        inset -.14rem 0 0 rgba(152,251,152,.38),
        0 0 1.4rem rgba(247,243,232,.08);
}

.mpe-badge--inner-apocalypse:hover::before,
.mpe-badge--inner-apocalypse:focus-visible::before,
html[data-inner-apocalypse-glyph-glitch="true"] .mpe-badge--inner-apocalypse::before {
    filter: drop-shadow(-.1rem 0 rgba(238,198,67,.48)) drop-shadow(.1rem 0 rgba(152,251,152,.42));
    opacity: 1;
}

/* Active badge owns the search mark. White is deliberate in both schemes: the
   glyph behaves like a recovered symbol rather than another theme-colored icon. */
html[data-inner-apocalypse-icons-active="true"] .gh-search {
    overflow: visible !important;
    position: relative;
}

html[data-inner-apocalypse-icons-active="true"] .gh-search > svg {
    opacity: 0 !important;
}

html[data-inner-apocalypse-icons-active="true"] .gh-search::before {
    background: #fff;
    content: "" !important;
    display: block !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.78)) drop-shadow(0 0 .35rem rgba(255,255,255,.16));
    height: 3.35rem !important;
    left: 50% !important;
    opacity: .98 !important;
    pointer-events: none;
    position: absolute !important;
    top: 50% !important;
    transform: translate(-50%, -50%) rotate(var(--mpe-ia-glyph-turn, 0deg)) !important;
    transform-origin: 50% 50%;
    transition: transform .2s ease, filter .16s ease, opacity .16s ease !important;
    width: 3.35rem !important;
    -webkit-mask: var(--mpe-ia-badge-glyph) center / contain no-repeat;
    mask: var(--mpe-ia-badge-glyph) center / contain no-repeat;
}

html[data-inner-apocalypse-icons-active="true"] .gh-search:hover::before,
html[data-inner-apocalypse-icons-active="true"] .gh-search:focus-visible::before {
    filter: drop-shadow(-.09rem 0 rgba(238,198,67,.72)) drop-shadow(.09rem 0 rgba(152,251,152,.65)) drop-shadow(0 1px 2px rgba(0,0,0,.7));
    opacity: 1 !important;
    transform: translate(-50%, -50%) rotate(calc(var(--mpe-ia-glyph-turn, 0deg) + 7deg)) scale(1.045) !important;
}

html[data-inner-apocalypse-icons-active="true"][data-inner-apocalypse-glyph-glitch="true"] .gh-search::before {
    filter: drop-shadow(-.13rem 0 rgba(238,198,67,.86)) drop-shadow(.13rem 0 rgba(152,251,152,.82)) drop-shadow(0 1px 2px rgba(0,0,0,.72));
    opacity: .76 !important;
}

@media (max-width: 767px) {
    html[data-inner-apocalypse-icons-active="true"] .gh-search::before {
        height: 3rem !important;
        width: 3rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mpe-badge--inner-apocalypse::before,
    html[data-inner-apocalypse-icons-active="true"] .gh-search::before {
        transition: none !important;
    }
}