/* ==========================================================================
   Project Stella - Mobile Responsive Overrides
   ========================================================================== */

/* Mobile Layout Grid overrides (Ensure hide-aside specificity doesn't restore desktop columns) */
.hud-main-grid,
.hud-main-grid.hide-aside {
  grid-template:
    "header" auto
    "main" 1fr / minmax(0, 1fr) !important;
}

/* Left Navigation Bar to sticky Scrollable Bottom Tab Bar */
.left-nav-bar {
  grid-area: auto !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 56px !important;
  width: 100% !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 0 4px !important;
  border-top: 0.5px solid rgba(130, 170, 255, 0.25) !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  z-index: 1000 !important;
  background: rgba(11, 14, 20, 0.95) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6) !important;
  display: flex !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
}

.left-nav-bar::-webkit-scrollbar {
  display: none !important; /* Hide scrollbar for native feel */
}

.left-nav-bar .nav-button {
  flex: 0 0 72px !important;
  height: 100% !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 4px 0 !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.left-nav-bar #nav-MENU_MAIL,
.left-nav-bar #nav-MENU_SETTINGS {
  display: flex !important;
}

.left-nav-bar .nav-button .nav-icon {
  font-size: 1.1rem !important;
  margin-bottom: 2px !important;
  margin-right: 0 !important;
}

.left-nav-bar .nav-button .nav-label {
  font-size: 0.62rem !important;
  letter-spacing: 0px !important;
  white-space: nowrap !important;
}

/* Center Workspace padding to clear bottom tab bar and go full-width flush */
.center-workspace {
  padding: 0 !important;
  padding-bottom: 62px !important;
  width: 100% !important;
  overflow-y: auto !important;
}

.central-view {
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}

#view-MENU_MAP {
  height: 100% !important;
  overflow: hidden !important;
}

#view-MENU_MAP .map-viewport-container {
  height: 100% !important;
  width: 100% !important;
}

.center-workspace:has(#view-MENU_MAP:not(.hidden)) {
  overflow: hidden !important;
  padding-bottom: 56px !important;
}

.workspace-content {
  width: 100% !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  box-sizing: border-box !important;
}

/* Right Status Sidebar Slide-in Drawer in mobile */
.right-status-bar {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  width: 290px !important;
  height: 100% !important;
  z-index: 9999 !important;
  background: rgba(8, 12, 18, 0.98) !important;
  border-left: 1px solid var(--stella-blue) !important;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.95) !important;
  transform: translateX(105%) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: auto !important;
}

.right-status-bar.mobile-active {
  transform: translateX(0) !important;
}

.right-status-inner {
  height: calc(100% - 48px) !important;
  overflow-y: auto !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.mobile-queue-header {
  display: flex !important;
}

.sidebar-toggle-btn {
  display: none !important;
}

.bottom-hud-bar {
  display: none !important;
}

/* Queue Toggle button visible on mobile header */
#btn-toggle-queue-mobile {
  display: inline-block !important;
  background: rgba(120, 227, 205, 0.12) !important;
  border-color: rgba(120, 227, 205, 0.3) !important;
  color: var(--stella-emerald) !important;
}

/* Top Resource Bar responsiveness via CSS Grid */
.top-resource-bar {
  display: grid !important;
  grid-template-areas:
    "logo actions"
    "resources resources" !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  height: auto !important;
  min-height: auto !important;
}

.top-resource-bar .logo-wrapper {
  grid-area: logo !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  width: auto !important;
}

.top-resource-bar .logo-wrapper .logo {
  font-size: 1.28rem !important;
  font-weight: 800 !important;
}

.top-resource-bar .logo-wrapper .user-id-label {
  font-size: 0.68rem !important;
  margin-top: 2px !important;
  color: var(--stella-blue) !important;
}

.top-resource-bar .header-actions {
  grid-area: actions !important;
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: 0 !important;
}

