/* =========================================================================
   MERIDIAN CONTROL — responsive.css
   Narrow viewports: the room stacks, the console becomes a full sheet, the
   big board collapses to a tabbed view. All controls stay reachable.
   ========================================================================= */

@media (max-width: 1100px) {
  #roommain { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr); }
  #rightcol { flex-direction: row; }
  #rightcol .rpanel { flex: 1; }
  #radiopanel .body { max-height: none; }
}

@media (max-width: 760px) {
  body { font-size: 13px; }
  #topbar { gap: 8px; padding: 6px 8px; }
  #topbar .brand b { font-size: 11px; }
  #mast { order: 10; width: 100%; justify-content: space-between; margin-left: 0; }
  #mast .cell { flex: 1; justify-content: center; padding: 4px 2px; }
  #mast .cell .txt { display: none; }
  .careerline { display: none; }
  #tbbtn-cadet span, #tbbtn-keys span { display: none; }

  #roommain { grid-template-columns: 1fr; grid-template-rows: minmax(220px, 42vh) auto; padding: 6px; gap: 6px; }
  #rightcol { flex-direction: column; }
  #alertlist .alertcard p { display: none; }

  /* console panel becomes a full-height sheet */
  #consolepanel.open { position: fixed; left: 0; right: 0; top: 52px; bottom: 86px; max-height: none; z-index: 60; }
  .con-grid { grid-template-columns: 1fr; }

  #dock { padding: 6px; gap: 5px; }
  .dockbtn { min-width: 64px; flex: 1 0 auto; padding: 6px 2px; }
  .dockbtn .rl { display: none; }
  .dockbtn .nm { font-size: 9.5px; }

  #lobby { padding: 20px 14px 46px; }
  .lobby-grid { grid-template-columns: 1fr; }
  .debrief-grid { grid-template-columns: 1fr; }
  #debriefwheel { max-width: 330px; }

  #cdbanner .t { font-size: 26px; }
  #boarddata { grid-template-columns: repeat(2, 1fr); }
  #statusbar .hint { display: none; }
}

@media (max-width: 430px) {
  .clockbox .get { font-size: 14px; }
  .dockbtn { min-width: 56px; }
}