/* Compact pre-game shell. Silent unless html.ui-compact is set by boot.js. */

.ui-compact-only,
.ui-compact-offer {
    display: none !important;
}

html.ui-compact .ui-compact-only {
    display: block !important;
    margin: 12px 0 0;
    text-align: center;
}

html.ui-compact .ui-compact-only a {
    color: rgba(242, 223, 180, 0.72);
    font-size: 13px;
}

/* Store/WebView shell: same site, no "this is a website" chrome. */
html.is-native-app .ui-compact-only,
html.is-native-app .ui-compact-offer {
    display: none !important;
}

/* Native shell backup if the WebView still reports a notch inset. */
html.ui-compact.is-native-app .game-header {
    padding-top: calc(2px + env(safe-area-inset-top, 0px));
}

html.ui-compact.is-native-app .game-modal .close-button,
html.ui-compact.is-native-app .game-modal .modal-close,
html.ui-compact.is-native-app .learn-skill-modal .close-x {
    top: calc(8px + env(safe-area-inset-top, 0px));
}

@media (max-width: 820px) {
    html:not(.ui-compact) .ui-compact-offer {
        display: block !important;
        margin: 12px 0 0;
        text-align: center;
    }

    html:not(.ui-compact) .ui-compact-offer a {
        color: rgba(242, 223, 180, 0.78);
        font-size: 13px;
    }
}

html.ui-compact,
html.ui-compact body {
    min-height: 100dvh;
}

/* Heavy FX stay off: rune shimmer, scene twilight overlay, animated veins.
   Portrait aura is a cheap static drop-shadow (no pulse, no blur). */
html.ui-compact .ui-backdrop-rune-mask,
html.ui-compact .ui-backdrop-rune-mask::before,
html.ui-compact .ui-backdrop-rune-mask::after,
html.ui-compact .game-background-twilight,
html.ui-compact .game-background-twilight::before,
html.ui-compact #game-content .game-background-twilight,
html.ui-compact #game-content .game-background-twilight::before,
html.ui-compact .player-portrait-hud.is-twilight-layer.has-veins-mask::after,
html.ui-compact .npc-portrait-hud.is-twilight-layer.has-veins-mask::after {
    display: none !important;
    animation: none !important;
    filter: none !important;
    opacity: 0 !important;
}

html.ui-compact .player-portrait-hud.is-twilight-layer img,
html.ui-compact .npc-portrait-hud.is-twilight-layer img,
html.ui-compact .char-select__hero.player-portrait-hud.is-twilight-layer img {
    animation: none !important;
    filter:
        saturate(1.06)
        contrast(1.03)
        drop-shadow(0 0 12px var(--tw-aura-1))
        drop-shadow(0 0 28px var(--tw-aura-2)) !important;
}

html.ui-compact #app-container,
html.ui-compact #content-container {
    height: auto;
    min-height: 100dvh;
    max-height: none;
    overflow: visible;
    width: 100%;
}

html.ui-compact input:not([type="checkbox"]):not([type="radio"]),
html.ui-compact select,
html.ui-compact textarea {
    font-size: 16px !important;
}

/* ===== Landing ===== */

html.ui-compact .landing {
    position: fixed;
    top: var(--compact-vv-top, 0px);
    left: var(--compact-vv-left, 0px);
    width: var(--compact-vv-w, 100%);
    height: var(--compact-vv-h, 100dvh);
    max-height: var(--compact-vv-h, 100dvh);
    min-height: 0;
    padding: 0;
    align-items: stretch;
    place-items: stretch;
    overflow: hidden;
    overscroll-behavior: none;
}

html.ui-compact .landing-hero {
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    min-height: 0;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
}

html.ui-compact .landing-hero video,
html.ui-compact .landing-hero .poster {
    object-fit: cover;
    object-position: center center;
    background-position: center center;
}

html.ui-compact .landing-hero .content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 0;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px));
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

html.ui-compact .landing-home,
html.ui-compact .landing-home.is-about,
html.ui-compact .landing-home.is-legal {
    grid-template-columns: 1fr;
    align-items: stretch;
    justify-items: stretch;
    gap: 12px;
    width: min(100%, 420px);
    height: auto;
    min-height: 0;
    margin: 0 auto;
}

html.ui-compact .landing-intro {
    text-align: center;
}

html.ui-compact .landing-title {
    margin-bottom: 8px;
    font-size: clamp(28px, 8vw, 36px);
}

html.ui-compact .landing-sub {
    max-width: 28em;
    margin: 0 auto;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 244, 216, 0.74);
}

html.ui-compact .landing-home.is-about,
html.ui-compact .landing-home.is-legal {
    width: min(100%, 560px);
}

html.ui-compact .landing-home.is-about .landing-intro,
html.ui-compact .landing-home.is-legal .landing-intro,
html.ui-compact .landing-home.is-about .auth-card,
html.ui-compact .landing-home.is-legal .auth-card {
    align-self: stretch;
    max-height: none;
}

html.ui-compact .auth-card {
    padding: 16px;
}

html.ui-compact .tabs {
    flex-wrap: wrap;
    gap: 8px;
}

html.ui-compact .tab {
    min-height: 44px;
    font-size: 14px;
    padding: 10px 8px;
}

html.ui-compact .auth-card input:not([type="checkbox"]) {
    min-height: 48px;
    padding: 12px 14px;
}

html.ui-compact .btnx {
    min-height: 48px;
    width: 100%;
}

html.ui-compact .landing-home.is-about .landing-codex-inline,
html.ui-compact .landing-home.is-legal .landing-legal {
    min-height: 0;
    max-height: min(62dvh, 520px);
}

html.ui-compact .landing-home.is-about .landing-codex-inline {
    display: flex;
    flex-direction: column;
    max-height: min(72dvh, 640px);
    overflow: hidden;
}

/* ===== Fallback auth pages ===== */

html.ui-compact .login-bg,
html.ui-compact .register-bg {
    min-height: 100dvh;
    padding: 20px 14px;
}

html.ui-compact .login-container,
html.ui-compact .register-container {
    max-width: none;
    width: 100%;
    padding: 20px 16px;
}

html.ui-compact .form-control,
html.ui-compact .btn-login,
html.ui-compact .btn {
    min-height: 48px;
}

html.ui-compact body > #app-container .container.py-5,
html.ui-compact body > #app-container .container.py-4 {
    max-width: none !important;
    padding-left: 16px;
    padding-right: 16px;
}

/* ===== Character select ===== */

html.ui-compact body.character-select-page,
html.ui-compact body.character-select-page #app-container,
html.ui-compact body.character-select-page #content-container {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

html.ui-compact .char-select {
    position: fixed;
    top: var(--compact-vv-top, 0px);
    left: var(--compact-vv-left, 0px);
    width: var(--compact-vv-w, 100%);
    height: var(--compact-vv-h, 100dvh);
    max-height: var(--compact-vv-h, 100dvh);
    overflow: hidden;
    overscroll-behavior: none;
}

html.ui-compact .char-select {
    --cs-chrome-h: 96px;
    --cs-hero-h: min(46dvh, 380px);
    --cs-card-h: 160px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 10px calc(10px + env(safe-area-inset-bottom, 0px));
}

html.ui-compact .char-select__header {
    position: relative;
    z-index: 6;
}

html.ui-compact .char-select__account-delete {
    font-size: 12px;
    padding: 6px 8px;
    color: rgba(255, 244, 216, 0.4);
}

html.ui-compact .char-select-modal__password input {
    min-height: 44px;
    font-size: 16px;
}

html.ui-compact .char-select__title {
    letter-spacing: 0.12em;
    font-size: 18px;
}

html.ui-compact .char-select__hero.player-portrait-hud {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    height: 100%;
    width: auto;
    max-width: 100%;
}

html.ui-compact .char-select__lineup {
    display: grid;
    grid-template-columns: minmax(64px, 1fr) auto minmax(64px, 1fr);
    align-items: end;
    padding: 0 36px 52px;
    gap: 6px;
}

html.ui-compact .char-select__flank--left,
html.ui-compact .char-select__flank--right {
    display: flex;
}

html.ui-compact .character-card {
    width: 68px;
}

html.ui-compact .character-card.create-character {
    display: flex;
    width: 68px;
    height: 118px;
    min-height: 118px;
    opacity: 1;
}

html.ui-compact .char-select__center-stack {
    width: min(220px, 52vw);
}

html.ui-compact .char-select__nav {
    min-width: 44px;
    min-height: 64px;
    font-size: 44px;
}

