/* Neveron mobile complete suite, adapted from the supplied UserStyle. */

/* 01 — HEADER */
html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* WORLD MAP EARLY-LOAD INTERFACE
   Kept near the start because Waterfox/Stylus truncates the later
   map block on this unusually large rendered document. */
.world-layer-stack {
  top: 4px !important;
  right: 6px !important;
  left: 6px !important;
  width: auto !important;
  gap: 4px !important;
  align-items: stretch !important;
}

.world-layer-toolbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  min-height: 43px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 4px 5px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border-radius: 7px !important;
  scrollbar-width: thin !important;
  box-sizing: border-box !important;
}

.world-layer-toolbar-title {
  flex: 0 0 auto !important;
  margin: 0 2px 0 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.world-toggle-chip {
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: 32px !important;
  gap: 4px !important;
  padding: 3px 7px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.world-toggle-chip input {
  width: 17px !important;
  min-width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
}

.world-zone-search {
  flex: 0 0 230px !important;
  grid-template-columns: 45px minmax(0, 1fr) !important;
  gap: 4px !important;
  width: 230px !important;
  min-width: 230px !important;
  margin: 0 !important;
}

.world-zone-search label { font-size: 8px !important; }
.world-zone-search-row {
  grid-template-columns: minmax(0, 1fr) 42px !important;
  gap: 3px !important;
}
.world-zone-search input,
.world-zone-search .world-action-button {
  height: 32px !important;
  min-height: 32px !important;
  box-sizing: border-box !important;
}
.world-zone-search input {
  padding: 3px 5px !important;
  font-size: 10px !important;
}
.world-zone-search .world-action-button {
  padding: 0 4px !important;
  font-size: 9px !important;
}

#content > .main-controls {
  --world-main-controls-top: 56px;
  top: var(--world-main-controls-top) !important;
  right: 6px !important;
  left: 6px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 3px 6px !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: 136px !important;
  margin: 0 !important;
  padding: 6px !important;
  overflow: auto !important;
  border-radius: 7px !important;
  box-sizing: border-box !important;
}

#content > .main-controls > .world-normal-text {
  min-width: 0 !important;
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1.18 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#main-owner,
#main-overlay-summary,
#world-administration-zone-details,
#world-relocation-panel,
#world-selected-empire-colour { grid-column: 1 / -1 !important; }
#main-overlay-summary { font-size: 8px !important; }

#content > .main-controls > button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 4px 5px !important;
  font-size: 9px !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  box-sizing: border-box !important;
}

.world-resource-legend {
  top: auto !important;
  right: auto !important;
  bottom: 8px !important;
  left: 7px !important;
  width: 150px !important;
  max-width: 150px !important;
  max-height: 132px !important;
  margin: 0 !important;
  padding: 6px !important;
  overflow-y: auto !important;
  border-radius: 7px !important;
  box-sizing: border-box !important;
}
.world-resource-legend-title {
  margin: 0 0 4px !important;
  font-size: 11px !important;
}
.world-resource-legend-list { gap: 2px !important; }
.world-resource-legend-row {
  gap: 5px !important;
  min-height: 14px !important;
  font-size: 8px !important;
  line-height: 1.05 !important;
}
.world-resource-legend-dot {
  width: 9px !important;
  min-width: 9px !important;
  height: 9px !important;
}

.zoom-controls {
  right: 8px !important;
  bottom: 8px !important;
  left: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, 38px) !important;
  align-items: start !important;
  justify-content: end !important;
  gap: 3px !important;
  width: 79px !important;
  height: auto !important;
  z-index: 10030 !important;
}
.zoom-controls .misc-controls,
.zoom-controls .zoom-levels {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.zoom-controls button,
.zoom-controls .chat-controls button {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 2px !important;
  font-size: 11px !important;
}
.zoom-button img,
.zoom-controls .chat-controls img {
  width: 26px !important;
  height: 26px !important;
}

/* World Map: fixed, non-scrolling layer grid. */
.world-layer-toolbar {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 3px !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 4px !important;
  overflow: visible !important;
}

.world-layer-toolbar-title {
  display: none !important;
}

.world-layer-toolbar > .world-toggle-chip {
  display: flex !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 29px !important;
  padding: 3px 4px !important;
  border-radius: 5px !important;
  font-size: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.world-layer-toolbar > .world-toggle-chip::after {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #d5e9ef !important;
  font-size: 8px !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.world-layer-toolbar > .world-toggle-chip:nth-of-type(1)::after { content: "Own" !important; }
.world-layer-toolbar > .world-toggle-chip:nth-of-type(2)::after { content: "Faction" !important; }
.world-layer-toolbar > .world-toggle-chip:nth-of-type(3)::after { content: "Res" !important; }
.world-layer-toolbar > .world-toggle-chip:nth-of-type(4)::after { content: "Grid" !important; }
.world-layer-toolbar > .world-toggle-chip:nth-of-type(5)::after { content: "Cities" !important; }
.world-layer-toolbar > .world-toggle-chip:nth-of-type(6)::after { content: "Build" !important; }
.world-layer-toolbar > .world-toggle-chip:nth-of-type(7)::after { content: "Units" !important; }
.world-layer-toolbar > .world-toggle-chip:nth-of-type(8)::after { content: "Admin" !important; }

.world-layer-toolbar > .world-zone-search {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* The fixed layer grid includes two chip rows plus zone search. */
#content > .main-controls {
  --world-main-controls-top: 134px;
}

/* World Map chat is nested inside the map controls, so relocate
   that same functional button back into the shared header. */
#content #chat-controls.chat-controls {
  position: fixed !important;
  top: 49px !important;
  right: 8px !important;
  bottom: auto !important;
  left: auto !important;
  display: block !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 10020 !important;
  transform: none !important;
}

#content #chat-controls .chat-button-wrapper,
#content #chat-controls #chatButton {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#content #chat-controls #chatButton img {
  width: 25px !important;
  min-width: 25px !important;
  height: 25px !important;
  min-height: 25px !important;
  object-fit: contain !important;
}

/* HEADER: three-row mobile layout */
#overviewPanel.header-container {
  display: grid !important;
  grid-template-columns: 54px 66px minmax(0, 1fr) !important;
  grid-template-areas:
    "menu logo summary"
    "discord tutorial premium"
    "discord tutorial premium" !important;

  align-items: center !important;
  column-gap: 7px !important;
  row-gap: 4px !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 5px 6px 4px !important;
  box-sizing: border-box !important;

  font-size: 12px !important;
  line-height: 1.15 !important;
}

/* MENU */
#overviewPanel #navMenuToggle {
  grid-area: menu !important;
  position: static !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;

  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#overviewPanel #navMenuToggle .nav-menu-toggle-icon {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 29px !important;
  line-height: 1 !important;
}

#overviewPanel #navMenuToggle .nav-menu-toggle-text {
  display: none !important;
}

/* LOGO */
#overviewPanel #headerImage {
  grid-area: logo !important;
  position: static !important;

  display: block !important;
  justify-self: center !important;

  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;

  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;

  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
}

/* EMPIRE INFO */
#overviewPanel #empireOverviewContainer {
  grid-area: summary !important;
  position: static !important;

  display: block !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 11px !important;
  line-height: 1.1 !important;
  overflow-wrap: anywhere !important;
}

#overviewPanel #empireOverviewContainer > span {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

#overviewPanel #empireOverviewContainer br {
  display: none !important;
}

/* Allow premium-container children into parent grid */
#overviewPanel #premiumContainer {
  display: contents !important;
}

#overviewPanel #change-empire {
  display: none !important;
}

/* DISCORD
   Kept inside the first grid column so it cannot overlap the tutorial icon. */
#overviewPanel .discord-btn {
  grid-area: discord !important;
  position: static !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;

  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;

  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;

  margin: 0 !important;
  padding: 3px 2px !important;
  box-sizing: border-box !important;

  font-size: 0 !important;
  line-height: 0 !important;

  overflow: hidden !important;
  white-space: nowrap !important;
  align-self: center !important;
  justify-self: center !important;
}

#overviewPanel .discord-btn::after {
  content: "Discord" !important;
  display: block !important;
  max-width: 48px !important;

  font-size: 8px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#overviewPanel .discord-btn .discord-icon {
  display: block !important;

  width: 23px !important;
  min-width: 23px !important;
  max-width: 23px !important;

  height: 23px !important;
  min-height: 23px !important;
  max-height: 23px !important;

  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
}

/* TUTORIAL */
#overviewPanel #tutorial-hub-button {
  grid-area: tutorial !important;
  position: static !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  align-self: center !important;

  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;

  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#overviewPanel #tutorial-hub-button img {
  display: block !important;

  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;

  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;

  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
}

/* PREMIUM ICON */
#overviewPanel .premium-info {
  grid-area: premium !important;
  position: static !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;

  min-width: 0 !important;
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#overviewPanel #premiumImage {
  position: static !important;

  display: block !important;
  flex: 0 0 auto !important;
  align-self: center !important;

  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;

  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;

  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
}

/* EXPIRATION TEXT ON ITS OWN ROW */
#overviewPanel #premium {
  position: static !important;

  display: block !important;
  flex: 0 1 auto !important;
  align-self: center !important;
  width: auto !important;
  text-align: left !important;

  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 12px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* NAV DRAWER */
#buttons.main-buttons {
  max-width: min(82vw, 330px) !important;
}

#buttons .main-button {
  min-height: 44px !important;
  font-size: 16px !important;
  line-height: 1.15 !important;
}

#main-view,
#content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* VERY NARROW SCREENS */
@media (max-width: 420px) {
  #overviewPanel.header-container {
    grid-template-columns: 50px 58px minmax(0, 1fr) !important;
    column-gap: 6px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  #overviewPanel #navMenuToggle {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
  }

  #overviewPanel #headerImage {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
  }

  #overviewPanel #empireOverviewContainer,
  #overviewPanel #premium {
    font-size: 11px !important;
  }

  #overviewPanel .discord-btn {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
  }

  #overviewPanel #premiumImage {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }
}

/* Polish tweaks */
#overviewPanel{
  margin-bottom:2px !important;
}

#overviewPanel #premiumImage {
  transform: none !important;
}

#overviewPanel #premium{
  font-size:11px !important;
}

#overviewPanel .discord-btn{
  margin-right:2px !important;
}

/* 02 — RESEARCH */
/*
 Neveron Mobile 02 - Research Compact
 Requires: Neveron Mobile 01 - Header
*/

/* =========================================================
   MOBILE RESEARCH PAGE — CARD LAYOUT
   Converts each four-column research row into a readable card.
   ========================================================= */

@media (max-width: 700px) {

  /* Main page/frame sizing */
  #content .research-body,
  #content .research-page,
  #content [class~="research-container"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #content .research-body,
  #content .research-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #content .research-body .tactical-frame,
  #content .research-page .tactical-frame,
  #content .research-container.tactical-frame {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    min-width: 0 !important;
    margin: 5px auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  /* Filter control */
  #content .research-body select,
  #content .research-page select,
  #content #research-filter,
  #content #research-filter-select {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 40px !important;
    height: 40px !important;
    margin-top: 3px !important;
    margin-bottom: 7px !important;
    padding: 4px 9px !important;
    font-size: 17px !important;
    box-sizing: border-box !important;
  }

  /* Section title */
  #content .research-body h1,
  #content .research-body h2,
  #content .research-body h3,
  #content .research-page h1,
  #content .research-page h2,
  #content .research-page h3,
  #content .research-title,
  #content .available-research-title {
    margin-top: 7px !important;
    margin-bottom: 6px !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.04em !important;
  }

  /* Stop the old table from creating horizontal scrolling */
  #content .research-body .tactical-scroll,
  #content .research-page .tactical-scroll,
  #content .research-table-wrap,
  #content .available-research-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* Table becomes a stack of cards */
  #content .research-body table,
  #content .research-page table,
  #content .research-table,
  #content #available-research-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
    border-collapse: separate !important;
  }

  #content .research-body thead,
  #content .research-page thead,
  #content .research-table thead,
  #content #available-research-table thead {
    display: none !important;
  }

  #content .research-body tbody,
  #content .research-page tbody,
  #content .research-table tbody,
  #content #available-research-table tbody {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #content .research-body tr,
  #content .research-page tr,
  #content .research-table tr,
  #content #available-research-table tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "name name"
      "cost amount"
      "workers workers" !important;
    gap: 4px 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;

    border: 1px solid rgba(139, 94, 17, 0.58) !important;
    background: rgba(2, 11, 14, 0.72) !important;
  }

  /* Preserve obvious selected-row feedback */
  #content .research-body tr.selected,
  #content .research-body tr.active,
  #content .research-page tr.selected,
  #content .research-page tr.active,
  #content .research-table tr.selected,
  #content .research-table tr.active {
    outline: 2px solid rgba(205, 145, 26, 0.9) !important;
    outline-offset: -2px !important;
    background: rgba(35, 58, 75, 0.88) !important;
  }

  /* Reset desktop table-cell rules */
  #content .research-body td,
  #content .research-page td,
  #content .research-table td,
  #content #available-research-table td {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;

    font-size: 16px !important;
    line-height: 1.15 !important;
    text-align: right !important;
    white-space: normal !important;
  }

  /* Name */
  #content .research-body td:nth-child(1),
  #content .research-page td:nth-child(1),
  #content .research-table td:nth-child(1),
  #content #available-research-table td:nth-child(1) {
    grid-area: name !important;
    display: block !important;
    padding-bottom: 5px !important;

    border-bottom: 1px solid rgba(139, 94, 17, 0.5) !important;

    font-size: 18px !important;
    font-weight: 600 !important;
    text-align: left !important;
    color: #d8e7ee !important;
  }

  /* Cost */
  #content .research-body td:nth-child(2),
  #content .research-page td:nth-child(2),
  #content .research-table td:nth-child(2),
  #content #available-research-table td:nth-child(2) {
    grid-area: cost !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    text-align: left !important;
  }

  #content .research-body td:nth-child(2)::before,
  #content .research-page td:nth-child(2)::before,
  #content .research-table td:nth-child(2)::before,
  #content #available-research-table td:nth-child(2)::before {
    content: "Cost:" !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #d9b56b !important;
  }

  /* Amount complete */
  #content .research-body td:nth-child(3),
  #content .research-page td:nth-child(3),
  #content .research-table td:nth-child(3),
  #content #available-research-table td:nth-child(3) {
    grid-area: amount !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    text-align: right !important;
  }

  #content .research-body td:nth-child(3)::before,
  #content .research-page td:nth-child(3)::before,
  #content .research-table td:nth-child(3)::before,
  #content #available-research-table td:nth-child(3)::before {
    content: "Complete:" !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #d9b56b !important;
  }

  /* Workers */
  #content .research-body td:nth-child(4),
  #content .research-page td:nth-child(4),
  #content .research-table td:nth-child(4),
  #content #available-research-table td:nth-child(4) {
    grid-area: workers !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding-top: 4px !important;
  }

  #content .research-body td:nth-child(4)::before,
  #content .research-page td:nth-child(4)::before,
  #content .research-table td:nth-child(4)::before,
  #content #available-research-table td:nth-child(4)::before {
    content: "Workers" !important;
    flex: 0 0 auto !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #d9b56b !important;
  }

  /* Worker input */
  #content .research-body input[type="number"],
  #content .research-page input[type="number"],
  #content .research-table input,
  #content #available-research-table input {
    display: block !important;

    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;

    height: 36px !important;
    min-height: 36px !important;

    margin: 0 !important;
    padding: 3px 9px !important;
    box-sizing: border-box !important;

    font-size: 16px !important;
    text-align: right !important;
  }

  /* Bottom buttons: normal compact stack */
  #content #update-workers,
  #content #updateWorkers,
  #content #research-update-workers,
  #content #tech-tree,
  #content #techTree,
  #content #research-tech-tree {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 40px !important;
    height: auto !important;
    margin: 6px 0 0 !important;
    box-sizing: border-box !important;
  }

  #content .research-button-container,
  #content .research-buttons,
  #content .research-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    margin-top: 7px !important;
  }

  /* Compact Research Tech Tree modal without changing its JS-driven structure. */
  #research-tech-popup {
    top: calc(var(--shell-header-height) + 4px) !important;
    right: 4px !important;
    bottom: 4px !important;
    left: 4px !important;
    width: auto !important;
    max-width: none !important;
  }

  #research-tech-popup .research-tech-popup-title-bar {
    min-height: 42px !important;
    padding: 6px 52px 6px 12px !important;
    font-size: 17px !important;
    line-height: 1.1 !important;
  }

  #research-tech-popup .research-tech-popup-close-button {
    top: 4px !important;
    right: 6px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
  }

  #research-tech-popup .research-tech-popup-shell {
    gap: 5px !important;
    padding: 5px !important;
  }

  #research-tech-popup .research-tech-selection-row {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 5px 7px !important;
    padding: 6px !important;
  }

  #research-tech-popup .research-tech-select {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 3px 7px !important;
    font-size: 15px !important;
  }

  #research-tech-popup .research-tech-sort-label {
    align-self: center !important;
    margin: 0 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  #research-tech-popup .research-tech-sort-select {
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 2px 6px !important;
    font-size: 14px !important;
  }

  #research-tech-popup #research-tech-details {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    font-size: 14px !important;
  }

  #research-tech-popup .research-tech-color-guide {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px 8px !important;
    padding: 5px 7px !important;
    font-size: 12px !important;
  }

  #research-tech-popup .research-tech-legend-item {
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  #research-tech-popup .research-tech-tree {
    gap: 6px !important;
    padding: 7px 5px !important;
    border-radius: 6px !important;
  }

  #research-tech-popup .research-tech-level {
    gap: 5px !important;
    margin: 0 !important;
    padding: 5px !important;
  }

  #research-tech-popup .research-tech-node-unavailable,
  #research-tech-popup .research-tech-node-available,
  #research-tech-popup .research-tech-node-completed {
    flex: 1 1 calc(50% - 3px) !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 6px 5px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }
}

