/* Story card windows: inventory, card keeper storage, decoding, and Kant shop.
   This file is intentionally loaded after omen-window.css so these windows can use
   the shared fullscreen shell without borrowing layout from unrelated windows. */
.story-inventory-overlay,
.story-card-storage-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 4460 !important;
    display: grid !important;
    place-items: stretch !important;
    padding: 0 !important;
    background:
        radial-gradient(circle at 50% 28%, rgba(92, 246, 213, .10), transparent 36%),
        linear-gradient(180deg, rgba(1, 5, 8, .96), rgba(1, 5, 7, .99)) !important;
    backdrop-filter: blur(4px) !important;
    overflow: hidden !important;
}.story-inventory-window,
.story-card-storage-window {
    box-sizing: border-box !important;
    width: 100vw !important;
    height: 100dvh !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    padding:
        max(12px, env(safe-area-inset-top, 0px))
        max(14px, env(safe-area-inset-right, 0px))
        max(12px, env(safe-area-inset-bottom, 0px))
        max(14px, env(safe-area-inset-left, 0px)) !important;
    background:
        linear-gradient(180deg, rgba(1, 5, 8, .76), rgba(1, 5, 7, .94)),
        url("../assets/sprites/ui/windows/decor/story_inventory_bg.webp?v=7903c24-20260629075437") center / cover no-repeat,
        linear-gradient(145deg, #080606, #02070a) !important;
    color: #f3dfb2 !important;
    overflow: hidden !important;
}.story-card-storage-window {
    grid-template-rows: auto minmax(0, 1fr) !important;
}.story-inventory-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: start !important;
    min-height: 78px !important;
    position: relative !important;
    z-index: 4 !important;
}.story-inventory-header h3 {
    margin: 2px 0 0 !important;
    color: #fff2c4 !important;
    font-size: clamp(1.45rem, 3.2vw, 2.5rem) !important;
    line-height: .95 !important;
    text-transform: uppercase !important;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .72), 0 0 18px rgba(252, 201, 125, .22) !important;
}.story-inventory-title-block {
    min-width: 0 !important;
}.story-inventory-header-actions {
    display: grid !important;
    grid-template-columns: minmax(118px, auto) !important;
    justify-items: end !important;
    gap: 7px !important;
}.story-inventory-header-actions .story-merchant-balance {
    grid-column: 1 / -1 !important;
    justify-self: end !important;
}.story-inventory-close,
.story-card-storage-tab {
    min-height: 38px !important;
    padding: 6px 14px !important;
    font-size: .72rem !important;
}.story-inventory-body,
.story-card-storage-body {
    min-height: 0 !important;
    overflow: hidden !important;
}.story-inventory-loadout {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: minmax(112px, .74fr) minmax(112px, .74fr) minmax(0, 1fr) !important;
    grid-template-areas:
        "active active active"
        "passive passive passive"
        "synergy stats buffs" !important;
    gap: clamp(8px, 1.3vw, 14px) !important;
}.story-inventory-loadout.is-storage-only {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    grid-template-areas:
        "active"
        "passive"
        "synergy" !important;
}.story-inventory-section {
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: clamp(10px, 1.4vw, 16px) !important;
    border: 0 !important;
    border-top: 1px solid rgba(215, 189, 130, .26) !important;
    background:
        linear-gradient(145deg, rgba(0, 0, 0, .48), rgba(0, 0, 0, .18)),
        rgba(4, 8, 10, .30) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}.story-inventory-section-active { grid-area: active !important; }.story-inventory-section-passive { grid-area: passive !important; }.story-inventory-section-synergy { grid-area: synergy !important; }.story-inventory-section-stats { grid-area: stats !important; }.story-inventory-section-buffs { grid-area: buffs !important; }.story-inventory-section header {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 10px !important;
}.story-inventory-section h4,
.story-storage-shelf h4 {
    margin: 0 !important;
    color: #fff2c4 !important;
    font-size: clamp(.86rem, 1.35vw, 1.05rem) !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
}.story-inventory-section small,
.story-storage-shelf small,
.story-storage-archive-card small {
    color: rgba(224, 248, 250, .76) !important;
    font-size: .72rem !important;
    line-height: 1.18 !important;
}.story-inventory-card-row {
    min-height: 0 !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(112px, 148px) !important;
    justify-content: safe center !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 4px 8px 2px !important;
    scroll-snap-type: x proximity !important;
}.story-inventory-slot-card,
.story-storage-archive-card,
.story-storage-decode-pack {
    position: relative !important;
    min-width: 0 !important;
    display: grid !important;
    align-content: start !important;
    justify-items: center !important;
    gap: 6px !important;
    padding: 9px !important;
    border: 1px solid rgba(215, 189, 130, .28) !important;
    background: rgba(1, 6, 8, .62) !important;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .36) !important;
    scroll-snap-align: start !important;
}.story-inventory-slot-card:not(.is-empty) {
    align-content: center !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
}.story-inventory-slot-card strong,
.story-storage-archive-card strong,
.story-storage-decode-pack strong {
    max-width: 100% !important;
    color: #fff2d6 !important;
    font-size: .76rem !important;
    line-height: 1.06 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}.story-inventory-slot-card.is-empty {
    opacity: .70 !important;
}.story-inventory-slot-card.is-locked {
    place-content: center !important;
}.story-inventory-empty-card,
.story-storage-decode-silhouette {
    width: min(72px, 74%) !important;
    aspect-ratio: 387 / 642 !important;
    border: 1px solid rgba(215, 189, 130, .32) !important;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .80), rgba(0, 0, 0, .42)),
        radial-gradient(circle at 50% 34%, rgba(92, 246, 213, .14), transparent 44%) !important;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .44)) !important;
}.story-small-card-art {
    position: relative !important;
    width: min(84px, 76%) !important;
    aspect-ratio: 387 / 642 !important;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .46)) !important;
}.story-small-card-art .story-merchant-layered-art,
.story-small-card-art .story-merchant-card-fallback {
    position: absolute !important;
    inset: 0 !important;
}.story-small-card-art .story-merchant-card-fallback {
    font-size: 1.6rem !important;
}.story-small-card-art > b {
    position: absolute !important;
    z-index: 4 !important;
    top: 5.7% !important;
    left: 18.5% !important;
    width: 63% !important;
    height: 6.2% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #2b140d !important;
    font-size: .34rem !important;
    line-height: .9 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    overflow: hidden !important;
}.story-inventory-card-action {
    width: 100% !important;
    min-height: 32px !important;
    padding: 4px 7px !important;
    font-size: .58rem !important;
}.story-inventory-stat-list,
.story-inventory-buff-list {
    min-height: 0 !important;
    display: grid !important;
    align-content: start !important;
    gap: 7px !important;
    overflow-y: auto !important;
    padding-right: 4px !important;
}.story-inventory-stat-list span,
.story-inventory-buff-list span {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: baseline !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(215, 189, 130, .16) !important;
}.story-inventory-stat-list b,
.story-inventory-buff-list b {
    color: rgba(224, 248, 250, .78) !important;
    font-size: .74rem !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
}.story-inventory-stat-list strong,
.story-inventory-buff-list strong {
    color: #ffe7a5 !important;
    font-size: .76rem !important;
    line-height: 1.08 !important;
    text-align: right !important;
}.story-inventory-buff-list hr {
    width: 100% !important;
    height: 1px !important;
    margin: 4px 0 !important;
    border: 0 !important;
    background: rgba(92, 246, 213, .20) !important;
}.story-card-storage-tabs {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
}.story-card-storage-tab {
    min-width: min(180px, 30vw) !important;
}.story-card-storage-tab.is-active {
    color: #241009 !important;
    background:
        var(--omen-window-button-tab-primary) center / 100% 100% no-repeat,
        linear-gradient(180deg, rgba(248, 220, 170, .96), rgba(213, 159, 105, .92)) !important;
}.story-card-storage-archive {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}.story-storage-shelf {
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: clamp(10px, 1.4vw, 16px) !important;
    border: 0 !important;
    border-top: 1px solid rgba(215, 189, 130, .26) !important;
    background:
        linear-gradient(145deg, rgba(0, 0, 0, .48), rgba(0, 0, 0, .18)),
        rgba(4, 8, 10, .30) !important;
    overflow: hidden !important;
}.story-storage-shelf header {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 10px !important;
}.story-storage-scroll-row {
    min-height: 0 !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(172px, 210px) !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 4px 8px 2px !important;
    scroll-snap-type: x proximity !important;
}.story-storage-archive-card {
    grid-template-rows: auto auto auto !important;
}.story-storage-archive-card.is-empty {
    place-content: center !important;
}.story-storage-archive-copy {
    display: grid !important;
    justify-items: center !important;
    gap: 2px !important;
    min-height: 30px !important;
}.story-storage-upgrade-price {
    display: block !important;
    color: #ffe6ac !important;
    font-family: var(--omen-font-body, Georgia, serif) !important;
    font-size: clamp(.62rem, .82vw, .78rem) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    text-align: center !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .72) !important;
}.story-storage-archive-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
}.story-storage-archive-actions .run-setup-primary,
.story-storage-archive-actions .run-setup-secondary {
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 5px 6px !important;
    font-size: .58rem !important;
}.story-storage-decode-scene {
    position: relative !important;
    height: 100% !important;
    min-height: 0 !important;
    margin-left: calc(-1 * max(14px, env(safe-area-inset-left, 0px))) !important;
    margin-right: calc(-1 * max(14px, env(safe-area-inset-right, 0px))) !important;
    overflow: hidden !important;
}.story-storage-decode-table {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -14% !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    pointer-events: none !important;
    user-select: none !important;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .46)) !important;
}.story-storage-decode-packs,
.story-storage-decode-choices {
    position: absolute !important;
    inset: 4% 5% 7% !important;
    display: grid !important;
    gap: clamp(10px, 2vw, 26px) !important;
    align-items: end !important;
    z-index: 2 !important;
}.story-storage-decode-packs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}.story-storage-decode-choices {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}.story-storage-decode-pack {
    min-height: 250px !important;
    align-content: end !important;
}.story-storage-decode-silhouette {
    width: min(126px, 74%) !important;
}.story-storage-decode-pack .run-setup-primary {
    width: 100% !important;
    min-height: 38px !important;
    font-size: .66rem !important;
}.story-storage-decode-choice {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    justify-items: center !important;
    align-items: end !important;
    min-width: 0 !important;
    height: 100% !important;
}.story-storage-decode-choice:nth-child(1) .story-merchant-card-display {
    transform: rotate(-5deg) translateY(7px) !important;
}.story-storage-decode-choice:nth-child(2) .story-merchant-card-display {
    transform: translateY(-10px) !important;
}.story-storage-decode-choice:nth-child(3) .story-merchant-card-display {
    transform: rotate(5deg) translateY(7px) !important;
}.story-storage-decode-choice .story-merchant-card-display {
    width: min(100%, 220px) !important;
}.story-storage-decode-choice .run-setup-primary {
    width: min(250px, 100%) !important;
    min-height: 42px !important;
}.story-storage-decode-empty {
    position: absolute !important;
    left: 50% !important;
    bottom: 10% !important;
    z-index: 3 !important;
    transform: translateX(-50%) !important;
    color: rgba(224, 248, 250, .78) !important;
    font-size: .84rem !important;
    text-align: center !important;
}

@media (max-width: 900px) {.story-inventory-loadout {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: minmax(110px, .72fr) minmax(110px, .72fr) minmax(0, .95fr) minmax(0, .95fr) !important;
        grid-template-areas:
            "active active"
            "passive passive"
            "synergy synergy"
            "stats buffs" !important;
    }.story-inventory-card-row {
        grid-auto-columns: minmax(100px, 126px) !important;
    }.story-storage-scroll-row {
        grid-auto-columns: minmax(150px, 180px) !important;
    }
}

@media (orientation: portrait) {.story-inventory-window,
.story-card-storage-window {
        gap: 8px !important;
    }.story-inventory-header {
        min-height: 112px !important;
        grid-template-columns: 1fr auto !important;
    }.story-inventory-header-actions {
        grid-template-columns: 1fr !important;
    }.story-inventory-header-actions .story-merchant-balance {
        grid-column: auto !important;
    }.story-inventory-loadout {
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(104px, .65fr) minmax(104px, .65fr) minmax(0, .82fr) minmax(0, .82fr) minmax(0, .82fr) !important;
        grid-template-areas:
            "active"
            "passive"
            "synergy"
            "stats"
            "buffs" !important;
    }.story-inventory-loadout.is-storage-only {
        grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    }.story-inventory-card-row {
        grid-auto-columns: minmax(92px, 112px) !important;
        gap: 7px !important;
    }.story-small-card-art {
        width: min(70px, 74%) !important;
    }.story-card-storage-tabs {
        justify-content: start !important;
        overflow-x: auto !important;
        padding-bottom: 4px !important;
    }.story-card-storage-tab {
        min-width: 128px !important;
        flex: 0 0 auto !important;
    }.story-storage-scroll-row {
        grid-auto-columns: minmax(136px, 160px) !important;
    }.story-storage-archive-actions {
        grid-template-columns: 1fr !important;
    }.story-storage-decode-table {
        bottom: -2% !important;
    }.story-storage-decode-packs {
        inset: 4% 3% 6% !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }.story-storage-decode-choices {
        inset: 4% 3% 6% !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }.story-storage-decode-pack {
        min-height: 0 !important;
        padding: 7px 5px !important;
    }.story-card-storage-body-decode .story-storage-decode-pack {
        padding: 0 4px !important;
        transform: translateY(-7px) !important;
    }.story-card-storage-body-decode .story-storage-decode-silhouette {
        width: min(92px, 86%) !important;
    }.story-storage-decode-pack strong {
        font-size: .55rem !important;
    }.story-storage-decode-pack small {
        font-size: .5rem !important;
    }.story-storage-decode-pack .run-setup-primary {
        min-height: 32px !important;
        padding: 4px 4px !important;
        font-size: .48rem !important;
    }.story-storage-decode-choice .story-merchant-card-display {
        width: min(100%, 108px) !important;
        transform: none !important;
    }.story-storage-decode-choice:nth-child(1) .story-merchant-card-display,
.story-storage-decode-choice:nth-child(2) .story-merchant-card-display,
.story-storage-decode-choice:nth-child(3) .story-merchant-card-display {
        transform: none !important;
    }.story-storage-decode-choice .run-setup-primary {
        min-height: 32px !important;
        font-size: .58rem !important;
        padding: 4px 5px !important;
    }
}.story-inventory-overlay,
.story-card-storage-overlay {
    z-index: 11000 !important;
    place-items: stretch !important;
    background:
        radial-gradient(circle at 50% 30%, rgba(215, 189, 130, .10), transparent 38%),
        linear-gradient(180deg, rgba(1, 4, 7, .96), rgba(1, 5, 7, .99)) !important;
    backdrop-filter: none !important;
}.story-inventory-window,
.story-card-storage-window {
    width: 100vw !important;
    height: 100dvh !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    padding:
        max(12px, env(safe-area-inset-top, 0px))
        max(14px, env(safe-area-inset-right, 0px))
        max(12px, env(safe-area-inset-bottom, 0px))
        max(14px, env(safe-area-inset-left, 0px)) !important;
    border: 0 !important;
    background:
        linear-gradient(180deg, rgba(3, 2, 2, .82), rgba(4, 3, 3, .92)),
        radial-gradient(circle at 50% 44%, rgba(0, 0, 0, .24), rgba(0, 0, 0, .54) 72%),
        url("../assets/sprites/ui/windows/decor/story_journal_bg.webp?v=7903c24-20260629075437") center / cover no-repeat,
        #120d08 !important;
}.story-inventory-header {
    min-height: 74px !important;
    align-items: start !important;
    z-index: 2 !important;
}.story-inventory-header h3 {
    margin: 0 !important;
    color: #fff2c4 !important;
    font-size: clamp(1.8rem, 4.2vw, 3.2rem) !important;
    line-height: .9 !important;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .72), 0 0 18px rgba(215, 189, 130, .18) !important;
}.story-inventory-header-actions {
    align-items: start !important;
    gap: 8px !important;
}.story-inventory-close {
    align-self: start !important;
    justify-self: end !important;
    min-width: min(158px, 38vw) !important;
    min-height: 38px !important;
    padding: 6px 14px !important;
    border: 0 !important;
    color: #f3dfb2 !important;
    font-size: .72rem !important;
    background: var(--omen-window-button-medium-secondary) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, .42)) !important;
}.story-inventory-close:hover {
    background: var(--omen-window-button-medium-secondary-hover) center / 100% 100% no-repeat !important;
    transform: translateY(-2px) !important;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .48)) !important;
}.story-inventory-close:active {
    background: var(--omen-window-button-medium-secondary-pressed) center / 100% 100% no-repeat !important;
    transform: translateY(2px) scale(.985) !important;
}.story-inventory-header-actions .story-merchant-balance {
    min-height: 34px !important;
    padding: 6px 11px !important;
    border: 1px solid rgba(75, 48, 28, .30) !important;
    color: #2d1b10 !important;
    background: linear-gradient(145deg, rgba(255, 238, 204, .56), rgba(197, 148, 94, .20)) !important;
    box-shadow: inset 0 0 18px rgba(93, 49, 18, .08) !important;
}.story-inventory-header-actions .story-merchant-balance strong {
    color: #2d1b10 !important;
    text-shadow: none !important;
}.story-inventory-body,
.story-card-storage-body {
    position: relative !important;
    z-index: 1 !important;
    min-height: 0 !important;
    padding: clamp(12px, 1.5vw, 18px) !important;
    border: 1px solid rgba(215, 189, 130, .20) !important;
    background:
        linear-gradient(180deg, rgba(255, 236, 194, .10), rgba(36, 20, 10, .12)),
        rgba(8, 5, 3, .24) !important;
    overflow: hidden !important;
}.story-inventory-section,
.story-storage-shelf {
    border: 1px solid rgba(75, 48, 28, .30) !important;
    color: #2f2117 !important;
    background: linear-gradient(145deg, rgba(255, 238, 204, .56), rgba(197, 148, 94, .20)) !important;
    box-shadow: inset 0 0 18px rgba(93, 49, 18, .08) !important;
}.story-inventory-section h4,
.story-storage-shelf h4 {
    color: #2d1b10 !important;
    text-shadow: none !important;
}.story-inventory-section small,
.story-storage-shelf small,
.story-storage-archive-card small {
    color: rgba(55, 36, 21, .72) !important;
}.story-inventory-slot-card,
.story-storage-archive-card,
.story-storage-decode-pack {
    border-color: rgba(75, 48, 28, .24) !important;
    color: #2f2117 !important;
    background: rgba(255, 242, 210, .30) !important;
    box-shadow: none !important;
}.story-inventory-slot-card strong,
.story-storage-archive-card strong,
.story-storage-decode-pack strong {
    color: #2d1b10 !important;
    text-shadow: none !important;
}.story-inventory-slot-card.is-empty,
.story-storage-archive-card.is-empty {
    opacity: 1 !important;
    background: rgba(255, 242, 210, .18) !important;
}.story-inventory-empty-card,
.story-storage-decode-silhouette {
    border-color: rgba(75, 48, 28, .24) !important;
    background:
        linear-gradient(180deg, rgba(61, 39, 22, .52), rgba(255, 242, 210, .20)),
        radial-gradient(circle at 50% 34%, rgba(35, 83, 76, .14), transparent 44%) !important;
    filter: none !important;
}.story-inventory-card-action,
.story-storage-archive-actions .run-setup-primary,
.story-storage-archive-actions .run-setup-secondary,
.story-storage-decode-pack .run-setup-primary,
.story-storage-decode-choice .run-setup-primary {
    min-height: 34px !important;
    border: 0 !important;
    color: #f3dfb2 !important;
    background: var(--omen-window-button-medium-secondary) center / 100% 100% no-repeat !important;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .24)) !important;
}.story-storage-archive-actions .run-setup-primary,
.story-storage-decode-pack .run-setup-primary,
.story-storage-decode-choice .run-setup-primary {
    background: var(--omen-window-button-medium-primary) center / 100% 100% no-repeat !important;
}.story-inventory-card-action:hover,
.story-storage-archive-actions .run-setup-primary:hover,
.story-storage-archive-actions .run-setup-secondary:hover,
.story-storage-decode-pack .run-setup-primary:hover,
.story-storage-decode-choice .run-setup-primary:hover {
    background: var(--omen-window-button-medium-secondary-hover) center / 100% 100% no-repeat !important;
    transform: translateY(-1px) !important;
}.story-storage-archive-actions .run-setup-primary:hover,
.story-storage-decode-pack .run-setup-primary:hover,
.story-storage-decode-choice .run-setup-primary:hover {
    background: var(--omen-window-button-medium-primary-hover) center / 100% 100% no-repeat !important;
}.story-inventory-card-action:disabled,
.story-storage-archive-actions .run-setup-primary:disabled,
.story-storage-archive-actions .run-setup-secondary:disabled,
.story-storage-decode-pack .run-setup-primary:disabled {
    opacity: .48 !important;
    filter: grayscale(.35) !important;
}.story-inventory-stat-list span,
.story-inventory-buff-list span {
    border-bottom-color: rgba(75, 48, 28, .20) !important;
}.story-inventory-stat-list b,
.story-inventory-buff-list b {
    color: rgba(45, 31, 20, .82) !important;
}.story-inventory-stat-list strong,
.story-inventory-buff-list strong {
    color: #2d1b10 !important;
}.story-inventory-buff-list hr {
    background: rgba(75, 48, 28, .20) !important;
}.story-storage-decode-scene {
    margin: 0 !important;
    border: 0 !important;
    color: #2f2117 !important;
    background: transparent !important;
    box-shadow: none !important;
}.story-card-storage-body-decode .story-storage-decode-pack {
    padding: 0 6px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(-12px) !important;
}.story-card-storage-body-decode .story-storage-decode-silhouette {
    width: min(140px, 82%) !important;
    border: 0 !important;
    box-shadow: none !important;
    background:
        linear-gradient(180deg, rgba(39, 27, 18, .82), rgba(14, 10, 8, .56)),
        radial-gradient(circle at 50% 34%, rgba(35, 83, 76, .12), transparent 44%) !important;
}.story-storage-decode-table {
    opacity: .72 !important;
    filter: drop-shadow(0 16px 24px rgba(61, 35, 18, .26)) !important;
}.story-storage-decode-empty {
    color: rgba(45, 31, 20, .82) !important;
}