html.ui-compact .char-select__actions.character-actions {
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

html.ui-compact .char-select__enter,
html.ui-compact .char-select__claim-gift,
html.ui-compact .char-select__logout,
html.ui-compact .char-select__admin {
    width: 100%;
    min-height: 48px;
    justify-content: center;
}

html.ui-compact .char-select__gift {
    top: calc(8px + env(safe-area-inset-top, 0px));
    left: auto;
    right: 8px;
    transform: none;
    z-index: 8;
    overflow: visible;
    max-width: min(280px, calc(100vw - 16px));
}

html.ui-compact .char-select__gift-seal {
    width: 88px;
    height: 88px;
    overflow: visible;
}

html.ui-compact .char-select__gift-preview {
    left: auto;
    right: 0;
    width: min(260px, calc(100vw - 16px));
    min-width: 0;
    max-width: min(260px, calc(100vw - 16px));
    box-sizing: border-box;
}

@media (min-width: 600px) and (min-height: 600px) {
    html.ui-compact .char-select__gift-seal {
        width: 110px;
        height: 110px;
    }

    html.ui-compact .char-select__gift-preview {
        width: min(280px, 42vw);
        max-width: min(280px, 42vw);
    }
}

html.ui-compact #char-select-gift-tooltip-root .item-tooltip,
html.ui-compact .char-select-gift-tooltip.item-tooltip {
    max-width: min(280px, calc(100vw - 16px));
    box-sizing: border-box;
}

/* ===== Character create ===== */

html.ui-compact body.character-create-page,
html.ui-compact body.character-create-page #app-container,
html.ui-compact body.character-create-page #content-container {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

html.ui-compact .char-create {
    position: fixed;
    top: var(--compact-vv-top, 0px);
    left: var(--compact-vv-left, 0px);
    width: var(--compact-vv-w, 100%);
    height: var(--compact-vv-h, 100dvh);
    max-height: var(--compact-vv-h, 100dvh);
    overflow: hidden;
    overscroll-behavior: none;
}

html.ui-compact .char-create {
    --cc-chrome-h: 92px;
    --cc-hero-h: min(38dvh, 280px);
    --cc-card-h: 118px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 10px calc(10px + env(safe-area-inset-bottom, 0px));
}

html.ui-compact .char-create__title {
    letter-spacing: 0.12em;
    font-size: 17px;
}

html.ui-compact .char-create__hero.player-portrait-hud {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    height: 100%;
    width: auto;
    max-width: 100%;
}

html.ui-compact .options-container {
    width: 100%;
    gap: 10px;
}

html.ui-compact .option-card {
    width: calc(50% - 6px);
    min-width: 132px;
    min-height: 112px;
    padding: 14px 10px;
}

html.ui-compact .option-card:hover {
    transform: none;
}

html.ui-compact .char-create__preview-stage,
html.ui-compact .char-create__name-block {
    width: min(100%, 420px);
}

html.ui-compact .char-create__name-input,
html.ui-compact .char-create__btn,
html.ui-compact .char-create__cta {
    min-height: 48px;
    width: 100%;
}

html.ui-compact .char-create__actions {
    width: 100%;
    gap: 10px;
    flex-wrap: wrap;
}

html.ui-compact .char-create__actions .ui-compact-only,
html.ui-compact .char-select__actions .ui-compact-only {
    flex: 1 0 100%;
}

html.ui-compact .arrow-btn {
    width: 48px;
    height: 48px;
}

/* ===== In-game street + dialogue ===== */

html.ui-compact {
    --bar-slot-min: 48px;
    --bar-slot-max: 64px;
    --compact-vv-w: 100svw;
    --compact-vv-h: 100dvh;
    --compact-vv-top: 0px;
    --compact-vv-left: 0px;
    --bar-gap: clamp(6px, 2vw, 10px);
    --bar-pad: clamp(12px, 4vw, 22px);
    --bar-fade: 24px;
    --chrome-cols: 6;
    /* 6 cells fill the phone; cap at Fold-folded size so wide screens
       do not grow into horses. Extra width adds columns, not cell size.
       Use visual-viewport width: after Fold open/close 100vw can stay stale. */
    --bar-slot: clamp(
        var(--bar-slot-min),
        calc(
            (
                var(--compact-vv-w)
                - (2 * var(--bar-pad))
                - ((var(--chrome-cols) - 1) * var(--bar-gap))
            ) / var(--chrome-cols)
        ),
        var(--bar-slot-max)
    );
    --chrome-max: calc(
        (var(--chrome-cols) * var(--bar-slot))
        + ((var(--chrome-cols) - 1) * var(--bar-gap))
        + (2 * var(--bar-pad))
    );
    --chrome-gutter: max(0px, calc((var(--compact-vv-w) - var(--chrome-max)) / 2));
}

/* iOS Safari/Chrome swipe-up shows the browser chrome and rubber-bands
   the document. Lock fullscreen compact shells to the visual viewport. */
html.ui-compact:has(.game-container),
html.ui-compact:has(.game-container) body,
html.ui-compact:has(.landing),
html.ui-compact:has(.landing) body,
html.ui-compact:has(.char-select),
html.ui-compact:has(.char-select) body,
html.ui-compact:has(.char-create),
html.ui-compact:has(.char-create) body {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

html.ui-compact:has(.game-container) #app-container,
html.ui-compact:has(.game-container) #content-container,
html.ui-compact:has(.landing) #app-container,
html.ui-compact:has(.landing) #content-container,
html.ui-compact:has(.char-select) #app-container,
html.ui-compact:has(.char-select) #content-container,
html.ui-compact:has(.char-create) #app-container,
html.ui-compact:has(.char-create) #content-container {
    height: 100%;
    max-height: 100%;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

html.ui-compact .game-container {
    position: fixed;
    top: var(--compact-vv-top, 0px);
    left: var(--compact-vv-left, 0px);
    width: var(--compact-vv-w, 100%);
    height: var(--compact-vv-h, 100dvh);
    max-height: var(--compact-vv-h, 100dvh);
    overflow: hidden;
    overscroll-behavior: none;
}

html.ui-compact:has(.game-container),
html.ui-compact .game-container {
    --compact-browser-inset: 0px;
    --footer-safe: 64px;
    --bar-air: 6px;
    --actionbar-safe: calc((2 * var(--bar-slot)) + var(--bar-gap) + 16px);
    --header-safe: 28px;
    --drawer-top: calc(var(--header-safe) + 64px);
    --bar-bottom: calc(var(--footer-safe) + var(--bar-air) + var(--compact-browser-inset));
    --scene-inset: calc(var(--actionbar-safe) + (2 * var(--bar-air)));
    --scene-edge: calc(var(--footer-safe) + var(--scene-inset));
    --compact-dock: calc(var(--bar-bottom) + var(--actionbar-safe));
}

/* Craft / mail / auction: action bar is noise. Keep it for bag, storages, shop. */
html.ui-compact:has(#inventory-modal.active #inventory-modal-content.with-alchemy),
html.ui-compact:has(#inventory-modal.active #inventory-modal-content.with-artifact),
html.ui-compact:has(#inventory-modal.active #inventory-modal-content.with-mail),
html.ui-compact:has(#inventory-modal.active #inventory-modal-content.with-alchemy) .game-container,
html.ui-compact:has(#inventory-modal.active #inventory-modal-content.with-artifact) .game-container,
html.ui-compact:has(#inventory-modal.active #inventory-modal-content.with-mail) .game-container {
    --actionbar-safe: 0px;
}

html.ui-compact:has(#inventory-modal.active #inventory-modal-content.with-alchemy) .action-bar-container,
html.ui-compact:has(#inventory-modal.active #inventory-modal-content.with-artifact) .action-bar-container,
html.ui-compact:has(#inventory-modal.active #inventory-modal-content.with-mail) .action-bar-container,
html.ui-compact:has(#inventory-modal.active #inventory-modal-content.with-alchemy) #combat-action-bar,
html.ui-compact:has(#inventory-modal.active #inventory-modal-content.with-artifact) #combat-action-bar,
html.ui-compact:has(#inventory-modal.active #inventory-modal-content.with-mail) #combat-action-bar {
    display: none !important;
    pointer-events: none !important;
}

/* Show the real #ui-backdrop (static + mask), including under the header. */
html.ui-compact:has(.game-container) #app-container,
html.ui-compact:has(.game-container) #content-container,
html.ui-compact .game-container,
html.ui-compact .game-main,
html.ui-compact .game-content,
html.ui-compact .game-header,
html.ui-compact .character-status.is-compact-hud {
    background: transparent;
}

html.ui-compact .game-main {
    grid-template-columns: minmax(0, 1fr);
}

/* One thin row: location | book / settings / SOS / ping */
html.ui-compact .game-header {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: var(--header-safe);
    padding: 2px 6px 0;
    column-gap: 6px;
}

html.ui-compact .header-side-slot:not(.header-side-slot--right) {
    display: none;
}

html.ui-compact .header-side-slot--right {
    min-height: 0;
    min-width: 0;
}

html.ui-compact .header-center-slot {
    justify-self: stretch;
    max-width: none;
    justify-content: flex-start;
    min-width: 0;
}

html.ui-compact .header-location-strip {
    justify-content: flex-start;
    flex-wrap: nowrap;
    min-height: 0;
    max-width: none;
    column-gap: 6px;
}

html.ui-compact .header-location-text {
    font-size: 11px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

html.ui-compact .game-header-tools,
html.ui-compact #combat-header-tools {
    gap: 4px;
}

html.ui-compact .game-header-tools .game-settings-toggle,
html.ui-compact .game-header-tools .game-codex-toggle,
html.ui-compact #combat-header-tools .game-settings-toggle,
html.ui-compact #combat-header-tools .game-codex-toggle {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 8px;
    flex: 0 0 26px;
}

html.ui-compact .game-codex-toggle__icon,
html.ui-compact .game-settings-toggle__icon {
    width: 14px;
    height: 14px;
}

html.ui-compact .support-ticket-toggle {
    width: auto;
    min-width: 28px;
    height: 26px;
    padding: 0 5px;
    font-size: 9px;
    letter-spacing: 0.04em;
    border-radius: 8px;
}

html.ui-compact .support-ticket-toggle.is-floating {
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: calc(10px + env(safe-area-inset-left, 0px));
    right: auto;
    width: auto;
    min-width: 40px;
    height: 32px;
    padding: 0 10px;
    font-size: 11px;
}

html.ui-compact .support-ticket-toggle.is-in-modal-header {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 3;
    flex: 0 0 auto;
    align-self: center;
    width: auto !important;
    min-width: 26px;
    height: 24px !important;
    padding: 0 6px;
    margin: 0 2px 0 0;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
    border-radius: 7px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -6px 10px rgba(2, 6, 12, 0.42);
}

html.ui-compact .game-modal .close-button,
html.ui-compact .game-modal .modal-close,
html.ui-compact .learn-skill-modal .close-x,
html.ui-compact #abilities-modal .close-button,
html.ui-compact .close-alchemy,
html.ui-compact .close-artifact,
html.ui-compact .close-auction,
html.ui-compact .close-mail,
html.ui-compact .close-synthesis {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
}

html.ui-compact .game-modal .modal-header,
html.ui-compact .abilities-modal-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    min-height: 36px;
    padding: 0 6px;
}

html.ui-compact .abilities-modal-header .branch-info-panel {
    flex: 1 1 auto;
    min-width: 0;
}

html.ui-compact .learn-skill-modal:not(.clan-skill-learn-modal) {
    padding: 0;
    align-items: stretch;
}

html.ui-compact .learn-skill-modal:not(.clan-skill-learn-modal) .modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
    border-radius: 0;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 10px calc(10px + env(safe-area-inset-bottom, 0px));
}

html.ui-compact .learn-skill-modal:not(.clan-skill-learn-modal) .skill-level-preview-controls {
    order: 1;
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    margin: 0 40px 6px 0;
    padding: 6px 8px;
}

html.ui-compact .learn-skill-modal:not(.clan-skill-learn-modal) .modal-actions {
    order: 2;
    flex: 0 0 auto;
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: stretch;
    align-items: stretch;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    background: transparent;
    position: relative;
    z-index: 200;
    pointer-events: auto;
}

html.ui-compact .learn-skill-modal:not(.clan-skill-learn-modal) .modal-scroll {
    order: 3;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
    position: relative;
}

html.ui-compact .learn-skill-modal:not(.clan-skill-learn-modal) .skill-level-requirements {
    overflow: visible;
    margin-top: 12px;
    margin-bottom: 8px;
}

html.ui-compact .learn-skill-modal .modal-btn.cancel {
    display: none !important;
}

html.ui-compact .learn-skill-modal.clan-skill-learn-modal .modal-actions {
    display: none !important;
}

html.ui-compact .learn-skill-modal:not(.clan-skill-learn-modal) .skill-level-preview-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
}

html.ui-compact .learn-skill-modal:not(.clan-skill-learn-modal) .modal-actions .preview-current,
html.ui-compact .learn-skill-modal:not(.clan-skill-learn-modal) .modal-actions .modal-btn.learn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin: 0;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
}

html.ui-compact .learn-skill-modal:not(.clan-skill-learn-modal) .modal-actions .preview-current {
    flex: 0 1 auto;
    min-width: 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%),
        linear-gradient(180deg, rgba(242, 210, 132, 0.92), rgba(190, 169, 121, 0.88));
    border: 1px solid rgba(242, 210, 132, 0.55);
    color: rgba(20, 16, 10, 0.92);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 8px 18px -12px rgba(255, 204, 112, 0.55);
}

html.ui-compact .learn-skill-modal:not(.clan-skill-learn-modal) .modal-actions .modal-btn.learn {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    z-index: 201;
    pointer-events: auto !important;
}

html.ui-compact .learn-skill-modal:not(.clan-skill-learn-modal) .modal-actions:has(.preview-current) .modal-btn.learn {
    flex: 1 1 0;
}

html.ui-compact .learn-skill-modal:not(.clan-skill-learn-modal) .modal-content,
html.ui-compact .learn-skill-modal:not(.clan-skill-learn-modal) .modal-scroll,
html.ui-compact .landing-codex-inline,
html.ui-compact #codex-modal .modal-body,
html.ui-compact .codex-atlas__body,
html.ui-compact .codex-skill-viewer,
html.ui-compact .codex-item-detail,
html.ui-compact .has-compact-level-swipe,
html.ui-compact .has-compact-level-listen {
    touch-action: pan-y;
}

html.ui-compact .has-compact-level-swipe {
    position: relative;
}

html.ui-compact .ui-compact-level-pagers {
    pointer-events: none !important;
    z-index: 80;
}

html.ui-compact .ui-compact-level-pagers.is-overlay {
    position: absolute;
    inset: 0;
}

html.ui-compact .ui-compact-level-pagers.is-sticky {
    position: sticky;
    top: 0;
    height: 0;
}

html.ui-compact .ui-compact-level-pager {
    pointer-events: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 72px;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0.78;
    cursor: pointer;
}

html.ui-compact .ui-compact-level-pagers.is-sticky .ui-compact-level-pager {
    top: min(38dvh, 240px);
    transform: none;
}

html.ui-compact .ui-compact-level-pager.is-prev {
    left: 2px;
}

html.ui-compact .ui-compact-level-pager.is-next {
    right: 2px;
}

html.ui-compact .ui-compact-level-pager::before {
    content: '';
    display: block;
    width: 10px;
    height: 18px;
    margin: 0 auto;
    background: no-repeat center / contain
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'><path fill='none' stroke='%23e8d5a0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M6 1.5 2 6l4 4.5'/></svg>");
}

html.ui-compact .ui-compact-level-pager.is-next::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'><path fill='none' stroke='%23e8d5a0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 1.5 6 6 2 10.5'/></svg>");
}

html.ui-compact .ui-compact-level-pager:active {
    opacity: 0.9;
}

html.ui-compact .learn-skill-modal:not(.clan-skill-learn-modal) .ui-compact-level-pager {
    top: calc(50% + 18px);
}

html.ui-compact .game-modal .modal-header h3,
html.ui-compact .game-modal .modal-title {
    font-size: 13px;
    letter-spacing: 0.03em;
}

html.ui-compact .inventory-control-hint {
    padding: 0 6px;
}

html.ui-compact .inventory-control-hint-text {
    font-size: 11px;
    animation: none;
}

/* Ping lives in the tool cluster so it never covers footer buttons */
html.ui-compact .game-header-tools #connection-status,
html.ui-compact #combat-header-tools #connection-status {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    margin: 0;
    z-index: 1;
    flex: 0 0 26px;
    font-size: 9px;
    background: rgba(0, 0, 0, 0.38);
}

html.ui-compact .game-header-tools #connection-status.is-ping,
html.ui-compact .game-header-tools #connection-status.is-ping-wait,
html.ui-compact #combat-header-tools #connection-status.is-ping,
html.ui-compact #combat-header-tools #connection-status.is-ping-wait {
    width: auto;
    min-width: 26px;
    max-width: 56px;
    padding: 0 5px;
    flex: 0 0 auto;
    border-radius: 999px;
    font-size: 9px;
}

/* Fallback if the indicator is still a page-level overlay */
html.ui-compact body > #connection-status {
    top: calc(4px + env(safe-area-inset-top, 0px));
    left: 6px;
    right: auto;
    bottom: auto;
    width: 22px;
    height: 22px;
    z-index: 2600;
}

html.ui-compact .character-status.is-compact-hud {
    position: relative;
    z-index: 1300;
    width: calc(100% - 12px);
    max-width: 100%;
    box-sizing: border-box;
    margin: 2px 6px 0;
    padding: 0 4px 2px;
    overflow-x: hidden;
}

html.ui-compact .character-status.is-compact-hud .character-info {
    gap: 2px;
}

html.ui-compact .character-identity {
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    margin: 0;
}

html.ui-compact .character-identity-main {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

html.ui-compact .character-name {
    font-size: 13px;
    line-height: 1.1;
    text-align: left;
}

html.ui-compact .character-class {
    font-size: 10px;
    text-align: left;
}

html.ui-compact .character-level-badge {
    font-size: 10px;
    padding: 0;
    border: 0;
    background: none;
    align-self: center;
    margin: 0;
}
html.ui-compact .character-level-badge .player-level-ico,
html.ui-compact .character-level-badge .rank-inline .player-level-ico {
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
}

html.ui-compact .character-level-badge .player-level-label {
    display: none;
}

html.ui-compact .status-bars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

html.ui-compact .character-status .progress-bar-container {
    height: 13px;
    margin: 0;
}

html.ui-compact .character-status .progress-bar-container::after {
    font-size: 9px;
}

html.ui-compact .hud-economy-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    gap: 6px;
    min-height: 26px;
    -webkit-overflow-scrolling: touch;
}

html.ui-compact .hud-economy-row .shield-icon,
html.ui-compact .hud-economy-row .aura-shield-icon {
    position: relative;
    width: 26px;
    height: 26px;
    min-width: 26px;
    flex: 0 0 26px;
    overflow: visible;
    opacity: 0.95;
}

html.ui-compact .hud-economy-row .shield-icon.inactive,
html.ui-compact .hud-economy-row .aura-shield-icon.inactive {
    opacity: 0.38;
}

html.ui-compact .hud-economy-row .shield-badge,
html.ui-compact .hud-economy-row .aura-badge {
    top: 50%;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 0;
    max-width: calc(100% + 4px);
    padding: 0 2px;
    font-size: 8px;
    line-height: 1.1;
    color: #fff8e4;
    background: rgba(8, 11, 18, 0.62);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
}

html.ui-compact .money-display,
html.ui-compact .twilight-display,
html.ui-compact .temperature-display,
html.ui-compact .intoxication-display {
    font-size: 11px;
    margin: 0;
}

html.ui-compact .temperature-display,
html.ui-compact .money-display,
html.ui-compact .intoxication-display,
html.ui-compact .hud-badge.premium-badge,
html.ui-compact .hud-badge.powerless-badge,
html.ui-compact .character-hud-effect-icon-wrap,
html.ui-compact .character-hud-effect-icon {
    -webkit-touch-callout: none;
    touch-action: manipulation;
    cursor: pointer;
}

html.ui-compact .hud-float-tooltip {
    max-width: min(340px, calc(100vw - 12px));
    max-height: min(70vh, 440px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
    font-size: 13px;
}

html.ui-compact .money-display .currency-ico,
html.ui-compact .twilight-display .currency-ico,
html.ui-compact .intoxication-display .currency-ico {
    width: 12px;
    height: 12px;
}

html.ui-compact .cashier-plus-btn {
    width: 16px;
    height: 16px;
    font-size: 12px;
    line-height: 14px;
}

html.ui-compact .intoxication-display.is-empty {
    display: none;
}

html.ui-compact .hud-badge {
    width: 18px;
    height: 18px;
}

html.ui-compact .hud-badge .ui-icon-svg {
    width: 16px;
    height: 16px;
}

html.ui-compact .hud-badge.powerless-badge {
    background: rgba(180, 196, 220, 0.14);
    border-color: rgba(180, 196, 220, 0.3);
    color: #d0dae8;
}

html.ui-compact .character-hud-effects {
    margin-top: 2px;
    gap: 4px;
    overflow: hidden;
    max-width: 100%;
}

html.ui-compact #hud-transform-buff {
    order: -1;
}

html.ui-compact .character-hud-effects-row:not(:empty):not([hidden]) {
    min-height: 22px;
    gap: 4px;
}

html.ui-compact .character-hud-effect-icon-wrap,
html.ui-compact .character-hud-effect-icon {
    width: 22px;
    height: 22px;
}

html.ui-compact .ui-compact-edge-btn {
    position: fixed;
    left: auto;
    right: 6px;
    z-index: 2450;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid rgba(190, 169, 121, 0.34);
    background:
        radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(145deg, rgba(23, 28, 38, 0.94) 0%, rgba(9, 12, 20, 0.96) 100%);
    color: #f1e0b0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 8px 18px -14px rgba(0, 0, 0, 0.8);
    display: grid;
    place-items: center;
}

html.ui-compact .ui-compact-edge-btn i {
    font-size: 15px;
}

html.ui-compact .ui-compact-edge-btn--layer {
    top: auto;
    bottom: calc(var(--scene-edge) + var(--compact-browser-inset) + 8px);
}

html.ui-compact .ui-compact-edge-btn--chat {
    top: auto;
    bottom: calc(var(--scene-edge) + var(--compact-browser-inset) + 56px);
}

html.ui-compact .ui-compact-chat-icon {
    width: 20px;
    height: 20px;
    display: block;
}

html.ui-compact .ui-compact-edge-btn--chat.is-chat-glow-location {
    --compact-chat-glow: #ffe082;
    --compact-chat-glow-soft: rgba(255, 224, 130, 0.42);
    --compact-chat-glow-strong: rgba(255, 224, 130, 0.72);
}

html.ui-compact .ui-compact-edge-btn--chat.is-chat-glow-global {
    --compact-chat-glow: #ff6e6e;
    --compact-chat-glow-soft: rgba(255, 110, 110, 0.42);
    --compact-chat-glow-strong: rgba(255, 110, 110, 0.72);
}

html.ui-compact .ui-compact-edge-btn--chat.is-chat-glow-combat {
    --compact-chat-glow: #b8ff6a;
    --compact-chat-glow-soft: rgba(184, 255, 106, 0.42);
    --compact-chat-glow-strong: rgba(184, 255, 106, 0.72);
}

html.ui-compact .ui-compact-edge-btn--chat.is-chat-glow-allies {
    --compact-chat-glow: #3defff;
    --compact-chat-glow-soft: rgba(61, 239, 255, 0.42);
    --compact-chat-glow-strong: rgba(61, 239, 255, 0.72);
}

html.ui-compact .ui-compact-edge-btn--chat.is-chat-glow-private {
    --compact-chat-glow: #e4b7f0;
    --compact-chat-glow-soft: rgba(228, 183, 240, 0.42);
    --compact-chat-glow-strong: rgba(228, 183, 240, 0.72);
}

html.ui-compact .ui-compact-edge-btn--chat.is-chat-glow-clan {
    --compact-chat-glow: #74b9ff;
    --compact-chat-glow-soft: rgba(116, 185, 255, 0.42);
    --compact-chat-glow-strong: rgba(116, 185, 255, 0.72);
}

html.ui-compact .ui-compact-edge-btn--chat.is-chat-glow {
    border-color: var(--compact-chat-glow);
    color: var(--compact-chat-glow);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 12px var(--compact-chat-glow-soft);
}

html.ui-compact .ui-compact-edge-btn--chat.is-chat-pulse {
    animation: compact-chat-pulse 1.05s ease-in-out 3;
}

@keyframes compact-chat-pulse {
    0%,
    100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.12),
            0 0 6px var(--compact-chat-glow-soft);
        filter: brightness(1);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            0 0 18px 2px var(--compact-chat-glow-strong);
        filter: brightness(1.16);
    }
}

