/* =========================================
   RED HORIZON - MOBILE COMMAND UI FIX
   Ziel: kompakte Topbar, sauberer Radar, nutzbares Seitenmenü,
   bessere Panels/Belagerung auf Smartphones.
   ========================================= */

@media (max-width: 900px) {
    html,
    body {
        width: 100% !important;
        min-height: 100dvh !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body {
        display: block !important;
        background-attachment: fixed;
        position: static !important;
        touch-action: pan-y !important;
    }

    * {
        -webkit-tap-highlight-color: rgba(255, 100, 50, 0.18);
    }



    #authOverlay[style*="display: none"] {
        pointer-events: none !important;
    }

    body > div[style*="flex-grow: 1"],
    #mainContentArea,
    .view-section,
    .game-layout-inner {
        min-height: 0 !important;
    }

    /* ---------- Topbar: weniger hoch, Ressourcen als Swipe-Leiste ---------- */
    .top-bar-container {
        display: flex !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 2500 !important;
        width: 100% !important;
        background: rgba(5, 5, 5, 0.97) !important;
        border-bottom: 1px solid rgba(255, 100, 50, 0.35) !important;
    }

    .top-bar-container::after {
        bottom: 0 !important;
        opacity: 0.45 !important;
    }

    #vue-top-bar-header.top-bar-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        align-items: center !important;
        justify-content: normal !important;
        padding: 7px 8px 5px 8px !important;
    }

    #vue-top-bar-header > div:nth-child(1) {
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #vue-top-bar-header > div:nth-child(2) {
        display: none !important;
    }

    #vue-top-bar-header > div:nth-child(4) {
        min-width: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
    }

    #mobileMenuBtn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 9px !important;
        background: rgba(255, 100, 50, 0.08) !important;
        border: 1px solid rgba(255, 100, 50, 0.55) !important;
        color: var(--ui-highlight) !important;
        box-shadow: inset 0 0 12px rgba(0,0,0,0.7) !important;
    }

    .base-select {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 36px !important;
        font-size: 0.9rem !important;
        border-radius: 9px !important;
    }

    .score-module-container {
        width: auto !important;
        min-width: 92px !important;
        max-width: 112px !important;
        padding: 5px 7px !important;
        border-radius: 9px !important;
        box-sizing: border-box !important;
    }

    .score-title,
    .score-module-container .global-bonus-badge {
        display: none !important;
    }

    .score-display {
        justify-content: center !important;
        gap: 4px !important;
    }

    .score-icon {
        font-size: 0.95rem !important;
    }

    .score-value {
        font-size: 0.92rem !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }

    .top-bar-resources {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 7px !important;
        padding: 6px 8px 7px !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .top-bar-resources::-webkit-scrollbar {
        display: none;
    }

    .res-item-hud {
        flex: 0 0 126px !important;
        min-width: 126px !important;
        max-width: 126px !important;
        padding: 6px 8px !important;
        clip-path: none !important;
        border-radius: 9px !important;
        border-top-width: 1px !important;
        scroll-snap-align: start;
        box-sizing: border-box !important;
    }

    .res-item-hud.power {
        flex-basis: 136px !important;
        min-width: 136px !important;
        max-width: 136px !important;
    }

    .res-header {
        gap: 4px !important;
        font-size: 0.64rem !important;
        margin-bottom: 4px !important;
        letter-spacing: 0.3px !important;
    }

    .res-header span:first-child {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .res-rate {
        flex-shrink: 0 !important;
        font-size: 0.78em !important;
    }

    .res-values {
        text-align: left !important;
        font-size: 0.95rem !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin-bottom: 5px !important;
    }

    .res-item-hud:not(.power) .res-cap {
        display: inline !important;
        font-size: 0.78em !important;
        color: #777 !important;
    }

    .res-item-hud.power .res-cap {
        display: none !important;
    }

    .res-cap-full {
        display: none !important;
    }

    .res-cap-compact {
        display: inline !important;
    }

    .res-bar-container {
        height: 4px !important;
    }

    /* ---------- Gesamtlayout ---------- */
    body > div[style*="flex-grow: 1"] {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    #mainContentArea {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        overflow: visible !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }

    /* WICHTIG: Nicht pauschal ALLE .view-section sichtbar machen.
       Sonst kleben System-Konsole, Techtree, Wirtschaft, Rangliste usw.
       auf Mobile alle untereinander. Nur aktive Views dürfen sichtbar sein. */
    .view-section[style*="display: none"] {
        display: none !important;
    }

    .view-section[style*="display: block"],
    #view-main:not([style*="display: none"]) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .game-layout-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    .column-center,
    .column-right,
    .column-far-right,
    .scrollable-column {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .panel,
    #vue-dispatch-center,
    #vue-active-operations,
    #centerActionPanel {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px 0 !important;
        padding: 12px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .panel h2,
    .view-section h2 {
        font-size: 0.98rem !important;
        letter-spacing: 1px !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
        padding-bottom: 8px !important;
    }

    /* ---------- Offcanvas-Menü ---------- */
    .column-left {
        position: fixed !important;
        top: 0 !important;
        bottom: auto !important;
        left: calc(-1 * min(88vw, 340px) - 26px) !important;
        width: min(88vw, 340px) !important;
        max-width: 340px !important;
        height: 100dvh !important;
        padding: 70px 10px 18px 10px !important;
        z-index: 4100 !important;
        background: rgba(9, 4, 4, 0.985) !important;
        border-right: 1px solid rgba(255, 100, 50, 0.45) !important;
        box-shadow: 18px 0 38px rgba(0,0,0,0.86) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        transition: left 0.22s ease-out !important;
        box-sizing: border-box !important;
    }

    .column-left.open {
        left: 0 !important;
    }

    .column-left .panel {
        padding: 10px !important;
        margin-bottom: 10px !important;
        border-radius: 12px !important;
    }

    .v-menu-btn {
        min-height: 40px !important;
        padding: 10px 12px !important;
        display: flex !important;
        align-items: center !important;
        border-radius: 8px !important;
        font-size: 0.95rem !important;
    }

    .v-menu-header {
        margin: 12px 0 6px 0 !important;
        font-size: 0.76rem !important;
        letter-spacing: 1.4px !important;
    }

    .rh-mobile-backdrop {
        position: fixed;
        inset: 0;
        z-index: 4050;
        background: rgba(0, 0, 0, 0.58);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease-out;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .rh-mobile-backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }

    body.mobile-menu-open {
        /* Kein harter Body-Lock mehr: auf einigen Mobile-Browsern blieb dadurch
           vertikales Scrollen nach dem Schließen des Menüs blockiert. */
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* ---------- Radar / Karte ---------- */
    .map-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        padding: 10px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .radar-header {
        font-size: 0.98rem !important;
        line-height: 1.1 !important;
        margin-bottom: 9px !important;
        letter-spacing: 1.5px !important;
    }

    .radar-target-panel {
        display: grid !important;
        grid-template-columns: auto minmax(58px, 1fr) minmax(58px, 1fr) auto !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        padding: 8px !important;
        margin-bottom: 10px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .radar-target-panel > span {
        display: none !important;
    }

    .radar-target-panel button {
        min-height: 34px !important;
        padding: 6px 8px !important;
        font-size: 0.76rem !important;
        white-space: nowrap !important;
    }

    .jump-input {
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        box-sizing: border-box !important;
        font-size: 0.9rem !important;
    }

    #strategyMap {
        width: min(100%, calc(100vw - 36px)) !important;
        height: min(calc(100vw - 36px), 58dvh) !important;
        min-height: 292px !important;
        max-height: 520px !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 auto !important;
        padding: 2px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        touch-action: pan-y !important;
    }

    .map-tile {
        font-size: 7px !important;
        line-height: 1 !important;
    }

    .map-tile.base,
    .map-tile.camp,
    .map-tile.node,
    .map-tile.explored {
        font-size: 7px !important;
    }

    .map-container > div[style*="border-top"] {
        padding: 10px 4px 0 4px !important;
        margin-top: 10px !important;
        gap: 8px !important;
    }

    #radarStatusText {
        font-size: 0.72rem !important;
        text-align: right !important;
    }

    /* ---------- Center-Menüs / Karten ---------- */
    #centerActionContent {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        margin: 10px 0 0 0 !important;
        max-width: 100% !important;
    }

    #centerActionContent > div,
    .tech-card,
    .building-card,
    .unit-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    table {
        font-size: 0.9rem !important;
    }

    input,
    select,
    button,
    textarea {
        font-size: 16px;
    }

    /* ---------- Kommandozentrale / Operationszentrale ---------- */
    .coord-display {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .coord-input-group {
        min-width: 0 !important;
    }

    .coord-field,
    .unit-qty-input,
    .tech-input,
    .mission-select,
    .btn-launch {
        min-height: 38px !important;
        box-sizing: border-box !important;
    }

    .dispatch-terminal details > div,
    #vue-active-operations .ops-group-container,
    .fleet-card {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .dispatch-unit-item {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
    }

    .unit-qty-input {
        width: 76px !important;
    }

    .mission-select,
    .btn-launch {
        width: 100% !important;
    }

    .fleet-card {
        padding: 10px !important;
    }

    .ops-group-header {
        gap: 8px !important;
        font-size: 0.78rem !important;
    }

    /* ---------- Belagerungsmenü ---------- */
    .siege-command-screen {
        padding: 0 !important;
    }

    .siege-hero {
        padding: 14px !important;
        gap: 12px !important;
        border-radius: 14px !important;
        margin-bottom: 12px !important;
    }

    .siege-kicker {
        font-size: 0.68rem !important;
        letter-spacing: 1.4px !important;
    }

    .siege-hero h2 {
        font-size: 1.25rem !important;
        letter-spacing: 1px !important;
    }

    .siege-hero p {
        font-size: 0.92rem !important;
    }

    .siege-hero-status {
        min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        padding: 10px !important;
        gap: 4px 8px !important;
    }

    .siege-hero-status span {
        font-size: 0.65rem !important;
    }

    .siege-hero-status strong {
        font-size: 0.88rem !important;
        margin-bottom: 5px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .siege-command-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .siege-card {
        padding: 12px !important;
        border-radius: 14px !important;
    }

    .siege-card-head {
        gap: 8px !important;
    }

    .siege-card-head h3 {
        font-size: 0.86rem !important;
    }

    .siege-card-head p {
        font-size: 0.76rem !important;
    }

    .siege-unit-list,
    .siege-ops-list,
    .siege-unit-list-wide {
        max-height: 42dvh !important;
    }

    .siege-unit-list-wide {
        grid-template-columns: 1fr !important;
    }

    .siege-op-actions {
        grid-template-columns: 1fr 1fr 1fr !important;
    }

    /* ---------- System-Screens: nur ein Screen sichtbar, Kategorie als eigener Screen ---------- */
    #view-system[style*="display: block"],
    #view-tech[style*="display: block"],
    #view-eco[style*="display: block"],
    #view-highscores[style*="display: block"],
    #view-reports[style*="display: block"],
    #view-settings[style*="display: block"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    #view-tech .panel,
    #view-eco .panel,
    #view-highscores .panel,
    #view-settings .panel {
        width: calc(100% - 12px) !important;
        max-width: calc(100% - 12px) !important;
        margin: 0 auto 18px auto !important;
        box-sizing: border-box !important;
    }

    /* Nachrichten-Terminal auf Mobile nicht als breite Desktop-Spalten erzwingen */
    #view-reports > .panel {
        width: calc(100% - 12px) !important;
        max-width: calc(100% - 12px) !important;
        height: auto !important;
        min-height: 70dvh !important;
        margin: 0 auto 18px auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
    }

    #view-reports > .panel > div {
        width: 100% !important;
        max-width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #222 !important;
        box-sizing: border-box !important;
    }

    #reportList {
        max-height: 42dvh !important;
    }

    #reportDetail {
        min-height: 180px !important;
        max-height: none !important;
    }

}