.top-resource-bar .header-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 4px 8px !important;
  font-size: 0.65rem !important;
  height: 26px !important;
  line-height: 1 !important;
  border-radius: 4px !important;
  background: rgba(130, 170, 255, 0.1) !important;
  border: 0.5px solid rgba(130, 170, 255, 0.25) !important;
  color: var(--stella-white) !important;
  margin-left: 0 !important;
  white-space: nowrap !important;
}

/* Resources wrapper in 1-column list on mobile for full horizontal space */
.top-resource-bar .resources-wrapper {
  grid-area: resources !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  margin-left: 0 !important;
  border-top: 0.5px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 6px !important;
}

.top-resource-bar .res-item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.65rem !important;
  background: rgba(255, 255, 255, 0.01) !important;
  border-radius: 4px !important;
  padding: 4px 2px !important;
  box-sizing: border-box !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.top-resource-bar .res-item .res-label {
  width: auto !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  font-size: 0 !important;
}

.top-resource-bar .res-item .res-icon-inline {
  width: 14px !important;
  height: 14px !important;
  margin-right: 2px !important;
}

.top-resource-bar .res-item .res-value {
  width: auto !important;
  flex-shrink: 0 !important;
  text-align: left !important;
  font-size: 0.68rem !important;
  font-weight: bold !important;
}

.top-resource-bar .res-item .res-cap {
  display: none !important;
}

.top-resource-bar .res-item .res-rate {
  display: none !important;
}

/* Auth Screen mobile scaling */
.auth-screen-overlay {
  justify-content: center !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  align-items: flex-start !important;   /* 모바일 세로 스크롤 허용 */
  overflow-y: auto !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.auth-card {
  width: 92% !important;
  max-width: 440px !important;
  padding: 20px 16px !important;
  margin: auto !important;              /* 가운데 정렬 */
}

/* 은하 선택 컨테이너 모바일: max-height 제한 해제
   (250px 초과 시 overflow:hidden이 접속 버튼 터치 영역을 잘라버리는 현상 방지) */
.galaxy-selector-container.expanded {
  max-height: none !important;
  overflow: visible !important;
}

.system-select-item {
  padding: 8px 10px !important;
}
.system-info {
  gap: 6px !important;
}
.system-meta {
  gap: 6px !important;
}

/* 인증 버튼에 touch-action 최적화 (모바일 탭 응답성 향상) */
.auth-action-btn,
.hud-btn-connect,
.auth-tab {
  touch-action: manipulation !important;  /* 더블탭 확대 방지 + 즉각 탭 응답 */
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
}

.hud-btn-connect {
  padding: 4px 6px !important;
  margin-left: 4px !important;
  white-space: nowrap !important;
  min-height: 32px !important;          /* 터치 타겟 최소 크기 보장 */
}
.system-user-count {
  white-space: nowrap !important;
}
.system-name {
  white-space: nowrap !important;
  font-size: 0.76rem !important;
}


/* ==========================================================================
   MENU_HOME (Tactical Dashboard) Mobile Overrides
   ========================================================================== */

/* Planet Profile Banner: 2 Columns + span last item */
.profile-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px 12px !important;
}

.profile-item:last-child {
  grid-column: span 2 !important;
}

/* Outpost Colonies Table horizontally scrolls instead of squishing */
.colonies-table-wrapper {
  overflow-x: auto !important;
  width: 100% !important;
  -webkit-overflow-scrolling: touch !important;
}

.colonies-table {
  min-width: 600px !important;
  width: 100% !important;
}

