/* Fixed virtual resolution (spec §7): every screen is designed
   against a logical 1024x768 4:3 stage; elite.core scales it to the
   window and the surplus letterboxes on black. This converts the DOM
   from "reflowing document" to "known screen". */
html, body {
  margin: 0;
  height: 100%;
  background: #000;
  color: #9f9;                       /* green-on-black, per original */
  font-family: "Courier New", monospace;
  overflow: hidden;
}
#app { height: 100%; }
.viewport {                          /* full-window centring frame */
  display: grid;
  place-items: center;
  height: 100%;
}
.stage {                             /* the 1024x768 logical screen */
  width: 1024px;
  height: 768px;
  position: relative;
  transform-origin: center center;
  outline: 1px solid #333;           /* faint edge marks the letterbox */
}

/* Docked frame (spec §7): header / tabs / content rows. Named layout
   classes own the grid; tachyons atomics keep owning skin. */
.docked-frame {
  display: grid;
  grid-template-rows: auto auto 1fr;
  height: 100%;
}
.header-bar { border-bottom: 1px solid #333; }
.tab-bar { display: grid; grid-template-columns: repeat(4, 1fr); }
.tab-bar button {
  background: #000; color: #9f9;
  border: 1px solid #333; font-family: inherit;
}
.tab-active { background: #131; outline: 1px solid #9f9; }

/* Market table: named grid owns the columns; yellow-on-black is the
   original's market palette. */
.market-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem 4rem 4rem 4rem 4rem;
  gap: 0 0.5rem;
  align-items: baseline;
}
.market-yellow { color: #fc0; }
.market-yellow button {
  background: #000; color: #fc0;
  border: 1px solid #660; font-family: inherit;
}

/* Chart: the SVG scales to its box; stars pick up pointer cursors
   only when clickable. */
.chart-frame { width: 100%; height: auto; background: #010; }
.chart-frame .star { fill: #777; }
.chart-frame .star.in-range { fill: #9f9; cursor: pointer; }
/* Overlays (crosshair, target ring) paint above the stars; clicks
   belong to the stars, so overlays never intercept pointer input. */
.chart-frame .chart-overlay { pointer-events: none; }

/* Session-outcome banner: the boundary crossing, made visible. */
.notice-docked { border: 1px solid #9f9; color: #9f9; }
.notice-died   { border: 1px solid #f66; color: #f66; }