/* In-game interface styles: gameplay HUD, combat controls, tutorial HUD, and story-world interaction controls.
   Full-screen windows belong in css/omen-window.css?v=7903c24-20260629075437; legacy modal windows stay in css/omen-legacy-windows.css?v=7903c24-20260629075437. */

/* Extracted from css/omen-ui-theme.css?v=7903c24-20260629075437 */
.hud-clean-container {
    top: max(10px, env(safe-area-inset-top)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    width: min(320px, calc(100vw - 124px)) !important;
    padding: 10px 12px 9px !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background:
        linear-gradient(145deg, rgba(0, 7, 10, .88), rgba(0, 0, 0, .74)),
        var(--omen-window-card-wide) center / 100% 100% no-repeat !important;
    box-shadow:
        0 14px 26px rgba(0, 0, 0, .36),
        0 0 18px rgba(92, 246, 213, .08) !important;
    backdrop-filter: blur(4px) !important;
}.hud-clean-container::before,
.hud-clean-container::after {
    content: none !important;
    display: none !important;
}.hud-clean-container .hud-health-card {
    padding: 0 0 7px !important;
    border-bottom: 1px solid rgba(92, 246, 213, .15) !important;
}.hud-clean-container .hud-health-top {
    margin-bottom: 6px !important;
}.hud-clean-container .hud-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px 8px !important;
    margin-top: 7px !important;
}.hud-clean-container .hud-row {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}.hud-clean-container .hud-wave-row {
    grid-column: span 3 !important;
    display: none !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding-top: 5px !important;
    border-top: 1px solid rgba(215, 189, 130, .15) !important;
}.hud-clean-container .hud-wave-row[style*="grid"] {
    display: grid !important;
}.hud-clean-container .hud-label {
    display: block !important;
    margin-bottom: 2px !important;
    color: rgba(92, 246, 213, .78) !important;
    font-size: .47rem !important;
    letter-spacing: .11em !important;
}.hud-clean-container .hud-value {
    display: block !important;
    color: #f3dfb2 !important;
    font-size: .84rem !important;
    line-height: 1 !important;
    text-align: left !important;
}.hud-clean-container .hud-health-card .hud-value {
    text-align: right !important;
}.hud-clean-container .health-bar {
    height: 5px !important;
    background: rgba(0, 0, 0, .48) !important;
}.hud-clean-container .health-fill {
    background:
        linear-gradient(90deg, #df3050 0%, #e9b15b 52%, #5cf6d5 100%) !important;
    box-shadow: 0 0 12px rgba(92, 246, 213, .30) !important;
}.hud-action-cluster {
    position: fixed !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    z-index: 620 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    pointer-events: auto !important;
}.hud-action-button {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: grid !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    cursor: pointer !important;
    background:
        var(--omen-window-card-compact) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    filter:
        drop-shadow(0 10px 18px rgba(0, 0, 0, .45))
        drop-shadow(0 0 12px rgba(92, 246, 213, .12)) !important;
    transition: transform .16s ease, filter .16s ease !important;
}.hud-action-button:hover {
    transform: translateY(-2px) !important;
    filter:
        drop-shadow(0 13px 22px rgba(0, 0, 0, .52))
        drop-shadow(0 0 18px rgba(92, 246, 213, .22)) !important;
}.hud-action-button:active {
    transform: translateY(1px) scale(.96) !important;
}.hud-pause-button span {
    width: 17px !important;
    height: 19px !important;
    background:
        linear-gradient(90deg, #f3dfb2 0 34%, transparent 34% 66%, #f3dfb2 66% 100%) !important;
    filter: drop-shadow(0 0 8px rgba(243, 223, 178, .24)) !important;
}.hud-fps-counter {
    min-width: 54px !important;
    padding: 0 !important;
    color: #5cff9a !important;
    font: 800 11px/1 var(--omen-font-body, serif) !important;
    text-align: center !important;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, .95),
        0 0 10px rgba(92, 255, 154, .48) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
}.hud-fps-counter[hidden] {
    display: none !important;
}.experience-clean-container {
    width: min(300px, calc(100vw - 112px)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    padding: 2px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .40) !important;
}.experience-clean-container .experience-bottom-track {
    height: 5px !important;
    background: rgba(2, 16, 9, .86) !important;
}.experience-clean-container .experience-bottom-fill {
    background: linear-gradient(90deg, #1fbf68 0%, #7bed9f 100%) !important;
    box-shadow: 0 0 14px rgba(123, 237, 159, .45) !important;
}.mobile-joystick-control {
    position: fixed !important;
    left: 0;
    top: 0;
    z-index: 610 !important;
    opacity: 0;
    pointer-events: none !important;
    transform: translate(-50%, -50%) scale(.82);
    transform-origin: center;
    transition: opacity .12s ease, transform .12s ease;
    will-change: left, top, opacity, transform;
}.mobile-joystick-control.is-active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}.mobile-joystick-control__ring,
.mobile-joystick-control__knob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none !important;
}.mobile-joystick-control__ring {
    inset: 0;
    border: 1px solid rgba(92, 246, 213, .42);
    background:
        radial-gradient(circle, rgba(92, 246, 213, .10) 0 34%, rgba(0, 0, 0, .18) 35% 100%);
    box-shadow:
        0 0 22px rgba(0, 0, 0, .52),
        inset 0 0 18px rgba(92, 246, 213, .12),
        inset 0 0 0 7px rgba(0, 0, 0, .18);
}.mobile-joystick-control__knob {
    left: 50%;
    top: 50%;
    width: 38%;
    height: 38%;
    border: 1px solid rgba(243, 223, 178, .54);
    background:
        radial-gradient(circle at 38% 32%, rgba(243, 223, 178, .34), rgba(92, 246, 213, .20) 42%, rgba(4, 10, 13, .82) 100%);
    box-shadow:
        0 6px 14px rgba(0, 0, 0, .48),
        0 0 12px rgba(92, 246, 213, .22);
    transform: translate(-50%, -50%);
}