html.ui-compact .ui-compact-chat-glow-settings {
    margin-top: 8px;
}

html.ui-compact .ui-compact-chat-glow-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

html.ui-compact .ui-compact-chat-glow-swatch {
    width: 10px;
    height: 10px;
    border-radius: 99px;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}

html.ui-compact .ui-compact-chat-glow-swatch.is-chat-glow-location { background: #ffe082; }
html.ui-compact .ui-compact-chat-glow-swatch.is-chat-glow-global { background: #ff6e6e; }
html.ui-compact .ui-compact-chat-glow-swatch.is-chat-glow-combat { background: #b8ff6a; }
html.ui-compact .ui-compact-chat-glow-swatch.is-chat-glow-allies { background: #3defff; }
html.ui-compact .ui-compact-chat-glow-swatch.is-chat-glow-private { background: #e4b7f0; }
html.ui-compact .ui-compact-chat-glow-swatch.is-chat-glow-clan { background: #74b9ff; }

@media (prefers-reduced-motion: reduce) {
    html.ui-compact .ui-compact-edge-btn--chat.is-chat-pulse {
        animation: none;
    }
}

html.ui-compact .ui-compact-edge-btn--goals {
    top: auto;
    bottom: calc(var(--scene-edge) + var(--compact-browser-inset) + 104px);
}

html.ui-compact .ui-compact-tracker-icon {
    width: 20px;
    height: 20px;
    display: block;
}

html.ui-compact .ui-compact-edge-btn--goals.is-tracker-attention-new,
html.ui-compact .ui-compact-edge-btn--goals.is-tracker-attention-done {
    overflow: visible;
}

html.ui-compact .ui-compact-edge-btn--goals.is-tracker-attention-new {
    border-color: #ff9a3c;
    color: #ffc48a;
    background:
        radial-gradient(circle at 50% 8%, rgba(255, 196, 120, 0.28) 0%, rgba(255, 196, 120, 0) 58%),
        linear-gradient(145deg, rgba(48, 28, 12, 0.96) 0%, rgba(18, 10, 6, 0.96) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 0 2px rgba(255, 154, 60, 0.7),
        0 0 18px rgba(255, 154, 60, 0.7);
}

html.ui-compact .ui-compact-edge-btn--goals.is-tracker-attention-done {
    border-color: #4adf7a;
    color: #9ef0b4;
    background:
        radial-gradient(circle at 50% 8%, rgba(120, 255, 160, 0.26) 0%, rgba(120, 255, 160, 0) 58%),
        linear-gradient(145deg, rgba(12, 36, 22, 0.96) 0%, rgba(6, 16, 10, 0.96) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 0 2px rgba(74, 223, 122, 0.7),
        0 0 18px rgba(70, 200, 110, 0.65);
}

html.ui-compact .ui-compact-edge-btn--goals.is-tracker-pulse-new {
    animation: compact-tracker-pulse-new 0.9s ease-in-out 4;
}

html.ui-compact .ui-compact-edge-btn--goals.is-tracker-pulse-done {
    animation: compact-tracker-pulse-done 0.9s ease-in-out 4;
}

@keyframes compact-tracker-pulse-new {
    0%,
    100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.12),
            0 0 6px rgba(232, 148, 72, 0.2);
        filter: brightness(1);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            0 0 18px 2px rgba(232, 148, 72, 0.72);
        filter: brightness(1.18);
    }
}

@keyframes compact-tracker-pulse-done {
    0%,
    100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.12),
            0 0 6px rgba(70, 200, 110, 0.18);
        filter: brightness(1);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            0 0 18px 2px rgba(70, 200, 110, 0.7);
        filter: brightness(1.18);
    }
}

@media (prefers-reduced-motion: reduce) {
    html.ui-compact .ui-compact-edge-btn--goals.is-tracker-pulse-new,
    html.ui-compact .ui-compact-edge-btn--goals.is-tracker-pulse-done {
        animation: none;
    }
}

html.ui-compact .ui-compact-edge-btn.is-open {
    border-color: rgba(242, 210, 132, 0.62);
    color: #fff3c7;
}

html.ui-compact.is-compact-sheet-open .ui-compact-edge-btn {
    display: none;
}

html.ui-compact.is-compact-sheet-open .ui-compact-edge-btn--goals.is-tracker-attention-new,
html.ui-compact.is-compact-sheet-open .ui-compact-edge-btn--goals.is-tracker-attention-done {
    display: grid;
}

html.ui-compact .game-sidebar,
html.ui-compact .right-panel,
html.ui-compact .right-panel.is-hidden {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: var(--drawer-top);
    bottom: calc(var(--bar-bottom) + var(--actionbar-safe));
    width: min(78vw, 340px);
    height: auto;
    max-height: none;
    z-index: 2400;
    overflow: hidden;
    pointer-events: none;
    transition: transform 0.22s ease;
    background: rgba(8, 11, 18, 0.94);
    border: 1px solid rgba(190, 169, 121, 0.32);
    padding: 8px 8px 10px;
}

html.ui-compact .game-sidebar {
    left: 0;
    right: auto;
    border-left: none;
    border-radius: 0 14px 14px 0;
    transform: translateX(calc(-100% - 16px));
}

html.ui-compact .right-panel,
html.ui-compact .right-panel.is-hidden {
    left: auto;
    right: 0;
    border-right: none;
    border-radius: 14px 0 0 14px;
    transform: translateX(calc(100% + 16px));
}

html.ui-compact .game-sidebar.is-compact-open,
html.ui-compact .right-panel.is-compact-open {
    transform: translateX(0);
    pointer-events: auto;
}

html.ui-compact body.combat-mode .ui-compact-edge-btn--layer,
html.ui-compact body.combat-mode .ui-compact-edge-btn--goals,
html.ui-compact body.combat-mode .game-sidebar,
html.ui-compact body.combat-mode .right-panel,
html.ui-compact body.combat-mode #quest-objective-tracker {
    display: none !important;
}

html.ui-compact .game-sidebar > .sidebar-panel.flex-grow {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

html.ui-compact .sidebar-panel .chat-header-row {
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 0;
}

html.ui-compact .ui-compact-chat-channel {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 34px;
    padding: 0 2px;
    border-radius: 8px;
    border: 1px solid rgba(190, 169, 121, 0.35);
    background: linear-gradient(180deg, rgba(255, 244, 214, 0.1) 0%, rgba(255, 244, 214, 0.02) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    touch-action: pan-y;
}

html.ui-compact .sidebar-panel .chat-tabs {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    justify-content: center;
    background: none;
    border: 0;
}

html.ui-compact .ui-compact-chat-pager {
    flex: 0 0 28px;
    width: 28px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0.7;
    cursor: pointer;
}

html.ui-compact .ui-compact-chat-pager:disabled,
html.ui-compact .ui-compact-chat-pager[aria-disabled="true"] {
    opacity: 0.22;
    pointer-events: none;
}

html.ui-compact .ui-compact-chat-pager::before {
    content: '';
    display: block;
    width: 8px;
    height: 14px;
    margin: 0 auto;
    background: no-repeat center / contain
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'><path fill='none' stroke='%23e8d5a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M6 1.5 2 6l4 4.5'/></svg>");
}

html.ui-compact .ui-compact-chat-pager.is-next::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'><path fill='none' stroke='%23e8d5a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2 1.5 6 6 2 10.5'/></svg>");
}

html.ui-compact .ui-compact-chat-pager:active {
    opacity: 1;
}

html.ui-compact .sidebar-panel .chat-tab {
    display: none;
    flex: 1 1 auto;
    min-height: 32px;
    padding: 6px 8px;
    font-size: 13px;
    text-align: center;
}

html.ui-compact .sidebar-panel .chat-tab.active {
    display: block;
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
}

html.ui-compact .game-sidebar .chat-input--enhanced {
    gap: 4px;
    padding: 4px 0 0;
}

html.ui-compact .game-sidebar #chat-emoji-btn,
html.ui-compact .game-sidebar #chat-sticker-btn {
    display: none !important;
}

html.ui-compact .ui-compact-chat-attach {
    position: relative;
    flex: 0 0 auto;
}

html.ui-compact .ui-compact-chat-attach-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 4px);
    min-width: 132px;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid rgba(190, 169, 121, 0.34);
    background: rgba(8, 11, 18, 0.96);
    z-index: 5;
}

html.ui-compact .ui-compact-chat-attach-menu[hidden] {
    display: none;
}

html.ui-compact .ui-compact-chat-attach-menu button {
    display: block;
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 244, 216, 0.92);
    text-align: left;
    font-size: 13px;
}

html.ui-compact .sidebar-panel .chat-gear {
    min-height: 32px;
    min-width: 32px;
}

html.ui-compact .game-sidebar .chat-container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

html.ui-compact .game-sidebar .chat-messages,
html.ui-compact #chat-messages.chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

html.ui-compact .game-sidebar .chat-input,
html.ui-compact .game-sidebar .chat-picker {
    flex: 0 0 auto;
}

html.ui-compact .game-sidebar .chat-input--enhanced input {
    font-size: 16px;
    min-height: 40px;
}

html.ui-compact .game-sidebar .chat-tool-btn,
html.ui-compact .game-sidebar .chat-send-btn {
    min-width: 36px;
    min-height: 40px;
}

html.ui-compact #chat-messages .chat-message {
    max-width: min(88%, 280px);
    font-size: 14px;
}

html.ui-compact .right-panel.has-compact-head::before {
    content: none;
    display: none;
}

html.ui-compact .right-panel #entities-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

html.ui-compact .right-panel .entity-item {
    padding: 8px;
    margin-bottom: 6px;
    font-size: 13px;
}

html.ui-compact #quest-objective-tracker,
html.ui-compact .quest-objective-tracker {
    position: fixed !important;
    top: var(--drawer-top);
    left: 0;
    right: auto;
    width: min(86vw, 360px) !important;
    max-width: min(86vw, 360px) !important;
    max-height: min(42dvh, 340px);
    z-index: 2400;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
    border-radius: 0 0 14px 0;
    border: 1px solid rgba(190, 169, 121, 0.32);
    border-top: none;
    background: rgba(8, 11, 18, 0.94);
}

html.ui-compact #quest-objective-tracker.is-compact-open {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
}

html.ui-compact .quest-objective-tracker__body {
    max-height: min(38dvh, 300px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

html.ui-compact .quest-objective-tracker__head {
    align-items: center;
}

html.ui-compact .quest-objective-tracker__title {
    flex: 1 1 auto;
    font-size: 12px;
}

html.ui-compact .quest-tracker-btn {
    min-width: 32px;
    min-height: 32px;
}

html.ui-compact .quest-tracker-actions--global [data-tracker-hide-all] {
    display: none !important;
}

html.ui-compact .entity-context-menu {
    min-width: 168px;
    padding: 6px 0;
    border-radius: 12px;
    border: 1px solid rgba(190, 169, 121, 0.34);
    background: rgba(12, 16, 24, 0.96);
    box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.88);
}

html.ui-compact .npc-analyze-modal,
html.ui-compact-combat .npc-analyze-modal {
    align-items: flex-end;
    padding: 0;
}

html.ui-compact .npc-analyze-modal .npc-analyze-card,
html.ui-compact .analyze-card,
html.ui-compact-combat .npc-analyze-modal .npc-analyze-card,
html.ui-compact-combat .analyze-card {
    width: 100%;
    max-width: 100%;
    max-height: min(78vh, 640px);
    border-radius: 18px 18px 0 0;
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
}

html.ui-compact .analyze-grid,
html.ui-compact-combat .analyze-grid {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 10px;
}

html.ui-compact .analyze-icon,
html.ui-compact-combat .analyze-icon {
    width: 48px;
    height: 48px;
}

html.ui-compact .analyze-card--portrait,
html.ui-compact-combat .analyze-card--portrait {
    max-height: min(84vh, 720px);
}

html.ui-compact .analyze-layout--portrait,
html.ui-compact-combat .analyze-layout--portrait {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-height: 0;
    grid-template-columns: none;
}

html.ui-compact .analyze-portrait,
html.ui-compact-combat .analyze-portrait {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 0 auto;
}

html.ui-compact .analyze-portrait img,
html.ui-compact-combat .analyze-portrait img {
    display: block;
    width: auto;
    max-width: min(72vw, 240px);
    max-height: min(42vh, 280px);
    margin: 0 auto;
    object-fit: contain;
    object-position: center bottom;
}

html.ui-compact .analyze-identity,
html.ui-compact-combat .analyze-identity {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

html.ui-compact .analyze-avatar,
html.ui-compact-combat .analyze-avatar {
    width: min(42vw, 168px);
    height: min(42vw, 168px);
    flex: 0 0 auto;
}

html.ui-compact .analyze-card .analyze-vital-bar,
html.ui-compact-combat .analyze-card .analyze-vital-bar {
    height: 18px;
}

html.ui-compact .analyze-card .analyze-vital-bar::after,
html.ui-compact-combat .analyze-card .analyze-vital-bar::after {
    font-size: 11px;
}

html.ui-compact .analyze-icon__lvl,
html.ui-compact-combat .analyze-icon__lvl {
    font-size: 9px;
    padding: 2px 4px;
}

html.ui-compact .analyze-icon__cd,
html.ui-compact-combat .analyze-icon__cd {
    font-size: 18px;
}

html.ui-compact .analyze-drop,
html.ui-compact-combat .analyze-drop {
    min-height: 48px;
    padding: 6px 8px;
}

html.ui-compact .item-tooltip.analyze-float-tooltip,
html.ui-compact-combat .item-tooltip.analyze-float-tooltip,
html.ui-compact .skill-tooltip.analyze-float-tooltip,
html.ui-compact-combat .skill-tooltip.analyze-float-tooltip {
    max-width: min(360px, calc(100vw - 16px));
    font-size: 14px;
}

html.ui-compact .entity-menu-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 15px;
    color: rgba(255, 244, 216, 0.92);
}

html.ui-compact .game-content {
    aspect-ratio: auto;
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    max-height: 100%;
    margin: 0;
    grid-column: auto;
    align-self: stretch;
}

html.ui-compact #game-content .game-background,
html.ui-compact #game-content .game-background-twilight {
    inset: 0 0 var(--scene-inset) 0;
    width: auto;
    height: auto;
    background-color: transparent;
    background-size: auto 72%;
    background-position: center bottom;
    background-repeat: no-repeat;
}

html.ui-compact .ui-compact-scene-fill {
    display: none !important;
}

/* Sky must stop above the dock too — otherwise location art paints
   through the transparent action bar (same chrome as header/footer). */
