/* FullMoon MMO - HUD RPG Cohesion Layer
 * Global visual unification for desktop/mobile with race-toned palettes.
 */

:root {
    --hud-rpg-core: #8a2d2d;
    --hud-rpg-shadow: #120d13;
    --hud-rpg-arcane: #2e2036;
    --hud-rpg-metal: #d4af37;
    --hud-rpg-glow: rgba(212, 175, 55, 0.22);

    --hud-rpg-fog-a: rgba(112, 43, 51, 0.13);
    --hud-rpg-fog-b: rgba(64, 41, 88, 0.1);

    --hud-rpg-surface-top: rgba(34, 24, 30, 0.9);
    --hud-rpg-surface-bottom: rgba(12, 8, 14, 0.96);
    --hud-rpg-surface-elevated-top: rgba(44, 31, 38, 0.9);
    --hud-rpg-surface-elevated-bottom: rgba(18, 12, 20, 0.96);

    --hud-rpg-border: rgba(124, 92, 73, 0.48);
    --hud-rpg-border-soft: rgba(124, 92, 73, 0.28);
    --hud-rpg-highlight: rgba(255, 237, 197, 0.06);
    --hud-rpg-icon-tone: rgba(246, 227, 180, 0.96);
    --hud-rpg-text: var(--color-text);
    --hud-rpg-text-dim: var(--color-text-muted);
    --hud-nav-surface-top: rgba(13, 17, 24, 0.96);
    --hud-nav-surface-bottom: rgba(7, 10, 15, 0.99);
    --hud-nav-border: rgba(255, 255, 255, 0.08);
    --hud-nav-border-strong: rgba(255, 255, 255, 0.14);
    --hud-nav-separator: rgba(255, 255, 255, 0.08);
    --hud-nav-item-hover: rgba(255, 255, 255, 0.06);
    --hud-nav-item-active: rgba(255, 255, 255, 0.1);
    --hud-nav-shadow: 0 -14px 30px rgba(0, 0, 0, 0.24);
    --hud-subnav-max-width: 1024px;
    --hud-subnav-surface-top: rgba(9, 12, 19, 0.34);
    --hud-subnav-surface-bottom: rgba(9, 12, 19, 0.18);
    --hud-subnav-border: rgba(255, 255, 255, 0.08);
    --hud-subnav-highlight: rgba(255, 255, 255, 0.03);
    --hud-subnav-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    --hud-subnav-separator: rgba(255, 255, 255, 0.06);
    --hud-subnav-item-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(9, 12, 19, 0.2));
    --hud-subnav-item-bg-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(9, 12, 19, 0.28));
    --hud-subnav-item-bg-active: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(9, 12, 19, 0.34));
    --hud-subnav-item-border: rgba(255, 255, 255, 0.08);
    --hud-subnav-item-border-active: rgba(255, 255, 255, 0.18);
    --hud-subnav-text: rgba(244, 238, 227, 0.96);
    --hud-subnav-text-active: rgba(255, 247, 223, 0.98);

    --hud-rpg-mana-a: #2b6f9c;
    --hud-rpg-mana-b: #54add7;
    --hud-rpg-time-a: #7a2b2b;
    --hud-rpg-time-b: #c5673d;
    --fm-hud-icon-color: var(--hud-rpg-icon-tone);
    --hud-race-bg-image: none;
    --hud-race-bg-position: center center;
}

body[data-theme="vampire"] {
    --hud-rpg-core: #8b1d30;
    --hud-rpg-shadow: #130a11;
    --hud-rpg-arcane: #352036;
    --hud-rpg-metal: #ff5d7e;
    --hud-rpg-glow: rgba(255, 93, 126, 0.22);
    --hud-rpg-fog-a: rgba(139, 29, 48, 0.18);
    --hud-rpg-fog-b: rgba(92, 26, 45, 0.12);
    --hud-rpg-border: rgba(136, 44, 63, 0.52);
    --hud-rpg-border-soft: rgba(136, 44, 63, 0.3);
    --hud-rpg-icon-tone: rgba(255, 152, 176, 0.96);
    --hud-rpg-mana-a: #4a457f;
    --hud-rpg-mana-b: #7f7fd8;
    --hud-rpg-time-a: #8b1d30;
    --hud-rpg-time-b: #cf3f5d;
    --hud-race-bg-image: url('../../../assets/backgrounds/bg_vampire.avif');
    --hud-race-bg-position: center top;
}