@media (orientation: portrait) {.hud-clean-container {
        width: min(196px, calc(100vw - 126px)) !important;
        padding: 8px 9px !important;
    }.hud-clean-container .hud-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }.hud-clean-container .hud-wave-row {
        grid-column: span 2 !important;
    }.hud-action-cluster {
        gap: 6px !important;
    }.hud-action-button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }.experience-clean-container {
        width: min(300px, calc(100vw - 86px)) !important;
    }}.hud-clean-container {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: max(32px, calc(env(safe-area-inset-bottom) + 32px)) !important;
    left: 50% !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: clamp(8px, 1.5vw, 16px) !important;
    width: min(620px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    padding: 0 4px !important;
    transform: translateX(-50%) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    pointer-events: none !important;
    text-shadow:
        0 2px 5px rgba(0, 0, 0, .88),
        0 0 12px rgba(0, 0, 0, .72) !important;
}.hud-clean-container .hud-health-card {
    flex: 0 0 auto !important;
    min-width: min(142px, 32vw) !important;
    padding: 0 !important;
    border: 0 !important;
}.hud-clean-container .hud-health-top {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
}.hud-clean-container .hud-grid {
    display: flex !important;
    flex: 0 1 auto !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 5px clamp(8px, 1.4vw, 14px) !important;
    min-width: 0 !important;
    margin-top: 0 !important;
}.hud-clean-container .hud-row,
.hud-clean-container .hud-wave-row,
.hud-clean-container .hud-wave-row[style*="grid"] {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    flex: 0 0 auto !important;
    grid-column: auto !important;
}.hud-clean-container .hud-wave-row:not([style*="grid"]) {
    display: none !important;
}.hud-clean-container .hud-label {
    margin: 0 !important;
    color: rgba(92, 246, 213, .86) !important;
    font-size: clamp(.46rem, .75vw, .58rem) !important;
    letter-spacing: .08em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}.hud-clean-container .hud-value,
.hud-clean-container .hud-health-card .hud-value {
    color: #f3dfb2 !important;
    font-size: clamp(.72rem, 1.15vw, .92rem) !important;
    line-height: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
}.hud-clean-container .health-bar {
    width: 100% !important;
    height: 3px !important;
    margin-top: 4px !important;
    background: rgba(0, 0, 0, .42) !important;
}.hud-clean-container .health-fill {
    box-shadow: 0 0 8px rgba(92, 246, 213, .42) !important;
}.hud-action-cluster {
    top: max(64px, calc(env(safe-area-inset-top) + 52px)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
}

@media (max-height: 620px) and (orientation: landscape) {.hud-clean-container {
        bottom: max(27px, calc(env(safe-area-inset-bottom) + 27px)) !important;
        width: min(560px, calc(100vw - 18px)) !important;
        gap: 7px 12px !important;
    }.hud-clean-container .hud-health-card {
        min-width: min(128px, 20vw) !important;
    }.hud-clean-container .hud-grid {
        gap: 4px 10px !important;
    }.hud-action-cluster {
        top: max(58px, calc(env(safe-area-inset-top) + 46px)) !important;
    }}

@media (orientation: portrait) {.hud-clean-container {
        bottom: max(31px, calc(env(safe-area-inset-bottom) + 31px)) !important;
        width: min(340px, calc(100vw - 40px)) !important;
        gap: 5px 9px !important;
    }.hud-clean-container .hud-grid {
        flex-wrap: wrap !important;
        gap: 4px 9px !important;
    }.hud-clean-container .hud-wave-row {
        grid-column: auto !important;
    }.hud-clean-container .health-bar {
        width: 100% !important;
    }.hud-clean-container .hud-health-card {
        min-width: min(132px, 38vw) !important;
    }.hud-action-cluster {
        top: max(66px, calc(env(safe-area-inset-top) + 54px)) !important;
    }}.hud-action-cluster {
    top: var(--omen-telegram-top-clearance) !important;
}.hud-action-cluster {
    position: fixed !important;
    top: var(--omen-telegram-top-clearance) !important;
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: auto !important;
    z-index: 620 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    pointer-events: auto !important;
}.hud-action-cluster .hud-action-button {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
}.story-quest-toggle-button {
    position: fixed !important;
    top: calc(var(--omen-telegram-top-clearance) + 56px) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    z-index: 620 !important;
    display: grid !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    place-items: center !important;
    appearance: none !important;
    border: 1px solid rgba(157, 117, 60, .36) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    background:
        url("../assets/sprites/ui/main_menu/icons/icon_records.webp?v=7903c24-20260629075437") center / 54% 54% no-repeat,
        var(--omen-window-card-compact) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    filter:
        drop-shadow(0 10px 18px rgba(0, 0, 0, .45))
        drop-shadow(0 0 12px rgba(92, 246, 213, .12)) !important;
    transition: transform .16s ease, filter .16s ease !important;
    pointer-events: auto !important;
}.story-quest-toggle-button:hover {
    transform: translateY(-2px) !important;
    filter:
        drop-shadow(0 13px 22px rgba(0, 0, 0, .52))
        drop-shadow(0 0 18px rgba(92, 246, 213, .22)) !important;
}.story-quest-toggle-button:active {
    transform: translateY(1px) scale(.96) !important;
}.story-quest-toggle-button span {
    display: none !important;
}.story-coins-counter {
    position: fixed !important;
    top: calc(var(--omen-telegram-top-clearance) + 112px) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    z-index: 620 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    max-width: 112px !important;
    min-height: 22px !important;
    gap: 5px !important;
    padding: 0 !important;
    color: #f3dfb2 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, .9),
        0 0 8px rgba(215, 189, 130, .28) !important;
}.story-coins-counter[hidden] {
    display: none !important;
}.story-coins-counter img {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 7px rgba(215, 189, 130, .26)) !important;
}.story-coins-counter strong {
    color: #f3dfb2 !important;
    font: 800 14px/1 var(--omen-font-body, serif) !important;
    white-space: nowrap !important;
}.hud-clean-container {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: max(27px, calc(env(safe-area-inset-bottom, 0px) + 27px)) !important;
    left: 50% !important;
    z-index: 560 !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: min(470px, calc(100vw - 58px)) !important;
    max-width: calc(100vw - 58px) !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    pointer-events: none !important;
    text-align: center !important;
}.hud-clean-container .hud-grid {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    justify-content: center !important;
    width: min(360px, 100%) !important;
    max-width: 100% !important;
    gap: 5px 12px !important;
    margin: 0 !important;
}.hud-clean-container .hud-row,
.hud-clean-container .hud-wave-row,
.hud-clean-container .hud-wave-row[style*="grid"] {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    grid-column: auto !important;
}.hud-clean-container .hud-wave-row:not([style*="grid"]) {
    display: none !important;
}.hud-clean-container .hud-label {
    margin: 0 !important;
    color: rgba(92, 246, 213, .9) !important;
    font-size: clamp(.48rem, .8vw, .6rem) !important;
    letter-spacing: .08em !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: nowrap !important;
}.hud-clean-container .hud-value,
.hud-clean-container .hud-health-card .hud-value {
    color: #f3dfb2 !important;
    font-size: clamp(.76rem, 1.12vw, .95rem) !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
}.hud-clean-container .hud-health-card {
    flex: 0 0 auto !important;
    width: min(260px, calc(100vw - 124px)) !important;
    min-width: min(220px, calc(100vw - 124px)) !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}.hud-clean-container .hud-health-top {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 4px !important;
}.hud-clean-container .health-bar {
    width: 100% !important;
    height: 4px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .48) !important;
}.experience-clean-container {
    position: fixed !important;
    right: auto !important;
    bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 12px)) !important;
    left: 50% !important;
    z-index: 555 !important;
    width: min(430px, calc(100vw - 84px)) !important;
    max-width: calc(100vw - 84px) !important;
    padding: 2px !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .42) !important;
    pointer-events: none !important;
}.experience-clean-container .experience-bottom-track {
    width: 100% !important;
    height: 6px !important;
    border-radius: 999px !important;
}

@media (orientation: landscape) {.hud-clean-container {
        bottom: max(25px, calc(env(safe-area-inset-bottom, 0px) + 25px)) !important;
        width: min(540px, calc(100vw - 92px)) !important;
        gap: 5px !important;
    }.hud-clean-container .hud-grid {
        width: min(520px, 100%) !important;
        gap: 4px 13px !important;
    }.hud-clean-container .hud-health-card {
        width: 230px !important;
        min-width: 210px !important;
    }.experience-clean-container {
        bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 10px)) !important;
        width: min(460px, calc(100vw - 160px)) !important;
    }}