@media (max-width: 480px) {
    #mainContentArea {
        padding: 6px !important;
    }

    .res-item-hud {
        flex-basis: 118px !important;
        min-width: 118px !important;
        max-width: 118px !important;
    }

    .res-item-hud.power {
        flex-basis: 128px !important;
        min-width: 128px !important;
        max-width: 128px !important;
    }

    .score-module-container {
        min-width: 84px !important;
        max-width: 96px !important;
    }

    .score-value {
        font-size: 0.82rem !important;
    }

    #strategyMap {
        width: min(100%, calc(100vw - 28px)) !important;
        height: min(calc(100vw - 28px), 54dvh) !important;
        min-height: 272px !important;
    }

    .radar-target-panel {
        grid-template-columns: 1fr 1fr !important;
    }

    .radar-target-panel button:first-child {
        grid-column: 1;
    }

    .radar-target-panel button:last-child {
        grid-column: 2;
    }

    .dispatch-unit-item,
    .siege-unit-row,
    .siege-op-header,
    .siege-card-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .siege-unit-controls {
        width: 100% !important;
    }

    .siege-unit-controls input {
        flex: 1 !important;
        width: auto !important;
    }

    .siege-op-actions {
        grid-template-columns: 1fr !important;
    }

    .siege-hero-status {
        grid-template-columns: 1fr !important;
    }

    .btn-launch,
    .siege-primary-btn {
        letter-spacing: 1px !important;
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    .top-bar-resources {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .res-item-hud {
        flex-basis: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
        padding: 4px 6px !important;
    }

    .res-values {
        margin-bottom: 2px !important;
    }

    #strategyMap {
        width: min(100%, 72dvh) !important;
        height: min(100%, 72dvh) !important;
        min-height: 230px !important;
        max-height: 72dvh !important;
    }

    .column-left {
        width: min(72vw, 330px) !important;
        left: calc(-1 * min(72vw, 330px) - 26px) !important;
        padding-top: 58px !important;
    }

    .column-left.open {
        left: 0 !important;
    }
}