body[data-theme="werewolf"] {
    --hud-rpg-core: #6c5c2f;
    --hud-rpg-shadow: #0f120b;
    --hud-rpg-arcane: #2e3a1f;
    --hud-rpg-metal: #c7d36f;
    --hud-rpg-glow: rgba(199, 211, 111, 0.22);
    --hud-rpg-fog-a: rgba(90, 101, 45, 0.14);
    --hud-rpg-fog-b: rgba(60, 83, 42, 0.12);
    --hud-rpg-border: rgba(112, 126, 73, 0.5);
    --hud-rpg-border-soft: rgba(112, 126, 73, 0.3);
    --hud-rpg-icon-tone: rgba(227, 235, 157, 0.96);
    --hud-rpg-mana-a: #2f5f56;
    --hud-rpg-mana-b: #64a37f;
    --hud-rpg-time-a: #6a4f2a;
    --hud-rpg-time-b: #a1783e;
    --hud-race-bg-image: url('../../../assets/backgrounds/bg_werewolf.avif');
    --hud-race-bg-position: center top;
}

body[data-theme="human"] {
    --hud-rpg-core: #2f567f;
    --hud-rpg-shadow: #0b1018;
    --hud-rpg-arcane: #24354c;
    --hud-rpg-metal: #f0c674;
    --hud-rpg-glow: rgba(240, 198, 116, 0.2);
    --hud-rpg-fog-a: rgba(50, 87, 127, 0.14);
    --hud-rpg-fog-b: rgba(35, 70, 108, 0.11);
    --hud-rpg-border: rgba(85, 118, 154, 0.5);
    --hud-rpg-border-soft: rgba(85, 118, 154, 0.28);
    --hud-rpg-icon-tone: rgba(245, 217, 158, 0.96);
    --hud-rpg-mana-a: #2f6794;
    --hud-rpg-mana-b: #67a9da;
    --hud-rpg-time-a: #6f3f2a;
    --hud-rpg-time-b: #b77b48;
    --hud-race-bg-image: url('../../../assets/backgrounds/bg_hunter.avif');
    --hud-race-bg-position: center top;
}

body[data-theme="witch"] {
    --hud-rpg-core: #5f3e8a;
    --hud-rpg-shadow: #0d0a17;
    --hud-rpg-arcane: #3a2b5b;
    --hud-rpg-metal: #7ee1ff;
    --hud-rpg-glow: rgba(126, 225, 255, 0.22);
    --hud-rpg-fog-a: rgba(95, 62, 138, 0.18);
    --hud-rpg-fog-b: rgba(63, 45, 98, 0.14);
    --hud-rpg-border: rgba(104, 86, 156, 0.52);
    --hud-rpg-border-soft: rgba(104, 86, 156, 0.3);
    --hud-rpg-icon-tone: rgba(189, 232, 255, 0.96);
    --hud-rpg-mana-a: #3f4f99;
    --hud-rpg-mana-b: #6fc5eb;
    --hud-rpg-time-a: #6c3e84;
    --hud-rpg-time-b: #9b60b4;
    --hud-race-bg-image: url('../../../assets/backgrounds/bg_witcher.avif');
    --hud-race-bg-position: center top;
}

.app {
    background:
        radial-gradient(1200px 600px at 8% 0%, var(--hud-rpg-fog-a), transparent 58%),
        radial-gradient(1000px 520px at 92% 14%, var(--hud-rpg-fog-b), transparent 56%),
        var(--theme-gradient);
}

.app::before {
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.62) 100%);
}

.header,
.navbar,
.subnavbar {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.header {
    background:
        linear-gradient(180deg, var(--hud-rpg-surface-elevated-top), var(--hud-rpg-surface-elevated-bottom));
    border-bottom: 1px solid var(--hud-rpg-border);
}

.header::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hud-rpg-glow), transparent);
}

.header__title,
.header__logo {
    color: var(--hud-rpg-metal);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
}

.header-player__avatar {
    border-color: var(--hud-rpg-border);
    box-shadow: 0 0 10px var(--hud-rpg-glow);
}

.fm-hud-icon,
.navbar__icon,
.header-action-btn__icon {
    filter: var(--fm-hud-icon-filter, none) drop-shadow(0 0 6px rgba(0, 0, 0, 0.35));
}

.header-action-btn {
    border-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(28, 30, 37, 0.95), rgba(12, 14, 18, 0.98));
}

.header-action-btn:hover {
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26);
}