@media (orientation: portrait) {.hud-action-cluster {
        top: max(78px, calc(env(safe-area-inset-top, 0px) + 44px)) !important;
    }.hud-action-button,
.story-quest-toggle-button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }.story-quest-toggle-button {
        top: max(130px, calc(env(safe-area-inset-top, 0px) + 96px)) !important;
    }.story-coins-counter {
        top: max(180px, calc(env(safe-area-inset-top, 0px) + 146px)) !important;
        max-width: 92px !important;
        gap: 4px !important;
    }.story-coins-counter img {
        width: 20px !important;
        height: 20px !important;
    }.story-coins-counter strong {
        font-size: 13px !important;
    }.hud-clean-container {
        bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 28px)) !important;
        width: min(390px, calc(100vw - 58px)) !important;
        gap: 6px !important;
    }.hud-clean-container .hud-grid {
        width: min(330px, 100%) !important;
        gap: 4px 10px !important;
    }.hud-clean-container .hud-health-card {
        width: min(250px, calc(100vw - 126px)) !important;
        min-width: min(218px, calc(100vw - 126px)) !important;
    }.experience-clean-container {
        width: min(410px, calc(100vw - 80px)) !important;
    }}.omen-tutorial-hud {
    position: fixed;
    inset: 0;
    z-index: 16000;
    pointer-events: none;
}.omen-tutorial-objective {
    position: absolute;
    top: max(72px, calc(env(safe-area-inset-top) + 62px));
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100vw - 28px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #f6ead5;
    box-shadow: none;
    text-align: center;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, .95),
        0 0 14px rgba(0, 0, 0, .8),
        0 0 18px rgba(244, 205, 126, .22);
}.omen-tutorial-stick {
    position: absolute;
    left: max(26px, env(safe-area-inset-left));
    bottom: max(34px, calc(env(safe-area-inset-bottom) + 22px));
    width: 104px;
    height: 104px;
}.omen-tutorial-enemy-arrow {
    position: absolute;
    width: 54px;
    height: 54px;
    pointer-events: none;
    z-index: 2;
    filter:
        drop-shadow(0 3px 5px rgba(0, 0, 0, .78))
        drop-shadow(0 0 12px rgba(244, 205, 126, .32));
}

@media (orientation: landscape) and (max-height: 520px) {.omen-tutorial-objective {
        top: max(58px, calc(env(safe-area-inset-top) + 48px));
        padding: 0 12px;
    }.omen-tutorial-stick {
        width: 82px;
        height: 82px;
        bottom: max(18px, env(safe-area-inset-bottom));
    }}.hud-time-block {
    position: fixed !important;
    top: max(72px, calc(env(safe-area-inset-top, 0px) + 62px)) !important;
    left: 50% !important;
    z-index: 610 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: calc(100dvw - 28px) !important;
    padding: 0 14px !important;
    transform: translateX(-50%) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
    text-align: center !important;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, .95),
        0 0 14px rgba(0, 0, 0, .8),
        0 0 18px rgba(244, 205, 126, .22) !important;
}.hud-time-label {
    color: #f6ead5 !important;
    font: 800 17px/1.15 var(--omen-font-body, serif) !important;
    letter-spacing: .02em !important;
}.hud-time-value {
    margin-top: 2px !important;
    color: #f4d58f !important;
    font: 900 24px/1 var(--omen-font-display, serif) !important;
    letter-spacing: .02em !important;
}.hud-time-subvalue {
    min-height: 12px !important;
    margin-top: 3px !important;
    color: rgba(246, 234, 213, .76) !important;
    font: 700 12px/1.1 var(--omen-font-body, serif) !important;
    letter-spacing: .02em !important;
}.hud-time-subvalue:empty {
    display: none !important;
}

@media (max-height: 620px) and (orientation: landscape) {.hud-time-block {
        top: max(58px, calc(env(safe-area-inset-top, 0px) + 48px)) !important;
    }.hud-time-label {
        font-size: 14px !important;
    }.hud-time-value {
        font-size: 20px !important;
    }}.hud-time-block {
    top: calc(var(--omen-combat-top-row) + 2px) !important;
    left: 50% !important;
    z-index: 621 !important;
    width: auto !important;
    max-width: calc(100dvw - 128px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
    min-height: 44px !important;
    padding: 0 8px !important;
}.hud-time-label {
    font-size: clamp(.7rem, 1.2vw, .98rem) !important;
    line-height: 1.05 !important;
}.hud-time-value {
    font-size: clamp(1rem, 1.8vw, 1.45rem) !important;
}.hud-time-subvalue {
    font-size: clamp(.56rem, .85vw, .72rem) !important;
}.hud-clean-container {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: max(31px, calc(env(safe-area-inset-bottom, 0px) + 31px)) !important;
    left: max(14px, env(safe-area-inset-left, 0px)) !important;
    z-index: 560 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    width: min(268px, calc(100dvw - 28px)) !important;
    max-width: calc(100dvw - 28px) !important;
    padding: 0 !important;
    transform: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    pointer-events: none !important;
    text-align: left !important;
}.hud-clean-container .hud-health-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}.hud-clean-container .hud-health-top {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 5px !important;
}.hud-clean-container .health-bar {
    width: 100% !important;
    height: 9px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .52) !important;
}.hud-clean-container .hud-grid {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 5px 13px !important;
    margin: 0 !important;
}.hud-clean-container .hud-row,
.hud-clean-container .hud-wave-row,
.hud-clean-container .hud-wave-row[style*="grid"] {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    grid-column: auto !important;
}.hud-clean-container .hud-wave-row:not([style*="grid"]) {
    display: none !important;
}.hud-clean-container .hud-label {
    margin: 0 !important;
    text-align: left !important;
}.hud-clean-container .hud-value,
.hud-clean-container .hud-health-card .hud-value {
    text-align: left !important;
}.hud-clean-container.is-story-hub [data-hud-stat="kills"] {
    display: none !important;
}.experience-clean-container {
    position: fixed !important;
    right: auto !important;
    bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 10px)) !important;
    left: max(14px, env(safe-area-inset-left, 0px)) !important;
    width: min(268px, calc(100dvw - 28px)) !important;
    max-width: calc(100dvw - 28px) !important;
    transform: none !important;
}

@media (orientation: landscape) {.hud-clean-container {
        bottom: max(29px, calc(env(safe-area-inset-bottom, 0px) + 29px)) !important;
        left: max(16px, env(safe-area-inset-left, 0px)) !important;
        width: min(284px, calc(100dvw - 32px)) !important;
    }.experience-clean-container {
        left: max(16px, env(safe-area-inset-left, 0px)) !important;
        width: min(284px, calc(100dvw - 32px)) !important;
    }}

@media (orientation: portrait) {.hud-clean-container {
        bottom: max(31px, calc(env(safe-area-inset-bottom, 0px) + 31px)) !important;
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
        width: min(252px, calc(100dvw - 24px)) !important;
    }.experience-clean-container {
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
        width: min(252px, calc(100dvw - 24px)) !important;
    }.hud-clean-container .health-bar {
        height: 8px !important;
    }}