/* =========================================
   MOBILE COMMANDER / HQ UPGRADE RESTORE
   Fix: Der Commander-Block wurde in der kompakten Mobile-Topbar ausgeblendet.
   Auf Mobile erscheint er jetzt als kompakte zweite Zeile unter Base-Auswahl/Score.
   ========================================= */
@media (max-width: 900px) {
    #vue-top-bar-header.top-bar-header {
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
    }

    #vue-top-bar-header > div:nth-child(2) {
        display: flex !important;
        grid-column: 1 / -1 !important;
        order: 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        justify-content: stretch !important;
        margin-top: 2px !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-container {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 6px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 8px 10px !important;
        border-left-width: 3px !important;
        border-radius: 10px !important;
        clip-path: none !important;
        overflow: hidden !important;
        background: linear-gradient(135deg, rgba(15, 12, 4, 0.96), rgba(5, 5, 5, 0.98)) !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-badge-wrapper {
        width: 42px !important;
        min-width: 42px !important;
        align-self: center !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-badge {
        width: 36px !important;
        height: 40px !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-badge::before {
        width: 32px !important;
        height: 36px !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-badge span {
        font-size: 1.05em !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-details {
        min-width: 0 !important;
        padding-right: 0 !important;
        border-right: 0 !important;
        align-self: center !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-name {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.88rem !important;
        letter-spacing: 1px !important;
        line-height: 1.15 !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-rank {
        font-size: 0.62rem !important;
        letter-spacing: 2px !important;
        line-height: 1.1 !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-action {
        grid-column: 1 / -1 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 2px !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-cost {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        min-width: 0 !important;
        font-size: 0.72rem !important;
        line-height: 1.1 !important;
        letter-spacing: 0.5px !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-cost strong {
        max-width: 48vw !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #vue-top-bar-header > div:nth-child(2) .btn-hq-upgrade {
        flex: 0 0 auto !important;
        min-height: 34px !important;
        max-width: 46vw !important;
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        clip-path: none !important;
        border-radius: 7px !important;
    }
}

@media (max-width: 480px) {
    #vue-top-bar-header > div:nth-child(2) .commander-action {
        gap: 6px !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-cost {
        font-size: 0.66rem !important;
    }

    #vue-top-bar-header > div:nth-child(2) .btn-hq-upgrade {
        max-width: 43vw !important;
        min-height: 32px !important;
        padding: 6px 8px !important;
        font-size: 0.66rem !important;
    }
}

/* ---------- Redeploy / Camp-Logistik: mobile scroll fix ---------- */
@media (max-width: 900px) {
    #vue-redeploy-overlay .redeploy-modal-overlay {
        align-items: flex-start !important;
        justify-content: center !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: calc(env(safe-area-inset-top, 0px) + 10px) 10px calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
    }

    #vue-redeploy-overlay .redeploy-panel {
        width: min(450px, 100%) !important;
        max-width: 100% !important;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        box-sizing: border-box !important;
        padding: 14px !important;
        border-radius: 10px !important;
    }

    #vue-redeploy-overlay .redeploy-panel h2 {
        font-size: 1.05rem !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
    }

    #vue-redeploy-overlay .redeploy-units-list {
        max-height: 32dvh !important;
        min-height: 96px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior: contain !important;
    }

    #vue-redeploy-overlay .dispatch-unit-item {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 78px !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #vue-redeploy-overlay .unit-qty-input,
    #vue-redeploy-overlay .tech-input,
    #vue-redeploy-overlay .coord-field,
    #vue-redeploy-overlay select {
        min-height: 38px !important;
        font-size: 16px !important;
    }

    #vue-redeploy-overlay .redeploy-cargo-panel > div {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #vue-redeploy-overlay .redeploy-cargo-panel .coord-input-group[style*="grid-column"] {
        grid-column: auto !important;
    }

    #vue-redeploy-overlay .coord-display {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    #vue-redeploy-overlay .coord-display > .coord-input-group {
        width: 100% !important;
    }

    #vue-redeploy-overlay .coord-display select {
        width: 100% !important;
    }

    #vue-redeploy-overlay .redeploy-actions {
        position: sticky !important;
        bottom: 0 !important;
        background: linear-gradient(to top, #0a0a0a 75%, rgba(10, 10, 10, 0)) !important;
        padding-top: 12px !important;
        margin-top: 4px !important;
        z-index: 2 !important;
    }
}