.navbar {
    background: linear-gradient(180deg, var(--hud-nav-surface-top), var(--hud-nav-surface-bottom));
    border-top: 1px solid var(--hud-nav-border);
    box-shadow:
        var(--hud-nav-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    padding-left: 0;
    padding-right: 0;
    gap: 0;
    justify-content: stretch;
}

.navbar::before {
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.65), transparent);
    opacity: 0.9;
}

.navbar__item {
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
    padding: 4px 8px;
    gap: clamp(4px, 0.65vw, 8px);
    border-radius: 0;
    border-width: 0 1px 0 0;
    border-style: solid;
    border-color: var(--hud-nav-separator);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
    color: rgba(233, 238, 244, 0.78);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.navbar__item:last-child {
    border-right-width: 0;
}

.navbar__item:hover {
    color: #fff;
    background: linear-gradient(180deg, var(--hud-nav-item-hover), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.04);
}

.navbar__item--active {
    color: #fff;
    background:
        linear-gradient(180deg, var(--hud-nav-item-active), rgba(255, 255, 255, 0.03)),
        rgba(11, 14, 20, 0.98);
    border-color: var(--hud-nav-border-strong);
    box-shadow:
        inset 0 3px 0 var(--hud-rpg-metal),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}


.subnavbar {
    width: min(100%, var(--hud-subnav-max-width));
    max-width: var(--hud-subnav-max-width);
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    border: 1px solid var(--hud-subnav-border);
    border-top-color: transparent;
    border-radius: 8px;
    background:
        linear-gradient(180deg, var(--hud-subnav-surface-top), var(--hud-subnav-surface-bottom));
    backdrop-filter: blur(12px) saturate(125%);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
    box-shadow:
        var(--hud-subnav-shadow);
    padding: 0;
    gap: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 12px auto 18px auto;
}

body.hud-layout-portrait:has(#app .main-content--with-subnavbar) .gothic-frame__bottom,
body.hud-layout-portrait .gothic-frame__bottom.gothic-frame__bottom--with-subnavbar {
    height: calc(var(--subnavbar-height) + var(--navbar-height) + var(--safe-area-bottom));
}

body.hud-layout-portrait .navbar,
body.hud-layout-portrait .gothic-frame__bottom > .navbar {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    transform: none;
    z-index: calc(var(--z-fixed) + 3);
    padding-left: 0;
    padding-right: 0;
    gap: 0;
}

body.hud-layout-portrait .subnavbar,
body.hud-layout-portrait .gothic-frame__bottom > .subnavbar {
    display: flex !important;
    position: fixed;
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(var(--navbar-height) + var(--safe-area-bottom));
    transform: translateX(-50%);
    width: min(100vw, var(--hud-subnav-max-width));
    max-width: var(--hud-subnav-max-width);
    height: var(--subnavbar-height, 56px);
    margin: 0;
    padding: 0;
    gap: 0;
    border-radius: 0;
    border-width: 0;
    border-color: transparent;
    background:
        linear-gradient(180deg, rgba(10, 14, 22, 0.2), rgba(10, 14, 22, 0.1));
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12);
    justify-content: center;
    align-items: center;
    z-index: calc(var(--z-fixed) + 4);
}

body.hud-layout-portrait .subnavbar.subnavbar--town,
body.hud-layout-portrait .gothic-frame__bottom > .subnavbar.subnavbar--town {
    border-radius: 0;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12);
}

body.hud-layout-portrait .navbar__item {
    padding: 3px 4px 2px;
    gap: 1px;
}

body.hud-layout-portrait .navbar__icon {
    width: 14px;
    height: 14px;
}