/* Diablo-like compact NPC command list. */
.story-hub-interaction {
    --story-npc-gold: #d8b56f;
    --story-npc-gold-bright: #ffe3a0;
    --story-npc-iron: rgba(7, 6, 5, .9);
    position: fixed !important;
    left: var(--story-hub-interaction-x, -999px) !important;
    top: var(--story-hub-interaction-y, -999px) !important;
    z-index: 650 !important;
    display: none !important;
    min-width: 94px !important;
    max-width: 138px !important;
    padding: 5px !important;
    transform: translate(0, -50%) !important;
    border: 1px solid rgba(216, 181, 111, .55) !important;
    outline: 1px solid rgba(0, 0, 0, .74) !important;
    background:
        linear-gradient(180deg, rgba(30, 24, 18, .92), rgba(8, 7, 6, .9)),
        radial-gradient(circle at 50% 0%, rgba(216, 181, 111, .16), transparent 56%) !important;
    box-shadow:
        0 9px 18px rgba(0, 0, 0, .52),
        inset 0 0 0 1px rgba(255, 229, 166, .08),
        inset 0 0 16px rgba(0, 0, 0, .52) !important;
    pointer-events: none !important;
}.story-hub-interaction::before,
.story-hub-interaction::after {
    content: none !important;
    display: none !important;
}.story-hub-interaction.is-visible {
    display: grid !important;
    gap: 4px !important;
}.story-hub-interaction-label {
    display: none !important;
    max-width: 128px !important;
    padding: 1px 5px 4px !important;
    color: rgba(255, 238, 190, .94) !important;
    font: 700 10px/1.1 var(--omen-font-body, serif) !important;
    text-align: center !important;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, .95),
        0 0 8px rgba(216, 181, 111, .28) !important;
    pointer-events: none !important;
}.story-hub-interaction-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px !important;
    pointer-events: auto !important;
}.story-hub-interaction .story-hub-interaction-button.run-setup-primary,
.story-hub-interaction .story-hub-interaction-button.run-setup-secondary {
    box-sizing: border-box !important;
    display: grid !important;
    width: 100% !important;
    min-width: 82px !important;
    max-width: 128px !important;
    height: 23px !important;
    min-height: 23px !important;
    padding: 2px 8px !important;
    border: 1px solid rgba(216, 181, 111, .46) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, rgba(39, 32, 24, .86), rgba(10, 9, 8, .9)) !important;
    color: rgba(255, 232, 177, .9) !important;
    font: 700 9px/1 var(--omen-font-body, serif) !important;
    letter-spacing: .02em !important;
    opacity: .82 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, .48),
        inset 0 1px 0 rgba(255, 231, 171, .11),
        0 3px 7px rgba(0, 0, 0, .36) !important;
    filter: none !important;
}.story-hub-interaction .story-hub-interaction-button.run-setup-primary {
    border-color: rgba(255, 219, 136, .65) !important;
    color: var(--story-npc-gold-bright) !important;
}.story-hub-interaction .story-hub-interaction-button.run-setup-primary:hover,
.story-hub-interaction .story-hub-interaction-button.run-setup-secondary:hover {
    opacity: 1 !important;
    color: #fff3c8 !important;
    transform: translateX(1px) !important;
    background:
        linear-gradient(180deg, rgba(62, 45, 27, .95), rgba(14, 11, 8, .96)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, .54),
        0 0 11px rgba(216, 181, 111, .28),
        0 4px 9px rgba(0, 0, 0, .42) !important;
}

/* Extracted from css/omen-legacy-windows.css?v=7903c24-20260629075437 */
.hud-action-cluster .stats-toggle-button {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: grid !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    cursor: pointer !important;
    background:
        var(--omen-window-card-compact) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    filter:
        drop-shadow(0 10px 18px rgba(0, 0, 0, .45))
        drop-shadow(0 0 12px rgba(92, 246, 213, .12)) !important;
    transition: transform .16s ease, filter .16s ease !important;
}.hud-action-cluster .stats-toggle-button:hover {
    transform: translateY(-2px) !important;
    filter:
        drop-shadow(0 13px 22px rgba(0, 0, 0, .52))
        drop-shadow(0 0 18px rgba(92, 246, 213, .22)) !important;
}.hud-action-cluster .stats-toggle-button:active {
    transform: translateY(1px) scale(.96) !important;
}.hud-action-cluster .stats-toggle-button {
    background:
        url("../assets/sprites/ui/main_menu/icons/icon_heroes.webp?v=7903c24-20260629075437") center / 54% 54% no-repeat,
        var(--omen-window-card-compact) center / 100% 100% no-repeat !important;
}.hud-action-cluster .stats-toggle-button span {
    display: none !important;
}

@media (orientation: portrait) {.hud-action-cluster .stats-toggle-button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }}.story-npc-actions-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
    gap: 6px !important;
}.story-npc-actions-list .run-setup-primary,
.story-npc-actions-list .run-setup-secondary {
    min-height: 32px !important;
    padding-inline: 10px !important;
}


/* Extracted tutorial HUD child rules from css/omen-ui-theme.css?v=7903c24-20260629075437 */
@keyframes omenTutorialArrowPulse {0%,
100%{
        transform: translateX(0) scale(1);
    }50%{
        transform: translateX(5px) scale(1.06);
    }
}

@keyframes omenTutorialStick {0%,
100%{
        transform: translate(-50%, -50%);
    }50%{
        transform: translate(calc(-50% + 24px), calc(-50% - 18px));
    }
}