html.ui-compact #game-content .game-sky,
html.ui-compact #game-content .game-sky .game-sky-video {
    inset: 0 0 var(--scene-inset) 0;
    width: auto;
    height: auto;
    background-position: center top;
}

html.ui-compact .central-panel-layout {
    top: 6px;
    bottom: auto;
    left: 50%;
    right: auto;
    width: min(420px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    transform: translateX(-50%);
    z-index: 50;
}

html.ui-compact .central-panel-layout > .central-panel,
html.ui-compact .central-panel {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    max-height: min(34dvh, 280px);
    --cp-font: 12px;
    --cp-font-name: 12px;
    --cp-font-title: 11px;
    --cp-font-meta: 11px;
    --cp-pad-x: 6px;
    --cp-pad-y: 5px;
}

html.ui-compact:has(#quest-objective-tracker.is-compact-open) .central-panel-layout {
    visibility: hidden;
    pointer-events: none;
}

html.ui-compact .district-street-buttons .district-street-button,
html.ui-compact .location-info #mini-location-buttons .location-action-button,
html.ui-compact #location-nav-panel #mini-location-buttons .location-action-button {
    font-size: 11px;
    padding: 4px 7px;
}

html.ui-compact .central-panel .combats-placeholder,
html.ui-compact .central-panel .location-info {
    font-size: 11px;
}

html.ui-compact:has(.game-container) .game-content,
html.ui-compact:has(.game-container) .game-content-inner {
    overflow: hidden;
    clip-path: inset(0);
}

html.ui-compact:has(.game-container) .player-portrait-hud {
    right: 0;
    bottom: var(--scene-inset);
    height: clamp(160px, 37%, 348px);
}

html.ui-compact:has(.game-container) .npc-portrait-hud {
    left: 0;
    bottom: var(--scene-inset);
    height: clamp(160px, 37%, 348px);
}

@supports (width: 1cqw) {
    html.ui-compact:has(.game-container) .player-portrait-hud {
        right: 0;
        bottom: var(--scene-inset);
        height: clamp(220px, 50cqh, 636px);
    }

    html.ui-compact:has(.game-container) .npc-portrait-hud {
        left: 0;
        bottom: var(--scene-inset);
        height: clamp(220px, 50cqh, 636px);
    }
}

html.ui-compact .central-panel .npc-card-actions .btn-analyze,
html.ui-compact .central-panel .npc-card-actions .btn-talk,
html.ui-compact .central-panel .npc-card-actions .btn-attack,
html.ui-compact .npc-card-actions .btn-analyze,
html.ui-compact .npc-card-actions .btn-talk,
html.ui-compact .npc-card-actions .btn-attack {
    min-width: 32px;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 50%;
    font-size: 13px;
}

html.ui-compact .dialogue-option,
html.ui-compact .dialogue-close {
    min-height: 44px;
}

html.ui-compact .dialogue-window {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    transform: none;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 2500;
}

html.ui-compact .dialogue-content {
    max-height: min(36dvh, calc(100dvh - var(--scene-edge) - 72px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    font-size: 16px;
}

html.ui-compact .quest-dialogue-layer {
    display: block;
    padding: 0;
    box-sizing: border-box;
}

html.ui-compact .quest-speech,
html.ui-compact .quest-speech--npc,
html.ui-compact .quest-speech--player {
    position: absolute;
    top: 8px;
    left: auto;
    right: auto;
    max-width: none;
    width: calc(50% - 10px);
    max-height: calc(100% - var(--scene-edge) - 16px);
    margin-top: 0;
    box-sizing: border-box;
}

html.ui-compact .quest-speech--npc {
    left: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

html.ui-compact .quest-speech-text {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    font-size: 15px;
    line-height: 1.35;
}

html.ui-compact .quest-speech--player {
    right: 8px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    text-align: left;
}

html.ui-compact .quest-choices {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
}

html.ui-compact .quest-choice {
    flex: 0 1 auto;
    width: 100%;
    min-height: 2.6em;
    max-height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

html.ui-compact .quest-choice-text {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

html.ui-compact .quest-decision-timer {
    flex: 0 0 auto;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

html.ui-compact .dialogue-option {
    font-size: 16px;
    padding: 12px 14px;
}

html.ui-compact .game-footer {
    min-height: var(--footer-safe);
    position: relative;
    z-index: 2500;
    flex: 0 0 auto;
    justify-content: center;
    width: min(100%, var(--chrome-max));
    margin-inline: auto;
}

html.ui-compact .game-footer .menu-buttons,
html.ui-compact .combat-footer-menu .menu-buttons {
    position: relative;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: center;
    gap: 6px;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    z-index: 1200;
}

html.ui-compact .game-footer .menu-buttons {
    gap: clamp(6px, 2vw, 10px);
    overflow-x: hidden;
}

html.ui-compact .game-footer .shield-icons-container {
    display: none;
}

html.ui-compact .game-footer .footer-button,
html.ui-compact .combat-footer-menu .footer-button {
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 6px;
    gap: 0;
    border-radius: 12px;
    flex: 0 0 46px;
}

html.ui-compact .game-footer .footer-button {
    flex: 1 1 0;
    width: auto;
    min-width: 42px;
    max-width: 52px;
    height: auto;
    aspect-ratio: 1;
    flex-basis: 0;
    border-radius: 13px;
}

html.ui-compact .game-footer .footer-button .button-text,
html.ui-compact .combat-footer-menu .footer-button .button-text {
    display: none;
}

html.ui-compact .game-footer .footer-button .button-icon,
html.ui-compact .combat-footer-menu .footer-button .button-icon {
    width: 22px;
    height: 22px;
}

html.ui-compact .game-footer .footer-button .button-icon {
    width: 24px;
    height: 24px;
}

/* Two-row reel. Cell size comes from --bar-slot (6-up, max 64px).
   The bar itself is full-bleed so wide screens show extra columns. */
html.ui-compact .action-bar-container,
html.ui-compact #combat-action-bar {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none;
    bottom: var(--bar-bottom, var(--footer-safe));
    display: grid;
    grid-template-rows: var(--bar-slot) var(--bar-slot);
    grid-auto-flow: column;
    grid-auto-columns: var(--bar-slot) !important;
    align-items: center;
    justify-content: start;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--bar-gap);
    padding: 8px var(--bar-pad);
    box-sizing: border-box;
    pointer-events: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--bar-pad);
    -webkit-overflow-scrolling: touch;
    background: transparent;
}

html.ui-compact .action-bar-row {
    display: contents !important;
}

html.ui-compact .action-bar-slot {
    width: var(--bar-slot) !important;
    height: var(--bar-slot) !important;
    min-width: var(--bar-slot) !important;
    max-width: var(--bar-slot) !important;
    min-height: var(--bar-slot) !important;
    max-height: var(--bar-slot) !important;
    aspect-ratio: 1;
    flex: none;
    border-radius: var(--ui-slot-radius, 3px);
    scroll-snap-align: start;
    touch-action: manipulation;
}

/* Soft edge fades + faint chevrons. Fixed to the viewport so they stay
   on the dock (do not become grid cells and do not scroll with slots). */
html.ui-compact .action-bar-container::before,
html.ui-compact .action-bar-container::after,
html.ui-compact #combat-action-bar::before,
html.ui-compact #combat-action-bar::after {
    content: none;
    position: fixed;
    left: auto;
    right: auto;
    top: auto;
    bottom: var(--bar-bottom, var(--footer-safe));
    height: var(--actionbar-safe);
    width: var(--bar-fade);
    z-index: 2002;
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms ease;
}

html.ui-compact .action-bar-container.can-scroll-left::before,
html.ui-compact #combat-action-bar.can-scroll-left::before {
    content: '';
    left: 0;
    opacity: 1;
    background:
        linear-gradient(90deg, rgba(8, 11, 18, 0.82) 0%, rgba(8, 11, 18, 0) 100%),
        no-repeat 6px center / 7px 12px
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'><path fill='none' stroke='%23e8d5a0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' d='M6 1.5 2 6l4 4.5'/></svg>");
}

html.ui-compact .action-bar-container.can-scroll-right::after,
html.ui-compact #combat-action-bar.can-scroll-right::after {
    content: '';
    right: 0;
    opacity: 1;
    background:
        linear-gradient(270deg, rgba(8, 11, 18, 0.82) 0%, rgba(8, 11, 18, 0) 100%),
        no-repeat calc(100% - 6px) center / 7px 12px
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'><path fill='none' stroke='%23e8d5a0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' d='M2 1.5 6 6 2 10.5'/></svg>");
}

/* Compact already uses long-press + a high delete zone; the lock slot only
   eats reel space and does not stop those gestures. Keep the bar locked. */
html.ui-compact .action-bar-lock-button {
    display: none !important;
}

html.ui-compact.is-compact-bar-hold .action-bar-container,
html.ui-compact.is-compact-bar-hold #combat-action-bar {
    touch-action: none;
}

html.ui-compact .action-bar-slot:hover .action-bar-tooltip {
    opacity: 0;
}

html.ui-compact .action-bar-hotkey {
    display: none;
}

html.ui-compact .action-bar-item-tooltip {
    pointer-events: none;
    z-index: 5600;
    max-width: min(300px, calc(100vw - 16px));
}

html.ui-compact .action-bar-item-tooltip.is-positioned {
    position: fixed !important;
    bottom: auto;
    right: auto;
    transform: none;
    z-index: 14000;
}

/* Toasts live in the skill-clear band (under header), not on top of bag/create. */
html.ui-compact .action-bar-notifications,
html.ui-compact .action-bar-notifications.is-compact-dock {
    top: calc(var(--header-safe, 36px) + 8px);
    bottom: auto;
    left: 8px;
    width: auto;
    right: 8px;
    justify-content: flex-start;
    --action-bar-toast-gap: 0;
    z-index: 16000;
    pointer-events: none;
}

html.ui-compact .action-bar-notification.is-sticky,
html.ui-compact .action-bar-notification.is-asset-reload {
    pointer-events: auto;
    min-height: 44px;
}

html.ui-compact .action-bar-notification {
    max-width: none;
    width: 100%;
    margin-bottom: 6px;
    font-size: 13px;
}

html.ui-compact #cast-bar-container:not(.castbar-visible) {
    display: none !important;
}

html.ui-compact #cast-bar-container,
html.ui-compact .game-container #cast-bar-container,
html.ui-compact body.combat-mode #cast-bar-container {
    left: 8px;
    right: 8px;
    width: auto;
    min-width: 0;
    max-width: none;
    transform: none;
    bottom: calc(var(--bar-bottom, var(--footer-safe)) + var(--actionbar-safe) + 8px);
    max-height: min(42vh, 320px);
    padding: 8px;
    overflow: visible;
    min-height: 0;
}

html.ui-compact-combat #cast-bar-container,
html.ui-compact-combat body.combat-mode #cast-bar-container {
    max-height: min(38vh, 280px);
}

html.ui-compact #cast-bar-container .cast-bar-close {
    top: 6px;
    right: 6px;
    width: 36px;
    height: 36px;
    font-size: 22px;
}

html.ui-compact #cast-bar-container .cast-bar-header {
    flex: 0 0 auto;
    padding-right: 40px;
}

html.ui-compact #cast-bar-container .cast-bar-title-rotator {
    max-width: 100%;
}

html.ui-compact #cast-bar-container .cast-bar-title {
    font-size: 11px;
}

html.ui-compact #cast-bar-table {
    display: block;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 12px;
}

html.ui-compact body.combat-mode #cast-bar-container > *,
html.ui-compact #cast-bar-container > * {
    z-index: auto;
}

html.ui-compact #cast-bar-container .cast-bar-footer {
    position: relative;
    z-index: 1;
}

html.ui-compact #cast-bar-container:has(.cast-bar-target-picker.is-open) #cast-bar-table {
    overflow: visible;
    position: relative;
    z-index: 20;
}

html.ui-compact #cast-bar-table thead,
html.ui-compact #cast-bar-table tbody {
    display: table;
    width: 100%;
    table-layout: fixed;
}

html.ui-compact #cast-bar-table tr {
    display: table-row;
}

html.ui-compact #cast-bar-table th,
html.ui-compact #cast-bar-table td {
    padding: 4px 5px;
    font-size: 12px;
}

html.ui-compact #cast-bar-table th:nth-child(1),
html.ui-compact #cast-bar-table td:nth-child(1) {
    width: 30%;
}

html.ui-compact #cast-bar-table th:nth-child(2),
html.ui-compact #cast-bar-table td:nth-child(2),
html.ui-compact #cast-bar-container .cast-bar-target-cell {
    width: 40%;
    min-width: 6.5em;
    overflow: visible;
}

html.ui-compact #cast-bar-table th:nth-child(3),
html.ui-compact #cast-bar-table th:nth-child(4),
html.ui-compact #cast-bar-table th:nth-child(5),
html.ui-compact #cast-bar-table td:nth-child(3),
html.ui-compact #cast-bar-table td:nth-child(4),
html.ui-compact #cast-bar-table td:nth-child(5),
html.ui-compact #cast-bar-table .cast-bar-ap-col {
    width: 8%;
    min-width: 0;
    padding-left: 3px;
    padding-right: 3px;
    font-size: 11px;
}

html.ui-compact #cast-bar-table th:nth-child(6),
html.ui-compact #cast-bar-table td:nth-child(6) {
    width: 6%;
    padding-left: 2px;
    padding-right: 2px;
}

html.ui-compact #cast-bar-container .cast-bar-target-picker__btn {
    min-height: 36px;
    padding-right: 4px;
}

html.ui-compact #cast-bar-container .cast-bar-footer {
    flex: 0 0 auto;
    gap: 8px;
}

html.ui-compact #cast-bar-container .cast-bar-wait-actions {
    justify-content: flex-start;
}

html.ui-compact #cast-bar-container .cast-bar-wait-btn {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 12px;
}

html.ui-compact #cast-bar-error {
    min-height: 0;
    font-size: 12px;
}

html.ui-compact #cast-bar-error:empty {
    display: none;
}

html.ui-compact #cast-bar-container .cast-bar-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "cancel clear repeat"
        "accept accept accept";
    gap: 6px;
    justify-content: stretch;
}

html.ui-compact #cast-bar-accept {
    grid-area: accept;
}

html.ui-compact #cast-bar-cancel-last {
    grid-area: cancel;
}

html.ui-compact #cast-bar-repeat {
    grid-area: repeat;
}

html.ui-compact #cast-bar-clear {
    grid-area: clear;
}

html.ui-compact #cast-bar-container .cast-bar-buttons .cast-bar-btn {
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 8px 10px;
    font-size: 13px;
}

html.ui-compact .cast-bar-target-menu,
html.ui-compact body > .cast-bar-target-menu {
    position: fixed !important;
    left: 8px;
    right: auto;
    top: auto;
    bottom: auto;
    min-width: min(72vw, 240px);
    max-width: min(94vw, 340px);
    width: max-content;
    max-height: min(62vh, 440px);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 5000;
    transform: none !important;
}

html.ui-compact .cast-bar-target-menu__option {
    min-height: 40px;
    font-size: 14px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

html.ui-compact .cast-bar-target-backdrop,
html.ui-compact .cast-bar-target-backdrop[hidden] {
    display: none !important;
}

html.ui-compact #cast-bar-container:has(.cast-bar-target-picker.is-open) .cast-bar-target-backdrop:not([hidden]) {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 7;
    padding: 0;
    border: 0;
    background: rgba(4, 6, 10, 0.46);
}

html.ui-compact .game-modal,
html.ui-compact .game-modal.active,
html.ui-compact #inventory-modal.game-modal,
html.ui-compact #inventory-modal.game-modal.active {
    padding: 0 !important;
    align-items: stretch !important;
    inset: 0 0 var(--compact-dock, 164px) 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--compact-dock, 164px) !important;
    height: auto !important;
    width: 100% !important;
}