body.hud-layout-portrait .navbar__label {
    font-size: 0.64rem;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.subnavbar::before {
    display: none;
}


.subnavbar__item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    height: 100%;
    justify-content: center;
    border-radius: 0;
    border-width: 0 1px 0 0;
    border-style: solid;
    border-color: var(--hud-subnav-separator);
    background: var(--hud-subnav-item-bg);
    color: var(--hud-subnav-text);
    margin: 0;
    padding: 0 10px;
    font-size: calc(var(--chrome-font-2xs, 0.72rem) * var(--ui-font-scale, 1));
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.subnavbar__item:last-child {
    border-right-width: 0;
}

.subnavbar__item:hover {
    background: var(--hud-subnav-item-bg-hover);
    border-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    box-shadow: none;
}

.subnavbar__item--active {
    background: var(--hud-subnav-item-bg-active);
    border-color: var(--hud-subnav-item-border-active);
    color: var(--hud-subnav-text-active);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.status-overlay .hud-meter__bar {
    border-top-color: var(--hud-rpg-border-soft);
    border-bottom-color: var(--hud-rpg-border-soft);
    background:
        linear-gradient(180deg, rgba(18, 14, 20, 0.96), rgba(10, 8, 14, 0.98));
}

.status-overlay--mana .hud-meter__fill {
    background: linear-gradient(90deg, var(--hud-rpg-mana-a), var(--hud-rpg-mana-b));
}

.status-overlay--time .hud-meter__fill {
    background: linear-gradient(90deg, var(--hud-rpg-time-a), var(--hud-rpg-time-b));
}

.hud-meter__label {
    letter-spacing: 0.05em;
}

.hud-meter__action {
    border-color: var(--hud-rpg-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.22));
    color: var(--hud-rpg-metal);
}

.hud-meter__action:hover {
    border-color: var(--hud-rpg-metal);
    box-shadow: 0 0 12px var(--hud-rpg-glow);
}

.card {
    background:
        radial-gradient(130% 120% at 90% -10%, rgba(255, 255, 255, 0.03), transparent 40%),
        linear-gradient(180deg, var(--hud-rpg-surface-top), var(--hud-rpg-surface-bottom));
    border: 1px solid var(--hud-rpg-border-soft);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 var(--hud-rpg-highlight);
}

.card__header {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.14));
    border-bottom-color: var(--hud-rpg-border-soft);
    color: var(--hud-rpg-metal);
}

.card__footer {
    border-top-color: var(--hud-rpg-border-soft);
}

.modal {
    background:
        radial-gradient(120% 120% at 90% -10%, rgba(255, 255, 255, 0.03), transparent 45%),
        linear-gradient(180deg, var(--hud-rpg-surface-elevated-top), var(--hud-rpg-surface-elevated-bottom));
    border: 1px solid var(--hud-rpg-border);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 var(--hud-rpg-highlight);
}

.modal__header,
.modal__footer {
    border-color: var(--hud-rpg-border-soft);
}

.modal__title {
    color: var(--hud-rpg-metal);
}

.btn {
    border-radius: 7px;
}

.btn--primary {
    border-color: var(--hud-rpg-border-soft);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 6px 16px rgba(0, 0, 0, 0.32);
}

.btn--secondary {
    border-color: var(--hud-rpg-border);
    color: var(--hud-rpg-metal);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.2));
}

.btn--secondary:hover:not(:disabled) {
    border-color: var(--hud-rpg-metal);
    box-shadow: 0 0 12px var(--hud-rpg-glow);
}

.btn--ghost {
    border-color: var(--hud-rpg-border-soft);
}

.btn--ghost:hover:not(:disabled) {
    border-color: var(--hud-rpg-border);
    background: rgba(255, 255, 255, 0.03);
}

.stat-bar__track {
    border: 1px solid var(--hud-rpg-border-soft);
    background: rgba(0, 0, 0, 0.42);
}

.stat-bar__value {
    color: var(--hud-rpg-text-dim);
}