@media (max-width: 420px) {
    #vue-redeploy-overlay .redeploy-panel {
        padding: 12px !important;
    }

    #vue-redeploy-overlay .redeploy-actions {
        flex-direction: column !important;
    }

    #vue-redeploy-overlay .redeploy-actions button {
        width: 100% !important;
        min-height: 42px !important;
    }
}

/* =========================================
   MOBILE UI CLEANUP / SCROLL RESTORE
   Ziel: keine abgeschnittenen Panels, sauberes Seiten-Scrolling
   und ein kompaktes Commander-/Prestige-Badge auf Smartphones.
   ========================================= */
@media (max-width: 900px) {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-gutter: stable;
        -webkit-overflow-scrolling: touch !important;
    }

    body {
        min-height: 100svh !important;
    }

    #mainContentArea {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 22px) !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    .game-layout-inner,
    .column-center,
    .column-right,
    .column-far-right,
    .scrollable-column,
    .view-section,
    .panel,
    #centerActionPanel,
    #vue-dispatch-center,
    #vue-active-operations {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    #centerActionContent,
    .dispatch-terminal,
    .queue-accordion,
    .queue-accordion-body,
    .ops-accordion-wrap,
    .legacy-project-panel,
    .legacy-active-project,
    .legacy-project-grid,
    .tech-card,
    .building-card,
    .unit-card,
    .fleet-card {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere;
    }

    .queue-accordion-body,
    .ops-accordion-body,
    .command-accordion-body,
    .cargo-accordion-body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: auto !important;
        overscroll-behavior-x: contain !important;
        touch-action: pan-y !important;
    }

    #reportList,
    .siege-unit-list,
    .siege-unit-list-wide,
    .siege-ops-list {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
    }

    .command-accordion-body {
        max-height: min(42dvh, 360px) !important;
    }

    .cargo-accordion-body {
        max-height: none !important;
    }

    .ops-accordion-body {
        max-height: min(46dvh, 420px) !important;
    }

    #centerActionPanel {
        max-height: none !important;
    }

    #centerActionContent {
        padding-bottom: 8px !important;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .tooltip::after,
    .tooltip::before {
        max-width: calc(100vw - 28px) !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Die Karte selbst muss freie 2D-Gesten behalten; Scrollen erfolgt außerhalb. */
    #strategyMap {
        touch-action: none !important;
        overscroll-behavior: contain !important;
    }

    /* Commander-Badge: Prestige-/Legacy-Form darf die Topbar nicht mehr aufblasen. */
    #vue-top-bar-header > div:nth-child(2) .commander-container {
        grid-template-columns: 34px minmax(0, 1fr) 34px !important;
        grid-template-rows: auto auto !important;
        gap: 4px 8px !important;
        align-items: center !important;
        padding: 6px 8px !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-badge-wrapper {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 34px !important;
        min-width: 34px !important;
        filter: drop-shadow(0 0 3px var(--ui-highlight)) !important;
        animation: none !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-badge {
        width: 30px !important;
        height: 34px !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-badge::before {
        width: 26px !important;
        height: 30px !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-badge span {
        font-size: 0.9rem !important;
        line-height: 1 !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-details {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        align-self: center !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-path-display {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        align-self: center !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        padding: 0 !important;
        filter: drop-shadow(0 3px 5px rgba(0,0,0,0.55)) !important;
        transform: none !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-path-display::before {
        inset: 5px !important;
        filter: blur(5px) !important;
        opacity: 0.28 !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-path-shape {
        width: 28px !important;
        height: 30px !important;
        flex: 0 0 28px !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-path-shape::before {
        inset: 3px !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-path-shape::after {
        inset: 6px !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-path-level {
        font-size: 0.72rem !important;
        transform: translateY(2px) !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-path-glyph {
        top: 4px !important;
        right: 5px !important;
        font-size: 0.52rem !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-action {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        margin-top: 0 !important;
        padding-top: 5px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
}

@media (max-width: 480px) {
    #vue-top-bar-header > div:nth-child(2) .commander-container {
        grid-template-columns: 30px minmax(0, 1fr) 30px !important;
        padding: 5px 7px !important;
        gap: 3px 7px !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-badge-wrapper {
        width: 30px !important;
        min-width: 30px !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-badge {
        width: 26px !important;
        height: 30px !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-badge::before {
        width: 22px !important;
        height: 26px !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-name {
        font-size: 0.78rem !important;
        letter-spacing: 0.5px !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-rank {
        font-size: 0.56rem !important;
        letter-spacing: 1px !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-path-display {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-path-shape {
        width: 24px !important;
        height: 26px !important;
        flex-basis: 24px !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-path-level {
        font-size: 0.64rem !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-path-glyph {
        top: 3px !important;
        right: 4px !important;
        font-size: 0.46rem !important;
    }

    #vue-top-bar-header > div:nth-child(2) .commander-action {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 6px !important;
    }
}

/* =========================================
   HANDELSPOSTEN MOBILE/FIT CLEANUP
   Ziel: keine überbreiten Handelsformulare, Listen oder Angebotskarten.
   Nur Layout/Overflow, keine Spiellogik.
   ========================================= */
.tradepost-screen,
.tradepost-screen * {
    box-sizing: border-box;
}

.tradepost-screen {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.tradepost-card,
.tradepost-offer-card,
.tradepost-resource-box,
.tradepost-scroll-list,
.tradepost-stat-grid,
.tradepost-forms-grid,
.tradepost-offers-grid,
.tradepost-form-grid,
.tradepost-offer-exchange,
.tradepost-scrap-row {
    min-width: 0;
    max-width: 100%;
}

.tradepost-card,
.tradepost-offer-card,
.tradepost-resource-box {
    overflow-wrap: anywhere;
}

.tradepost-resource-box strong,
.tradepost-own-offer > div,
.tradepost-public-offer > div,
.tradepost-scroll-list {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tradepost-scroll-list {
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.tradepost-action-btn {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .tradepost-screen {
        gap: 12px !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    .tradepost-hero {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }

    .tradepost-hero h2 {
        font-size: 1.08rem !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere !important;
    }

    .tradepost-hero p {
        max-width: 100% !important;
        font-size: 0.84rem !important;
        line-height: 1.35 !important;
    }

    .tradepost-stat-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        justify-content: stretch !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .tradepost-stat-grid > div {
        min-width: 0 !important;
        width: 100% !important;
        padding: 8px !important;
        overflow: hidden !important;
    }

    .tradepost-stat-grid > div > div:last-child {
        font-size: 0.86rem !important;
        line-height: 1.15 !important;
        white-space: normal !important;
    }

    .tradepost-forms-grid,
    .tradepost-offers-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 12px !important;
    }

    .tradepost-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    .tradepost-form-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .tradepost-form-grid > div,
    .tradepost-card input,
    .tradepost-card select,
    .tradepost-card button {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .tradepost-offer-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        overflow: hidden !important;
    }

    .tradepost-offer-exchange {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .tradepost-offer-exchange .tradepost-action-btn {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 38px !important;
    }

    .tradepost-own-offer {
        align-items: stretch !important;
    }

    .tradepost-own-offer .tradepost-action-btn {
        width: 100% !important;
        min-height: 38px !important;
    }

    .tradepost-scroll-list {
        max-height: min(42dvh, 420px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 2px !important;
        touch-action: pan-y !important;
    }

    .tradepost-scrap-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(92px, 0.7fr) !important;
        gap: 8px !important;
    }

    .tradepost-scrap-row .tradepost-action-btn {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 38px !important;
    }
}

@media (max-width: 520px) {
    .tradepost-stat-grid,
    .tradepost-form-grid {
        grid-template-columns: 1fr !important;
    }

    .tradepost-offer-exchange {
        grid-template-columns: 1fr !important;
    }

    .tradepost-offer-exchange > div:nth-child(2) {
        display: none !important;
    }

    .tradepost-resource-box {
        padding: 9px !important;
    }

    .tradepost-resource-box strong {
        display: block !important;
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
    }

    .tradepost-scrap-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    .tradepost-scrap-row input,
    .tradepost-action-btn {
        width: 100% !important;
        min-height: 40px !important;
    }
}

/* Stabiler TopBar-Eventblock mobil: als eigene TopBar-Zeile, nicht mehr schwebend. */
@media (max-width: 900px) {
    #vue-top-bar-header > .topbar-event-host {
        grid-column: 1 / -1 !important;
        order: 2 !important;
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        transform: none !important;
        justify-content: stretch !important;
        flex: none !important;
    }

    #vue-top-bar-header > .topbar-event-host[hidden] {
        display: none !important;
    }

    .topbar-event-host .topbar-event-info {
        min-width: 0 !important;
        width: 100% !important;
        height: 36px !important;
        padding: 4px 9px !important;
    }

    .topbar-event-host .topbar-event-kicker {
        font-size: 0.52em !important;
        letter-spacing: 1px !important;
        text-align: left !important;
    }

    .topbar-event-host .topbar-event-name {
        font-size: 0.72em !important;
        max-width: 58vw !important;
    }

    .topbar-event-host .topbar-event-countdown small {
        display: none !important;
    }

    .topbar-event-host .topbar-event-timer {
        font-size: 0.78em !important;
    }
}

@media (max-width: 900px) {
    .res-prestige-buff-strip {
        flex: 0 0 auto !important;
        min-width: max-content;
        padding: 4px 8px;
        font-size: 0.66rem;
        scroll-snap-align: start;
    }

    .res-prestige-buff-title {
        display: none;
    }
}

@media (max-width: 768px) {
    .score-active-boni,
    .commander-cost-note {
        display: none !important;
    }

    .score-module-container.has-active-boni {
        min-width: 92px !important;
        max-width: 112px !important;
    }
}

/* Kompakter Topbar-Fix: einfacher Basis-Dropdown und schmalerer Score-Container */
@media (max-width: 900px) {
    .topbar-left-cluster {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 8px !important;
    }

    .base-select-topbar {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 36px !important;
        padding: 6px 10px !important;
        font-size: 0.9rem !important;
    }

    .score-module-container,
    .score-module-container.has-active-boni {
        min-width: 86px !important;
        max-width: 160px !important;
        padding: 5px 7px !important;
    }

    .score-details.compact-score .score-display {
        gap: 5px !important;
    }

    .score-details.compact-score .score-value {
        font-size: 1.08rem !important;
    }

    .score-active-boni {
        margin-top: 4px !important;
        padding-top: 4px !important;
    }

    .score-active-boni-title {
        display: none !important;
    }
}