/* Dashboard Columns Grid: 1-Column display on mobile */
.dashboard-columns-grid {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.dashboard-column {
  display: none !important;
  min-height: auto !important;
}

.dashboard-column.active {
  display: flex !important;
}

/* Mobile Dashboard Switcher Tab Buttons */
.dashboard-mobile-tabs {
  display: flex !important;
  width: 100% !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

.dashboard-mobile-tabs .dash-tab {
  flex: 1 !important;
  padding: 8px 4px !important;
  font-size: 0.72rem !important;
  text-align: center !important;
  background: rgba(36, 43, 53, 0.2) !important;
  border: 1px solid rgba(130, 170, 255, 0.25) !important;
  color: rgba(255, 255, 255, 0.65) !important;
  border-radius: 4px !important;
  font-family: 'Outfit', sans-serif !important;
  cursor: pointer !important;
}

.dashboard-mobile-tabs .dash-tab.active {
  background: rgba(130, 170, 255, 0.15) !important;
  border-color: var(--stella-blue) !important;
  color: var(--stella-white) !important;
  box-shadow: 0 0 8px rgba(130, 170, 255, 0.3) !important;
}

.dock-summary-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px !important;
}

.dock-summary-item {
  padding: 6px 8px !important;
}

/* Responsive modals on mobile */
.session-invalidated-box {
  width: 92% !important;
  max-width: 450px !important;
  margin: auto !important;
}

/* 군대 관리 모바일 최적화 */
.army-management-flex-container {
  flex-direction: column !important;
  flex-wrap: wrap !important;
  height: auto !important;
  min-height: auto !important;
}

.flip-card-container {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 620px !important;
}

.army-preset-editor-container {
  flex-direction: column !important;
  height: auto !important;
  min-height: auto !important;
}

#army-troops-list {
  flex-direction: column !important;
  gap: 12px !important;
}

#army-summary-content {
  flex-direction: column !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.army-preset-idx-container {
  flex-wrap: nowrap !important;
  gap: 4px !important;
}

.army-preset-idx-btn {
  min-width: 0 !important;
  flex: 1 !important;
  padding: 0 !important;
  font-size: 0.72rem !important;
}

.army-preset-idx-btn .desktop-text {
  display: none !important;
}

.army-preset-idx-btn .mobile-text {
  display: inline !important;
}

/* 군사 생산 모바일 최적화 */
.template-selector-layout {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 12px !important;
  height: auto !important;
  overflow: visible !important;
}

.template-list-side {
  height: auto !important;
  max-height: 220px !important;
}

.template-list-inner {
  max-height: 180px !important;
  overflow-y: auto !important;
}

.template-details-container {
  height: auto !important;
  min-height: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.template-spec-details {
  height: auto !important;
  min-height: auto !important;
  overflow-y: visible !important;
  padding: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 인라인 gap: 110px 강제 무력화 및 모바일 맞춤 세로 배치 */
.spec-and-image-container {
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 인라인 width: 240px 고정 강제 해제 및 전체 폭 확장 */
#ship-spec-grid, #troop-spec-grid {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}

.ship-image-wrapper, .troop-image-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.qty-btn-group > div {
  display: flex !important;
  flex-wrap: nowrap !important; /* 7개 버튼이 개행되지 않고 한 줄에 대칭으로 딱 차도록 nowrap 강제 */
  justify-content: space-between !important;
  gap: 3px !important; /* 간격을 조금 좁혀 7개 버튼 안착 유도 */
  width: 100% !important;
  box-sizing: border-box !important;
}

.qty-btn-group .qty-btn {
  flex: 1 1 auto !important;
  width: auto !important; /* 데스크탑의 width: 58px 고정 너비 강제 해제 */
  min-width: 32px !important; /* 7개 버튼이 360px 너비에 다 들어가도록 최소너비 축소 */
  max-width: 48px !important;
  margin-right: 0 !important; /* 인라인 margin-right 5px 강제 무력화 */
  padding: 6px 2px !important; /* 패딩을 가로로 좁혀 텍스트 짤림 차단 */
  font-size: 0.65rem !important; /* 폰트를 살짝 좁혀 시인성 확보 */
  text-align: center !important;
  box-sizing: border-box !important;
}

/* 수량 초기화 버튼 인라인 max-width 무력화 */
.qty-btn-group .qty-btn.reset-btn {
  max-width: 100% !important;
  width: 100% !important;
}

#view-MENU_MILITARY .workspace-content {
  height: auto !important;
  overflow: visible !important;
  width: 100% !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}

.mil-tab-content {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
  width: 100% !important;
  box-sizing: border-box !important;
}


/* 전초기지 관리 모바일 최적화 */
.outpost-flex-container {
  flex-direction: column !important;
  height: auto !important;
  min-height: auto !important;
  overflow-y: visible !important;
}

.outpost-list-side {
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  max-height: 250px !important;
}

.outpost-header-info {
  flex-direction: column !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.outpost-header-info > div {
  width: 100% !important;
}

#btn-deconstruct-outpost {
  width: 100% !important;
  min-width: 0 !important;
}

.outpost-main-columns {
  flex-direction: column !important;
  gap: 16px !important;
  height: auto !important;
  min-height: auto !important;
}

.outpost-transfer-actions {
  flex-direction: column !important;
  gap: 8px !important;
}

.outpost-transfer-actions button {
  width: 100% !important;
}

#view-MENU_OUTPOST .workspace-content {
  height: auto !important;
  overflow: visible !important;
}

/* ==========================================================================
   하단 잘림 & 우측 잘림 방지 모바일 추가 오버라이드
   ========================================================================== */
.center-workspace {
  padding-bottom: 120px !important; /* 모바일 기기별 툴바 마진 안전 확보 */
}

/* 스펙 테이블 우측 삐져나감 방지 및 유연한 space-between 정렬 */
#ship-spec-grid, #troop-spec-grid {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto !important; /* 인라인 flex: none 강제 무력화 */
}