/* =========================================================
   MOBILE CHAT BUTTON — INLINE WITH HEADER CONTROLS
   Visually docks the existing chat button into the second
   header row, to the right of the Premium expiration text.
   ========================================================= */

@media (max-width: 700px) {
  #chat-controls {
    position: fixed !important;

    top: 49px !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;

    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 10020 !important;
    transform: none !important;
  }

  #chat-controls .chat-button-wrapper {
    position: relative !important;
    display: block !important;

    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #chat-controls #chatButton {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    margin: 0 !important;
    padding: 4px !important;
    box-sizing: border-box !important;
  }

  #chat-controls #chatButton img {
    display: block !important;

    width: 25px !important;
    min-width: 25px !important;
    max-width: 25px !important;

    height: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;

    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
  }

  #chat-controls #unreadBadge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;

    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;

    font-size: 10px !important;
    line-height: 17px !important;
    text-align: center !important;

    z-index: 2 !important;
  }

  /* Reserve a little room so long expiration text cannot run
     underneath the chat control. */
  #overviewPanel .premium-info {
    padding-right: 48px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 420px) {
  #chat-controls {
    top: 47px !important;
    right: 6px !important;
  }

  #overviewPanel .premium-info {
    padding-right: 44px !important;
  }
}


/* =========================================================
   MOBILE RESEARCH — EXTRA COMPACT OVERRIDES
   Keeps the same card layout while reducing vertical height.
   ========================================================= */

@media (max-width: 700px) {

  #content .research-body tbody,
  #content .research-page tbody,
  #content .research-table tbody,
  #content #available-research-table tbody {
    gap: 4px !important;
  }

  #content .research-body tr,
  #content .research-page tr,
  #content .research-table tr,
  #content #available-research-table tr {
    gap: 2px 8px !important;
    padding: 6px 8px !important;
  }

  #content .research-body td:nth-child(1),
  #content .research-page td:nth-child(1),
  #content .research-table td:nth-child(1),
  #content #available-research-table td:nth-child(1) {
    padding-bottom: 3px !important;
    line-height: 1.05 !important;
  }

  #content .research-body td:nth-child(2),
  #content .research-page td:nth-child(2),
  #content .research-table td:nth-child(2),
  #content #available-research-table td:nth-child(2),
  #content .research-body td:nth-child(3),
  #content .research-page td:nth-child(3),
  #content .research-table td:nth-child(3),
  #content #available-research-table td:nth-child(3) {
    line-height: 1.05 !important;
  }

  #content .research-body td:nth-child(4),
  #content .research-page td:nth-child(4),
  #content .research-table td:nth-child(4),
  #content #available-research-table td:nth-child(4) {
    padding-top: 2px !important;
    line-height: 1 !important;
  }

  #content .research-body input[type="number"],
  #content .research-page input[type="number"],
  #content .research-table input,
  #content #available-research-table input {
    height: 34px !important;
    min-height: 34px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  #content .research-body h1,
  #content .research-body h2,
  #content .research-body h3,
  #content .research-page h1,
  #content .research-page h2,
  #content .research-page h3,
  #content .research-title,
  #content .available-research-title {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
}

/* 03 — OVERVIEW / ZONES */
/* The Overview zone list intentionally uses the game’s native layout. */

/* Compact the left-hand empire summary without affecting the Zones
   panel, its search controls, or the Building Summary button. */
@media screen {
  #content #overview-background-left > #level,
  #content #overview-background-left > .normal-text,
  #content #overview-background-left > .indented-text,
  #content #overview-background-left > .double-indented-text {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  #overview-building-summary-popup .overview-popup-title-bar {
    min-height: 44px !important;
    margin-bottom: 0 !important;
    padding: 5px 46px 5px 8px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    box-sizing: border-box !important;
  }

  #overview-building-summary-popup .overview-popup-body {
    gap: 6px !important;
    padding: 6px !important;
  }

  #overview-building-summary-popup .overview-summary-section {
    margin: 0 !important;
    padding: 6px !important;
    box-sizing: border-box !important;
  }

  #overview-building-summary-popup .overview-summary-title {
    margin: 0 0 4px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
  }

  #overview-building-summary-popup .overview-summary-list {
    border-radius: 4px !important;
    scrollbar-width: thin !important;
  }

  #overview-building-summary-popup .overview-summary-row {
    gap: 1px !important;
    padding: 4px 6px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  #overview-building-summary-popup .overview-summary-detail {
    margin-top: 1px !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  #overview-building-summary-popup .overview-summary-count {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
}

/* Diagnostic step 1: header text only. Do not style the list or its rows. */
@media (max-width: 420px) {
  #content #zone-list.grid-list {
    grid-template-columns:
      82px
      minmax(0, 1fr)
      40px
      44px
      44px !important;
    column-gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-right: 4px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  #content #zone-list > .grid-item,
  #content #zone-list > .zone-link {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #content #zone-list > .zone-link + .grid-item {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  #content #zone-list > .zone-link + .grid-item:not(:empty) {
    animation: neveron-overview-zone-name-marquee 8s linear infinite !important;
  }

  #content #zone-list > .sortable-header {
    font-size: 0 !important;
  }

  #content #zone-list > .sortable-header::before {
    font-size: 10px !important;
  }

  #content #zone-list > .sortable-header:nth-child(1)::before { content: "Loc" !important; }
  #content #zone-list > .sortable-header:nth-child(2)::before { content: "Name" !important; }
  #content #zone-list > .sortable-header:nth-child(3)::before { content: "Bldg" !important; }
  #content #zone-list > .sortable-header:nth-child(4)::before { content: "Max" !important; }
  #content #zone-list > .sortable-header:nth-child(5)::before { content: "Res" !important; }

  /* Diagnostic step 2: typography and cell padding only. */
  #content #zone-list > .zone-link,
  #content #zone-list > .grid-item:not(.sortable-header) {
    padding: 2px !important;
    font-size: 11px !important;
    line-height: 20px !important;
  }
}

@keyframes neveron-overview-zone-name-marquee {
  0%,
  20% {
    text-indent: 0;
  }

  100% {
    text-indent: -14ch;
  }
}


@media (max-width: 700px) {
    /* =========================================================
       INDIVIDUAL ZONE: PAGE FRAME
       ========================================================= */

    #content .zone-body {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      padding: 5px !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      box-sizing: border-box !important;
    }

    #content .zone-background {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      max-height: none !important;
      margin: 0 !important;
      padding: 8px !important;
      gap: 0 !important;
      overflow: visible !important;
      box-sizing: border-box !important;
    }

    /* =========================================================
       ZONE NAME / DEFAULT CONTROL
       ========================================================= */

    #content .zone-name-header {
      display: grid !important;
      grid-template-columns: 42px minmax(0, 1fr) !important;
      align-items: center !important;
      gap: 7px !important;
      margin: 0 0 6px !important;
      flex-wrap: nowrap !important;
    }

    #content #rename-zone.zone-button {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 42px !important;
      min-width: 42px !important;
      max-width: 42px !important;
      height: 42px !important;
      min-height: 42px !important;
      max-height: 42px !important;
      margin: 0 !important;
      padding: 3px !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
    }

    #content #rename-zone img {
      display: block !important;
      width: 34px !important;
      min-width: 34px !important;
      max-width: 34px !important;
      height: 34px !important;
      min-height: 34px !important;
      max-height: 34px !important;
      margin: 0 !important;
      object-fit: contain !important;
    }

    #content #zone-default.zone-large-text {
      min-width: 0 !important;
      margin: 0 !important;
      font-size: 15px !important;
      line-height: 1.15 !important;
      letter-spacing: 0.035em !important;
      white-space: normal !important;
    }

    /* =========================================================
       ZONE SUMMARY
       ========================================================= */

    #content .zone-panel {
      display: grid !important;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
      align-items: start !important;
      gap: 7px !important;
      margin: 0 0 6px !important;
      padding: 7px !important;
    }

    #content .zone-left-panel,
    #content .zone-right-panel {
      min-width: 0 !important;
    }

    #content .zone-panel .zone-large-text {
      margin: 0 0 3px !important;
      font-size: 11px !important;
      line-height: 1.18 !important;
      letter-spacing: 0.025em !important;
    }

    #content .zone-panel .zone-normal-text {
      margin: 0 0 2px !important;
      font-size: 11px !important;
      line-height: 1.2 !important;
      overflow-wrap: break-word !important;
    }

    /* =========================================================
       ZONE ACTIONS
       ========================================================= */

    #content .zone-body-actions-header {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 5px !important;
      margin: 0 0 6px !important;
      flex-wrap: nowrap !important;
    }

    #content .zone-body-button {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
      min-width: 0 !important;
      min-height: 39px !important;
      margin: 0 !important;
      padding: 5px 6px !important;
      font-size: 10px !important;
      line-height: 1.1 !important;
      letter-spacing: 0.025em !important;
      text-align: center !important;
      white-space: normal !important;
      box-sizing: border-box !important;
    }

    #content #zone-units {
      margin: 0 0 4px !important;
      font-size: 13px !important;
      line-height: 1.2 !important;
    }

    /* =========================================================
       BOTTOM UNIT TABLE

       This is a real table, unlike the Overview zone list. Keep
       the table model and give all five columns explicit widths.
       Long desktop headings become short mobile-only headings.
       ========================================================= */

    #content #zone-table-container.zone-container {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 4px !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
    }

    #content .zone-table-body-container {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      min-height: 0 !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
    }

    #content .zone-table-scroll {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      max-height: none !important;
      overflow-x: auto !important;
      overflow-y: visible !important;
      scrollbar-width: thin !important;
      -webkit-overflow-scrolling: touch !important;
    }

    #content .zone-table {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      table-layout: fixed !important;
      margin: 0 !important;
      box-sizing: border-box !important;
    }

    #content .zone-table th,
    #content .zone-table td {
      min-width: 0 !important;
      padding: 5px 3px !important;
      font-size: 10px !important;
      line-height: 1.15 !important;
      vertical-align: middle !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
      box-sizing: border-box !important;
    }

    #content .zone-table th {
      height: 29px !important;
      font-size: 0 !important;
      line-height: 29px !important;
      text-align: center !important;
    }

    #content .zone-table th::before {
      display: inline-block !important;
      font-size: 9px !important;
      line-height: 29px !important;
      letter-spacing: 0.015em !important;
      white-space: nowrap !important;
    }

    #content .zone-table th:nth-child(1)::before { content: "Name" !important; }
    #content .zone-table th:nth-child(2)::before { content: "Cmdr" !important; }
    #content .zone-table th:nth-child(3)::before { content: "Gun" !important; }
    #content .zone-table th:nth-child(4)::before { content: "Pilot" !important; }
    #content .zone-table th:nth-child(5)::before { content: "BV" !important; }

    #content .zone-table th:nth-child(1),
    #content .zone-table td:nth-child(1) { width: 31% !important; }

    #content .zone-table th:nth-child(2),
    #content .zone-table td:nth-child(2) { width: 29% !important; }

    #content .zone-table th:nth-child(3),
    #content .zone-table td:nth-child(3) {
      width: 12% !important;
      text-align: center !important;
    }

    #content .zone-table th:nth-child(4),
    #content .zone-table td:nth-child(4) {
      width: 14% !important;
      text-align: center !important;
    }

    #content .zone-table th:nth-child(5),
    #content .zone-table td:nth-child(5) {
      width: 14% !important;
      text-align: center !important;
    }

    #content .zone-name-link {
      display: block !important;
      min-width: 0 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    /* Dialogs stay below the compact shared header. */
    #content .zone-popup {
      width: calc(100vw - 16px) !important;
      max-width: calc(100vw - 16px) !important;
      max-height: calc(100dvh - var(--shell-header-height) - 16px) !important;
      overflow-y: auto !important;
      box-sizing: border-box !important;
    }
}

/* 04 — BUILDINGS */
/* Compact the dynamically populated Add Buildings dialog. */
@media screen {
  #building-popup.building-popup {
    width: calc(100vw - 12px) !important;
    min-width: 0 !important;
    max-width: 620px !important;
    max-height: calc(100dvh - var(--shell-header-height, 113px) - 12px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  #building-popup .tactical-popup-title-bar {
    min-height: 44px !important;
    padding: 5px 46px 5px 8px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    box-sizing: border-box !important;
  }

  #building-popup .tactical-popup-body {
    gap: 6px !important;
    padding: 6px !important;
    box-sizing: border-box !important;
  }

  #building-popup .tactical-section {
    margin: 0 0 6px !important;
    padding: 6px !important;
    box-sizing: border-box !important;
  }

  #building-popup .input-container,
  #building-popup .select-container,
  #building-popup .checkbox-container {
    gap: 2px !important;
    min-height: 0 !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
  }

  #building-popup label {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  #building-popup select,
  #building-popup input:not([type="checkbox"]) {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 1px 0 0 !important;
    padding: 4px 6px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    box-sizing: border-box !important;
  }

  #building-popup button:not(.tactical-popup-close-button) {
    min-height: 36px !important;
    margin: 2px 0 0 !important;
    padding: 4px 7px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  #building-popup table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    box-sizing: border-box !important;
  }

  #building-popup th,
  #building-popup td {
    min-width: 0 !important;
    padding: 4px 3px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
  }
}
/*
 Neveron Mobile 04 - Buildings Top Table
 Requires: Neveron Mobile 01 - Header
 Scope: The top "Buildings" table only.
*/

@media (max-width: 700px) {

  /* Tighten only the first Buildings panel. */
  #content #building-section {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  #content #building-section .building-large-text {
    margin: 0 0 8px !important;
    font-size: 22px !important;
    line-height: 1.05 !important;
  }

  /*
   The base mobile CSS changes the table to width:max-content.
   Restore a true fixed table so all six columns share the available width.
  */
  #content #building-section .building-table-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  #content #building-section .building-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  /* Compact column allocation. */
  #content #building-section .building-table th:nth-child(1),
  #content #building-section .building-table td:nth-child(1) {
    width: 30px !important;
  }

  #content #building-section .building-table th:nth-child(2),
  #content #building-section .building-table td:nth-child(2) {
    width: auto !important;
  }

  #content #building-section .building-table th:nth-child(3),
  #content #building-section .building-table td:nth-child(3) {
    width: 48px !important;
  }

  #content #building-section .building-table th:nth-child(4),
  #content #building-section .building-table td:nth-child(4) {
    width: 42px !important;
  }

  #content #building-section .building-table th:nth-child(5),
  #content #building-section .building-table td:nth-child(5) {
    width: 46px !important;
  }

  #content #building-section .building-table th:nth-child(6),
  #content #building-section .building-table td:nth-child(6) {
    width: 56px !important;
  }

  /* Dense but still readable cells. */
  #content #building-section .building-table th,
  #content #building-section .building-table td {
    height: 38px !important;
    min-height: 38px !important;
    padding: 4px 3px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    font-size: 14px !important;
    line-height: 30px !important;
    vertical-align: middle !important;
  }

  #content #building-section .building-table th {
    font-size: 0 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
  }

  /* Short mobile headings. */
  #content #building-section .building-table th:nth-child(2)::before {
    content: "Type" !important;
  }

  #content #building-section .building-table th:nth-child(3)::before {
    content: "#" !important;
  }

  #content #building-section .building-table th:nth-child(4)::before {
    content: "CF" !important;
  }

  #content #building-section .building-table th:nth-child(5)::before {
    content: "Lvl" !important;
  }

  #content #building-section .building-table th:nth-child(6)::before {
    content: "Base" !important;
  }

  #content #building-section .building-table th:nth-child(n + 2)::before {
    display: inline-block !important;
    font-size: 12px !important;
    line-height: 30px !important;
  }

  /* Keep the checkbox column functional and compact. */
  #content #building-section .building-table th:first-child,
  #content #building-section .building-table td:first-child {
    padding: 3px !important;
    text-align: center !important;
  }

  #content #building-section input[type="checkbox"] {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    vertical-align: middle !important;
  }

  /* Numeric data aligns cleanly. */
  #content #building-section .building-table td:nth-child(n + 3) {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
  }

  /*
   Building type marquee.
   CSS alone cannot detect overflow, so short names also animate.
   Long names pause at both ends before returning.
  */
  #content #building-section .building-table tbody td:nth-child(2) {
    text-align: left !important;
    text-overflow: clip !important;
    animation: neveron-building-type-marquee 8s ease-in-out infinite !important;
  }

  #content #building-section .building-table tbody td:nth-child(2):hover,
  #content #building-section .building-table tbody td:nth-child(2):active {
    animation-play-state: paused !important;
  }

  /* Tighten controls directly below this table. */
  #content #building-section #building-info-container {
    gap: 6px !important;
    margin-top: 8px !important;
  }

  #content #building-section #building-upgrade,
  #content #building-section #building-destroy {
    min-height: 40px !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
  }

  #content #building-section #building-buildings,
  #content #building-section #building-spaces {
    margin-top: 7px !important;
    margin-right: 5px !important;
    padding: 5px 8px !important;
    font-size: 13px !important;
  }
}