@media (max-width: 820px) {.story-inventory-window,
.story-card-storage-window {
        padding:
            max(10px, env(safe-area-inset-top, 0px))
            max(10px, env(safe-area-inset-right, 0px))
            max(10px, env(safe-area-inset-bottom, 0px))
            max(10px, env(safe-area-inset-left, 0px)) !important;
    }.story-inventory-header {
        min-height: 58px !important;
    }.story-inventory-close {
        min-width: 104px !important;
    }.story-inventory-body,
.story-card-storage-body {
        padding: 9px !important;
    }
}.story-inventory-loadout.is-unified {
    grid-template-columns: minmax(0, 2.15fr) minmax(150px, .47fr) !important;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
        "cards stats"
        "cards buffs" !important;
}.story-inventory-section-cards {
    grid-area: cards !important;
}.story-inventory-loadout.is-unified .story-inventory-section {
    opacity: 1 !important;
    transform: none !important;
}.story-inventory-loadout.is-unified .story-inventory-card-row {
    grid-auto-columns: minmax(227px, min(32vw, 322px)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    align-items: stretch !important;
    align-content: stretch !important;
    gap: 5px !important;
    padding: 4px 4px 10px !important;
}.story-inventory-loadout.is-unified .story-inventory-slot-card {
    min-height: 0 !important;
}.story-inventory-loadout.is-unified .story-inventory-slot-card:not(.is-empty) {
    height: 100% !important;
    outline: 0 !important;
    transition:
        filter .16s ease,
        transform .16s ease !important;
}.story-inventory-loadout.is-unified .story-inventory-card-action {
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(4px) !important;
}.story-inventory-loadout.is-unified .story-inventory-slot-card.is-selected {
    filter:
        drop-shadow(0 0 6px rgba(92, 246, 213, .36))
        drop-shadow(0 0 10px rgba(92, 246, 213, .20))
        drop-shadow(0 12px 18px rgba(0, 0, 0, .30)) !important;
    transform: translateY(-1px) !important;
}.story-inventory-loadout.is-unified .story-inventory-slot-card.is-selected .story-small-card-art::after {
    content: none !important;
}.story-inventory-loadout.is-unified .story-inventory-slot-card.is-selected .story-inventory-card-action {
    max-height: 76px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
}.story-inventory-loadout.is-unified .story-small-card-art {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}.story-inventory-loadout.is-unified .story-small-card-art > b {
    font-size: clamp(.46rem, .68vw, .78rem) !important;
}.story-inventory-loadout.is-unified .story-inventory-buff-list {
    padding-right: 9px !important;
    scrollbar-color: rgba(98, 68, 38, .58) rgba(245, 218, 170, .18) !important;
    scrollbar-width: thin !important;
}.story-inventory-loadout.is-unified .story-inventory-buff-list::-webkit-scrollbar {
    width: 8px !important;
}.story-inventory-loadout.is-unified .story-inventory-buff-list::-webkit-scrollbar-track {
    border: 1px solid rgba(91, 56, 31, .22) !important;
    background: rgba(245, 218, 170, .16) !important;
}.story-inventory-loadout.is-unified .story-inventory-buff-list::-webkit-scrollbar-thumb {
    border: 1px solid rgba(255, 236, 185, .28) !important;
    background: linear-gradient(180deg, rgba(98, 68, 38, .82), rgba(52, 31, 18, .82)) !important;
}.story-small-card-description {
    position: absolute !important;
    z-index: 4 !important;
    top: 63.55% !important;
    left: 8.53% !important;
    width: 81.91% !important;
    height: 28.04% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5.2% 5.2% 3% !important;
    box-sizing: border-box !important;
    color: #392112 !important;
    font-size: clamp(.5rem, .72vw, .82rem) !important;
    line-height: 1.08 !important;
    text-align: center !important;
    overflow: hidden !important;
}

@media (max-width: 900px) {.story-inventory-loadout.is-unified {
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(320px, 1.45fr) minmax(150px, .72fr) minmax(150px, .72fr) !important;
        grid-template-areas:
            "cards"
            "stats"
            "buffs" !important;
    }.story-inventory-loadout.is-unified .story-inventory-card-row {
        grid-auto-columns: minmax(209px, min(76vw, 286px)) !important;
        gap: 5px !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    }
}.story-inventory-body {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}.story-inventory-loadout.is-unified {
    gap: clamp(8px, 1.3vw, 14px) !important;
}.story-inventory-loadout.is-unified .story-inventory-section-stats h4,
.story-inventory-loadout.is-unified .story-inventory-section-buffs h4 {
    font-size: clamp(1.06rem, 1.65vw, 1.32rem) !important;
}.story-inventory-loadout.is-unified .story-inventory-section-cards h4 {
    font-size: clamp(1.06rem, 1.65vw, 1.32rem) !important;
}.story-inventory-loadout.is-unified .story-inventory-section-cards small {
    font-size: .94rem !important;
}.story-inventory-loadout.is-unified .story-small-card-art > b {
    font-size: clamp(.46rem, .7vw, .76rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}.story-inventory-loadout.is-unified .story-small-card-description {
    font-size: clamp(.62rem, .88vw, .94rem) !important;
}.story-inventory-loadout.is-unified .story-inventory-stat-list,
.story-inventory-loadout.is-unified .story-inventory-buff-list {
    gap: 8px !important;
}.story-inventory-loadout.is-unified .story-inventory-stat-list span,
.story-inventory-loadout.is-unified .story-inventory-buff-list span {
    padding: 8px 0 !important;
}.story-inventory-loadout.is-unified .story-inventory-stat-list b,
.story-inventory-loadout.is-unified .story-inventory-buff-list b {
    font-size: .96rem !important;
    line-height: 1.18 !important;
}.story-inventory-loadout.is-unified .story-inventory-stat-list strong,
.story-inventory-loadout.is-unified .story-inventory-buff-list strong {
    font-size: .98rem !important;
    line-height: 1.12 !important;
}.story-card-storage-body-archive {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}.story-card-storage-archive.is-tabbed {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 0 !important;
}.story-card-storage-header-actions {
    grid-template-columns: repeat(3, minmax(118px, 158px)) minmax(104px, 158px) !important;
    align-items: start !important;
    justify-content: end !important;
    gap: 8px !important;
}.story-card-storage-header-actions .story-card-storage-type-tabs {
    display: grid !important;
    grid-column: 1 / span 3 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    gap: 8px !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
}.story-card-storage-header-actions .story-card-storage-tab {
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 6px 14px !important;
    border: 0 !important;
    color: #f1dfba !important;
    background: var(--omen-window-button-medium-secondary) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, .42)) !important;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, .92),
        0 0 10px rgba(92, 246, 213, .12) !important;
    text-transform: uppercase !important;
}.story-card-storage-header-actions .story-card-storage-tab:hover,
.story-card-storage-header-actions .story-card-storage-tab.is-active {
    color: #f1dfba !important;
    background: var(--omen-window-button-medium-secondary-hover) center / 100% 100% no-repeat !important;
    transform: translateY(-2px) !important;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .48)) !important;
}.story-card-storage-header-actions .story-card-storage-tab:active {
    background: var(--omen-window-button-medium-secondary-pressed) center / 100% 100% no-repeat !important;
    transform: translateY(2px) scale(.985) !important;
}.story-card-storage-header-actions .story-inventory-close {
    grid-column: 4 !important;
    width: 100% !important;
    min-width: 0 !important;
}.story-card-storage-header-actions .story-merchant-balance {
    grid-column: 4 !important;
    justify-self: end !important;
    width: auto !important;
}.story-card-storage-archive.is-tabbed .story-storage-scroll-row::-webkit-scrollbar {
    height: 8px !important;
}.story-card-storage-archive.is-tabbed .story-storage-scroll-row::-webkit-scrollbar-track {
    border: 1px solid rgba(91, 56, 31, .22) !important;
    background: rgba(245, 218, 170, .16) !important;
}.story-card-storage-archive.is-tabbed .story-storage-scroll-row::-webkit-scrollbar-thumb {
    border: 1px solid rgba(255, 236, 185, .28) !important;
    background: linear-gradient(90deg, rgba(98, 68, 38, .82), rgba(52, 31, 18, .82)) !important;
}.story-card-storage-archive.is-tabbed .story-storage-shelf {
    min-height: 0 !important;
    display: grid !important;
    align-items: center !important;
    opacity: 1 !important;
    transform: none !important;
    cursor: default !important;
}.story-card-storage-archive.is-tabbed .story-storage-shelf header {
    display: none !important;
}.story-card-storage-archive.is-tabbed .story-storage-scroll-row {
    grid-auto-columns: minmax(304px, 348px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-auto-flow: column !important;
    align-items: center !important;
    align-content: center !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 10px 8px 22px 2px !important;
    scrollbar-color: rgba(98, 68, 38, .58) rgba(245, 218, 170, .18) !important;
    scrollbar-width: thin !important;
}.story-card-storage-archive.is-tabbed .story-storage-archive-card {
    grid-template-rows: minmax(0, 1fr) minmax(34px, auto) minmax(42px, auto) !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    align-content: stretch !important;
    overflow: visible !important;
    gap: 3px !important;
}.story-card-storage-archive.is-tabbed .story-small-card-art {
    width: min(260px, 92%) !important;
    height: auto !important;
    aspect-ratio: 387 / 642 !important;
    max-width: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    align-self: end !important;
    justify-self: center !important;
}.story-card-storage-archive.is-tabbed .story-small-card-art > b {
    font-size: clamp(.64rem, .9vw, .98rem) !important;
    line-height: .94 !important;
}.story-card-storage-archive.is-tabbed .story-small-card-description {
    font-size: clamp(.82rem, 1.05vw, 1.14rem) !important;
    line-height: 1.08 !important;
}.story-card-storage-archive.is-tabbed .story-storage-archive-actions {
    max-height: 76px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
}

@media (max-width: 900px) {.story-card-storage-header-actions {
        grid-template-columns: repeat(3, minmax(96px, 1fr)) minmax(92px, 1fr) !important;
    }.story-card-storage-archive.is-tabbed .story-storage-scroll-row {
        grid-auto-columns: minmax(258px, min(72vw, 302px)) !important;
        grid-template-rows: minmax(0, 1fr) !important;
    }.story-card-storage-archive.is-tabbed .story-storage-archive-card {
        min-height: 0 !important;
    }.story-card-storage-archive.is-tabbed .story-small-card-art {
        width: min(228px, 92%) !important;
    }
}

@media (orientation: portrait) {.story-card-storage-header-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }.story-card-storage-header-actions .story-card-storage-type-tabs {
        grid-column: 1 / -1 !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }.story-card-storage-header-actions .story-inventory-close,
.story-card-storage-header-actions .story-merchant-balance {
        grid-column: 2 !important;
        justify-self: end !important;
        width: auto !important;
    }.story-card-storage-archive.is-tabbed .story-storage-scroll-row {
        grid-auto-columns: minmax(244px, min(78vw, 292px)) !important;
        grid-template-rows: minmax(0, 1fr) !important;
    }.story-card-storage-archive.is-tabbed .story-storage-archive-card {
        min-height: 0 !important;
    }.story-card-storage-archive.is-tabbed .story-small-card-art {
        width: min(218px, 92%) !important;
    }
}

@media (orientation: portrait) {.story-inventory-loadout.is-unified {
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(360px, 1.55fr) minmax(160px, .72fr) minmax(160px, .72fr) !important;
        grid-template-areas:
            "cards"
            "stats"
            "buffs" !important;
        overflow-y: auto !important;
    }.story-inventory-loadout.is-unified .story-inventory-card-row {
        grid-auto-columns: minmax(231px, min(82vw, 321px)) !important;
        gap: 5px !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Local card-window primitives. These classes are shared only by story inventory,
   card storage, decoding, and Kant's shop. */
.story-inventory-overlay,
.story-card-storage-overlay,
.story-merchant-overlay {
    z-index: 11000 !important;
}

.story-activities-board-overlay {
    z-index: 11000 !important;
}

.story-activities-board-window {
    width: 100vw !important;
    height: 100dvh !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    padding:
        max(12px, env(safe-area-inset-top, 0px))
        max(14px, env(safe-area-inset-right, 0px))
        max(10px, env(safe-area-inset-bottom, 0px))
        max(14px, env(safe-area-inset-left, 0px)) !important;
    background: var(--omen-window-shell-bg) !important;
}

.story-activities-board-header {
    min-height: 52px !important;
}

.story-activities-board-actions {
    display: grid !important;
    grid-template-columns: minmax(112px, 148px) !important;
    justify-items: end !important;
    align-items: start !important;
}

.story-activities-board-close {
    width: 100% !important;
}

.story-activities-board-body {
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: clamp(10px, 1.4vw, 18px) !important;
    padding: clamp(12px, 1.8vw, 24px) !important;
    overflow: hidden !important;
}

.story-activities-board-window .story-mission-board {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-content: center !important;
    gap: clamp(10px, 1.4vw, 18px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: auto !important;
    scrollbar-color: rgba(215, 189, 130, .58) rgba(6, 8, 10, .35) !important;
    scrollbar-width: thin !important;
}

.story-activities-board-window .story-mission-board::-webkit-scrollbar {
    width: 8px !important;
}

.story-activities-board-window .story-mission-board::-webkit-scrollbar-track {
    background: rgba(245, 218, 170, .12) !important;
}

.story-activities-board-window .story-mission-board::-webkit-scrollbar-thumb {
    background: rgba(215, 189, 130, .54) !important;
}

.story-activities-board-window .modes-clean-card.story-hub-card {
    min-height: clamp(180px, 28vh, 280px) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 10px !important;
    padding: clamp(16px, 2vw, 26px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--omen-window-paper-ink) !important;
    background: var(--omen-window-card-wide) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .34)) !important;
    text-align: center !important;
}

.story-activities-board-window .modes-clean-card.story-hub-card:hover:not(:disabled) {
    transform: translateY(-3px) !important;
    filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .42)) !important;
}

.story-activities-board-window .modes-clean-card.story-hub-card:disabled {
    opacity: .52 !important;
    filter: grayscale(.25) drop-shadow(0 12px 18px rgba(0, 0, 0, .24)) !important;
}

.story-activities-board-window .modes-clean-icon {
    width: clamp(42px, 5vw, 70px) !important;
    height: clamp(42px, 5vw, 70px) !important;
}

