/* =========================
   BOTTOM UI GRID
========================= */
#bottomUI {
  width: 100%;
  height: 224px;
  display: grid;
  grid-template-columns: 2fr minmax(220px, 320px) minmax(260px, 360px) minmax(180px, 220px);
  gap: var(--ui-gap);
  padding: 12px;
  background: var(--window-surface-strong, rgba(10, 12, 19, 0.97)) !important;
  border-top: 2px solid var(--window-border, rgba(245, 158, 11, 0.35)) !important;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.8), 0 0 20px var(--window-accent-soft, rgba(245, 158, 11, 0.15));
  align-items: stretch;
  z-index: 1000;
}

#chatSection, #minimapContainer, #hudSection, #optionsSection {
  min-width: 0;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  background: var(--window-surface, linear-gradient(180deg, rgba(20, 24, 38, 0.96) 0%, rgba(11, 14, 23, 0.98) 100%)) !important;
  border: 1px solid var(--window-border, rgba(245, 158, 11, 0.35)) !important;
  border-radius: var(--window-radius-sm, 10px) !important;
}

@media (min-width: 1025px) {
  #bottomUI {
    height: 268px;
    grid-template-columns: minmax(0, 1.9fr) minmax(240px, 320px) minmax(300px, 380px);
  }
}