@keyframes neveron-building-type-marquee {
  0%,
  20% {
    text-indent: 0;
  }

  68%,
  88% {
    text-indent: -10ch;
  }

  100% {
    text-indent: 0;
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  #content #building-section .building-table tbody td:nth-child(2) {
    animation: none !important;
    text-overflow: ellipsis !important;
  }
}


/* =========================================================
   MOBILE BUILDINGS — SIMPLE MARQUEE + UNDER CONSTRUCTION
   ========================================================= */

@media (max-width: 700px) {

  /* Replace the earlier back-and-forth marquee with a simple
     continuous leftward loop. */
  #content #building-section .building-table tbody td:nth-child(2) {
    animation: neveron-building-scroll-left 7s linear infinite !important;
  }

  /* Under Construction panel */
  #content #under-construction-section {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  #content #under-construction-section .building-large-text {
    margin: 0 0 8px !important;
    font-size: 22px !important;
    line-height: 1.05 !important;
  }

  #content #under-construction-section .building-table-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  #content #under-construction-section .building-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  /* Type / Qty / completion date */
  #content #under-construction-section .building-table th:nth-child(1),
  #content #under-construction-section .building-table td:nth-child(1) {
    width: 32% !important;
  }

  #content #under-construction-section .building-table th:nth-child(2),
  #content #under-construction-section .building-table td:nth-child(2) {
    width: 44px !important;
  }

  #content #under-construction-section .building-table th:nth-child(3),
  #content #under-construction-section .building-table td:nth-child(3) {
    width: auto !important;
  }

  #content #under-construction-section .building-table th,
  #content #under-construction-section .building-table td {
    height: 38px !important;
    min-height: 38px !important;
    padding: 4px 4px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    font-size: 14px !important;
    line-height: 30px !important;
    vertical-align: middle !important;
  }

  #content #under-construction-section .building-table th {
    font-size: 0 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
  }

  #content #under-construction-section .building-table th:nth-child(1)::before {
    content: "Type" !important;
  }

  #content #under-construction-section .building-table th:nth-child(2)::before {
    content: "#" !important;
  }

  #content #under-construction-section .building-table th:nth-child(3)::before {
    content: "Complete" !important;
  }

  #content #under-construction-section .building-table th::before {
    display: inline-block !important;
    font-size: 12px !important;
    line-height: 30px !important;
  }

  #content #under-construction-section .building-table td:nth-child(2) {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* Both potentially long columns use the same simple left loop. */
  #content #under-construction-section .building-table tbody td:nth-child(1),
  #content #under-construction-section .building-table tbody td:nth-child(3) {
    animation: neveron-building-scroll-left 7s linear infinite !important;
  }

  #content #under-construction-section .building-table tbody td:nth-child(1):hover,
  #content #under-construction-section .building-table tbody td:nth-child(1):active,
  #content #under-construction-section .building-table tbody td:nth-child(3):hover,
  #content #under-construction-section .building-table tbody td:nth-child(3):active {
    animation-play-state: paused !important;
  }

  #content #building-under-construction {
    margin-top: 7px !important;
    margin-right: 5px !important;
    padding: 5px 8px !important;
    font-size: 13px !important;
  }

  #content #building-add {
    min-height: 40px !important;
    margin-top: 8px !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
  }
}

@keyframes neveron-building-scroll-left {
  from {
    text-indent: 0;
  }

  to {
    text-indent: -12ch;
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  #content #building-section .building-table tbody td:nth-child(2),
  #content #under-construction-section .building-table tbody td:nth-child(1),
  #content #under-construction-section .building-table tbody td:nth-child(3) {
    animation: none !important;
    text-overflow: ellipsis !important;
  }
}


/* =========================================================
   MOBILE BUILDINGS — V2 TIGHT LOOP MARQUEE
   Uses a repeated text-shadow copy so the next label enters
   before the first one fully leaves, reducing the blank gap.
   ========================================================= */

@media (max-width: 700px) {

  /* Main Buildings table: continuous left loop with a short separator gap. */
  #content #building-section .building-table tbody td:nth-child(2) {
    text-shadow: 14ch 0 currentColor !important;
    animation: neveron-building-tight-loop 7s linear infinite !important;
  }

  /* Under Construction: same tighter loop for Type and Complete. */
  #content #under-construction-section .building-table tbody td:nth-child(1),
  #content #under-construction-section .building-table tbody td:nth-child(3) {
    text-shadow: 14ch 0 currentColor !important;
    animation: neveron-building-tight-loop 7s linear infinite !important;
  }

  /* Give the completion date more separation from the quantity column. */
  #content #under-construction-section .building-table th:nth-child(3),
  #content #under-construction-section .building-table td:nth-child(3) {
    padding-left: 10px !important;
  }

  /* Slightly rebalance the under-construction widths toward the date. */
  #content #under-construction-section .building-table th:nth-child(1),
  #content #under-construction-section .building-table td:nth-child(1) {
    width: 29% !important;
  }

  #content #under-construction-section .building-table th:nth-child(2),
  #content #under-construction-section .building-table td:nth-child(2) {
    width: 40px !important;
  }

  #content #under-construction-section .building-table th:nth-child(3),
  #content #under-construction-section .building-table td:nth-child(3) {
    width: auto !important;
  }
}

@keyframes neveron-building-tight-loop {
  from {
    text-indent: 0;
  }

  to {
    text-indent: -14ch;
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  #content #building-section .building-table tbody td:nth-child(2),
  #content #under-construction-section .building-table tbody td:nth-child(1),
  #content #under-construction-section .building-table tbody td:nth-child(3) {
    text-shadow: none !important;
  }
}


/* =========================================================
   MOBILE BUILDINGS — V3 CLEAN DATE DISPLAY
   Keeps marquee on building type only.
   Completion date becomes a static two-line clipped field.
   ========================================================= */

@media (max-width: 700px) {

  /* Disable the marquee and repeated text on the date column. */
  #content #under-construction-section .building-table tbody td:nth-child(3) {
    animation: none !important;
    text-shadow: none !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;

    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: anywhere !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    padding: 4px 4px 4px 8px !important;
    font-size: 11px !important;
    line-height: 17px !important;
    text-align: left !important;
  }

  /* Let the whole row grow enough for a readable two-line date. */
  #content #under-construction-section .building-table tbody tr,
  #content #under-construction-section .building-table tbody td {
    height: 44px !important;
    min-height: 44px !important;
  }

  /* Rebalance the table so the date gets most of the available room. */
  #content #under-construction-section .building-table th:nth-child(1),
  #content #under-construction-section .building-table td:nth-child(1) {
    width: 30% !important;
  }

  #content #under-construction-section .building-table th:nth-child(2),
  #content #under-construction-section .building-table td:nth-child(2) {
    width: 34px !important;
  }

  #content #under-construction-section .building-table th:nth-child(3),
  #content #under-construction-section .building-table td:nth-child(3) {
    width: auto !important;
  }

  /* Keep only the Type column moving. */
  #content #under-construction-section .building-table tbody td:nth-child(1) {
    text-shadow: 14ch 0 currentColor !important;
    animation: neveron-building-tight-loop 7s linear infinite !important;
  }
}

/* =========================================================
   MOBILE BUILDINGS — COMPACT EMPIRE ADMINISTRATION
   Tightens the new administration section to reduce vertical
   scrolling while preserving all controls and status details.
   ========================================================= */

@media (max-width: 700px) {

  #content #building-administration-section {
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 8px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
  }

  #content #building-administration-section .building-administration-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 6px 8px !important;
    margin-bottom: 7px !important;
  }

  #content #building-administration-title {
    margin: 0 0 2px !important;
    font-size: 20px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.05em !important;
  }

  #content #building-administration-status {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  #content #building-administration-section .tactical-status-chip {
    align-self: start !important;
    min-height: 22px !important;
    padding: 2px 7px !important;
    font-size: 10px !important;
    line-height: 16px !important;
    white-space: nowrap !important;
  }

  #content #building-administration-section .building-administration-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  #content #building-administration-section .building-administration-card {
    gap: 5px !important;
    min-width: 0 !important;
    padding: 7px 8px !important;
  }

  #content #building-administration-section .building-administration-card-title {
    margin: 0 0 1px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.04em !important;
  }

  #content #building-administration-section .building-administration-row {
    align-items: baseline !important;
    gap: 8px !important;
    min-height: 20px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  #content #building-administration-section .building-administration-row span {
    min-width: 0 !important;
  }

  #content #building-administration-section .building-administration-row strong {
    flex: 0 0 auto !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  #content #building-administration-section .building-administration-help {
    margin: 1px 0 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  #content #building-administration-section .building-administration-worker-field {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 92px !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  #content #building-administration-workers {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 3px 7px !important;
    font-size: 14px !important;
    text-align: right !important;
  }

  #content #building-capital-action,
  #content #building-administration-workers-save {
    width: 100% !important;
    min-height: 34px !important;
    height: auto !important;
    margin-top: 2px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  /* Capacity card is all read-only data, so make it denser still. */
  #content #building-administration-projection-card {
    gap: 3px !important;
  }

  #content #building-administration-projection-card .building-administration-row {
    min-height: 18px !important;
  }
}

/* 05 — MANUFACTURING */
  @media (max-width: 767px) {

    /* =========================================================
       PAGE FRAME
       ========================================================= */

    .manufacturing-container {
      padding: 5px !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }

    .manufacturing-background {
      width: 100% !important;
      height: auto !important;
      min-height: 100% !important;
      margin: 0 !important;
      padding: 8px !important;
      gap: 7px !important;
      overflow: visible !important;
      box-sizing: border-box !important;
    }

    /* =========================================================
       FILTER
       ========================================================= */

    .manufacturing-toolbar {
      display: grid !important;
      grid-template-columns: auto minmax(0, 1fr) !important;
      align-items: center !important;
      gap: 7px !important;
      flex-wrap: nowrap !important;
    }

    .manufacturing-toolbar label {
      font-size: 15px !important;
      line-height: 1.2 !important;
    }

    #manufacturing-filter {
      width: 100% !important;
      min-width: 0 !important;
      min-height: 40px !important;
      margin: 0 !important;
      padding: 5px 8px !important;
      font-size: 15px !important;
      box-sizing: border-box !important;
    }

    /* =========================================================
       TABS
       Keep the game's real buttons and allow one deliberate,
       short horizontal scroll instead of stacking five rows.
       ========================================================= */

    .manufacturing-tabs {
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: 3px !important;
      margin: 0 0 6px !important;
      padding: 0 0 6px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      scrollbar-width: thin !important;
      -webkit-overflow-scrolling: touch !important;
    }

    .manufacturing-tabs .manufacturing-tab-button-m.active,
    .manufacturing-tabs .manufacturing-tab-button-m.inactive {
      flex: 0 0 auto !important;
      width: auto !important;
      min-width: 0 !important;
      min-height: 40px !important;
      margin: 0 !important;
      padding: 7px 10px !important;
      font-size: 12px !important;
      line-height: 1 !important;
      letter-spacing: 0.035em !important;
      white-space: nowrap !important;
    }

    /* =========================================================
       ACTIVE PRODUCTION TAB
       This remains a real table. No grid/card conversion, so
       sorting and row-bound worker controls retain DOM order.
       ========================================================= */

    #tab-m1.manufacturing-tab-content {
      gap: 5px !important;
      max-height: none !important;
      overflow: visible !important;
    }

    #manufacturing-available-workers {
      margin: 0 !important;
      font-size: 15px !important;
      line-height: 1.25 !important;
    }

    .manufacturing-table-wrapper {
      width: 100% !important;
      height: auto !important;
      max-height: none !important;
      margin: 0 !important;
      overflow-x: auto !important;
      overflow-y: visible !important;
      border-radius: 3px !important;
      -webkit-overflow-scrolling: touch !important;
    }

    .manufacturing-production-table {
      width: 560px !important;
      min-width: 560px !important;
      max-width: none !important;
      table-layout: fixed !important;
      margin: 0 !important;
    }

    .manufacturing-production-table th,
    .manufacturing-production-table td {
      min-width: 0 !important;
      padding: 6px 5px !important;
      font-size: 12px !important;
      line-height: 1.22 !important;
      vertical-align: middle !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
    }

    .manufacturing-production-table th {
      height: 34px !important;
      padding-top: 4px !important;
      padding-bottom: 4px !important;
      white-space: nowrap !important;
    }

    /* The source header declares five columns, but each body row
       also contains a sixth Sell cell. Define all six explicitly. */
    .manufacturing-production-table th:nth-child(1),
    .manufacturing-production-table td:nth-child(1) { width: 128px !important; }

    .manufacturing-production-table th:nth-child(2),
    .manufacturing-production-table td:nth-child(2) { width: 42px !important; text-align: center !important; }

    .manufacturing-production-table th:nth-child(3),
    .manufacturing-production-table td:nth-child(3) { width: 66px !important; text-align: center !important; }

    .manufacturing-production-table th:nth-child(4),
    .manufacturing-production-table td:nth-child(4) { width: 68px !important; text-align: center !important; }

    .manufacturing-production-table th:nth-child(5),
    .manufacturing-production-table td:nth-child(5) { width: 178px !important; }

    .manufacturing-production-table td:nth-child(6) { width: 58px !important; text-align: center !important; }

    .manufacturing-table th.sortable {
      padding-right: 16px !important;
    }

    .manufacturing-table th.sortable::after {
      right: 3px !important;
    }

    /* Short mobile-only headings. */
    .manufacturing-production-table th:nth-child(2),
    .manufacturing-production-table th:nth-child(3),
    .manufacturing-production-table th:nth-child(4),
    .manufacturing-production-table th:nth-child(5) {
      font-size: 0 !important;
    }

    .manufacturing-production-table th:nth-child(2)::before { content: "Stk"; font-size: 12px; }
    .manufacturing-production-table th:nth-child(3)::before { content: "Wkr"; font-size: 12px; }
    .manufacturing-production-table th:nth-child(4)::before { content: "Runs"; font-size: 12px; }
    .manufacturing-production-table th:nth-child(5)::before { content: "Res"; font-size: 12px; }

    .manufacturing-name-text {
      display: block !important;
      white-space: normal !important;
      overflow-wrap: break-word !important;
    }

    .manufacturing-resources-column {
      max-width: none !important;
      font-size: 11px !important;
    }

    .manufacturing-resource-line {
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    .manufacturing-production-table input {
      width: 100% !important;
      min-width: 0 !important;
      min-height: 38px !important;
      height: 38px !important;
      padding: 4px !important;
      font-size: 14px !important;
      box-sizing: border-box !important;
    }

    .manufacturing-production-table td:nth-child(6) button {
      width: 52px !important;
      min-width: 52px !important;
      min-height: 38px !important;
      padding: 5px !important;
      font-size: 12px !important;
    }

    /* =========================================================
       UPDATE ACTION
       ========================================================= */

    .manufacturing-action-bar {
      position: sticky !important;
      bottom: 0 !important;
      justify-content: stretch !important;
      margin: 0 !important;
      padding: 6px 0 2px !important;
      z-index: 5 !important;
    }

    #manufacturing-apply,
    #manufacturing-apply.tactical-button,
    #manufacturing-apply.tactical-button-primary {
      width: 100% !important;
      min-width: 0 !important;
      min-height: 42px !important;
      margin: 0 !important;
      padding: 0 12px !important;
      font-size: 13px !important;
    }
  }