html.ui-compact .game-modal .modal-content,
html.ui-compact .game-modal .modal-content.default-modal,
html.ui-compact .game-modal .abilities-modal-content,
html.ui-compact .game-modal#inventory-modal .modal-content,
html.ui-compact .game-modal#inventory-modal #inventory-modal-content,
html.ui-compact .game-modal#character-modal .modal-content,
html.ui-compact .game-modal#map-modal .modal-content,
html.ui-compact .game-modal#ratings-modal .modal-content,
html.ui-compact .game-modal#quests-modal .modal-content,
html.ui-compact .game-modal#clan-modal .modal-content,
html.ui-compact .game-modal#abilities-modal .modal-content,
html.ui-compact .game-modal#abilities-modal .abilities-modal-content,
html.ui-compact .game-modal#salon-modal .modal-content,
html.ui-compact .game-modal#home-storage-modal .modal-content,
html.ui-compact .game-modal#cashier-modal .modal-content,
html.ui-compact .game-modal#codex-modal .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    animation: none !important;
    border-radius: 0;
    margin: 0 !important;
    overflow: hidden;
}

html.ui-compact .game-modal .abilities-bg-particles {
    display: none !important;
}

html.ui-compact .game-modal .modal-content,
html.ui-compact .game-modal .abilities-modal-content {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0;
}

html.ui-compact .game-modal .modal-header,
html.ui-compact .abilities-modal-header {
    flex: 0 0 auto;
}

html.ui-compact .game-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

html.ui-compact .game-modal .modal-header h3,
html.ui-compact .game-modal .modal-title {
    overflow-wrap: anywhere;
}

html.ui-compact #inventory-modal-content .modal-body,
html.ui-compact #abilities-modal .modal-body {
    overflow: hidden !important;
}

html.ui-compact #character-modal .modal-body {
    padding: 8px 10px 12px;
}

html.ui-compact #character-modal .character-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

html.ui-compact #character-modal .character-section--alloc {
    position: static;
    top: auto;
    z-index: auto;
    backdrop-filter: none;
    background: none;
}

html.ui-compact #character-modal .stat-points-panel {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

html.ui-compact #character-modal .stat-actions {
    width: 100%;
    justify-content: stretch;
    gap: 8px;
}

html.ui-compact #character-modal .stat-actions .stat-reset-button,
html.ui-compact #character-modal #reset-stat-points-btn,
html.ui-compact #character-modal #apply-stat-points-btn {
    flex: 1 1 0;
    min-height: 40px;
}

html.ui-compact #character-modal .base-stats-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
}

html.ui-compact #character-modal .character-stats-grid.two-columns {
    grid-template-columns: 1fr !important;
    gap: 2px;
}

html.ui-compact #character-modal .stat-item.base-stat-extended .stat-name {
    white-space: normal;
}

html.ui-compact #character-modal .stat-control {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    font-size: 20px;
}

html.ui-compact #character-modal .character-bonus-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
}

html.ui-compact #character-modal .stat-breakdown {
    font-size: 0.72rem;
}

html.ui-compact #character-modal .character-stats-grid .stat-item {
    align-items: flex-start;
}

html.ui-compact #character-modal .character-stats-grid .stat-value {
    flex-wrap: wrap;
    justify-content: flex-start;
}

html.ui-compact #abilities-modal .modal-body {
    padding: 8px 10px 10px !important;
}

html.ui-compact #abilities-modal .abilities-tabs-container {
    min-height: 72px;
}

html.ui-compact #abilities-modal .abilities-tabs,
html.ui-compact #abilities-modal .abilities-tabs.abilities-tabs--swap-center {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start;
    min-height: 72px;
}

html.ui-compact #abilities-modal .branch-info-content {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 4px;
}

html.ui-compact #abilities-modal .branch-info-item {
    flex: 0 1 auto;
}

html.ui-compact #abilities-modal .abilities-skill-tree {
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

html.ui-compact #abilities-modal .abilities-skill-tree-grid {
    grid-template-columns: repeat(var(--tree-cols, 6), minmax(52px, 1fr));
    min-width: min(100%, calc(var(--tree-cols, 6) * 52px));
}

html.ui-compact #quests-modal .quests-panel-grid,
html.ui-compact #map-modal .city-map-layout {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0;
}

html.ui-compact #quests-modal .quests-panel-right {
    display: none !important;
}

html.ui-compact #quests-modal .quests-panel-grid {
    align-items: stretch;
    width: 100%;
}

html.ui-compact #quests-modal .quests-panel,
html.ui-compact #quests-modal .quests-panel-left,
html.ui-compact #quests-modal .quests-panel-section,
html.ui-compact #quests-modal .quests-panel-section-body,
html.ui-compact #quests-modal .quest-list-item {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

html.ui-compact #quests-modal .quest-list-item {
    padding: 10px;
}

html.ui-compact #quests-modal .quest-item-title {
    white-space: normal;
}

html.ui-compact #quests-modal .quest-list-item-detail {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(190, 169, 121, 0.18);
}

html.ui-compact #quests-modal .quest-detail--inline .quest-detail-desc {
    margin-top: 0;
}

html.ui-compact #quests-modal .quest-detail-actions {
    flex-direction: column;
    align-items: stretch;
}

html.ui-compact #quests-modal .quest-btn {
    min-height: 40px;
    width: 100%;
}

html.ui-compact #quests-modal .quest-btn--helper-replay,
html.ui-compact #quests-modal .quest-btn--note-help {
    width: auto;
    min-width: 40px;
    flex: 0 0 auto;
}

html.ui-compact #map-modal .modal-body {
    display: flex;
    flex-direction: column;
    padding: 8px 10px 10px;
    overflow: hidden !important;
    min-height: 0;
}

html.ui-compact #map-modal .city-map-layout {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    gap: 8px;
    align-items: stretch;
}

html.ui-compact #map-modal .city-map-left,
html.ui-compact #map-modal .city-map-right,
html.ui-compact #map-modal .city-map-street-panel {
    display: contents;
}

html.ui-compact #map-modal .city-map-district-header,
html.ui-compact #map-modal .city-map-street-title {
    display: none;
}

html.ui-compact #map-modal .city-map-image {
    order: 1;
    min-height: 120px;
    max-height: 22vh;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 10, 16, 0.72);
}

html.ui-compact #map-modal .city-map-image img {
    min-height: 120px;
    max-height: 22vh;
}

html.ui-compact #map-modal .city-map-image-fallback {
    color: rgba(255, 248, 236, 0.62);
    font-size: 13px;
}

html.ui-compact #map-modal .city-map-street-desc {
    order: 2;
    min-height: 0;
    margin: 0;
    padding: 0 2px;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 248, 236, 0.78);
}

html.ui-compact #map-modal .city-map-districts {
    order: 3;
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    min-height: 0;
    max-height: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-right: 0;
}

html.ui-compact #map-modal .city-map-district-item {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(8, 10, 16, 0.72);
}

html.ui-compact #map-modal .city-map-district-btn,
html.ui-compact #map-modal .city-map-street-btn {
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.22);
    background: rgba(0, 0, 0, 0.28);
    color: #fff5bf;
}

html.ui-compact #map-modal .city-map-district-item .city-map-district-btn {
    border: 0;
    border-radius: 10px;
}

html.ui-compact #map-modal .city-map-district-btn.is-open {
    background: rgba(255, 215, 0, 0.16);
    border-color: rgba(255, 215, 0, 0.4);
    color: #fff5bf;
}

html.ui-compact #map-modal .city-map-street-btn.is-active {
    background: rgba(255, 215, 0, 0.24);
    border-color: rgba(255, 215, 0, 0.5);
    color: #fff5bf;
}

html.ui-compact #map-modal .city-map-district-streets {
    padding: 0 8px 8px;
    gap: 6px;
}

html.ui-compact #map-modal .city-map-image,
html.ui-compact #map-modal .city-map-street-desc,
html.ui-compact #map-modal .city-map-travel-actions,
html.ui-compact #map-modal .city-map-travel-hint {
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
}

html.ui-compact #map-modal .city-map-travel-actions {
    order: 4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0;
    padding-top: 4px;
}

html.ui-compact #map-modal .city-map-travel-actions .game-button {
    min-height: 40px;
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.22);
    background: rgba(0, 0, 0, 0.28);
    color: #fff5bf;
}

html.ui-compact #map-modal .city-map-travel-hint {
    order: 5;
    min-height: 0;
    font-size: 12px;
    color: rgba(255, 248, 236, 0.58);
}

html.ui-compact #salon-modal .modal-body {
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 8px 10px 12px;
}

html.ui-compact #salon-modal .salon-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

html.ui-compact #salon-modal .salon-layout > div:first-child {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

html.ui-compact #salon-modal .salon-preview {
    width: min(46vw, 180px);
    height: min(42vh, 280px);
    max-width: 100%;
    max-height: min(42vh, 280px);
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    overflow: hidden;
}

html.ui-compact #salon-modal .salon-preview img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center bottom;
}

html.ui-compact #salon-modal .salon-actions {
    width: 100%;
    max-width: 280px;
}

html.ui-compact #salon-modal .salon-catalog {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

html.ui-compact body[data-location-type="beauty"] #game-content .game-background {
    background-size: contain;
    background-position: center center;
}

html.ui-compact #clan-modal .clan-tabs,
html.ui-compact #ratings-modal .events-section-tabs,
html.ui-compact #codex-modal .codex-shell__tabs,
html.ui-compact .landing-codex-inline .codex-shell__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
}

/* Codex compact: same parchment + gold tiles as abilities, no tree logic. */
html.ui-compact #codex-modal .codex-modal-body,
html.ui-compact #codex-modal .codex-shell,
html.ui-compact #codex-modal .codex-shell__panel,
html.ui-compact .landing-codex-inline .codex-shell,
html.ui-compact .landing-codex-inline .codex-shell__panel,
html.ui-compact .codex-atlas {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

html.ui-compact #codex-modal .codex-modal-body {
    padding: 8px 8px 10px !important;
    overflow: hidden !important;
}

html.ui-compact #codex-modal .codex-shell,
html.ui-compact #codex-modal .codex-shell__panel,
html.ui-compact .landing-codex-inline .codex-shell,
html.ui-compact .landing-codex-inline .codex-shell__panel,
html.ui-compact .codex-atlas {
    flex: 1 1 auto;
}

html.ui-compact #codex-modal .codex-shell__panel,
html.ui-compact .landing-codex-inline .codex-shell__panel {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

html.ui-compact #codex-modal .codex-shell__tabs,
html.ui-compact .landing-codex-inline .codex-shell__tabs,
html.ui-compact .codex-atlas__nav {
    flex: 0 0 auto;
}

html.ui-compact .codex-atlas__nav {
    margin-bottom: 8px;
    gap: 8px;
}

html.ui-compact .codex-atlas__back {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 13px;
}

html.ui-compact .codex-atlas__crumb {
    font-size: 12px;
}

html.ui-compact .codex-atlas__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

html.ui-compact .codex-screen-switch {
    display: none !important;
}

html.ui-compact .codex-section {
    padding: 10px 12px;
}

html.ui-compact .codex-section__title {
    font-size: 15px;
}

html.ui-compact .codex-section__body {
    font-size: 13px;
    line-height: 1.45;
}

html.ui-compact .codex-media--image .codex-media__frame,
html.ui-compact .codex-media--video .codex-media__frame,
html.ui-compact .codex-slider__slide .codex-media__frame,
html.ui-compact .codex-shell--screen-mobile .codex-media--image .codex-media__frame,
html.ui-compact .codex-shell--screen-mobile .codex-media--video .codex-media__frame,
html.ui-compact .codex-shell--screen-mobile .codex-slider__slide .codex-media__frame {
    aspect-ratio: 9 / 16;
    max-width: min(260px, 100%);
    margin-inline: auto;
}

html.ui-compact .codex-slider__nav {
    width: 36px;
    height: 44px;
    font-size: 22px;
}

html.ui-compact .codex-atlas__body:has(.codex-class-atlas) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

html.ui-compact .codex-class-atlas,
html.ui-compact .codex-branch-skills {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

html.ui-compact .codex-branch-skills {
    border-radius: 0;
    padding: 6px 6px 10px;
    overflow: hidden;
    background-color: transparent;
    background-image:
        radial-gradient(ellipse at 50% 40%, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.42) 78%, rgba(0, 0, 0, 0.62) 100%),
        linear-gradient(180deg, rgba(8, 10, 16, 0.28) 0%, rgba(8, 10, 16, 0.48) 100%),
        linear-gradient(145deg, rgba(23, 28, 38, 0.97) 0%, rgba(9, 12, 20, 0.985) 100%);
}

html.ui-compact .codex-branch-skills.has-bg {
    border: none;
}

html.ui-compact .codex-branch-bg {
    border-radius: 0;
}

html.ui-compact .codex-branch-stamps {
    min-height: 72px;
    padding: 2px 0 8px;
    gap: 8px 10px;
}

html.ui-compact .codex-branch-stamps__slot {
    gap: 8px;
}

html.ui-compact .codex-branch-stamp {
    --stamp-size: 56px;
}

html.ui-compact .codex-class-atlas__skills {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 8px;
}

html.ui-compact .codex-skill-tiers {
    gap: 12px;
    position: relative;
    z-index: 1;
}

html.ui-compact .codex-skill-tier__label {
    margin-bottom: 6px;
    font-size: 10px;
    letter-spacing: 0.12em;
    opacity: 0.55;
}

html.ui-compact .codex-skill-tier__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, 52px);
    justify-content: center;
    justify-items: center;
    gap: 10px 12px;
}

html.ui-compact .codex-skill-card {
    width: 52px;
}

html.ui-compact .codex-skill-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    object-fit: cover;
    opacity: 0.82;
    border: 1px solid rgba(232, 220, 190, 0.5);
    background: rgba(0, 0, 0, 0.4);
    box-shadow:
        0 0 2px 0 rgba(255, 244, 216, 0.22),
        0 0 5px 0 rgba(255, 244, 216, 0.12);
}

html.ui-compact .codex-skill-card:hover .codex-skill-card__icon,
html.ui-compact .codex-skill-card:focus-visible .codex-skill-card__icon {
    opacity: 1;
    border-color: rgba(245, 236, 210, 0.72);
    transform: translateY(-2px);
    box-shadow:
        0 0 3px 0 rgba(255, 244, 216, 0.3),
        0 0 7px 0 rgba(255, 244, 216, 0.16);
}

html.ui-compact .codex-class-face {
    min-height: 56px;
    padding: 10px;
    border-color: rgba(190, 169, 121, 0.28);
}

html.ui-compact #clan-modal.game-modal,
html.ui-compact #clan-modal.game-modal.active {
    padding: 0 !important;
    justify-content: stretch !important;
    align-items: stretch !important;
}

html.ui-compact #clan-modal .modal-content,
html.ui-compact #clan-modal .modal-content.default-modal,
html.ui-compact #clan-modal .clan-modal-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box;
}

html.ui-compact #clan-modal .modal-body {
    padding: 8px 10px 12px;
}

html.ui-compact #clan-modal .clan-tab-panels,
html.ui-compact #clan-modal .clan-tab-panel,
html.ui-compact #clan-modal .clan-meta-stripe,
html.ui-compact #clan-modal .clan-skills-summary,
html.ui-compact #clan-modal .clan-skills-tree-panel,
html.ui-compact #clan-modal .clan-expand-card,
html.ui-compact #clan-modal .clan-item,
html.ui-compact #clan-modal .application-item {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

html.ui-compact #ratings-modal .modal-body {
    display: flex;
    flex-direction: column;
    padding: 8px 10px 12px;
    overflow: hidden !important;
}

html.ui-compact #ratings-modal .events-section-tabs {
    flex: 0 0 auto;
    position: relative;
    z-index: 3;
    margin-bottom: 10px;
    padding-bottom: 2px;
    background: rgba(8, 10, 16, 0.96);
}

html.ui-compact #ratings-modal #events-panel-ratings,
html.ui-compact #ratings-modal #events-panel-calendar,
html.ui-compact #ratings-modal #events-panel-pass {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