.omen-tutorial-objective__text {
    font: 800 17px/1.25 var(--omen-font-body, serif);
}.omen-tutorial-objective__countdown {
    flex: 0 0 auto;
    min-width: 56px;
    color: #f4d58f;
    font: 900 21px/1 var(--omen-font-display, serif);
}.omen-tutorial-stick__base {
    position: relative;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(244, 205, 126, .58);
    border-radius: 50%;
    background: rgba(8, 12, 18, .36);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, .42), 0 12px 28px rgba(0, 0, 0, .34);
}.omen-tutorial-stick__knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(214, 176, 104, .88);
    box-shadow: 0 0 16px rgba(244, 205, 126, .42);
    animation: omenTutorialStick 1.45s ease-in-out infinite;
}.omen-tutorial-enemy-arrow__shape {
    width: 100%;
    height: 100%;
    background:
        linear-gradient(180deg, #fff0bd, #d19b38 54%, #7e341d);
    clip-path: polygon(8% 34%, 58% 34%, 58% 14%, 96% 50%, 58% 86%, 58% 66%, 8% 66%);
    animation: omenTutorialArrowPulse 1.05s ease-in-out infinite;
}


/* Floating NPC dialogue popups, inspired by classic gothic ARPG talk panels. */
.story-dialog-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 4400 !important;
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    pointer-events: none !important;
}.story-dialog-window {
    box-sizing: border-box !important;
    position: absolute !important;
    left: var(--story-dialog-x, 50vw) !important;
    top: var(--story-dialog-y, 42vh) !important;
    width: min(423px, calc(100vw - 24px)) !important;
    height: min(248px, calc(100dvh - 150px)) !important;
    min-height: 176px !important;
    max-height: min(44vh, 390px) !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 10px 12px 11px !important;
    overflow: hidden !important;
    transform: translate(-50%, calc(-100% - 16px)) !important;
    border: 2px solid rgba(157, 117, 60, .76) !important;
    outline: 1px solid rgba(0, 0, 0, .88) !important;
    color: #ead3a0 !important;
    background:
        linear-gradient(180deg, rgba(33, 26, 19, .96), rgba(9, 8, 7, .96)),
        radial-gradient(circle at 50% 0%, rgba(219, 170, 83, .16), transparent 54%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 6px) !important;
    box-shadow:
        0 20px 34px rgba(0, 0, 0, .54),
        0 0 0 1px rgba(255, 223, 153, .08),
        inset 0 0 0 1px rgba(255, 224, 151, .08),
        inset 0 0 26px rgba(0, 0, 0, .64) !important;
    pointer-events: auto !important;
    backdrop-filter: blur(1px) !important;
}.story-dialog-window::before {
    content: none !important;
    display: none !important;
}.story-dialog-window::after {
    content: none !important;
    display: none !important;
}.story-dialog-lines {
    box-sizing: border-box !important;
    display: grid !important;
    align-self: stretch !important;
    min-height: 0 !important;
    gap: 8px !important;
    overflow: hidden !important;
}.story-dialog-lines p {
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 13px 14px 22px !important;
    border: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(213, 166, 85, .58) rgba(4, 4, 3, .42) !important;
    background:
        linear-gradient(180deg, rgba(6, 6, 5, .58), rgba(0, 0, 0, .32)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, .34),
        inset 0 8px 20px rgba(0, 0, 0, .22) !important;
}.story-dialog-lines p::-webkit-scrollbar {
    width: 7px !important;
}.story-dialog-lines p::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .32) !important;
    border-left: 1px solid rgba(157, 117, 60, .18) !important;
}.story-dialog-lines p::-webkit-scrollbar-thumb {
    border: 1px solid rgba(255, 226, 165, .24) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, rgba(219, 170, 83, .68), rgba(104, 69, 30, .72)) !important;
}.story-dialog-lines p::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, rgba(255, 219, 136, .82), rgba(129, 83, 35, .82)) !important;
}.story-dialog-lines small {
    color: rgba(207, 156, 81, .92) !important;
    font: 800 .62rem/1 var(--omen-font-body, serif) !important;
    letter-spacing: .05em !important;
}.story-dialog-lines span {
    display: block !important;
    min-width: 0 !important;
    white-space: pre-line !important;
    color: rgba(241, 221, 181, .94) !important;
    font: 600 clamp(.9rem, 1.55vw, 1.02rem)/1.34 var(--omen-font-body, serif) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .9) !important;
}.story-dialog-lines-single p {
    min-height: 0 !important;
    align-items: start !important;
}.story-dialog-lines-single span {
    align-self: start !important;
}.story-dialog-actions {
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    gap: 7px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    padding-top: 1px !important;
}.story-dialog-actions .run-setup-primary,
.story-dialog-actions .run-setup-secondary {
    min-width: 104px !important;
    min-height: 31px !important;
    padding: 5px 12px !important;
    border: 1px solid rgba(157, 117, 60, .58) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, rgba(38, 30, 22, .96), rgba(9, 8, 7, .98)) !important;
    color: rgba(255, 232, 177, .9) !important;
    font: 800 .62rem/1 var(--omen-font-body, serif) !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, .58),
        inset 0 1px 0 rgba(255, 232, 177, .08),
        0 4px 10px rgba(0, 0, 0, .34) !important;
}.story-dialog-actions .run-setup-primary {
    border-color: rgba(238, 183, 92, .78) !important;
    color: #ffe8ad !important;
}.story-dialog-actions .run-setup-primary:hover,
.story-dialog-actions .run-setup-secondary:hover {
    color: #fff3c9 !important;
    transform: translateY(-1px) !important;
    background:
        linear-gradient(180deg, rgba(65, 47, 27, .98), rgba(13, 10, 8, .98)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, .62),
        0 0 12px rgba(219, 170, 83, .28),
        0 5px 11px rgba(0, 0, 0, .4) !important;
}.story-dialog-actions.story-npc-actions-list {
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)) !important;
}

@media (max-width: 540px) {.story-dialog-window {
        width: min(315px, calc(100vw - 18px)) !important;
        height: min(228px, calc(100dvh - 124px)) !important;
        min-height: 164px !important;
        max-height: 52vh !important;
        padding: 9px 10px 10px !important;
    }.story-dialog-lines p {
        padding: 10px 11px 18px !important;
    }.story-dialog-actions .run-setup-primary,
.story-dialog-actions .run-setup-secondary {
        min-width: 86px !important;
        min-height: 28px !important;
        padding: 4px 8px !important;
        font-size: .54rem !important;
    }}

/* Story quick buttons: cards, reliquary inventory, journal. */
.story-quick-buttons {
    position: fixed !important;
    top: calc(var(--omen-telegram-top-clearance) + 56px) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    z-index: 620 !important;
    display: grid !important;
    gap: 6px !important;
    justify-items: end !important;
    pointer-events: auto !important;
}

.story-quick-buttons[hidden] {
    display: none !important;
}

.story-quick-button,
.story-quick-buttons .story-quest-toggle-button {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: grid !important;
    grid-template-columns: auto 26px !important;
    align-items: center !important;
    justify-content: end !important;
    gap: 8px !important;
    width: auto !important;
    height: 30px !important;
    min-width: 0 !important;
    min-height: 30px !important;
    appearance: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    background: transparent !important;
    box-shadow: none !important;
    filter:
        drop-shadow(0 10px 18px rgba(0, 0, 0, .45))
        drop-shadow(0 0 12px rgba(92, 246, 213, .12)) !important;
    transition: transform .16s ease, filter .16s ease !important;
    pointer-events: auto !important;
}

.story-quick-button span,
.story-quick-buttons .story-quest-toggle-button span {
    display: block !important;
    color: #f3dfb2 !important;
    font: 700 15px/1 var(--omen-font-body, serif) !important;
    text-transform: lowercase !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .86) !important;
    white-space: nowrap !important;
}

.story-quick-button i,
.story-quick-buttons .story-quest-toggle-button i {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    border: 2px solid rgba(101, 225, 218, .86) !important;
    background: rgba(6, 12, 14, .46) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 242, 207, .14),
        0 0 8px rgba(92, 246, 213, .18) !important;
}

.story-quick-button:hover {
    transform: translateY(-2px) !important;
    filter:
        drop-shadow(0 13px 22px rgba(0, 0, 0, .52))
        drop-shadow(0 0 18px rgba(92, 246, 213, .22)) !important;
}

.story-quick-button:active {
    transform: translateY(1px) scale(.96) !important;
}

.story-quick-button,
.story-quick-buttons .story-quest-toggle-button {
    grid-template-columns: 26px !important;
    gap: 0 !important;
}

.story-quick-button span,
.story-quick-buttons .story-quest-toggle-button span {
    display: none !important;
}

.story-quick-buttons:not([hidden]) + .story-coins-counter,
.story-coins-counter {
    top: calc(var(--omen-telegram-top-clearance) + 162px) !important;
}