/* Manufacturing compact two-line rows. */
@media (max-width: 767px) {
  .manufacturing-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding-bottom: 5px !important;
    overflow: visible !important;
  }

  .manufacturing-tabs .manufacturing-tab-button-m.active,
  .manufacturing-tabs .manufacturing-tab-button-m.inactive {
    width: 100% !important;
    min-height: 38px !important;
    padding: 5px 3px !important;
    font-size: 10px !important;
    white-space: normal !important;
  }

  #tab1-button.manufacturing-tab-button-m {
    font-size: 0 !important;
    overflow: hidden !important;
  }

  #tab1-button.manufacturing-tab-button-m::after {
    content: "MFG" !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
  }

  .manufacturing-table-wrapper {
    overflow-x: hidden !important;
  }

  .manufacturing-production-table,
  .manufacturing-production-table thead,
  .manufacturing-production-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .manufacturing-production-table tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px 54px 58px !important;
    grid-template-areas:
      "name name stock sell"
      "workers runs resources resources" !important;
    width: 100% !important;
    min-width: 0 !important;
    border-bottom: 1px solid rgba(240, 165, 26, 0.22) !important;
    box-sizing: border-box !important;
  }

  .manufacturing-production-table th,
  .manufacturing-production-table td {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: auto !important;
    padding: 4px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .manufacturing-production-table th:nth-child(1),
  .manufacturing-production-table td:nth-child(1) { grid-area: name !important; }
  .manufacturing-production-table th:nth-child(2),
  .manufacturing-production-table td:nth-child(2) { grid-area: stock !important; justify-content: center !important; }
  .manufacturing-production-table th:nth-child(3),
  .manufacturing-production-table td:nth-child(3) { grid-area: workers !important; }
  .manufacturing-production-table th:nth-child(4),
  .manufacturing-production-table td:nth-child(4) { grid-area: runs !important; }
  .manufacturing-production-table th:nth-child(5),
  .manufacturing-production-table td:nth-child(5) { grid-area: resources !important; }
  .manufacturing-production-table td:nth-child(6) { grid-area: sell !important; }

  .manufacturing-production-table thead tr {
    grid-template-areas:
      "name name stock sell"
      "workers runs resources resources" !important;
  }

  .manufacturing-production-table .manufacturing-name-text {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }

  .manufacturing-production-table input,
  .manufacturing-production-table td:nth-child(6) button {
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 3px !important;
  }

  .manufacturing-production-table .manufacturing-resources-column {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px 6px !important;
    align-content: center !important;
    min-height: 42px !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  .manufacturing-production-table .manufacturing-resource-line {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Manufacturing card correction: labels live inside each row. */
@media (max-width: 767px) {
  .manufacturing-production-table thead {
    display: none !important;
  }

  .manufacturing-production-table tbody {
    display: block !important;
  }

  .manufacturing-production-table tbody tr {
    grid-template-columns: 68px 68px minmax(0, 1fr) 54px !important;
    grid-template-areas:
      "name name stock sell"
      "workers runs resources resources" !important;
    padding: 6px !important;
    row-gap: 5px !important;
    column-gap: 5px !important;
  }

  .manufacturing-production-table tbody td {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .manufacturing-production-table tbody td:nth-child(1) {
    align-items: center !important;
    min-height: 34px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .manufacturing-production-table tbody td:nth-child(2),
  .manufacturing-production-table tbody td:nth-child(3),
  .manufacturing-production-table tbody td:nth-child(4),
  .manufacturing-production-table tbody td:nth-child(5) {
    position: relative !important;
    padding-top: 13px !important;
  }

  .manufacturing-production-table tbody td:nth-child(2)::before,
  .manufacturing-production-table tbody td:nth-child(3)::before,
  .manufacturing-production-table tbody td:nth-child(4)::before,
  .manufacturing-production-table tbody td:nth-child(5)::before {
    position: absolute !important;
    top: 0 !important;
    left: 1px !important;
    color: #d9b56b !important;
    font-family: var(--font-display) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 11px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  .manufacturing-production-table tbody td:nth-child(2)::before { content: "Stk" !important; }
  .manufacturing-production-table tbody td:nth-child(3)::before { content: "Wkr" !important; }
  .manufacturing-production-table tbody td:nth-child(4)::before { content: "Runs" !important; }
  .manufacturing-production-table tbody td:nth-child(5)::before { content: "Res" !important; }

  .manufacturing-production-table tbody td:nth-child(2) {
    justify-content: flex-end !important;
    padding-right: 3px !important;
    font-size: 12px !important;
  }

  .manufacturing-production-table tbody td:nth-child(6) {
    align-items: center !important;
    justify-content: stretch !important;
  }

  .manufacturing-production-table tbody td:nth-child(6) button {
    width: 54px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 3px 1px !important;
    font-size: 9px !important;
    letter-spacing: 0.02em !important;
  }

  .manufacturing-production-table tbody input {
    height: 34px !important;
    min-height: 34px !important;
    padding: 2px 4px !important;
    font-size: 13px !important;
  }

  .manufacturing-production-table tbody .manufacturing-resources-column {
    display: block !important;
    min-height: 47px !important;
    max-height: 47px !important;
    padding: 13px 6px 0 0 !important;
    font-size: 9px !important;
    line-height: 11px !important;
    overflow: hidden !important;
  }

  .manufacturing-production-table tbody .manufacturing-resource-line {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .manufacturing-production-table tbody .manufacturing-resource-line:not(:last-child)::after {
    content: none !important;
  }
}

/* Manufacturing Resources: source rows have 3 cells but only 2 headers. */
@media (max-width: 767px) {
  #tab-m3 .manufacturing-table-wrapper {
    overflow-x: hidden !important;
  }

  #tab-m3 .manufacturing-table,
  #tab-m3 .manufacturing-table thead,
  #tab-m3 .manufacturing-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #tab-m3 .manufacturing-table tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 52px 58px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #tab-m3 .manufacturing-table th,
  #tab-m3 .manufacturing-table td,
  #tab-m3 .manufacturing-table thead tr::after {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 5px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #tab-m3 .manufacturing-table th:first-child,
  #tab-m3 .manufacturing-table td:first-child {
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  #tab-m3 .manufacturing-table th:nth-child(2),
  #tab-m3 .manufacturing-table td:nth-child(2) {
    justify-content: center !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
  }

  #tab-m3 .manufacturing-table th:nth-child(2) {
    font-size: 0 !important;
  }

  #tab-m3 .manufacturing-table th:nth-child(2)::before {
    content: "STK" !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
  }

  #tab-m3 .manufacturing-table thead tr::after {
    content: "Act" !important;
    justify-content: center !important;
    background: rgba(75, 47, 14, 0.35) !important;
    border-bottom: 1px solid rgba(143, 188, 201, 0.14) !important;
    color: #f0c16a !important;
    font-family: var(--font-display) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  #tab-m3 .manufacturing-table td:nth-child(3) {
    justify-content: center !important;
    padding: 3px !important;
  }

  #tab-m3 .manufacturing-table td:nth-child(3) button {
    width: 54px !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 3px 1px !important;
    font-size: 9px !important;
    letter-spacing: 0.02em !important;
  }
}

/* Inventory and Log: retain their real rows, sorting and pagination. */
@media screen {
  #tab-m2.manufacturing-tab-content,
  #tab-m5.manufacturing-tab-content {
    gap: 4px !important;
    min-width: 0 !important;
  }

  #tab-m2 .manufacturing-inventory-status,
  #tab-m5 .manufacturing-log-summary,
  #tab-m5 .manufacturing-log-state {
    margin: 0 0 3px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  #tab-m2 .manufacturing-table-wrapper,
  #tab-m5 .manufacturing-table-wrapper {
    margin: 0 !important;
    border-radius: 3px !important;
  }

  #tab-m2 .manufacturing-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    box-sizing: border-box !important;
  }

  #tab-m2 .manufacturing-table th,
  #tab-m2 .manufacturing-table td {
    min-width: 0 !important;
    height: auto !important;
    padding: 4px 5px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
  }

  #tab-m2 .manufacturing-table th:nth-child(1),
  #tab-m2 .manufacturing-table td:nth-child(1) {
    width: auto !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  #tab-m2 .manufacturing-table th:nth-child(2),
  #tab-m2 .manufacturing-table td:nth-child(2) {
    width: 54px !important;
    text-align: center !important;
  }

  #tab-m2 .manufacturing-table th:nth-child(3),
  #tab-m2 .manufacturing-table td:nth-child(3) {
    width: 72px !important;
    text-align: center !important;
  }

  #tab-m2 .manufacturing-row-actions,
  #tab-m2 .manufacturing-row-actions button {
    width: 100% !important;
    min-width: 0 !important;
  }

  #tab-m2 .manufacturing-row-actions button {
    min-height: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 3px 5px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  #tab-m5 .manufacturing-log-table {
    width: 100% !important;
    min-width: 0 !important;
    border-spacing: 0 5px !important;
  }

  #tab-m5 .manufacturing-log-table tr {
    gap: 3px 7px !important;
    padding: 6px !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
  }

  #tab-m5 .manufacturing-log-table td,
  #tab-m5 .manufacturing-log-table td:first-child {
    grid-template-columns: minmax(72px, 34%) minmax(0, 1fr) !important;
    gap: 3px 5px !important;
    min-width: 0 !important;
    padding: 3px 0 !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
  }

  #tab-m5 .manufacturing-log-table td::before {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  #tab-m5 .manufacturing-log-pagination {
    gap: 5px !important;
    margin-top: 5px !important;
  }

  #tab-m5 .manufacturing-log-pagination button {
    min-width: 0 !important;
    min-height: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 3px 7px !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  #tab-m5 .manufacturing-log-page {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }
}

/* 06 — FACTION */
  @media (max-width: 767px) {

    /* =========================================================
       PAGE FRAME
       ========================================================= */

    .faction-container {
      display: block !important;
      padding: 5px !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }

    .faction-background {
      width: 100% !important;
      max-width: 100% !important;
      max-height: none !important;
      margin: 0 !important;
      overflow: visible !important;
      box-sizing: border-box !important;
    }

    .faction-shell-content {
      width: auto !important;
      margin: 5px !important;
      padding: 7px !important;
      overflow-x: hidden !important;
      overflow-y: visible !important;
      scrollbar-gutter: auto !important;
      box-sizing: border-box !important;
    }

    /* =========================================================
       FACTION MENU
       A fixed two-by-two menu avoids a long horizontal strip.
       ========================================================= */

    #faction-tabs.faction-tabs {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 4px !important;
      width: 100% !important;
      margin: 0 0 7px !important;
      padding: 0 0 7px !important;
      overflow: visible !important;
      border-bottom: 1px solid rgba(240, 165, 26, 0.22) !important;
    }

    .faction-container #faction-tabs .faction-tab-button {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
      min-width: 0 !important;
      min-height: 40px !important;
      margin: 0 !important;
      padding: 6px 5px !important;
      font-size: 11px !important;
      line-height: 1.08 !important;
      letter-spacing: 0.025em !important;
      text-align: center !important;
      white-space: normal !important;
      overflow-wrap: normal !important;
      box-sizing: border-box !important;
    }

    /* =========================================================
       FACTION OVERVIEW
       ========================================================= */

    .faction-overview-card {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) 66px !important;
      align-items: start !important;
      gap: 8px !important;
      margin: 0 0 7px !important;
      padding: 8px !important;
    }

    .faction-overview-copy {
      min-width: 0 !important;
    }

    .faction-page-title {
      margin: 0 0 3px !important;
      font-size: 17px !important;
      line-height: 1.1 !important;
      letter-spacing: 0.045em !important;
    }

    .faction-muted-text {
      font-size: 11px !important;
      line-height: 1.25 !important;
    }

    .faction-description-text {
      margin-top: 5px !important;
      font-size: 12px !important;
      line-height: 1.3 !important;
    }

    .faction-logo-frame {
      width: 66px !important;
      min-width: 66px !important;
      height: 66px !important;
      border-radius: 4px !important;
    }

    /* =========================================================
       CURRENT FACTION ROSTER

       Each source <tr> remains one row with all six original
       cells. CSS only presents those cells as two visual lines:

       User | Empire    | Lvl
       Role | Last seen | Action
       ========================================================= */

    #faction-current.faction-shell-panel {
      width: 100% !important;
      margin: 0 !important;
      padding: 7px !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
    }

    #faction-member-count {
      margin: 0 0 5px !important;
      font-size: 15px !important;
      line-height: 1.15 !important;
      letter-spacing: 0.05em !important;
    }

    .faction-roster-table {
      display: block !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      border-collapse: separate !important;
      table-layout: auto !important;
      box-sizing: border-box !important;
    }

    .faction-roster-table thead,
    .faction-roster-table tbody {
      display: block !important;
      width: 100% !important;
    }

    .faction-roster-table tr {
      display: grid !important;
      grid-template-columns: minmax(68px, 0.8fr) minmax(108px, 1.55fr) 56px !important;
      grid-template-areas:
        "user empire level"
        "role seen action" !important;
      width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
    }

    .faction-roster-table thead tr {
      border-bottom: 1px solid rgba(240, 165, 26, 0.32) !important;
      background: rgba(75, 47, 14, 0.35) !important;
    }

    .faction-roster-table tbody tr {
      border-bottom: 1px solid rgba(143, 188, 201, 0.2) !important;
      background: rgba(4, 11, 16, 0.5) !important;
    }

    .faction-roster-table tbody tr:nth-child(even) {
      background: rgba(255, 255, 255, 0.025) !important;
    }

    .faction-roster-table th,
    .faction-roster-table td {
      display: flex !important;
      align-items: center !important;
      min-width: 0 !important;
      width: auto !important;
      min-height: 27px !important;
      padding: 4px 5px !important;
      border: 0 !important;
      font-size: 11px !important;
      line-height: 1.18 !important;
      white-space: normal !important;
      overflow-wrap: anywhere !important;
      box-sizing: border-box !important;
    }

    .faction-roster-table th {
      min-height: 25px !important;
      font-size: 10px !important;
      line-height: 1 !important;
      letter-spacing: 0.035em !important;
    }

    .faction-roster-table th:nth-child(1),
    .faction-roster-table td:nth-child(1) { grid-area: user !important; }

    .faction-roster-table th:nth-child(2),
    .faction-roster-table td:nth-child(2) { grid-area: empire !important; }

    .faction-roster-table th:nth-child(3),
    .faction-roster-table td:nth-child(3) {
      grid-area: level !important;
      justify-content: center !important;
      text-align: center !important;
    }

    .faction-roster-table th:nth-child(4),
    .faction-roster-table td:nth-child(4) { grid-area: role !important; }

    .faction-roster-table th:nth-child(5),
    .faction-roster-table td:nth-child(5) { grid-area: seen !important; }

    .faction-roster-table th:nth-child(6),
    .faction-roster-table td:nth-child(6) {
      grid-area: action !important;
      justify-content: center !important;
      padding-left: 2px !important;
      padding-right: 2px !important;
    }

    /* Short mobile headings. */
    .faction-roster-table th:nth-child(3),
    .faction-roster-table th:nth-child(5),
    .faction-roster-table th:nth-child(6) {
      font-size: 0 !important;
    }

    .faction-roster-table th:nth-child(3)::before { content: "Lvl"; font-size: 10px; }
    .faction-roster-table th:nth-child(5)::before { content: "Seen"; font-size: 10px; }
    .faction-roster-table th:nth-child(6)::before { content: "Act"; font-size: 10px; }

    .faction-roster-actions {
      display: block !important;
      width: 100% !important;
    }

    .faction-container .faction-roster-actions .reject-btn,
    .faction-roster-actions .tactical-button-danger {
      width: 100% !important;
      min-width: 0 !important;
      min-height: 28px !important;
      margin: 0 !important;
      padding: 4px 1px !important;
      font-size: 8px !important;
      line-height: 1 !important;
      letter-spacing: 0 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
    }

    /* Keep other faction panels and dialogs within the viewport. */
    .faction-tab-panel {
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .faction-popup {
      width: calc(100vw - 16px) !important;
      max-width: calc(100vw - 16px) !important;
    }
  }

/* Manufacturing Requests and Admin use the same card/form system.
   Preserve their layout while removing desktop-sized spacing. */