.spec-line {
  display: flex !important;
  justify-content: space-between !important; /* 양 끝 정렬로 화면 꽉 차게 배치 */
  width: 100% !important;
}

.spec-line label {
  width: auto !important; /* 고정폭 170px 무력화 */
  flex-grow: 1 !important;
  font-size: 0.75rem !important;
  text-align: left !important;
}

.spec-line span {
  font-size: 0.75rem !important;
  text-align: right !important;
  flex-shrink: 0 !important;
}

.template-spec-details {
  padding: 12px !important; /* 패딩 여백을 좁혀 가로 폭 최대 확보 */
}

.map-tile-detail-card:not(.hidden) {
  position: fixed !important;
  bottom: 56px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  box-sizing: border-box !important;
  z-index: 1001 !important;
  padding: 8px 12px !important;
  display: grid !important;
  grid-template-areas:
    "header actions"
    "desc actions" !important;
  grid-template-columns: 1fr 180px !important;
  grid-template-rows: auto 1fr !important;
  align-items: center !important;
  gap: 2px 10px !important;
}

.map-tile-detail-card h4 {
  grid-area: header !important;
  font-size: 0.78rem !important;
  margin: 0 !important;
  font-weight: bold !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.map-tile-detail-card p {
  grid-area: desc !important;
  font-size: 0.64rem !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  color: var(--stella-white) !important;
  display: block !important;
}

.map-tile-detail-card p br {
  content: " | " !important;
  display: inline !important;
}

.map-tile-detail-card button[onclick*="closeMapTileCard"] {
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  font-size: 1.1rem !important;
  z-index: 1050 !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
}

.map-tile-detail-card #tile-card-actions {
  grid-area: actions !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  width: 100% !important;
  justify-content: center !important;
  padding-top: 22px !important; /* 닫기 버튼이 들어갈 충분한 상단 여백 확보 */
  pointer-events: none !important; /* 닫기 버튼을 가리는 컨테이너의 터치 이벤트 투명화 */
}

