/* A compact battlefield HUD. Desktop rules remain intact until the mobile
 * controller adds this class; sheets are explicitly opened by touch controls. */
body:not(.mobile-ui) .mobile-help-only { display: none; }
body.mobile-ui {
  --mobile-topbar-height: calc(96px + env(safe-area-inset-top, 0px));
  --mobile-controls-height: calc(80px + env(safe-area-inset-bottom, 0px));
  --mobile-sheet-bottom: calc(var(--mobile-controls-height) + 6px);
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}
body.mobile-ui.mobile-more-open { --mobile-controls-height: calc(180px + env(safe-area-inset-bottom, 0px)); }
body.mobile-ui #battlefield { touch-action: none; -webkit-user-select: none; user-select: none; }
body.mobile-ui :is(button, input, select, textarea) { touch-action: manipulation; }
body.mobile-ui button:focus-visible { outline: 2px solid #f0d093; outline-offset: -3px; }
body.mobile-ui :is(input, select, textarea) { font-size: 16px; }

body.mobile-ui .topbar {
  top: 0; left: 0; right: 0; height: var(--mobile-topbar-height);
  display: grid; grid-template-columns: 52px minmax(58px, 1fr) auto;
  grid-template-rows: 40px 44px; gap: 3px 5px;
  padding: calc(env(safe-area-inset-top, 0px) + 3px) max(7px, env(safe-area-inset-right, 0px)) 5px max(7px, env(safe-area-inset-left, 0px));
  align-items: center; overflow: hidden;
}
body.mobile-ui .resources, body.mobile-ui.has-data-resource .resources {
  grid-column: 1 / -1; grid-row: 1; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; width: 100%;
}
body.mobile-ui.has-data-resource .resources, body.mobile-ui .topbar.has-data-resource .resources { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.mobile-ui .resource { min-width: 0; gap: 5px; justify-content: center; }
body.mobile-ui .resource > div { min-width: 0; }
body.mobile-ui .resource small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 8px; letter-spacing: 0; }
body.mobile-ui .resource strong { font-size: 18px; letter-spacing: -.5px; }
body.mobile-ui .resource-symbol { width: 16px; flex: 0 0 16px; font-size: 20px; }
body.mobile-ui .resource-symbol .resource-icon { width: 17px; height: 17px; }
body.mobile-ui .resource-rate { display: none; }
body.mobile-ui .brand { grid-column: 1; grid-row: 2; width: 52px; height: 44px; display: grid; place-content: center; border: 1px solid #596f67; background: #263a3c; }
body.mobile-ui .brand > * { display: none; }
body.mobile-ui .brand::after { content: 'МЕНЮ'; color: #dfd5b6; font-size: 10px; font-weight: 650; letter-spacing: .3px; }
body.mobile-ui .power-panel { grid-column: 2; grid-row: 2; min-width: 0; padding: 0 3px; border: 0; }
body.mobile-ui .power-panel > span { font-size: 7px; }
body.mobile-ui .power-panel strong { font-size: 12px; }
body.mobile-ui .power-panel small { font-size: 8px; }
body.mobile-ui .topbar .top-actions { grid-column: 3; grid-row: 2; display: flex; gap: 3px; }
body.mobile-ui .topbar .top-actions .icon-button { width: 44px; height: 44px; flex: 0 0 44px; }
body.mobile-ui :is(.mission-clock, #admin-button, .controls-strip, .field-info, #energy-gauge, .command-scroll) { display: none !important; }
body.mobile-ui .topbar.has-boost-report { padding-bottom: 5px; }
body.mobile-ui #production-boost-report { position: fixed; top: var(--mobile-topbar-height); height: auto; min-height: 32px; max-height: 65px; font-size: 10px; gap: 5px; padding: 6px 45px 6px 8px; }
body.mobile-ui #production-boost-dismiss { width: 36px; height: 32px; right: 3px; }

body.mobile-ui #mobile-controls {
  position: fixed; z-index: 22; left: 0; right: 0; bottom: 0;
  display: grid; gap: 5px; min-height: var(--mobile-controls-height);
  padding: 5px max(7px, env(safe-area-inset-right, 0px)) calc(5px + env(safe-area-inset-bottom, 0px)) max(7px, env(safe-area-inset-left, 0px));
  color: #eceddf; background: #12262df5; border-top: 1px solid #6d8277;
  box-shadow: 0 -5px 16px #0310145c; touch-action: manipulation;
}
body.mobile-ui #mobile-controls[hidden], body.mobile-ui #mobile-controls [hidden] { display: none !important; }
body.mobile-ui .mobile-controls-hint { margin: 0; min-height: 16px; color: #b5ccbf; font: 10px/1.45 'Segoe UI', sans-serif; text-align: center; overflow-wrap: anywhere; }
body.mobile-ui .mobile-controls-main, body.mobile-ui .mobile-controls-secondary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
body.mobile-ui #mobile-controls button { min-width: 0; min-height: 44px; padding: 7px 4px; color: #dce9dc; border: 1px solid #58756d; border-radius: 5px; background: #243e42; font: 600 11px/1.2 'Segoe UI', sans-serif; }
body.mobile-ui #mobile-controls button[aria-pressed='true'], body.mobile-ui #mobile-controls button[aria-expanded='true'] { color: #ffdfa1; border-color: #c6b079; background: #4a4633; }
body.mobile-ui #mobile-controls button:disabled { opacity: .42; }
body.mobile-ui #mobile-cancel { color: #efbaa0; border-color: #8a685b; }
body.mobile-ui .mobile-controls-secondary { padding-top: 5px; border-top: 1px solid #46645d; }

/* The dock itself never masks the map while closed. Its independent details
 * panels remain fixed children so they can be opened without the build sheet. */
body.mobile-ui .command-dock,
body.mobile-ui .command-dock.is-science-dock,
body.mobile-ui .command-dock.is-tactics-dock {
  position: fixed; z-index: 15; left: max(6px, env(safe-area-inset-left, 0px)); right: max(6px, env(safe-area-inset-right, 0px));
  top: auto; bottom: var(--mobile-sheet-bottom); display: block; width: auto;
  height: 0 !important; min-height: 0 !important; max-height: none; padding: 0; border: 0; overflow: visible; pointer-events: none;
}
body.mobile-ui .command-dock > .commands-panel { display: none; }
body.mobile-ui.mobile-panel-open .command-dock,
body.mobile-ui.mobile-panel-open .command-dock.is-science-dock,
body.mobile-ui.mobile-panel-open .command-dock.is-tactics-dock { height: auto !important; max-height: min(45dvh, 380px); overflow: auto; overscroll-behavior: contain; pointer-events: auto; }
body.mobile-ui.mobile-panel-open .command-dock > .commands-panel { display: block; padding: 0 8px 7px; border: 1px solid #81917d; border-top: 2px solid #ccb27c; }
body.mobile-ui .command-dock .command-tabs { position: sticky; top: 0; z-index: 2; height: 44px; gap: 5px; padding: 0; background: #17292f; }
body.mobile-ui .command-dock .command-tabs > button { flex: 0 0 auto; min-height: 44px; min-width: 65px; padding: 0 8px; font-size: 11px; letter-spacing: 0; }
body.mobile-ui .command-dock .command-tabs kbd { display: none; }
body.mobile-ui .command-dock .command-tabs > button:last-child { margin-left: 0; }
body.mobile-ui .command-dock .command-groups { height: 44px; gap: 3px; touch-action: pan-x pan-y; }
body.mobile-ui .command-dock .command-groups > button { min-height: 44px; padding: 6px 11px; font-size: 11px; }
body.mobile-ui .command-dock .command-groups button small { font-size: 10px; }
body.mobile-ui .command-dock .command-grid,
body.mobile-ui .command-dock.is-science-dock .commands-panel.is-research .command-grid,
body.mobile-ui .command-dock.is-tactics-dock .command-grid {
  display: flex !important; flex-wrap: nowrap; gap: 7px; height: 136px !important; min-height: 0;
  padding: 7px 0; grid-template-columns: none; grid-template-rows: none; grid-auto-rows: auto;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; touch-action: pan-x pan-y; align-items: stretch;
}
body.mobile-ui .command-dock .command-grid .command-card { flex: 0 0 134px; width: 134px; height: 120px !important; min-height: 120px; padding: 7px; }
body.mobile-ui .command-dock .command-name { min-height: 30px; font-size: 12px !important; line-height: 1.25; }
body.mobile-ui .command-dock .command-cost { font-size: 12px !important; gap: 6px; }
body.mobile-ui .command-dock .command-number { display: none; }
body.mobile-ui .command-dock .command-icon { height: 40px; }
body.mobile-ui .command-dock .command-icon .sprite-icon { height: 40px; width: 62px; }
body.mobile-ui .command-dock .command-context { white-space: normal; height: auto; max-height: 42px; margin-top: 4px; padding-top: 5px; font-size: 10px; line-height: 1.35; }
body.mobile-ui .command-dock .producer-context, body.mobile-ui .command-dock :is(.tactical-context, .science-context) { min-height: 24px; height: auto; padding: 4px 0; font-size: 10px; }
body.mobile-ui .command-dock .science-cancellations { max-height: 104px; }
body.mobile-ui .command-dock .science-cancel-order { min-height: 44px; font-size: 11px; }
body.mobile-ui .command-dock.is-science-dock .commands-panel.is-research .command-grid { height: 174px !important; }
body.mobile-ui .command-dock.is-science-dock .command-grid .research-card { flex-basis: 166px; width: 166px; height: 158px !important; min-height: 158px; }
body.mobile-ui .command-dock .science-card-art { flex-basis: 33px; }
body.mobile-ui .command-dock .research-card .command-icon { top: 3px; height: 30px; }
body.mobile-ui .command-dock .research-card .command-icon .sprite-icon { height: 30px; }
body.mobile-ui .command-dock .research-effect { font-size: 9px !important; }
body.mobile-ui .command-dock .science-state, body.mobile-ui .command-dock .research-time { font-size: 9px !important; }
body.mobile-ui .command-dock .tactical-card { padding: 0 !important; }
body.mobile-ui .command-dock .tactical-art { height: 32px !important; }
body.mobile-ui .command-dock .tactical-body { padding: 5px 6px; }
body.mobile-ui .command-dock .tactical-metrics, body.mobile-ui .command-dock .tactical-metrics b { font-size: 9px !important; }
body.mobile-ui .command-dock .tactical-state, body.mobile-ui .command-dock .tactical-reset { font-size: 8px !important; }

body.mobile-ui .command-dock .radar-panel,
body.mobile-ui .command-dock .selection-panel,
body.mobile-ui.has-selection .command-dock .selection-panel {
  display: none !important; position: fixed !important; z-index: 18; top: auto !important;
  bottom: var(--mobile-sheet-bottom) !important; left: max(7px, env(safe-area-inset-left, 0px)) !important; right: max(7px, env(safe-area-inset-right, 0px)) !important;
  height: auto !important; width: auto !important; max-height: min(43dvh, 340px) !important;
  align-self: auto; margin: 0; overflow-y: auto; pointer-events: auto; overscroll-behavior: contain;
}
body.mobile-ui.mobile-map-open .command-dock .radar-panel { display: block !important; width: min(330px, calc(100vw - 14px)) !important; margin-left: auto; }
body.mobile-ui.mobile-map-open .radar-panel canvas { width: 100%; height: min(29dvh, 230px); touch-action: none; margin-top: 4px; }
body.mobile-ui.mobile-selection-open .command-dock .selection-panel { display: flex !important; flex-direction: column; }
body.mobile-ui .command-dock :is(.radar-panel, .selection-panel) .panel-title { height: 36px; flex: 0 0 36px; font-size: 10px; }
body.mobile-ui #home-button { min-height: 36px; min-width: 72px; font-size: 11px; }
body.mobile-ui .command-dock .selection-panel #selection-content { position: static !important; display: block !important; height: auto !important; min-height: 0; max-height: none; padding: 10px !important; overflow: visible; }
body.mobile-ui .selection-heading h3 { font-size: 15px; }
body.mobile-ui .selection-heading small { font-size: 10px; }
body.mobile-ui .health-row small { font-size: 11px; }
body.mobile-ui .selection-description, body.mobile-ui .selection-order { font-size: 12px; }
body.mobile-ui .selection-panel :is(.repair-control, .hq-upgrade-control, .mcv-deploy-control, .nuclear-launch-control) { position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: auto !important; margin: 0 9px 9px !important; }
body.mobile-ui .selection-panel :is(.repair-control, .hq-upgrade-control, .mcv-deploy-control, .nuclear-launch-control) button { min-height: 44px; }
body.mobile-ui .selection-panel .repair-control strong { font-size: 12px; }
body.mobile-ui .selection-panel .repair-control small { font-size: 10px; }
body.mobile-ui .selection-panel .production-queue { position: static !important; max-width: none !important; width: auto; margin-top: 9px !important; }
body.mobile-ui .selection-panel .queue-item { flex-basis: 104px !important; width: 104px !important; height: 72px !important; grid-template-columns: minmax(0, 1fr) 46px; }
body.mobile-ui .selection-panel .queue-item :is(.sprite-icon, svg) { grid-column: 1; width: 42px; height: 36px; }
body.mobile-ui .selection-panel .queue-cancel { width: 44px; height: 44px; top: 12px; right: 1px; font-size: 22px; }
body.mobile-ui .selection-panel .queue-time { left: 4px; right: auto; bottom: 4px; font-size: 11px; }
body.mobile-ui .selection-panel .queue-slot { font-size: 9px; }
body.mobile-ui .garrison-slot, body.mobile-ui .garrison-control > button { min-width: 44px; min-height: 44px; }

body.mobile-ui :is(.campaign-objectives, .frontier-panel) { display: none !important; }
body.mobile-ui.mobile-objectives-open .campaign-objectives:not([hidden]) { display: block !important; top: calc(var(--mobile-topbar-height) + 6px) !important; right: 7px !important; left: 7px !important; width: auto !important; max-height: calc(100dvh - var(--mobile-topbar-height) - var(--mobile-controls-height) - 18px); overflow-y: auto; }
body.mobile-ui.mobile-objectives-open .frontier-panel:not([hidden]) { display: block !important; top: calc(var(--mobile-topbar-height) + 6px) !important; bottom: auto !important; left: 7px; right: 7px; width: auto; max-height: calc(100dvh - var(--mobile-topbar-height) - var(--mobile-controls-height) - 18px); overflow-y: auto; }
body.mobile-ui.mobile-objectives-open:has(.campaign-objectives:not([hidden])) .frontier-panel { display: none !important; }
body.mobile-ui .campaign-objectives-body { max-height: none; overflow: visible; }
body.mobile-ui :is(.campaign-hud-toggle, .campaign-marker-link, .campaign-objective-focus, .frontier-heading, .frontier-focus, .frontier-send) { min-height: 44px; }
body.mobile-ui .campaign-objective-focus { min-width: 44px; }
body.mobile-ui .campaign-objective-copy { font-size: 13px; }
body.mobile-ui .campaign-marker-link { padding: 9px; font-size: 12px; }
body.mobile-ui .campaign-radio { top: calc(var(--mobile-topbar-height) + 6px); left: 7px; right: 7px; width: auto; max-height: 104px; padding: 7px 9px; overflow: hidden; }
body.mobile-ui .campaign-radio-portrait { width: 30px; height: 38px; }
body.mobile-ui .campaign-radio-text { font-size: 11px; line-height: 1.3; margin-top: 3px; }
body.mobile-ui.mobile-objectives-open .campaign-radio { display: none; }
body.mobile-ui .notifications { top: calc(var(--mobile-topbar-height) + 6px); left: 7px; max-width: min(320px, calc(100vw - 14px)); font-size: 11px; }
body.mobile-ui .notifications > :nth-child(n+3) { display: none; }
body.mobile-ui .placement-hint { bottom: calc(var(--mobile-controls-height) + 8px); padding: 7px 10px; font-size: 11px; line-height: 1.35; white-space: normal; }
body.mobile-ui .pause-banner { width: min(350px, calc(100vw - 28px)); text-align: center; padding: 12px; font-size: 11px; letter-spacing: 1px; }
body.mobile-ui .command-tooltip { display: none !important; }
body.mobile-ui .audio-settings-panel, body.mobile-ui .topbar.has-boost-report ~ .audio-settings-panel { top: calc(var(--mobile-topbar-height) + 4px); right: max(6px, env(safe-area-inset-right, 0px)); max-height: calc(100dvh - var(--mobile-topbar-height) - 12px); width: min(360px, calc(100vw - 12px)); padding: 12px; }
body.mobile-ui .audio-settings-panel :is(button, input[type='range']) { min-height: 44px; }
body.mobile-ui .audio-settings-heading button { min-width: 44px; }
body.mobile-ui .audio-settings-panel .audio-enable { min-height: 44px; }

/* Menus and editing remain scrollable independently from the locked canvas. */
body.mobile-ui #launch-overlay.launch-flow { padding: max(6px, env(safe-area-inset-top, 0px)) max(6px, env(safe-area-inset-right, 0px)) max(6px, env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)); place-items: start center; }
body.mobile-ui #launch-overlay.launch-flow .launch-panel { width: 100%; max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 12px); padding: 13px 12px 0; border-radius: 8px; touch-action: pan-y; }
body.mobile-ui .setup-flow-header { flex-wrap: wrap; gap: 9px; padding-bottom: 12px; }
body.mobile-ui .setup-flow-header > strong { font-size: 17px; }
body.mobile-ui .setup-flow-tools { gap: 5px; margin-left: auto; flex-wrap: wrap; }
body.mobile-ui .setup-flow-tools > .eyebrow { display: none; }
body.mobile-ui :is(#launch-campaign-editor, #launch-audio-settings-button) { min-height: 44px; padding: 7px; font-size: 11px; border: 1px solid #738a7d; border-radius: 4px; background: #1c333a; }
body.mobile-ui #launch-audio-settings-button svg { display: none; }
body.mobile-ui #launch-audio-settings-button span { display: inline !important; }
body.mobile-ui #launch-overlay.launch-flow .setup-progress { gap: 4px; padding-bottom: 12px; }
body.mobile-ui #launch-overlay.launch-flow .setup-progress button { min-height: 44px; padding: 5px; font-size: 11px; }
body.mobile-ui #setup-step-title { font-size: 24px; }
body.mobile-ui #setup-step-description { font-size: 13px; }
body.mobile-ui #launch-overlay.launch-flow :is(.match-mode-options, .faction-options, .map-options, .campaign-difficulty-options) { grid-template-columns: 1fr; }
body.mobile-ui #launch-overlay.launch-flow .match-mode-options button { min-height: 94px; }
body.mobile-ui #launch-overlay.launch-flow :is(.faction-card, .map-card) { min-height: 0; }
body.mobile-ui #launch-overlay.launch-flow .setup-flow-actions { position: sticky; bottom: 0; z-index: 3; min-height: 64px; margin-top: 13px; padding: 9px 0; gap: 7px; background: #142831; }
body.mobile-ui #launch-overlay.launch-flow .setup-flow-actions button { min-height: 44px; min-width: 0; padding: 8px 13px; font-size: 13px; }
body.mobile-ui #launch-overlay.launch-flow .campaign-layout { grid-template-columns: 1fr; }
body.mobile-ui #launch-overlay.launch-flow .campaign-mission-list { max-height: 220px; }
body.mobile-ui #launch-overlay.launch-flow .campaign-mission { min-height: 48px; }
body.mobile-ui #launch-overlay.launch-flow .campaign-mission-name { font-size: 13px; }
body.mobile-ui #help-overlay { padding: max(7px, env(safe-area-inset-top, 0px)) 7px max(7px, env(safe-area-inset-bottom, 0px)); }
body.mobile-ui #help-overlay > section { max-height: calc(100dvh - 14px); overflow-y: auto; touch-action: pan-y; }
body.mobile-ui :is(#help-close, #help-done, #replay-button, #campaign-next-button, #campaign-retry-button) { min-height: 44px; }
body.mobile-ui #result-overlay > section { max-height: calc(100dvh - 20px); overflow: auto; }
body.mobile-ui .campaign-editor { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
body.mobile-ui .ce-header { gap: 8px; padding: 10px; flex-wrap: wrap; }
body.mobile-ui .ce-header h2 { font-size: 20px; }
body.mobile-ui .ce-eyebrow { display: none; }
body.mobile-ui .ce-enabled { min-height: 36px; }
body.mobile-ui .campaign-editor .ce-close { min-width: 44px; min-height: 44px; }
body.mobile-ui .ce-selectors { grid-template-columns: 1fr 1fr; padding: 0 10px 8px; gap: 6px; }
body.mobile-ui .campaign-editor :is(select, input:not([type='checkbox'])) { min-height: 44px; font-size: 16px; }
body.mobile-ui .ce-tabs { padding: 0 5px; overflow-x: auto; }
body.mobile-ui .campaign-editor .ce-tab { min-height: 44px; padding: 8px; white-space: nowrap; }
body.mobile-ui .ce-workspace { grid-template-columns: 1fr; }
body.mobile-ui .ce-overview { display: none; }
body.mobile-ui .ce-content { padding: 14px 10px; touch-action: pan-y; }
body.mobile-ui .ce-footer { padding: 7px 10px; gap: 5px; }
body.mobile-ui .ce-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
body.mobile-ui .ce-actions > :first-child { margin-right: 0; }
body.mobile-ui .ce-actions button { min-height: 44px; padding: 5px; font-size: 10px; }
body.mobile-ui #campaign-editor-test { grid-column: span 2; }
body.mobile-ui .campaign-editor .ce-map-token { width: 32px; height: 32px; min-height: 32px; line-height: 30px; }
body.mobile-ui .ce-placement-map { height: 310px; }
body.mobile-ui .ce-object-row { min-height: 44px; }
body.mobile-ui .campaign-cinema { --cinema-bars: 0px; }
body.mobile-ui .cinema-top { padding: calc(env(safe-area-inset-top, 0px) + 7px) 10px 0; gap: 5px; }
body.mobile-ui .campaign-cinema button { min-height: 44px; font-size: 11px; }
body.mobile-ui .cinema-brand { max-width: 112px; font-size: 8px; letter-spacing: .4px; }
body.mobile-ui .cinema-brand-mark, body.mobile-ui .cinema-key { display: none; }
body.mobile-ui .cinema-top-controls { gap: 4px; }
body.mobile-ui .cinema-content { gap: 12px; padding: 12px 14px; overflow: auto; justify-content: flex-start; }
body.mobile-ui .campaign-cinema.has-hero .cinema-heading { max-width: 100%; padding-right: 0; }
body.mobile-ui .campaign-cinema .cinema-title { font-size: 24px; }
body.mobile-ui .cinema-heading { flex: 0 0 auto; }
body.mobile-ui .cinema-radio, body.mobile-ui .campaign-cinema.has-hero .cinema-radio { flex: 1 0 auto; width: 100%; min-height: 0; max-height: none; padding: 10px; overflow: visible; }
body.mobile-ui .cinema-line { font-size: 17px; line-height: 1.45; }
body.mobile-ui .cinema-hero, body.mobile-ui .cinema-channel, body.mobile-ui .cinema-cast, body.mobile-ui .cinema-hint { display: none; }
body.mobile-ui .cinema-footer { grid-template-columns: 64px minmax(0, 1fr) minmax(120px, .8fr); gap: 8px; padding: 7px 12px calc(7px + env(safe-area-inset-bottom, 0px)); background: #10212ee8; }
body.mobile-ui .campaign-cinema .cinema-next { min-height: 44px; width: 100%; padding: 8px; font-size: 13px; }

@media (orientation: landscape) and (max-height: 600px) {
  body.mobile-ui { --mobile-topbar-height: calc(60px + env(safe-area-inset-top, 0px)); --mobile-controls-height: calc(64px + env(safe-area-inset-bottom, 0px)); }
  body.mobile-ui.mobile-more-open { --mobile-controls-height: calc(116px + env(safe-area-inset-bottom, 0px)); }
  body.mobile-ui .topbar { grid-template-columns: 52px minmax(0, 1fr) 66px auto; grid-template-rows: 44px; height: var(--mobile-topbar-height); gap: 5px; padding-top: calc(env(safe-area-inset-top, 0px) + 6px); }
  body.mobile-ui .brand { grid-column: 1; grid-row: 1; }
  body.mobile-ui .resources, body.mobile-ui.has-data-resource .resources { grid-column: 2; grid-row: 1; }
  body.mobile-ui .power-panel { grid-column: 3; grid-row: 1; }
  body.mobile-ui .topbar .top-actions { grid-column: 4; grid-row: 1; }
  body.mobile-ui .resource strong { font-size: 17px; }
  body.mobile-ui .resource small { font-size: 7px; }
  body.mobile-ui .resource-symbol { display: none; }
  body.mobile-ui #mobile-controls { gap: 3px; padding-top: 3px; padding-bottom: calc(3px + env(safe-area-inset-bottom, 0px)); }
  body.mobile-ui .mobile-controls-hint { font-size: 9px; min-height: 12px; line-height: 1.1; }
  body.mobile-ui .mobile-controls-main { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.mobile-ui .mobile-controls-secondary { grid-template-columns: repeat(8, minmax(0, 1fr)); padding-top: 4px; }
  body.mobile-ui #mobile-controls button { padding: 5px 3px; min-height: 44px; }
  body.mobile-ui.mobile-panel-open .command-dock,
  body.mobile-ui.mobile-panel-open .command-dock.is-science-dock,
  body.mobile-ui.mobile-panel-open .command-dock.is-tactics-dock { max-height: calc(100dvh - var(--mobile-topbar-height) - var(--mobile-controls-height) - 12px); }
  body.mobile-ui .command-dock .command-grid { height: 124px !important; }
  body.mobile-ui .command-dock .command-grid .command-card { height: 108px !important; min-height: 108px; }
  body.mobile-ui .command-dock .command-tabs { height: 44px; }
  body.mobile-ui .command-dock .command-context { display: none; }
  body.mobile-ui .command-dock.is-science-dock .science-context,
  body.mobile-ui .command-dock.is-science-dock .science-card-art { display: none; }
  body.mobile-ui .command-dock.is-science-dock .commands-panel.is-research .command-grid { height: 148px !important; }
  body.mobile-ui .command-dock.is-science-dock .command-grid .research-card { height: 132px !important; min-height: 132px; }
  body.mobile-ui .command-dock.is-science-dock .research-card.locked .command-name { padding-left: 16px; }
  body.mobile-ui .campaign-radio { max-width: 340px; right: auto; max-height: 65px; }
  body.mobile-ui .campaign-radio-text { font-size: 10px; }
  body.mobile-ui .campaign-radio-portrait { display: none; }
  body.mobile-ui #launch-overlay.launch-flow :is(.match-mode-options, .faction-options, .map-options, .campaign-difficulty-options) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.mobile-ui #launch-overlay.launch-flow .launch-panel { padding-top: 10px; }
  body.mobile-ui #launch-overlay.launch-flow .setup-flow-header { padding-bottom: 5px; }
  body.mobile-ui #launch-overlay.launch-flow .setup-progress { padding-bottom: 7px; }
  body.mobile-ui #launch-overlay.launch-flow .setup-heading { padding-bottom: 8px; }
  body.mobile-ui #launch-overlay.launch-flow .setup-flow-actions { min-height: 53px; margin-top: 8px; padding: 5px 0; }
  body.mobile-ui .cinema-content { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1fr); align-items: start; gap: 15px; }
  body.mobile-ui .campaign-cinema .cinema-title { font-size: 19px; }
  body.mobile-ui .cinema-line { font-size: 15px; }
  body.mobile-ui .cinema-speaker-row { margin-bottom: 5px; }
  body.mobile-ui .cinema-operation { margin-bottom: 6px; font-size: 8px; }
  body.mobile-ui .ce-header h2 { font-size: 17px; }
  body.mobile-ui .ce-header { flex-wrap: nowrap; padding-block: 5px; }
  body.mobile-ui .ce-enabled { order: 0; width: auto; }
  body.mobile-ui .ce-selectors { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.mobile-ui .ce-footer { padding-block: 5px; }
  body.mobile-ui .ce-status { display: none; }
  body.mobile-ui .ce-actions { display: flex; flex-wrap: nowrap; }
  body.mobile-ui .ce-actions button { flex: 1; min-width: 0; }
}

@media (max-width: 374px) and (orientation: portrait) {
  body.mobile-ui .topbar { grid-template-columns: 48px minmax(52px, 1fr) auto; padding-inline: 5px; gap: 3px; }
  body.mobile-ui .brand { width: 48px; }
  body.mobile-ui .top-actions { gap: 2px; }
  body.mobile-ui .power-panel strong { font-size: 11px; }
  body.mobile-ui .resource strong { font-size: 17px; }
  body.mobile-ui #mobile-controls button { font-size: 10px; }
}