body.story-relic-panel-open {
    --story-relic-panel-width: clamp(280px, 34vw, 380px);
}

body.story-relic-panel-open #gameCanvas,
body.story-relic-panel-open #uiContainer {
    width: 100% !important;
}

body.story-relic-panel-open .hud-clean-container,
body.story-relic-panel-open .experience-clean-container {
    left: max(14px, env(safe-area-inset-left, 0px)) !important;
    transform: none !important;
}

body.story-relic-panel-open .story-quick-buttons,
body.story-relic-panel-open .story-coins-counter {
    right: calc(var(--story-relic-panel-width) + max(10px, env(safe-area-inset-right, 0px))) !important;
}

/* Dialogue compact text pass. Keep NPC talk panels aligned with the text-only HUD controls. */
.story-dialog-lines small {
    font-size: calc(.62rem - 4px) !important;
}

.story-dialog-lines span {
    font-size: clamp(calc(.9rem - 4px), calc(1.55vw - 4px), calc(1.02rem - 4px)) !important;
}

.story-dialog-actions .run-setup-primary,
.story-dialog-actions .run-setup-secondary {
    font: 700 13px/1 var(--omen-font-body, serif) !important;
}

@media (hover: none) and (pointer: coarse), (max-width: 760px), (max-height: 520px) {
    .story-dialog-lines span {
        font-size: clamp(calc(.82rem - 4px), calc(3.6vw - 4px), calc(.98rem - 4px)) !important;
    }

    .story-dialog-actions .run-setup-primary,
    .story-dialog-actions .run-setup-secondary {
        font-size: 13px !important;
    }
}

/* Telegram mobile is landscape-only. Portrait shows a stable gate instead of
   squeezing the game UI into a layout we no longer support. */
.telegram-landscape-gate {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: none;
    place-items: center;
    padding: max(20px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
    background:
        radial-gradient(circle at 50% 30%, rgba(214, 190, 132, .14), rgba(7, 5, 4, 0) 38%),
        linear-gradient(145deg, rgba(20, 13, 8, .98), rgba(3, 8, 10, .98));
    color: #f3dfb2;
    text-align: center;
    pointer-events: auto;
    touch-action: none;
}

body.telegram-landscape-blocked,
html.telegram-landscape-blocked {
    overflow: hidden !important;
    background: #070504 !important;
}

body.telegram-landscape-blocked #gameCanvas,
body.telegram-landscape-blocked #uiContainer {
    visibility: hidden !important;
    pointer-events: none !important;
}

body.telegram-landscape-blocked .telegram-landscape-gate {
    display: grid;
}

.telegram-landscape-gate__panel {
    width: min(360px, calc(100vw - 36px));
    min-height: 210px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 14px;
    padding: 28px 24px 30px;
    border: 1px solid rgba(214, 190, 132, .48);
    background:
        linear-gradient(180deg, rgba(45, 33, 22, .94), rgba(13, 10, 8, .96)),
        rgba(16, 11, 8, .96);
    box-shadow:
        0 22px 54px rgba(0, 0, 0, .58),
        inset 0 0 24px rgba(214, 190, 132, .08);
}

.telegram-landscape-gate__panel strong {
    color: #ffe8b5;
    font: 700 24px/1.1 var(--omen-font-title, serif);
    letter-spacing: 0;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .72);
}

.telegram-landscape-gate__panel span {
    max-width: 270px;
    color: #d7c299;
    font: 600 16px/1.3 var(--omen-font-body, serif);
}

.telegram-landscape-gate__device {
    width: 58px;
    height: 92px;
    border: 3px solid rgba(243, 223, 178, .88);
    border-radius: 12px;
    box-shadow:
        0 0 18px rgba(214, 190, 132, .18),
        inset 0 0 14px rgba(214, 190, 132, .08);
    transform: rotate(90deg);
}

/* Final combat resource HUD: level, health bar, and experience bar. */
.hud-clean-container {
    --omen-combat-hud-width: min(284px, calc(100dvw - 28px));
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: max(33px, calc(env(safe-area-inset-bottom, 0px) + 33px)) !important;
    left: max(14px, env(safe-area-inset-left, 0px)) !important;
    z-index: 560 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
        "level"
        "health"
        "stats" !important;
    align-items: stretch !important;
    justify-content: start !important;
    gap: 5px !important;
    width: var(--omen-combat-hud-width) !important;
    max-width: calc(100dvw - 28px) !important;
    box-sizing: border-box !important;
    padding: 8px 10px 9px !important;
    transform: none !important;
    border: 1px solid rgba(215, 189, 130, .20) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, rgba(31, 22, 14, .72), rgba(8, 7, 6, .68)),
        radial-gradient(circle at 18% 8%, rgba(215, 189, 130, .16), transparent 46%) !important;
    box-shadow:
        0 10px 18px rgba(0, 0, 0, .36),
        inset 0 0 0 1px rgba(255, 231, 174, .06),
        inset 0 0 24px rgba(0, 0, 0, .30) !important;
    backdrop-filter: none !important;
    pointer-events: none !important;
    text-align: left !important;
}

.hud-clean-container .hud-health-card {
    grid-area: health !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.hud-clean-container .hud-health-top {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 5px !important;
}

.hud-clean-container .hud-health-card .hud-label {
    color: rgba(244, 213, 143, .86) !important;
}

.hud-clean-container .hud-health-card .hud-value {
    color: #f7e7c8 !important;
    font: 800 13px/1 var(--omen-font-body, serif) !important;
    text-align: right !important;
}

.hud-clean-container .health-bar {
    position: relative !important;
    width: 100% !important;
    height: 13px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(15, 9, 7, .88) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .72), rgba(22, 8, 8, .88)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 234, 174, .10),
        inset 0 2px 5px rgba(0, 0, 0, .68) !important;
}