.map-tile-detail-card #tile-card-actions button {
  width: 100% !important;
  height: 24px !important;
  line-height: 22px !important;
  font-size: 0.65rem !important;
  padding: 0 4px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-radius: 4px !important;
  pointer-events: auto !important; /* 실제 조작 버튼은 터치 가능 복원 */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.map-trackers-container {
  position: absolute !important;
  top: 48px !important;
  left: 10px !important;
  right: 10px !important;
  width: calc(100% - 20px) !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  pointer-events: none !important;
}

.map-trackers-container > div {
  flex: 1 !important;
  max-width: calc(50% - 4px) !important;
  width: auto !important;
  pointer-events: auto !important;
}

/* 데스크톱/모바일 텍스트 분기 */
.desktop-only {
  display: none !important;
}

.mobile-only {
  display: inline-block !important;
}

/* 줌 텍스트 가리기 */
.zoom-text-hud {
  display: none !important;
}

/* 워프 점프 패널 가리기 */
.map-coord-jump-panel {
  display: none !important;
}

/* 방어 시설 모바일 조율 */
.qty-btn.reset-btn {
  width: 100% !important;
  max-width: 100% !important;
}

.defense-status-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* ==========================================================================
   성단 침공 작전 (공격 팝업) 모바일 최적화 오버라이드
   ========================================================================== */
#fleet-attack-select-modal .hud-panel.hud-brackets {
  width: 95% !important;
  max-width: 660px !important;
  min-height: auto !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  padding: 20px 16px !important;
  box-sizing: border-box !important;
}

#fleet-attack-select-modal h2 {
  font-size: 1rem !important;
  letter-spacing: 0.05em !important;
}

#fleet-attack-select-modal #fleet-attack-list-container {
  max-height: 180px !important;
  padding: 8px !important;
}

#fleet-attack-select-modal #fleet-attack-list-container > div {
  padding: 6px 10px !important;
}

#fleet-attack-select-modal div[style*='grid-template-columns'] {
  grid-template-columns: 85px 1fr 45px 50px !important;
  gap: 4px !important;
}

#fleet-attack-select-modal input[type='number'] {
  width: 42px !important;
  font-size: 0.68rem !important;
}

#fleet-attack-select-modal span[style*='text-align: right'] {
  font-size: 0.62rem !important;
}

#fleet-attack-select-modal #fleet-attack-troop-space-status {
  padding: 2px 4px !important;
  font-size: 0.7rem !important;
}

#fleet-attack-select-modal button[onclick*='autoLoadAttackTroops'] {
  padding: 3px 12px !important;
  font-size: 0.68rem !important;
}

#fleet-attack-select-modal #fleet-attack-eta-container {
  margin-top: 12px !important;
  padding: 8px 10px !important;
  font-size: 0.7rem !important;
}

#fleet-attack-select-modal #fleet-attack-eta-container div span {
  font-size: 0.68rem !important;
}

#fleet-attack-select-modal div[style*='margin-top: 20px'] {
  margin-top: 12px !important;
  gap: 8px !important;
}

#fleet-attack-select-modal button[id^="btn-fleet-attack-"] {
  height: 34px !important;
  font-size: 0.78rem !important;
}

/* 트래커 패널 개별 세로 높이 유지 (stretch 억제) */
.map-trackers-container {
  align-items: flex-start !important;
}



/* ==========================================================================
   추가 모바일 개선 오버라이드
   ========================================================================== */

/* 1. 상단 자원바 컴팩트 밀착 조율 */
.top-resource-bar {
  padding: 6px 12px 5px 12px !important;
  gap: 4px !important;
}

.top-resource-bar .logo-wrapper .logo {
  font-size: 1.15rem !important;
}

.top-resource-bar .header-actions {
  gap: 4px !important;
}

.top-resource-bar .header-actions button {
  padding: 3px 6px !important;
  font-size: 0.64rem !important;
  height: 23px !important;
}

.top-resource-bar .resources-wrapper {
  gap: 3px !important;
  padding-top: 4px !important;
}

.top-resource-bar .res-item {
  padding: 2px 1px !important;
  gap: 1px !important;
}

