html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
canvas#stage { display: block; position: fixed; inset: 0; cursor: default; }
#ui {
  position: fixed; right: 12px; bottom: 12px; z-index: 5;
  display: flex; flex-direction: column; align-items: flex-end;
  font-family: 'Fredoka', 'Trebuchet MS', sans-serif;
  opacity: 0.25; transition: opacity .25s;
}
#ui:hover, #ui:focus-within { opacity: 1; }
#ui.hidden { display: none; }
#ui .panel { display: none; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 640px; margin-top: 8px; }
#ui.open .panel { display: flex; }
#ui.open { opacity: 1; }
#ui button.gear { font-size: 14px; }
#ui button, #ui select {
  font: 600 13px 'Fredoka', sans-serif; color: #1b1035; background: #fff;
  border: 3px solid #1b1035; border-radius: 999px; padding: 5px 12px; cursor: pointer;
  box-shadow: 0 3px 0 #1b1035;
}
#ui button:active { transform: translateY(2px); box-shadow: 0 1px 0 #1b1035; }
#ui button.go { background: #ffd400; font-size: 15px; }
#ui select { max-width: 220px; }