@media screen {
  #faction-admin-view,
  #faction-admin-grid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #faction-admin-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow-x: hidden !important;
  }

  #faction-admin-grid > .faction-admin-card {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #faction-requests-view .faction-admin-grid,
  #faction-admin-view .faction-admin-grid {
    gap: 6px !important;
  }

  #faction-requests-view .faction-admin-card,
  #faction-admin-view .faction-admin-card {
    margin: 0 !important;
    padding: 7px !important;
    box-sizing: border-box !important;
  }

  #faction-requests-view .faction-card-title,
  #faction-admin-view .faction-card-title {
    margin: 0 0 5px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
  }

  #faction-requests-view .input-container,
  #faction-admin-view .input-container,
  #faction-admin-view .select-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 2px !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #faction-requests-view .input-container label,
  #faction-admin-view .input-container label,
  #faction-admin-view .select-container label {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  #faction-requests-view select,
  #faction-requests-view input,
  #faction-admin-view select,
  #faction-admin-view input:not([type="checkbox"]) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    margin: 1px 0 0 !important;
    padding: 4px 6px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    box-sizing: border-box !important;
  }

  #faction-admin-view textarea {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 1px 0 0 !important;
    padding: 5px 6px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
  }

  #faction-admin-view .faction-actions-row {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #faction-requests-view textarea {
    width: 100% !important;
    min-height: 58px !important;
    height: 58px !important;
    margin: 1px 0 0 !important;
    padding: 5px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
  }

  #faction-requests-view .faction-admin-card > button,
  #faction-admin-view .faction-admin-card button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    margin: 2px 0 0 !important;
    padding: 4px 7px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  #faction-admin-view .faction-muted-text {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  #faction-admin-view .checkbox-container {
    min-height: 30px !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
  }

  #faction-admin-view .faction-inline-checkbox-label {
    gap: 5px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  #faction-requests-view .faction-request-table-wrap {
    margin-top: 6px !important;
    padding: 5px !important;
  }

  #faction-requests-view .faction-empty-state,
  #faction-admin-view .faction-empty-state {
    margin-top: 4px !important;
    padding: 7px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  #faction-application.faction-shell-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 7px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #faction-application .faction-large-text {
    margin: 0 0 5px !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
  }

  #faction-application .faction-application-actions {
    position: static !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
  }

  #faction-application #faction-available-list {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 5px 0 0 !important;
    box-sizing: border-box !important;
  }

  #faction-application .faction-available-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 7px !important;
    box-sizing: border-box !important;
  }

  #faction-application .faction-available-logo {
    width: 72px !important;
    min-width: 72px !important;
    height: 72px !important;
    border-radius: 5px !important;
  }

  #faction-application .faction-available-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #faction-application .faction-available-title-row {
    gap: 5px !important;
  }

  #faction-application .faction-available-name {
    font-size: 14px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.035em !important;
    overflow-wrap: anywhere !important;
  }

  #faction-application .faction-available-meta {
    margin-top: 3px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  #faction-application .faction-available-description {
    margin-top: 5px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word !important;
  }
}

/* 07 — MILITARY */
@media (max-width: 767px) {
  .military-page {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    padding: 5px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .military-shell {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px !important;
    gap: 7px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .military-header {
    gap: 7px !important;
  }

  .military-title {
    font-size: 19px !important;
    line-height: 1.05 !important;
  }

  .military-summary {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .military-pressure-panel {
    padding: 6px !important;
  }

  .military-pressure-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .military-pressure-metric {
    min-width: 0 !important;
    padding: 5px 3px !important;
  }

  .military-pressure-label,
  .military-pressure-value,
  .military-pressure-chip {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  .military-header-controls,
  .military-select {
    width: 100% !important;
  }

  .military-select {
    min-height: 38px !important;
  }

  #military-tabs.military-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  #military-tabs .military-tab {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 5px 3px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.025em !important;
    white-space: normal !important;
  }

  #military-toolbar.military-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  #military-toolbar .military-toolbar-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 5px 4px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  /* Disabled actions reappear automatically when the game enables them. */
  #military-toolbar .military-toolbar-button:disabled {
    display: none !important;
  }

  #military-filters.military-filters {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  #military-filters .military-filter-group {
    display: grid !important;
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  #military-filters .military-filter-select {
    width: 100% !important;
    min-height: 36px !important;
  }

  .military-table-wrap,
  .military-table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    flex: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* Units has fourteen columns. Preserve every source row and control,
     but present the useful mobile fields as a four-line card. */
  .military-table:has(thead th:nth-child(14)),
  .military-table:has(thead th:nth-child(14)) thead,
  .military-table:has(thead th:nth-child(14)) tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .military-table:has(thead th:nth-child(14)) thead {
    display: none !important;
  }

  .military-table:has(thead th:nth-child(14)) tbody tr {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1fr) 62px !important;
    grid-template-areas:
      "select type type bv"
      "location location transit transit"
      "commander commander gun pilot"
      "mobilization mobilization lance training" !important;
    gap: 1px 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 4px 6px !important;
    border-bottom: 1px solid rgba(240, 165, 26, 0.26) !important;
    box-sizing: border-box !important;
  }

  .military-table:has(thead th:nth-child(14)) tbody td {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    width: auto !important;
    min-height: 21px !important;
    padding: 1px !important;
    border: 0 !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(1) { grid-area: select !important; }
  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(2) { grid-area: location !important; }
  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(3) { grid-area: transit !important; }
  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(4) { grid-area: type !important; }
  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(5) { grid-area: commander !important; }
  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(6) { grid-area: gun !important; }
  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(7) { grid-area: pilot !important; }
  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(8) { grid-area: bv !important; }
  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(9) { grid-area: mobilization !important; }
  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(10) { grid-area: lance !important; }
  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(14) { grid-area: training !important; }

  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(8) {
    gap: 3px !important;
    justify-content: flex-end !important;
    white-space: nowrap !important;
  }

  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(8)::before {
    content: "BV" !important;
    color: #d9b56b !important;
    font-family: var(--font-display) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.025em !important;
  }

  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(6),
  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(7) {
    gap: 3px !important;
    white-space: nowrap !important;
  }

  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(6)::before,
  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(7)::before {
    color: #d9b56b !important;
    font-family: var(--font-display) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.025em !important;
    text-transform: uppercase !important;
  }

  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(6)::before {
    content: "Gun" !important;
  }

  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(7)::before {
    content: "Pilot" !important;
  }

  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(11),
  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(12),
  .military-table:has(thead th:nth-child(14)) tbody td:nth-child(13) {
    display: none !important;
  }

  .military-table:has(thead th:nth-child(14)) .military-link-button {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .military-table:has(thead th:nth-child(14)) .military-unit-status {
    max-width: 100% !important;
    padding: 1px 5px !important;
    font-size: 9px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Formation tabs use fewer dynamically generated columns. Keep their
     native table model, but remove the desktop 940px minimum width. */
  .military-table:not(:has(thead th:nth-child(14))) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  .military-table:not(:has(thead th:nth-child(14))) th,
  .military-table:not(:has(thead th:nth-child(14))) td {
    min-width: 0 !important;
    padding: 5px 3px !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .military-modal {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Formation tables: Lances, Companies, Battalions and Regiments.
   Each source row remains intact with all 11 cells explicitly placed. */
@media screen {
  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    box-sizing: border-box !important;
  }

  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) thead,
  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) thead tr {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 32px !important;
    padding: 3px 6px !important;
    box-sizing: border-box !important;
  }

  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) thead th:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) thead th:first-child::after {
    content: "Select All" !important;
    color: #d9b56b !important;
    font-family: var(--font-display) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }

  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) thead th:nth-child(n+2) {
    display: none !important;
  }

  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody tr {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr) 74px !important;
    grid-template-areas:
      "select name name action"
      "parent parent members units"
      "bv training status mobilization"
      "locations locations locations locations" !important;
    gap: 4px 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 6px !important;
    padding: 6px !important;
    border: 1px solid rgba(143, 188, 201, .22) !important;
    border-radius: 5px !important;
    background: rgba(4, 11, 16, .58) !important;
    box-sizing: border-box !important;
  }

  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 11px 4px 2px !important;
    border: 0 !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
  }

  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td::before {
    position: absolute !important;
    top: 1px !important;
    left: 4px !important;
    color: #d9b56b !important;
    font-family: var(--font-display) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 9px !important;
    letter-spacing: .025em !important;
    text-transform: uppercase !important;
  }

  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td:nth-child(1) {
    grid-area: select !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td:nth-child(2) {
    grid-area: name !important;
    padding-top: 2px !important;
    font-size: 12px !important;
  }
  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td:nth-child(3) { grid-area: parent !important; }
  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td:nth-child(4) { grid-area: members !important; }
  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td:nth-child(5) { grid-area: units !important; }
  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td:nth-child(6) { grid-area: bv !important; }
  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td:nth-child(7) { grid-area: training !important; }
  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td:nth-child(8) { grid-area: locations !important; }
  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td:nth-child(9) { grid-area: status !important; }
  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td:nth-child(10) { grid-area: mobilization !important; }
  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td:nth-child(11) {
    grid-area: action !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 1px !important;
    font-size: 8px !important;
  }

  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td:nth-child(3)::before { content: "Parent" !important; }
  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td:nth-child(4)::before { content: "Members" !important; }
  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td:nth-child(5)::before { content: "Units" !important; }
  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td:nth-child(6)::before { content: "BV" !important; }
  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td:nth-child(7)::before { content: "Training" !important; }
  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td:nth-child(8)::before { content: "Locations" !important; }
  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td:nth-child(9)::before { content: "Status" !important; }
  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td:nth-child(10)::before { content: "Mobil." !important; }

  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) tbody td:nth-child(11) .military-link-button {
    min-width: 0 !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 3px 2px !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .military-table:has(thead th:nth-child(11)):not(:has(thead th:nth-child(12))) .military-unit-status {
    max-width: 100% !important;
    padding: 3px 5px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }
}

/* Towers: the source table has exactly eight cells per row. */
@media screen {
  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    box-sizing: border-box !important;
  }

  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) thead {
    display: none !important;
  }

  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) tbody tr {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-areas:
      "zone zone design status"
      "hex cf gunnery bv"
      "crew crew crew crew" !important;
    gap: 4px 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 6px !important;
    padding: 6px !important;
    border: 1px solid rgba(143, 188, 201, .22) !important;
    border-radius: 5px !important;
    background: rgba(4, 11, 16, .58) !important;
    box-sizing: border-box !important;
  }

  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) tbody td {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 11px 4px 2px !important;
    border: 0 !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
  }

  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) tbody td::before {
    position: absolute !important;
    top: 1px !important;
    left: 4px !important;
    color: #d9b56b !important;
    font-family: var(--font-display) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 9px !important;
    letter-spacing: .025em !important;
    text-transform: uppercase !important;
  }

  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) tbody td:nth-child(1) { grid-area: zone !important; }
  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) tbody td:nth-child(2) { grid-area: design !important; }
  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) tbody td:nth-child(3) { grid-area: hex !important; }
  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) tbody td:nth-child(4) { grid-area: cf !important; }
  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) tbody td:nth-child(5) { grid-area: crew !important; }
  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) tbody td:nth-child(6) { grid-area: gunnery !important; }
  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) tbody td:nth-child(7) { grid-area: bv !important; }
  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) tbody td:nth-child(8) { grid-area: status !important; }

  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) tbody td:nth-child(1)::before { content: "Zone" !important; }
  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) tbody td:nth-child(2)::before { content: "Design" !important; }
  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) tbody td:nth-child(3)::before { content: "Hex" !important; }
  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) tbody td:nth-child(4)::before { content: "CF" !important; }
  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) tbody td:nth-child(5)::before { content: "Crew" !important; }
  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) tbody td:nth-child(6)::before { content: "Gun" !important; }
  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) tbody td:nth-child(7)::before { content: "BV" !important; }
  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) tbody td:nth-child(8)::before { content: "Status" !important; }

  .military-table:has(thead th:nth-child(8)):not(:has(thead th:nth-child(9))) .military-unit-status {
    max-width: 100% !important;
    padding: 3px 5px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }
}