.top-resource-bar .res-item .res-value {
  font-size: 0.64rem !important;
}

.top-resource-bar .res-item .res-icon-inline {
  width: 12px !important;
  height: 12px !important;
  margin-right: 1px !important;
}

/* 2. 우주 연합 게이트 모바일 전용 위아래 적층 */
.alliance-split-container {
  flex-direction: column !important;
  gap: 16px !important;
  min-height: auto !important;
  padding: 10px 0 !important;
}

.alliance-split-gate {
  max-width: 100% !important;
  height: 170px !important; /* 모바일에서 적합한 위아래 배치 높이 */
}

/* 3. 실시간 통합 전술 피드 드롭다운 모바일 반응형 */
.feed-dropdown-panel {
  width: calc(100% - 24px) !important;
  max-width: 480px !important;
  right: 12px !important;
  left: 12px !important;
  margin: 0 auto !important;
  top: 54px !important;
  padding: 10px 12px !important;
}

/* 전술 피드 타임라인 리스트 줄바꿈 허용 */
.feed-timeline {
  max-height: 320px !important;
}

.feed-timeline li {
  white-space: normal !important;
  width: 100% !important;
  word-break: break-all !important;
  display: flex !important;
  align-items: flex-start !important;
  padding: 5px 0 !important;
}

.feed-timeline li .timeline-text {
  white-space: normal !important;
  word-break: break-all !important;
  display: inline !important;
}

/* ==========================================================================
   4. 상단 자원바 컴팩트화 및 대기열 버튼 우측 정렬 (스텔라 에센스 우측 남는 공간)
   ========================================================================== */
.top-resource-bar {
  padding: 6px 12px 5px 12px !important;
  gap: 4px !important;
}

.top-resource-bar .logo-wrapper .logo {
  font-size: 1.15rem !important;
}

/* 자원탭 가로 남는 공간에 균등하게 분배 및 정렬 */
.top-resource-bar .resources-wrapper {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 6px !important; /* 자원 간 최소 간격 보장 */
  padding-top: 4px !important;
  border-top: 0.5px solid rgba(255, 255, 255, 0.08) !important;
  width: 100% !important;
}

.top-resource-bar .res-item {
  flex: 1 1 0% !important; /* 4개 자원이 공간을 똑같이 나누어 가짐 */
  width: auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important; /* 각 영역 내부에서 중앙 정렬 */
  padding: 3px 0 !important;
  gap: 2px !important;
  background: rgba(255, 255, 255, 0.01) !important;
  border-radius: 3px !important;
}

.top-resource-bar .res-item .res-value {
  font-size: 0.65rem !important;
}

.top-resource-bar .res-item .res-icon-inline {
  width: 12px !important;
  height: 12px !important;
  margin-right: 1px !important;
}

/* 대기열 버튼을 헤더 액션 영역(전술 피드 왼쪽)으로 정렬 및 스타일 최적화 */
#btn-toggle-queue-mobile {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 100 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  margin-left: 0 !important;
  padding: 3px 6px !important;
  font-size: 0.64rem !important;
  height: 23px !important;
  line-height: 1 !important;
  background: rgba(120, 227, 205, 0.12) !important;
  border: 0.5px solid rgba(120, 227, 205, 0.3) !important;
  color: var(--stella-emerald) !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   5. 전투 시뮬레이션 모바일 최적화 (기본 구성 및 로직 완전 보존)
   ========================================================================== */
#sim-scroll-container {
  flex-direction: column !important;
  height: auto !important;
  overflow-y: visible !important;
  gap: 16px !important;
}

#sim-inputs-scroll-container {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  overflow-y: visible !important;
  justify-content: center !important;
  padding-right: 0 !important;
}

