:root {
  --bg: #05070a;
  --panel-bg: #0a0f0d;
  --panel-border: #1d2b22;
  --crt-green: #6fffb0;
  --crt-green-dim: #2c6e4b;
  --crt-amber-text: #b7f5cf;
  --text-dim: #5f8f77;
  --scope-bezel: #0e1512;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--crt-amber-text);
  font-family: "Courier New", ui-monospace, Menlo, Consolas, monospace;
}

.console {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 10px;
  gap: 8px;
}

.footer-mark {
  flex: 0 0 auto;
  text-align: center;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-dim);
  opacity: 0.6;
  padding-top: 2px;
}

.titlebar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--panel-border);
  padding-bottom: 6px;
  flex-wrap: wrap;
  gap: 6px;
}

.crt-title {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--crt-green);
  text-shadow: 0 0 6px rgba(111,255,176,0.55);
  margin-right: 14px;
}

.crt-subtitle {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-dim);
}

.titlebar-right {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--crt-green);
}

.layout {
  flex: 1;
  display: flex;
  gap: 10px;
  min-height: 0;
}

.ppi-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.scope-frame {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--scope-bezel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.85);
}

#ppiGL {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ppi-caption {
  font-size: 11px;
  color: var(--text-dim);
  padding: 5px 2px 0 2px;
  letter-spacing: 0.5px;
}

.side-panel {
  width: 340px;
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
}

.panel-label {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 6px;
  padding-bottom: 3px;
}

.ascope-block, .controls-block, .legend-block {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 10px;
}

#ascope {
  width: 100%;
  height: 190px;
  display: block;
  background: #01100a;
  border-radius: 4px;
}

.ctrl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 10px;
  color: var(--crt-amber-text);
}

.ctrl-row span:first-child {
  flex: 0 0 150px;
}

.ctrl-row input[type="range"] {
  flex: 1;
  accent-color: var(--crt-green);
}

.ctrl-val {
  flex: 0 0 56px;
  text-align: right;
  color: var(--crt-green);
}

.radar-select {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  background: #0e1a14;
  border: 1px solid var(--crt-green-dim);
  color: var(--crt-green);
  font-family: inherit;
  font-size: 12px;
  padding: 5px 6px;
  border-radius: 4px;
}

.range-select-row {
  align-items: center;
}

.range-select {
  display: flex;
  flex: 1;
  gap: 4px;
}

.range-btn {
  flex: 1;
  padding: 6px 4px;
  background: #0e1a14;
  border: 1px solid var(--crt-green-dim);
  color: var(--crt-amber-text);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.5px;
  cursor: pointer;
  border-radius: 4px;
}

.range-btn:hover { background: #142a1f; }

.range-btn.active {
  background: var(--crt-green-dim);
  color: #06140d;
  font-weight: bold;
}

.checkbox-row span:first-child {
  flex: 1 1 auto;
}

.checkbox-row input[type="checkbox"] {
  accent-color: var(--crt-green);
  width: 16px;
  height: 16px;
}

.ctrl-button {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  background: #0e1a14;
  border: 1px solid var(--crt-green-dim);
  color: var(--crt-green);
  letter-spacing: 2px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
}

.ctrl-button:hover { background: #142a1f; }
.ctrl-button.active {
  background: var(--crt-green-dim);
  color: #06140d;
}

.legend-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.legend-table td {
  padding: 3px 0;
  vertical-align: top;
}

.legend-table td:first-child {
  color: var(--text-dim);
  width: 46%;
}

.legend-table td:last-child {
  color: var(--crt-green);
  text-align: right;
}

@media (max-width: 900px) {
  /* On desktop, .console is deliberately locked to exactly 100vh with the
     side panel scrolling internally (overflow-y: auto), for a fixed
     console-like frame. Stacked to a single column on mobile, the side
     panel's own content (controls + both legend tables) is routinely
     taller than a phone viewport - forcing the same fixed 100vh here
     doesn't leave room for it. flexbox's response to that is to squeeze
     .ppi-panel down to 0 computed height while .scope-frame (flex: 0 0
     auto + aspect-ratio, so it refuses to shrink) overflows on top of the
     side panel anyway - which visually looks fine (the canvas just paints
     where it always did) but leaves the *actual layout boxes* of every
     sidebar control, including the radar-type <select>, sitting underneath
     that overflowing canvas, so taps land on the canvas instead of the
     control. Let the page grow past 100vh and scroll normally instead of
     fighting to cram everything into exactly one screen height. */
  .console { height: auto; min-height: 100vh; }
  .layout { flex-direction: column; }
  .side-panel { width: 100%; flex: 0 0 auto; overflow-y: visible; }
  .scope-frame { aspect-ratio: 1 / 1; flex: 0 0 auto; }
}