html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #142033;
}

#hud {
  position: fixed;
  left: 12px;
  top: 12px;
  color: #dff;
  font: 13px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-shadow: 0 0 6px #0ff7;
  white-space: pre;
  user-select: none;
  z-index: 5;
}

#help {
  position: fixed;
  right: 12px;
  top: 12px;
  color: #fff;
  opacity: .9;
  font: 12px/1.35 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  text-align: right;
  max-width: 44ch;
  user-select: none;
  z-index: 5;
}

/* Simple UI bar for toggles */
#ui {
  position: fixed;
  left: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  z-index: 10;
}

#ui button {
  appearance: none;
  border: 1px solid #3ce1ff88;
  background: #0b162a;
  color: #dff;
  font: 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0 12px #00eaff22 inset, 0 0 8px #00eaff22;
  transition: transform .06s ease, background .2s ease, box-shadow .2s ease;
}

#ui button:hover { transform: translateY(-1px); }
#ui button[aria-pressed="false"] { opacity: .8; }


.screen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #142033;   /* dark backdrop */
  color: white;
  display: none;         /* hidden by default */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 100;          /* above canvas */
}

.screen.active {
  display: flex;         /* only active one shows */
}