/* 공격자 / 방어자 원래 패널(min-width: 280px, max-width: 300px) 기본 구성을 유지하며 한 줄 정렬 */
#sim-inputs-scroll-container > .hud-panel {
  flex: 1 1 100% !important;
  min-width: 280px !important;
  max-width: 310px !important; /* 그리드 160px 80px 입력 항목의 가로 삐져나감만 깔끔하게 보호 */
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* 결과 보고서 패널 높이를 수직 누적으로 고정 매칭 */
#sim-result-container {
  flex: none !important;
  width: 100% !important;
  height: 480px !important;
  box-sizing: border-box !important;
}

#sim-result-logs {
  max-height: 220px !important;
}

/* 실행 / 초기화 버튼 제어 패널 모바일 위아래 정렬 */
.sim-control-panel {
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px !important;
  margin-top: 10px !important;
}

.sim-control-panel button {
  width: 100% !important;
  height: 36px !important;
  font-size: 0.78rem !important;
}

/* 시스템 설정 팝업 메뉴 모바일 레이아웃 최적화 (하단 잘림 방지 및 스크롤 활성화) */
.system-settings-content {
  max-height: calc(100vh - 130px) !important;
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 64px !important;
  margin-right: 8px !important;
}

.system-settings-list {
  overflow-y: auto !important;
  flex: 1 !important;
}

/* 신규 및 수정 작전 함대 편성 콘솔 함선 리스트 모바일 스크롤 버그 교정 */
#op-console-ship-list,
#op-console-edit-ship-list {
  max-height: 220px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important; /* iOS/WebKit 스무스 관성 터치 스크롤 활성화 */
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important; /* 3D transform 컨텍스트 아래에서의 터치 히트테스트 렌더 버그 해결 */
}

/* 방어 시설 탭 모바일 최적화 */
#view-MENU_DEFENSE .workspace-content {
  width: 100% !important;
  max-width: 100% !important;
  padding: 8px !important; /* 함선 건조 탭의 모바일 좌우 대칭 핏과 동일하게 마진 패딩 구성 */
  box-sizing: border-box !important;
  height: auto !important;
}

.defense-status-panel {
  flex: none !important;
  height: auto !important;
  max-height: 150px !important;
  overflow-y: auto !important;
  margin-bottom: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.defense-status-grid {
  grid-template-columns: repeat(2, 1fr) !important; /* 4열 -> 2열로 축소해 모바일 가로 짤림 방지 */
  gap: 6px !important;
  width: 100% !important;
}

.defense-production-panel {
  flex: none !important;
  height: auto !important;
  min-height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#view-MENU_DEFENSE .template-selector-layout,
#view-MENU_DEFENSE .template-list-side,
#view-MENU_DEFENSE .template-details-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#view-MENU_DEFENSE .template-spec-details {
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px 8px !important; /* 패딩을 가로로 슬림화하여 모바일 버튼 가용 너비 15px 이상 추가 확보 */
  box-sizing: border-box !important;
}



.defense-action-panel {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 10px !important; /* 하단 액션 지시 패널 가로 여백 컴팩트 정돈 */
}

#defense-spec-grid {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}

/* 수량 초기화 버튼 모바일 짤림 강제 무력화 (ID 특정화로 우선순위 확보) */
#view-MENU_DEFENSE .qty-btn-group .qty-btn.reset-btn,
#view-MENU_MILITARY .qty-btn-group .qty-btn.reset-btn {
  width: 100% !important;
  max-width: none !important;
}

/* 모바일 전용 최상위 토스트 알림 레이아웃 최적화 (묻힘 방지 및 중앙 정렬) */
#tactical-toast-container {
  top: 72px !important; /* 상단 자원바 아래에 조밀하게 안착 */
  right: 12px !important;
  left: 12px !important; /* 모바일 좌우 12px 여백을 주고 가로폭 전체 확보 */
  width: calc(100% - 24px) !important;
  align-items: center !important; /* 토스트 메시지를 가로 중앙 정렬 */
  z-index: 999999 !important; /* 최상위 모달(z-index: 10000 등) 위로 완전히 띄움 */
}