html.ui-compact #ratings-modal #events-panel-ratings {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

html.ui-compact #ratings-modal .ratings-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 auto;
}

html.ui-compact #ratings-modal .ratings-season-hint {
    display: none;
}

html.ui-compact #ratings-modal .ratings-board {
    display: contents;
}

html.ui-compact #ratings-modal .ratings-me {
    order: 1;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 8px 10px;
}

html.ui-compact #ratings-modal .ratings-me-badge {
    font-size: 1.15em;
    line-height: 1;
}

html.ui-compact #ratings-modal .ratings-sign-slot {
    width: 32px;
    height: 32px;
}

html.ui-compact #ratings-modal .ratings-sign-slot .rating-title-ico {
    width: 24px;
    height: 24px;
}

html.ui-compact #ratings-modal .ratings-prizes {
    order: 2;
    flex: 0 0 auto;
}

html.ui-compact #ratings-modal .ratings-list {
    order: 3;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

html.ui-compact #ratings-modal .events-section-tab,
html.ui-compact #clan-modal .clan-tab-btn {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 13px;
}

html.ui-compact #ratings-modal .ratings-season {
    text-align: left;
    min-width: 0;
}

html.ui-compact #ratings-modal .ratings-bracket-button {
    min-height: 32px;
    padding: 6px 10px;
}

html.ui-compact #ratings-modal .ratings-prizes-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

html.ui-compact #ratings-modal .ratings-prize-chip {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 0;
    padding: 6px 7px;
}

html.ui-compact #ratings-modal .ratings-prize-place {
    min-width: 0;
    font-size: 0.92em;
}

html.ui-compact #ratings-modal .ratings-prize-bits {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3px 6px;
}

html.ui-compact #ratings-modal .ratings-prize-bit {
    font-size: 0.78em;
}

html.ui-compact #ratings-modal .ratings-table {
    font-size: 13px;
}

html.ui-compact #ratings-modal .ratings-table th,
html.ui-compact #ratings-modal .ratings-table td {
    padding: 7px 6px;
}

html.ui-compact #ratings-modal .events-calendar-head,
html.ui-compact #ratings-modal .events-pass-actions {
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Login days as rows: claim/buy stay 40px, not stuffed into a 7-col week. */
html.ui-compact #ratings-modal .events-calendar-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

html.ui-compact #ratings-modal .events-day {
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 52px;
    padding: 8px 10px;
}

html.ui-compact #ratings-modal .events-day-num {
    position: static;
    min-width: 28px;
    padding: 2px 6px;
    font-size: 12px;
    line-height: 18px;
}

html.ui-compact #ratings-modal .events-day-date {
    min-width: 0;
    flex: 1 1 auto;
    font-size: 12px;
    line-height: 1.2;
}

html.ui-compact #ratings-modal .events-reward-icon-wrap,
html.ui-compact #ratings-modal .events-reward-icon {
    width: 36px;
    height: 36px;
}

html.ui-compact #ratings-modal .events-day-action {
    margin-left: auto;
    width: auto;
    min-width: 76px;
    min-height: 40px;
}

html.ui-compact #ratings-modal .events-mini-btn {
    min-height: 40px;
    min-width: 76px;
    padding: 8px 10px;
    font-size: 13px;
}

html.ui-compact #ratings-modal .events-pass-carousel {
    gap: 8px;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
}

html.ui-compact #ratings-modal .events-pass-card {
    flex: 0 0 112px;
    min-height: 156px;
    scroll-snap-align: start;
}

html.ui-compact #ratings-modal .events-reward-icon-wrap.is-large,
html.ui-compact #ratings-modal .events-reward-icon.is-large {
    width: 52px;
    height: 52px;
}

html.ui-compact #events-item-tooltip-root {
    pointer-events: none;
    max-width: calc(100vw - 16px);
}

html.ui-compact #events-item-tooltip-root > * {
    pointer-events: auto;
}

html.ui-compact #clan-modal .clan-meta-stripe {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
}

html.ui-compact #clan-modal .clan-meta-emblem {
    flex: 0 0 52px;
}

html.ui-compact #clan-modal .clan-meta-left {
    flex: 1 1 160px;
    min-width: 0;
}

html.ui-compact #clan-modal .clan-meta-progress {
    max-width: none;
}

html.ui-compact #clan-modal .clan-meta-side {
    flex: 1 1 100%;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
}

html.ui-compact #clan-modal .clan-meta-stats,
html.ui-compact #clan-modal .clan-meta-actions {
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
}

html.ui-compact #clan-modal .clan-meta-stats {
    flex-wrap: wrap;
}

html.ui-compact #clan-modal .clan-meta-actions {
    flex-direction: column;
}

html.ui-compact #clan-modal .clan-meta-actions .game-button,
html.ui-compact #clan-modal .clan-item-actions .game-button,
html.ui-compact #clan-modal .application-actions .game-button,
html.ui-compact #clan-modal .clan-member-actions .game-button,
html.ui-compact #clan-modal .clan-expand-buy-btn,
html.ui-compact #clan-modal .clan-rename-row .game-button {
    min-height: 40px;
    width: 100%;
}

html.ui-compact #clan-modal .clan-search {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
}

html.ui-compact #clan-modal .clan-search input {
    min-width: 0;
    flex: 1 1 auto;
}

html.ui-compact #clan-modal .clan-search .game-button,
html.ui-compact #clan-modal #search-clans-btn {
    flex: 0 0 auto;
    min-height: 40px;
}

html.ui-compact #clan-modal #clans-list {
    max-height: none;
}

html.ui-compact #clan-modal .clan-item {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas:
        "icon body"
        "actions actions";
    align-items: start;
    gap: 8px 10px;
}

html.ui-compact #clan-modal .clan-item-icon {
    grid-area: icon;
    width: 48px;
    height: 48px;
}

html.ui-compact #clan-modal .clan-item-body {
    grid-area: body;
}

html.ui-compact #clan-modal .clan-item-actions {
    grid-area: actions;
    flex-direction: row;
    flex-wrap: wrap;
}

html.ui-compact #clan-modal .application-item,
html.ui-compact #clan-modal .my-clan-application-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

html.ui-compact #clan-modal .application-actions {
    width: 100%;
}

html.ui-compact #clan-modal .clan-members-row--head {
    display: none !important;
}

html.ui-compact #clan-modal .clan-members-row,
html.ui-compact #clan-modal .clan-members-table.has-actions .clan-members-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 8px;
    padding: 10px 0;
}

html.ui-compact #clan-modal .clan-member-identity {
    min-width: 0;
}

html.ui-compact #clan-modal .clan-member-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
}

html.ui-compact #clan-modal .clan-member-actions .game-button {
    width: auto;
    flex: 1 1 96px;
}

html.ui-compact #clan-modal .clan-rename-row {
    flex-direction: column;
    align-items: stretch;
}

html.ui-compact #clan-modal .form-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

html.ui-compact #clan-modal .form-actions .game-button,
html.ui-compact #clan-modal #create-clan-form .game-button {
    min-height: 40px;
    width: 100%;
}

html.ui-compact #clan-modal .clan-icon-preset {
    width: 44px;
    height: 44px;
}

html.ui-compact #clan-modal .clan-skills-summary {
    font-size: 13px;
    overflow-wrap: anywhere;
}

html.ui-compact #clan-modal .clan-skills-tree-panel,
html.ui-compact #clan-modal .clan-skills-tree {
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

html.ui-compact #clan-modal .clan-skill-tree-grid,
html.ui-compact #clan-modal .abilities-skill-tree-grid {
    grid-template-columns: repeat(var(--tree-cols, 6), minmax(52px, 1fr));
    min-width: min(100%, calc(var(--tree-cols, 6) * 52px));
    grid-auto-rows: 72px;
}

html.ui-compact .clan-skill-learn-modal {
    inset: 0 0 var(--compact-dock, 164px) 0;
    padding: 10px;
    align-items: stretch;
}

html.ui-compact .clan-skill-learn-modal .modal-content {
    width: 100%;
    max-width: none;
    min-height: 0;
    max-height: 100%;
}

html.ui-compact #cashier-modal .cashier-products {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

html.ui-compact #home-storage-modal .home-storage-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-height: none;
}

html.ui-compact #support-ticket-modal {
    inset: 0 0 var(--compact-dock, 164px) 0;
    align-items: end;
    place-items: end center;
    padding: 10px;
}

html.ui-compact #support-ticket-modal .support-ticket-modal__card {
    width: 100%;
    max-width: none;
}

html.ui-compact .ui-compact-inv-tabs {
    display: none !important;
}

html.ui-compact #inventory-modal-content,
html.ui-compact #inventory-modal-content.with-equipment,
html.ui-compact #inventory-modal-content.has-third-panel {
    --inv-slot: 44px;
    --inv-gap: 6px;
    --inv-pad: 6px;
    --inv-scrollbar: 6px;
    --inv-grid-w: calc((var(--inv-slot) * 4) + (var(--inv-gap) * 3) + (var(--inv-pad) * 2) + 2px);
    --inv-fixed: calc(var(--inv-grid-w) + var(--inv-scrollbar) + 8px);
    --inv-col: var(--inv-fixed);
    --equip-col: minmax(0, 1fr);
    --equip-slot: 38px;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    transition: none !important;
}

html.ui-compact #inventory-modal-content .modal-header {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 2px 6px;
}

html.ui-compact #inventory-modal-content .modal-body,
html.ui-compact #inventory-modal-content.with-equipment .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

html.ui-compact #inventory-modal-content.with-equipment .inventory-container,
html.ui-compact #inventory-modal-content .inventory-container.with-equipment {
    --equip-col: minmax(0, 1fr);
    --inv-col: var(--inv-fixed);
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--inv-fixed) !important;
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

html.ui-compact #inventory-modal-content.has-third-panel .inventory-container,
html.ui-compact #inventory-modal-content.has-third-panel.with-equipment .inventory-container,
html.ui-compact #inventory-modal-content.with-alchemy .inventory-container,
html.ui-compact #inventory-modal-content.with-artifact .inventory-container,
html.ui-compact #inventory-modal-content.with-mail .inventory-container {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    grid-template-areas: "module" "bag";
}

html.ui-compact #inventory-modal-content.has-third-panel .equipment-panel,
html.ui-compact #inventory-modal-content.with-alchemy .equipment-panel,
html.ui-compact #inventory-modal-content.with-artifact .equipment-panel,
html.ui-compact #inventory-modal-content.with-mail .equipment-panel {
    display: none !important;
}

html.ui-compact #inventory-modal-content.has-third-panel .inventory-container,
html.ui-compact #inventory-modal-content.has-third-panel.with-equipment .inventory-container {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

html.ui-compact #inventory-modal-content.has-third-panel .inventory-grid-wrapper,
html.ui-compact #inventory-modal-content.has-third-panel.with-equipment .inventory-grid-wrapper {
    grid-area: bag;
    display: flex !important;
    flex-direction: column;
    flex: 0 0 auto;
    height: auto !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}

html.ui-compact #inventory-modal-content.has-third-panel .inventory-grid {
    display: grid;
    flex: 0 0 auto;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, calc(var(--inv-slot) + var(--inv-price-h, 0px))) !important;
    grid-auto-rows: calc(var(--inv-slot) + var(--inv-price-h, 0px));
    grid-auto-columns: var(--inv-slot);
    grid-template-columns: none !important;
    width: max-content;
    max-width: none;
    min-height: 0 !important;
    height: calc((var(--inv-slot) + var(--inv-price-h, 0px)) * 2 + var(--inv-gap) + var(--inv-pad) * 2) !important;
    row-gap: var(--inv-gap);
    margin: 0;
    justify-content: start;
    align-content: start;
    align-items: start;
    overflow: visible;
}

html.ui-compact #inventory-modal-content.has-third-panel .inventory-slot {
    width: var(--inv-slot) !important;
    height: var(--inv-slot) !important;
    max-width: var(--inv-slot) !important;
    max-height: var(--inv-slot) !important;
}

html.ui-compact #inventory-modal-content.has-third-panel.is-shop-sell-mode {
    --inv-price-h: 14px;
}

html.ui-compact #inventory-modal-content.has-third-panel.is-shop-sell-mode .inventory-bag-cell {
    width: var(--inv-slot);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

html.ui-compact #inventory-modal-content.has-third-panel.is-shop-sell-mode .inventory-bag-cell .inventory-slot {
    overflow: hidden !important;
}

html.ui-compact #inventory-modal-content.has-third-panel.is-shop-sell-mode .inventory-bag-cell > .item-sell-price {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: var(--inv-price-h);
    max-width: calc(var(--inv-slot) + 12px);
    margin: 0;
    padding: 1px 0 0;
    border-radius: 0;
    background: transparent !important;
    color: rgba(255, 236, 180, 0.96);
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    overflow: visible;
    white-space: nowrap;
}

html.ui-compact #inventory-modal-content.has-third-panel.is-shop-sell-mode .inventory-bag-cell > .item-sell-price .currency-ico,
html.ui-compact #inventory-modal-content.has-third-panel.is-shop-sell-mode .inventory-bag-cell > .item-sell-price .currency-ico .ui-icon-svg {
    width: 8px !important;
    height: 8px !important;
    flex: 0 0 8px;
}

html.ui-compact #inventory-modal-content.has-third-panel.is-shop-sell-mode .inventory-bag-cell > .item-sell-price .currency-amount {
    font-size: 8px;
}

html.ui-compact #inventory-modal-content.has-third-panel #home-storage-grid-inventory,
html.ui-compact #inventory-modal-content.has-third-panel #clan-storage-grid-inventory {
    display: grid;
    flex: 1 1 auto;
    min-height: 0;
    grid-auto-flow: column;
    grid-template-columns: none !important;
    grid-template-rows: repeat(auto-fill, var(--inv-slot));
    grid-auto-rows: var(--inv-slot);
    grid-auto-columns: var(--inv-slot);
    width: max-content;
    max-width: 100%;
    height: auto !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    justify-content: start;
    align-content: start;
}

html.ui-compact #inventory-modal-content.has-third-panel .home-storage-slot,
html.ui-compact #inventory-modal-content.has-third-panel .clan-storage-slot {
    width: var(--inv-slot) !important;
    height: var(--inv-slot) !important;
    max-width: var(--inv-slot) !important;
    max-height: var(--inv-slot) !important;
}

html.ui-compact #inventory-modal-content.has-third-panel .shop-buy-grid {
    width: 100% !important;
    max-width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--inv-slot), 52px), 1fr));
    justify-content: stretch;
    justify-items: stretch;
}

html.ui-compact #inventory-modal-content.has-third-panel .shop-buy-cell {
    width: 100%;
    min-width: 0;
}

html.ui-compact #inventory-modal-content.has-third-panel .shop-buy-slot {
    width: var(--inv-slot);
    height: var(--inv-slot);
    margin-inline: auto;
}

html.ui-compact #inventory-modal-content.has-third-panel .shop-buy-slot .inventory-item {
    width: 100%;
    height: 100%;
}

html.ui-compact #inventory-modal-content.has-third-panel .shop-buy-price {
    max-width: 100%;
    font-size: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.ui-compact #inventory-modal-content.has-third-panel .alchemy-controls {
    flex: 0 0 auto;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0;
    padding: 6px 4px 4px;
    overflow: visible;
}

html.ui-compact #inventory-modal-content.has-third-panel .alchemy-interface,
html.ui-compact #inventory-modal-content.has-third-panel .artifact-interface,
html.ui-compact #inventory-modal-content.has-third-panel .mail-interface,
html.ui-compact #inventory-modal-content.has-third-panel .synthesis-interface,
html.ui-compact #inventory-modal-content.has-third-panel .auction-interface,
html.ui-compact #inventory-modal-content.has-third-panel .home-storage-panel-inventory,
html.ui-compact #inventory-modal-content.has-third-panel .clan-storage-panel-inventory,
html.ui-compact #inventory-modal-content.has-third-panel .shop-panel-inventory {
    grid-area: module;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100%;
    overflow: auto !important;
}