.hud-clean-container .health-fill {
    height: 100% !important;
    background:
        linear-gradient(180deg, rgba(255, 197, 126, .42), transparent 42%),
        linear-gradient(90deg, #8f1824 0%, #c92a37 52%, #f06b42 100%) !important;
    box-shadow:
        inset 0 0 5px rgba(255, 226, 174, .18),
        0 0 12px rgba(202, 42, 55, .34) !important;
}

.hud-clean-container .hud-grid {
    display: contents !important;
}

.hud-clean-container [data-hud-stat="level"] {
    grid-area: level !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 0 2px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.hud-clean-container [data-hud-stat="level"] .hud-label {
    display: block !important;
    margin: 0 !important;
    color: rgba(244, 213, 143, .78) !important;
    font: 800 10px/1 var(--omen-font-body, serif) !important;
    letter-spacing: .04em !important;
    text-transform: none !important;
}

.hud-clean-container [data-hud-stat="level"] .hud-value {
    display: block !important;
    color: #fff1bf !important;
    font: 900 15px/1 var(--omen-font-body, serif) !important;
    text-align: left !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .82) !important;
}

.hud-clean-container [data-hud-stat="kills"] {
    grid-area: stats !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.hud-clean-container .hud-wave-row,
.hud-clean-container .hud-wave-row[style*="grid"] {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: baseline !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding-top: 5px !important;
    border-top: 1px solid rgba(215, 189, 130, .14) !important;
}

.hud-clean-container .hud-wave-row:not([style*="grid"]) {
    display: none !important;
}

.hud-clean-container .hud-label {
    margin: 0 !important;
    color: rgba(243, 223, 178, .66) !important;
    font: 700 10px/1 var(--omen-font-body, serif) !important;
    letter-spacing: .04em !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.hud-clean-container .hud-value {
    color: #f3dfb2 !important;
    font: 800 12px/1 var(--omen-font-body, serif) !important;
    text-align: left !important;
}

.hud-clean-container.is-story-hub [data-hud-stat="kills"] {
    display: none !important;
}

.story-quest-hud-panel {
    position: fixed !important;
    top: 132px !important;
    left: max(18px, env(safe-area-inset-left, 0px)) !important;
    z-index: 558 !important;
    width: 208px !important;
    max-width: min(208px, calc(100dvw - 36px)) !important;
    box-sizing: border-box !important;
    display: grid !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #f7e7c8 !important;
    font-family: var(--omen-font-body, serif) !important;
    pointer-events: none !important;
    text-align: left !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: geometricPrecision !important;
}

.story-quest-hud-panel[hidden],
body.clean-window-open .story-quest-hud-panel,
body.story-relic-panel-open .story-quest-hud-panel {
    display: none !important;
}

.story-quest-hud-kicker {
    color: rgba(244, 213, 143, .86) !important;
    font: 900 8px/1 var(--omen-font-body, serif) !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .92) !important;
}

.story-quest-hud-title {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: #fff6d3 !important;
    font: 900 14px/1.08 var(--omen-font-body, serif) !important;
    text-overflow: ellipsis !important;
    text-shadow:
        0 2px 3px rgba(0, 0, 0, .95),
        0 0 8px rgba(0, 0, 0, .72) !important;
    white-space: nowrap !important;
}

.story-quest-hud-objective {
    display: -webkit-box !important;
    overflow: hidden !important;
    color: rgba(248, 238, 210, .96) !important;
    font: 800 11px/1.22 var(--omen-font-body, serif) !important;
    text-shadow:
        0 2px 3px rgba(0, 0, 0, .95),
        0 0 8px rgba(0, 0, 0, .72) !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
}

.story-quest-hud-progress {
    display: block !important;
    margin-top: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #f7e7c8 !important;
    font: 900 10px/1.18 var(--omen-font-body, serif) !important;
    text-shadow:
        0 2px 3px rgba(0, 0, 0, .95),
        0 0 8px rgba(0, 0, 0, .72) !important;
}

.story-quest-hud-progress[hidden] {
    display: none !important;
}

.experience-clean-container {
    position: fixed !important;
    right: auto !important;
    bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 12px)) !important;
    left: max(14px, env(safe-area-inset-left, 0px)) !important;
    z-index: 559 !important;
    width: min(284px, calc(100dvw - 28px)) !important;
    max-width: calc(100dvw - 28px) !important;
    box-sizing: border-box !important;
    height: 12px !important;
    padding: 2px !important;
    transform: none !important;
    border: 1px solid rgba(215, 189, 130, .18) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, rgba(31, 22, 14, .70), rgba(8, 7, 6, .68)) !important;
    box-shadow:
        0 8px 14px rgba(0, 0, 0, .30),
        inset 0 0 0 1px rgba(255, 231, 174, .05) !important;
    pointer-events: none !important;
}

.experience-clean-container .experience-bottom-track {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: rgba(5, 10, 8, .88) !important;
}

.experience-clean-container .experience-bottom-fill {
    height: 100% !important;
    background:
        linear-gradient(180deg, rgba(255, 239, 178, .30), transparent 48%),
        linear-gradient(90deg, #80612d 0%, #c99a42 48%, #f0d47d 100%) !important;
    box-shadow:
        inset 0 0 4px rgba(255, 236, 178, .20),
        0 0 10px rgba(215, 189, 130, .34) !important;
}

@media (orientation: landscape) {
    .hud-clean-container {
        --omen-combat-hud-width: min(300px, calc(100dvw - 32px));
        bottom: max(35px, calc(env(safe-area-inset-bottom, 0px) + 35px)) !important;
        left: max(16px, env(safe-area-inset-left, 0px)) !important;
    }

    .experience-clean-container {
        left: max(16px, env(safe-area-inset-left, 0px)) !important;
        width: min(300px, calc(100dvw - 32px)) !important;
    }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
    .hud-clean-container {
        --omen-combat-hud-width: min(150px, calc(100dvw - 32px));
        gap: 3px !important;
        padding: 6px 7px 7px !important;
    }

    .hud-clean-container [data-hud-stat="level"] {
        gap: 4px !important;
        padding-bottom: 1px !important;
    }

    .hud-clean-container [data-hud-stat="level"] .hud-label {
        font-size: 8px !important;
        letter-spacing: .02em !important;
    }

    .hud-clean-container [data-hud-stat="level"] .hud-value {
        font-size: 12px !important;
    }

    .hud-clean-container .hud-health-top {
        gap: 4px !important;
        margin-bottom: 3px !important;
    }

    .hud-clean-container .hud-label {
        font-size: 8px !important;
        letter-spacing: .02em !important;
    }

    .hud-clean-container .hud-value,
    .hud-clean-container .hud-health-card .hud-value {
        font-size: 10px !important;
    }

    .hud-clean-container .health-bar {
        height: 10px !important;
    }

    .experience-clean-container {
        width: min(150px, calc(100dvw - 32px)) !important;
        height: 10px !important;
        padding: 2px !important;
    }
}

@media (orientation: portrait) {
    .hud-clean-container {
        --omen-combat-hud-width: min(272px, calc(100dvw - 24px));
        grid-template-columns: minmax(0, 1fr) !important;
        bottom: max(31px, calc(env(safe-area-inset-bottom, 0px) + 31px)) !important;
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
        gap: 5px !important;
        padding: 7px 8px 8px !important;
    }

    .hud-clean-container [data-hud-stat="level"] {
        min-width: 0 !important;
        min-height: 0 !important;
    }

    .hud-clean-container [data-hud-stat="level"] .hud-value {
        font-size: 14px !important;
    }

    .hud-clean-container .health-bar {
        height: 12px !important;
    }

    .experience-clean-container {
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
        width: min(272px, calc(100dvw - 24px)) !important;
    }
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 600px) {
    body.story-relic-panel-open .hud-action-cluster,
    body.story-relic-panel-open .story-quick-buttons {
        display: none !important;
    }
}

body.story-relic-ground-drop-ready #gameCanvas {
    cursor: grabbing !important;
}

@media (orientation: portrait) {
    .story-quick-buttons {
        top: max(130px, calc(env(safe-area-inset-top, 0px) + 96px)) !important;
    }

    .story-coins-counter {
        top: max(236px, calc(env(safe-area-inset-top, 0px) + 202px)) !important;
    }

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

    body.story-relic-panel-open .hud-clean-container,
    body.story-relic-panel-open .experience-clean-container {
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
    }
}