#tactical-toast-container .tactical-toast {
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  font-size: 0.68rem !important; /* 모바일 가독성 맞춤 폰트 축소 */
  padding: 6px 12px !important;
  white-space: normal !important; /* 텍스트가 너무 긴 경우 줄바꿈 허용 */
  word-break: break-all !important;
  border-radius: 4px !important;
}

/* 우주연합 검색 및 창설 탭 모바일 최적화 */
.alliance-card-grid {
  grid-template-columns: 1fr !important; /* 모바일에서 1열로 세로 적층 배치하여 짤림 방지 */
  gap: 12px !important;
  width: 100% !important;
}

.alliance-scanner-card {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px !important; /* 패딩을 조금 슬림하게 다듬어 가로 공간 확보 */
}

/* 검색 및 창설 패널 모바일 패딩 및 레이아웃 정돈 */
#alliance-scanner-console .hud-panel.hud-brackets,
#alliance-creation-console .hud-panel.hud-brackets {
  padding: 16px 12px !important; /* 좌우 패딩을 줄여 모바일 가로폭 최대 확보 */
}

.scanner-search-bar {
  width: 100% !important;
  max-width: 100% !important;
}

#alliance-search-input {
  font-size: 0.8rem !important;
}

.scanner-search-bar button {
  width: 75px !important; /* 모바일 전용 검색 버튼 너비 축소로 입력창 폭 확보 */
  font-size: 0.75rem !important;
}

/* 스캔 리스트 스크롤 영역 모바일 맞춤 세로 가용 극대화 */
.alliance-grid-scroll {
  max-height: calc(100vh - 290px) !important; /* 뷰포트에 맞추어 더 많은 연합 리스트를 쾌적하게 렌더링 */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 뒤로가기 버튼 모바일 터치 최적화 */
.alliance-back-btn {
  font-size: 0.78rem !important;
  padding: 4px 8px !important;
}

/* 출격 및 건설 파견 모달 모바일 반응형 짤림 교정 및 안전 세로 스크롤 강화 */
.session-invalidated-overlay:not(.hidden) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  padding: 12px !important; /* 화면 가장자리 여백 최소 확보 */
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 2000 !important;
  pointer-events: auto !important;
}

.session-invalidated-box {
  width: 95vw !important; /* 가로 고정폭 무력화 및 모바일 가득 채움 */
  max-width: 480px !important;
  max-height: 88vh !important; /* 화면 세로 높이가 작을 때 짤림 원천 방지 */
  overflow-y: auto !important; /* 화면이 조금만 작아져도 상자 자체에 부드러운 스크롤바 자동 생성 */
  overflow-x: hidden !important;
  padding: 16px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  -webkit-overflow-scrolling: touch !important; /* 모바일 부드러운 터치 스크롤 */
}

/* 성단 침공 작전 모달 (#fleet-attack-select-modal) 스크롤 강화 */
#fleet-attack-select-modal .session-invalidated-box {
  width: 96vw !important;
  max-width: 520px !important;
  max-height: 88vh !important;
  padding: 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important; /* 내부 내용 팽창 시 상자 자체에 스크롤바 작동 */
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 모바일 팝업 내부의 폼 요소들이 스크롤 영역을 침범하지 않도록 flex 축 설정 */
.session-invalidated-box > div {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 작전 함대 출격 모달의 내부 스크롤 목록 뷰포트 맞춤 유연화 */
#op-fleet-dispatch-container {
  min-height: 140px !important;
  max-height: 240px !important; /* 모바일 기기 높이가 작을 때 리스트 높이를 적당히 좁혀 상자 스크롤 발생 최소화 */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 건설선 파견 자원 요약 그리드 */
.session-invalidated-box .space-y-4,
.session-invalidated-box .space-y-3\.5 {
  width: 100% !important;
  box-sizing: border-box !important;
}

.session-invalidated-box .alert-actions {
  margin-top: 16px !important;
}