/* 08 — REHABILITATION */
@media (max-width: 767px) {
  .rehabilitation-body {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    padding: 5px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .rehabilitation-shell {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .rehabilitation-shell-content {
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 6px auto !important;
    padding: 6px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .rehabilitation-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    margin: 0 auto 7px !important;
  }

  .rehabilitation-summary-card {
    min-width: 0 !important;
    min-height: 64px !important;
    padding: 7px !important;
    box-sizing: border-box !important;
  }

  .rehabilitation-summary-label {
    font-size: 9px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.035em !important;
  }

  .rehabilitation-summary-value {
    margin-top: 3px !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .rehabilitation-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }

  .rehabilitation-panel {
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
  }

  .rehabilitation-panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px !important;
    margin-bottom: 6px !important;
  }

  .rehabilitation-panel-title {
    font-size: 16px !important;
    line-height: 1.08 !important;
    letter-spacing: 0.035em !important;
  }

  .rehabilitation-panel-subtitle {
    margin-top: 3px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  .rehabilitation-panel-actions {
    gap: 3px !important;
  }

  .rehabilitation-selected-count {
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  .rehabilitation-action-button {
    min-height: 34px !important;
    padding: 5px 7px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  .rehabilitation-table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .rehabilitation-table,
  .rehabilitation-table thead,
  .rehabilitation-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .rehabilitation-table thead {
    display: none !important;
  }

  .rehabilitation-table tbody tr:not(.rehabilitation-empty-row) {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 58px !important;
    grid-template-areas:
      "select pilot pilot health"
      "unit unit type status"
      "location location center center" !important;
    gap: 3px 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 6px !important;
    border-bottom: 1px solid rgba(240, 165, 26, 0.24) !important;
    box-sizing: border-box !important;
  }

  .rehabilitation-table tbody tr:not(.rehabilitation-empty-row) td {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 24px !important;
    padding: 1px !important;
    border: 0 !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
  }

  .rehabilitation-table tbody tr:not(.rehabilitation-empty-row) td:nth-child(1) { grid-area: select !important; }
  .rehabilitation-table tbody tr:not(.rehabilitation-empty-row) td:nth-child(2) { grid-area: pilot !important; }
  .rehabilitation-table tbody tr:not(.rehabilitation-empty-row) td:nth-child(3) { grid-area: unit !important; }
  .rehabilitation-table tbody tr:not(.rehabilitation-empty-row) td:nth-child(4) { grid-area: type !important; }
  .rehabilitation-table tbody tr:not(.rehabilitation-empty-row) td:nth-child(5) { grid-area: health !important; }
  .rehabilitation-table tbody tr:not(.rehabilitation-empty-row) td:nth-child(6) { grid-area: location !important; }
  .rehabilitation-table tbody tr:not(.rehabilitation-empty-row) td:nth-child(7) { grid-area: status !important; }
  .rehabilitation-table tbody tr:not(.rehabilitation-empty-row) td:nth-child(8) { grid-area: center !important; }

  .rehabilitation-table tbody tr:not(.rehabilitation-empty-row) td:nth-child(5)::before,
  .rehabilitation-table tbody tr:not(.rehabilitation-empty-row) td:nth-child(7)::before,
  .rehabilitation-table tbody tr:not(.rehabilitation-empty-row) td:nth-child(8)::before {
    margin-right: 3px !important;
    color: #d9b56b !important;
    font-family: var(--font-display) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
  }

  .rehabilitation-table tbody tr:not(.rehabilitation-empty-row) td:nth-child(5)::before { content: "HP" !important; }
  .rehabilitation-table tbody tr:not(.rehabilitation-empty-row) td:nth-child(7)::before { content: "Status" !important; }
  .rehabilitation-table tbody tr:not(.rehabilitation-empty-row) td:nth-child(8)::before { content: "Center" !important; }

  .rehabilitation-empty-row {
    display: block !important;
    width: 100% !important;
  }

  .rehabilitation-empty-row td {
    display: block !important;
    width: 100% !important;
    padding: 10px 6px !important;
    font-size: 11px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .rehabilitation-center-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .rehabilitation-center-card {
    min-width: 0 !important;
    padding: 8px !important;
    gap: 4px !important;
    box-sizing: border-box !important;
  }

  .rehabilitation-center-title-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  .rehabilitation-center-name {
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  .rehabilitation-center-level,
  .rehabilitation-center-location,
  .rehabilitation-center-owner,
  .rehabilitation-center-capacity,
  .rehabilitation-center-meta,
  .rehabilitation-sharing-badge {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .rehabilitation-center-capacity,
  .rehabilitation-center-meta {
    display: flex !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  .rehabilitation-capacity-bar {
    height: 8px !important;
    min-height: 8px !important;
  }

  .rehabilitation-center-actions .rehabilitation-action-button {
    width: 100% !important;
  }
}

/* 09 — FINANCE */
@media (max-width: 767px) {
  .finance-body {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    padding: 5px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .finance-background {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .finance-shell-content {
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 6px auto !important;
    padding: 6px !important;
    gap: 7px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .finance-header {
    margin: 0 !important;
    padding: 2px 0 !important;
  }

  .finance-title {
    font-size: 18px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.035em !important;
  }

  .finance-subtitle {
    margin-top: 2px !important;
    font-size: 10px !important;
  }

  .finance-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .finance-summary-card {
    min-width: 0 !important;
    min-height: 62px !important;
    padding: 7px !important;
    box-sizing: border-box !important;
  }

  .finance-card-label {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  .finance-card-value {
    margin-top: 4px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere !important;
  }

  .finance-main-grid,
  .finance-operations-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .finance-panel,
  .finance-operations-panel,
  .finance-operations-section,
  .finance-operations-recommendations {
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
  }

  .finance-panel-title,
  .finance-pressure-title {
    font-size: 15px !important;
    line-height: 1.08 !important;
    letter-spacing: 0.035em !important;
  }

  .finance-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 23px !important;
    padding: 3px 0 !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  .finance-row span {
    min-width: 0 !important;
  }

  .finance-row strong {
    flex: 0 0 auto !important;
    max-width: 52% !important;
    text-align: right !important;
    overflow-wrap: anywhere !important;
  }

  .finance-pressure-block {
    margin-top: 6px !important;
    padding-top: 6px !important;
  }

  .finance-pressure-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .finance-pressure-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 2px 5px !important;
    min-width: 0 !important;
    padding: 5px !important;
    font-size: 9px !important;
  }

  .finance-pressure-chip {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    padding: 1px 5px !important;
    font-size: 8px !important;
  }

  .finance-operations-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  .finance-state,
  .finance-operations-warning,
  .finance-panel-subtitle {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  .finance-operations-warning {
    margin: 6px 0 !important;
    padding: 6px !important;
  }

  .finance-operations-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .finance-operations-metric {
    min-width: 0 !important;
    padding: 6px !important;
    font-size: 9px !important;
  }

  .finance-operations-metric strong {
    font-size: 12px !important;
    overflow-wrap: anywhere !important;
  }

  .finance-operations-capacity-bar-block {
    margin: 6px 0 !important;
    padding: 6px !important;
  }

  .finance-operations-capacity-label {
    font-size: 9px !important;
  }

  .finance-operations-capacity-track {
    height: 8px !important;
    min-height: 8px !important;
  }

  .finance-operations-recommendations ul {
    margin: 5px 0 0 !important;
    padding-left: 18px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  .finance-log-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .finance-log-tab {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 5px 3px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  .finance-panel-header {
    display: block !important;
  }

  .finance-history-controls {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 4px !important;
    margin-top: 6px !important;
  }

  .finance-filter-label {
    align-self: center !important;
    font-size: 9px !important;
  }

  .finance-filter-select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 3px 5px !important;
    font-size: 10px !important;
  }

  .finance-history-controls > button {
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 4px !important;
    font-size: 9px !important;
  }

  #finance-history-refresh {
    grid-column: 1 / -1 !important;
  }

  .finance-history-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin: 6px 0 !important;
  }

  .finance-history-chip {
    min-width: 0 !important;
    padding: 5px !important;
    font-size: 9px !important;
  }

  .finance-history-chip strong {
    font-size: 10px !important;
    overflow-wrap: anywhere !important;
  }

  #finance-history-table-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .finance-history-table,
  .finance-history-table thead,
  .finance-history-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .finance-history-table thead {
    display: none !important;
  }

  .finance-history-table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "date type"
      "details details"
      "amount balance" !important;
    gap: 3px 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 6px !important;
    border-bottom: 1px solid rgba(240, 165, 26, 0.24) !important;
    box-sizing: border-box !important;
  }

  .finance-history-table tbody td {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    width: auto !important;
    min-height: 22px !important;
    padding: 1px !important;
    border: 0 !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
  }

  .finance-history-table tbody td:nth-child(1) { grid-area: date !important; }
  .finance-history-table tbody td:nth-child(2) { grid-area: type !important; }
  .finance-history-table tbody td:nth-child(3) { grid-area: details !important; }
  .finance-history-table tbody td:nth-child(4) { grid-area: amount !important; }
  .finance-history-table tbody td:nth-child(5) { grid-area: balance !important; }

  .finance-history-table tbody td:nth-child(4)::before,
  .finance-history-table tbody td:nth-child(5)::before {
    margin-right: 4px !important;
    color: #d9b56b !important;
    font-family: var(--font-display) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
  }

  .finance-history-table tbody td:nth-child(4)::before { content: "Amt" !important; }
  .finance-history-table tbody td:nth-child(5)::before { content: "Bal" !important; }

  /* Arena Bets: retain each seven-cell source row as one compact mobile card. */
  #finance-log-panel-arena-bets {
    gap: 4px !important;
    padding: 7px !important;
  }

  #finance-log-panel-arena-bets .finance-panel-header {
    margin: 0 !important;
    padding: 0 0 4px !important;
  }

  #finance-arena-bets-table-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 3px 0 0 !important;
    overflow-x: hidden !important;
  }

  #finance-arena-bets-table-container .finance-market-table,
  #finance-arena-bets-table-container thead,
  #finance-arena-bets-table-container tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #finance-arena-bets-table-container thead {
    display: none !important;
  }

  #finance-arena-bets-table-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  #finance-arena-bets-table-body tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-areas:
      "date arena status"
      "name name name"
      "stake payout net" !important;
    gap: 3px 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 5px 6px !important;
    border: 1px solid rgba(240, 165, 26, 0.22) !important;
    box-sizing: border-box !important;
  }

  #finance-arena-bets-table-body td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
  }

  #finance-arena-bets-table-body td:nth-child(1) {
    grid-area: date !important;
    color: #aebdc3 !important;
  }

  #finance-arena-bets-table-body td:nth-child(2) {
    grid-area: arena !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  #finance-arena-bets-table-body td:nth-child(3) {
    grid-area: name !important;
    padding: 3px 0 !important;
    border-top: 1px solid rgba(240, 165, 26, 0.14) !important;
    border-bottom: 1px solid rgba(240, 165, 26, 0.14) !important;
    color: #d8e7ee !important;
    font-size: 11px !important;
  }

  #finance-arena-bets-table-body td:nth-child(4) {
    grid-area: status !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  #finance-arena-bets-table-body td:nth-child(5) { grid-area: stake !important; }
  #finance-arena-bets-table-body td:nth-child(6) { grid-area: payout !important; }
  #finance-arena-bets-table-body td:nth-child(7) { grid-area: net !important; }

  #finance-arena-bets-table-body td:nth-child(n + 5) {
    text-align: right !important;
    white-space: nowrap !important;
  }

  #finance-arena-bets-table-body td:nth-child(n + 5)::before {
    display: block !important;
    margin-bottom: 1px !important;
    color: #d9b56b !important;
    font-family: var(--font-display) !important;
    font-size: 7px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  #finance-arena-bets-table-body td:nth-child(5)::before { content: "Stake" !important; }
  #finance-arena-bets-table-body td:nth-child(6)::before { content: "Payout" !important; }
  #finance-arena-bets-table-body td:nth-child(7)::before { content: "Net" !important; }
}

/* 10 — MARKET */
@media (max-width: 767px) {

  .market-body {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    padding: 5px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  .market-background {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .market-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    margin: 0 0 6px !important;
  }

  .market-scope-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .market-scope-tabs button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 5px 4px !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  .market-search {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .market-search label {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  .market-search input {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 4px 7px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }

  .market-search .market-search-status {
    grid-column: 1 / -1 !important;
    min-height: 0 !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  .market-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 0 7px !important;
    padding: 0 0 7px !important;
    overflow: visible !important;
  }

  .market-tabs button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 5px 3px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  .market-tabs button::before {
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: 0.025em !important;
    white-space: nowrap !important;
  }

  .market-tabs button:nth-child(1)::before { content: "Arms" !important; }
  .market-tabs button:nth-child(2)::before { content: "Mechs" !important; }
  .market-tabs button:nth-child(3)::before { content: "Weapons" !important; }
  .market-tabs button:nth-child(4)::before { content: "Equip" !important; }
  .market-tabs button:nth-child(5)::before { content: "Res" !important; }

  .market-container,
  .market-table-body-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .market-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: separate !important;
  }

  .market-table thead {
    display: none !important;
  }

  .market-table tbody {
    display: block !important;
    width: 100% !important;
  }

  .market-table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 64px 58px !important;
    grid-template-areas:
      "name name buy"
      "price bv qty" !important;
    gap: 4px 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 7px !important;
    border-bottom: 1px solid rgba(240, 165, 26, 0.28) !important;
    box-sizing: border-box !important;
  }

  .market-table tbody tr:nth-child(odd) {
    background: rgba(39, 62, 78, 0.48) !important;
  }

  .market-table tbody td {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    width: auto !important;
    min-height: 25px !important;
    margin: 0 !important;
    padding: 1px !important;
    border: 0 !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .market-table tbody td:nth-child(1) {
    grid-area: name !important;
    align-items: flex-start !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  .market-table tbody td:nth-child(2) { grid-area: price !important; }
  .market-table tbody td:nth-child(3) { grid-area: bv !important; }
  .market-table tbody td:nth-child(4) { grid-area: qty !important; }
  .market-table tbody td:nth-child(5) {
    grid-area: buy !important;
    justify-content: flex-end !important;
    padding: 0 !important;
  }

  /* Weapons, Equipment and Resources use four cells rather than
     the five-cell Arms/Mechs row. Their third value is Quantity
     and their fourth cell is the Buy action. */
  .market-table tbody tr:not(:has(> td:nth-child(5))) {
    grid-template-columns: minmax(0, 1fr) 72px 58px !important;
    grid-template-areas:
      "name name buy"
      "price qty buy" !important;
  }

  .market-table tbody tr:not(:has(> td:nth-child(5))) > td:nth-child(3) {
    grid-area: qty !important;
  }

  .market-table tbody tr:not(:has(> td:nth-child(5))) > td:nth-child(3)::before {
    content: "Qty" !important;
  }

  .market-table tbody tr:not(:has(> td:nth-child(5))) > td:nth-child(4) {
    grid-area: buy !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .market-table tbody tr:not(:has(> td:nth-child(5))) > td:nth-child(4)::before {
    display: none !important;
    content: none !important;
  }

  .market-table tbody td:nth-child(1) a {
    display: -webkit-box !important;
    min-width: 0 !important;
    max-height: 2.35em !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .market-table tbody td:nth-child(2)::before,
  .market-table tbody td:nth-child(3)::before,
  .market-table tbody td:nth-child(4)::before {
    flex: 0 0 auto !important;
    margin-right: 4px !important;
    color: #d9b56b !important;
    font-family: var(--font-display) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
  }

  .market-table tbody td:nth-child(2)::before { content: "Price" !important; }
  .market-table tbody td:nth-child(3)::before { content: "BV" !important; }
  .market-table tbody td:nth-child(4)::before { content: "Qty" !important; }

  .market-table tbody td:nth-child(5) button,
  .market-table tbody tr:not(:has(> td:nth-child(5))) > td:nth-child(4) button {
    width: 56px !important;
    min-width: 56px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 4px 2px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .market-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 7px 0 0 !important;
  }

  .market-pagination button {
    min-width: 42px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 4px 7px !important;
    font-size: 10px !important;
  }

  .market-buy-popup,
  .market-remove-popup,
  .market-popup {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - var(--shell-header-height, 113px) - 16px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }
}

/* 11 — WORLD MAP */
/* Waterfox may expose a desktop-width layout viewport on this page.
   Scope by the map DOM instead of an unreliable width breakpoint. */
@media screen {

  #worldMapContainer.world-map-container {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - var(--shell-header-height, 113px)) !important;
    min-height: 420px !important;
    margin: 0 !important;
    border-width: 1px !important;
    overflow: scroll !important;
    scrollbar-gutter: auto !important;
    box-sizing: border-box !important;
  }

  /* Only the safe-space margins around the map change. The map,
     canvas, marker layers and their coordinate system stay intact. */
  #worldMapContainer .world-map-stage {
    margin-top: 198px !important;
    margin-right: 88px !important;
    margin-bottom: 150px !important;
    margin-left: 6px !important;
  }

  /* Layer strip */
  #worldMapContainer .world-layer-stack {
    top: 4px !important;
    right: 6px !important;
    left: 6px !important;
    width: auto !important;
    gap: 4px !important;
    align-items: stretch !important;
  }

  #worldMapContainer .world-layer-toolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-height: 43px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 4px 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-radius: 7px !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  #worldMapContainer .world-layer-toolbar-title {
    flex: 0 0 auto !important;
    margin: 0 2px 0 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  #worldMapContainer .world-toggle-chip {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 32px !important;
    gap: 4px !important;
    padding: 3px 7px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  #worldMapContainer .world-toggle-chip input {
    width: 17px !important;
    min-width: 17px !important;
    height: 17px !important;
    min-height: 17px !important;
  }

  #worldMapContainer .world-zone-search {
    flex: 0 0 230px !important;
    grid-template-columns: 45px minmax(0, 1fr) !important;
    gap: 4px !important;
    width: 230px !important;
    min-width: 230px !important;
    margin: 0 !important;
  }

  #worldMapContainer .world-zone-search label {
    font-size: 8px !important;
    line-height: 1.05 !important;
  }

  #worldMapContainer .world-zone-search-row {
    grid-template-columns: minmax(0, 1fr) 42px !important;
    gap: 3px !important;
  }

  #worldMapContainer .world-zone-search input,
  #worldMapContainer .world-zone-search .world-action-button {
    height: 32px !important;
    min-height: 32px !important;
    box-sizing: border-box !important;
  }

  #worldMapContainer .world-zone-search input {
    padding: 3px 5px !important;
    font-size: 10px !important;
  }

  #worldMapContainer .world-zone-search .world-action-button {
    padding: 0 4px !important;
    font-size: 9px !important;
  }

  /* Selected-zone panel */
  #worldMapContainer .main-controls {
    --world-main-controls-top: 218px;
    position: absolute !important;
    top: var(--world-main-controls-top) !important;
    right: 6px !important;
    left: 6px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px 6px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: 136px !important;
    margin: 0 !important;
    padding: 6px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
  }

  #worldMapContainer .main-controls > .world-normal-text {
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.18 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #worldMapContainer #main-owner,
  #worldMapContainer #main-overlay-summary,
  #worldMapContainer #world-administration-zone-details,
  #worldMapContainer #world-relocation-panel,
  #worldMapContainer #world-selected-empire-colour {
    grid-column: 1 / -1 !important;
  }

  #worldMapContainer #main-overlay-summary {
    font-size: 8px !important;
    color: #b9cbd1 !important;
  }

  #worldMapContainer .main-controls > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 4px 5px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  /* Resource key */
  #worldMapContainer .world-resource-legend {
    top: auto !important;
    right: auto !important;
    bottom: 8px !important;
    left: 7px !important;
    width: 150px !important;
    max-width: 150px !important;
    max-height: 132px !important;
    margin: 0 !important;
    padding: 6px !important;
    overflow-y: auto !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
  }

  #worldMapContainer .world-resource-legend-title {
    margin: 0 0 4px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  #worldMapContainer .world-resource-legend-list {
    gap: 2px !important;
  }

  #worldMapContainer .world-resource-legend-row {
    gap: 5px !important;
    min-height: 14px !important;
    font-size: 8px !important;
    line-height: 1.05 !important;
  }

  #worldMapContainer .world-resource-legend-dot {
    width: 9px !important;
    min-width: 9px !important;
    height: 9px !important;
  }

  /* Map navigation */
  #worldMapContainer .zoom-controls {
    position: absolute !important;
    right: 8px !important;
    bottom: 8px !important;
    left: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, 38px) !important;
    align-items: start !important;
    justify-content: end !important;
    gap: 3px !important;
    width: 79px !important;
    height: auto !important;
  }

  #worldMapContainer .zoom-controls .misc-controls,
  #worldMapContainer .zoom-controls .zoom-levels {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    align-self: start !important;
  }

  #worldMapContainer .zoom-controls button,
  #worldMapContainer .zoom-controls .chat-controls button {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 2px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  #worldMapContainer .zoom-button img,
  #worldMapContainer .zoom-controls .chat-controls img {
    width: 26px !important;
    height: 26px !important;
  }

  #worldMapContainer .world-administration-legend {
    width: min(220px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: 45dvh !important;
    padding: 7px !important;
    font-size: 10px !important;
  }

  #worldMapContainer .world-popup {
    width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - var(--shell-header-height, 113px) - 16px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }
}

/* 12 — WAR ROOM */
@media screen {

  /* Waterfox exposes a desktop-width viewport here, so force the
     two main panels into the intended single-column mobile flow. */
  .war-room-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .war-room-grid > .war-room-panel {
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px !important;
    box-sizing: border-box !important;
  }

  /* Keep the existing AI target cards and their buttons intact. */
  .war-room-target {
    grid-template-columns: minmax(0, 1fr) 90px !important;
    gap: 7px !important;
    min-width: 0 !important;
    padding: 7px !important;
  }

  .war-room-target-name {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  .war-room-target-meta {
    gap: 3px !important;
    margin-top: 4px !important;
    font-size: 8px !important;
  }

  .war-room-target-meta span {
    padding: 2px 4px !important;
  }

  .war-room-target-action {
    width: 90px !important;
    min-width: 90px !important;
    min-height: 36px !important;
    padding: 4px !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  /* Active Wars remains one source row. CSS only presents its
     five cells as a compact three-line mobile card. */
  .war-room-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .war-room-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }

  .war-room-table thead {
    display: none !important;
  }

  .war-room-table tbody {
    display: block !important;
    width: 100% !important;
  }

  .war-room-table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "war defender"
      "state state"
      "declared cost" !important;
    gap: 4px 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 7px !important;
    border-bottom: 1px solid rgba(240, 165, 26, 0.28) !important;
    background: rgba(4, 11, 16, 0.62) !important;
    box-sizing: border-box !important;
  }

  .war-room-table tbody td {
    display: flex !important;
    align-items: baseline !important;
    min-width: 0 !important;
    width: auto !important;
    min-height: 22px !important;
    margin: 0 !important;
    padding: 1px !important;
    border: 0 !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
  }

  .war-room-table tbody td:nth-child(1) { grid-area: war !important; }
  .war-room-table tbody td:nth-child(2) { grid-area: defender !important; }
  .war-room-table tbody td:nth-child(3) { grid-area: state !important; }
  .war-room-table tbody td:nth-child(4) { grid-area: declared !important; }
  .war-room-table tbody td:nth-child(5) { grid-area: cost !important; }

  .war-room-table tbody td::before {
    flex: 0 0 auto !important;
    margin-right: 4px !important;
    color: #d9b56b !important;
    font-family: var(--font-display) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
  }

  .war-room-table tbody td:nth-child(1)::before { content: "War" !important; }
  .war-room-table tbody td:nth-child(2)::before { content: "Def" !important; }
  .war-room-table tbody td:nth-child(3)::before { content: "State" !important; }
  .war-room-table tbody td:nth-child(4)::before { content: "Date" !important; }
  .war-room-table tbody td:nth-child(5)::before { content: "Cost" !important; }
}