html.ui-compact #inventory-modal-content.has-third-panel .mail-interface.visible,
html.ui-compact #inventory-modal-content.has-third-panel .auction-interface.visible,
html.ui-compact #inventory-modal-content.has-third-panel .synthesis-interface.visible {
    display: flex !important;
    flex-direction: column !important;
}

html.ui-compact #inventory-modal-content.has-third-panel .mail-body,
html.ui-compact #inventory-modal-content.has-third-panel .auction-body,
html.ui-compact #inventory-modal-content.has-third-panel .synthesis-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

html.ui-compact #inventory-modal-content.with-alchemy .alchemy-interface.visible,
html.ui-compact #inventory-modal-content.with-artifact .artifact-interface.visible {
    display: flex !important;
    flex-direction: column !important;
    padding: 4px 6px 6px !important;
    overflow: hidden !important;
}

html.ui-compact #inventory-modal-content.with-alchemy .alchemy-interface.visible {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 0 4px !important;
    background-image: none !important;
    background-color: rgba(10, 6, 4, 0.35);
    justify-content: flex-start !important;
}

html.ui-compact #inventory-modal-content.with-artifact .artifact-interface.visible {
    padding: 0 0 4px !important;
    overflow: auto !important;
    background-image: none !important;
    background-color: rgba(8, 6, 14, 0.35);
}

html.ui-compact #inventory-modal-content.with-artifact .artifact-interface::before,
html.ui-compact #inventory-modal-content.with-artifact .anvil-container::before,
html.ui-compact #inventory-modal-content.with-artifact .anvil-container::after,
html.ui-compact #inventory-modal-content.with-artifact .anvil-forge::before,
html.ui-compact #inventory-modal-content.with-artifact .anvil-forge::after,
html.ui-compact #inventory-modal-content.with-artifact .material-slot::before,
html.ui-compact #inventory-modal-content.with-artifact .material-slot::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

html.ui-compact #inventory-modal-content.with-artifact .material-slot,
html.ui-compact #inventory-modal-content.with-artifact .material-slot:hover {
    filter: none !important;
    animation: none !important;
    color: transparent !important;
    background: rgba(16, 12, 9, 0.78) !important;
    border: 1.5px solid rgba(214, 186, 122, 0.58) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 244, 216, 0.08),
        inset 0 0 0 1px rgba(0, 0, 0, 0.35) !important;
}

html.ui-compact #inventory-modal-content.with-artifact .material-slot.filled,
html.ui-compact #inventory-modal-content.with-artifact .material-slot.filled:hover {
    filter: none !important;
    animation: none !important;
    background: rgba(48, 38, 18, 0.9) !important;
    border-color: rgba(232, 196, 110, 0.88) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 236, 180, 0.16),
        inset 0 0 0 1px rgba(0, 0, 0, 0.28) !important;
}

html.ui-compact #inventory-modal-content .alchemy-header,
html.ui-compact #inventory-modal-content .artifact-header,
html.ui-compact #inventory-modal-content .auction-header,
html.ui-compact #inventory-modal-content .synthesis-header {
    position: absolute;
    top: 2px;
    right: 2px;
    left: auto;
    z-index: 4;
    margin: 0;
    padding: 0;
    border: 0;
    width: auto;
    min-height: 0;
    background: none;
}

html.ui-compact #inventory-modal-content .alchemy-header h3,
html.ui-compact #inventory-modal-content .artifact-header h3,
html.ui-compact #inventory-modal-content .auction-header h3,
html.ui-compact #inventory-modal-content .synthesis-header h3 {
    display: none;
}

html.ui-compact #inventory-modal-content.with-equipment .alchemy-interface.visible .alchemy-content {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    gap: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
}

html.ui-compact #inventory-modal-content.with-equipment .alchemy-interface.visible .pentagram-container,
html.ui-compact #inventory-modal-content.with-equipment .alchemy-interface.visible .pentagram {
    display: block !important;
}

html.ui-compact #inventory-modal-content.with-equipment .pentagram-container {
    flex: 0 0 auto !important;
    align-self: stretch;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    top: 0 !important;
    margin: 0 !important;
    display: block !important;
    position: relative !important;
    background: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

html.ui-compact #inventory-modal-content.with-equipment .pentagram {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    max-height: none !important;
    aspect-ratio: 1890 / 1080 !important;
    pointer-events: none;
    background-image: url("/media/images/inventory_modals/alchemy/alchemy.png") !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

html.ui-compact #inventory-modal-content.with-equipment .alchemy-interface.visible .pentagram::before,
html.ui-compact #inventory-modal-content.with-equipment .alchemy-interface.visible .pentagram::after,
html.ui-compact #inventory-modal-content.with-equipment .alchemy-interface.visible .pentagram-container::before,
html.ui-compact #inventory-modal-content.with-equipment .alchemy-interface.visible .pentagram-container::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    background: none !important;
}

html.ui-compact #inventory-modal-content.with-equipment .alchemy-interface.visible .ingredient-slot {
    position: absolute !important;
    width: 8% !important;
    height: auto !important;
    min-width: 28px;
    min-height: 28px;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%) !important;
    pointer-events: auto;
    font-size: 14px;
}

html.ui-compact #inventory-modal-content.with-equipment .alchemy-interface.visible #slot-0 {
    top: 18% !important;
    left: 50% !important;
}

html.ui-compact #inventory-modal-content.with-equipment .alchemy-interface.visible #slot-1 {
    top: 32% !important;
    left: 68% !important;
    right: auto !important;
}

html.ui-compact #inventory-modal-content.with-equipment .alchemy-interface.visible #slot-2 {
    top: 68% !important;
    left: 68% !important;
    right: auto !important;
    bottom: auto !important;
}

html.ui-compact #inventory-modal-content.with-equipment .alchemy-interface.visible #slot-3 {
    top: 68% !important;
    left: 32% !important;
    bottom: auto !important;
}

html.ui-compact #inventory-modal-content.with-equipment .alchemy-interface.visible #slot-4 {
    top: 32% !important;
    left: 32% !important;
}

html.ui-compact #inventory-modal-content.with-equipment .alchemy-interface.visible #slot-5 {
    top: 82% !important;
    left: 50% !important;
}

html.ui-compact #inventory-modal-content.with-equipment .effects-preview {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    flex: none !important;
    min-height: 0;
    height: auto;
    max-height: 58%;
    overflow: hidden;
    gap: 4px;
    padding: 8px 4px 0;
    background: linear-gradient(180deg, rgba(10, 6, 4, 0) 0%, rgba(10, 6, 4, 0.55) 28%);
    pointer-events: none;
}

html.ui-compact #inventory-modal-content.with-equipment .effects-columns {
    display: flex !important;
    flex: 0 1 auto;
    min-height: 0;
    max-height: 100%;
    gap: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
}

html.ui-compact #inventory-modal-content.with-equipment .positive-effects,
html.ui-compact #inventory-modal-content.with-equipment .negative-effects {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    max-height: none;
    height: auto;
    overflow: auto;
    padding: 6px;
    border-radius: 8px;
    background:
        linear-gradient(160deg, rgba(28, 16, 10, 0.78), rgba(12, 8, 6, 0.62)),
        radial-gradient(circle at top left, rgba(255, 215, 0, 0.1), transparent 55%);
    border: 1px solid rgba(139, 69, 19, 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 59, 0.12),
        inset 0 -8px 14px rgba(0, 0, 0, 0.28);
}

html.ui-compact #inventory-modal-content.with-equipment .positive-effects,
html.ui-compact #inventory-modal-content.with-equipment .negative-effects {
    grid-column: auto !important;
    grid-row: auto !important;
}

html.ui-compact #inventory-modal-content.with-equipment .positive-effects h4,
html.ui-compact #inventory-modal-content.with-equipment .negative-effects h4 {
    display: none !important;
}

html.ui-compact #inventory-modal-content.with-equipment .positive-effects .no-effects,
html.ui-compact #inventory-modal-content.with-equipment .negative-effects .no-effects {
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
    color: rgba(247, 241, 223, 0.62);
    font-style: italic;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

html.ui-compact #inventory-modal-content.with-equipment .effect-item {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    margin: 3px 0;
    padding: 4px 6px;
    font-size: 11px;
    line-height: 1.2;
    background:
        linear-gradient(180deg, rgba(255, 235, 59, 0.06), rgba(0, 0, 0, 0.42));
    border: 1px solid rgba(212, 186, 128, 0.28);
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 235, 59, 0.08);
    backdrop-filter: none;
}

html.ui-compact #inventory-modal-content.with-equipment .effect-item.positive {
    border-left: 2px solid #6fbf73;
}

html.ui-compact #inventory-modal-content.with-equipment .effect-item.negative {
    border-left: 2px solid #e57373;
}

html.ui-compact #inventory-modal-content.with-equipment .effect-item label {
    display: flex !important;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

html.ui-compact #inventory-modal-content.with-equipment .effect-name {
    color: #f7f1df;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.ui-compact #inventory-modal-content.with-equipment .effect-value {
    color: #ffeb3b;
    flex: 0 0 auto;
    font-weight: 700;
}

html.ui-compact #inventory-modal-content.with-equipment .effect-duration {
    color: rgba(247, 241, 223, 0.58);
    flex: 0 0 auto;
    font-size: 10px;
    grid-column: auto !important;
    white-space: nowrap;
}

html.ui-compact #inventory-modal-content.with-equipment .alchemy-content:has(.positive-effects .no-effects):has(.negative-effects .no-effects) .negative-effects {
    display: none !important;
}

html.ui-compact #inventory-modal-content.with-equipment .alchemy-content:has(.positive-effects .no-effects):has(.negative-effects .no-effects) .positive-effects {
    grid-column: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

html.ui-compact #inventory-modal-content.with-equipment .alchemy-content:has(.positive-effects .no-effects):has(.negative-effects .no-effects) .positive-effects h4 {
    display: none;
}

html.ui-compact #inventory-modal-content.with-equipment .creation-buttons {
    display: flex !important;
    flex: 0 0 auto;
    flex-shrink: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    gap: 6px;
    margin-top: 0;
    pointer-events: auto;
}

html.ui-compact #inventory-modal-content.with-equipment #create-potion-button,
html.ui-compact #inventory-modal-content.with-equipment #create-poison-button {
    grid-column: auto !important;
    grid-row: auto !important;
    flex: 1 1 0;
}

html.ui-compact #inventory-modal-content.with-equipment .create-button,
html.ui-compact #inventory-modal-content.with-equipment .create-artifact-button {
    flex-shrink: 0;
    min-height: 36px;
    height: 36px;
    padding: 6px 8px;
    font-size: 12px;
}

html.ui-compact #inventory-modal-content .create-artifact-label-full {
    display: none !important;
}

html.ui-compact #inventory-modal-content .create-artifact-label-short {
    display: inline !important;
}

html.ui-compact #inventory-modal-content .creation-section {
    flex: 0 0 auto;
    width: auto;
}

html.ui-compact #inventory-modal-content.with-artifact .create-artifact-button {
    width: auto !important;
    min-width: 84px;
    padding: 6px 14px;
    letter-spacing: 0.04em;
    font-size: 12px;
    text-transform: uppercase;
}

html.ui-compact #inventory-modal-content .artifact-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

html.ui-compact #inventory-modal-content.with-artifact .artifact-content {
    height: auto !important;
    min-height: min-content !important;
    overflow: visible !important;
}

html.ui-compact #inventory-modal-content.with-artifact .forge-section {
    display: flex !important;
    flex-direction: column;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 6px !important;
}

html.ui-compact #inventory-modal-content.with-artifact .anvil-container {
    flex: 0 0 auto !important;
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0;
    margin: 0;
    aspect-ratio: auto;
    display: block;
    background: none !important;
    border-radius: 0 !important;
    order: 3;
}

html.ui-compact #inventory-modal-content.with-artifact .anvil-forge {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: 1024 / 1024;
    background-image: url("/media/images/inventory_modals/artifacts/artifact.png") !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

html.ui-compact #inventory-modal-content.with-artifact .material-slot {
    width: 12% !important;
    height: 12% !important;
    min-width: 0;
    min-height: 0;
    transform: translate(-50%, -50%);
}

html.ui-compact #inventory-modal-content.with-artifact #material-slot-0 {
    top: 38%;
    left: 27%;
}

html.ui-compact #inventory-modal-content.with-artifact #material-slot-1 {
    top: 38%;
    left: 50%;
}

html.ui-compact #inventory-modal-content.with-artifact #material-slot-2 {
    top: 38%;
    left: 73%;
}

html.ui-compact #inventory-modal-content.with-artifact #material-slot-3 {
    top: 57%;
    left: 27%;
}

html.ui-compact #inventory-modal-content.with-artifact #material-slot-4 {
    top: 57%;
    left: 50%;
}

html.ui-compact #inventory-modal-content.with-artifact #material-slot-5 {
    top: 57%;
    left: 73%;
}

html.ui-compact #inventory-modal-content.with-artifact .artifact-list {
    display: flex !important;
    flex-direction: column;
    flex: 0 0 auto !important;
    width: calc(100% - 12px) !important;
    max-width: none !important;
    min-height: 72px !important;
    max-height: 128px;
    height: auto !important;
    overflow: auto !important;
    margin: 4px 6px 0 !important;
    justify-self: stretch !important;
    background: rgba(8, 10, 16, 0.78);
    border-radius: 8px;
    padding: 6px 8px;
    order: 1;
    position: relative;
    z-index: 6;
}

html.ui-compact #inventory-modal-content.with-artifact .artifact-recipe-grid,
html.ui-compact #inventory-modal-content.with-artifact #artifact-list-accordion {
    display: grid !important;
    flex: 0 0 auto !important;
    min-height: 44px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

html.ui-compact #inventory-modal-content.with-artifact .artifact-recipe-icon,
html.ui-compact #inventory-modal-content.with-artifact .artifact-list-item {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
}

html.ui-compact #inventory-modal-content.with-artifact .artifact-list-empty {
    margin: 4px 0 0;
    font-size: 12px;
    color: rgba(255, 235, 181, 0.72);
}

html.ui-compact #inventory-modal-content.with-artifact .anvil-container .artifact-right,
html.ui-compact #inventory-modal-content.with-artifact .artifact-right {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 8px;
    bottom: auto;
    flex: none;
    width: auto !important;
    max-width: none !important;
    min-height: 0;
    max-height: calc(100% - 16px);
    overflow: auto !important;
    margin: 0 !important;
    justify-self: stretch !important;
    background: rgba(8, 10, 16, 0.88);
    border: 1px solid rgba(190, 169, 121, 0.28);
    border-radius: 10px;
    padding: 8px 36px 8px 10px;
    order: unset;
    z-index: 30;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

html.ui-compact #inventory-modal-content.with-artifact .artifact-right.is-empty,
html.ui-compact #inventory-modal-content.with-artifact .artifact-right.is-dismissed {
    display: none !important;
}

html.ui-compact #inventory-modal-content.with-artifact .artifact-tooltip-hide {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 4;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(190, 169, 121, 0.35);
    background: rgba(12, 14, 20, 0.86);
    color: rgba(255, 235, 181, 0.92);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

html.ui-compact #inventory-modal-content.with-artifact .close-artifact {
    display: none !important;
}

html.ui-compact #inventory-modal-content.with-artifact .artifact-recipe-grid {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 6px;
}

html.ui-compact #inventory-modal-content.with-artifact .required-material-icon {
    width: 36px;
    height: 36px;
}

html.ui-compact #inventory-modal-content.with-artifact .expected-effects h4 {
    display: none;
}

html.ui-compact #inventory-modal-content.with-artifact .artifact-list h4,
html.ui-compact #inventory-modal-content.with-artifact .required-materials h4 {
    display: block !important;
    margin: 0 0 4px;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: rgba(255, 235, 181, 0.82);
    text-align: left;
    text-transform: none;
}

html.ui-compact #inventory-modal-content.with-artifact .no-effects,
html.ui-compact #inventory-modal-content.with-artifact .no-materials {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
}