.story-activities-board-window .modes-clean-copy {
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.story-activities-board-window .modes-clean-copy strong {
    color: #3a1d0b !important;
    font-family: var(--omen-font-display) !important;
    font-size: clamp(1.05rem, 1.55vw, 1.55rem) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}

.story-activities-board-window .modes-clean-copy small {
    color: var(--omen-window-paper-muted) !important;
    font-size: clamp(.88rem, 1.05vw, 1.05rem) !important;
    line-height: 1.35 !important;
}

.story-activities-board-window .modes-clean-arrow {
    opacity: .78 !important;
}

.story-activities-board-window .story-activities-board-menu {
    grid-template-columns: repeat(2, minmax(180px, 300px)) !important;
    justify-content: center !important;
    align-content: center !important;
    align-items: center !important;
    overflow: visible !important;
}

.story-activities-board-window [data-story-view="city"] {
    display: none !important;
}

.story-activities-board-button {
    min-height: 42px !important;
    padding: 9px 18px !important;
    justify-content: center !important;
    text-align: center !important;
}

.story-activities-board-button .modes-clean-icon,
.story-activities-board-button .modes-clean-arrow,
.story-activities-board-button small {
    display: none !important;
}

.story-activities-board-button .modes-clean-copy {
    display: contents !important;
}

.story-activities-board-button .modes-clean-copy strong {
    color: inherit !important;
    font: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
}

@media (max-width: 820px), (orientation: portrait) {
    .story-activities-board-body {
        grid-template-rows: minmax(0, 1fr) !important;
        padding: clamp(8px, 3vw, 14px) !important;
        overflow: hidden !important;
    }

    .story-activities-board-window .story-mission-board {
        grid-template-columns: 1fr !important;
        align-content: start !important;
        padding-right: 4px !important;
        overflow-y: auto !important;
    }

    .story-activities-board-window .story-activities-board-menu {
        grid-template-columns: minmax(160px, min(100%, 300px)) !important;
        justify-content: center !important;
        align-content: center !important;
    }

    .story-activities-board-window .modes-clean-card.story-hub-card {
        min-height: 148px !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-rows: auto !important;
        justify-items: start !important;
        text-align: left !important;
    }
}

.story-merchant-window {
    width: 100vw !important;
    height: 100dvh !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    padding:
        max(12px, env(safe-area-inset-top, 0px))
        max(14px, env(safe-area-inset-right, 0px))
        max(10px, env(safe-area-inset-bottom, 0px))
        max(14px, env(safe-area-inset-left, 0px)) !important;
    background:
        url("../assets/sprites/ui/windows/decor/merchant_shop_kant_bg.webp?v=7903c24-20260629075437") center / cover no-repeat,
        #100905 !important;
}

.story-merchant-header {
    min-height: 52px !important;
}

.story-inventory-header-actions {
    align-items: start !important;
}

.story-merchant-header-actions {
    display: grid !important;
    grid-template-columns: minmax(112px, 148px) !important;
    justify-items: end !important;
    align-items: start !important;
    gap: 6px !important;
}

.story-merchant-header-actions .story-merchant-title-close {
    width: 100% !important;
}

.story-merchant-header-actions .story-merchant-balance {
    justify-self: end !important;
}

.story-merchant-balance {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-width: 0 !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--omen-story-warm-label-bright, #f0cf8a) !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    line-height: 1 !important;
}

.story-merchant-balance::before,
.story-merchant-balance::after {
    content: none !important;
    display: none !important;
}

.story-merchant-balance img {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    image-rendering: pixelated !important;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)) !important;
}

.story-merchant-balance strong {
    color: var(--omen-story-warm-label-bright, #f0cf8a) !important;
    font-family: var(--omen-font-display, Georgia, serif) !important;
    font-size: clamp(.86rem, 1.12vw, 1rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .74) !important;
}

.story-merchant-scene {
    position: relative !important;
    min-height: 0 !important;
    margin: 0 calc(-1 * max(14px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(14px, env(safe-area-inset-left, 0px))) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.story-merchant-table {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -8% !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    pointer-events: none !important;
    user-select: none !important;
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .38)) !important;
    display: none !important;
}

.story-merchant-offers {
    position: absolute !important;
    inset: 6% 15% 4% !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: end !important;
    gap: clamp(14px, 2.2vw, 34px) !important;
}

.story-merchant-offer {
    min-width: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    justify-items: center !important;
    align-items: end !important;
    gap: 10px !important;
}

.story-merchant-card-display {
    width: min(100%, 250px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 387 / 642 !important;
    display: grid !important;
    place-items: stretch !important;
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .34)) !important;
}

.story-merchant-window .story-merchant-card-display {
    position: relative !important;
    width: clamp(223px, 17.7vw, 307px) !important;
    max-width: 100% !important;
    overflow: visible !important;
    filter: none !important;
}

.story-merchant-window .story-merchant-card-display::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    inset: -4% -5% 0 !important;
    border-radius: 4px !important;
    background:
        radial-gradient(ellipse at 50% 56%, rgba(0, 0, 0, .72), rgba(0, 0, 0, .40) 48%, transparent 72%),
        linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .58)) !important;
    filter: blur(2px) !important;
    pointer-events: none !important;
}

.story-merchant-window .story-merchant-offer:nth-child(1) .story-merchant-card-display::before {
    inset: -4% -5% 0 0 !important;
}

.story-merchant-window .story-merchant-offer:nth-child(2) .story-merchant-card-display::before {
    inset: -4% -5% 0 !important;
}

.story-merchant-window .story-merchant-offer:nth-child(3) .story-merchant-card-display::before {
    inset: -4% 0 0 -5% !important;
}

.story-merchant-card-art,
.story-small-card-art {
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 387 / 642 !important;
    --story-card-title-x: var(--card-title-x, 18.86%);
    --story-card-title-y: var(--card-title-y, 5.76%);
    --story-card-title-w: var(--card-title-w, 62.27%);
    --story-card-title-h: var(--card-title-h, 5.76%);
    --story-card-description-x: var(--card-description-x, 8.53%);
    --story-card-description-y: var(--card-description-y, 63.55%);
    --story-card-description-w: var(--card-description-w, 81.91%);
    --story-card-description-h: var(--card-description-h, 28.04%);
}

.story-merchant-card-art {
    width: 100% !important;
    height: 100% !important;
}

.story-merchant-window .story-merchant-card-art {
    z-index: 1 !important;
}

.story-merchant-layered-art {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    pointer-events: none !important;
    user-select: none !important;
}

.story-merchant-card-medallion {
    position: absolute !important;
    top: 11.26% !important;
    left: 9.25% !important;
    z-index: 0 !important;
    display: block !important;
    width: 81.5% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    filter: none !important;
    pointer-events: none !important;
    user-select: none !important;
}

.story-merchant-card-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    pointer-events: none !important;
    user-select: none !important;
}

.story-merchant-card-fallback {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: grid !important;
    place-items: center !important;
    color: #2d1b10 !important;
    background: rgba(255, 242, 210, .30) !important;
    font-family: var(--omen-font-display, Georgia, serif) !important;
    font-size: clamp(2rem, 5vw, 4rem) !important;
}

.story-merchant-card-name,
.story-small-card-art > b {
    position: absolute !important;
    z-index: 4 !important;
    top: var(--story-card-title-y) !important;
    left: var(--story-card-title-x) !important;
    width: var(--story-card-title-w) !important;
    height: var(--story-card-title-h) !important;
    max-width: var(--story-card-title-w) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    color: #2b140d !important;
    font-family: var(--omen-font-body, Georgia, serif) !important;
    font-size: clamp(.46rem, .76vw, .76rem) !important;
    line-height: .98 !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

.story-merchant-card-description,
.story-small-card-description {
    position: absolute !important;
    z-index: 4 !important;
    top: var(--story-card-description-y) !important;
    left: var(--story-card-description-x) !important;
    width: var(--story-card-description-w) !important;
    height: var(--story-card-description-h) !important;
    max-width: var(--story-card-description-w) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 5.2% 5.2% 3% !important;
    overflow: hidden !important;
    color: #392112 !important;
    font-family: var(--omen-font-body, Georgia, serif) !important;
    font-size: clamp(.66rem, .92vw, 1rem) !important;
    line-height: 1.08 !important;
    text-align: center !important;
}

.story-merchant-price-tag {
    width: 222px !important;
    max-width: 88% !important;
    display: grid !important;
    justify-items: center !important;
    gap: 3px !important;
    color: var(--omen-window-paper-ink, #261407) !important;
    text-align: center !important;
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .44)) !important;
}

.story-merchant-price-tag strong {
    display: none !important;
}

.story-merchant-price-tag > span {
    color: var(--omen-story-warm-label, #8b5528) !important;
    font-size: .72rem !important;
    line-height: 1 !important;
    text-shadow: 0 1px 1px rgba(255, 236, 185, .22) !important;
}

.story-merchant-price-tag .run-setup-primary {
    width: 100% !important;
    min-height: 40px !important;
    padding: 6px 12px !important;
    font-size: clamp(.68rem, .82vw, .78rem) !important;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .38)) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.story-merchant-price-tag .run-setup-primary img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    image-rendering: pixelated !important;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .48)) !important;
}

.story-merchant-buy-price {
    color: #f1dfba !important;
    font-family: var(--omen-font-display, Georgia, serif) !important;
    font-size: clamp(.82rem, 1vw, 1rem) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .86) !important;
}

.story-card-storage-archive.is-tabbed .story-storage-scroll-row {
    height: 100% !important;
    justify-content: safe center !important;
    align-items: stretch !important;
    align-content: stretch !important;
    gap: 12px !important;
    padding: 2px 8px 12px !important;
    overscroll-behavior-x: contain !important;
}

@media (hover: hover) and (pointer: fine) {
    .story-card-storage-archive.is-tabbed .story-storage-scroll-row {
        cursor: grab !important;
        overflow-x: scroll !important;
    }

    .story-card-storage-archive.is-tabbed .story-storage-scroll-row.is-drag-scrolling {
        cursor: grabbing !important;
        user-select: none !important;
    }
}

.story-card-storage-archive.is-tabbed .story-storage-archive-card {
    overflow: hidden !important;
    grid-template-rows: minmax(0, 1fr) auto auto !important;
}

.story-card-storage-archive.is-tabbed .story-small-card-art {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    align-self: center !important;
    justify-self: center !important;
}

.story-card-storage-archive.is-tabbed .story-storage-archive-actions {
    align-self: end !important;
}

.story-card-storage-archive.is-tabbed .story-storage-archive-copy {
    min-height: 24px !important;
}

@media (max-width: 900px) {
    .story-merchant-offers {
        inset: 7% 4% 5% !important;
        gap: 10px !important;
    }

    .story-merchant-card-display {
        width: min(100%, 195px) !important;
    }

    .story-merchant-price-tag {
        width: min(94%, 190px) !important;
    }
}

@media (orientation: portrait) {
    .story-merchant-window {
        grid-template-rows: auto minmax(0, 1fr) !important;
    }

    .story-merchant-header-actions {
        display: grid !important;
        justify-items: end !important;
    }

    .story-merchant-offers {
        inset: 8% 2% 5% !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .story-merchant-card-display {
        width: min(100%, 28.8vw) !important;
    }

    .story-merchant-card-name,
    .story-small-card-art > b {
        font-size: clamp(.34rem, 1.45vw, .54rem) !important;
    }

    .story-merchant-card-description,
    .story-small-card-description {
        font-size: clamp(.42rem, 1.75vw, .64rem) !important;
    }

    .story-merchant-price-tag {
        width: min(100%, 29vw) !important;
    }

    .story-merchant-price-tag > span {
        display: none !important;
    }

    .story-merchant-price-tag .run-setup-primary {
        min-height: 32px !important;
        padding: 4px 5px !important;
        font-size: .56rem !important;
    }
}

/* Final story-card economy pass: keep coin counters and layered cards local to these windows. */
.story-merchant-header-actions .story-merchant-balance,
.story-inventory-header-actions .story-merchant-balance,
.story-card-storage-header-actions .story-merchant-balance {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--omen-story-warm-label-bright, #f0cf8a) !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    line-height: 1 !important;
}

.story-merchant-header-actions .story-merchant-balance::before,
.story-merchant-header-actions .story-merchant-balance::after,
.story-inventory-header-actions .story-merchant-balance::before,
.story-inventory-header-actions .story-merchant-balance::after,
.story-card-storage-header-actions .story-merchant-balance::before,
.story-card-storage-header-actions .story-merchant-balance::after {
    content: none !important;
    display: none !important;
}

.story-merchant-header-actions .story-merchant-balance img,
.story-inventory-header-actions .story-merchant-balance img,
.story-card-storage-header-actions .story-merchant-balance img {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    image-rendering: pixelated !important;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)) !important;
}