/* 13 — DONATE */
@media screen {

  .donate-body {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    padding: 5px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  .donate-background {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .donate-shell-content {
    width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 5px auto !important;
    padding: 8px !important;
    overflow: visible !important;
    scrollbar-gutter: auto !important;
    box-sizing: border-box !important;
  }

  #donation-points {
    display: block !important;
    margin: 0 0 6px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  .donate-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .donate,
  .donation-redeemable-items-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
    gap: 7px !important;
    box-sizing: border-box !important;
  }

  .donate-body h2 {
    margin: 0 0 7px !important;
    font-size: 18px !important;
    line-height: 1.08 !important;
  }

  #donation-box,
  #donation-premium,
  .donation-premium-containe,
  #donation-redeemable-items {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #donation-amount,
  #paypal-button-container,
  #paypal-button-container iframe {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #donation-amount {
    height: 38px !important;
    min-height: 38px !important;
    margin: 4px 0 7px !important;
    padding: 4px 7px !important;
    font-size: 13px !important;
  }

  #donation-redeemable-items {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  #donation-redeemable-items > .donation-redeemable-item {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
  }

  #donation-redeemable-items .donation-redeemable-item p {
    margin: 0 0 5px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  #donation-redeemable-items .donation-redeemable-item p strong {
    font-size: 15px !important;
    line-height: 1.1 !important;
  }

  #donation-redeemable-items label {
    display: inline-block !important;
    margin: 2px 4px 2px 0 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  #donation-redeemable-items input:not(.donation-quantity),
  #donation-redeemable-items select {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 3px 0 5px !important;
    padding: 4px 6px !important;
    font-size: 11px !important;
    box-sizing: border-box !important;
  }

  #donation-redeemable-items .donation-quantity {
    display: inline-block !important;
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 3px 0 5px !important;
    padding: 3px 6px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
  }

  #donation-redeemable-items .donation-details-button {
    display: inline-block !important;
    width: auto !important;
    min-height: 28px !important;
    margin: 0 0 5px !important;
    padding: 2px 0 !important;
    font-size: 10px !important;
  }

  #donation-redeemable-items .main-button,
  #donation-redeemable-items button[data-service-code] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 38px !important;
    margin: 3px 0 0 !important;
    padding: 5px 7px !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    box-sizing: border-box !important;
  }

  .donation-service-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
    width: 100% !important;
  }

  .donation-service-meta {
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  #donate-details-popup {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - var(--shell-header-height, 113px) - 16px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }
}

