/* Panels extracted baseline; override or extend if needed */
.left-dashboard .hud-panel {
  max-height: none;
  overflow: visible;
  position: relative;
  z-index: 11;
  pointer-events: auto;
}
.right-dashboard .hud-panel {
  max-height: 46vh;
  overflow: auto;
  position: relative;
  z-index: 11;
  pointer-events: auto;
}

/* Ensure cockpit overlay panels remain interactive above HUD visuals */
#navPanel, #tacPanel, #pwrPanel { pointer-events: auto; }
#dimensionalPanel,
#timeControls {
  max-height: none;
  overflow-y: auto;
  position: relative;
  z-index: 11;
}
.hud-panel-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 480px) {
  .hud-panel-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Layer higher-level UI to avoid overlap issues */
#cosmicSensors {
  z-index: 1000;
  overflow: hidden;
}

/* Prevent HUD overlays appended in viewport from intercepting clicks on small screens */
.viewport-frame #targetBracket .box,
.viewport-frame #tbDist,
.viewport-frame #leadIndicator,
.viewport-frame #shieldArc,
.viewport-frame #weaponArc,
.viewport-frame #velocityVector {
  pointer-events: none !important;
}

#commandBar {
  z-index: 1250 !important;
  max-width: calc(100vw - 480px) !important; /* keep within side dashboards */
  overflow-x: auto;
  pointer-events: auto;
  left: 50% !important;
  transform: translateX(-42%);
}

.ads-container {
  z-index: 900 !important;
  pointer-events: auto;
}

/* Responsive: narrow side dashboards on smaller screens to reduce center overlap */
@media (max-width: 1871px) {
  .left-dashboard,
  .right-dashboard { width: 300px !important; }
  .viewport-frame { left: 320px !important; right: 320px !important; overflow: hidden !important; }
  #commandBar { max-width: calc(100vw - 640px) !important; }
  #cosmicSensors { width: calc(100vw - 640px) !important; }
}

@media (max-width: 1600px) {
  .left-dashboard,
  .right-dashboard { width: 270px !important; }
  .viewport-frame { left: 290px !important; right: 290px !important; overflow: hidden !important; }
  #commandBar { max-width: calc(100vw - 580px) !important; }
  #cosmicSensors { width: calc(100vw - 580px) !important; }
}

@media (max-width: 1024px) {
  .left-dashboard,
  .right-dashboard {
    width: 230px !important;
  }
  /* Constrain cockpit window and clip HUD within on medium screens */
  .viewport-frame {
    left: 250px !important;
    right: 250px !important;
    bottom: 100px !important;
    overflow: hidden !important;
  }
}

@media (max-width: 768px) {
  .left-dashboard,
  .right-dashboard {
    width: 200px !important;
    top: 20px !important;
  }
  .viewport-frame {
    top: 20px !important;
    left: 210px !important;
    right: 210px !important;
    bottom: 90px !important;
    overflow: hidden !important;
  }
  /* Tighter command bar spacing on small screens */
  #commandBar {
    gap: 6px !important;
    padding: 4px 8px !important;
    font-size: 9px !important;
  }
}