/* Mobile fit pass for in-game HUD, NPC controls and floating dialogues. */
@media (hover: none) and (pointer: coarse), (max-width: 760px), (max-height: 520px) {
    .story-hub-interaction {
        left: clamp(8px, var(--story-hub-interaction-x, 50vw), calc(100vw - 116px)) !important;
        top: clamp(48px, var(--story-hub-interaction-y, 50dvh), calc(100dvh - 52px)) !important;
        min-width: 76px !important;
        max-width: 108px !important;
        padding: 4px !important;
        gap: 3px !important;
    }

    .story-hub-interaction-actions {
        gap: 2px !important;
    }

    .story-hub-interaction .story-hub-interaction-button.run-setup-primary,
    .story-hub-interaction .story-hub-interaction-button.run-setup-secondary {
        min-width: 68px !important;
        max-width: 100px !important;
        height: 21px !important;
        min-height: 21px !important;
        padding: 2px 5px !important;
        font-size: 8px !important;
        letter-spacing: .01em !important;
    }

    .story-dialog-window {
        position: fixed !important;
        left: 50vw !important;
        top: 50dvh !important;
        width: min(360px, calc(100vw - 16px)) !important;
        height: min(220px, calc(100dvh - 24px)) !important;
        min-height: min(156px, calc(100dvh - 24px)) !important;
        max-height: calc(100dvh - 24px) !important;
        gap: 6px !important;
        padding: 8px 9px 9px !important;
        transform: translate(-50%, -50%) !important;
    }

    .story-npc-actions-window {
        height: auto !important;
        min-height: 0 !important;
        max-height: min(260px, calc(100dvh - 24px)) !important;
    }

    .story-dialog-lines {
        gap: 6px !important;
    }

    .story-dialog-lines p {
        padding: 9px 10px 16px !important;
    }

    .story-dialog-lines span {
        font-size: clamp(calc(.82rem - 2px), calc(3.6vw - 2px), calc(.98rem - 2px)) !important;
        line-height: 1.28 !important;
    }

    .story-dialog-actions {
        gap: 5px !important;
        justify-content: flex-end !important;
        max-width: 100% !important;
    }

    .story-dialog-actions .run-setup-primary,
    .story-dialog-actions .run-setup-secondary {
        min-width: 74px !important;
        min-height: 27px !important;
        padding: 4px 7px !important;
        font-size: clamp(.52rem, 2.4vw, .62rem) !important;
        letter-spacing: .03em !important;
        white-space: nowrap !important;
    }

    .story-dialog-actions.story-npc-actions-list {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)) !important;
        gap: 5px !important;
    }

    .story-quick-buttons {
        top: max(88px, calc(env(safe-area-inset-top, 0px) + 56px)) !important;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
        gap: 7px !important;
    }

    .story-quick-button,
    .story-quick-buttons .story-quest-toggle-button {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .story-quick-buttons .story-quest-toggle-button i {
        width: 22px !important;
        height: 22px !important;
    }

    .story-quick-buttons:not([hidden]) + .story-coins-counter,
    .story-coins-counter {
        top: max(142px, calc(env(safe-area-inset-top, 0px) + 110px)) !important;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
    }

    .story-coins-counter {
        min-height: 30px !important;
        padding: 3px 0 !important;
    }

    .story-coins-counter img {
        width: 23px !important;
        height: 23px !important;
    }

    .story-coins-counter strong {
        font-size: .82rem !important;
    }

    body.story-relic-panel-open .story-quick-buttons,
    body.story-relic-panel-open .story-coins-counter {
        right: calc(var(--story-relic-panel-width) + max(8px, env(safe-area-inset-right, 0px))) !important;
    }
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait), (max-width: 600px) {
    .story-dialog-window {
        width: min(330px, calc(100vw - 14px)) !important;
        height: min(210px, calc(100dvh - 22px)) !important;
    }

    .story-dialog-actions .run-setup-primary,
    .story-dialog-actions .run-setup-secondary {
        min-width: 68px !important;
        padding-inline: 6px !important;
    }

    .story-quick-buttons {
        top: max(96px, calc(env(safe-area-inset-top, 0px) + 68px)) !important;
    }

    .story-coins-counter {
        top: max(150px, calc(env(safe-area-inset-top, 0px) + 122px)) !important;
    }

    body.story-relic-panel-open .story-quick-buttons,
    body.story-relic-panel-open .story-coins-counter {
        right: calc(var(--story-relic-panel-width) + 6px) !important;
    }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape), (max-height: 520px) {
    .story-dialog-window {
        width: min(390px, calc(100vw - 18px)) !important;
        height: min(188px, calc(100dvh - 18px)) !important;
        padding: 7px 8px 8px !important;
    }

    .story-dialog-lines p {
        padding: 8px 9px 13px !important;
    }

    .story-dialog-actions .run-setup-primary,
    .story-dialog-actions .run-setup-secondary {
        min-height: 25px !important;
    }

    .story-quick-buttons {
        top: max(62px, calc(env(safe-area-inset-top, 0px) + 42px)) !important;
    }

    .story-coins-counter {
        top: max(116px, calc(env(safe-area-inset-top, 0px) + 92px)) !important;
    }
}

/* Text-only top HUD controls. */
.hud-action-cluster .stats-toggle-button[hidden],
.stats-toggle-button[hidden] {
    display: none !important;
}

.hud-action-cluster {
    top: var(--omen-telegram-top-clearance) !important;
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: auto !important;
    align-items: flex-start !important;
}

.hud-action-button.hud-pause-button {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 2px 4px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .86)) !important;
}

.hud-action-button.hud-pause-button span {
    width: auto !important;
    height: auto !important;
    color: #f3dfb2 !important;
    background: none !important;
    font: 700 13px/1 var(--omen-font-body, serif) !important;
    text-transform: none !important;
    white-space: nowrap !important;
    filter: none !important;
}

.story-quick-buttons {
    top: var(--omen-telegram-top-clearance) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(8px, 1.6vw, 16px) !important;
}

.story-quick-button,
.story-quick-buttons .story-quest-toggle-button {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: inline-flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 2px 4px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .86)) !important;
}

.story-quick-button span,
.story-quick-buttons .story-quest-toggle-button span {
    display: block !important;
    color: #f3dfb2 !important;
    font: 700 13px/1 var(--omen-font-body, serif) !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

.story-quick-button i,
.story-quick-buttons .story-quest-toggle-button i {
    display: none !important;
}

.story-quick-buttons:not([hidden]) + .story-coins-counter,
.story-coins-counter {
    top: calc(var(--omen-telegram-top-clearance) + 28px) !important;
}

body.story-relic-panel-open .story-quick-buttons,
body.story-relic-panel-open .story-coins-counter {
    right: calc(var(--story-relic-panel-width) + max(10px, env(safe-area-inset-right, 0px))) !important;
}

/* Final NPC dialogue text size override. Buttons intentionally keep their base size. */
.story-dialog-lines span {
    font-size: clamp(calc(.9rem - 4px), calc(1.55vw - 4px), calc(1.02rem - 4px)) !important;
}

@media (hover: none) and (pointer: coarse), (max-width: 760px), (max-height: 620px) {
    .story-dialog-lines span {
        font-size: clamp(calc(.82rem - 4px), calc(3.6vw - 4px), calc(.98rem - 4px)) !important;
    }
}