/* 14 — MECH DETAIL POPUP */
@media screen {
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) {
    width: calc(100vw - 12px) !important;
    min-width: 0 !important;
    max-width: 620px !important;
    max-height: calc(100dvh - var(--shell-header-height, 113px) - 12px) !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-title-bar {
    min-height: 50px !important;
    padding: 6px 8px 6px 12px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-title {
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #military-details-popup #military-details-name {
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-close {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #military-details-popup #close-button {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-sheet {
    min-width: 0 !important;
    padding: 7px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-sheet-scroll {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 2px 8px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 62px !important;
    gap: 7px !important;
    margin: 0 0 7px !important;
    padding: 7px !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-summary {
    min-width: 0 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-image-panel {
    width: 62px !important;
    min-width: 62px !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-electronics-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 7px !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 7px !important;
    padding: 7px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-title {
    margin: 0 0 5px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    box-sizing: border-box !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) th,
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) td {
    min-width: 0 !important;
    height: auto !important;
    padding: 4px 3px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-critical th:nth-child(1),
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-critical td:nth-child(1) {
    width: 54% !important;
    text-align: left !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-critical th:nth-child(2),
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-critical td:nth-child(2),
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-critical th:nth-child(3),
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-critical td:nth-child(3) {
    width: 23% !important;
    text-align: center !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-critical th:nth-child(1),
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-critical th:nth-child(2),
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-critical th:nth-child(3) {
    font-size: 0 !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-critical th:nth-child(1)::before {
    content: "Location" !important;
    font-size: 9px !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-critical th:nth-child(2)::before {
    content: "IS" !important;
    font-size: 9px !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-critical th:nth-child(3)::before {
    content: "Armor" !important;
    font-size: 9px !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-equipment th:nth-child(1),
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-equipment td:nth-child(1) { width: 32% !important; }
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-equipment th:nth-child(2),
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-equipment td:nth-child(2) { width: auto !important; }
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-equipment th:nth-child(3),
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-equipment td:nth-child(3) { width: 42px !important; text-align: center !important; }
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-equipment th:nth-child(4),
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-equipment td:nth-child(4) { width: 48px !important; text-align: right !important; }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons table {
    display: block !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons thead {
    display: block !important;
    width: 100% !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons thead tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(70px, .6fr) repeat(4, 38px) !important;
    width: 100% !important;
    min-width: 0 !important;
    border-bottom: 1px solid rgba(240, 165, 26, .45) !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons thead th {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 4px 2px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons thead th:nth-child(1),
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons thead th:nth-child(2) {
    justify-content: flex-start !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons thead th::before {
    font-size: 8px !important;
    letter-spacing: 0 !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons thead th:nth-child(1)::before { content: "Weapon" !important; }
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons thead th:nth-child(2)::before { content: "Loc" !important; }
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons thead th:nth-child(3)::before { content: "Heat" !important; }
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons thead th:nth-child(4)::before { content: "Ammo" !important; }
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons thead th:nth-child(5)::before { content: "Crit" !important; }
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons thead th:nth-child(6)::before { content: "Mass" !important; }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons tbody,
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons tfoot {
    display: block !important;
    width: 100% !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons tfoot tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(70px, .6fr) repeat(4, 38px) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons tfoot td {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 5px 2px !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons tfoot td:first-child {
    grid-column: 1 !important;
    justify-content: flex-start !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons tfoot td:nth-child(2) { grid-column: 2 !important; }
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons tfoot td:nth-child(3) { grid-column: 3 !important; }
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons tfoot td:nth-child(4) { grid-column: 4 !important; }
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons tfoot td:nth-child(5) { grid-column: 5 !important; }
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons tfoot td:nth-child(6) { grid-column: 6 !important; }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons tbody tr:not(.unitdetailspopup-note-row) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(70px, .6fr) repeat(4, 38px) !important;
    width: 100% !important;
    min-width: 0 !important;
    border-bottom: 1px solid rgba(143, 188, 201, .18) !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons tbody tr:not(.unitdetailspopup-note-row) td {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    padding: 5px 2px !important;
    font-size: 9px !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons tbody tr:not(.unitdetailspopup-note-row) td:nth-child(1),
  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-section-weapons tbody tr:not(.unitdetailspopup-note-row) td:nth-child(2) {
    justify-content: flex-start !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-note-row {
    display: block !important;
    width: 100% !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-note-row td:first-child:empty {
    display: none !important;
  }

  :is(#market-details-popup:has(.unitdetailspopup-section-critical), #military-details-popup, #research-details-popup) .unitdetailspopup-note-row td {
    display: block !important;
    width: 100% !important;
    padding: 4px !important;
    font-size: 9px !important;
  }
}

/* 15 — CHAT OVERLAY */
/* Waterfox may expose a desktop-width layout viewport, so scope this
   mobile treatment to the chat's unique DOM rather than a breakpoint. */
@media screen {

  #chat-body.chat-body {
    position: fixed !important;
    top: calc(var(--shell-header-height, 113px) + 6px) !important;
    right: 6px !important;
    bottom: 6px !important;
    left: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 10010 !important;
  }

  #chat-body > .chat-background {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px !important;
    box-sizing: border-box !important;
  }

  #chat-body .chat-tabs {
    flex: 0 0 auto !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 5px !important;
    padding: 0 0 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  #chat-body .chat-tabs > .chat-tab-button,
  #chat-body .chat-tabs > .dropdown,
  #chat-body .chat-tabs > .dropdown > .chat-tab-button {
    flex: 0 0 auto !important;
  }

  #chat-body .chat-tab-button {
    width: auto !important;
    min-width: 74px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  #chat-body #factionChatTab {
    max-width: 142px !important;
  }

  #chat-body .chat-container {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  #chat-body #chatContent.chat-content {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
  }

  #chat-body #chatMessages.chat-messages {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 5px !important;
    scrollbar-width: thin !important;
  }

  #chat-body .chat-message {
    width: auto !important;
    max-width: 96% !important;
    margin: 0 0 4px !important;
    padding: 5px 6px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
  }

  #chat-body .chat-message-time {
    margin-right: 3px !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  #chat-body .chat-username {
    font-size: 11px !important;
  }

  #chat-body .chat-input-container {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 5px !important;
    box-sizing: border-box !important;
  }

  #chat-body #chatInput.chat-input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 5px 7px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
  }

  #chat-body #sendChat.send-chat {
    flex: 0 0 66px !important;
    width: 66px !important;
    min-width: 66px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  #chat-body .dropdown-content {
    max-width: calc(100vw - 24px) !important;
    max-height: 40dvh !important;
    overflow-y: auto !important;
  }

  #chat-body .chat-popup {
    width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - var(--shell-header-height, 113px) - 16px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }
}

/* 15 — TOWERS */
@media (max-width: 767px) {
  .towers-page {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100% !important;
    padding: 4px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .towers-shell {
    display: grid !important;
    grid-template-rows: auto !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .towers-header {
    display: block !important;
    margin: 0 !important;
  }

  .towers-title {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .towers-summary {
    margin-top: 3px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .towers-status:empty {
    display: none !important;
  }

  .towers-status:not(:empty) {
    margin: 0 !important;
    padding: 5px 7px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .towers-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3px !important;
    width: 100% !important;
  }

  .towers-tab {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 4px 2px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .towers-content,
  .towers-workspace,
  .towers-create {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .towers-workspace,
  .towers-create {
    display: grid !important;
    gap: 5px !important;
    padding: 0 !important;
  }

  .towers-panel,
  .towers-builder-panel,
  .towers-design-summary-panel {
    width: 100% !important;
    min-width: 0 !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 6px !important;
    position: static !important;
    box-sizing: border-box !important;
  }

  .towers-panel-title,
  .towers-side-title {
    font-size: 13px !important;
    line-height: 1.05 !important;
  }

  .towers-empty {
    padding: 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  /* All roster/reference tables remain tables in the DOM; only rows become cards. */
  .towers-workspace .towers-table-scroll {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .towers-workspace .towers-table,
  .towers-workspace .towers-table thead,
  .towers-workspace .towers-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .towers-workspace .towers-table thead {
    display: none !important;
  }

  .towers-workspace .towers-table tbody {
    display: grid !important;
    gap: 4px !important;
  }

  .towers-workspace .towers-table tbody tr {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 5px 6px !important;
    border: 1px solid rgba(240, 165, 26, 0.24) !important;
    box-sizing: border-box !important;
  }

  .towers-workspace .towers-table tbody td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 1px !important;
    border: 0 !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
  }

  .towers-workspace .towers-table tbody td::before {
    display: block !important;
    margin-bottom: 1px !important;
    color: #d9b56b !important;
    font-family: var(--font-display) !important;
    font-size: 7px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  /* Towers tab: 12 source cells. */
  #towers-active-panel .towers-table tbody tr {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-areas:
      "design design zone zone"
      "hex cf facing status"
      "crew crew gun pilot"
      "bv complete complete complete"
      "actions actions actions actions" !important;
    gap: 4px 6px !important;
  }

  #towers-active-panel td:nth-child(1) { grid-area: design !important; }
  #towers-active-panel td:nth-child(2) { grid-area: zone !important; }
  #towers-active-panel td:nth-child(3) { grid-area: hex !important; }
  #towers-active-panel td:nth-child(4) { grid-area: cf !important; }
  #towers-active-panel td:nth-child(5) { grid-area: facing !important; }
  #towers-active-panel td:nth-child(6) { grid-area: crew !important; }
  #towers-active-panel td:nth-child(7) { grid-area: gun !important; }
  #towers-active-panel td:nth-child(8) { grid-area: pilot !important; }
  #towers-active-panel td:nth-child(9) { grid-area: bv !important; }
  #towers-active-panel td:nth-child(10) { grid-area: status !important; }
  #towers-active-panel td:nth-child(11) { grid-area: complete !important; }
  #towers-active-panel td:nth-child(12) { grid-area: actions !important; }

  #towers-active-panel td:nth-child(1),
  #towers-active-panel td:nth-child(2) {
    font-size: 11px !important;
    color: #d8e7ee !important;
  }

  #towers-active-panel td:nth-child(12) {
    padding-top: 4px !important;
    border-top: 1px solid rgba(240, 165, 26, 0.18) !important;
  }

  #towers-active-panel td:nth-child(1)::before { content: "Design" !important; }
  #towers-active-panel td:nth-child(2)::before { content: "Zone" !important; }
  #towers-active-panel td:nth-child(3)::before { content: "Hex" !important; }
  #towers-active-panel td:nth-child(4)::before { content: "CF" !important; }
  #towers-active-panel td:nth-child(5)::before { content: "Facing" !important; }
  #towers-active-panel td:nth-child(6)::before { content: "Crew" !important; }
  #towers-active-panel td:nth-child(7)::before { content: "Gun" !important; }
  #towers-active-panel td:nth-child(8)::before { content: "Pilot" !important; }
  #towers-active-panel td:nth-child(9)::before { content: "BV" !important; }
  #towers-active-panel td:nth-child(10)::before { content: "Status" !important; }
  #towers-active-panel td:nth-child(11)::before { content: "Complete" !important; }

  /* Designs tab: exactly nine source cells. */
  .towers-workspace .towers-table:has(thead th:nth-child(9):last-child) tbody tr {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-areas:
      "name name name"
      "cf levels power"
      "weapons bv cost"
      "maint maint actions" !important;
    gap: 4px 7px !important;
  }

  .towers-table:has(thead th:nth-child(9):last-child) td:nth-child(1) { grid-area: name !important; font-size: 12px !important; color: #d8e7ee !important; }
  .towers-table:has(thead th:nth-child(9):last-child) td:nth-child(2) { grid-area: cf !important; }
  .towers-table:has(thead th:nth-child(9):last-child) td:nth-child(3) { grid-area: levels !important; }
  .towers-table:has(thead th:nth-child(9):last-child) td:nth-child(4) { grid-area: power !important; }
  .towers-table:has(thead th:nth-child(9):last-child) td:nth-child(5) { grid-area: weapons !important; }
  .towers-table:has(thead th:nth-child(9):last-child) td:nth-child(6) { grid-area: bv !important; }
  .towers-table:has(thead th:nth-child(9):last-child) td:nth-child(7) { grid-area: cost !important; }
  .towers-table:has(thead th:nth-child(9):last-child) td:nth-child(8) { grid-area: maint !important; }
  .towers-table:has(thead th:nth-child(9):last-child) td:nth-child(9) { grid-area: actions !important; }

  .towers-table:has(thead th:nth-child(9):last-child) td:nth-child(1)::before { content: "Design" !important; }
  .towers-table:has(thead th:nth-child(9):last-child) td:nth-child(2)::before { content: "CF" !important; }
  .towers-table:has(thead th:nth-child(9):last-child) td:nth-child(3)::before { content: "Lvl" !important; }
  .towers-table:has(thead th:nth-child(9):last-child) td:nth-child(4)::before { content: "Power" !important; }
  .towers-table:has(thead th:nth-child(9):last-child) td:nth-child(5)::before { content: "Weapons" !important; }
  .towers-table:has(thead th:nth-child(9):last-child) td:nth-child(6)::before { content: "BV" !important; }
  .towers-table:has(thead th:nth-child(9):last-child) td:nth-child(7)::before { content: "Cost" !important; }
  .towers-table:has(thead th:nth-child(9):last-child) td:nth-child(8)::before { content: "Yearly" !important; }

  .towers-table:has(thead th:nth-child(9):last-child) td:nth-child(9) {
    padding-top: 4px !important;
    border-top: 1px solid rgba(240, 165, 26, 0.18) !important;
  }

  .towers-table-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .towers-link-button {
    flex: 1 1 auto !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 3px 6px !important;
    font-size: 9px !important;
  }

  /* Create tab. */
  .towers-create-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .towers-builder-heading {
    padding-bottom: 5px !important;
  }

  .towers-builder-title {
    font-size: 17px !important;
    line-height: 1 !important;
  }

  .towers-builder-section {
    gap: 6px !important;
    padding: 6px !important;
  }

  .towers-builder-section-title,
  .towers-summary-heading {
    font-size: 11px !important;
    line-height: 1.05 !important;
  }

  .towers-form-grid,
  .towers-form-grid-basics,
  .towers-form-grid-core {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .towers-form-grid-basics .towers-field:first-child {
    grid-column: 1 / -1 !important;
  }

  .towers-core-field-turret,
  .towers-core-field-engine,
  .towers-core-field-heat {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .towers-field {
    min-width: 0 !important;
    gap: 3px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  .towers-input,
  .towers-select,
  .towers-readout {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 3px 6px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
  }

  .towers-weapon-table-scroll {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .towers-weapon-table,
  .towers-weapon-table thead,
  .towers-weapon-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .towers-weapon-table thead {
    display: none !important;
  }

  .towers-weapon-table tbody tr:not(.towers-weapon-empty) {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) minmax(60px, auto) !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 5px !important;
    border-bottom: 1px solid rgba(240, 165, 26, 0.22) !important;
    box-sizing: border-box !important;
  }

  .towers-weapon-table tbody tr:not(.towers-weapon-empty) td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 1px !important;
    border: 0 !important;
    font-size: 9px !important;
  }

  .towers-weapon-empty,
  .towers-weapon-empty td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 6px !important;
    font-size: 10px !important;
    box-sizing: border-box !important;
  }

  .towers-add-weapon-button {
    min-height: 32px !important;
    padding: 3px 6px !important;
    font-size: 10px !important;
  }

  .towers-spec {
    gap: 4px !important;
    padding: 5px !important;
  }

  .towers-spec-state,
  .towers-spec-tonnage,
  .towers-spec-remaining {
    font-size: 10px !important;
  }

  .towers-spec-grid,
  .towers-spec-breakdown {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  .towers-spec-grid span,
  .towers-spec-breakdown span {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 3px 4px !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
  }

  .towers-create-design-button,
  .towers-toolbar-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 5px !important;
    font-size: 10px !important;
  }

  .towers-design-summary-panel {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .towers-design-summary-panel > .towers-side-title,
  .towers-design-summary-panel > .towers-summary-graphic {
    grid-column: 1 / -1 !important;
  }

  .towers-summary-graphic {
    width: 70px !important;
    height: 44px !important;
  }

  .towers-summary-block {
    gap: 4px !important;
    margin: 0 !important;
    padding-top: 5px !important;
  }

  .towers-summary-line {
    gap: 4px !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  .towers-create-inventory-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 72px !important;
    gap: 5px !important;
    width: 100% !important;
  }

  .towers-create-inventory-cost,
  .towers-create-inventory-form .towers-toolbar-button {
    grid-column: 1 / -1 !important;
  }

  .towers-create-inventory-cost .towers-readout {
    height: auto !important;
    min-height: 32px !important;
    white-space: normal !important;
  }

  /* Info tab reference text and ten-cell weapon rows. */
  .towers-reference-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  .towers-reference-grid > span {
    padding: 5px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .towers-info-table-scroll .towers-table:has(thead th:nth-child(10):last-child) tbody tr {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-areas:
      "weapon weapon weapon"
      "damage heat tons"
      "short medium long"
      "ammo weaponcost ammcost" !important;
    gap: 3px 6px !important;
  }

  .towers-info-table-scroll td:nth-child(1) { grid-area: weapon !important; font-size: 11px !important; color: #d8e7ee !important; }
  .towers-info-table-scroll td:nth-child(2) { grid-area: damage !important; }
  .towers-info-table-scroll td:nth-child(3) { grid-area: heat !important; }
  .towers-info-table-scroll td:nth-child(4) { grid-area: tons !important; }
  .towers-info-table-scroll td:nth-child(5) { grid-area: short !important; }
  .towers-info-table-scroll td:nth-child(6) { grid-area: medium !important; }
  .towers-info-table-scroll td:nth-child(7) { grid-area: long !important; }
  .towers-info-table-scroll td:nth-child(8) { grid-area: ammo !important; }
  .towers-info-table-scroll td:nth-child(9) { grid-area: weaponcost !important; }
  .towers-info-table-scroll td:nth-child(10) { grid-area: ammcost !important; }

  .towers-info-table-scroll td:nth-child(1)::before { content: "Weapon" !important; }
  .towers-info-table-scroll td:nth-child(2)::before { content: "Damage" !important; }
  .towers-info-table-scroll td:nth-child(3)::before { content: "Heat" !important; }
  .towers-info-table-scroll td:nth-child(4)::before { content: "Tons" !important; }
  .towers-info-table-scroll td:nth-child(5)::before { content: "Short" !important; }
  .towers-info-table-scroll td:nth-child(6)::before { content: "Medium" !important; }
  .towers-info-table-scroll td:nth-child(7)::before { content: "Long" !important; }
  .towers-info-table-scroll td:nth-child(8)::before { content: "Ammo/Ton" !important; }
  .towers-info-table-scroll td:nth-child(9)::before { content: "Weapon $" !important; }
  .towers-info-table-scroll td:nth-child(10)::before { content: "Ammo $" !important; }

  /* Designs > View: compact generated design-detail modal. */
  #tower-design-details-popup {
    top: calc(var(--shell-header-height) + 5px) !important;
    right: 5px !important;
    bottom: 5px !important;
    left: 5px !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
  }

  #tower-design-details-popup .towers-design-details-title {
    min-height: 40px !important;
    padding: 5px 48px 5px 10px !important;
    font-size: 16px !important;
    line-height: 1.05 !important;
  }

  #tower-design-details-popup .tactical-popup-close-button {
    top: 3px !important;
    right: 5px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
  }

  #tower-design-details-popup .towers-design-details-body {
    min-width: 0 !important;
    padding: 5px !important;
    overflow: hidden !important;
  }

  #tower-design-details-popup .towers-design-detail-panel {
    display: grid !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: 100% !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  #tower-design-details-popup .towers-detail-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #tower-design-details-popup .towers-detail-grid span {
    min-width: 0 !important;
    min-height: 0 !important;
    gap: 2px !important;
    padding: 4px 5px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
  }

  #tower-design-details-popup .towers-detail-grid span:first-child,
  #tower-design-details-popup .towers-detail-grid span:nth-child(12),
  #tower-design-details-popup .towers-detail-grid span:nth-child(13) {
    grid-column: 1 / -1 !important;
  }

  #tower-design-details-popup .towers-detail-grid b {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  #tower-design-details-popup .towers-detail-table-scroll {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  #tower-design-details-popup .towers-table,
  #tower-design-details-popup .towers-table thead,
  #tower-design-details-popup .towers-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #tower-design-details-popup .towers-table thead {
    display: none !important;
  }

  #tower-design-details-popup .towers-table tbody {
    display: grid !important;
    gap: 4px !important;
  }

  #tower-design-details-popup .towers-table tbody tr {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-areas:
      "weapon weapon weapon"
      "count arc heat"
      "weapontons ammotons bv" !important;
    gap: 3px 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 5px !important;
    border: 1px solid rgba(240, 165, 26, 0.24) !important;
    box-sizing: border-box !important;
  }

  #tower-design-details-popup .towers-table tbody td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 1px !important;
    border: 0 !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
  }

  #tower-design-details-popup .towers-table tbody td::before {
    display: block !important;
    margin-bottom: 1px !important;
    color: #d9b56b !important;
    font-family: var(--font-display) !important;
    font-size: 7px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  #tower-design-details-popup td:nth-child(1) { grid-area: weapon !important; font-size: 11px !important; color: #d8e7ee !important; }
  #tower-design-details-popup td:nth-child(2) { grid-area: count !important; }
  #tower-design-details-popup td:nth-child(3) { grid-area: arc !important; }
  #tower-design-details-popup td:nth-child(4) { grid-area: weapontons !important; }
  #tower-design-details-popup td:nth-child(5) { grid-area: ammotons !important; }
  #tower-design-details-popup td:nth-child(6) { grid-area: heat !important; }
  #tower-design-details-popup td:nth-child(7) { grid-area: bv !important; }

  #tower-design-details-popup td:nth-child(1)::before { content: "Weapon" !important; }
  #tower-design-details-popup td:nth-child(2)::before { content: "#" !important; }
  #tower-design-details-popup td:nth-child(3)::before { content: "Arc" !important; }
  #tower-design-details-popup td:nth-child(4)::before { content: "Weapon Tons" !important; }
  #tower-design-details-popup td:nth-child(5)::before { content: "Ammo Tons" !important; }
  #tower-design-details-popup td:nth-child(6)::before { content: "Heat" !important; }
  #tower-design-details-popup td:nth-child(7)::before { content: "BV" !important; }
}

/* 16 — ADMIN */
@media screen {
  .admin-page [hidden] {
    display: none !important;
  }

  .admin-body {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100% !important;
    padding: 5px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  .admin-background {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .admin-shell {
    display: grid !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 5px !important;
    padding: 7px !important;
    overflow: visible !important;
    scrollbar-gutter: auto !important;
    box-sizing: border-box !important;
  }

  .admin-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 5px 8px !important;
    padding: 7px !important;
    text-align: left !important;
  }

  .admin-header > div:first-child {
    min-width: 0 !important;
  }

  .admin-kicker {
    margin: 0 0 2px !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  .admin-title {
    font-size: 19px !important;
    line-height: 1 !important;
  }

  .admin-subtitle {
    margin: 3px 0 0 !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  .admin-status {
    min-height: 24px !important;
    padding: 3px 6px !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .admin-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 4px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .admin-tab-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 4px 5px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.035em !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  .admin-tab-button:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  .admin-tab-panel,
  .admin-feature-mount,
  :is(
    .admin-general-body,
    .admin-health-body,
    .admin-roll-statistics-body,
    .admin-abuse-pairs-body,
    .admin-player-bans-body
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }

  :is(
    .admin-general-shell,
    .admin-health-shell,
    .admin-roll-statistics-shell,
    .admin-abuse-pairs-shell,
    .admin-player-bans-shell
  ) {
    display: grid !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .admin-roll-statistics-background {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  :is(
    .admin-general-header,
    .admin-health-header,
    .admin-roll-statistics-header,
    .admin-abuse-pairs-header,
    .admin-player-bans-header
  ) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 5px 8px !important;
    padding: 6px !important;
  }

  :is(
    .admin-general-header,
    .admin-health-header,
    .admin-roll-statistics-header,
    .admin-abuse-pairs-header,
    .admin-player-bans-header
  ) > div:first-child {
    min-width: 0 !important;
  }

  :is(
    .admin-general-kicker,
    .admin-health-kicker,
    .admin-roll-statistics-kicker,
    .admin-abuse-pairs-kicker,
    .admin-player-bans-kicker
  ) {
    margin: 0 0 2px !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  :is(
    .admin-general-title,
    .admin-health-title,
    .admin-roll-statistics-title,
    .admin-abuse-pairs-title,
    .admin-player-bans-title
  ) {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.05 !important;
  }

  :is(
    .admin-general-subtitle,
    .admin-health-subtitle,
    .admin-roll-statistics-subtitle,
    .admin-abuse-pairs-subtitle,
    .admin-player-bans-subtitle,
    .admin-general-panel-subtitle,
    .admin-health-panel-heading p,
    .admin-roll-statistics-panel-subtitle,
    .admin-abuse-pairs-panel-subtitle,
    .admin-player-bans-panel-subtitle
  ) {
    margin: 3px 0 0 !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }

  :is(
    .admin-general-status,
    .admin-health-status,
    .admin-roll-statistics-status,
    .admin-abuse-pairs-status,
    .admin-player-bans-status
  ) {
    min-height: 24px !important;
    padding: 3px 6px !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .admin-health-header-actions {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 1fr) minmax(92px, auto) !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  :is(
    .admin-general-panel,
    .admin-health-panel,
    .admin-roll-statistics-controls,
    .admin-roll-statistics-panel,
    .admin-roll-statistics-summary,
    .admin-abuse-pairs-controls,
    .admin-abuse-pairs-panel,
    .admin-abuse-pairs-detail,
    .admin-abuse-pairs-summary,
    .admin-player-bans-panel,
    .admin-player-bans-summary
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6px !important;
    box-sizing: border-box !important;
  }

  :is(
    .admin-general-panel-header,
    .admin-health-panel-heading,
    .admin-roll-statistics-panel-header,
    .admin-abuse-pairs-panel-header,
    .admin-player-bans-panel-header
  ) {
    display: block !important;
    margin: 0 0 5px !important;
    padding: 0 0 5px !important;
  }

  :is(
    .admin-general-panel-title,
    .admin-health-panel-heading h2,
    .admin-roll-statistics-panel-title,
    .admin-abuse-pairs-panel-title,
    .admin-player-bans-panel-title
  ) {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.05 !important;
  }

  :is(
    .admin-general-form,
    .admin-roll-statistics-filter-row,
    .admin-abuse-pairs-filter-row,
    .admin-abuse-pairs-review-form,
    .admin-player-bans-form
  ) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 6px 0 0 !important;
  }

  :is(
    .admin-general-field,
    .admin-roll-statistics-field,
    .admin-abuse-pairs-field,
    .admin-player-bans-field
  ) {
    display: grid !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    box-sizing: border-box !important;
  }

  :is(
    .admin-general-field,
    .admin-roll-statistics-field,
    .admin-abuse-pairs-field,
    .admin-player-bans-field
  ) :is(input, select, textarea) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
  }

  :is(
    .admin-general-field,
    .admin-roll-statistics-field,
    .admin-abuse-pairs-field,
    .admin-player-bans-field
  ) textarea {
    min-height: 68px !important;
  }

  :is(
    .admin-general-form,
    .admin-health-header-actions,
    .admin-roll-statistics-filter-row,
    .admin-abuse-pairs-filter-row,
    .admin-abuse-pairs-review-form,
    .admin-player-bans-form,
    .admin-player-bans-panel-header
  ) button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  .admin-general-confirm {
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 5px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
  }

  .admin-general-confirm .tactical-checkbox {
    flex: 0 0 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
  }

  .admin-general-actions {
    width: 100% !important;
  }

  .admin-general-result {
    margin: 6px 0 0 !important;
    padding: 6px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  :is(
    .admin-health-summary,
    .admin-roll-statistics-summary-grid,
    .admin-abuse-pairs-summary-grid,
    .admin-player-bans-summary-grid
  ) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  :is(
    .admin-health-summary-item,
    .admin-roll-statistics-summary,
    .admin-abuse-pairs-summary,
    .admin-player-bans-summary
  ) {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 6px !important;
  }

  :is(
    .admin-health-summary-item span,
    .admin-roll-statistics-summary span,
    .admin-abuse-pairs-summary span,
    .admin-player-bans-summary span
  ) {
    margin: 0 0 3px !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  :is(
    .admin-health-summary-item strong,
    .admin-roll-statistics-summary strong,
    .admin-abuse-pairs-summary strong,
    .admin-player-bans-summary strong
  ) {
    font-size: 13px !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere !important;
  }

  :is(
    .admin-health-counter-grid,
    .admin-roll-statistics-main-grid,
    .admin-roll-statistics-detail-summary,
    .admin-roll-statistics-detail-chart-grid,
    .admin-abuse-pairs-grid,
    .admin-abuse-pairs-detail-metrics,
    .admin-player-bans-action-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .admin-health-counter {
    gap: 4px 7px !important;
    padding: 6px !important;
  }

  .admin-health-counter strong {
    font-size: 17px !important;
  }

  :is(
    .admin-health-table-wrap,
    .admin-roll-statistics-table-container,
    .admin-abuse-pairs-table-container,
    .admin-player-bans-feed-container
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
  }

  .admin-roll-statistics-roll-row {
    grid-template-columns: minmax(82px, 1fr) minmax(0, 1fr) !important;
    gap: 4px !important;
    padding: 5px !important;
  }

  .admin-roll-statistics-roll-count {
    grid-column: 1 / -1 !important;
  }

  :is(.admin-abuse-pairs-state, .admin-player-bans-state, .admin-health-message) {
    padding: 5px 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
}

/* Keep every popup close control at the right edge of its mobile title bar. */
.tactical-popup-title-bar:has(> button:last-child) {
  padding-right: 56px !important;
}

.tactical-popup-title-bar > button:last-child {
  position: absolute !important;
  top: 50% !important;
  right: 6px !important;
  bottom: auto !important;
  left: auto !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}

#research-tech-popup .research-tech-popup-close-button,
#tower-design-details-popup .tactical-popup-close-button {
  top: 50% !important;
  right: 6px !important;
}