.city-viewport,
.map-viewport,
.tavern-viewport,
.story-atmosphere {
    border-color: var(--hud-rpg-border-soft);
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* Scene focus mode - remove all borders/shadows for full viewport video */
.main-content--scene-focus .city-viewport {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.main-content {
    scrollbar-color: var(--hud-rpg-border-soft) transparent;
}

.main-content::-webkit-scrollbar-thumb {
    background: var(--hud-rpg-border-soft);
}

@media (max-width: 767px) {
    .header {
        border-bottom-width: 1px;
    }

    .navbar,
    .subnavbar {
        border-top-width: 1px;
    }

    body.hud-layout-portrait .subnavbar,
    body.hud-layout-portrait .navbar,
    body.hud-layout-portrait .gothic-frame__bottom > .subnavbar,
    body.hud-layout-portrait .gothic-frame__bottom > .navbar {
        border-top-width: 0;
    }

    .subnavbar__item {
        font-size: 10px;
        letter-spacing: 0.04em;
    }
}

@media (min-width: 768px) {
    body.hud-layout-landscape {
        background:
            radial-gradient(ellipse at 18% 78%, var(--hud-rpg-fog-a), transparent 50%),
            radial-gradient(ellipse at 82% 20%, var(--hud-rpg-fog-b), transparent 48%),
            var(--theme-background);
    }

    body.hud-layout-landscape .header,
    body.hud-layout-landscape .navbar,
    body.hud-layout-landscape .gothic-frame__bottom {
        border-color: var(--hud-rpg-border);
    }

    body.hud-layout-landscape .header,
    body.hud-layout-landscape .gothic-frame__bottom {
        background:
            linear-gradient(180deg, var(--hud-rpg-surface-elevated-top), var(--hud-rpg-surface-elevated-bottom));
    }

    /* Subnavbar card style */
    body.hud-layout-landscape .subnavbar {
        width: min(calc(100% - var(--hud-sidebar-width) - var(--hud-gutter, 0px)), var(--hud-subnav-max-width));
        max-width: var(--hud-subnav-max-width);
        right: auto;
        padding: 0;
        gap: 0;
        border: 1px solid var(--hud-subnav-border);
        border-radius: 8px;
        background:
            linear-gradient(180deg, var(--hud-subnav-surface-top), var(--hud-subnav-surface-bottom));
        backdrop-filter: blur(12px) saturate(125%);
        -webkit-backdrop-filter: blur(12px) saturate(125%);
        box-shadow: var(--hud-subnav-shadow);
    }

    body.hud-layout-landscape .navbar {
        background:
            linear-gradient(180deg, rgba(11, 14, 20, 0.94), rgba(7, 10, 15, 0.98));
        box-shadow: none;
    }

    body.hud-layout-landscape .navbar__item,
    body.hud-layout-landscape .header-resource,
    body.hud-layout-landscape .header__stat,
    body.hud-layout-landscape .header-action-btn {
        border-color: var(--hud-rpg-border-soft);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
        color: var(--hud-rpg-text);
    }

    /* Subnavbar items - straight minimal style with transparency only on the surface */
    body.hud-layout-landscape .subnavbar__item {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        min-height: 0;
        height: 100%;
        justify-content: center;
        padding: 0 10px;
        border-radius: 0;
        border-width: 0 1px 0 0;
        border-style: solid;
        border-color: var(--hud-subnav-separator);
        background: var(--hud-subnav-item-bg);
        color: var(--hud-subnav-text);
    }

    body.hud-layout-landscape .navbar__item:hover,
    body.hud-layout-landscape .header-resource:hover,
    body.hud-layout-landscape .header__stat:hover,
    body.hud-layout-landscape .header-action-btn:hover {
        border-color: var(--hud-rpg-border);
        box-shadow: 0 0 12px var(--hud-rpg-glow);
    }

    body.hud-layout-landscape .subnavbar__item:hover {
        background: var(--hud-subnav-item-bg-hover);
        border-color: rgba(255, 255, 255, 0.12);
        color: #ffffff;
        box-shadow: none;
    }

    body.hud-layout-landscape .navbar__item--active {
        color: var(--hud-rpg-metal);
        box-shadow:
            inset 3px 0 0 var(--hud-rpg-metal),
            inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    }

    body.hud-layout-landscape .subnavbar__item--active {
        background: var(--hud-subnav-item-bg-active);
        border-color: var(--hud-subnav-item-border-active);
        color: var(--hud-subnav-text-active);
        box-shadow:
            inset 0 3px 0 var(--hud-rpg-metal),
            inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    }

    body.hud-layout-landscape .header-player__name,
    body.hud-layout-landscape .header__title {
        color: var(--hud-rpg-metal);
    }
}

@media (min-width: 1020px) {
    body.hud-layout-landscape {
        background-color: var(--theme-background);
        background-image:
            linear-gradient(180deg, rgba(5, 8, 12, 0.26) 0%, rgba(5, 8, 12, 0.58) 100%),
            radial-gradient(circle at 18% 18%, var(--hud-rpg-fog-a), transparent 38%),
            radial-gradient(circle at 84% 16%, var(--hud-rpg-fog-b), transparent 36%),
            var(--hud-race-bg-image),
            var(--theme-gradient);
        background-position:
            center,
            center,
            center,
            var(--hud-race-bg-position),
            center;
        background-size:
            auto,
            auto,
            auto,
            cover,
            cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    body.hud-layout-landscape .app {
        background: transparent;
    }

    body.hud-layout-landscape .app::after {
        background:
            radial-gradient(ellipse at 28% 72%, rgba(0, 0, 0, 0.05) 0%, transparent 46%),
            radial-gradient(ellipse at 72% 24%, rgba(0, 0, 0, 0.04) 0%, transparent 42%);
        animation-duration: 24s;
    }

    body.hud-layout-landscape .gothic-frame__left,
    body.hud-layout-landscape .gothic-frame__right,
    body.hud-layout-landscape .gothic-frame__corner,
    body.hud-layout-landscape .navbar::before,
    body.hud-layout-landscape .subnavbar::before,
    body.hud-layout-landscape .header::after,
    body.hud-layout-landscape .navbar__item::before,
    body.hud-layout-landscape .navbar__item--active::before,
    body.hud-layout-landscape .navbar__item--active::after,
    body.hud-layout-landscape .status-overlay__track::before,
    body.hud-layout-landscape .status-overlay__track::after,
    body.hud-layout-landscape .status-overlay__track-wrap::before,
    body.hud-layout-landscape .status-overlay__track-wrap::after {
        content: none;
        display: none;
    }

    body.hud-layout-landscape .header,
    body.hud-layout-landscape .navbar,
    body.hud-layout-landscape .subnavbar,
    body.hud-layout-landscape .gothic-frame__bottom {
        backdrop-filter: blur(16px) saturate(115%);
        box-shadow:
            0 16px 30px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    body.hud-layout-landscape .header,
    body.hud-layout-landscape .subnavbar,
    body.hud-layout-landscape .gothic-frame__bottom {
        background:
            linear-gradient(180deg, rgba(16, 18, 24, 0.72) 0%, rgba(10, 12, 18, 0.88) 100%);
    }

    body.hud-layout-landscape .navbar {
        background:
            linear-gradient(180deg, rgba(12, 14, 18, 0.78) 0%, rgba(9, 11, 16, 0.9) 100%);
    }

    body.hud-layout-landscape .navbar__item,
    body.hud-layout-landscape .subnavbar__item,
    body.hud-layout-landscape .header-resource,
    body.hud-layout-landscape .header__stat,
    body.hud-layout-landscape .header-action-btn,
    body.hud-layout-landscape .card,
    body.hud-layout-landscape .modal {
        backdrop-filter: blur(12px) saturate(112%);
    }

    body.hud-layout-landscape .navbar__item,
    body.hud-layout-landscape .header-resource,
    body.hud-layout-landscape .header__stat,
    body.hud-layout-landscape .header-action-btn {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(9, 11, 15, 0.48));
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: none;
    }

    body.hud-layout-landscape .subnavbar__item {
        background: var(--hud-subnav-item-bg);
        border-color: var(--hud-subnav-separator);
        box-shadow: none;
    }

    body.hud-layout-landscape .navbar__item {
        flex: 0 0 auto;
        width: 100%;
        min-height: 40px;
        padding: 0 12px;
        border-radius: 0;
        border-width: 0 0 1px 0;
        border-style: solid;
        border-color: rgba(255, 255, 255, 0.08);
        background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
    }

    body.hud-layout-landscape .navbar__item:last-child {
        border-bottom-width: 0;
    }

    body.hud-layout-landscape .navbar__item--active,
    body.hud-layout-landscape .subnavbar__item--active {
        color: var(--hud-rpg-metal);
        border-color: color-mix(in oklab, var(--hud-rpg-metal) 32%, rgba(255, 255, 255, 0.16));
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(9, 11, 15, 0.58));
        box-shadow:
            inset 3px 0 0 var(--hud-rpg-metal),
            inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    }

    body.hud-layout-landscape .subnavbar__item--active {
        background: var(--hud-subnav-item-bg-active);
    }

    body.hud-layout-landscape .card {
        background:
            radial-gradient(120% 120% at 90% -10%, rgba(255, 255, 255, 0.05), transparent 38%),
            linear-gradient(180deg, rgba(13, 16, 20, 0.68), rgba(10, 12, 16, 0.82));
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow:
            0 18px 32px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    body.hud-layout-landscape .modal {
        background:
            radial-gradient(120% 120% at 90% -10%, rgba(255, 255, 255, 0.06), transparent 40%),
            linear-gradient(180deg, rgba(14, 16, 20, 0.82), rgba(10, 12, 16, 0.92));
        border-color: rgba(255, 255, 255, 0.14);
    }

    body.hud-layout-landscape .status-overlay__track-wrap {
        padding: 0;
    }

    body.hud-layout-landscape .status-overlay__track {
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 999px;
        background:
            linear-gradient(180deg, rgba(14, 16, 20, 0.74), rgba(9, 11, 16, 0.88));
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 10px 20px rgba(0, 0, 0, 0.18);
    }

    body.hud-layout-landscape .status-overlay__label {
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.58);
    }
}