html.ui-compact #inventory-modal-content .artifact-rarity-toggle {
    min-height: 28px;
    padding: 4px 8px;
}

html.ui-compact #inventory-modal-content .artifact-rarity-toggle-label,
html.ui-compact #inventory-modal-content .artifact-rarity-toggle-meta {
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.ui-compact #inventory-modal-content .recipe-preview {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
    max-height: none;
    padding: 4px 6px 0;
}

html.ui-compact #inventory-modal-content.with-artifact .anvil-container > .recipe-preview {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 8px;
    z-index: 20;
    margin: 0;
    padding: 6px 8px;
    pointer-events: auto;
    background: rgba(8, 10, 16, 0.84);
    border: 1px solid rgba(190, 169, 121, 0.28);
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
}

html.ui-compact #inventory-modal-content.with-artifact .anvil-container > .recipe-preview .required-materials {
    background: transparent;
    padding: 0;
}

html.ui-compact #inventory-modal-content .required-materials {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    background: rgba(8, 10, 16, 0.62);
    border-radius: 8px;
    padding: 6px 8px;
}

html.ui-compact #inventory-modal-content .auction-tabs {
    padding: 4px 8px;
    gap: 6px;
}

html.ui-compact #inventory-modal-content .auction-body {
    padding: 6px 8px;
}

html.ui-compact #inventory-modal-content .auction-list-toolbar {
    gap: 4px;
    margin-bottom: 6px;
}

html.ui-compact #inventory-modal-content .auction-list-toolbar input,
html.ui-compact #inventory-modal-content .auction-list-toolbar select {
    flex: 1 1 calc(50% - 4px);
    font-size: 12px;
    padding: 5px 6px;
}

html.ui-compact #inventory-modal-content .alchemy-controls .alchemy-control-button::before,
html.ui-compact #inventory-modal-content .alchemy-controls .alchemy-control-button::after,
html.ui-compact #inventory-modal-content .alchemy-toggle-button::after,
html.ui-compact #inventory-modal-content .artifact-toggle-button::after,
html.ui-compact #inventory-modal-content .auction-toggle-button::after,
html.ui-compact #inventory-modal-content .mail-toggle-button::after {
    display: none !important;
}

html.ui-compact #inventory-modal-content.with-equipment .synthesis-hand {
    aspect-ratio: 1 / 1 !important;
}

html.ui-compact #inventory-modal-content .mail-tabs,
html.ui-compact #inventory-modal-content .auction-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
}

html.ui-compact #inventory-modal-content .mail-tab,
html.ui-compact #inventory-modal-content .auction-tab {
    min-height: 36px;
    flex: 0 0 auto;
}

html.ui-compact .equipment-panel {
    flex: none !important;
    max-width: none !important;
    width: 100%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    padding: 0;
}

html.ui-compact .equipment-panel h3 {
    display: none;
}

html.ui-compact .character-model-container {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
}

html.ui-compact .equipment-panel .character-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    opacity: 0.9;
}

html.ui-compact .equipment-slots-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

html.ui-compact .equipment-slot {
    width: var(--equip-slot);
    min-width: var(--equip-slot);
    left: auto;
    right: auto;
    bottom: auto;
    transform: none !important;
    animation: none !important;
}

html.ui-compact .equipment-slot[data-slot-type="head"] {
    top: 2%;
    left: 50%;
    transform: translateX(-50%) !important;
}

html.ui-compact .equipment-slot[data-slot-type="glasses_mask"] {
    top: 2%;
    right: 4px;
}

html.ui-compact .equipment-slot[data-slot-type="earring_1"] {
    top: 16%;
    left: 4px;
}

html.ui-compact .equipment-slot[data-slot-type="earring_2"] {
    top: 16%;
    right: 4px;
}

html.ui-compact .equipment-slot[data-slot-type="necklace"] {
    top: 18%;
    left: 50%;
    transform: translateX(-50%) !important;
}

html.ui-compact .equipment-slot[data-slot-type="brooch"] {
    top: 30%;
    right: 4px;
}

html.ui-compact .equipment-slot[data-slot-type="body"] {
    top: 34%;
    left: 50%;
    transform: translateX(-50%) !important;
}

html.ui-compact .equipment-slot[data-slot-type="left_bracelet"] {
    top: 30%;
    left: 4px;
}

html.ui-compact .equipment-slot[data-slot-type="right_bracelet"] {
    top: 44%;
    right: 4px;
}

html.ui-compact .equipment-slot[data-slot-type="gloves"] {
    top: 44%;
    left: 4px;
}

html.ui-compact .equipment-slot[data-slot-type="accessory"] {
    top: 58%;
    right: 4px;
}

html.ui-compact .equipment-slot[data-slot-type="ring_1"] {
    top: 58%;
    left: 4px;
}

html.ui-compact .equipment-slot[data-slot-type="legs"] {
    top: 52%;
    left: 50%;
    transform: translateX(-50%) !important;
}

html.ui-compact .equipment-slot[data-slot-type="ring_2"] {
    top: 72%;
    right: 4px;
}

html.ui-compact .equipment-slot[data-slot-type="weapon"] {
    top: 72%;
    left: 4px;
}

html.ui-compact .equipment-slot[data-slot-type="boots"] {
    top: 78%;
    left: 50%;
    bottom: auto;
    transform: translateX(-50%) !important;
}

html.ui-compact .equipment-slot::before {
    animation: none !important;
}

html.ui-compact #inventory-modal-content .inventory-grid-wrapper {
    min-width: 0;
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

html.ui-compact #inventory-modal-content:not(.has-third-panel) .inventory-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: start;
    grid-auto-rows: var(--inv-slot);
}

html.ui-compact #inventory-modal-content .inventory-grid {
    width: var(--inv-grid-w);
    max-width: 100%;
    grid-template-columns: repeat(4, var(--inv-slot));
    justify-content: start;
    margin-left: 0;
    margin-right: auto;
}

html.ui-compact #inventory-modal-content .inventory-slot {
    width: var(--inv-slot);
    height: var(--inv-slot);
    max-width: var(--inv-slot);
    max-height: var(--inv-slot);
    aspect-ratio: 1 / 1;
}

html.ui-compact #inventory-modal-content .inventory-slot .inventory-item {
    width: 100%;
    height: 100%;
}

html.ui-compact #inventory-modal-content .alchemy-controls {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 8px 4px 10px;
}

html.ui-compact #inventory-modal-content .alchemy-control-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    flex: 0 0 36px;
}

html.ui-compact:has(.game-modal.active) .action-bar-container,
html.ui-compact:has(.game-modal.active) #combat-action-bar,
html.ui-compact:has(.game-modal.active) .game-footer,
html.ui-compact.is-compact-assigning .action-bar-container,
html.ui-compact.is-compact-assigning #combat-action-bar,
html.ui-compact.is-compact-assigning .game-footer {
    z-index: 5400;
}

html.ui-compact .action-bar-slot.is-compact-drop-target,
html.ui-compact.is-compact-assigning .action-bar-slot,
html.ui-compact .is-compact-inv-drop {
    box-shadow: 0 0 0 2px rgba(242, 210, 132, 0.72);
}

html.ui-compact #inventory-context-menu,
html.ui-compact .ui-compact-sheet {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--compact-dock, 164px) !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(56vh, 420px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px 16px 0 0;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 13, 20, 0.96);
    border: 1px solid rgba(190, 169, 121, 0.34);
    box-shadow: 0 -12px 28px -16px rgba(0, 0, 0, 0.88);
    z-index: 5600 !important;
}

html.ui-compact .game-confirm-overlay {
    inset: 0 0 var(--compact-dock, 164px) 0;
    padding: 12px;
    align-items: flex-end;
}

html.ui-compact .game-confirm-dialog {
    width: 100%;
    max-width: none;
    max-height: min(70vh, 520px);
    display: flex;
    flex-direction: column;
}

html.ui-compact .game-confirm-body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

html.ui-compact .game-settings-panel {
    top: calc(44px + env(safe-area-inset-top, 0px));
    right: 8px;
    left: 8px;
    width: auto;
    max-height: calc(100vh - var(--compact-dock, 164px) - 56px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

html.ui-compact #inventory-context-menu .context-menu-item,
html.ui-compact .ui-compact-sheet button {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 16px;
}

html.ui-compact .ui-compact-sheet--row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    overflow: hidden;
}

html.ui-compact .ui-compact-sheet--row button {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    text-align: center;
    padding: 10px 8px;
    font-size: clamp(12px, 3.4vw, 15px);
    line-height: 1.2;
    white-space: nowrap;
}

html.ui-compact .ui-compact-assign-hint {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(var(--compact-dock, 164px) + 8px);
    z-index: 5500;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(12, 16, 24, 0.94);
    border: 1px solid rgba(190, 169, 121, 0.4);
    color: #fff3c7;
    font-size: 13px;
    text-align: center;
    pointer-events: none;
}

html.ui-compact .ui-compact-bar-ghost {
    position: fixed;
    width: 44px;
    height: 44px;
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
    pointer-events: none;
    opacity: 0.92;
    z-index: 5800;
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.8);
}

html.ui-compact .ui-compact-delete-zone {
    position: fixed;
    left: 8px;
    right: 8px;
    top: calc(var(--header-safe, 36px) + 8px);
    height: 56px;
    z-index: 5700;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px dashed rgba(220, 96, 96, 0.5);
    background: rgba(72, 16, 16, 0.4);
    color: #ffd4d4;
    font-size: 14px;
}

html.ui-compact .ui-compact-delete-zone.is-armed {
    border-style: solid;
    border-color: rgba(255, 132, 132, 0.88);
    background: rgba(128, 24, 24, 0.62);
}

html.ui-compact .ui-compact-combat-tabs {
    display: flex;
    gap: 6px;
    padding: 6px 8px 0;
    flex: 0 0 auto;
}

html.ui-compact .ui-compact-combat-tab {
    flex: 1 1 0;
    min-height: 40px;
    border: 1px solid rgba(190, 169, 121, 0.28);
    border-radius: 10px;
    background: rgba(8, 11, 18, 0.72);
    color: rgba(255, 244, 216, 0.78);
    font-size: 13px;
}

html.ui-compact .ui-compact-combat-tab.is-active {
    border-color: rgba(242, 210, 132, 0.6);
    color: rgba(255, 244, 216, 0.96);
    background: rgba(40, 32, 16, 0.88);
}

html.ui-compact #combat-overlay .combat-main-4col {
    display: block;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

html.ui-compact #combat-overlay .combat-col-chat,
html.ui-compact #combat-overlay .combat-col-allies,
html.ui-compact #combat-overlay .combat-col-enemies,
html.ui-compact #combat-overlay .combat-col-log {
    display: none;
    height: 100%;
}

html.ui-compact #combat-overlay[data-compact-combat="log"] .combat-col-log,
html.ui-compact #combat-overlay[data-compact-combat="allies"] .combat-col-allies,
html.ui-compact #combat-overlay[data-compact-combat="enemies"] .combat-col-enemies,
html.ui-compact #combat-overlay[data-compact-combat="chat"] .combat-col-chat {
    display: block;
}

html.ui-compact body.combat-mode,
html.ui-compact body.combat-mode .game-container {
    --footer-safe: calc(8px + env(safe-area-inset-bottom, 0px));
    --actionbar-safe: calc((2 * var(--bar-slot, 64px)) + var(--bar-gap, 10px) + 16px);
}

html.ui-compact .combat-header {
    height: auto;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 6px;
}

html.ui-compact .combat-header .combat-info {
    grid-column: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 92px);
}

html.ui-compact .combat-header .combat-controls {
    grid-column: auto;
    padding-right: 0;
}

html.ui-compact .combat-info h2,
html.ui-compact .combat-actions-status {
    font-size: 11px;
}

html.ui-compact .round-info {
    font-size: 11px;
    gap: 8px;
}

html.ui-compact .combat-title-rotator {
    min-height: 1em;
}

html.ui-compact #combat-overlay.combat-container {
    display: flex;
    flex-direction: column;
}

html.ui-compact .ui-compact-dock-btn .button-icon i {
    font-size: 16px;
    color: #f1e0b0;
}

html.ui-compact .combat-footer-menu {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    padding: 0;
    gap: 0;
    grid-template-columns: none;
}

html.ui-compact .combat-footer-menu .action-bar-wrapper,
html.ui-compact .combat-footer-menu .menu-buttons {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
}

/* Unfolded fold / wide compact: world dock stays a phone cluster.
   Combat three-pane lives in combat-compact.css. */
@media (min-width: 680px) {
    html.ui-compact .game-footer .menu-buttons,
    html.ui-compact .combat-footer-menu .menu-buttons {
        justify-content: center;
        overflow-x: visible;
    }
}

/* Unfolded Fold / tablet portrait: desktop-like street.
   Stage is the location art box; leftover gutters keep the header backdrop. */
@media (min-width: 600px) and (min-height: 600px) {
    html.ui-compact:not(.ui-compact-combat) .game-main {
        display: grid;
        grid-template-columns: minmax(200px, 26vw) minmax(0, 1fr) minmax(200px, 26vw);
        column-gap: 8px;
        position: relative;
        overflow: visible;
        background: transparent;
    }

    html.ui-compact:not(.ui-compact-combat) .game-content {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        align-self: stretch;
        width: var(--compact-stage-w, 100%) !important;
        max-width: 100% !important;
        min-width: 0;
        height: auto;
        overflow: hidden;
        clip-path: none;
        z-index: 1;
    }

    html.ui-compact:not(.ui-compact-combat) .player-portrait-hud {
        right: 0;
    }

    html.ui-compact:not(.ui-compact-combat) .npc-portrait-hud {
        left: 0;
    }

    html.ui-compact:not(.ui-compact-combat) .game-sidebar,
    html.ui-compact:not(.ui-compact-combat) .right-panel,
    html.ui-compact:not(.ui-compact-combat) .right-panel.is-hidden {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        width: auto;
        max-width: none;
        height: auto;
        max-height: none;
        margin: 8px 0 calc(var(--actionbar-safe) + var(--bar-air, 6px) + 8px);
        padding: 4px;
        transform: none !important;
        pointer-events: auto;
        z-index: 2;
        border-radius: 14px;
        border: 1px solid rgba(190, 169, 121, 0.32);
        background: rgba(8, 11, 18, 0.88);
    }

    html.ui-compact:not(.ui-compact-combat) .game-sidebar {
        grid-column: 1;
        grid-row: 1;
    }

    html.ui-compact:not(.ui-compact-combat) .right-panel,
    html.ui-compact:not(.ui-compact-combat) .right-panel.is-hidden {
        grid-column: 3;
        grid-row: 1;
    }

    html.ui-compact:not(.ui-compact-combat) .game-sidebar > .character-status {
        display: none;
    }

    html.ui-compact:not(.ui-compact-combat) .game-content > .central-panel-layout {
        position: absolute;
        top: 6px;
        left: 50% !important;
        right: auto !important;
        width: min(320px, calc(100% - 16px)) !important;
        max-width: calc(100% - 16px) !important;
        transform: translateX(-50%) !important;
        display: block;
        pointer-events: none;
        z-index: 50;
    }

    html.ui-compact:not(.ui-compact-combat) .game-content > .central-panel-layout > .central-panel {
        width: 100%;
        max-width: 100%;
        pointer-events: auto;
    }

    html.ui-compact:not(.ui-compact-combat) .game-content > .dialogue-window {
        position: absolute !important;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        transform: none;
    }

    html.ui-compact:not(.ui-compact-combat) .ui-compact-edge-btn--chat,
    html.ui-compact:not(.ui-compact-combat) .ui-compact-edge-btn--layer {
        display: none;
    }
}

html.ui-compact .quest-coach-tip,
html.ui-compact .combat-coach-tip {
    max-width: min(340px, 92vw);
    z-index: 13050;
}

html.ui-compact .combat-coach-tip.combat-coach-tip--wide {
    max-width: min(360px, 94vw);
}