.story-merchant-header-actions .story-merchant-balance strong,
.story-inventory-header-actions .story-merchant-balance strong,
.story-card-storage-header-actions .story-merchant-balance strong {
    color: var(--omen-story-warm-label-bright, #f0cf8a) !important;
    font-family: var(--omen-font-display, Georgia, serif) !important;
    font-size: clamp(.86rem, 1.12vw, 1rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .74) !important;
}

.story-card-storage-archive.is-tabbed,
.story-card-storage-archive.is-tabbed .story-storage-shelf {
    height: 100% !important;
    min-height: 0 !important;
}

.story-card-storage-window {
    max-height: 100dvh !important;
    overflow: hidden !important;
}

.story-card-storage-window:not(.story-card-decode-window) {
    background:
        url("../assets/sprites/ui/windows/decor/card_storage_archive_bg.webp?v=7903c24-20260629075437") center / cover no-repeat,
        #100905 !important;
}

.story-card-decode-window {
    background:
        url("../assets/sprites/ui/windows/decor/card_storage_archive_bg.webp?v=7903c24-20260629075437") center / cover no-repeat,
        #100905 !important;
}

.story-card-decode-window .story-card-storage-body-decode {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.story-card-decode-window .story-storage-decode-table {
    display: none !important;
}

.story-card-decode-window .story-storage-decode-packs {
    inset: 4% 3% 5% !important;
    grid-template-columns: repeat(4, minmax(0, 250px)) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(3px, .7vw, 8px) !important;
}

.story-card-decode-window .story-storage-decode-pack {
    min-height: 0 !important;
    align-content: center !important;
    gap: 5px !important;
}

.story-card-decode-window .story-storage-decode-silhouette {
    width: min(250px, 100%) !important;
}

.story-card-decode-window .story-storage-decode-pack .run-setup-primary {
    width: min(190px, 86%) !important;
    min-height: 32px !important;
}

.story-card-decode-window .story-storage-decode-choices {
    inset: 4% 3% 5% !important;
    gap: clamp(2px, .7vw, 8px) !important;
    grid-template-columns: repeat(3, 250px) !important;
    justify-content: center !important;
    align-items: center !important;
}

.story-card-decode-window .story-storage-decode-choice {
    grid-template-rows: auto auto !important;
    align-content: center !important;
    gap: 5px !important;
}

.story-card-decode-window .story-storage-decode-choice .story-merchant-card-display {
    width: 250px !important;
    max-width: none !important;
}

.story-card-decode-window .story-storage-decode-choice .run-setup-primary {
    width: min(190px, 86%) !important;
    min-height: 32px !important;
}

.story-clean-overlay-card-upgrade .story-clean-modal {
    background:
        linear-gradient(180deg, rgba(5, 3, 2, .16), rgba(5, 3, 2, .36)),
        url("../assets/sprites/ui/windows/decor/card_keeper_workshop_bg.webp?v=7903c24-20260629075437") center / cover no-repeat,
        #100905 !important;
}

.story-card-storage-window .story-card-storage-body,
.story-card-storage-window .story-card-storage-body-archive,
.story-card-storage-window .story-card-storage-archive,
.story-card-storage-window .story-storage-shelf,
.story-card-storage-window .story-storage-scroll-row {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.story-card-storage-body-archive {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.story-card-storage-archive.is-tabbed .story-storage-shelf {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    overflow: hidden !important;
}

.story-card-storage-archive.is-tabbed .story-storage-scroll-row {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    grid-auto-columns: minmax(304px, 348px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    align-content: stretch !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 8px 12px !important;
}

.story-card-storage-archive.is-tabbed .story-storage-archive-card {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    justify-items: center !important;
    overflow: hidden !important;
    gap: 4px !important;
}

.story-card-storage-archive.is-tabbed .story-small-card-art {
    width: min(250px, 88%) !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 387 / 642 !important;
    align-self: center !important;
    justify-self: center !important;
}

.story-card-storage-archive.is-tabbed .story-storage-archive-copy {
    min-height: 0 !important;
    align-self: center !important;
    line-height: 1 !important;
}

.story-card-storage-archive.is-tabbed .story-storage-archive-actions {
    min-height: 0 !important;
    max-height: none !important;
    width: min(190px, 86%) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    align-self: start !important;
    justify-self: center !important;
    overflow: hidden !important;
}

.story-card-storage-archive.is-tabbed .story-storage-archive-actions .run-setup-primary,
.story-card-storage-archive.is-tabbed .story-storage-archive-actions .run-setup-secondary {
    min-height: 32px !important;
    padding: 4px 8px !important;
    font-size: clamp(.54rem, .76vw, .68rem) !important;
    line-height: 1 !important;
}

@media (max-width: 900px) {
    .story-card-decode-window .story-storage-decode-packs {
        inset: 4% 2% 5% !important;
        grid-template-columns: repeat(4, minmax(0, 222px)) !important;
        gap: 3px !important;
    }

    .story-card-decode-window .story-storage-decode-silhouette {
        width: min(222px, 100%) !important;
    }

    .story-card-decode-window .story-storage-decode-choices {
        inset: 4% 2% 5% !important;
        gap: 3px !important;
        grid-template-columns: repeat(3, 222px) !important;
    }

    .story-card-decode-window .story-storage-decode-choice .story-merchant-card-display {
        width: 222px !important;
    }

    .story-card-storage-archive.is-tabbed .story-storage-scroll-row {
        grid-auto-columns: minmax(246px, min(70vw, 292px)) !important;
    }

    .story-card-storage-archive.is-tabbed .story-small-card-art {
        width: min(222px, 88%) !important;
        height: auto !important;
    }
}

@media (orientation: portrait) {
    .story-card-decode-window .story-storage-decode-packs {
        inset: 4% 1.5% 5% !important;
        grid-template-columns: repeat(4, minmax(0, 206px)) !important;
        gap: 2px !important;
    }

    .story-card-decode-window .story-storage-decode-silhouette {
        width: min(206px, 100%) !important;
    }

    .story-card-decode-window .story-storage-decode-choices {
        inset: 4% 1.5% 5% !important;
        gap: 2px !important;
        grid-template-columns: repeat(3, 206px) !important;
    }

    .story-card-decode-window .story-storage-decode-choice .story-merchant-card-display {
        width: 206px !important;
        transform: none !important;
    }

    .story-card-decode-window .story-storage-decode-choice:nth-child(1) .story-merchant-card-display,
    .story-card-decode-window .story-storage-decode-choice:nth-child(2) .story-merchant-card-display,
    .story-card-decode-window .story-storage-decode-choice:nth-child(3) .story-merchant-card-display {
        transform: none !important;
    }

    .story-card-storage-archive.is-tabbed .story-storage-scroll-row {
        grid-auto-columns: minmax(210px, min(72vw, 246px)) !important;
    }

    .story-card-storage-archive.is-tabbed .story-small-card-art {
        width: min(206px, 88%) !important;
        height: auto !important;
    }
}

/* Story reliquary: equipped relics and the 5x4 relic bag inside the hero inventory. */
.story-inventory-loadout.is-unified.has-reliquary {
    grid-template-columns: minmax(0, 2.1fr) minmax(168px, .5fr) !important;
    grid-template-rows: minmax(230px, 1fr) minmax(116px, .42fr) minmax(170px, .68fr) !important;
    grid-template-areas:
        "cards stats"
        "reliquary stats"
        "relicbag buffs" !important;
    overflow: hidden !important;
}

.story-inventory-loadout.is-unified.has-reliquary .story-inventory-section {
    min-width: 0 !important;
    min-height: 0 !important;
}

.story-inventory-section-reliquary {
    grid-area: reliquary !important;
}

.story-inventory-section-relic-bag {
    grid-area: relicbag !important;
}

.story-reliquary-slots {
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: clamp(5px, .7vw, 10px) !important;
    align-items: stretch !important;
    overflow: hidden !important;
}

.story-relic-slot,
.story-relic-bag-slot {
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(91, 56, 31, .34) !important;
    background:
        linear-gradient(180deg, rgba(255, 238, 190, .13), rgba(49, 31, 20, .17)),
        rgba(12, 8, 5, .10) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 235, 188, .08) !important;
    color: #2f2117 !important;
}

.story-relic-slot {
    display: grid !important;
    grid-template-rows: minmax(34px, 1fr) auto auto auto !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 5px !important;
    overflow: hidden !important;
}

.story-relic-slot b,
.story-relic-bag-info b {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #2f2117 !important;
    font-size: clamp(.64rem, .86vw, .82rem) !important;
    line-height: 1.05 !important;
}

.story-relic-slot small,
.story-relic-bag-info small,
.story-relic-bag-info em {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: rgba(47, 33, 23, .76) !important;
    font-size: clamp(.56rem, .72vw, .68rem) !important;
    line-height: 1.05 !important;
    font-style: normal !important;
}

.story-relic-medallion,
.story-relic-empty-medallion {
    width: clamp(34px, 3.8vw, 52px) !important;
    aspect-ratio: 1 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    border: 2px solid color-mix(in srgb, var(--relic-color, #d2d0c8) 70%, #2b190d) !important;
    background:
        radial-gradient(circle at 38% 28%, rgba(255, 245, 205, .85), rgba(255, 245, 205, .12) 28%, transparent 32%),
        radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--relic-color, #d2d0c8) 78%, #2b190d), #1b100a 72%) !important;
    box-shadow:
        0 0 10px color-mix(in srgb, var(--relic-color, #d2d0c8) 42%, transparent),
        inset 0 0 0 2px rgba(0, 0, 0, .28) !important;
    color: #fff2cf !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .75) !important;
    font-size: clamp(1rem, 1.7vw, 1.55rem) !important;
    line-height: 1 !important;
}

.story-relic-empty-medallion {
    opacity: .52 !important;
    filter: saturate(.55) !important;
}

.story-relic-action {
    min-height: 25px !important;
    width: min(118px, 100%) !important;
    padding: 3px 8px !important;
    font-size: clamp(.54rem, .7vw, .66rem) !important;
    line-height: 1 !important;
}

.story-relic-bag-grid {
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(4px, .55vw, 8px) !important;
    overflow: hidden !important;
}

.story-relic-bag-slot {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 5px !important;
    overflow: hidden !important;
}

.story-relic-bag-slot.is-empty {
    display: grid !important;
    place-items: center !important;
    color: rgba(47, 33, 23, .34) !important;
    font-family: Georgia, serif !important;
    font-size: .9rem !important;
}

.story-relic-bag-slot .story-relic-medallion {
    width: clamp(28px, 3vw, 42px) !important;
    font-size: clamp(.88rem, 1.35vw, 1.18rem) !important;
}

.story-relic-bag-info {
    min-width: 0 !important;
    display: grid !important;
    gap: 1px !important;
}

@media (max-width: 900px) {
    .story-inventory-loadout.is-unified.has-reliquary {
        grid-template-columns: 1fr !important;
        grid-template-rows:
            minmax(300px, 1.25fr)
            minmax(118px, .42fr)
            minmax(190px, .78fr)
            minmax(150px, .62fr)
            minmax(150px, .62fr) !important;
        grid-template-areas:
            "cards"
            "reliquary"
            "relicbag"
            "stats"
            "buffs" !important;
        overflow-y: auto !important;
    }

    .story-reliquary-slots {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .story-relic-bag-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (orientation: portrait) {
    .story-inventory-loadout.is-unified.has-reliquary {
        grid-template-columns: 1fr !important;
        grid-template-rows:
            minmax(330px, 1.25fr)
            minmax(128px, .45fr)
            minmax(220px, .82fr)
            minmax(165px, .62fr)
            minmax(165px, .62fr) !important;
        grid-template-areas:
            "cards"
            "reliquary"
            "relicbag"
            "stats"
            "buffs" !important;
        overflow-y: auto !important;
    }

    .story-relic-bag-slot {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    .story-relic-bag-slot .story-relic-action {
        grid-column: 1 / -1 !important;
        justify-self: center !important;
    }
}

/* Side reliquary inventory used during story exploration. */
.story-relic-inventory-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 11200 !important;
    display: flex !important;
    justify-content: flex-end !important;
    pointer-events: none !important;
    background: transparent !important;
}

.story-relic-panel {
    box-sizing: border-box !important;
    width: var(--story-relic-panel-width, clamp(280px, 34vw, 380px)) !important;
    height: 100dvh !important;
    display: grid !important;
    grid-template-rows: auto minmax(212px, .96fr) minmax(240px, 1fr) !important;
    gap: 10px !important;
    padding:
        max(9px, env(safe-area-inset-top, 0px))
        max(8px, env(safe-area-inset-right, 0px))
        max(10px, env(safe-area-inset-bottom, 0px))
        10px !important;
    border-left: 2px solid rgba(101, 225, 218, .8) !important;
    background:
        linear-gradient(180deg, rgba(24, 20, 14, .92), rgba(9, 8, 6, .96)),
        url("../assets/sprites/ui/windows/decor/story_inventory_bg.webp?v=7903c24-20260629075437") center / cover no-repeat !important;
    box-shadow: -18px 0 28px rgba(0, 0, 0, .44) !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
}

.story-relic-panel-header {
    display: grid !important;
    grid-template-columns: minmax(86px, auto) minmax(0, 1fr) minmax(86px, auto) !important;
    align-items: center !important;
    gap: 6px !important;
}

.story-companion-relic-panel-header {
    grid-template-columns: minmax(86px, auto) minmax(0, 1fr) minmax(86px, auto) !important;
}

.story-companion-relic-title {
    min-width: 0 !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    overflow: hidden !important;
    color: #f3dfb2 !important;
    font: 800 .76rem/1.1 var(--omen-font-body, serif) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .72) !important;
}

.story-relic-panel-button,
.story-relic-panel-small-action {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 25px !important;
    padding: 3px 8px !important;
    border: 1px solid rgba(157, 117, 60, .58) !important;
    background: linear-gradient(180deg, rgba(38, 30, 22, .96), rgba(9, 8, 7, .98)) !important;
    color: rgba(255, 232, 177, .92) !important;
    font: 800 .62rem/1 var(--omen-font-body, serif) !important;
    letter-spacing: .03em !important;
    text-transform: lowercase !important;
}

.story-relic-panel-button {
    min-width: 86px !important;
    min-height: 30px !important;
    padding: 6px 12px !important;
    border-color: rgba(219, 170, 83, .62) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, rgba(42, 32, 22, .98), rgba(10, 8, 6, .98)) !important;
    color: #f6dfaa !important;
    font-size: .68rem !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 238, 190, .06),
        0 4px 10px rgba(0, 0, 0, .28) !important;
}

.story-relic-panel-detail-button {
    grid-column: 1 !important;
    justify-self: start !important;
}

.story-relic-panel-close-button {
    grid-column: 3 !important;
    justify-self: end !important;
}

.story-relic-panel-top,
.story-relic-panel-bag {
    min-width: 0 !important;
    min-height: 0 !important;
}

.story-relic-panel-slots {
    height: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
}

.story-relic-panel-slot {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: minmax(54px, 1fr) auto auto auto !important;
    place-items: center !important;
    gap: 2px !important;
    padding: 5px !important;
    border: 0 !important;
    background: transparent !important;
    color: #f3dfb2 !important;
    text-align: center !important;
}

.story-relic-panel-slot.is-drag-over {
    outline: 2px solid rgba(101, 225, 218, .9) !important;
    outline-offset: -2px !important;
    background: rgba(101, 225, 218, .08) !important;
}

.story-relic-panel-slot b,
.story-relic-panel-slot small {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .72) !important;
}

.story-relic-panel-slot b {
    color: #f3dfb2 !important;
    font-size: .78rem !important;
}

.story-relic-panel-slot small {
    color: rgba(243, 223, 178, .72) !important;
    font-size: .62rem !important;
}

.story-relic-panel .story-relic-medallion,
.story-relic-panel .story-relic-empty-medallion {
    width: clamp(54px, 7.2vw, 76px) !important;
    max-width: 100% !important;
}

.story-relic-panel-medallion-button {
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
}

.story-relic-panel-medallion-button:hover {
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--relic-color, #d2d0c8) 55%, transparent)) !important;
}

.story-relic-panel-medallion-button[data-story-relic-drag],
.story-relic-panel-medallion-button[data-story-relic-chest-drag] {
    touch-action: none !important;
}

.story-relic-panel-medallion-button.is-touch-dragging {
    opacity: .48 !important;
}

.story-relic-touch-ghost {
    position: fixed !important;
    z-index: 13000 !important;
    display: grid !important;
    place-items: center !important;
    width: 62px !important;
    height: 62px !important;
    margin: -31px 0 0 -31px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
    opacity: .94 !important;
    filter:
        drop-shadow(0 12px 14px rgba(0, 0, 0, .46))
        drop-shadow(0 0 12px color-mix(in srgb, var(--relic-color, #d2d0c8) 46%, transparent)) !important;
}

.story-relic-touch-ghost .story-relic-medallion,
.story-relic-touch-ghost .story-relic-empty-medallion {
    width: 62px !important;
    height: 62px !important;
}

.story-relic-touch-dragging,
.story-relic-touch-dragging * {
    cursor: grabbing !important;
}

.story-relic-panel-bag {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(5px, .7vw, 8px) !important;
    padding: clamp(7px, .8vw, 10px) !important;
    border: 1px solid rgba(219, 170, 83, .44) !important;
    background:
        radial-gradient(circle at 50% 28%, rgba(243, 223, 178, .09), transparent 45%),
        rgba(4, 8, 9, .20) !important;
    box-shadow: inset 0 0 22px rgba(0, 0, 0, .22) !important;
    overflow: hidden !important;
}

.story-relic-panel-bag-slot {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 3px !important;
    padding: clamp(4px, .52vw, 6px) !important;
    border: 1px solid rgba(243, 223, 178, .20) !important;
    background:
        linear-gradient(180deg, rgba(20, 15, 10, .34), rgba(4, 4, 4, .20)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, .18),
        inset 0 0 14px rgba(0, 0, 0, .20) !important;
    overflow: hidden !important;
}

.story-relic-panel-bag-slot.is-empty {
    place-items: center !important;
    color: rgba(243, 223, 178, .22) !important;
    font-size: .72rem !important;
}

.story-relic-panel-bag-slot .story-relic-panel-medallion-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    align-self: center !important;
    justify-self: center !important;
}

.story-relic-panel-bag-slot .story-relic-medallion {
    width: min(clamp(34px, 4.2vw, 50px), 100%) !important;
    max-width: 100% !important;
    font-size: clamp(.9rem, 1.45vw, 1.18rem) !important;
}

.story-relic-panel-bag-slot .story-relic-panel-small-action {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: clamp(19px, 2.1dvh, 23px) !important;
    padding: 2px 3px !important;
    font-size: clamp(.48rem, .62vw, .56rem) !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.story-relic-chest-overlay {
    justify-content: center !important;
}

.story-relic-chest-shell {
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
}

.story-relic-chest-panel,
.story-relic-chest-player-panel {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: clamp(320px, 40vw, 500px) !important;
    height: 100dvh !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    pointer-events: auto !important;
}

.story-relic-chest-panel {
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    border-left: 0 !important;
    border-right: 2px solid rgba(101, 225, 218, .48) !important;
    box-shadow: 18px 0 28px rgba(0, 0, 0, .34) !important;
}

.story-relic-chest-player-panel {
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
}

.story-relic-chest-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

.story-relic-chest-header .story-relic-panel-close-button {
    grid-column: 2 !important;
}

.story-relic-chest-title {
    justify-self: start !important;
    color: #f6dfaa !important;
    font: 800 .82rem/1.1 var(--omen-font-body, serif) !important;
    text-transform: lowercase !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .72) !important;
}

.story-relic-chest-grid {
    overflow: hidden !important;
}

.story-relic-chest-storage-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(8, minmax(0, 1fr)) !important;
}

.story-relic-chest-inventory-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
}

.story-relic-chest-grid .story-relic-panel-bag-slot {
    grid-template-rows: minmax(0, 1fr) !important;
    padding: clamp(3px, .46vw, 6px) !important;
}

.story-relic-chest-grid .story-relic-panel-bag-slot.is-drag-over {
    outline: 2px solid rgba(101, 225, 218, .82) !important;
    outline-offset: -2px !important;
    background: rgba(101, 225, 218, .08) !important;
}

.story-relic-chest-grid .story-relic-panel-medallion-button {
    width: 100% !important;
    height: 100% !important;
}

.story-relic-chest-grid .story-relic-medallion {
    width: min(clamp(40px, 5vw, 64px), 100%) !important;
}

.story-relic-chest-info-popover {
    position: fixed !important;
    top: max(74px, env(safe-area-inset-top, 0px)) !important;
    left: 50% !important;
    right: auto !important;
    width: min(340px, 30vw) !important;
    transform: translateX(-50%) !important;
    z-index: 12250 !important;
}

.story-relic-info-footer-single {
    grid-template-columns: minmax(0, 1fr) !important;
}

.story-relic-panel-bonus-list {
    height: 100% !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(101, 225, 218, .36) !important;
    background: rgba(2, 5, 6, .22) !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(219, 170, 83, .72) rgba(0, 0, 0, .18) !important;
}

.story-relic-panel-bonus-list span,
.story-relic-panel-bonus-list em {
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 5px 0 !important;
    color: #f3dfb2 !important;
    font-style: normal !important;
    font-size: .8rem !important;
    border-bottom: 1px solid rgba(243, 223, 178, .14) !important;
}

.story-relic-panel-bonus-list strong {
    color: #ffe8ad !important;
}

.story-relic-panel-bonus-list small {
    display: block !important;
    color: rgba(243, 223, 178, .72) !important;
    font-size: .82rem !important;
}

.story-relic-info-popover {
    position: absolute !important;
    right: calc(var(--story-relic-panel-width, clamp(280px, 34vw, 380px)) + 12px) !important;
    top: max(74px, env(safe-area-inset-top, 0px)) !important;
    width: min(280px, calc(100vw - var(--story-relic-panel-width, 340px) - 30px)) !important;
    pointer-events: auto !important;
}

.story-relic-info-popover[hidden] {
    display: none !important;
}

.story-relic-info-card {
    box-sizing: border-box !important;
    display: grid !important;
    gap: 10px !important;
    padding: 12px !important;
    border: 1px solid rgba(219, 170, 83, .58) !important;
    background: linear-gradient(180deg, rgba(25, 18, 12, .94), rgba(8, 6, 5, .96)) !important;
    color: #f3dfb2 !important;
    font-size: calc(1rem - 2px) !important;
    box-shadow: 0 18px 30px rgba(0, 0, 0, .42) !important;
}

.story-relic-info-card header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
}

.story-relic-info-card h4 {
    margin: 0 !important;
    color: #ffe8ad !important;
    font-size: calc(1rem - 2px) !important;
}

.story-relic-info-card small,
.story-relic-info-card p {
    margin: 0 !important;
    color: rgba(243, 223, 178, .76) !important;
    font-size: calc(.88rem - 2px) !important;
}

.story-relic-info-affixes {
    display: grid !important;
    gap: 5px !important;
}

.story-relic-info-affixes span {
    padding: 5px 0 !important;
    font-size: calc(.9rem - 2px) !important;
    border-bottom: 1px solid rgba(243, 223, 178, .12) !important;
}

.story-relic-info-card footer {
    box-sizing: border-box !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 3px !important;
    border: 1px solid rgba(219, 170, 83, .22) !important;
    background: rgba(2, 4, 5, .24) !important;
    overflow: hidden !important;
}

.story-relic-info-card footer .run-setup-primary,
.story-relic-info-card footer .run-setup-secondary {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 30px !important;
    padding: 6px 8px !important;
    font-size: calc(.62rem - 2px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@media (orientation: portrait) {
    .story-relic-panel {
        width: var(--story-relic-panel-width, min(78vw, 340px)) !important;
    }

    .story-relic-info-popover {
        right: calc(var(--story-relic-panel-width, min(78vw, 340px)) + 8px) !important;
        width: min(260px, calc(100vw - var(--story-relic-panel-width, 320px) - 18px)) !important;
    }

    .story-relic-chest-panel,
    .story-relic-chest-player-panel {
        left: max(6px, env(safe-area-inset-left, 0px)) !important;
        right: max(6px, env(safe-area-inset-right, 0px)) !important;
        width: auto !important;
        height: calc(50dvh - 9px) !important;
        max-width: none !important;
    }

    .story-relic-chest-panel {
        top: max(4px, env(safe-area-inset-top, 0px)) !important;
        bottom: auto !important;
        border-right: 0 !important;
        border-bottom: 2px solid rgba(101, 225, 218, .42) !important;
    }

    .story-relic-chest-player-panel {
        top: auto !important;
        bottom: max(4px, env(safe-area-inset-bottom, 0px)) !important;
        border-left: 0 !important;
        border-top: 2px solid rgba(101, 225, 218, .42) !important;
    }

    .story-relic-chest-info-popover {
        width: min(320px, calc(100vw - 18px)) !important;
    }
}

@media (max-width: 860px) and (orientation: landscape) {
    .story-relic-chest-panel,
    .story-relic-chest-player-panel {
        width: calc(50vw - 12px) !important;
    }

    .story-relic-chest-grid .story-relic-medallion {
        width: min(clamp(34px, 7vw, 52px), 100%) !important;
    }

    .story-relic-chest-info-popover {
        width: min(280px, 34vw) !important;
    }
}

/* Mobile fit pass for story windows only. Desktop rules above stay intact. */
@media (hover: none) and (pointer: coarse), (max-width: 760px), (max-height: 520px) {
    .story-inventory-overlay,
    .story-card-storage-overlay,
    .story-merchant-overlay {
        padding: max(6px, env(safe-area-inset-top, 0px)) max(6px, env(safe-area-inset-right, 0px)) max(6px, env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)) !important;
        overflow: hidden !important;
    }

    .story-inventory-window,
    .story-card-storage-window,
    .story-merchant-window {
        box-sizing: border-box !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        padding: clamp(8px, 1.8vw, 14px) !important;
        gap: clamp(6px, 1.5vw, 10px) !important;
        overflow: hidden !important;
    }

    .story-inventory-header,
    .story-card-storage-header,
    .story-merchant-header {
        min-height: 0 !important;
        gap: 6px !important;
    }

    .story-inventory-title strong,
    .story-card-storage-title strong,
    .story-merchant-title strong {
        font-size: clamp(1.1rem, 5vw, 1.75rem) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .story-inventory-header-actions,
    .story-card-storage-header-actions,
    .story-merchant-header-actions {
        box-sizing: border-box !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    .story-card-storage-header-actions .story-card-storage-type-tabs,
    .story-merchant-header-actions .story-merchant-tabs,
    .story-inventory-header-actions .story-inventory-tabs {
        width: auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    .story-card-storage-header-actions .story-card-storage-type-tabs::-webkit-scrollbar,
    .story-merchant-header-actions .story-merchant-tabs::-webkit-scrollbar,
    .story-inventory-header-actions .story-inventory-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .story-card-storage-header-actions .story-card-storage-tab,
    .story-merchant-header-actions .story-merchant-tab,
    .story-inventory-header-actions .story-inventory-tab,
    .story-inventory-close {
        flex: 0 0 auto !important;
        width: clamp(74px, 23vw, 116px) !important;
        min-width: 0 !important;
        min-height: 32px !important;
        padding: 6px 7px !important;
        font-size: clamp(.56rem, 2.6vw, .7rem) !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    .story-card-storage-header-actions .story-inventory-close,
    .story-merchant-header-actions .story-inventory-close,
    .story-inventory-header-actions .story-inventory-close {
        justify-self: end !important;
        width: clamp(82px, 24vw, 116px) !important;
    }

    .story-inventory-body,
    .story-card-storage-body,
    .story-card-storage-body-archive,
    .story-card-storage-body-decode,
    .story-merchant-body {
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    .story-inventory-loadout.is-unified,
    .story-inventory-loadout.is-unified.has-reliquary,
    .story-card-storage-archive.is-tabbed,
    .story-card-storage-archive.is-tabbed .story-storage-shelf {
        min-height: 0 !important;
        max-height: 100% !important;
    }

    .story-inventory-loadout.is-unified,
    .story-inventory-loadout.is-unified.has-reliquary {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 6px !important;
        gap: 8px !important;
    }

    .story-inventory-loadout.is-unified .story-inventory-card-row {
        grid-auto-columns: minmax(164px, min(64vw, 230px)) !important;
        grid-auto-rows: minmax(0, 1fr) !important;
        gap: 6px !important;
        align-content: center !important;
        padding: 4px 2px 10px !important;
    }

    .story-inventory-loadout.is-unified .story-inventory-card-cell {
        min-height: 0 !important;
        padding: 2px !important;
    }

    .story-reliquary-slots {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .story-relic-slot {
        min-height: 58px !important;
        padding: 4px !important;
    }

    .story-relic-slot b,
    .story-relic-slot small,
    .story-relic-bag-slot b,
    .story-relic-bag-slot small {
        display: none !important;
    }

    .story-relic-bag-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }

    .story-relic-bag-slot {
        min-height: 66px !important;
        padding: 4px !important;
    }

    .story-relic-bag-slot .story-relic-medallion,
    .story-relic-bag-slot .story-relic-empty-medallion,
    .story-relic-slot .story-relic-medallion,
    .story-relic-slot .story-relic-empty-medallion {
        width: clamp(34px, 9vw, 48px) !important;
        height: clamp(34px, 9vw, 48px) !important;
    }

    .story-relic-bag-slot .story-relic-panel-small-action,
    .story-relic-slot .story-relic-panel-small-action {
        min-height: 22px !important;
        padding: 3px 5px !important;
        font-size: .56rem !important;
    }

    .story-card-storage-archive.is-tabbed {
        overflow: hidden !important;
    }

    .story-card-storage-archive.is-tabbed .story-storage-scroll-row {
        height: 100% !important;
        min-height: 0 !important;
        align-items: center !important;
        grid-auto-columns: minmax(172px, min(52vw, 242px)) !important;
        gap: 8px !important;
        padding: 6px 4px 18px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .story-card-storage-archive.is-tabbed .story-storage-archive-card {
        min-height: 0 !important;
        max-height: 100% !important;
        grid-template-rows: minmax(0, 1fr) auto auto !important;
        gap: 5px !important;
        padding: 0 !important;
    }

    .story-card-storage-archive.is-tabbed .story-small-card-art {
        width: min(100%, 210px) !important;
        max-height: min(56vh, 330px) !important;
        justify-self: center !important;
    }

    .story-card-storage-archive.is-tabbed .story-storage-archive-copy {
        min-height: 18px !important;
        font-size: clamp(.68rem, 2.7vw, .84rem) !important;
        line-height: 1.1 !important;
    }

    .story-card-storage-archive.is-tabbed .story-storage-archive-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 4px !important;
        padding: 0 3px 3px !important;
    }

    .story-card-storage-archive.is-tabbed .story-storage-archive-actions .run-setup-primary,
    .story-card-storage-archive.is-tabbed .story-storage-archive-actions .run-setup-secondary,
    .story-storage-decode-pack .run-setup-primary,
    .story-storage-decode-choice .run-setup-primary,
    .story-merchant-card-actions .run-setup-primary {
        min-height: 28px !important;
        padding: 5px 7px !important;
        font-size: clamp(.58rem, 2.4vw, .72rem) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .story-card-decode-window .story-card-storage-body-decode,
    .story-card-decode-window .story-storage-decode-table {
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    .story-card-decode-window .story-storage-decode-packs,
    .story-card-decode-window .story-storage-decode-choices {
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(5px, 1.5vw, 9px) !important;
    }

    .story-card-decode-window .story-storage-decode-packs {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        padding: 2px !important;
    }

    .story-card-decode-window .story-storage-decode-pack {
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 5px !important;
    }

    .story-card-decode-window .story-storage-decode-silhouette {
        width: min(100%, clamp(80px, 20vw, 136px)) !important;
        height: auto !important;
        aspect-ratio: 3 / 4 !important;
    }

    .story-card-decode-window .story-storage-decode-choices {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        padding: 0 2px !important;
    }

    .story-card-decode-window .story-storage-decode-choice .story-merchant-card-display {
        width: min(100%, clamp(104px, 28vw, 180px)) !important;
        max-height: min(58vh, 340px) !important;
    }

    .story-merchant-offers {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: center !important;
        justify-items: center !important;
        gap: clamp(4px, 1.2vw, 8px) !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 2px !important;
    }

    .story-merchant-card {
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 5px !important;
    }

    .story-merchant-card-display {
        width: min(100%, clamp(98px, 28vw, 176px)) !important;
        max-height: min(62vh, 360px) !important;
    }

    .story-merchant-price-tag {
        min-height: 24px !important;
        padding: 3px 6px !important;
        font-size: clamp(.7rem, 2.8vw, .86rem) !important;
    }

    body.story-relic-panel-open {
        --story-relic-panel-width: min(82vw, 320px);
    }

    .story-relic-panel {
        width: var(--story-relic-panel-width, min(82vw, 320px)) !important;
        max-width: calc(100vw - 12px) !important;
        height: 100dvh !important;
        grid-template-rows: auto minmax(0, .78fr) minmax(0, 1fr) !important;
        padding: max(8px, env(safe-area-inset-top, 0px)) 8px max(8px, env(safe-area-inset-bottom, 0px)) !important;
        gap: 7px !important;
        overflow: hidden !important;
    }

    .story-relic-panel-header {
        grid-template-columns: auto auto !important;
        gap: 6px !important;
    }

    .story-relic-panel-button,
    .story-relic-panel-small-action {
        min-height: 28px !important;
        padding: 5px 7px !important;
        font-size: clamp(.58rem, 2.5vw, .72rem) !important;
    }

    .story-relic-panel-top,
    .story-relic-panel-bag {
        min-height: 0 !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .story-relic-panel-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .story-relic-panel-slot {
        min-height: 72px !important;
        padding: 5px !important;
    }

    .story-relic-panel-bag {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .story-relic-panel-bag-slot {
        min-height: 72px !important;
        padding: 5px !important;
    }

    .story-relic-panel .story-relic-medallion,
    .story-relic-panel .story-relic-empty-medallion {
        width: clamp(36px, 9vw, 50px) !important;
        height: clamp(36px, 9vw, 50px) !important;
    }

    .story-relic-info-popover {
        position: fixed !important;
        top: max(50px, env(safe-area-inset-top, 0px)) !important;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
        left: auto !important;
        width: min(260px, calc(var(--story-relic-panel-width, min(82vw, 320px)) - 16px)) !important;
        max-height: calc(100dvh - 66px) !important;
        overflow: auto !important;
        z-index: 12250 !important;
    }

    .story-relic-info-card {
        padding: 9px !important;
        gap: 8px !important;
    }

    .story-relic-info-card footer {
        gap: 4px !important;
        padding: 3px !important;
    }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape), (max-height: 520px) {
    body.story-relic-panel-open {
        --story-relic-panel-width: min(44vw, 330px);
    }

    .story-relic-panel {
        grid-template-rows: auto minmax(0, .9fr) minmax(0, 1fr) !important;
    }

    .story-card-decode-window .story-storage-decode-silhouette {
        width: min(100%, clamp(72px, 14vw, 124px)) !important;
    }

    .story-merchant-offers {
        inset: 2% 7% 1% !important;
        align-items: center !important;
    }

    .story-merchant-offer {
        gap: 4px !important;
    }

    .story-card-decode-window .story-storage-decode-choice .story-merchant-card-display,
    .story-merchant-card-display {
        width: min(100%, clamp(96px, 14.5vw, 150px)) !important;
        max-height: min(66vh, 258px) !important;
    }

    .story-merchant-window .story-merchant-card-display {
        width: min(100%, clamp(96px, 14.5vw, 150px)) !important;
    }

    .story-merchant-price-tag {
        width: min(100%, 150px) !important;
        max-width: 100% !important;
        gap: 2px !important;
    }

    .story-merchant-price-tag > span {
        display: none !important;
    }

    .story-merchant-price-tag .run-setup-primary {
        min-height: 28px !important;
        padding: 4px 6px !important;
        font-size: .6rem !important;
        gap: 5px !important;
    }

    .story-merchant-price-tag .run-setup-primary img {
        width: 17px !important;
        height: 17px !important;
    }

    .story-card-storage-archive.is-tabbed .story-storage-scroll-row {
        grid-auto-columns: minmax(168px, min(30vw, 224px)) !important;
    }
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait), (max-width: 600px) {
    .story-inventory-header-actions,
    .story-card-storage-header-actions,
    .story-merchant-header-actions {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .story-inventory-loadout.is-unified .story-inventory-card-row {
        grid-auto-columns: minmax(154px, min(76vw, 220px)) !important;
    }

    .story-card-storage-archive.is-tabbed .story-storage-scroll-row {
        grid-auto-columns: minmax(162px, min(76vw, 224px)) !important;
    }

    .story-merchant-offers {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .story-merchant-card-display {
        width: min(100%, clamp(86px, 29vw, 146px)) !important;
    }

    .story-card-decode-window .story-storage-decode-packs {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .story-card-decode-window .story-storage-decode-silhouette {
        width: min(100%, clamp(62px, 20vw, 104px)) !important;
    }
}

.story-blacksmith-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 4460 !important;
    display: grid !important;
    place-items: stretch !important;
    padding: 0 !important;
    background:
        radial-gradient(circle at 48% 22%, rgba(255, 164, 82, .12), transparent 34%),
        linear-gradient(180deg, rgba(3, 4, 5, .94), rgba(2, 3, 4, .98)) !important;
    backdrop-filter: blur(4px) !important;
    overflow: hidden !important;
}

.story-blacksmith-window {
    box-sizing: border-box !important;
    width: 100vw !important;
    height: 100dvh !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    padding:
        max(12px, env(safe-area-inset-top, 0px))
        max(14px, env(safe-area-inset-right, 0px))
        max(12px, env(safe-area-inset-bottom, 0px))
        max(14px, env(safe-area-inset-left, 0px)) !important;
    background:
        linear-gradient(180deg, rgba(2, 5, 6, .78), rgba(3, 3, 3, .94)),
        url("../assets/sprites/ui/windows/decor/story_inventory_bg.webp?v=7903c24-20260629075437") center / cover no-repeat,
        linear-gradient(145deg, #110907, #050505) !important;
    color: #f3dfb2 !important;
    overflow: hidden !important;
}

.story-blacksmith-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 12px !important;
    min-height: 72px !important;
    position: relative !important;
    z-index: 4 !important;
}

.story-blacksmith-title-block h3 {
    margin: 2px 0 0 !important;
    color: #fff2c4 !important;
    font-size: clamp(1.45rem, 3.2vw, 2.5rem) !important;
    font-weight: 400 !important;
    line-height: .95 !important;
    text-transform: uppercase !important;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .72), 0 0 18px rgba(252, 201, 125, .22) !important;
}

.story-blacksmith-header-actions {
    display: grid !important;
    grid-template-columns: minmax(0, auto) minmax(112px, 148px) !important;
    justify-items: end !important;
    align-items: start !important;
    gap: 6px 8px !important;
}

.story-blacksmith-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
}

.story-blacksmith-tab,
.story-blacksmith-close {
    min-height: 38px !important;
    padding: 6px 14px !important;
    font-size: .72rem !important;
}

.story-blacksmith-header-actions .story-merchant-balance {
    grid-column: 2 !important;
    justify-self: end !important;
}

.story-blacksmith-body {
    min-height: 0 !important;
    overflow: hidden !important;
}

.story-blacksmith-trade-grid {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(250px, .72fr) minmax(0, 1fr) !important;
    gap: clamp(10px, 1.5vw, 18px) !important;
}

.story-blacksmith-pane,
.story-blacksmith-deal-pane {
    min-height: 0 !important;
    display: grid !important;
    border: 0 !important;
    border-top: 1px solid rgba(215, 189, 130, .30) !important;
    background:
        linear-gradient(145deg, rgba(0, 0, 0, .50), rgba(0, 0, 0, .18)),
        rgba(4, 8, 10, .24) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.story-blacksmith-pane {
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: clamp(10px, 1.3vw, 16px) !important;
}

.story-blacksmith-pane > header,
.story-blacksmith-drop-zone > header {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.story-blacksmith-pane h4,
.story-blacksmith-drop-zone h4 {
    margin: 0 !important;
    color: #fff2c4 !important;
    font-size: clamp(.88rem, 1.32vw, 1.08rem) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
}

.story-blacksmith-pane small,
.story-blacksmith-drop-zone small,
.story-blacksmith-empty-hint {
    color: rgba(240, 207, 138, .78) !important;
    font-size: .74rem !important;
    line-height: 1.18 !important;
}

.story-blacksmith-relic-grid {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
    align-content: start !important;
    gap: 10px !important;
    padding: 2px 4px 8px 2px !important;
    overflow: auto !important;
    scrollbar-color: rgba(240, 207, 138, .62) rgba(0, 0, 0, .26) !important;
    scrollbar-width: thin !important;
}

.story-blacksmith-relic-grid::-webkit-scrollbar,
.story-blacksmith-selected-list::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

.story-blacksmith-relic-grid::-webkit-scrollbar-track,
.story-blacksmith-selected-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .26) !important;
}

.story-blacksmith-relic-grid::-webkit-scrollbar-thumb,
.story-blacksmith-selected-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(240, 207, 138, .70), rgba(116, 81, 42, .82)) !important;
    border: 1px solid rgba(0, 0, 0, .45) !important;
}

.story-blacksmith-relic {
    min-width: 0 !important;
    min-height: 154px !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 5px !important;
    justify-items: center !important;
    align-items: start !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.story-blacksmith-relic.is-empty {
    min-height: 112px !important;
    place-content: center !important;
    color: rgba(240, 207, 138, .34) !important;
    border: 1px solid rgba(215, 189, 130, .14) !important;
    background: rgba(0, 0, 0, .16) !important;
}

.story-blacksmith-relic.is-sold {
    opacity: .48 !important;
}

.story-blacksmith-relic[data-blacksmith-drag-buy],
.story-blacksmith-relic[data-blacksmith-drag-sell] {
    cursor: grab !important;
    touch-action: none !important;
}

.story-blacksmith-relic.is-touch-dragging {
    opacity: .48 !important;
}

.story-blacksmith-relic-button {
    width: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    justify-items: center !important;
    gap: 4px !important;
    padding: 6px !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: #fff0c2 !important;
    background: transparent !important;
    cursor: pointer !important;
    text-align: center !important;
}

.story-blacksmith-relic-button:hover:not(:disabled),
.story-blacksmith-relic.is-selected .story-blacksmith-relic-button {
    box-shadow: 0 0 0 3px rgba(240, 207, 138, .18), 0 0 18px rgba(240, 171, 88, .26) !important;
}

.story-blacksmith-relic-button:disabled {
    cursor: default !important;
}

.story-blacksmith-relic .story-relic-medallion,
.story-blacksmith-selected-relic .story-relic-medallion {
    width: 58px !important;
    height: 58px !important;
    filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .50)) !important;
}

.story-blacksmith-relic strong {
    max-width: 100% !important;
    color: #fff2d6 !important;
    font-size: .78rem !important;
    font-weight: 400 !important;
    line-height: 1.06 !important;
    text-transform: uppercase !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.story-blacksmith-relic em {
    max-width: 100% !important;
    color: rgba(248, 225, 185, .78) !important;
    font-size: .68rem !important;
    font-style: normal !important;
    line-height: 1.16 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.story-blacksmith-price-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    color: var(--omen-story-warm-label-bright, #f0cf8a) !important;
    font-family: var(--omen-font-display, Georgia, serif) !important;
    font-size: .78rem !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .70) !important;
}

.story-blacksmith-price-chip img {
    width: 17px !important;
    height: 17px !important;
    object-fit: contain !important;
    image-rendering: pixelated !important;
}

.story-blacksmith-deal-pane {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: clamp(10px, 1.3vw, 16px) !important;
}

.story-blacksmith-drop-zone {
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
    border: 1px solid rgba(215, 189, 130, .20) !important;
    background: rgba(0, 0, 0, .20) !important;
    overflow: hidden !important;
}

.story-blacksmith-drop-zone.is-drag-over {
    border-color: rgba(240, 207, 138, .64) !important;
    box-shadow: inset 0 0 18px rgba(240, 171, 88, .18) !important;
}

.story-blacksmith-selected-list {
    min-height: 0 !important;
    display: grid !important;
    align-content: start !important;
    gap: 6px !important;
    overflow: auto !important;
}

.story-blacksmith-selected-relic {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px !important;
    border: 1px solid rgba(215, 189, 130, .20) !important;
    color: #fff0c2 !important;
    background: rgba(0, 0, 0, .20) !important;
    text-align: left !important;
}

.story-blacksmith-selected-main {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    color: inherit !important;
    background: transparent !important;
    cursor: pointer !important;
}

.story-blacksmith-selected-main .story-relic-medallion {
    width: 38px !important;
    height: 38px !important;
}

.story-blacksmith-selected-main span {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
}

.story-blacksmith-selected-main strong {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: .74rem !important;
    font-weight: 400 !important;
}

.story-blacksmith-selected-remove {
    min-height: 28px !important;
    padding: 4px 7px !important;
    border: 1px solid rgba(215, 189, 130, .28) !important;
    color: rgba(255, 242, 196, .86) !important;
    background: rgba(0, 0, 0, .22) !important;
    font-family: var(--omen-font-display, Georgia, serif) !important;
    font-size: .62rem !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}

.story-blacksmith-selected-remove:hover {
    border-color: rgba(240, 207, 138, .58) !important;
    color: #fff2c4 !important;
}

.story-blacksmith-window .story-blacksmith-info-popover {
    position: absolute !important;
    z-index: 8 !important;
    top: max(88px, calc(env(safe-area-inset-top, 0px) + 74px)) !important;
    right: max(14px, env(safe-area-inset-right, 0px)) !important;
    width: min(360px, calc(100vw - 28px)) !important;
}

.story-blacksmith-info-price {
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    color: var(--omen-story-warm-label-bright, #f0cf8a) !important;
    font-family: var(--omen-font-display, Georgia, serif) !important;
    font-size: .76rem !important;
    text-align: center !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .70) !important;
}

.story-blacksmith-info-price img {
    width: 17px !important;
    height: 17px !important;
    object-fit: contain !important;
    image-rendering: pixelated !important;
}

.story-blacksmith-deal-summary {
    display: grid !important;
    gap: 7px !important;
    align-items: center !important;
    justify-items: stretch !important;
}

.story-blacksmith-deal-summary > span {
    min-height: 1.2em !important;
    color: rgba(248, 225, 185, .78) !important;
    font-size: .74rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

.story-blacksmith-deal-summary > strong {
    color: #fff2c4 !important;
    font-family: var(--omen-font-display, Georgia, serif) !important;
    font-size: clamp(1.05rem, 1.8vw, 1.42rem) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .72) !important;
}

.story-blacksmith-deal-summary > strong.is-positive {
    color: #bfe8a8 !important;
}

.story-blacksmith-deal-summary > strong.is-negative {
    color: #f0cf8a !important;
}

.story-blacksmith-deal-button {
    width: 100% !important;
}

.story-blacksmith-upgrades-placeholder {
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    color: rgba(248, 225, 185, .82) !important;
    font-size: 1rem !important;
    text-align: center !important;
}

@media (max-width: 980px) {
    .story-blacksmith-trade-grid {
        grid-template-columns: minmax(0, 1fr) minmax(210px, .78fr) minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .story-blacksmith-relic-grid {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important;
        gap: 7px !important;
    }

    .story-blacksmith-relic .story-relic-medallion {
        width: 50px !important;
        height: 50px !important;
    }
}

@media (hover: none) and (pointer: coarse), (max-width: 760px) {
    .story-blacksmith-header {
        min-height: 94px !important;
    }

    .story-blacksmith-header-actions {
        grid-template-columns: 1fr auto !important;
        max-width: min(72vw, 480px) !important;
    }

    .story-blacksmith-tabs {
        justify-content: flex-end !important;
    }

    .story-blacksmith-trade-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(0, .9fr) minmax(250px, .95fr) minmax(0, .9fr) !important;
        overflow: auto !important;
        padding-right: 4px !important;
    }

    .story-blacksmith-pane,
    .story-blacksmith-deal-pane {
        min-height: 250px !important;
    }
}

@media (hover: none) and (pointer: coarse), (max-width: 760px), (max-height: 520px) {
    .story-relic-chest-overlay .story-relic-chest-panel,
    .story-relic-chest-overlay .story-relic-chest-player-panel {
        grid-template-rows: auto minmax(0, 1fr) !important;
        gap: 6px !important;
        padding: max(7px, env(safe-area-inset-top, 0px)) 7px max(7px, env(safe-area-inset-bottom, 0px)) !important;
    }

    .story-relic-chest-overlay .story-relic-chest-grid {
        overflow: hidden !important;
        gap: 4px !important;
    }
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait), (max-width: 760px) and (orientation: portrait) {
    .story-relic-chest-overlay .story-relic-chest-panel,
    .story-relic-chest-overlay .story-relic-chest-player-panel {
        left: max(6px, env(safe-area-inset-left, 0px)) !important;
        right: max(6px, env(safe-area-inset-right, 0px)) !important;
        width: auto !important;
        max-width: none !important;
        height: calc(50dvh - 9px) !important;
    }

    .story-relic-chest-overlay .story-relic-chest-panel {
        top: max(4px, env(safe-area-inset-top, 0px)) !important;
        bottom: auto !important;
    }

    .story-relic-chest-overlay .story-relic-chest-player-panel {
        top: auto !important;
        bottom: max(4px, env(safe-area-inset-bottom, 0px)) !important;
    }

    .story-relic-chest-overlay .story-relic-chest-storage-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape), (max-height: 520px) {
    .story-relic-chest-overlay .story-relic-chest-panel,
    .story-relic-chest-overlay .story-relic-chest-player-panel {
        width: calc(50vw - 12px) !important;
        height: 100dvh !important;
    }

    .story-relic-chest-overlay .story-relic-chest-grid .story-relic-medallion {
        width: min(clamp(32px, 7vw, 50px), 100%) !important;
    }
}

/* Fullscreen relic chest window. Overrides the older side-panel chest layout. */
.story-relic-chest-overlay {
    z-index: 13000 !important;
    display: block !important;
    justify-content: initial !important;
    pointer-events: auto !important;
    background:
        radial-gradient(circle at 50% 30%, rgba(215, 189, 130, .10), transparent 38%),
        linear-gradient(180deg, rgba(1, 4, 7, .94), rgba(1, 5, 7, .985)) !important;
}

.story-relic-chest-window {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: clamp(10px, 1.4vw, 18px) !important;
}

.story-relic-chest-topbar {
    min-height: 52px !important;
}

.story-relic-chest-body {
    display: grid !important;
    grid-template-columns: minmax(420px, 1.08fr) minmax(360px, .92fr) !important;
    gap: clamp(10px, 1.2vw, 18px) !important;
    padding: clamp(10px, 1.2vw, 16px) !important;
    overflow: hidden !important;
}

.story-relic-chest-section,
.story-relic-chest-right-column {
    min-width: 0 !important;
    min-height: 0 !important;
}

.story-relic-chest-section {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: clamp(8px, .95vw, 12px) !important;
    border: 1px solid rgba(215, 189, 130, .22) !important;
    background:
        linear-gradient(180deg, rgba(255, 236, 194, .10), rgba(70, 42, 18, .12)),
        rgba(8, 7, 5, .24) !important;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, .20) !important;
    overflow: hidden !important;
}

.story-relic-chest-right-column {
    display: grid !important;
    grid-template-rows: minmax(210px, .58fr) minmax(260px, 1fr) !important;
    gap: clamp(10px, 1.2vw, 16px) !important;
}

.story-relic-chest-section-header {
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

.story-relic-chest-section-header strong {
    color: var(--omen-window-title-color, #fff2c4) !important;
    font-family: var(--omen-font-display, Georgia, serif) !important;
    font-size: clamp(1rem, 1.5vw, 1.32rem) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .72) !important;
}

.story-relic-chest-detail-button {
    width: clamp(104px, 9vw, 148px) !important;
    min-height: 36px !important;
    padding: 6px 12px !important;
    border: 0 !important;
    background: var(--omen-window-button-medium-secondary) center / 100% 100% no-repeat !important;
    color: #f1dfba !important;
    font-family: var(--omen-font-display, Georgia, serif) !important;
    font-size: clamp(.68rem, 1vw, .82rem) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .92) !important;
}

.story-relic-chest-grid,
.story-relic-chest-equipment-slots {
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    gap: clamp(5px, .6vw, 8px) !important;
    overflow: hidden !important;
}

.story-relic-chest-storage-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(8, minmax(0, 1fr)) !important;
}

.story-relic-chest-inventory-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
}

.story-relic-chest-equipment-slots {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

.story-relic-chest-grid .story-relic-panel-bag-slot,
.story-relic-chest-equipment-slot {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    place-items: center !important;
    padding: clamp(4px, .52vw, 7px) !important;
    border: 1px solid rgba(243, 223, 178, .20) !important;
    background:
        linear-gradient(180deg, rgba(20, 15, 10, .34), rgba(4, 4, 4, .20)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, .18),
        inset 0 0 14px rgba(0, 0, 0, .20) !important;
    overflow: hidden !important;
}

.story-relic-chest-grid .story-relic-panel-bag-slot.is-empty,
.story-relic-chest-equipment-slot.is-empty {
    color: rgba(243, 223, 178, .22) !important;
    font-size: .72rem !important;
}

.story-relic-chest-grid .story-relic-panel-bag-slot.is-drag-over,
.story-relic-chest-equipment-slot.is-drag-over {
    outline: 2px solid rgba(101, 225, 218, .82) !important;
    outline-offset: -2px !important;
    background: rgba(101, 225, 218, .08) !important;
}

.story-relic-chest-grid .story-relic-panel-medallion-button,
.story-relic-chest-equipment-slot .story-relic-panel-medallion-button {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
}

.story-relic-chest-grid .story-relic-medallion,
.story-relic-chest-equipment-slot .story-relic-medallion,
.story-relic-chest-equipment-slot .story-relic-empty-medallion {
    width: min(clamp(42px, 5.2vw, 70px), 100%) !important;
    height: auto !important;
}

.story-relic-chest-bonus-details {
    min-height: 0 !important;
    overflow: hidden !important;
}

.story-relic-chest-bonus-details .story-relic-panel-bonus-list {
    height: 100% !important;
    border-color: rgba(215, 189, 130, .26) !important;
    background: rgba(4, 5, 5, .20) !important;
}

.story-relic-chest-info-popover {
    position: fixed !important;
    top: max(82px, env(safe-area-inset-top, 0px)) !important;
    left: 50% !important;
    right: auto !important;
    width: min(360px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 104px) !important;
    overflow: auto !important;
    transform: translateX(-50%) !important;
    z-index: 13200 !important;
    pointer-events: auto !important;
}

@media (max-width: 860px), (orientation: portrait) {
    .story-relic-chest-body {
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(0, 1fr) minmax(0, 1.05fr) !important;
    }

    .story-relic-chest-right-column {
        grid-template-rows: minmax(156px, .62fr) minmax(190px, 1fr) !important;
    }

    .story-relic-chest-storage-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (hover: none) and (pointer: coarse), (max-width: 760px), (max-height: 520px) {
    .story-relic-chest-window {
        gap: 7px !important;
    }

    .story-relic-chest-body {
        padding: 7px !important;
        gap: 7px !important;
    }

    .story-relic-chest-section {
        padding: 7px !important;
        gap: 5px !important;
    }

    .story-relic-chest-section-header {
        min-height: 30px !important;
    }

    .story-relic-chest-section-header strong {
        font-size: clamp(.88rem, 3vw, 1.08rem) !important;
    }

    .story-relic-chest-detail-button {
        width: clamp(92px, 22vw, 126px) !important;
        min-height: 30px !important;
        font-size: clamp(.58rem, 2.4vw, .7rem) !important;
    }

    .story-relic-chest-grid,
    .story-relic-chest-equipment-slots {
        gap: 4px !important;
    }

    .story-relic-chest-grid .story-relic-medallion,
    .story-relic-chest-equipment-slot .story-relic-medallion,
    .story-relic-chest-equipment-slot .story-relic-empty-medallion {
        width: min(clamp(30px, 8vw, 50px), 100%) !important;
    }
}

/* Mobile common topbar rules for story windows that still carry local header classes. */
@media (hover: none) and (pointer: coarse), (orientation: portrait), (max-width: 820px) {
    .story-inventory-header,
    .story-card-storage-header,
    .story-merchant-header,
    .story-blacksmith-header {
        grid-template-columns: minmax(44px, .58fr) minmax(0, auto) !important;
        align-items: center !important;
        gap: 4px !important;
        min-height: 0 !important;
    }

    .story-inventory-title,
    .story-card-storage-title,
    .story-merchant-title,
    .story-blacksmith-title-block {
        min-width: 0 !important;
    }

    .story-inventory-title strong,
    .story-card-storage-title strong,
    .story-merchant-title strong,
    .story-blacksmith-title-block h3 {
        max-width: 100% !important;
        font-size: clamp(.82rem, 3.8vw, 1.28rem) !important;
        line-height: .98 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .story-inventory-header-actions,
    .story-card-storage-header-actions,
    .story-merchant-header-actions,
    .story-blacksmith-header-actions {
        box-sizing: border-box !important;
        width: auto !important;
        max-width: min(82vw, calc(100vw - 68px)) !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 3px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .story-card-storage-header-actions .story-card-storage-type-tabs,
    .story-merchant-header-actions .story-merchant-tabs,
    .story-inventory-header-actions .story-inventory-tabs,
    .story-blacksmith-tabs {
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        gap: 3px !important;
        overflow: hidden !important;
        scrollbar-width: none !important;
    }

    .story-card-storage-header-actions .story-card-storage-type-tabs::-webkit-scrollbar,
    .story-merchant-header-actions .story-merchant-tabs::-webkit-scrollbar,
    .story-inventory-header-actions .story-inventory-tabs::-webkit-scrollbar,
    .story-blacksmith-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .story-card-storage-header-actions .story-card-storage-tab,
    .story-merchant-header-actions .story-merchant-tab,
    .story-inventory-header-actions .story-inventory-tab,
    .story-blacksmith-tab,
    .story-card-storage-header-actions .story-inventory-close,
    .story-merchant-header-actions .story-inventory-close,
    .story-inventory-header-actions .story-inventory-close,
    .story-blacksmith-close {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 0 !important;
        width: clamp(38px, 11.5vw, 70px) !important;
        min-width: 0 !important;
        min-height: clamp(25px, 6.2vw, 30px) !important;
        padding: 2px 3px !important;
        font-size: clamp(.36rem, 1.75vw, .52rem) !important;
        line-height: .94 !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-align: center !important;
        overflow-wrap: anywhere !important;
    }

    .story-card-storage-header-actions .story-card-storage-tab > *,
    .story-merchant-header-actions .story-merchant-tab > *,
    .story-inventory-header-actions .story-inventory-tab > *,
    .story-blacksmith-tab > *,
    .story-card-storage-header-actions .story-inventory-close > *,
    .story-merchant-header-actions .story-inventory-close > *,
    .story-inventory-header-actions .story-inventory-close > *,
    .story-blacksmith-close > * {
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: inherit !important;
        line-height: inherit !important;
        white-space: inherit !important;
        overflow-wrap: anywhere !important;
    }

    .story-card-storage-header-actions .story-inventory-close,
    .story-merchant-header-actions .story-inventory-close,
    .story-inventory-header-actions .story-inventory-close,
    .story-blacksmith-close {
        flex: 0 1 clamp(44px, 13vw, 70px) !important;
        justify-self: auto !important;
    }
}

@media (orientation: portrait) and (hover: none) and (pointer: coarse), (orientation: portrait) and (max-width: 820px) {
    .story-inventory-header-actions,
    .story-card-storage-header-actions,
    .story-merchant-header-actions,
    .story-blacksmith-header-actions {
        flex-wrap: wrap !important;
        align-content: flex-start !important;
        row-gap: 2px !important;
    }

    .story-card-storage-header-actions .story-card-storage-type-tabs,
    .story-merchant-header-actions .story-merchant-tabs,
    .story-inventory-header-actions .story-inventory-tabs,
    .story-blacksmith-tabs {
        order: 1 !important;
    }

    .story-card-storage-header-actions .story-inventory-close,
    .story-merchant-header-actions .story-inventory-close,
    .story-merchant-header-actions .story-merchant-title-close,
    .story-inventory-header-actions .story-inventory-close,
    .story-blacksmith-close {
        order: 2 !important;
    }

    .story-merchant-header-actions .story-merchant-balance,
    .story-inventory-header-actions .story-merchant-balance,
    .story-card-storage-header-actions .story-merchant-balance,
    .story-blacksmith-header-actions .story-merchant-balance {
        order: 3 !important;
        flex: 0 0 100% !important;
        justify-content: flex-end !important;
        justify-self: end !important;
        margin-top: 1px !important;
    }
}

@media (hover: none) and (pointer: coarse), (orientation: portrait), (max-width: 820px), (max-height: 520px) {
    .story-inventory-header.is-title-hidden,
    .story-card-storage-header.is-title-hidden,
    .story-merchant-header.is-title-hidden,
    .story-blacksmith-header.is-title-hidden {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .story-inventory-header.is-title-hidden > :not(.story-inventory-header-actions),
    .story-card-storage-header.is-title-hidden > :not(.story-card-storage-header-actions),
    .story-merchant-header.is-title-hidden > :not(.story-merchant-header-actions),
    .story-blacksmith-header.is-title-hidden > :not(.story-blacksmith-header-actions) {
        display: none !important;
    }

    .story-inventory-header.is-title-hidden .story-inventory-header-actions,
    .story-card-storage-header.is-title-hidden .story-card-storage-header-actions,
    .story-merchant-header.is-title-hidden .story-merchant-header-actions,
    .story-blacksmith-header.is-title-hidden .story-blacksmith-header-actions {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: flex-end !important;
    }
}

@media (orientation: portrait) and (hover: none) and (pointer: coarse), (orientation: portrait) and (max-width: 820px) {
    .story-inventory-overlay,
    .story-card-storage-overlay,
    .story-merchant-overlay,
    .story-blacksmith-overlay,
    .story-activities-board-overlay,
    .story-relic-chest-overlay {
        padding-top: 0 !important;
    }

    .story-inventory-window,
    .story-card-storage-window,
    .story-merchant-window,
    .story-blacksmith-window,
    .story-activities-board-window,
    .story-relic-chest-window {
        padding-top: var(--omen-telegram-top-clearance, max(78px, calc(env(safe-area-inset-top, 0px) + 44px))) !important;
    }
}

@media (orientation: portrait) and (hover: none) and (pointer: coarse), (orientation: portrait) and (max-width: 820px) {
    .story-inventory-body,
    .story-card-storage-body,
    .story-blacksmith-body,
    .story-activities-board-body,
    .story-relic-chest-body {
        min-height: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    /* Cards window: battle set, hero stats, and card bonuses split the screen evenly. */
    .story-inventory-loadout.is-unified {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
        grid-template-areas:
            "cards"
            "stats"
            "buffs" !important;
        overflow: hidden !important;
    }

    .story-inventory-loadout.is-unified.has-reliquary {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
        grid-template-areas:
            "cards"
            "reliquary"
            "relicbag"
            "stats"
            "buffs" !important;
        overflow: hidden !important;
    }

    .story-inventory-loadout.is-unified .story-inventory-section,
    .story-inventory-loadout.is-unified.has-reliquary .story-inventory-section {
        min-height: 0 !important;
        max-height: 100% !important;
    }

    .story-inventory-loadout.is-unified .story-inventory-card-row {
        min-height: 0 !important;
        grid-auto-columns: minmax(150px, min(54vw, 220px)) !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    /* Relic side inventory: equipped relics and bag get equal space under the header. */
    .story-relic-panel {
        grid-template-rows: auto repeat(2, minmax(0, 1fr)) !important;
    }

    .story-relic-panel-top,
    .story-relic-panel-bag {
        min-height: 0 !important;
        max-height: 100% !important;
    }

    /* Activities board: mode list owns the full available height. */
    .story-activities-board-body {
        grid-template-rows: minmax(0, 1fr) !important;
    }

    .story-activities-board-window .story-mission-board {
        min-height: 0 !important;
        max-height: 100% !important;
    }

    .story-activities-board-window .story-mission-board {
        align-content: start !important;
        overflow-y: auto !important;
    }

    /* Blacksmith trade: player inventory, deal area, and trader inventory are thirds. */
    .story-blacksmith-trade-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
        overflow: hidden !important;
        padding-right: 0 !important;
    }

    .story-blacksmith-pane,
    .story-blacksmith-deal-pane {
        min-height: 0 !important;
        max-height: 100% !important;
    }

    .story-blacksmith-deal-pane {
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto !important;
    }

    /* Relic chest: chest, equipment, and player inventory are equal thirds. */
    .story-relic-chest-body {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    }

    .story-relic-chest-right-column {
        display: contents !important;
    }

    .story-relic-chest-section,
    .story-relic-chest-right-column > .story-relic-chest-section {
        min-height: 0 !important;
        max-height: 100% !important;
    }

    .story-relic-chest-storage-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (orientation: portrait) and (hover: none) and (pointer: coarse), (orientation: portrait) and (max-width: 820px) {
    .story-blacksmith-trade-grid {
        grid-template-rows: minmax(0, .72fr) minmax(0, 1.56fr) minmax(0, .72fr) !important;
        gap: clamp(6px, 1.4vw, 10px) !important;
    }

    .story-blacksmith-pane {
        gap: 5px !important;
        padding: clamp(6px, 1.5vw, 9px) !important;
    }

    .story-blacksmith-pane > header,
    .story-blacksmith-drop-zone > header {
        gap: 5px !important;
        min-height: 0 !important;
    }

    .story-blacksmith-pane h4,
    .story-blacksmith-drop-zone h4 {
        font-size: clamp(.68rem, 2.3vw, .82rem) !important;
        line-height: 1 !important;
    }

    .story-blacksmith-pane small,
    .story-blacksmith-drop-zone small,
    .story-blacksmith-empty-hint {
        font-size: clamp(.52rem, 1.9vw, .62rem) !important;
        line-height: 1.05 !important;
    }

    .story-blacksmith-relic-grid {
        grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)) !important;
        gap: 4px !important;
        padding: 1px 2px 4px 1px !important;
    }

    .story-blacksmith-relic {
        min-height: 76px !important;
        gap: 2px !important;
    }

    .story-blacksmith-relic.is-empty {
        min-height: 64px !important;
    }

    .story-blacksmith-relic-button {
        gap: 2px !important;
        padding: 3px !important;
    }

    .story-blacksmith-relic .story-relic-medallion,
    .story-blacksmith-selected-relic .story-relic-medallion {
        width: 32px !important;
        height: 32px !important;
    }

    .story-blacksmith-relic strong {
        font-size: clamp(.48rem, 1.75vw, .58rem) !important;
        line-height: .98 !important;
        -webkit-line-clamp: 1 !important;
    }

    .story-blacksmith-relic em {
        font-size: clamp(.44rem, 1.55vw, .52rem) !important;
        line-height: .98 !important;
        -webkit-line-clamp: 1 !important;
    }

    .story-blacksmith-price-chip {
        gap: 2px !important;
        font-size: clamp(.48rem, 1.75vw, .58rem) !important;
    }

    .story-blacksmith-price-chip img {
        width: 12px !important;
        height: 12px !important;
    }

    .story-blacksmith-deal-pane {
        gap: 6px !important;
        padding: clamp(7px, 1.6vw, 10px) !important;
    }

    .story-blacksmith-drop-zone {
        gap: 5px !important;
        padding: 6px !important;
    }

    .story-blacksmith-selected-list {
        gap: 4px !important;
    }

    .story-blacksmith-selected-relic {
        min-height: 42px !important;
        gap: 5px !important;
        padding: 4px !important;
    }

    .story-blacksmith-selected-main {
        gap: 5px !important;
    }

    .story-blacksmith-selected-main .story-relic-medallion {
        width: 30px !important;
        height: 30px !important;
    }

    .story-blacksmith-selected-main strong {
        font-size: clamp(.58rem, 2vw, .68rem) !important;
    }

    .story-blacksmith-selected-remove {
        min-height: 24px !important;
        padding: 3px 5px !important;
        font-size: .52rem !important;
    }

    .story-blacksmith-deal-summary {
        gap: 4px !important;
    }

    .story-blacksmith-deal-summary > span {
        font-size: clamp(.54rem, 1.9vw, .64rem) !important;
    }

    .story-blacksmith-deal-summary > strong {
        font-size: clamp(.82rem, 2.8vw, 1.08rem) !important;
    }

    .story-blacksmith-deal-button {
        min-height: 30px !important;
        padding: 5px 8px !important;
        font-size: clamp(.6rem, 2.1vw, .72rem) !important;
    }
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 600px) {
    body.story-relic-panel-open {
        --story-relic-panel-width: min(52vw, 240px);
    }

    .story-relic-panel {
        width: var(--story-relic-panel-width, min(52vw, 240px)) !important;
        max-width: var(--story-relic-panel-width, min(52vw, 240px)) !important;
        grid-template-rows: auto minmax(0, .86fr) minmax(0, 1fr) !important;
        gap: 5px !important;
        padding:
            var(--omen-telegram-top-clearance, max(78px, calc(env(safe-area-inset-top, 0px) + 44px)))
            max(5px, env(safe-area-inset-right, 0px))
            max(6px, env(safe-area-inset-bottom, 0px))
            5px !important;
    }

    .story-relic-panel-header {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }

    .story-relic-panel-button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 27px !important;
        padding: 4px 5px !important;
        font-size: clamp(.5rem, 2.2vw, .62rem) !important;
    }

    .story-relic-panel-slots {
        gap: 4px !important;
    }

    .story-relic-panel-slot {
        min-height: 62px !important;
        padding: 3px !important;
    }

    .story-relic-panel-bag {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 4px !important;
    }

    .story-relic-panel-bag-slot {
        min-height: 58px !important;
        padding: 3px !important;
    }

    .story-relic-panel .story-relic-medallion,
    .story-relic-panel .story-relic-empty-medallion {
        width: clamp(30px, 8.2vw, 42px) !important;
        height: clamp(30px, 8.2vw, 42px) !important;
    }

    .story-relic-panel-bag-slot .story-relic-panel-small-action,
    .story-relic-panel-slot .story-relic-panel-small-action {
        min-height: 19px !important;
        padding: 2px 3px !important;
        font-size: clamp(.42rem, 1.9vw, .52rem) !important;
    }

    .story-relic-info-popover {
        width: min(240px, calc(100vw - var(--story-relic-panel-width, min(52vw, 240px)) - 12px)) !important;
        max-width: calc(100vw - var(--story-relic-panel-width, min(52vw, 240px)) - 12px) !important;
        right: calc(var(--story-relic-panel-width, min(52vw, 240px)) + 6px) !important;
    }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
    body.story-relic-panel-open {
        --story-relic-panel-width: min(42vw, 320px);
    }

    .story-relic-panel {
        width: var(--story-relic-panel-width, min(42vw, 320px)) !important;
        max-width: var(--story-relic-panel-width, min(42vw, 320px)) !important;
        grid-template-rows: auto minmax(0, .72fr) minmax(0, 1fr) !important;
        gap: 5px !important;
        padding:
            var(--omen-telegram-top-clearance, max(42px, calc(env(safe-area-inset-top, 0px) + 32px)))
            max(6px, env(safe-area-inset-right, 0px))
            max(6px, env(safe-area-inset-bottom, 0px))
            6px !important;
    }

    .story-relic-panel-header {
        gap: 4px !important;
    }

    .story-relic-panel-button {
        min-width: 0 !important;
        min-height: 26px !important;
        padding: 4px 7px !important;
        font-size: clamp(.5rem, 1.8vw, .62rem) !important;
    }

    .story-relic-panel-top,
    .story-relic-panel-bag {
        overflow: hidden !important;
    }

    .story-relic-panel-slots {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }

    .story-relic-panel-slot {
        grid-template-rows: minmax(0, 1fr) !important;
        min-height: 0 !important;
        padding: 2px !important;
    }

    .story-relic-panel-bag {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
        gap: 3px !important;
        padding: 4px !important;
    }

    .story-relic-panel-bag-slot {
        grid-template-rows: minmax(0, 1fr) !important;
        min-height: 0 !important;
        gap: 0 !important;
        padding: 2px !important;
    }

    .story-relic-panel-bag-slot .story-relic-panel-medallion-button {
        height: 100% !important;
    }

    .story-relic-panel .story-relic-medallion,
    .story-relic-panel .story-relic-empty-medallion {
        width: clamp(28px, 7.6dvh, 40px) !important;
        height: clamp(28px, 7.6dvh, 40px) !important;
        font-size: clamp(.78rem, 3.1dvh, 1.05rem) !important;
    }

    .story-relic-panel .story-relic-panel-small-action,
    .story-relic-info-card footer [data-story-relic-equip],
    .story-relic-info-card footer [data-story-relic-unequip],
    .story-relic-info-card footer [data-story-companion-relic-equip],
    .story-relic-info-card footer [data-story-companion-relic-unequip] {
        display: none !important;
    }

    .story-relic-info-card footer {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .story-relic-chest-window {
        gap: 5px !important;
    }

    .story-relic-chest-topbar {
        min-height: 32px !important;
    }

    .story-relic-chest-body {
        grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        gap: 6px !important;
        padding: 6px !important;
    }

    .story-relic-chest-right-column {
        display: grid !important;
        grid-template-rows: minmax(0, .42fr) minmax(0, 1fr) !important;
        gap: 6px !important;
    }

    .story-relic-chest-section {
        gap: 4px !important;
        padding: 5px !important;
    }

    .story-relic-chest-section-header {
        min-height: 24px !important;
    }

    .story-relic-chest-section-header strong {
        font-size: clamp(.68rem, 2.2dvh, .86rem) !important;
    }

    .story-relic-chest-detail-button {
        width: clamp(76px, 13vw, 104px) !important;
        min-height: 24px !important;
        padding: 3px 7px !important;
        font-size: clamp(.48rem, 1.85dvh, .6rem) !important;
    }

    .story-relic-chest-grid,
    .story-relic-chest-equipment-slots {
        gap: 3px !important;
    }

    .story-relic-chest-storage-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    }

    .story-relic-chest-inventory-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    }

    .story-relic-chest-equipment-slots {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        grid-template-rows: minmax(0, 1fr) !important;
    }

    .story-relic-chest-grid .story-relic-panel-bag-slot,
    .story-relic-chest-equipment-slot {
        padding: 2px !important;
    }

    .story-relic-chest-grid .story-relic-medallion {
        width: min(clamp(24px, 7.4dvh, 38px), 100%) !important;
        height: min(clamp(24px, 7.4dvh, 38px), 100%) !important;
        font-size: clamp(.7rem, 2.9dvh, 1rem) !important;
    }

    .story-relic-chest-equipment-slot .story-relic-medallion,
    .story-relic-chest-equipment-slot .story-relic-empty-medallion {
        width: min(clamp(22px, 6.5dvh, 34px), 100%) !important;
        height: min(clamp(22px, 6.5dvh, 34px), 100%) !important;
        font-size: clamp(.64rem, 2.5dvh, .9rem) !important;
    }

    .story-relic-chest-info-popover {
        top: max(40px, env(safe-area-inset-top, 0px)) !important;
        width: min(300px, calc(100vw - 18px)) !important;
        max-height: calc(100dvh - 52px) !important;
    }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
    #storyCardsOverlay .story-inventory-window {
        padding-top: var(--omen-telegram-top-clearance, max(42px, calc(env(safe-area-inset-top, 0px) + 32px))) !important;
        gap: 5px !important;
    }

    #storyCardsOverlay .story-inventory-header {
        min-height: 28px !important;
        align-items: center !important;
        gap: 6px !important;
    }

    #storyCardsOverlay .story-inventory-header h3 {
        font-size: clamp(.9rem, 3.2dvh, 1.12rem) !important;
        line-height: 1 !important;
    }

    #storyCardsOverlay .story-inventory-header-actions {
        width: auto !important;
        max-width: none !important;
        display: flex !important;
        justify-content: flex-end !important;
        justify-self: end !important;
        align-items: center !important;
        gap: 0 !important;
    }

    #storyCardsOverlay .story-inventory-header-actions .story-merchant-balance {
        display: none !important;
    }

    #storyCardsOverlay .story-inventory-close {
        width: clamp(78px, 13dvw, 104px) !important;
        min-width: 0 !important;
        min-height: 28px !important;
        padding: 4px 8px !important;
        font-size: clamp(.48rem, 1.7dvh, .58rem) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #storyCardsOverlay .story-inventory-body {
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #storyCardsOverlay .story-inventory-loadout.is-unified {
        height: 100% !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 73.5dvw) minmax(0, 1fr) minmax(138px, 17.2dvw) !important;
        grid-template-rows: minmax(0, .92fr) minmax(0, 1fr) !important;
        grid-template-areas:
            "cards . stats"
            "cards . buffs" !important;
        justify-content: stretch !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding: 4px 6px 6px 4px !important;
        overflow: hidden !important;
    }

    #storyCardsOverlay .story-inventory-section {
        min-height: 0 !important;
        max-height: 100% !important;
        gap: 4px !important;
        padding: 6px !important;
        overflow: hidden !important;
    }

    #storyCardsOverlay .story-inventory-section-cards {
        position: relative !important;
        justify-self: start !important;
        min-width: 0 !important;
        max-width: 73.5dvw !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    #storyCardsOverlay .story-inventory-section-cards::after {
        content: "" !important;
        position: absolute !important;
        z-index: 3 !important;
        top: 34px !important;
        right: 4px !important;
        bottom: 12px !important;
        width: 22px !important;
        pointer-events: none !important;
        background: linear-gradient(90deg, transparent, rgba(30, 20, 12, .55)) !important;
    }

    #storyCardsOverlay .story-inventory-section header {
        min-height: 24px !important;
        gap: 4px !important;
    }

    #storyCardsOverlay .story-inventory-section h4 {
        font-size: clamp(.7rem, 2.45dvh, .88rem) !important;
        line-height: 1 !important;
    }

    #storyCardsOverlay .story-inventory-section small {
        font-size: clamp(.52rem, 1.9dvh, .66rem) !important;
        line-height: 1 !important;
    }

    #storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-card-row {
        grid-auto-flow: column !important;
        grid-template-rows: minmax(0, 1fr) !important;
        grid-auto-columns: minmax(120px, calc((100% - 8px) / 2)) !important;
        align-items: stretch !important;
        align-content: stretch !important;
        gap: 8px !important;
        padding: 3px 22px 13px 2px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-color: rgba(240, 207, 138, .65) rgba(0, 0, 0, .22) !important;
        scrollbar-width: thin !important;
    }

    #storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-card-row::-webkit-scrollbar {
        height: 7px !important;
    }

    #storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-card-row::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, .22) !important;
    }

    #storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-card-row::-webkit-scrollbar-thumb {
        border: 1px solid rgba(0, 0, 0, .42) !important;
        background: linear-gradient(90deg, rgba(240, 207, 138, .76), rgba(116, 81, 42, .84)) !important;
    }

    #storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-slot-card {
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: 100% !important;
        gap: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        scroll-snap-align: start !important;
    }

    #storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-slot-card:not(.is-empty) {
        background: transparent !important;
        box-shadow: none !important;
    }

    #storyCardsOverlay .story-inventory-loadout.is-unified .story-small-card-art {
        height: 100% !important;
        width: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }

    #storyCardsOverlay .story-inventory-loadout.is-unified .story-small-card-art > b {
        font-size: clamp(.4rem, 1.55dvh, .58rem) !important;
    }

    #storyCardsOverlay .story-inventory-loadout.is-unified .story-small-card-description {
        font-size: clamp(.46rem, 1.68dvh, .62rem) !important;
        line-height: 1.04 !important;
    }

    #storyCardsOverlay .story-inventory-section-stats,
    #storyCardsOverlay .story-inventory-section-buffs {
        min-width: 0 !important;
        width: 100% !important;
        max-width: max(138px, 17.2dvw) !important;
        justify-self: end !important;
    }

    #storyCardsOverlay .story-inventory-stat-list,
    #storyCardsOverlay .story-inventory-buff-list {
        gap: 3px !important;
        padding-right: 4px !important;
        overflow: auto !important;
    }

    #storyCardsOverlay .story-inventory-stat-list span,
    #storyCardsOverlay .story-inventory-buff-list span {
        padding: 4px 0 !important;
    }

    #storyCardsOverlay .story-inventory-stat-list b,
    #storyCardsOverlay .story-inventory-buff-list b {
        font-size: clamp(.56rem, 2dvh, .7rem) !important;
        line-height: 1.06 !important;
    }

    #storyCardsOverlay .story-inventory-stat-list strong,
    #storyCardsOverlay .story-inventory-buff-list strong {
        font-size: clamp(.58rem, 2.05dvh, .72rem) !important;
        line-height: 1.05 !important;
    }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
    #storyBlacksmithOverlay .story-blacksmith-window {
        padding:
            var(--omen-telegram-top-clearance, max(42px, calc(env(safe-area-inset-top, 0px) + 32px)))
            max(10px, env(safe-area-inset-right, 0px))
            max(8px, env(safe-area-inset-bottom, 0px))
            max(10px, env(safe-area-inset-left, 0px)) !important;
        gap: 5px !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-header {
        min-height: 28px !important;
        grid-template-columns: minmax(54px, .42fr) minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 6px !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-title-block h3 {
        font-size: clamp(.9rem, 3.2dvh, 1.12rem) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-header-actions {
        width: auto !important;
        max-width: none !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        justify-self: end !important;
        align-items: center !important;
        gap: 4px !important;
        overflow: hidden !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-tabs {
        flex: 0 1 auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        gap: 3px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-tab,
    #storyBlacksmithOverlay .story-blacksmith-close {
        flex: 0 1 clamp(62px, 11dvw, 94px) !important;
        width: clamp(62px, 11dvw, 94px) !important;
        min-width: 0 !important;
        min-height: 28px !important;
        padding: 4px 7px !important;
        font-size: clamp(.46rem, 1.7dvh, .58rem) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-header-actions .story-merchant-balance {
        flex: 0 0 auto !important;
        min-height: 24px !important;
        gap: 3px !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-header-actions .story-merchant-balance img {
        width: 16px !important;
        height: 16px !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-header-actions .story-merchant-balance strong {
        font-size: clamp(.58rem, 2dvh, .72rem) !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-body {
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-trade-grid {
        height: 100% !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(170px, .84fr) minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        gap: 6px !important;
        overflow: hidden !important;
        padding-right: 0 !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-player-pane {
        grid-column: 1 !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-deal-pane {
        grid-column: 2 !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-stock-pane {
        grid-column: 3 !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-pane,
    #storyBlacksmithOverlay .story-blacksmith-deal-pane {
        min-height: 0 !important;
        max-height: 100% !important;
        gap: 5px !important;
        padding: 6px !important;
        overflow: hidden !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-pane {
        grid-template-rows: auto minmax(0, 1fr) !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-deal-pane {
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-pane > header,
    #storyBlacksmithOverlay .story-blacksmith-drop-zone > header {
        min-height: 0 !important;
        gap: 5px !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-pane h4,
    #storyBlacksmithOverlay .story-blacksmith-drop-zone h4 {
        font-size: clamp(.62rem, 2.25dvh, .78rem) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-pane small,
    #storyBlacksmithOverlay .story-blacksmith-drop-zone small,
    #storyBlacksmithOverlay .story-blacksmith-empty-hint {
        font-size: clamp(.48rem, 1.75dvh, .58rem) !important;
        line-height: 1.05 !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-relic-grid {
        min-height: 0 !important;
        grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)) !important;
        gap: 4px !important;
        padding: 1px 2px 4px 1px !important;
        overflow: auto !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-relic {
        min-height: 76px !important;
        gap: 2px !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-relic.is-empty {
        min-height: 58px !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-relic-button {
        gap: 2px !important;
        padding: 3px !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-relic .story-relic-medallion,
    #storyBlacksmithOverlay .story-blacksmith-selected-relic .story-relic-medallion {
        width: min(clamp(28px, 7dvh, 38px), 100%) !important;
        height: min(clamp(28px, 7dvh, 38px), 100%) !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-relic strong {
        font-size: clamp(.46rem, 1.72dvh, .56rem) !important;
        line-height: .98 !important;
        -webkit-line-clamp: 1 !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-relic em {
        font-size: clamp(.42rem, 1.55dvh, .5rem) !important;
        line-height: .98 !important;
        -webkit-line-clamp: 1 !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-price-chip {
        gap: 2px !important;
        font-size: clamp(.48rem, 1.72dvh, .58rem) !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-price-chip img {
        width: 12px !important;
        height: 12px !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-drop-zone {
        gap: 4px !important;
        padding: 5px !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-selected-list {
        gap: 4px !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-selected-relic {
        min-height: 38px !important;
        gap: 5px !important;
        padding: 4px !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-selected-main {
        gap: 5px !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-selected-main .story-relic-medallion {
        width: 28px !important;
        height: 28px !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-selected-main strong {
        font-size: clamp(.54rem, 1.95dvh, .64rem) !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-selected-remove {
        min-height: 22px !important;
        padding: 3px 5px !important;
        font-size: .5rem !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-deal-summary {
        gap: 4px !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-deal-summary > span {
        font-size: clamp(.5rem, 1.78dvh, .6rem) !important;
        line-height: 1.05 !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-deal-summary > strong {
        font-size: clamp(.78rem, 2.7dvh, 1rem) !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-deal-button {
        min-height: 28px !important;
        padding: 5px 8px !important;
        font-size: clamp(.58rem, 2dvh, .7rem) !important;
    }

    #storyBlacksmithOverlay .story-blacksmith-window .story-blacksmith-info-popover {
        top: var(--omen-telegram-top-clearance, max(42px, calc(env(safe-area-inset-top, 0px) + 32px))) !important;
        width: min(300px, calc(100vw - 18px)) !important;
        max-height: calc(100dvh - 52px) !important;
    }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
    .story-merchant-overlay .story-merchant-window {
        padding:
            var(--omen-telegram-top-clearance, max(42px, calc(env(safe-area-inset-top, 0px) + 32px)))
            max(10px, env(safe-area-inset-right, 0px))
            max(8px, env(safe-area-inset-bottom, 0px))
            max(10px, env(safe-area-inset-left, 0px)) !important;
        gap: 5px !important;
    }

    .story-merchant-overlay .story-merchant-header {
        min-height: 28px !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .story-merchant-overlay .story-merchant-header-actions {
        width: auto !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: minmax(78px, 104px) !important;
        grid-template-rows: auto auto !important;
        justify-items: end !important;
        align-items: start !important;
        justify-content: end !important;
        gap: 2px !important;
        overflow: visible !important;
    }

    .story-merchant-overlay .story-merchant-title-close {
        grid-row: 1 !important;
        width: clamp(78px, 13dvw, 104px) !important;
        min-width: 0 !important;
        min-height: 28px !important;
        padding: 4px 8px !important;
        font-size: clamp(.48rem, 1.7dvh, .58rem) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .story-merchant-overlay .story-merchant-header-actions .story-merchant-balance {
        grid-row: 2 !important;
        justify-self: end !important;
        justify-content: flex-end !important;
        min-height: 18px !important;
        margin-top: 1px !important;
        gap: 3px !important;
    }

    .story-merchant-overlay .story-merchant-header-actions .story-merchant-balance img {
        width: 16px !important;
        height: 16px !important;
    }

    .story-merchant-overlay .story-merchant-header-actions .story-merchant-balance strong {
        font-size: clamp(.58rem, 2dvh, .72rem) !important;
    }
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
    .story-merchant-overlay {
        --story-merchant-portrait-card-width: clamp(158px, 54vw, 243px);
    }

    .story-merchant-overlay .story-merchant-header {
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
    }

    .story-merchant-overlay .story-merchant-header-actions {
        width: auto !important;
        max-width: min(42vw, 118px) !important;
        display: grid !important;
        grid-template-columns: minmax(82px, 112px) !important;
        justify-items: end !important;
        justify-content: end !important;
        justify-self: end !important;
        margin-left: auto !important;
        gap: 2px !important;
        overflow: visible !important;
    }

    .story-merchant-overlay .story-merchant-title-close {
        justify-self: end !important;
        width: clamp(82px, 25vw, 112px) !important;
        min-width: 0 !important;
        min-height: 29px !important;
        padding: 4px 8px !important;
        font-size: clamp(.48rem, 1.9vw, .58rem) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .story-merchant-overlay .story-merchant-header-actions .story-merchant-balance {
        justify-self: end !important;
        justify-content: flex-end !important;
        min-height: 18px !important;
        gap: 3px !important;
    }

    .story-merchant-overlay .story-merchant-header-actions .story-merchant-balance img {
        width: 16px !important;
        height: 16px !important;
    }

    .story-merchant-overlay .story-merchant-header-actions .story-merchant-balance strong {
        font-size: clamp(.58rem, 2.35vw, .72rem) !important;
    }

    .story-merchant-overlay .story-merchant-offers {
        inset: 5% 0 4% !important;
        grid-template-columns: none !important;
        grid-auto-flow: column !important;
        grid-auto-columns: var(--story-merchant-portrait-card-width) !important;
        justify-content: start !important;
        align-content: center !important;
        gap: 8px !important;
        align-items: center !important;
        justify-items: center !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0 max(8px, env(safe-area-inset-right, 0px)) 6px max(8px, env(safe-area-inset-left, 0px)) !important;
        overscroll-behavior-x: contain !important;
        scroll-snap-type: x proximity !important;
        scrollbar-width: thin !important;
    }

    .story-merchant-overlay .story-merchant-offer {
        min-width: 0 !important;
        width: var(--story-merchant-portrait-card-width) !important;
        max-width: var(--story-merchant-portrait-card-width) !important;
        gap: 5px !important;
        scroll-snap-align: center !important;
    }

    .story-merchant-overlay .story-merchant-offer .story-merchant-card-display,
    .story-merchant-overlay .story-merchant-window .story-merchant-card-display {
        width: var(--story-merchant-portrait-card-width) !important;
        min-width: var(--story-merchant-portrait-card-width) !important;
        max-width: var(--story-merchant-portrait-card-width) !important;
        max-height: min(62dvh, 405px) !important;
    }

    .story-merchant-overlay .story-merchant-card-art {
        width: 100% !important;
        height: 100% !important;
    }

    .story-merchant-overlay .story-merchant-card-name {
        font-size: clamp(.54rem, 2.3vw, .82rem) !important;
    }

    .story-merchant-overlay .story-merchant-card-description {
        font-size: clamp(.66rem, 2.75vw, .98rem) !important;
        line-height: 1.04 !important;
    }

    .story-merchant-overlay .story-merchant-price-tag {
        width: var(--story-merchant-portrait-card-width) !important;
        max-width: var(--story-merchant-portrait-card-width) !important;
        gap: 2px !important;
    }

    .story-merchant-overlay .story-merchant-price-tag .run-setup-primary {
        min-height: 30px !important;
        padding: 4px 5px !important;
        font-size: clamp(.56rem, 2vw, .7rem) !important;
        gap: 4px !important;
    }

    .story-merchant-overlay .story-merchant-price-tag .run-setup-primary img {
        width: 17px !important;
        height: 17px !important;
    }
}

@media (orientation: portrait) and (hover: none) and (pointer: coarse), (orientation: portrait) and (max-width: 820px) {
    #storyCardsOverlay .story-inventory-loadout.is-unified {
        grid-template-rows: minmax(0, 1.44fr) minmax(0, .78fr) minmax(0, .78fr) !important;
    }

    #storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-card-row {
        grid-auto-flow: column !important;
        grid-template-rows: minmax(0, 1fr) !important;
        grid-auto-columns: minmax(142px, min(58vw, 214px)) !important;
        justify-content: start !important;
        align-items: stretch !important;
        align-content: stretch !important;
        gap: 6px !important;
        padding: 3px 12px 12px 2px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        scrollbar-color: rgba(240, 207, 138, .62) rgba(0, 0, 0, .20) !important;
        scrollbar-width: thin !important;
    }

    #storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-card-row::-webkit-scrollbar {
        height: 7px !important;
    }

    #storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-card-row::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, .20) !important;
    }

    #storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-card-row::-webkit-scrollbar-thumb {
        border: 1px solid rgba(0, 0, 0, .36) !important;
        background: linear-gradient(90deg, rgba(240, 207, 138, .72), rgba(116, 81, 42, .80)) !important;
    }

    #storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-slot-card,
    #storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-slot-card:not(.is-empty),
    #storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-slot-card.is-empty {
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: 100% !important;
        gap: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        color: inherit !important;
        background: transparent !important;
        box-shadow: none !important;
        scroll-snap-align: start !important;
    }

    #storyCardsOverlay .story-inventory-loadout.is-unified .story-small-card-art {
        --story-card-title-y: 6.5%;
        --story-card-title-h: 5.95%;
        height: 100% !important;
        width: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }
}

#storyCardsOverlay .story-inventory-section-cards {
    width: 95% !important;
    max-width: 95% !important;
}

/* Story cards window text pass: reduce window UI text by 2px, but keep card names/descriptions untouched. */
#storyCardsOverlay .story-inventory-header h3 {
    font-size: clamp(calc(1.45rem - 2px), calc(3.2vw - 2px), calc(2.5rem - 2px)) !important;
}

#storyCardsOverlay .story-inventory-close {
    font-size: calc(.72rem - 2px) !important;
}

#storyCardsOverlay .story-inventory-section h4,
#storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-section-stats h4,
#storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-section-buffs h4,
#storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-section-cards h4 {
    font-size: clamp(calc(1.06rem - 2px), calc(1.65vw - 2px), calc(1.32rem - 2px)) !important;
}

#storyCardsOverlay .story-inventory-section small,
#storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-section-cards small {
    font-size: calc(.94rem - 2px) !important;
}

#storyCardsOverlay .story-inventory-card-action {
    font-size: calc(.58rem - 2px) !important;
}

#storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-stat-list b,
#storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-buff-list b {
    font-size: calc(.96rem - 5px) !important;
}

#storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-stat-list strong,
#storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-buff-list strong {
    font-size: calc(.98rem - 5px) !important;
}

#storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-section-stats h4,
#storyCardsOverlay .story-inventory-loadout.is-unified .story-inventory-section-buffs h4 {
    font-size: clamp(calc(1.06rem - 5px), calc(1.65vw - 5px), calc(1.32rem - 5px)) !important;
}

#storyCardsOverlay .story-inventory-section-stats small,
#storyCardsOverlay .story-inventory-section-buffs small {
    font-size: calc(.94rem - 5px) !important;
}

/* Viewport-fit guard: story fullscreen windows fill the real overlay box, not raw 100vw. */
.story-inventory-overlay,
.story-card-storage-overlay,
.story-merchant-overlay,
.story-activities-board-overlay,
.story-blacksmith-overlay {
    box-sizing: border-box !important;
    width: auto !important;
    height: auto !important;
    max-width: 100dvw !important;
    max-height: 100dvh !important;
}

.story-inventory-window,
.story-card-storage-window,
.story-merchant-window,
.story-activities-board-window,
.story-blacksmith-window {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
}

.story-death-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 15000 !important;
    display: grid !important;
    place-items: center !important;
    padding:
        max(18px, env(safe-area-inset-top, 0px))
        max(16px, env(safe-area-inset-right, 0px))
        max(18px, env(safe-area-inset-bottom, 0px))
        max(16px, env(safe-area-inset-left, 0px)) !important;
    background:
        radial-gradient(circle at 50% 34%, rgba(122, 24, 20, .18), transparent 38%),
        linear-gradient(180deg, rgba(4, 5, 7, .82), rgba(3, 2, 2, .95)) !important;
    pointer-events: auto !important;
}

.story-death-panel {
    box-sizing: border-box !important;
    width: min(420px, calc(100vw - 34px)) !important;
    min-height: 220px !important;
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 22px !important;
    padding: clamp(26px, 5vw, 42px) clamp(20px, 4vw, 34px) !important;
    border: 1px solid rgba(215, 189, 130, .32) !important;
    color: #f3dfb2 !important;
    background:
        linear-gradient(180deg, rgba(42, 25, 18, .94), rgba(8, 6, 5, .97)),
        var(--omen-window-modal-portrait) center / 100% 100% no-repeat !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .62), inset 0 0 28px rgba(118, 43, 32, .14) !important;
    text-align: center !important;
}

.story-death-panel h2 {
    margin: 0 !important;
    color: #fff2c4 !important;
    font-size: clamp(1.65rem, 4.2vw, 2.65rem) !important;
    line-height: .95 !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .78), 0 0 18px rgba(145, 36, 26, .34) !important;
}

.story-death-actions {
    width: min(320px, 100%) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.story-death-action {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    font-size: .72rem !important;
    white-space: nowrap !important;
}

@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .story-death-panel {
        width: min(360px, calc(100vw - 28px)) !important;
        min-height: 200px !important;
    }

    .story-death-actions {
        grid-template-columns: 1fr !important;
        width: min(220px, 100%) !important;
        gap: 7px !important;
    }
}

/* Cards window landscape fallback: widen side info panels without changing combat loadout width. */
@media (orientation: landscape) and (max-height: 620px), (orientation: landscape) and (max-width: 980px) {
    #storyCardsOverlay .story-inventory-loadout.is-unified {
        grid-template-columns: minmax(0, 73.5dvw) minmax(0, 1fr) minmax(138px, 17.2dvw) !important;
    }

    #storyCardsOverlay .story-inventory-section-stats,
    #storyCardsOverlay .story-inventory-section-buffs {
        width: 100% !important;
        max-width: max(138px, 17.2dvw) !important;
        justify-self: end !important;
    }
}